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

daangn · Jul 2, 2024 · da1f6f1 · da1f6f1
1 parent 631f8bb
commit da1f6f1
Show file tree

Hide file tree

Showing 155 changed files with 6,751 additions and 41 deletions.
diff --git a/.pnp.cjs b/.pnp.cjs
diff --git a/.yarn/cache/@babel-helper-annotate-as-pure-npm-7.24.7-537c5e8bf3-a9017bfc1c.zip b/.yarn/cache/@babel-helper-annotate-as-pure-npm-7.24.7-537c5e8bf3-a9017bfc1c.zip
diff --git a/.yarn/cache/@babel-helper-create-class-features-plugin-npm-7.24.7-076821f821-8ecb1c2acc.zip b/.yarn/cache/@babel-helper-create-class-features-plugin-npm-7.24.7-076821f821-8ecb1c2acc.zip
diff --git a/...n/cache/@babel-helper-member-expression-to-functions-npm-7.24.7-2f8d2100de-d990752aaf.zip b/...n/cache/@babel-helper-member-expression-to-functions-npm-7.24.7-2f8d2100de-d990752aaf.zip
diff --git a/.yarn/cache/@babel-helper-optimise-call-expression-npm-7.24.7-59b5fb050d-da7a7f2d1b.zip b/.yarn/cache/@babel-helper-optimise-call-expression-npm-7.24.7-59b5fb050d-da7a7f2d1b.zip
diff --git a/.yarn/cache/@babel-helper-replace-supers-npm-7.24.7-35d1343b26-18b7c37098.zip b/.yarn/cache/@babel-helper-replace-supers-npm-7.24.7-35d1343b26-18b7c37098.zip
diff --git a/...e/@babel-helper-skip-transparent-expression-wrappers-npm-7.24.7-f573fe40ee-784a6fdd25.zip b/...e/@babel-helper-skip-transparent-expression-wrappers-npm-7.24.7-f573fe40ee-784a6fdd25.zip
diff --git a/.yarn/cache/@babel-plugin-syntax-jsx-npm-7.24.7-8f9596c5ff-a93516ae5b.zip b/.yarn/cache/@babel-plugin-syntax-jsx-npm-7.24.7-8f9596c5ff-a93516ae5b.zip
diff --git a/.yarn/cache/@babel-plugin-transform-modules-commonjs-npm-7.24.7-936aa5b71e-9bd10cd03c.zip b/.yarn/cache/@babel-plugin-transform-modules-commonjs-npm-7.24.7-936aa5b71e-9bd10cd03c.zip
diff --git a/.yarn/cache/@babel-plugin-transform-typescript-npm-7.24.7-72a8b52c30-6a4af5a96a.zip b/.yarn/cache/@babel-plugin-transform-typescript-npm-7.24.7-72a8b52c30-6a4af5a96a.zip
diff --git a/.yarn/cache/@babel-preset-typescript-npm-7.24.7-5b4c13cc4a-995e9783f8.zip b/.yarn/cache/@babel-preset-typescript-npm-7.24.7-5b4c13cc4a-995e9783f8.zip
diff --git a/.yarn/cache/babel-plugin-jsx-dom-expressions-npm-0.37.23-dae4ae2f07-4487aae74b.zip b/.yarn/cache/babel-plugin-jsx-dom-expressions-npm-0.37.23-dae4ae2f07-4487aae74b.zip
diff --git a/.yarn/cache/babel-preset-solid-npm-1.8.18-94e21d7554-55d465ea8e.zip b/.yarn/cache/babel-preset-solid-npm-1.8.18-94e21d7554-55d465ea8e.zip
diff --git a/.yarn/cache/csstype-npm-3.1.3-e9a1c85013-f593cce41f.zip b/.yarn/cache/csstype-npm-3.1.3-e9a1c85013-f593cce41f.zip
diff --git a/.yarn/cache/esbuild-plugin-solid-npm-0.6.0-49835b85dc-91d0ae9aa2.zip b/.yarn/cache/esbuild-plugin-solid-npm-0.6.0-49835b85dc-91d0ae9aa2.zip
diff --git a/.yarn/cache/html-entities-npm-2.3.3-e0aac656af-24f6b77ce2.zip b/.yarn/cache/html-entities-npm-2.3.3-e0aac656af-24f6b77ce2.zip
diff --git a/.yarn/cache/is-what-npm-4.1.16-1622ed8fd8-f6400634ba.zip b/.yarn/cache/is-what-npm-4.1.16-1622ed8fd8-f6400634ba.zip
diff --git a/.yarn/cache/merge-anything-npm-5.1.7-6cc5f839be-53d034b2a1.zip b/.yarn/cache/merge-anything-npm-5.1.7-6cc5f839be-53d034b2a1.zip
diff --git a/.yarn/cache/seroval-npm-1.0.7-c063259a0c-6ef308bc7b.zip b/.yarn/cache/seroval-npm-1.0.7-c063259a0c-6ef308bc7b.zip
diff --git a/.yarn/cache/seroval-plugins-npm-1.0.7-39519822f8-d5bee7fb7a.zip b/.yarn/cache/seroval-plugins-npm-1.0.7-39519822f8-d5bee7fb7a.zip
diff --git a/.yarn/cache/solid-js-npm-1.8.18-6951420650-f4fd93d710.zip b/.yarn/cache/solid-js-npm-1.8.18-6951420650-f4fd93d710.zip
diff --git a/.yarn/cache/solid-refresh-npm-0.6.3-52ce4eab8e-2ca43f894f.zip b/.yarn/cache/solid-refresh-npm-0.6.3-52ce4eab8e-2ca43f894f.zip
diff --git a/.yarn/cache/validate-html-nesting-npm-1.2.2-92d08f7d17-2c13f75b93.zip b/.yarn/cache/validate-html-nesting-npm-1.2.2-92d08f7d17-2c13f75b93.zip
diff --git a/.yarn/cache/vite-plugin-solid-npm-2.10.2-24ad614544-f7c3d857c7.zip b/.yarn/cache/vite-plugin-solid-npm-2.10.2-24ad614544-f7c3d857c7.zip
diff --git a/.yarn/cache/vitefu-npm-0.2.5-df1798d310-65ef98208c.zip b/.yarn/cache/vitefu-npm-0.2.5-df1798d310-65ef98208c.zip
diff --git a/demo-solid/.eslintrc.js b/demo-solid/.eslintrc.js
@@ -0,0 +1,4 @@
+export default {
+  root: true,
+  extends: ["@stackflow/eslint-config"],
+};
diff --git a/demo-solid/README.md b/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
+```
diff --git a/demo-solid/esbuild.config.js b/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));
diff --git a/demo-solid/index.html b/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>
diff --git a/demo-solid/package.json b/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-solid": "^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-solid": "^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"
+    ]
+  }
+}
diff --git a/demo-solid/src/App.tsx b/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;
diff --git a/demo-solid/src/activities/Article.css.ts b/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",
+  },
+]);
diff --git a/demo-solid/src/activities/Article.tsx b/demo-solid/src/activities/Article.tsx
@@ -0,0 +1,109 @@
+import type { ActivityComponentType } from "@stackflow/solid";
+import { useActivityParams } from "@stackflow/solid";
+import { createMemo, For } from "solid-js";
+
+import ArticleCard from "../components/ArticleCard";
+import ArticleProfile from "../components/ArticleProfile";
+import Layout from "../components/Layout";
+import * as css from "./Article.css";
+
+const recommenderCard = [
+  {
+    articleId: "25140667",
+    price: 41,
+    title: "Ran",
+  },
+  {
+    articleId: "60547101",
+    price: 24,
+    title: "Rest",
+  },
+  {
+    articleId: "34751776",
+    price: 42,
+    title: "Those",
+  },
+  {
+    articleId: "04114554",
+    price: 12,
+    title: "Beauty",
+  },
+  {
+    articleId: "81339443",
+    price: 3,
+    title: "Mighty",
+  },
+  {
+    articleId: "44738871",
+    price: 1,
+    title: "Afternoon",
+  },
+  {
+    articleId: "57388513",
+    price: 31,
+    title: "Brown",
+  },
+  {
+    articleId: "60883443",
+    price: 49,
+    title: "Musical",
+  },
+  {
+    articleId: "00932094",
+    price: 26,
+    title: "Occasionally",
+  },
+  {
+    articleId: "10749683",
+    price: 35,
+    title: "Having",
+  },
+];
+
+export interface ArticleParams {
+  articleId: string;
+  title: string;
+}
+
+const Article: ActivityComponentType<ArticleParams> = () => {
+  const activityParams = useActivityParams<{
+    articleId: string;
+    title: string;
+  }>();
+  const imageUrl = createMemo(
+    () => `https://picsum.photos/800/800/?id=${activityParams()?.articleId}`,
+  );
+
+  return (
+    <Layout appBar={{}}>
+      <div class={css.container}>
+        <div class={css.image}>
+          <div class={css.imageInner}>
+            <img src={imageUrl()} width="100%" height="100%" />
+          </div>
+        </div>
+        <ArticleProfile />
+        <div class={css.content}>
+          <div class={css.title}>{activityParams()?.title}</div>
+          <div class={css.subtitle}>Baby & Kids ∙ 3 days ago</div>
+          <div class={css.body}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
+            elementum sit sem ullamcorper urna, lacinia eu tortor, mattis.
+            Venenatis ut cursus amet in.
+          </div>
+          <div class={css.subtitle}>1 chats ∙ 2 favorites ∙ 212 views</div>
+        </div>
+        <div class={css.section}>
+          <div class={css.sectionTitle}>Other Items by Emila </div>
+          <div class={css.recommenderGrid}>
+            <For each={recommenderCard}>
+              {(card) => <ArticleCard {...card} />}
+            </For>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default Article;