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

.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;

demo-solid/.eslintrc.js

@@ -0,0 +1,4 @@
+export default {
+  root: true,
+  extends: ["@stackflow/eslint-config"],
+};

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,35 @@
+import { context } from "esbuild";
+import config from "@stackflow/esbuild-config";
+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,77 @@
+{
+  "name": "@stackflow/demo-solid",
+  "version": "1.2.21",
+  "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.8",
+    "@stackflow/core": "^1.0.10",
+    "@stackflow/eslint-config": "^1.0.2",
+    "@stackflow/link": "^1.4.0",
+    "@stackflow/plugin-basic-ui": "^1.5.3",
+    "@stackflow/plugin-devtools": "^0.1.8",
+    "@stackflow/plugin-history-sync": "^1.4.0",
+    "@stackflow/plugin-map-initial-activity": "^1.0.6",
+    "@stackflow/plugin-preload": "^1.3.0",
+    "@stackflow/plugin-renderer-basic": "^1.1.8",
+    "@stackflow/plugin-stack-depth-change": "^1.1.2",
+    "@stackflow/solid": "^1.1.8",
+    "@typescript-eslint/eslint-plugin": "^7.15.0",
+    "@typescript-eslint/parser": "^7.15.0",
+    "eslint": "^8.57.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-json-format": "^2.0.1",
+    "eslint-plugin-simple-import-sort": "^12.1.0",
+    "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 { Component, Suspense } from "solid-js";
+import { Stack } from "./stackflow";
+
+const App: Component = () => (
+  <Suspense>
+    <Stack />
+  </Suspense>
+);
+
+export default App;

demo-solid/src/activities/Article.css.ts

@@ -0,0 +1,68 @@
+import { vars } from "@seed-design/design-token";
+import { style } from "@vanilla-extract/css";
+
+import { f } from "../styles";
+
+export const container = style([
+  f.posAbsFull,
+  f.overflowScroll,
+  f.rootLineHeight,
+]);
+
+export const image = style([
+  f.posRel,
+  {
+    width: "100%",
+    height: 0,
+    paddingBottom: "100%",
+    background: vars.$scale.color.gray100,
+  },
+]);
+
+export const imageInner = style([f.posAbsFull]);
+
+export const content = style({
+  margin: "1.5rem 1rem 0",
+  paddingBottom: "0.25rem",
+  boxShadow: `0 1px 0 0 ${vars.$semantic.color.divider1}`,
+});
+
+export const title = style({
+  fontSize: "1.25rem",
+  fontWeight: "bold",
+  marginBottom: ".625rem",
+});
+
+export const subtitle = style({
+  fontSize: ".8125rem",
+  color: vars.$scale.color.gray600,
+  marginBottom: "1rem",
+});
+
+export const body = style({
+  fontSize: "1rem",
+  lineHeight: "1.375rem",
+  marginBottom: "1.25rem",
+});
+
+export const section = style({
+  boxShadow: `0 1px 0 0 ${vars.$semantic.color.divider1}`,
+  ":last-child": {
+    boxShadow: "none",
+  },
+});
+
+export const sectionTitle = style({
+  padding: "1.25rem 1rem",
+  fontSize: "1rem",
+  fontWeight: "bold",
+});
+
+export const recommenderGrid = style([
+  f.grid,
+  {
+    gridTemplateColumns: "1fr 1fr",
+    padding: ".25rem 1rem 1rem",
+    gap: "1.25rem",
+  },
+]);