feat: add solid integration, first-party extensions, demo

.yarn/patches/@vanilla-extract-vite-plugin-npm-4.0.12-ed14a9ba3b.patch

@@ -0,0 +1,88 @@
+diff --git a/dist/vanilla-extract-vite-plugin.cjs.d.ts b/dist/vanilla-extract-vite-plugin.cjs.d.ts
+index 894123b02572365e9179a39fad2f896de87e383d..c18d10bc97270a768999a91d3b17b27f4eda14fa 100644
+--- a/dist/vanilla-extract-vite-plugin.cjs.d.ts
++++ b/dist/vanilla-extract-vite-plugin.cjs.d.ts
+@@ -1,9 +1,10 @@
+-import { Plugin } from 'vite';
++import { UserConfig, Plugin } from 'vite';
+ import { IdentifierOption } from '@vanilla-extract/integration';
+
+ interface Options {
+     identifiers?: IdentifierOption;
+     unstable_mode?: 'transform' | 'emitCss';
++    viteConfigOverrides?: Partial<UserConfig>;
+ }
+ declare function vanillaExtractPlugin({ identifiers, unstable_mode: mode, }?: Options): Plugin;
+
+diff --git a/dist/vanilla-extract-vite-plugin.cjs.dev.js b/dist/vanilla-extract-vite-plugin.cjs.dev.js
+index de4b386d46daa7b6a8f8d3760ce84d0817ba2be9..718e09874b971002ed03f4640a18a230896716e4 100644
+--- a/dist/vanilla-extract-vite-plugin.cjs.dev.js
++++ b/dist/vanilla-extract-vite-plugin.cjs.dev.js
+@@ -27,7 +27,8 @@ plugin.name !== 'vanilla-extract' &&
+ !plugin.name.startsWith('remix');
+ function vanillaExtractPlugin({
+   identifiers,
+-  unstable_mode: mode = 'emitCss'
++  unstable_mode: mode = 'emitCss',
++  viteConfigOverrides,
+ } = {}) {
+   let config;
+   let configEnv;
+@@ -116,7 +117,8 @@ function vanillaExtractPlugin({
+         }
+         const viteConfig = {
+           ...configForViteCompiler,
+-          plugins: (_configForViteCompile = configForViteCompiler) === null || _configForViteCompile === void 0 || (_configForViteCompile = _configForViteCompile.plugins) === null || _configForViteCompile === void 0 ? void 0 : _configForViteCompile.flat().filter(removeIncompatiblePlugins)
++          plugins: (_configForViteCompile = configForViteCompiler) === null || _configForViteCompile === void 0 || (_configForViteCompile = _configForViteCompile.plugins) === null || _configForViteCompile === void 0 ? void 0 : _configForViteCompile.flat().filter(removeIncompatiblePlugins),
++          ...viteConfigOverrides
+         };
+         compiler = integration.createCompiler({
+           root: config.root,
+diff --git a/dist/vanilla-extract-vite-plugin.cjs.prod.js b/dist/vanilla-extract-vite-plugin.cjs.prod.js
+index de4b386d46daa7b6a8f8d3760ce84d0817ba2be9..718e09874b971002ed03f4640a18a230896716e4 100644
+--- a/dist/vanilla-extract-vite-plugin.cjs.prod.js
++++ b/dist/vanilla-extract-vite-plugin.cjs.prod.js
+@@ -27,7 +27,8 @@ plugin.name !== 'vanilla-extract' &&
+ !plugin.name.startsWith('remix');
+ function vanillaExtractPlugin({
+   identifiers,
+-  unstable_mode: mode = 'emitCss'
++  unstable_mode: mode = 'emitCss',
++  viteConfigOverrides,
+ } = {}) {
+   let config;
+   let configEnv;
+@@ -116,7 +117,8 @@ function vanillaExtractPlugin({
+         }
+         const viteConfig = {
+           ...configForViteCompiler,
+-          plugins: (_configForViteCompile = configForViteCompiler) === null || _configForViteCompile === void 0 || (_configForViteCompile = _configForViteCompile.plugins) === null || _configForViteCompile === void 0 ? void 0 : _configForViteCompile.flat().filter(removeIncompatiblePlugins)
++          plugins: (_configForViteCompile = configForViteCompiler) === null || _configForViteCompile === void 0 || (_configForViteCompile = _configForViteCompile.plugins) === null || _configForViteCompile === void 0 ? void 0 : _configForViteCompile.flat().filter(removeIncompatiblePlugins),
++          ...viteConfigOverrides
+         };
+         compiler = integration.createCompiler({
+           root: config.root,
+diff --git a/dist/vanilla-extract-vite-plugin.esm.js b/dist/vanilla-extract-vite-plugin.esm.js
+index c810206ef529e2c071add16ac4df50cffdf68485..14f314f8b19533b90a94afad47f88ffc4ca36647 100644
+--- a/dist/vanilla-extract-vite-plugin.esm.js
++++ b/dist/vanilla-extract-vite-plugin.esm.js
+@@ -19,7 +19,8 @@ plugin.name !== 'vanilla-extract' &&
+ !plugin.name.startsWith('remix');
+ function vanillaExtractPlugin({
+   identifiers,
+-  unstable_mode: mode = 'emitCss'
++  unstable_mode: mode = 'emitCss',
++  viteConfigOverrides,
+ } = {}) {
+   let config;
+   let configEnv;
+@@ -108,7 +109,8 @@ function vanillaExtractPlugin({
+         }
+         const viteConfig = {
+           ...configForViteCompiler,
+-          plugins: (_configForViteCompile = configForViteCompiler) === null || _configForViteCompile === void 0 || (_configForViteCompile = _configForViteCompile.plugins) === null || _configForViteCompile === void 0 ? void 0 : _configForViteCompile.flat().filter(removeIncompatiblePlugins)
++          plugins: (_configForViteCompile = configForViteCompiler) === null || _configForViteCompile === void 0 || (_configForViteCompile = _configForViteCompile.plugins) === null || _configForViteCompile === void 0 ? void 0 : _configForViteCompile.flat().filter(removeIncompatiblePlugins),
++          ...viteConfigOverrides
+         };
+         compiler = createCompiler({
+           root: config.root,

.yarn/patches/esbuild-plugin-solid-npm-0.6.0-49835b85dc.patch

@@ -0,0 +1,65 @@
+diff --git a/dist/index.cjs b/dist/index.cjs
+index d9013dcb4901fafc9f2fb2f23b2504cfb3a7b13e..da57f1a7fd60aeeaaf72d57be718d031a1ded40a 100644
+--- a/dist/index.cjs
++++ b/dist/index.cjs
+@@ -15,7 +15,7 @@ function solidPlugin(options) {
+   return {
+     name: "esbuild:solid",
+     setup(build) {
+-      build.onLoad({ filter: /\.(t|j)sx$/ }, async (args) => {
++      build.onLoad({ filter: options?.filter ?? /\.(t|j)sx$/ }, async (args) => {
+         const source = await promises.readFile(args.path, { encoding: "utf-8" });
+         const { name, ext } = node_path.parse(args.path);
+         const filename = name + ext;
+diff --git a/dist/index.d.cts b/dist/index.d.cts
+index 8f1e6a571a710cf5dde33c8e569f1955840b5f48..c3b607aa413ab96f87b6c6de69e68a97cfee3631 100644
+--- a/dist/index.d.cts
++++ b/dist/index.d.cts
+@@ -3,6 +3,8 @@ import { TransformOptions } from '@babel/core';
+
+ /** Configuration options for esbuild-plugin-solid */
+ interface Options {
++    /** The filter to use for deciding which files to transform @default /\.(t|j)sx$/ */
++    filter?: RegExp;
+     /** The options to use for @babel/preset-typescript @default {} */
+     typescript?: object;
+     /**
+diff --git a/dist/index.d.mts b/dist/index.d.mts
+index 8f1e6a571a710cf5dde33c8e569f1955840b5f48..c3b607aa413ab96f87b6c6de69e68a97cfee3631 100644
+--- a/dist/index.d.mts
++++ b/dist/index.d.mts
+@@ -3,6 +3,8 @@ import { TransformOptions } from '@babel/core';
+
+ /** Configuration options for esbuild-plugin-solid */
+ interface Options {
++    /** The filter to use for deciding which files to transform @default /\.(t|j)sx$/ */
++    filter?: RegExp;
+     /** The options to use for @babel/preset-typescript @default {} */
+     typescript?: object;
+     /**
+diff --git a/dist/index.d.ts b/dist/index.d.ts
+index 8f1e6a571a710cf5dde33c8e569f1955840b5f48..c3b607aa413ab96f87b6c6de69e68a97cfee3631 100644
+--- a/dist/index.d.ts
++++ b/dist/index.d.ts
+@@ -3,6 +3,8 @@ import { TransformOptions } from '@babel/core';
+
+ /** Configuration options for esbuild-plugin-solid */
+ interface Options {
++    /** The filter to use for deciding which files to transform @default /\.(t|j)sx$/ */
++    filter?: RegExp;
+     /** The options to use for @babel/preset-typescript @default {} */
+     typescript?: object;
+     /**
+diff --git a/dist/index.mjs b/dist/index.mjs
+index 6b50f5fd2507bf613fcdebd4fd0338741c0acea2..9077e2cd0b61f7d8d54af296a54d9c0c5bf387f9 100644
+--- a/dist/index.mjs
++++ b/dist/index.mjs
+@@ -8,7 +8,7 @@ function solidPlugin(options) {
+   return {
+     name: "esbuild:solid",
+     setup(build) {
+-      build.onLoad({ filter: /\.(t|j)sx$/ }, async (args) => {
++      build.onLoad({ filter: options?.filter ?? /\.(t|j)sx$/ }, async (args) => {
+         const source = await readFile(args.path, { encoding: "utf-8" });
+         const { name, ext } = parse(args.path);
+         const filename = name + ext;

biome.json

@@ -56,5 +56,17 @@
       ".ultra.cache.json",
       "package.json"
     ]
-  }
+  },
+  "overrides": [
+    {
+      "include": ["**/solid/**"],
+      "linter": {
+        "rules": {
+          "correctness": {
+            "useJsxKeyInIterable": "off"
+          }
+        }
+      }
+    }
+  ]
 }

demo-solid/README.md

@@ -0,0 +1,12 @@
+# @stackflow/demo-solid
+
+This is an example of using Stackflow in a basic Single Page Application environment. The entry point where the app starts is `./src/main.ts`
+
+## Getting Started
+
+```bash
+$ yarn dev
+
+# or
+$ yarn dev:app
+```

demo-solid/esbuild.config.js

@@ -0,0 +1,36 @@
+import config from "@stackflow/esbuild-config";
+import { context } from "esbuild";
+
+import pkg from "./package.json" assert { type: "json" };
+
+const watch = process.argv.includes("--watch");
+const external = Object.keys({
+  ...pkg.dependencies,
+  ...pkg.peerDependencies,
+});
+
+Promise.all([
+  context({
+    ...config({
+      entryPoints: ["./src/stackflow-docs.ts"],
+      vanillaExtractExternal: ["@seed-design"],
+    }),
+    format: "cjs",
+    external,
+  }).then((ctx) =>
+    watch ? ctx.watch() : ctx.rebuild().then(() => ctx.dispose()),
+  ),
+  context({
+    ...config({
+      entryPoints: ["./src/stackflow-docs.ts"],
+      vanillaExtractExternal: ["@seed-design"],
+    }),
+    format: "esm",
+    outExtension: {
+      ".js": ".mjs",
+    },
+    external,
+  }).then((ctx) =>
+    watch ? ctx.watch() : ctx.rebuild().then(() => ctx.dispose()),
+  ),
+]).catch(() => process.exit(1));

demo-solid/index.html

@@ -0,0 +1,29 @@
+<!doctype html>
+<html>
+  <head>
+    <title>@stackflow/demo</title>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover"
+    />
+    <script>
+      (() => {
+        var e = document.documentElement;
+        e.dataset.seed = "";
+        var pd = window.matchMedia("(prefers-color-scheme: dark)"),
+          a = () => {
+            e.dataset.seedScaleColor = pd.matches ? "dark" : "light";
+          };
+        "addEventListener" in pd
+          ? pd.addEventListener("change", a)
+          : "addListener" in pd && pd.addListener(a),
+          a();
+      })();
+    </script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./src/main.tsx"></script>
+  </body>
+</html>

demo-solid/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@stackflow/demo-solid",
+  "version": "1.2.23",
+  "private": true,
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/stackflow-docs.d.ts",
+      "require": "./dist/stackflow-docs.js",
+      "import": "./dist/stackflow-docs.mjs"
+    },
+    "./style.css": "./dist/stackflow-docs.css"
+  },
+  "main": "./dist/stackflow-docs.js",
+  "module": "./dist/stackflow-docs.mjs",
+  "types": "./dist/stackflow-docs.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "yarn build:js && yarn build:dts && yarn build:app",
+    "build:app": "yarn vite build",
+    "build:dts": "tsc --emitDeclarationOnly",
+    "build:js": "node ./esbuild.config.js",
+    "clean": "rimraf dist && rimraf build",
+    "dev": "yarn dev:app && yarn build:js --watch && yarn build:dts --watch",
+    "dev:app": "yarn vite --host 0.0.0.0",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@seed-design/design-token": "^1.0.3",
+    "@seed-design/stylesheet": "^1.0.4",
+    "@stackflow/compat-await-push": "^1.1.10",
+    "@stackflow/core": "^1.0.13",
+    "@stackflow/link": "^1.4.2",
+    "@stackflow/plugin-basic-ui": "^1.8.2",
+    "@stackflow/plugin-devtools": "^0.1.10",
+    "@stackflow/plugin-history-sync": "^1.5.4",
+    "@stackflow/plugin-map-initial-activity": "^1.0.8",
+    "@stackflow/plugin-preload": "^1.3.2",
+    "@stackflow/plugin-renderer-basic": "^1.1.10",
+    "@stackflow/plugin-stack-depth-change": "^1.1.4",
+    "@stackflow/solid": "^1.1.11",
+    "lorem-ipsum": "^2.0.8",
+    "lz-string": "^1.5.0",
+    "normalize.css": "^8.0.1",
+    "random-picture": "^4.0.6",
+    "solid-js": "^1.8.18",
+    "vite": "^5.3.2"
+  },
+  "devDependencies": {
+    "@stackflow/esbuild-config": "^1.0.1",
+    "@vanilla-extract/css": "^1.15.3",
+    "@vanilla-extract/vite-plugin": "^4.0.12",
+    "esbuild": "^0.23.0",
+    "rimraf": "^3.0.2",
+    "typescript": "^5.5.3",
+    "vite-plugin-solid": "^2.10.2"
+  },
+  "ultra": {
+    "concurrent": [
+      "dev",
+      "build"
+    ]
+  }
+}

demo-solid/src/App.tsx

@@ -0,0 +1,10 @@
+import { type Component, Suspense } from "solid-js";
+import { Stack } from "./stackflow";
+
+const App: Component = () => (
+  <Suspense>
+    <Stack />
+  </Suspense>
+);
+
+export default App;