@solidjs/start 0.4.0-alpha.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Ryan Carniato
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/client/StartClient.tsx

@@ -0,0 +1,17 @@
+// @ts-ignore
+import App from "#start/app";
+import "./mount";
+
+function Dummy(props) {
+  return props.children;
+}
+
+export function StartClient() {
+  return (
+    <Dummy>
+      <Dummy>
+        <App />
+      </Dummy>
+    </Dummy>
+  );
+}

package/client/index.tsx

@@ -0,0 +1,3 @@
+import "vinxi/client";
+export { StartClient } from "./StartClient";
+export { mount } from "./mount";

package/client/islands.tsx

@@ -0,0 +1,5 @@
+import "vinxi/client";
+export function StartClient() {
+  return null;
+}
+export { mount } from "./mount";

package/client/mount.ts

@@ -0,0 +1,98 @@
+import { createStore } from "solid-js/store";
+import { createComponent, getHydrationKey, getOwner, hydrate } from "solid-js/web";
+
+export function mount(fn, el) {
+  if (import.meta.env.START_ISLANDS) {
+    const map = new WeakMap();
+    async function mountIsland(el: HTMLElement) {
+      if (el.dataset.css) {
+        let css = JSON.parse(el.dataset.css);
+        for (let href of css) {
+          if (!document.querySelector(`link[href="${href}"]`)) {
+            let link = document.createElement("link");
+            link.rel = "stylesheet";
+            link.href = href;
+            document.head.appendChild(link);
+          }
+        }
+      }
+
+      let mod = await import(
+        /* @vite-ignore */
+        import.meta.env.MANIFEST["client"].chunks[el.dataset.id.split("#")[0]].output.path
+      );
+      if (!mod || !el.dataset.hk) return;
+
+      let Component = mod[el.dataset.id.split("#")[1]];
+      let hk = el.dataset.hk;
+      // _$DEBUG("hydrating island", el.dataset.island, hk.slice(0, hk.length - 1) + `1-`, el);
+
+      let props = createStore({
+        ...JSON.parse(el.dataset.props!),
+        get children() {
+          const p = el.getElementsByTagName("solid-children");
+          getHydrationKey();
+          [...p].forEach(a => {
+            (a as any).__$owner = getOwner();
+          });
+          return;
+        }
+      });
+
+      map.set(el, props);
+
+      hydrate(() => createComponent(Component, props[0]), el, {
+        renderId: hk.slice(0, hk.length - 1) + `${1 + Number(el.dataset.offset)}-`,
+        owner: lookupOwner(el)
+      });
+
+      delete el.dataset.hk;
+      el.dataset.hkk = hk;
+    }
+
+    let queue: HTMLElement[] = [];
+    let queued = false;
+    function runTaskQueue(info: any) {
+      while (info.timeRemaining() > 0 && queue.length) {
+        mountIsland(queue.shift()!);
+      }
+      if (queue.length) {
+        requestIdleCallback(runTaskQueue);
+      } else queued = false;
+    }
+
+    const hydrateIslands = () => {
+      const islands: NodeListOf<HTMLElement> = document.querySelectorAll("solid-island[data-hk]");
+      const assets = new Set<string>();
+      islands.forEach((el: HTMLElement) => el.dataset.id && assets.add(el.dataset.id));
+      Promise.all(
+        [...assets].map(
+          asset =>
+            import(/* @vite-ignore */import.meta.env.MANIFEST["client"].chunks[asset.split("#")[0]].output.path)
+        )
+      )
+        .then(() => {
+          islands.forEach((el: HTMLElement) => {
+            if (el.dataset.when === "idle" && "requestIdleCallback" in window) {
+              if (!queued) {
+                queued = true;
+                requestIdleCallback(runTaskQueue);
+              }
+              queue.push(el);
+            } else mountIsland(el as HTMLElement);
+          });
+        })
+        .catch(e => console.error(e));
+    };
+
+    function lookupOwner(el: HTMLElement) {
+      const parent = el.closest("solid-children");
+      return parent && (parent as any).__$owner;
+    }
+
+    hydrateIslands();
+
+    return;
+  }
+  return hydrate(fn, el);
+}

package/client/spa/index.tsx

@@ -0,0 +1,8 @@
+import { render } from "solid-js/web";
+import "vinxi/client";
+
+export function mount(fn, el) {
+  render(fn, el);
+}
+
+export { StartClient } from "../StartClient";

package/config/fs-router.js

@@ -0,0 +1,137 @@
+import { analyzeModule, BaseFileSystemRouter, cleanPath } from "vinxi/fs-router";
+
+export class SolidStartClientFileRouter extends BaseFileSystemRouter {
+  toPath(src) {
+    const routePath = cleanPath(src, this.config)
+      // remove the initial slash
+      .slice(1)
+      .replace(/index$/, "")
+      .replace(/\[([^\/]+)\]/g, (_, m) => {
+        if (m.length > 3 && m.startsWith("...")) {
+          return `*${m.slice(3)}`;
+        }
+        if (m.length > 2 && m.startsWith("[") && m.endsWith("]")) {
+          return `:${m.slice(1, -1)}?`;
+        }
+        return `:${m}`;
+      });
+
+    return routePath?.length > 0 ? `/${routePath}` : "/";
+  }
+
+  toRoute(src) {
+    let path = this.toPath(src);
+
+    if (src.endsWith(".md") || src.endsWith(".mdx")) {
+      return {
+        type: "page",
+        $component: {
+          src: src,
+          pick: ["$css"]
+        },
+        $$route: undefined,
+        path,
+        filePath: src
+      };
+    }
+
+    const [_, exports] = analyzeModule(src);
+    const hasDefault = exports.find(e => e.n === "default");
+    const hasRouteConfig = exports.find(e => e.n === "route");
+    if (hasDefault) {
+      return {
+        type: "page",
+        $component: {
+          src: src,
+          pick: ["default", "$css"]
+        },
+        $$route: hasRouteConfig
+          ? {
+              src: src,
+              pick: ["route"]
+            }
+          : undefined,
+        path,
+        filePath: src
+      };
+    }
+  }
+}
+export class SolidStartServerFileRouter extends BaseFileSystemRouter {
+  toPath(src) {
+    const routePath = cleanPath(src, this.config)
+      // remove the initial slash
+      .slice(1)
+      .replace(/index$/, "")
+      .replace(/\[([^\/]+)\]/g, (_, m) => {
+        if (m.length > 3 && m.startsWith("...")) {
+          return `*${m.slice(3)}`;
+        }
+        if (m.length > 2 && m.startsWith("[") && m.endsWith("]")) {
+          return `:${m.slice(1, -1)}?`;
+        }
+        return `:${m}`;
+      });
+
+    return routePath?.length > 0 ? `/${routePath}` : "/";
+  }
+
+  toRoute(src) {
+    let path = this.toPath(src);
+
+    if (src.endsWith(".md") || src.endsWith(".mdx")) {
+      return {
+        type: "page",
+        $component: {
+          src: src,
+          pick: ["$css"]
+        },
+        $$route: undefined,
+        path,
+        filePath: src
+      };
+    }
+
+    const [_, exports] = analyzeModule(src);
+    const hasRouteConfig = exports.find(e => e.n === "route");
+    if (exports.find(exp => exp.n === "default")) {
+      return {
+        type: "page",
+        $component: {
+          src: src,
+          pick: ["default", "$css"]
+        },
+        $$route: hasRouteConfig
+          ? {
+              src: src,
+              pick: ["route"]
+            }
+          : undefined,
+        path,
+        filePath: src
+      };
+    } else if (
+      exports.find(
+        exp => exp.n === "GET" || exp.n === "POST" || exp.n === "PUT" || exp.n === "DELETE"
+      )
+    ) {
+      return {
+        type: "api",
+        $GET: exports.find(exp => exp.n === "GET")
+          ? {
+              src: src,
+              pick: ["GET"]
+            }
+          : undefined,
+        $POST: exports.find(exp => exp.n === "POST")
+          ? {
+              src: src,
+              pick: ["POST"]
+            }
+          : undefined,
+        path,
+        filePath: src
+      };
+    }
+  }
+}

package/config/index.js

@@ -0,0 +1,178 @@
+import { serverFunctions } from "@vinxi/server-functions/plugin";
+import defu from "defu";
+import { join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { createApp, resolve } from "vinxi";
+import { normalize } from "vinxi/lib/path";
+import { config } from "vinxi/plugins/config";
+import solid from "vite-plugin-solid";
+import { SolidStartClientFileRouter, SolidStartServerFileRouter } from "./fs-router.js";
+import { serverComponents } from "./server-components.js";
+
+const DEFAULT_EXTENSIONS = ["js", "jsx", "ts", "tsx"];
+
+function solidStartClientFsRouter(config) {
+  return (router, app) =>
+    new SolidStartClientFileRouter(
+      {
+        dir: resolve.absolute(config.dir, router.root),
+        extensions: config.extensions ?? ["js", "jsx", "ts", "tsx"]
+      },
+      router,
+      app
+    );
+}
+
+function solidStartServerFsRouter(config) {
+  return (router, app) =>
+    new SolidStartServerFileRouter(
+      {
+        dir: resolve.absolute(config.dir, router.root),
+        extensions: config.extensions ?? ["js", "jsx", "ts", "tsx"]
+      },
+      router,
+      app
+    );
+}
+
+export function defineConfig(baseConfig = {}) {
+  let { plugins = [], start = {}, ...userConfig } = baseConfig;
+  const extensions = [...DEFAULT_EXTENSIONS, ...(start.extensions || [])];
+  start = defu(start, {
+    appRoot: "./src",
+    ssr: true,
+    islands: false,
+    serverPlugins: []
+  });
+  return createApp({
+    server: {
+      compressPublicAssets: {
+        brotli: true
+      }
+    },
+    routers: [
+      {
+        name: "public",
+        mode: "static",
+        dir: "./public",
+        base: "/"
+      },
+
+      {
+        name: "ssr",
+        mode: "handler",
+        handler: `${start.appRoot}/entry-server.tsx`,
+        middleware: start.middleware,
+        ...(start.ssr
+          ? { routes: solidStartServerFsRouter({ dir: `${start.appRoot}/routes`, extensions }) }
+          : {}),
+        extensions,
+        target: "server",
+        plugins: () => [
+          config("user", userConfig),
+          ...plugins,
+          start.islands ? serverComponents.server() : null,
+          solid({ ssr: true, extensions: extensions.map(ext => `.${ext}`) }),
+          config("app-server", {
+            resolve: {
+              alias: {
+                "#start/app": join(process.cwd(), start.appRoot, "app.tsx"),
+                "~": join(process.cwd(), start.appRoot),
+                ...(!start.ssr
+                  ? {
+                      "@solidjs/start/server": "@solidjs/start/server/spa"
+                    }
+                  : {})
+              }
+            },
+            define: {
+              "import.meta.env.START_ISLANDS": JSON.stringify(start.islands),
+              "import.meta.env.SSR": JSON.stringify(true),
+              "import.meta.env.START_SSR": JSON.stringify(start.ssr)
+            }
+          })
+        ]
+      },
+      {
+        name: "client",
+        mode: "build",
+        handler: `${start.appRoot}/entry-client.tsx`,
+        ...(start.islands
+          ? {}
+          : {
+              routes: solidStartClientFsRouter({ dir: `${start.appRoot}/routes`, extensions })
+            }),
+        extensions,
+        target: "browser",
+        plugins: () => [
+          config("user", userConfig),
+          ...plugins,
+          serverFunctions.client({
+            runtime: normalize(fileURLToPath(new URL("./server-runtime.jsx", import.meta.url)))
+          }),
+          start.islands ? serverComponents.client() : null,
+          solid({ ssr: start.ssr, extensions: extensions.map(ext => `.${ext}`) }),
+          config("app-client", {
+            resolve: {
+              alias: {
+                "#start/app": join(process.cwd(), start.appRoot, "app.tsx"),
+                "~": join(process.cwd(), start.appRoot),
+                ...(start.islands
+                  ? {
+                      "@solidjs/start/client": "@solidjs/start/client/islands"
+                    }
+                  : {}),
+                ...(!start.ssr
+                  ? {
+                      "@solidjs/start/client": "@solidjs/start/client/spa"
+                    }
+                  : {})
+              }
+            },
+            define: {
+              "import.meta.env.START_ISLANDS": JSON.stringify(start.islands),
+              "import.meta.env.SSR": JSON.stringify(false),
+              "import.meta.env.START_SSR": JSON.stringify(start.ssr)
+            }
+          })
+        ],
+        base: "/_build"
+      },
+      // {
+      //   name: "server",
+      //   mode: "handler",
+      //   base: "/_server",
+      //   handler: serverFunctions.handler,
+      //   target: "server",
+      //   ...(overrides ?? {}),
+      //   plugins: () => [serverserver(), ...(overrides?.plugins?.() ?? [])],
+      // },
+      serverFunctions.router({
+        plugins: () => [
+          config("user", userConfig),
+          ...plugins,
+          solid({ ssr: true, extensions: extensions.map(ext => `.${ext}`) }),
+          config("app-server", {
+            resolve: {
+              alias: {
+                "#start/app": join(process.cwd(), start.appRoot, "app.tsx"),
+                "~": join(process.cwd(), start.appRoot),
+                ...(!start.ssr
+                  ? {
+                      "@solidjs/start/server": "@solidjs/start/server/spa"
+                    }
+                  : {})
+              }
+            },
+            define: {
+              "import.meta.env.START_ISLANDS": JSON.stringify(start.islands),
+              "import.meta.env.SSR": JSON.stringify(true),
+              "import.meta.env.START_SSR": JSON.stringify(start.ssr)
+            }
+          })
+        ],
+        middleware: start.middleware
+      })
+    ]
+  });
+}

package/config/server-components.js

@@ -0,0 +1,106 @@
+import {
+  decorateExportsPlugin,
+  directives,
+  shimExportsPlugin,
+  wrapExportsPlugin
+} from "@vinxi/plugin-directives";
+import { client as clientComponents } from "@vinxi/server-components/client";
+import { SERVER_REFERENCES_MANIFEST } from "@vinxi/server-components/constants";
+import { buildServerComponents } from "@vinxi/server-components/server";
+import { fileURLToPath } from "node:url";
+import { chunkify } from "vinxi/lib/chunks";
+import { normalize } from "vinxi/lib/path";
+
+function client() {
+  return clientComponents({
+    server: "ssr",
+    transpileDeps: [],
+    manifest: SERVER_REFERENCES_MANIFEST
+  });
+}
+
+function server() {
+  const runtime = normalize(fileURLToPath(new URL("./server-runtime.jsx", import.meta.url)));
+  // export function serverComponents({
+  // 	resolve = {
+  // 		conditions: ["react-server"],
+  // 	},
+  // 	runtime = "@vinxi/react-server-dom-vite/runtime",
+  // 	transpileDeps = ["react", "react-dom", "@vinxi/react-server-dom-vite"],
+  // 	manifest = SERVER_REFERENCES_MANIFEST,
+  // 	transforms = undefined,
+  // } = {}) {
+  const serverModules = new Set();
+  const clientModules = new Set();
+
+  function onReference(type, reference) {
+    if (type === "server") {
+      serverModules.add(reference);
+    } else {
+      clientModules.add(reference);
+    }
+  }
+
+  return [
+    directives({
+      hash: chunkify,
+      runtime,
+      onReference: onReference,
+      transforms: [
+        shimExportsPlugin({
+          runtime: {
+            module: runtime,
+            function: "createServerReference"
+          },
+          onModuleFound: mod => onReference("server", mod),
+          hash: chunkify,
+          apply: (code, id, options) => {
+            return !options.ssr;
+          },
+          pragma: "use server"
+        }),
+        decorateExportsPlugin({
+          runtime: {
+            module: runtime,
+            function: "createServerReference"
+          },
+          onModuleFound: mod => onReference("server", mod),
+          hash: chunkify,
+          apply: (code, id, options) => {
+            return options.ssr;
+          },
+          pragma: "use server"
+        }),
+        wrapExportsPlugin({
+          runtime: {
+            module: runtime,
+            function: "createClientReference"
+          },
+          onModuleFound: mod => onReference("client", mod),
+          hash: chunkify,
+          apply: (code, id, options) => {
+            return options.ssr;
+          },
+          pragma: "use client"
+        })
+      ]
+    }),
+    buildServerComponents({
+      resolve: {
+        conditions: ["solid"]
+      },
+      transpileDeps: [],
+      manifest: SERVER_REFERENCES_MANIFEST,
+      modules: {
+        server: serverModules,
+        client: clientModules
+      }
+    })
+  ];
+  // }
+}
+
+export const serverComponents = {
+  client,
+  server
+};

package/config/server-runtime.jsx

@@ -0,0 +1,44 @@
+import { createIslandReference } from "../server/islands";
+
+async function fetchServerAction(base, id, args) {
+  console.log("fetching serevr action");
+  const response = await fetch(base, {
+    method: "POST",
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/json",
+      "server-action": id
+    },
+    body: JSON.stringify(args)
+  });
+
+  const json = await response.json();
+
+  if (response.status === 200) {
+    return json;
+  } else {
+    console.log(json);
+    throw { message: json.error };
+  }
+}
+
+export function createServerReference(fn, id, name) {
+  return new Proxy(fn, {
+    get(target, prop, receiver) {
+      if (prop === "url") {
+        return `/_server?id=${encodeURIComponent(id)}&name=${encodeURIComponent(name)}`;
+      }
+    },
+    apply(target, thisArg, args) {
+      return fetchServerAction("/_server", `${id}#${name}`, args);
+    }
+  });
+}
+
+export function createClientReference(Component, id, name) {
+  if (typeof Component === "function") {
+    return createIslandReference(Component, id, name);
+  }
+
+  return Component;
+}

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@solidjs/start",
+  "version": "0.4.0-alpha.0",
+  "type": "module",
+  "author": "Ryan Carniato",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "client",
+    "config",
+    "server",
+    "shared",
+    "*.d.ts"
+  ],
+  "types": "./index.tsx",
+  "exports": {
+    ".": "./shared/index.tsx",
+    "./config": "./config/index.js",
+    "./server": "./server/index.tsx",
+    "./server/spa": "./server/spa/index.tsx",
+    "./client": "./client/index.tsx",
+    "./client/islands": "./client/islands.tsx",
+    "./middleware": "./server/middleware.ts",
+    "./client/spa": "./client/spa/index.tsx"
+  },
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./shared/index.tsx"
+      ],
+      "./server": [
+        "./server/index.tsx"
+      ],
+      "./client": [
+        "./client/index.tsx"
+      ]
+    }
+  },
+  "devDependencies": {
+    "solid-js": "^1.8.4",
+    "vinxi": "0.0.47"
+  },
+  "dependencies": {
+    "@vinxi/plugin-directives": "0.0.39",
+    "@vinxi/server-functions": "0.0.39",
+    "@vinxi/server-components": "0.0.39",
+    "defu": "^6.1.2",
+    "vite-plugin-inspect": "^0.7.33",
+    "vite-plugin-solid": "^2.7.0"
+  }
+}