chore: add civet exmaple

nonzzz · Jan 12, 2024 · b89cb63 · b89cb63
1 parent cdf96d3
commit b89cb63
Show file tree

Hide file tree

Showing 6 changed files with 148 additions and 2 deletions.
diff --git a/examples/civet-demo/index.html b/examples/civet-demo/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <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.civet"></script>
+</body>
+</html>
diff --git a/examples/civet-demo/package.json b/examples/civet-demo/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "civet-demo",
+  "type": "module",
+  "scripts": {
+    "dev": "vite"
+  },
+  "devDependencies": {
+    "@danielx/civet": "^0.6.62",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
+    "@vitejs/plugin-react": "^4.2.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "vite": "^5.0.10",
+    "vite-plugin-stylex-dev": "workspace:*"
+  }
+}
diff --git a/examples/civet-demo/src/main.civet b/examples/civet-demo/src/main.civet
@@ -0,0 +1,25 @@
+import * as stylex from '@stylexjs/stylex'
+import ReactDOM from 'react-dom/client'
+import React from 'react'
+
+styles := stylex.create
+  base:
+    margin: 0
+    padding: 0
+    color: 'red'
+    fontSize: '30px'
+    border: '1px solid green'
+
+
+export function App()
+  <div>
+    <p {...stylex.props(styles.base)}>
+      Hello, World!
+    </p>
+  </div>
+
+ReactDOM.createRoot(document.querySelector('#app')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)
diff --git a/examples/civet-demo/tsconfig.json b/examples/civet-demo/tsconfig.json
@@ -0,0 +1,12 @@
+{
+    "compilerOptions": {
+      "strict": true,
+      "jsx": "preserve",
+      "lib": ["es2021","DOM"],
+      "moduleResolution":"Bundler",
+      "module": "ESNext",
+      "forceConsistentCasingInFileNames": true,
+      "resolveJsonModule": true,
+      "esModuleInterop": true
+    },
+  }
diff --git a/examples/civet-demo/vite.config.ts b/examples/civet-demo/vite.config.ts
@@ -0,0 +1,9 @@
+import civetPlugin from '@danielx/civet/vite'
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { stylexPlugin } from 'vite-plugin-stylex-dev'
+
+export default defineConfig({
+  // Fixme @stylexjs/stylex don't respect `runtimeInjection` so we should set `dev` as false
+  plugins: [civetPlugin({}), react(), stylexPlugin({ include: /\.(mjs|js|ts|civet|jsx|tsx)(\?.*|)$/, dev: false })]
+})
diff --git a/yarn.lock b/yarn.lock
@@ -665,6 +665,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@cspotcode/source-map-support@npm:^0.8.1":
+  version: 0.8.1
+  resolution: "@cspotcode/source-map-support@npm:0.8.1"
+  dependencies:
+    "@jridgewell/trace-mapping": 0.3.9
+  checksum: 5718f267085ed8edb3e7ef210137241775e607ee18b77d95aa5bd7514f47f5019aa2d82d96b3bf342ef7aa890a346fa1044532ff7cc3009e7d24fce3ce6200fa
+  languageName: node
+  linkType: hard
+
+"@danielx/civet@npm:^0.6.62":
+  version: 0.6.62
+  resolution: "@danielx/civet@npm:0.6.62"
+  dependencies:
+    "@cspotcode/source-map-support": ^0.8.1
+    "@typescript/vfs": ^1.5.0
+    unplugin: ^1.6.0
+  peerDependencies:
+    typescript: ^4.5 || ^5.0
+  bin:
+    civet: dist/civet
+  checksum: a700c1da4ca569ed9c2a481a4bbbe0b54468edd6e8408a6490ccaf3dc018b1f4c4c37f301661be5eeac74d714eed8489297598fdfeb3294c2407cc16e5a188b3
+  languageName: node
+  linkType: hard
+
 "@emotion/hash@npm:^0.9.0":
   version: 0.9.1
   resolution: "@emotion/hash@npm:0.9.1"
@@ -1107,7 +1131,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jridgewell/resolve-uri@npm:^3.1.0":
+"@jridgewell/resolve-uri@npm:^3.0.3, @jridgewell/resolve-uri@npm:^3.1.0":
   version: 3.1.1
   resolution: "@jridgewell/resolve-uri@npm:3.1.1"
   checksum: f5b441fe7900eab4f9155b3b93f9800a916257f4e8563afbcd3b5a5337b55e52bd8ae6735453b1b745457d9f6cdb16d74cd6220bbdd98cf153239e13f6cbb653
@@ -1138,6 +1162,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jridgewell/trace-mapping@npm:0.3.9":
+  version: 0.3.9
+  resolution: "@jridgewell/trace-mapping@npm:0.3.9"
+  dependencies:
+    "@jridgewell/resolve-uri": ^3.0.3
+    "@jridgewell/sourcemap-codec": ^1.4.10
+  checksum: d89597752fd88d3f3480845691a05a44bd21faac18e2185b6f436c3b0fd0c5a859fbbd9aaa92050c4052caf325ad3e10e2e1d1b64327517471b7d51babc0ddef
+  languageName: node
+  linkType: hard
+
 "@jridgewell/trace-mapping@npm:^0.3.12, @jridgewell/trace-mapping@npm:^0.3.17, @jridgewell/trace-mapping@npm:^0.3.18, @jridgewell/trace-mapping@npm:^0.3.9":
   version: 0.3.20
   resolution: "@jridgewell/trace-mapping@npm:0.3.20"
@@ -3141,6 +3175,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript/vfs@npm:^1.5.0":
+  version: 1.5.0
+  resolution: "@typescript/vfs@npm:1.5.0"
+  dependencies:
+    debug: ^4.1.1
+  checksum: 09916e2fc567fe993fd81a34a48f72183b4c84d73a6bfdd8d4ca60ecd28de80fbb509b050f30513913b86270dc2abc759cffb4c0fd1068f7dd53104a1b0b7e27
+  languageName: node
+  linkType: hard
+
 "@ungap/structured-clone@npm:^1.0.0, @ungap/structured-clone@npm:^1.2.0":
   version: 1.2.0
   resolution: "@ungap/structured-clone@npm:1.2.0"
@@ -4757,6 +4800,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"civet-demo@workspace:examples/civet-demo":
+  version: 0.0.0-use.local
+  resolution: "civet-demo@workspace:examples/civet-demo"
+  dependencies:
+    "@danielx/civet": ^0.6.62
+    "@stylexjs/stylex": ^0.4.1
+    "@types/react": ^18.2.45
+    "@types/react-dom": ^18.2.18
+    "@vitejs/plugin-react": ^4.2.1
+    react: ^18.2.0
+    react-dom: ^18.2.0
+    vite: ^5.0.10
+    vite-plugin-stylex-dev: "workspace:*"
+  languageName: unknown
+  linkType: soft
+
 "clean-stack@npm:^2.0.0":
   version: 2.2.0
   resolution: "clean-stack@npm:2.2.0"
@@ -15152,6 +15211,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unplugin@npm:^1.6.0":
+  version: 1.6.0
+  resolution: "unplugin@npm:1.6.0"
+  dependencies:
+    acorn: ^8.11.2
+    chokidar: ^3.5.3
+    webpack-sources: ^3.2.3
+    webpack-virtual-modules: ^0.6.1
+  checksum: 1c2817f791f4fe59543f5b0cbedba6c37f66005c43c48260dc5934d13bb90ea347aa0040a9701bfeca072b99dd464e67133f5d5237191874499db73d62ab01fa
+  languageName: node
+  linkType: hard
+
 "unstorage@npm:^1.10.1":
   version: 1.10.1
   resolution: "unstorage@npm:1.10.1"
@@ -16016,7 +16087,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"webpack-virtual-modules@npm:^0.6.0":
+"webpack-virtual-modules@npm:^0.6.0, webpack-virtual-modules@npm:^0.6.1":
   version: 0.6.1
   resolution: "webpack-virtual-modules@npm:0.6.1"
   checksum: 0cd993d7b00af0ed89eee96ed6dcb2307fa8dc38e37f34e78690088314976aa79a31cf146553c5e414cdc87222878c5e4979abeb0b00bf6dc9c6f018604a1310