@solidjs/web 2.0.0-experimental.0

package/package.json

@@ -0,0 +1,97 @@
+{
+  "name": "@solidjs/web",
+  "description": "Solid's web runtime for the browser and the server",
+  "version": "2.0.0-experimental.0",
+  "author": "Ryan Carniato",
+  "license": "MIT",
+  "homepage": "https://solidjs.com",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/solidjs/solid-web"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/server.cjs",
+  "module": "./dist/server.js",
+  "unpkg": "./dist/web.cjs",
+  "types": "./types/index.d.ts",
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "types",
+    "package.json",
+    "storage/dist",
+    "storage/types",
+    "storage/package.json"
+  ],
+  "exports": {
+    ".": {
+      "worker": {
+        "types": "./types/index.d.ts",
+        "import": "./dist/server.js",
+        "require": "./dist/server.cjs"
+      },
+      "browser": {
+        "development": {
+          "types": "./types/index.d.ts",
+          "import": "./dist/dev.js",
+          "require": "./dist/dev.cjs"
+        },
+        "types": "./types/index.d.ts",
+        "import": "./dist/web.js",
+        "require": "./dist/web.cjs"
+      },
+      "deno": {
+        "types": "./types/index.d.ts",
+        "import": "./dist/server.js",
+        "require": "./dist/server.cjs"
+      },
+      "node": {
+        "types": "./types/index.d.ts",
+        "import": "./dist/server.js",
+        "require": "./dist/server.cjs"
+      },
+      "development": {
+        "types": "./types/index.d.ts",
+        "import": "./dist/dev.js",
+        "require": "./dist/dev.cjs"
+      },
+      "types": "./types/index.d.ts",
+      "import": "./dist/web.js",
+      "require": "./dist/web.cjs"
+    },
+    "./storage": {
+      "types": "./storage/types/index.d.ts",
+      "import": "./storage/dist/storage.js",
+      "require": "./storage/dist/storage.cjs"
+    },
+    "./dist/*": "./dist/*",
+    "./types/*": "./types/*"
+  },
+  "dependencies": {
+    "seroval": "^1.1.0",
+    "seroval-plugins": "^1.1.0"
+  },
+  "peerDependencies": {
+    "solid-js": "^2.0.0-experimental.0"
+  },
+  "devDependencies": {
+    "solid-js": "2.0.0-experimental.0"
+  },
+  "scripts": {
+    "build": "npm-run-all -nl build:*",
+    "build:clean": "rimraf dist/",
+    "build:js": "rollup -c",
+    "link": "symlink-dir . node_modules/@solidjs/web",
+    "types": "npm-run-all -nl types:*",
+    "types:clean": "rimraf types/",
+    "types:web": "tsc --project ./tsconfig.build.json",
+    "types:copy-web": "ncp ../../node_modules/dom-expressions/src/client.d.ts ./types/client.d.ts && ncp ../../node_modules/dom-expressions/src/server.d.ts ./types/server.d.ts",
+    "types:web-storage": "tsc --project ./storage/tsconfig.build.json",
+    "test": "vitest run",
+    "coverage": "vitest run --coverage",
+    "test-types": "tsc --project tsconfig.test.json"
+  }
+}

package/storage/dist/storage.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+var node_async_hooks = require('node:async_hooks');
+var web = require('@solidjs/web');
+
+function provideRequestEvent(init, cb) {
+  if (!web.isServer) throw new Error("Attempting to use server context in non-server build");
+  const ctx = globalThis[web.RequestContext] = globalThis[web.RequestContext] || new node_async_hooks.AsyncLocalStorage();
+  return ctx.run(init, cb);
+}
+
+exports.provideRequestEvent = provideRequestEvent;

package/storage/dist/storage.js

@@ -0,0 +1,10 @@
+import { AsyncLocalStorage } from "node:async_hooks";
+import { isServer, RequestContext } from "@solidjs/web";
+
+function provideRequestEvent(init, cb) {
+  if (!isServer) throw new Error("Attempting to use server context in non-server build");
+  const ctx = (globalThis[RequestContext] = globalThis[RequestContext] || new AsyncLocalStorage());
+  return ctx.run(init, cb);
+}
+
+export { provideRequestEvent };

package/storage/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@solidjs/web/storage",
+  "main": "./dist/storage.cjs",
+  "module": "./dist/storage.js",
+  "types": "./types/index.d.ts",
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "import": "./dist/storage.js",
+      "require": "./dist/storage.cjs"
+    }
+  }
+}

package/storage/types/index.d.ts

@@ -0,0 +1,2 @@
+import type { RequestEvent } from "@solidjs/web";
+export declare function provideRequestEvent<T extends RequestEvent, U>(init: T, cb: () => U): U;

package/types/client.d.ts

@@ -0,0 +1,85 @@
+import { JSX } from "./jsx.js";
+export const Properties: Set<string>;
+export const ChildProperties: Set<string>;
+export const DelegatedEvents: Set<string>;
+export const DOMElements: Set<string>;
+export const SVGElements: Set<string>;
+export const SVGNamespace: Record<string, string>;
+export function getPropAlias(prop: string, tagName: string): string | undefined;
+
+type MountableElement = Element | Document | ShadowRoot | DocumentFragment | Node;
+export function render(code: () => JSX.Element, element: MountableElement): () => void;
+export function template(html: string, isCE?: boolean, isSVG?: boolean): () => Element;
+export function effect<T>(
+  fn: (prev?: T) => T,
+  effect: (value: T, prev?: T) => void,
+  init?: T
+): void;
+export function memo<T>(fn: () => T, equal: boolean): () => T;
+export function untrack<T>(fn: () => T): T;
+export function insert<T>(
+  parent: MountableElement,
+  accessor: (() => T) | T,
+  marker?: Node | null,
+  init?: JSX.Element
+): JSX.Element;
+export function createComponent<T>(Comp: (props: T) => JSX.Element, props: T): JSX.Element;
+export function delegateEvents(eventNames: string[], d?: Document): void;
+export function clearDelegatedEvents(d?: Document): void;
+export function spread<T>(
+  node: Element,
+  accessor: T,
+  isSVG?: Boolean,
+  skipChildren?: Boolean
+): void;
+export function assign(node: Element, props: any, isSVG?: Boolean, skipChildren?: Boolean): void;
+export function setAttribute(node: Element, name: string, value: string): void;
+export function setAttributeNS(node: Element, namespace: string, name: string, value: string): void;
+export function setBoolAttribute(node: Element, name: string, value: any): void;
+type ClassList =
+  | Record<string, boolean>
+  | Array<string | number | boolean | null | undefined | Record<string, boolean>>;
+export function className(
+  node: Element,
+  value: string | ClassList,
+  isSvg?: boolean,
+  prev?: string | ClassList
+): void;
+export function setProperty(node: Element, name: string, value: any): void;
+export function addEventListener(
+  node: Element,
+  name: string,
+  handler: EventListener | EventListenerObject | (EventListenerObject & AddEventListenerOptions),
+  delegate: boolean
+): void;
+export function style(
+  node: Element,
+  value: { [k: string]: string },
+  prev?: { [k: string]: string }
+): void;
+export function getOwner(): unknown;
+export function mergeProps(...sources: unknown[]): unknown;
+export function dynamicProperty(props: unknown, key: string): unknown;
+
+export function hydrate(
+  fn: () => JSX.Element,
+  node: MountableElement,
+  options?: { renderId?: string; owner?: unknown }
+): () => void;
+export function getHydrationKey(): string;
+export function getNextElement(template?: HTMLTemplateElement): Element;
+export function getNextMatch(start: Node, elementName: string): Element;
+export function getNextMarker(start: Node): [Node, Array<Node>];
+export function useAssets(fn: () => JSX.Element): void;
+export function getAssets(): string;
+export function HydrationScript(): JSX.Element;
+export function generateHydrationScript(): string;
+export function Assets(props: { children?: JSX.Element }): JSX.Element;
+export function Hydration(props: { children?: JSX.Element }): JSX.Element;
+export function NoHydration(props: { children?: JSX.Element }): JSX.Element;
+export interface RequestEvent {
+  request: Request;
+}
+export declare const RequestContext: unique symbol;
+export function getRequestEvent(): RequestEvent | undefined;
+export function runHydrationEvents(): void;

package/types/core.d.ts

@@ -0,0 +1,11 @@
+export {
+  getOwner,
+  createComponent,
+  createRoot as root,
+  createRenderEffect as effect,
+  createMemo as memo,
+  sharedConfig,
+  untrack,
+  merge as mergeProps,
+  flatten
+} from "solid-js";

package/types/index.d.ts

@@ -0,0 +1,32 @@
+import { hydrate as hydrateCore } from "./client.js";
+import { JSX, ComponentProps, ValidComponent } from "solid-js";
+export * from "./client.js";
+export { For, Show, Suspense, Switch, Match, ErrorBoundary, merge as mergeProps } from "solid-js";
+export * from "./server-mock.js";
+export declare const isServer: boolean;
+export declare const isDev: boolean;
+export declare const hydrate: typeof hydrateCore;
+/**
+ * Renders components somewhere else in the DOM
+ *
+ * Useful for inserting modals and tooltips outside of an cropping layout. If no mount point is given, the portal is inserted in document.body; it is wrapped in a `<div>` unless the target is document.head or `isSVG` is true. setting `useShadow` to true places the element in a shadow root to isolate styles.
+ *
+ * @description https://docs.solidjs.com/reference/components/portal
+ */
+export declare function Portal<T extends boolean = false, S extends boolean = false>(props: {
+  mount?: Element;
+  children: JSX.Element;
+}): Text;
+export type DynamicProps<T extends ValidComponent, P = ComponentProps<T>> = {
+  [K in keyof P]: P[K];
+} & {
+  component: T | undefined;
+};
+/**
+ * Renders an arbitrary custom or native component and passes the other props
+ * ```typescript
+ * <Dynamic component={multiline() ? 'textarea' : 'input'} value={value()} />
+ * ```
+ * @description https://docs.solidjs.com/reference/components/dynamic
+ */
+export declare function Dynamic<T extends ValidComponent>(props: DynamicProps<T>): JSX.Element;

package/types/jsx.d.ts

@@ -0,0 +1 @@
+export type { JSX } from "solid-js";

package/types/server-mock.d.ts

@@ -0,0 +1,47 @@
+export declare function renderToString<T>(
+  fn: () => T,
+  options?: {
+    nonce?: string;
+    renderId?: string;
+  }
+): string;
+export declare function renderToStringAsync<T>(
+  fn: () => T,
+  options?: {
+    timeoutMs?: number;
+    nonce?: string;
+    renderId?: string;
+  }
+): Promise<string>;
+export declare function renderToStream<T>(
+  fn: () => T,
+  options?: {
+    nonce?: string;
+    renderId?: string;
+    onCompleteShell?: (info: { write: (v: string) => void }) => void;
+    onCompleteAll?: (info: { write: (v: string) => void }) => void;
+  }
+): {
+  pipe: (writable: { write: (v: string) => void }) => void;
+  pipeTo: (writable: WritableStream) => void;
+};
+export declare function ssr(
+  template: string[] | string,
+  ...nodes: any[]
+): {
+  t: string;
+};
+export declare function ssrElement(
+  name: string,
+  props: any,
+  children: any,
+  needsId: boolean
+): {
+  t: string;
+};
+export declare function ssrClassList(value: { [k: string]: boolean }): string;
+export declare function ssrStyle(value: { [k: string]: string }): string;
+export declare function ssrAttribute(key: string, value: boolean): string;
+export declare function ssrHydrationKey(): string;
+export declare function resolveSSRNode(node: any): string;
+export declare function escape(html: string): string;

package/types/server.d.ts

@@ -0,0 +1,151 @@
+import { JSX } from "./jsx.js";
+export const Properties: Set<string>;
+export const ChildProperties: Set<string>;
+export const DelegatedEvents: Set<string>;
+export const DOMElements: Set<string>;
+export const SVGElements: Set<string>;
+export const SVGNamespace: Record<string, string>;
+export function getPropAlias(prop: string, tagName: string): string | undefined;
+
+type MountableElement = Element | Document | ShadowRoot | DocumentFragment | Node;
+
+export function renderToString<T>(
+  fn: () => T,
+  options?: {
+    nonce?: string;
+    renderId?: string;
+    onError?: (err: any) => void;
+  }
+): string;
+export function renderToStringAsync<T>(
+  fn: () => T,
+  options?: {
+    timeoutMs?: number;
+    nonce?: string;
+    renderId?: string;
+    noScripts?: boolean;
+    onError?: (err: any) => void;
+  }
+): Promise<string>;
+export function renderToStream<T>(
+  fn: () => T,
+  options?: {
+    nonce?: string;
+    renderId?: string;
+    onCompleteShell?: (info: { write: (v: string) => void }) => void;
+    onCompleteAll?: (info: { write: (v: string) => void }) => void;
+    onError?: (err: any) => void;
+  }
+): {
+  pipe: (writable: { write: (v: string) => void }) => void;
+  pipeTo: (writable: WritableStream) => Promise<void>;
+};
+
+export function HydrationScript(props: { nonce?: string; eventNames?: string[] }): JSX.Element;
+export function ssr(template: string[] | string, ...nodes: any[]): { t: string };
+export function ssrElement(
+  name: string,
+  props: any,
+  children: any,
+  needsId: boolean
+): { t: string };
+export function ssrClassList(value: { [k: string]: boolean }): string;
+export function ssrStyle(value: { [k: string]: string }): string;
+export function ssrAttribute(key: string, value: any, isBoolean: boolean): string;
+export function ssrHydrationKey(): string;
+export function resolveSSRNode(node: any): string;
+export function escape(html: string): string;
+export function useAssets(fn: () => JSX.Element): void;
+export function getAssets(): string;
+export function getHydrationKey(): string;
+export function effect<T>(fn: (prev?: T) => T, init?: T): void;
+export function memo<T>(fn: () => T, equal: boolean): () => T;
+export function createComponent<T>(Comp: (props: T) => JSX.Element, props: T): JSX.Element;
+export function mergeProps(...sources: unknown[]): unknown;
+export function getOwner(): unknown;
+export function generateHydrationScript(options: { nonce?: string; eventNames?: string[] }): string;
+export declare const RequestContext: unique symbol;
+export interface RequestEvent {
+  request: Request;
+  locals: Record<string | number | symbol, any>;
+}
+export function getRequestEvent(): RequestEvent | undefined;
+
+export function Hydration(props: { children?: JSX.Element }): JSX.Element;
+export function NoHydration(props: { children?: JSX.Element }): JSX.Element;
+export function Assets(props: { children?: JSX.Element }): JSX.Element;
+export function untrack<T>(fn: () => T): T;
+
+// client-only APIs
+
+/** @deprecated not supported on the server side */
+export function classList(
+  node: Element,
+  value: { [k: string]: boolean },
+  prev?: { [k: string]: boolean }
+): { [k: string]: boolean };
+
+/** @deprecated not supported on the server side */
+export function style(
+  node: Element,
+  value: { [k: string]: string },
+  prev?: { [k: string]: string }
+): void;
+
+/** @deprecated not supported on the server side */
+export function insert<T>(
+  parent: MountableElement,
+  accessor: (() => T) | T,
+  marker?: Node | null,
+  init?: JSX.Element
+): JSX.Element;
+
+/** @deprecated not supported on the server side */
+export function spread<T>(
+  node: Element,
+  accessor: T,
+  isSVG?: Boolean,
+  skipChildren?: Boolean
+): void;
+
+/** @deprecated not supported on the server side */
+export function delegateEvents(eventNames: string[], d?: Document): void;
+/** @deprecated not supported on the server side */
+export function dynamicProperty(props: unknown, key: string): unknown;
+/** @deprecated not supported on the server side */
+export function setAttribute(node: Element, name: string, value: string): void;
+/** @deprecated not supported on the server side */
+export function setAttributeNS(node: Element, namespace: string, name: string, value: string): void;
+
+/** @deprecated not supported on the server side */
+export function addEventListener(
+  node: Element,
+  name: string,
+  handler: () => void,
+  delegate: boolean
+): void;
+
+/** @deprecated not supported on the server side */
+export function render(code: () => JSX.Element, element: MountableElement): () => void;
+/** @deprecated not supported on the server side */
+export function template(html: string, isCE?: boolean, isSVG?: boolean): () => Element;
+/** @deprecated not supported on the server side */
+export function setProperty(node: Element, name: string, value: any): void;
+/** @deprecated not supported on the server side */
+export function className(node: Element, value: string): void;
+/** @deprecated not supported on the server side */
+export function assign(node: Element, props: any, isSVG?: Boolean, skipChildren?: Boolean): void;
+
+/** @deprecated not supported on the server side */
+export function hydrate(
+  fn: () => JSX.Element,
+  node: MountableElement,
+  options?: { renderId?: string; owner?: unknown }
+): () => void;
+
+/** @deprecated not supported on the server side */
+export function getNextElement(template?: HTMLTemplateElement): Element;
+/** @deprecated not supported on the server side */
+export function getNextMatch(start: Node, elementName: string): Element;
+/** @deprecated not supported on the server side */
+export function getNextMarker(start: Node): [Node, Array<Node>];