@solidjs/start 1.2.0 → 2.0.0-alpha.0

package/src/config/lazy.ts

@@ -0,0 +1,100 @@
+import type { PluginItem } from "@babel/core";
+import babel from "@babel/core";
+import * as t from "@babel/types";
+import { sep as osSep } from "path";
+import { basename, relative, sep } from "path/posix";
+import type { PluginOption } from "vite";
+import { VITE_ENVIRONMENTS } from "./constants.ts";
+
+const idTransform = (id: string): PluginItem => {
+  return {
+    visitor: {
+      Program(path) {
+        path.node.body.unshift(
+          t.exportNamedDeclaration(
+            t.variableDeclaration("const", [
+              t.variableDeclarator(t.identifier("id$$"), t.stringLiteral(id))
+            ])
+          )
+        );
+      }
+    }
+  };
+};
+
+const importTransform = (): PluginItem => {
+  return {
+    visitor: {
+      ImportDeclaration(path) {
+        if (path.node.source.value !== "solid-js") return;
+        path.traverse({
+          ImportSpecifier(subPath) {
+            if (subPath.node.local.name !== "lazy") return;
+            subPath.remove();
+            path.insertAfter(
+              t.importDeclaration(
+                [t.importSpecifier(t.identifier("lazy"), t.identifier("lazy"))],
+                t.stringLiteral("@solidjs/start/server")
+              )
+            );
+          }
+        });
+      }
+    }
+  };
+};
+
+const fileEndingRegex = /(ts|js)x(\?.*)?$/;
+
+const lazy = (): PluginOption => {
+  const cwd = process.cwd().replaceAll(osSep, sep);
+  return {
+    name: "solid-lazy-css",
+    enforce: "pre",
+    applyToEnvironment(env) {
+      return env.name === VITE_ENVIRONMENTS.server;
+    },
+    async transform(src, id) {
+      if (!id.match(fileEndingRegex)) return;
+
+      // The transformed files either import "lazy" or css files
+      // Therefore we skip, if the src doesn't have any import
+      if (src.indexOf("import") === -1) return;
+
+      const plugins: PluginItem[] = [];
+
+      const hasDefaultExport = src.indexOf("export default") !== -1;
+      if (hasDefaultExport) {
+        const localId = relative(cwd, id);
+        plugins.push(idTransform(localId));
+      }
+
+      const hasLazy = src.indexOf("lazy(") !== -1;
+      if (hasLazy) plugins.push(importTransform());
+
+      if (!plugins.length) {
+        return;
+      }
+
+      const transformed = await babel.transformAsync(src, {
+        plugins,
+        parserOpts: {
+          plugins: ["jsx", "typescript"]
+        },
+        filename: basename(id),
+        ast: false,
+        sourceMaps: true,
+        configFile: false,
+        babelrc: false,
+        sourceFileName: id
+      });
+
+      if (!transformed?.code) return;
+
+      const { code, map } = transformed;
+      return { code, map };
+    }
+  };
+};
+
+export default lazy;

package/src/config/manifest.ts

@@ -0,0 +1,84 @@
+import { type PluginOption, type ViteDevServer } from "vite";
+
+import { findStylesInModuleGraph } from "../server/collect-styles.ts";
+import { VIRTUAL_MODULES } from "./constants.ts";
+import { type SolidStartOptions } from "./index.ts";
+
+export function manifest(start: SolidStartOptions): PluginOption {
+  let devServer: ViteDevServer = undefined!;
+  return {
+    name: "solid-start:manifest-plugin",
+    enforce: "pre",
+    configureServer(server) {
+      devServer = server;
+    },
+    async resolveId(id) {
+      if (id === VIRTUAL_MODULES.clientViteManifest)
+        return `\0${VIRTUAL_MODULES.clientViteManifest}`;
+      if (id === VIRTUAL_MODULES.getClientManifest)
+        return this.resolve(
+          new URL("../server/manifest/client-manifest", import.meta.url).pathname
+        );
+      if (id === VIRTUAL_MODULES.getManifest) {
+        return this.environment.config.consumer === "client"
+          ? this.resolve(new URL("../server/manifest/client-manifest", import.meta.url).pathname)
+          : this.resolve(new URL("../server/manifest/ssr-manifest", import.meta.url).pathname);
+      }
+      if (id === VIRTUAL_MODULES.middleware) {
+        if (start.middleware) return await this.resolve(start.middleware);
+        return `\0${VIRTUAL_MODULES.middleware}`;
+      }
+    },
+    async load(id) {
+      if (id === `\0${VIRTUAL_MODULES.clientViteManifest}`) {
+        let clientViteManifest: Record<string, Record<string, any>>;
+        if (this.environment.config.command === "serve") {
+          clientViteManifest = {};
+        } else {
+          const entry = Object.values(globalThis.START_CLIENT_BUNDLE).find(
+            v => "isEntry" in v && v.isEntry
+          );
+          if (!entry) throw new Error("No client entry found");
+          clientViteManifest = JSON.parse(
+            (globalThis.START_CLIENT_BUNDLE[".vite/manifest.json"] as any).source
+          );
+        }
+        return `export const clientViteManifest = ${JSON.stringify(clientViteManifest)};`;
+      } else if (id === `\0${VIRTUAL_MODULES.middleware}`) return "export default {};";
+      else if (id.startsWith("/@manifest")) {
+        if (this.environment.mode !== "dev")
+          throw new Error("@manifest queries are only allowed in dev");
+
+        const [path, query] = id.split("?");
+        const target = id.split("/")[2]!;
+        const params = new URLSearchParams(query);
+        if (!path || !query) return;
+        if (path.endsWith("assets")) {
+          const id = params.get("id");
+          if (!id) {
+            throw new Error("Missing id to get assets.");
+          }
+
+          // Client env does not have css dependencies in mod.transformResult
+          // Aalways use ssr env instead, to prevent hydration mismatches
+          const env = devServer.environments["ssr"];
+          const styles = await findStylesInModuleGraph(env, id);
+
+          const cssAssets = Object.entries(styles).map(
+            ([key, value]) => `{
+						tag: "style",
+						attrs: {
+							type: "text/css",
+							"data-vite-dev-id": "${key}",
+							"data-vite-ref": "0",
+						},
+						children: () => import("${value}?inline").then(mod => mod.default),
+					}`
+          );
+
+          return `export default [${cssAssets.join(",")}]`;
+        }
+      }
+    }
+  };
+}

package/src/config/utils.ts

@@ -0,0 +1,5 @@
+export function parseIdQuery(id: string) {
+  if (!id.includes("?")) return { filename: id, query: new URLSearchParams() };
+  const [filename, rawQuery] = id.split(`?`, 2) as [string, string];
+  return { filename, query: new URLSearchParams(rawQuery) };
+}

package/src/config/vite-utils.ts

@@ -0,0 +1,113 @@
+import { DevEnvironment, Rollup } from "vite";
+import fs from "node:fs";
+import path from "node:path";
+
+const postfixRE = /[?#].*$/;
+export function cleanUrl(url: string): string {
+  return url.replace(postfixRE, "");
+}
+
+export const FS_PREFIX = `/@fs/`;
+
+export const VALID_ID_PREFIX = `/@id/`;
+
+export const NULL_BYTE_PLACEHOLDER = `__x00__`;
+
+export function normalizeResolvedIdToUrl(
+  environment: DevEnvironment,
+  url: string,
+  resolved: Rollup.PartialResolvedId,
+): string {
+  const root = environment.config.root;
+  const depsOptimizer = environment.depsOptimizer;
+
+  // normalize all imports into resolved URLs
+  // e.g. `import 'foo'` -> `import '/@fs/.../node_modules/foo/index.js'`
+  if (resolved.id.startsWith(withTrailingSlash(root))) {
+    // in root: infer short absolute path from root
+    url = resolved.id.slice(root.length);
+  } else if (
+    depsOptimizer?.isOptimizedDepFile(resolved.id) ||
+    // vite-plugin-react isn't following the leading \0 virtual module convention.
+    // This is a temporary hack to avoid expensive fs checks for React apps.
+    // We'll remove this as soon we're able to fix the react plugins.
+    (resolved.id !== "/@react-refresh" &&
+      path.isAbsolute(resolved.id) &&
+      fs.existsSync(cleanUrl(resolved.id)))
+  ) {
+    // an optimized deps may not yet exists in the filesystem, or
+    // a regular file exists but is out of root: rewrite to absolute /@fs/ paths
+    url = path.posix.join(FS_PREFIX, resolved.id);
+  } else {
+    url = resolved.id;
+  }
+
+  // if the resolved id is not a valid browser import specifier,
+  // prefix it to make it valid. We will strip this before feeding it
+  // back into the transform pipeline
+  if (url[0] !== "." && url[0] !== "/") {
+    url = wrapId(resolved.id);
+  }
+
+  return url;
+}
+
+export function wrapId(id: string): string {
+  return id.startsWith(VALID_ID_PREFIX)
+    ? id
+    : VALID_ID_PREFIX + id.replace("\0", NULL_BYTE_PLACEHOLDER);
+}
+
+export function unwrapId(id: string): string {
+  return id.startsWith(VALID_ID_PREFIX)
+    ? id.slice(VALID_ID_PREFIX.length).replace(NULL_BYTE_PLACEHOLDER, "\0")
+    : id;
+}
+
+export function normalizeViteImportAnalysisUrl(
+  environment: DevEnvironment,
+  id: string,
+): string {
+  let url = normalizeResolvedIdToUrl(environment, id, { id });
+
+  // https://github.com/vitejs/vite/blob/c18ce868c4d70873406e9f7d1b2d0a03264d2168/packages/vite/src/node/plugins/importAnalysis.ts#L416
+  if (environment.config.consumer === "client") {
+    const mod = environment.moduleGraph.getModuleById(id);
+    if (mod && mod.lastHMRTimestamp > 0) {
+      url = injectQuery(url, `t=${mod.lastHMRTimestamp}`);
+    }
+  }
+
+  return url;
+}
+
+export function withTrailingSlash(path: string): string {
+  if (path[path.length - 1] !== "/") {
+    return `${path}/`;
+  }
+  return path;
+}
+
+export function splitFileAndPostfix(path: string): {
+  file: string;
+  postfix: string;
+} {
+  const file = cleanUrl(path);
+  return { file, postfix: path.slice(file.length) };
+}
+
+const windowsSlashRE = /\\/g;
+export function slash(p: string): string {
+  return p.replace(windowsSlashRE, "/");
+}
+
+const isWindows =
+  typeof process !== "undefined" && process.platform === "win32";
+
+export function injectQuery(url: string, queryToInject: string): string {
+  const { file, postfix } = splitFileAndPostfix(url);
+  const normalizedFile = isWindows ? slash(file) : file;
+  return `${normalizedFile}?${queryToInject}${
+    postfix[0] === "?" ? `&${postfix.slice(1)}` : /* hash only */ postfix
+  }`;
+}

package/src/env.d.ts

@@ -0,0 +1,35 @@
+// This file is an augmentation to the built-in ImportMeta interface
+// Thus cannot contain any top-level imports
+// <https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation>
+
+/* eslint-disable @typescript-eslint/consistent-type-imports */
+
+declare namespace App {
+	export interface RequestEventLocals {
+		[key: string | symbol]: any;
+	}
+}
+
+declare module "solidstart:server-fn-manifest" {
+	type ServerFn = (...args: Array<any>) => Promise<any>;
+	export function getServerFnById(id: string): Promise<ServerFn>;
+}
+
+interface ImportMetaEnv
+	extends Record<`VITE_${string}`, any>,
+		SolidStartMetaEnv {
+	BASE_URL: string;
+	MODE: string;
+	DEV: boolean;
+	PROD: boolean;
+	SSR: boolean;
+}
+
+interface SolidStartMetaEnv {
+	START_SSR: boolean;
+	START_APP_ENTRY: string;
+	START_CLIENT_ENTRY: string;
+	// START_ISLANDS: boolean;
+	// START_DEV_OVERLAY: boolean;
+	// SERVER_BASE_URL: string;
+}

package/src/http/index.ts

@@ -0,0 +1,253 @@
+import type { H3Event, HTTPEvent, InferEventInput } from "h3";
+import * as h3 from "h3";
+import { getRequestEvent } from "solid-js/web";
+
+function _setContext(event: H3Event, key: string, value: any) {
+	event.context[key] = value;
+}
+
+function _getContext(event: H3Event, key: string) {
+	return event.context[key];
+}
+
+function getEvent() {
+	return getRequestEvent()!.nativeEvent;
+}
+
+export function getWebRequest(): Request {
+	return getEvent().req;
+}
+
+export const HTTPEventSymbol = Symbol("$HTTPEvent");
+
+export function isEvent(
+	obj: any,
+): obj is h3.H3Event | { [HTTPEventSymbol]: h3.H3Event } {
+	return (
+		typeof obj === "object" &&
+		(obj instanceof h3.H3Event ||
+			obj?.[HTTPEventSymbol] instanceof h3.H3Event ||
+			obj?.__is_event__ === true)
+	);
+	// Implement logic to check if obj is an H3Event
+}
+
+type Tail<T> = T extends [any, ...infer U] ? U : never;
+
+type PrependOverload<
+	TOriginal extends (...args: Array<any>) => any,
+	TOverload extends (...args: Array<any>) => any,
+> = TOverload & TOriginal;
+
+// add an overload to the function without the event argument
+type WrapFunction<TFn extends (...args: Array<any>) => any> = PrependOverload<
+	TFn,
+	(
+		...args: Parameters<TFn> extends [
+			h3.HTTPEvent<any> | h3.H3Event<any>,
+			...infer TArgs,
+		]
+			? TArgs
+			: Parameters<TFn>
+	) => ReturnType<TFn>
+>;
+
+function createWrapperFunction<TFn extends (...args: Array<any>) => any>(
+	h3Function: TFn,
+): WrapFunction<TFn> {
+	return ((...args: Array<any>) => {
+		const event = args[0];
+		if (!isEvent(event)) {
+			args.unshift(getEvent());
+		} else {
+			args[0] =
+				event instanceof h3.H3Event || (event as any).__is_event__
+					? event
+					: event[HTTPEventSymbol];
+		}
+
+		return (h3Function as any)(...args);
+	}) as any;
+}
+
+// Creating wrappers for each utility and exporting them with their original names
+// readRawBody => getWebRequest().text()/.arrayBuffer()
+type WrappedReadBody = <T, TEventInput = InferEventInput<"body", H3Event, T>>(
+	...args: Tail<Parameters<typeof h3.readBody<T, H3Event, TEventInput>>>
+) => ReturnType<typeof h3.readBody<T, h3.H3Event, TEventInput>>;
+export const readBody = createWrapperFunction(h3.readBody) as PrependOverload<
+	typeof h3.readBody,
+	WrappedReadBody
+>;
+type WrappedGetQuery = <
+	T,
+	TEventInput = Exclude<InferEventInput<"query", H3Event, T>, undefined>,
+>(
+	...args: Tail<Parameters<typeof h3.getQuery<T, H3Event, TEventInput>>>
+) => ReturnType<typeof h3.getQuery<T, H3Event, TEventInput>>;
+export const getQuery = createWrapperFunction(h3.getQuery) as PrependOverload<
+	typeof h3.getQuery,
+	WrappedGetQuery
+>;
+export const isMethod = createWrapperFunction(h3.isMethod);
+export const isPreflightRequest = createWrapperFunction(h3.isPreflightRequest);
+type WrappedGetValidatedQuery = <
+	T extends HTTPEvent,
+	TEventInput = InferEventInput<"query", H3Event, T>,
+>(
+	...args: Tail<
+		Parameters<typeof h3.getValidatedQuery<T, H3Event, TEventInput>>
+	>
+) => ReturnType<typeof h3.getValidatedQuery<T, H3Event, TEventInput>>;
+export const getValidatedQuery = createWrapperFunction(
+	h3.getValidatedQuery,
+) as PrependOverload<typeof h3.getValidatedQuery, WrappedGetValidatedQuery>;
+export const getRouterParams = createWrapperFunction(h3.getRouterParams);
+export const getRouterParam = createWrapperFunction(h3.getRouterParam);
+type WrappedGetValidatedRouterParams = <
+	T extends HTTPEvent,
+	TEventInput = InferEventInput<"routerParams", H3Event, T>,
+>(
+	...args: Tail<
+		Parameters<typeof h3.getValidatedRouterParams<T, H3Event, TEventInput>>
+	>
+) => ReturnType<typeof h3.getValidatedRouterParams<T, H3Event, TEventInput>>;
+export const getValidatedRouterParams = createWrapperFunction(
+	h3.getValidatedRouterParams,
+) as PrependOverload<
+	typeof h3.getValidatedRouterParams,
+	WrappedGetValidatedRouterParams
+>;
+export const assertMethod = createWrapperFunction(h3.assertMethod);
+export const getRequestHeaders = createWrapperFunction(h3.getRequestHeaders);
+export const getRequestHeader = createWrapperFunction(h3.getRequestHeader);
+export const getRequestURL = createWrapperFunction(h3.getRequestURL);
+export const getRequestHost = createWrapperFunction(h3.getRequestHost);
+export const getRequestProtocol = createWrapperFunction(h3.getRequestProtocol);
+export const getRequestIP = createWrapperFunction(h3.getRequestIP);
+export const setResponseStatus = (code?: number, text?: string) => {
+	const e = getEvent();
+
+	if (e.res.status !== undefined) e.res.status = code;
+	if (e.res.statusText !== undefined) e.res.statusText = text;
+};
+export const getResponseStatus = () => getEvent().res.status;
+export const getResponseStatusText = () => getEvent().res.statusText;
+export const getResponseHeaders = () =>
+	Object.fromEntries(getEvent().res.headers.entries());
+export const getResponseHeader = (name: string) =>
+	getEvent().res.headers.get(name);
+export const setResponseHeaders = (values: Record<string, string>) => {
+	const headers = getEvent().res.headers;
+	for (const [name, value] of Object.entries(values)) {
+		headers.set(name, value);
+	}
+};
+export const setResponseHeader = (name: string, value: string | string[]) => {
+	const headers = getEvent().res.headers;
+
+	(Array.isArray(value) ? value : [value]).forEach((value) => {
+		headers.set(name, value);
+	});
+};
+export const appendResponseHeaders = (values: Record<string, string>) => {
+	const headers = getEvent().res.headers;
+	for (const [name, value] of Object.entries(values)) {
+		headers.append(name, value);
+	}
+};
+export const appendResponseHeader = (
+	name: string,
+	value: string | string[],
+) => {
+	const headers = getEvent().res.headers;
+
+	(Array.isArray(value) ? value : [value]).forEach((value) => {
+		headers.append(name, value);
+	});
+};
+export const defaultContentType = (type: string) =>
+	getEvent().res.headers.set("content-type", type);
+export const proxyRequest = createWrapperFunction(h3.proxyRequest);
+export const fetchWithEvent = createWrapperFunction(h3.fetchWithEvent);
+export const getProxyRequestHeaders = createWrapperFunction(
+	h3.getProxyRequestHeaders,
+);
+
+export const parseCookies = createWrapperFunction(h3.parseCookies);
+export const getCookie = createWrapperFunction(h3.getCookie);
+export const setCookie = createWrapperFunction(h3.setCookie);
+export const deleteCookie = createWrapperFunction(h3.deleteCookie);
+// not exported :(
+type SessionDataT = Record<string, any>;
+type WrappedUseSession = <T extends SessionDataT>(
+	...args: Tail<Parameters<typeof h3.useSession<T>>>
+) => ReturnType<typeof h3.useSession<T>>;
+export const useSession: WrappedUseSession = createWrapperFunction(
+	h3.useSession,
+);
+type WrappedGetSession = <T extends SessionDataT>(
+	...args: Tail<Parameters<typeof h3.getSession<T>>>
+) => ReturnType<typeof h3.getSession<T>>;
+export const getSession: WrappedGetSession = createWrapperFunction(
+	h3.getSession,
+);
+type WrappedUpdateSession = <T extends SessionDataT>(
+	...args: Tail<Parameters<typeof h3.updateSession<T>>>
+) => ReturnType<typeof h3.updateSession<T>>;
+export const updateSession: WrappedUpdateSession = createWrapperFunction(
+	h3.updateSession,
+);
+type WrappedSealSession = <T extends SessionDataT>(
+	...args: Tail<Parameters<typeof h3.sealSession<T>>>
+) => ReturnType<typeof h3.sealSession<T>>;
+export const sealSession: WrappedSealSession = createWrapperFunction(
+	h3.sealSession,
+);
+export const unsealSession = createWrapperFunction(h3.unsealSession);
+export const clearSession = createWrapperFunction(h3.clearSession);
+export const handleCacheHeaders = createWrapperFunction(h3.handleCacheHeaders);
+export const handleCors = createWrapperFunction(h3.handleCors);
+export const appendCorsHeaders = createWrapperFunction(h3.appendCorsHeaders);
+export const appendCorsPreflightHeaders = createWrapperFunction(
+	h3.appendCorsPreflightHeaders,
+);
+export const appendHeader = appendResponseHeader;
+export const appendHeaders = appendResponseHeaders;
+export const setHeader = setResponseHeader;
+export const setHeaders = setResponseHeaders;
+export const getHeader = getRequestHeader;
+export const getHeaders = getRequestHeaders;
+export const getRequestFingerprint = createWrapperFunction(
+	h3.getRequestFingerprint,
+);
+export const getRequestWebStream = () => getEvent().req.body;
+export const readFormData = () => getEvent().req.formData();
+type WrappedReadValidatedBody = <
+	T extends HTTPEvent,
+	TEventInput = InferEventInput<"body", H3Event, T>,
+>(
+	...args: Tail<
+		Parameters<typeof h3.readValidatedBody<T, H3Event, TEventInput>>
+	>
+) => ReturnType<typeof h3.readValidatedBody<T, H3Event, TEventInput>>;
+export const readValidatedBody = createWrapperFunction(
+	h3.readValidatedBody,
+) as PrependOverload<typeof h3.readValidatedBody, WrappedReadValidatedBody>;
+export const getContext = createWrapperFunction(_getContext);
+export const setContext = createWrapperFunction(_setContext);
+export const removeResponseHeader = (name: string) =>
+	getEvent().res.headers.delete(name);
+export const clearResponseHeaders = (headerNames?: string[]) => {
+	const headers = getEvent().res.headers;
+
+	if (headerNames && headerNames.length > 0) {
+		for (const name of headerNames) {
+			headers.delete(name);
+		}
+	} else {
+		for (const name of headers.keys()) {
+			headers.delete(name);
+		}
+	}
+};

package/src/index.tsx

@@ -0,0 +1,19 @@
+// @refresh skip
+
+export type {
+	APIEvent,
+	APIHandler,
+	Asset,
+	ContextMatches,
+	DocumentComponentProps,
+	FetchEvent,
+	HandlerOptions,
+	PageEvent,
+	ResponseStub,
+	ServerFunctionMeta
+} from "./server/types.ts";
+export { default as clientOnly } from "./shared/clientOnly.ts";
+export { GET } from "./shared/GET.ts";
+export { HttpHeader } from "./shared/HttpHeader.tsx";
+export { HttpStatusCode } from "./shared/HttpStatusCode.ts";
+export { getServerFunctionMeta } from "./shared/serverFunction.ts";

package/src/internal.d.ts

@@ -0,0 +1,14 @@
+import "h3";
+declare module "h3" {
+  import { ViteDevServer } from "vite";
+
+  export interface H3EventContext {
+    viteDevServer?: ViteDevServer;
+  }
+}
+
+import type { Rollup } from "vite";
+declare global {
+  var START_CLIENT_BUNDLE: Rollup.OutputBundle;
+  var USING_SOLID_START_DEV_SERVER: boolean | undefined
+}