chore: add vite exmaple

facebook · Dec 19, 2023 · 7fa3cdf · 7fa3cdf
1 parent 5ddd3c6
commit 7fa3cdf
Show file tree

Hide file tree

Showing 5 changed files with 296 additions and 7 deletions.
diff --git a/apps/vite-example/index.html b/apps/vite-example/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./src/main.jsx"></script>
+  </body>
+</html>
diff --git a/apps/vite-example/package.json b/apps/vite-example/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "vite-example",
+  "version": "0.3.0",
+  "description": "A simple rollup example to test stylexjs/vite-plugin",
+  "main": "index.js",
+  "scripts": {
+    "build": "vite build",
+    "start": "vite"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@stylexjs/stylex": "0.3.0",
+    "@stylexjs/vite-plugin": "0.3.0"
+  },
+  "devDependencies": {
+    "vite": "^5.0.10",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.2.1"
+  }
+}
diff --git a/apps/vite-example/src/main.jsx b/apps/vite-example/src/main.jsx
@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+import React, { useState } from 'react';
+import ReactDOM from 'react-dom/client';
+import stylex from '@stylexjs/stylex';
+
+const styles = stylex.create({
+  text: { fontSize: '20px', cursor: 'pointer' },
+  blue: {
+    color: 'blue',
+  },
+  red: {
+    color: 'red',
+  },
+});
+
+export default function Application() {
+  const [color, setColor] = useState('red');
+
+  const handleClick = () => {
+    setColor((pre) => (pre === 'red' ? 'blue' : 'red'));
+  };
+
+  return (
+    <div>
+      <button
+        onClick={handleClick}
+        {...stylex.props(
+          styles.text,
+          color === 'red' ? styles.red : styles.blue,
+        )}
+      >
+        Action
+      </button>
+    </div>
+  );
+}
+
+ReactDOM.createRoot(document.querySelector('#app')).render(
+  <React.StrictMode>
+    <Application />
+  </React.StrictMode>,
+);
diff --git a/apps/vite-example/vite.config.mjs b/apps/vite-example/vite.config.mjs
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+import { defineConfig } from 'vite';
+import React from '@vitejs/plugin-react';
+import StylexPlugin from '@stylexjs/vite-plugin';
+
+export default defineConfig({
+  plugins: [React(), StylexPlugin()],
+});
diff --git a/package-lock.json b/package-lock.json