Merge pull request #46 from eryue0220/feat/solid-example

eryue0220 · web-flow · commit 6ccdd2e65f5e · 2024-07-12T10:49:32.000+08:00
feat: add solid-example
diff --git a/examples/esbuild-example/package.json b/examples/esbuild-example/package.json
@@ -1,6 +1,5 @@
 {
   "name": "esbuild-example",
-  "version": "0.0.1",
   "private": true,
   "scripts": {
     "build": "node scripts/build.mjs",
diff --git a/examples/farm-example/package.json b/examples/farm-example/package.json
@@ -1,6 +1,5 @@
 {
   "name": "farm-example",
-  "version": "0.0.1",
   "private": true,
   "type": "module",
   "scripts": {
diff --git a/examples/rollup-example/package.json b/examples/rollup-example/package.json
@@ -1,6 +1,5 @@
 {
   "name": "rollup-example",
-  "version": "0.0.1",
   "private": true,
   "type": "module",
   "scripts": {
diff --git a/examples/rsbuild-example/package.json b/examples/rsbuild-example/package.json
@@ -1,6 +1,5 @@
 {
   "name": "rsbuild-example",
-  "version": "0.0.1",
   "private": true,
   "scripts": {
     "dev": "rsbuild dev",
diff --git a/examples/rspack-example/package.json b/examples/rspack-example/package.json
@@ -1,6 +1,5 @@
 {
   "name": "rspack-example",
-  "version": "0.0.1",
   "private": true,
   "scripts": {
     "dev": "rspack serve",
diff --git a/examples/solid-example/index.html b/examples/solid-example/index.html
@@ -0,0 +1,25 @@
+<!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>StyleX with Solid</title>
+    <style>
+        @layer reset {
+            body {
+                box-sizing: border-box;
+                padding: 0;
+                margin: 0;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div id="root"></div>
+    <script type="module" src="./src/index.jsx"></script>
+</body>
+
+</html>
diff --git a/examples/solid-example/package.json b/examples/solid-example/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "solid-example",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "@stylexjs/open-props": "^0.6.0",
+    "@stylexjs/stylex": "^0.6.0",
+    "solid-js": "^1.8.18"
+  },
+  "devDependencies": {
+    "unplugin-stylex": "workspace:*",
+    "vite": "^5.3.3",
+    "vite-plugin-solid": "^2.10.2"
+  }
+}
diff --git a/examples/solid-example/src/index.jsx b/examples/solid-example/src/index.jsx
@@ -0,0 +1,42 @@
+import { render } from 'solid-js/web'
+import * as stylex from '@stylexjs/stylex'
+import { colors } from '@stylexjs/open-props/lib/colors.stylex'
+import { sizes } from '@stylexjs/open-props/lib/sizes.stylex'
+import { fonts } from '@stylexjs/open-props/lib/fonts.stylex'
+
+const styles = stylex.create({
+  main: {
+    width: '100vw',
+    height: '100vh',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: colors.pink7,
+  },
+  card: {
+    backgroundColor: colors.blue9,
+    padding: sizes.spacing5,
+    borderRadius: sizes.spacing2,
+    justifyContent: 'center',
+    display: 'flex',
+    alignItems: 'center',
+    color: colors.gray0,
+    fontFamily: fonts.mono,
+  },
+})
+
+function App() {
+  return (
+    <div {...stylex.props(styles.main)}>
+      <div {...stylex.props(styles.card)}>
+        <span>Blue rounded rectangle</span>
+      </div>
+    </div>
+  )
+}
+
+const root = document.getElementById('root')
+
+if (root) {
+  render(() => <App />, root)
+}
diff --git a/examples/solid-example/vite.config.js b/examples/solid-example/vite.config.js
@@ -0,0 +1,20 @@
+import { defineConfig } from 'vite'
+import solid from 'vite-plugin-solid'
+import stylexVitePlugin from 'unplugin-stylex/vite'
+
+export default defineConfig({
+  build: {
+    outDir: 'dist'
+  },
+  plugins: [
+    solid(),
+    stylexVitePlugin({
+      dev: true,
+      stylex: {
+        useCSSLayers: true,
+        genConditionalClasses: true,
+        treeshakeCompensation: true,
+      },
+    }),
+  ],
+})
diff --git a/examples/vite-example/package.json b/examples/vite-example/package.json
@@ -1,6 +1,5 @@
 {
   "name": "vite-example",
-  "version": "0.0.1",
   "private": true,
   "scripts": {
     "dev": "vite",
diff --git a/examples/vue-example/package.json b/examples/vue-example/package.json
@@ -1,7 +1,6 @@
 {
   "name": "vue-example",
   "private": "true",
-  "version": "0.0.1",
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc && vite build"
diff --git a/examples/webpack-example/package.json b/examples/webpack-example/package.json
@@ -1,6 +1,5 @@
 {
   "name": "webpack-example",
-  "version": "0.0.1",
   "private": true,
   "scripts": {
     "dev": "NODE_ENV=development webpack serve",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,5 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "esbuild-example",`
`3`		`- "version": "0.0.1",`
`4`	`3`	`"private": true,`
`5`	`4`	`"scripts": {`
`6`	`5`	`"build": "node scripts/build.mjs",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,5 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "farm-example",`
`3`		`- "version": "0.0.1",`
`4`	`3`	`"private": true,`
`5`	`4`	`"type": "module",`
`6`	`5`	`"scripts": {`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,5 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "rollup-example",`
`3`		`- "version": "0.0.1",`
`4`	`3`	`"private": true,`
`5`	`4`	`"type": "module",`
`6`	`5`	`"scripts": {`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,5 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "rsbuild-example",`
`3`		`- "version": "0.0.1",`
`4`	`3`	`"private": true,`
`5`	`4`	`"scripts": {`
`6`	`5`	`"dev": "rsbuild dev",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,5 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "rspack-example",`
`3`		`- "version": "0.0.1",`
`4`	`3`	`"private": true,`
`5`	`4`	`"scripts": {`
`6`	`5`	`"dev": "rspack serve",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,5 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "vite-example",`
`3`		`- "version": "0.0.1",`
`4`	`3`	`"private": true,`
`5`	`4`	`"scripts": {`
`6`	`5`	`"dev": "vite",`