@solidjs/start 1.2.1 → 2.0.0-alpha.1

package/src/shared/dev-overlay/styles.css

@@ -0,0 +1,292 @@
+.dev-overlay {
+  position: fixed;
+  inset: 0px;
+  z-index: 50;
+  overflow-y: auto;
+}
+
+.dev-overlay>div {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+}
+
+.dev-overlay-background {
+  position: absolute;
+  inset: 0px;
+  background-color: rgb(17 24 39 / 0.5);
+}
+
+.dev-overlay-panel {
+  display: flex;
+  flex-direction: column;
+  width: 75vw;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+  gap: 0.5rem;
+  color: rgb(17 24 39);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
+.dev-overlay-panel-container {
+  margin: 2rem;
+  z-index: 10;
+}
+
+.dev-overlay-navbar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.dev-overlay-pagination {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  border-radius: 9999px;
+  background-color: rgb(249 250 251);
+  padding: 0.25rem;
+}
+
+.dev-overlay-button {
+  display: flex;
+  padding: 0.125rem;
+  border-radius: 9999px;
+  border-width: 0px;
+  align-items: center;
+  justify-content: center;
+  background-color: rgb(249 250 251);
+  color: rgb(17 24 39);
+  transition-property: color, background-color, border-color, box-shadow;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.dev-overlay-button:hover {
+  background-color: rgb(229 231 235);
+  color: rgb(55 65 81);
+}
+
+.dev-overlay-button:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px
+}
+
+.dev-overlay-button:focus-visible {
+  box-shadow: 0 0 0 calc(3px) rgb(17 24 39 / 0.75);
+}
+
+.dev-overlay-button:active {
+  background-color: rgb(243 244 246);
+  color: rgb(31 41 55);
+}
+
+.dev-overlay-button>svg {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+.dev-overlay-page-counter {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 600;
+}
+
+.dev-overlay-navbar-left {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+}
+
+
+.dev-overlay-controls {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+  border-radius: 9999px;
+  background-color: rgb(249 250 251);
+  padding: 0.25rem;
+}
+
+.dev-overlay-version {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+  border-radius: 9999px;
+  background-color: rgb(249 250 251);
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 600;
+}
+
+.dev-overlay-version>div {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+.dev-overlay-version>div>svg {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+.dev-overlay-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  border-radius: 1.5rem;
+  background-color: rgb(249 250 251);
+  padding: 1rem;
+}
+
+.dev-overlay-error-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.dev-overlay-error-info-name {
+  font-weight: 700;
+}
+
+.dev-overlay-error-info-message {
+  font-size: 1.5rem;
+  line-height: 2rem;
+  color: rgb(239 68 68);
+  font-weight: 700;
+}
+
+.dev-overlay-stack-frames-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.dev-overlay-stack-frames {
+  flex: 1 1 0%;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  margin-block: 0;
+  list-style-type: none;
+  padding-inline: 0;
+  max-height: 16rem;
+  overflow-y: auto;
+  border-radius: 0.5rem;
+}
+
+.dev-overlay-stack-frame {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  color: rgb(17 24 39);
+  cursor: default;
+  user-select: none;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  outline: none;
+}
+
+.dev-overlay-stack-frame[tc-active],
+.dev-overlay-stack-frame[tc-selected],
+.dev-overlay-stack-frame:focus {
+  background-color: rgb(219 234 254);
+  color: rgb(30 58 138);
+}
+
+.dev-overlay-stack-frame-function {
+  font-weight: 700;
+}
+
+.dev-overlay-stack-frame-file {
+  white-space: nowrap;
+  font-size: 0.75rem;
+  /* 12px */
+  line-height: 1rem;
+  /* 16px */
+}
+
+.dev-overlay-stack-frames-code {
+  padding: 0.5rem 1rem;
+  gap: 0.25rem;
+  flex: 1 1 0%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.5rem;
+  background-color: rgb(17 24 39);
+}
+
+.dev-overlay-stack-frames-code-fallback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgb(249 250 251);
+  min-height: 16rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.dev-overlay-stack-frames-code-source {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: rgb(249 250 251);
+}
+
+.dev-overlay-stack-frames-code-container {
+  width: 100%;
+  overflow: hidden;
+  min-width: 100%;
+  min-height: 16rem;
+  border-top-width: 1px;
+  border-top-style: solid;
+  border-top-color: rgb(249 250 251);
+}
+
+.dev-overlay-code-view {
+  overflow: auto;
+  min-width: 100%;
+  min-height: 16rem;
+}
+
+.dev-overlay-code-view>.shiki {
+  float: left;
+  min-width: 100%;
+  overflow-x: auto;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  counter-reset: step;
+  counter-increment: step calc(var(--dev-overlay-code-view-start, 1) - 1);
+  background-color: transparent !important;
+}
+
+.dev-overlay-code-view>.shiki .line::before {
+  content: counter(step);
+  counter-increment: step;
+  width: 1rem;
+  margin-right: 1.5rem;
+  display: inline-block;
+  text-align: right;
+  color: rgba(115, 138, 148, .4)
+}
+
+.dev-overlay-error-line {
+  background-color: rgba(239, 68, 68, .4);
+}

package/src/shared/lazy.ts

@@ -0,0 +1,52 @@
+import { Component, lazy as solidLazy } from "solid-js";
+import { getRequestEvent, isServer } from "solid-js/web";
+import { getManifest } from "solid-start:get-manifest";
+import { useAssets } from "../server/assets/index.ts";
+import { Asset, PageEvent } from "../server/types.ts";
+
+const assetsById: Record<string, Asset[]> = {};
+
+const getAssets = async (id: string) => {
+  if (assetsById[id]) return assetsById[id];
+
+  const manifest = getManifest(import.meta.env.SSR && import.meta.env.DEV ? "ssr" : "client");
+  const assets = await manifest.getAssets(id);
+  if (import.meta.env.PROD) assetsById[id] = assets;
+
+  return assets;
+};
+
+const withAssets = function <T extends () => Promise<{ default: Component<any> }>>(fn: T): T {
+  const wrapper = async () => {
+    const mod = await fn();
+
+    // This id$$ export is generated by the lazy vite plugin
+    const id: string = (mod as any).id$$;
+    if (!id) return mod;
+
+    if (!mod.default) {
+      console.error(`Module ${id} does not export default`);
+      return { default: () => [] };
+    }
+
+    const assets: Asset[] = await getAssets(id);
+    if (!assets.length) return mod;
+
+    return {
+      default: (props: any) => {
+        const { nonce } = getRequestEvent() as PageEvent;
+        useAssets(assets, nonce);
+
+        return mod.default(props);
+      },
+    };
+  };
+
+  return wrapper as T;
+};
+
+const lazy = !isServer
+  ? solidLazy
+  : <T extends Component<any>>(fn: () => Promise<{ default: T }>) => solidLazy(withAssets(fn));
+
+export default lazy;

package/src/shared/serverFunction.ts

@@ -0,0 +1,10 @@
+import { getRequestEvent } from "solid-js/web";
+import type { ServerFunctionMeta } from "../server/types.ts";
+
+/**
+ *
+ * Read more: https://docs.solidjs.com/solid-start/reference/server/get-server-function-meta
+ */
+export function getServerFunctionMeta(): ServerFunctionMeta | undefined {
+  return getRequestEvent()?.locals.serverFunctionMeta;
+}

package/src/virtual.d.ts

@@ -0,0 +1,27 @@
+declare module "solid-start:client-vite-manifest" {
+  export const clientViteManifest: Record<
+    string,
+    { css?: Array<string>; file: string; [key: string]: unknown }
+  >;
+}
+
+interface StartManifest {
+  getAssets(id: string): Promise<import("./server/assets/render").Asset[]>;
+}
+
+declare module "solid-start:get-client-manifest" {
+  export const getClientManifest: () => StartManifest;
+}
+
+declare module "solid-start:get-manifest" {
+  export const getManifest: (target: "client" | "ssr") => StartManifest;
+}
+
+declare module "solid-start:app" {
+  export default App as import("solid-js").Component;
+}
+
+declare module "solid-start:middleware" {
+  type MaybeArray<T> = T | Array<T>;
+  export default Middleware as import("h3").Middleware[];
+}

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "allowJs": true,
+    "isolatedModules": true,
+    "outDir": "./dist",
+    "declaration": true,
+    "skipLibCheck": true,
+    "types": ["vite/client"],
+    "allowImportingTsExtensions": true,
+    "rewriteRelativeImportExtensions": true,
+    "rootDir": "./src",
+  },
+  "include": ["env.d.ts", "./src", "./src/env.d.ts"],
+}

package/vitest.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: "node",
+    mockReset: true,
+  },
+});

package/config/index.d.ts

@@ -1,40 +0,0 @@
-import type { AppOptions, createApp } from "vinxi";
-import type { CustomizableConfig } from "vinxi/dist/types/lib/vite-dev";
-import { InlineConfig } from "vite";
-import type { Options } from "vite-plugin-solid";
-
-// should probably be maintained by Vinxi
-type VinxiViteServerOptions = Omit<
-  InlineConfig["server"],
-  "port" | "strictPort" | "host" | "middlewareMode" | "open"
->;
-
-type ViteCustomizableConfig = CustomizableConfig & {
-  server?: VinxiViteServerOptions;
-};
-
-type SolidStartInlineConfig = {
-  publicDir?: string;
-  ssr?: boolean;
-  solid?: Options;
-  extensions?: string[];
-  server?: AppOptions["server"];
-  appRoot?: string;
-  routeDir?: string;
-  middleware?: string;
-  devOverlay?: boolean;
-  experimental?: {
-    islands?: boolean;
-  };
-  vite?:
-    | ViteCustomizableConfig
-    | ((options: { router: "server" | "client" | "server-function" }) => ViteCustomizableConfig);
-};
-
-/**
- *
- * Read more: https://docs.solidjs.com/solid-start/reference/entrypoints/app-config
- */
-export declare function defineConfig(
-  baseConfig?: SolidStartInlineConfig
-): ReturnType<typeof createApp>;