@solidjs/web - npm Package Compare versions

Comparing version 2.0.0-beta.6 to 2.0.0-beta.7

storage/types-cjs/index.d.cts

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

storage/types-cjs/package.json

+{
+  "type": "commonjs"
+}

storage/types-cjs/src/client.d.cts

+export * from "dom-expressions/src/client.js";

storage/types-cjs/src/index.d.cts

+import { hydrate as hydrateCore, render as renderCore } from "./client.cjs";
+import { JSX, ComponentProps, ValidComponent } from "solid-js";
+export * from "./client.cjs";
+export declare function render(...args: Parameters<typeof renderCore>): ReturnType<typeof renderCore>;
+export { For, Show, Switch, Match, Errored, Loading, Repeat, Reveal, NoHydration, Hydration, merge as mergeProps } from "solid-js";
+export * from "./server-mock.cjs";
+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 component or element with the given props
+ *
+ * This is a lower level version of the `Dynamic` component, useful for
+ * performance optimizations in libraries. Do not use this unless you know
+ * what you are doing.
+ * ```typescript
+ * const element = () => multiline() ? 'textarea' : 'input';
+ * createDynamic(element, { value: value() });
+ * ```
+ * @description https://docs.solidjs.com/reference/components/dynamic
+ */
+export declare function createDynamic<T extends ValidComponent>(component: () => T | undefined, props: ComponentProps<T>): JSX.Element;
+/**
+ * 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;

storage/types-cjs/src/server-mock.d.cts

+export declare function renderToString<T>(fn: () => T, options?: {
+    nonce?: string;
+    renderId?: string;
+    noScripts?: boolean;
+    plugins?: any[];
+    manifest?: Record<string, {
+        file: string;
+        css?: string[];
+        isEntry?: boolean;
+        isDynamicEntry?: boolean;
+        imports?: string[];
+    }>;
+    onError?: (err: any) => void;
+}): string;
+export declare function renderToStringAsync<T>(fn: () => T, options?: {
+    timeoutMs?: number;
+    nonce?: string;
+    renderId?: string;
+    noScripts?: boolean;
+    plugins?: any[];
+    manifest?: Record<string, {
+        file: string;
+        css?: string[];
+        isEntry?: boolean;
+        isDynamicEntry?: boolean;
+        imports?: string[];
+    }>;
+    onError?: (err: any) => void;
+}): Promise<string>;
+export declare function renderToStream<T>(fn: () => T, options?: {
+    nonce?: string;
+    renderId?: string;
+    noScripts?: boolean;
+    plugins?: any[];
+    manifest?: Record<string, {
+        file: string;
+        css?: string[];
+        isEntry?: boolean;
+        isDynamicEntry?: boolean;
+        imports?: string[];
+    }>;
+    onCompleteShell?: (info: {
+        write: (v: string) => void;
+    }) => void;
+    onCompleteAll?: (info: {
+        write: (v: string) => void;
+    }) => void;
+    onError?: (err: any) => void;
+}): {
+    then: (fn: (html: string) => void) => void;
+    pipe: (writable: {
+        write: (v: string) => void;
+        end: () => void;
+    }) => void;
+    pipeTo: (writable: WritableStream) => Promise<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;

storage/types-cjs/storage/src/index.d.cts

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

types-cjs/client.d.cts

+import { JSX } from "./jsx.cjs";
+export const DOMWithState: Record<string, Record<string, 1 | 2>>;
+export const ChildProperties: Set<string>;
+export const DelegatedEvents: Set<string>;
+export const DOMElements: Set<string>;
+export const SVGElements: Set<string>;
+export const MathMLElements: Set<string>;
+export const Namespaces: Record<string, string>;
+
+type MountableElement = Element | Document | ShadowRoot | DocumentFragment | Node;
+export function render(
+  code: () => JSX.Element,
+  element: MountableElement,
+  init?: JSX.Element,
+  options?: { owner?: unknown }
+): () => void;
+/**
+ * @param flag
+ * - `undefined` — clone the template as-is (uses `cloneNode`).
+ * - `1` — use `document.importNode` instead of `cloneNode`.
+ * - `2` — the template html is wrapped; the outer tag is stripped at clone time.
+ */
+export function template(html: string, flag?: 1 | 2): () => Element;
+export function effect<T>(fn: (prev?: T) => T, effect: (value: T, prev?: T) => void): 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,
+  skipChildren?: Boolean
+): void;
+export function assign(
+  node: Element,
+  props: any,
+  skipChildren?: Boolean,
+  prevProps?: any,
+  skipRef?: Boolean
+): void;
+export function setAttribute(node: Element, name: string, value: string): void;
+export function setAttributeNS(node: Element, namespace: string, name: string, value: string): void;
+type ClassList =
+  | Record<string, boolean>
+  | Array<string | number | boolean | null | undefined | Record<string, boolean>>;
+export function className(node: Element, value: string | ClassList, prev?: string | ClassList): void;
+export function setProperty(node: Element, name: string, value: any): void;
+export function setStyleProperty(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 applyRef(r: ((element: Element) => void) | ((element: Element) => void)[], element: Element): void;
+export function ref(fn: () => ((element: Element) => void) | ((element: Element) => void)[], element: Element): void;
+
+export function hydrate(
+  fn: () => JSX.Element,
+  node: MountableElement,
+  options?: { renderId?: string; owner?: unknown }
+): () => void;
+export function getHydrationKey(): string | undefined;
+export function getNextElement(template?: () => Element): 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(props?: { nonce?: string; eventNames?: string[] }): JSX.Element;
+export function generateHydrationScript(options?: { nonce?: string; eventNames?: string[] }): string;
+export function Assets(props: { children?: JSX.Element }): JSX.Element;
+export interface RequestEvent {
+  request: Request;
+  locals: Record<string | number | symbol, any>;
+}
+export declare const RequestContext: unique symbol;
+export function getRequestEvent(): RequestEvent | undefined;
+export function runHydrationEvents(): void;

types-cjs/core.d.cts

+export { getOwner, runWithOwner, createComponent, createRoot as root, sharedConfig, untrack, merge as mergeProps, flatten, ssrHandleError, ssrRunInScope } from "solid-js";
+export declare const effect: (fn: any, effectFn: any) => void;
+export declare const memo: (fn: any, transparent: any) => any;

types-cjs/index.d.cts

+import { hydrate as hydrateCore, render as renderCore } from "./client.cjs";
+import { JSX, ComponentProps, ValidComponent } from "solid-js";
+export * from "./client.cjs";
+export declare function render(...args: Parameters<typeof renderCore>): ReturnType<typeof renderCore>;
+export { For, Show, Switch, Match, Errored, Loading, Repeat, Reveal, NoHydration, Hydration, merge as mergeProps } from "solid-js";
+export * from "./server-mock.cjs";
+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 component or element with the given props
+ *
+ * This is a lower level version of the `Dynamic` component, useful for
+ * performance optimizations in libraries. Do not use this unless you know
+ * what you are doing.
+ * ```typescript
+ * const element = () => multiline() ? 'textarea' : 'input';
+ * createDynamic(element, { value: value() });
+ * ```
+ * @description https://docs.solidjs.com/reference/components/dynamic
+ */
+export declare function createDynamic<T extends ValidComponent>(component: () => T | undefined, props: ComponentProps<T>): JSX.Element;
+/**
+ * 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;

types-cjs/jsx.d.cts

+export type { JSX } from "solid-js";

types-cjs/package.json

+{
+  "type": "commonjs"
+}

types-cjs/server-mock.d.cts

+export declare function renderToString<T>(fn: () => T, options?: {
+    nonce?: string;
+    renderId?: string;
+    noScripts?: boolean;
+    plugins?: any[];
+    manifest?: Record<string, {
+        file: string;
+        css?: string[];
+        isEntry?: boolean;
+        isDynamicEntry?: boolean;
+        imports?: string[];
+    }>;
+    onError?: (err: any) => void;
+}): string;
+export declare function renderToStringAsync<T>(fn: () => T, options?: {
+    timeoutMs?: number;
+    nonce?: string;
+    renderId?: string;
+    noScripts?: boolean;
+    plugins?: any[];
+    manifest?: Record<string, {
+        file: string;
+        css?: string[];
+        isEntry?: boolean;
+        isDynamicEntry?: boolean;
+        imports?: string[];
+    }>;
+    onError?: (err: any) => void;
+}): Promise<string>;
+export declare function renderToStream<T>(fn: () => T, options?: {
+    nonce?: string;
+    renderId?: string;
+    noScripts?: boolean;
+    plugins?: any[];
+    manifest?: Record<string, {
+        file: string;
+        css?: string[];
+        isEntry?: boolean;
+        isDynamicEntry?: boolean;
+        imports?: string[];
+    }>;
+    onCompleteShell?: (info: {
+        write: (v: string) => void;
+    }) => void;
+    onCompleteAll?: (info: {
+        write: (v: string) => void;
+    }) => void;
+    onError?: (err: any) => void;
+}): {
+    then: (fn: (html: string) => void) => void;
+    pipe: (writable: {
+        write: (v: string) => void;
+        end: () => void;
+    }) => void;
+    pipeTo: (writable: WritableStream) => Promise<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;

types-cjs/server.d.cts

+import { JSX } from "./jsx.cjs";
+export const ChildProperties: Set<string>;
+export const DelegatedEvents: Set<string>;
+export const DOMElements: Set<string>;
+export const SVGElements: Set<string>;
+export const MathMLElements: Set<string>;
+export const Namespaces: Record<string, string>;
+
+type MountableElement = Element | Document | ShadowRoot | DocumentFragment | Node;
+
+export function renderToString<T>(
+  fn: () => T,
+  options?: {
+    nonce?: string;
+    renderId?: string;
+    noScripts?: boolean;
+    plugins?: any[];
+    manifest?: Record<string, { file: string; css?: string[]; isEntry?: boolean; imports?: string[] }> & { _base?: string };
+    onError?: (err: any) => void;
+  }
+): string;
+/** @deprecated use renderToStream which also returns a promise */
+export function renderToStringAsync<T>(
+  fn: () => T,
+  options?: {
+    timeoutMs?: number;
+    nonce?: string;
+    renderId?: string;
+    noScripts?: boolean;
+    plugins?: any[];
+    manifest?: Record<string, { file: string; css?: string[]; isEntry?: boolean; imports?: string[] }> & { _base?: string };
+    onError?: (err: any) => void;
+  }
+): Promise<string>;
+export function renderToStream<T>(
+  fn: () => T,
+  options?: {
+    nonce?: string;
+    renderId?: string;
+    noScripts?: boolean;
+    plugins?: any[];
+    manifest?: Record<string, { file: string; css?: string[]; isEntry?: boolean; imports?: string[] }> & { _base?: string };
+    onCompleteShell?: (info: { write: (v: string) => void }) => void;
+    onCompleteAll?: (info: { write: (v: string) => void }) => void;
+    onError?: (err: any) => void;
+  }
+): {
+  then: (fn: (html: string) => void) => void;
+  pipe: (writable: { write: (v: string) => void; end: () => 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 ssrClassName(value: string | { [k: string]: boolean } | Array<any>): string;
+export function ssrStyle(value: string | { [k: string]: string }): string;
+export function ssrStyleProperty(name: string, value: any): string;
+export function ssrAttribute(key: string, value: any): string;
+export function ssrHydrationKey(): string;
+export function resolveSSRNode(node: any, result?: any, top?: boolean): any;
+export function escape(s: any, attr?: boolean): any;
+export function applyRef(r: ((element: any) => void) | ((element: any) => void)[], element: any): void;
+export function useAssets(fn: () => JSX.Element): void;
+export function getAssets(): string;
+export function getHydrationKey(): string | undefined;
+export function effect<T>(fn: (prev?: T) => T, effect: (value: T, prev?: T) => void): 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 ssrRunInScope(fn: () => void, owner: unknown): void;
+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 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 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,
+  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
+ * @param flag
+ * - `undefined` — clone the template as-is (uses `cloneNode`).
+ * - `1` — use `document.importNode` instead of `cloneNode`.
+ * - `2` — the template html is wrapped; the outer tag is stripped at clone time.
+ */
+export function template(html: string, flag?: 1 | 2): () => 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, 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?: () => Element): 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>];
+/** @deprecated not supported on the server side */
+export function runHydrationEvents(): void;

dist/dev.cjs

@@ -9,5 +9,5 @@ 'use strict';
     value: 1,
-    defaultValue: 1,
+    defaultValue: 2,
     checked: 1,
-    defaultChecked: 1
+    defaultChecked: 2
   },
@@ -20,22 +20,17 @@ SELECT: {
     selected: 1,
-    defaultSelected: 1
+    defaultSelected: 2
   },
   TEXTAREA: {
     value: 1,
-    defaultValue: 1
+    defaultValue: 2
   },
   VIDEO: {
     muted: 1,
-    defaultMuted: 1
+    defaultMuted: 2
   },
   AUDIO: {
     muted: 1,
-    defaultMuted: 1
+    defaultMuted: 2
   }
 };
-for (const tagName in DOMWithState) {
-  for (const propName in DOMWithState[tagName]) {
-    DOMWithState[tagName]["prop:" + propName] = 1;
-  }
-}
 const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
@@ -59,6 +54,6 @@ const DelegatedEvents = /*#__PURE__*/new Set(["beforeinput", "click", "dblclick", "contextmenu", "focusin", "focusout", "input", "keydown", "keyup", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "pointerdown", "pointermove", "pointerout", "pointerover", "pointerup", "touchend", "touchmove", "touchstart"]);
 
-const effect = (fn, effectFn, initial) => solidJs.createRenderEffect(fn, effectFn, initial, {
+const effect = (fn, effectFn) => solidJs.createRenderEffect(fn, effectFn, {
   transparent: true
 });
-const memo = (fn, transparent) => transparent ? fn.$r ? fn : signals.createMemo(() => fn(), undefined, {
+const memo = (fn, transparent) => transparent ? fn.$r ? fn : signals.createMemo(() => fn(), {
   transparent: true
@@ -129,6 +124,7 @@ }) : solidJs.createMemo(() => fn());
   }
+  const renderRoot = getChildRoot(element);
   let disposer;
   solidJs.createRoot(dispose => {
     disposer = dispose;
-    element === document ? solidJs.flatten(code) : insert(element, code(), element.firstChild ? null : undefined, init);
+    element === document ? solidJs.flatten(code) : insert(element, code(), renderRoot.firstChild ? null : undefined, init);
   }, {
@@ -139,3 +135,3 @@ id: options.renderId
     disposer();
-    element.textContent = "";
+    renderRoot.textContent = "";
   };
@@ -280,6 +276,7 @@ }
 function insert(parent, accessor, marker, initial) {
+  const childRoot = getChildRoot(parent);
   const multi = marker !== undefined;
   if (multi && !initial) initial = [];
   if (isHydrating(parent)) {
-    if (!multi && initial === undefined && parent) initial = [...parent.childNodes];
+    if (!multi && initial === undefined && parent) initial = [...childRoot.childNodes];
     if (Array.isArray(initial)) {
@@ -300,6 +297,6 @@ let j = 0;
     const placeholder = document.createTextNode("");
-    parent.insertBefore(placeholder, marker);
+    childRoot.insertBefore(placeholder, marker);
     initial = [placeholder];
   }
-  effect(prev => normalize(accessor, prev, multi), (value, current) => insertExpression(parent, value, current, marker), initial);
+  effect((prev = initial) => normalize(accessor, prev, multi), (value, current = initial) => insertExpression(parent, value, current, marker));
 }
@@ -323,4 +320,20 @@ function assign(node, props, skipChildren, prevProps = {}, skipRef = false) {
 }
+function loadModuleAssets(mapping) {
+  const hy = globalThis._$HY;
+  if (!hy) return;
+  const pending = [];
+  for (const moduleUrl in mapping) {
+    if (hy.modules[moduleUrl]) continue;
+    const entryUrl = mapping[moduleUrl];
+    if (!hy.loading[moduleUrl]) {
+      hy.loading[moduleUrl] = import(entryUrl).then(mod => {
+        hy.modules[moduleUrl] = mod;
+      });
+    }
+    pending.push(hy.loading[moduleUrl]);
+  }
+  return pending.length ? Promise.all(pending).then(() => {}) : undefined;
+}
 function hydrate$1(code, element, options = {}) {
-  if (globalThis._$HY.done) return render$1(code, element, [...element.childNodes], options);
+  if (globalThis._$HY.done) return render$1(code, element, [...getChildRoot(element).childNodes], options);
   options.renderId ||= "";
@@ -334,2 +347,3 @@ if (!globalThis._$HY.modules) globalThis._$HY.modules = {};
   solidJs.sharedConfig.gather = root => gatherHydratable(element, root);
+  solidJs.sharedConfig.loadModuleAssets = loadModuleAssets;
   solidJs.sharedConfig.cleanupFragment = id => {
@@ -363,5 +377,23 @@ const tpl = document.getElementById("pl-" + id);
   }
+  const rootMapping = globalThis._$HY.r && globalThis._$HY.r["_assets"];
+  if (rootMapping && typeof rootMapping === "object") {
+    const p = loadModuleAssets(rootMapping);
+    if (p) {
+      gatherHydratable(element, options.renderId);
+      let disposer;
+      p.then(() => {
+        try {
+          disposer = render$1(code, element, [...getChildRoot(element).childNodes], options);
+        } finally {
+          solidJs.sharedConfig.hydrating = false;
+        }
+      }, () => {
+        solidJs.sharedConfig.hydrating = false;
+      });
+      return () => disposer && disposer();
+    }
+  }
   try {
     gatherHydratable(element, options.renderId);
-    return render$1(code, element, [...element.childNodes], options);
+    return render$1(code, element, [...getChildRoot(element).childNodes], options);
   } finally {
@@ -415,3 +447,3 @@ solidJs.sharedConfig.hydrating = false;
 function getFirstChild(node, expectedTag) {
-  const child = node.firstChild;
+  const child = getChildRoot(node).firstChild;
   if (isHydrating() && expectedTag && child?.localName !== expectedTag) {
@@ -426,3 +458,3 @@ const isMissing = !child || child.nodeType !== 1;
   if (isHydrating() && expectedTag && sibling?.localName !== expectedTag) {
-    const parent = node.parentElement;
+    const parent = node.parentNode;
     const isMissing = !sibling || sibling.nodeType !== 1;
@@ -434,4 +466,5 @@ console.warn("Hydration structure mismatch: expected <" + expectedTag + "> after", node, "in", parent, "\n  " + describeSiblings(parent, sibling, expectedTag, isMissing));
 function describeSiblings(parent, mismatchChild, expectedTag, isMissing) {
+  if (!parent) return `<${expectedTag} \u2190 parent unavailable>`;
   const children = [];
-  let child = parent.firstChild;
+  let child = getChildRoot(parent).firstChild;
   while (child) {
@@ -441,3 +474,3 @@ if (child.nodeType === 1) children.push(child);
   }
-  const pTag = parent.localName;
+  const pTag = parent.localName || "#fragment";
   if (isMissing) {
@@ -487,2 +520,5 @@ const tags = children.map(c => `<${c.localName}>`).join("");
 }
+function getChildRoot(node) {
+  return node && node.localName === "template" ? node.content : node;
+}
 function toggleClassKey(node, key, value) {
@@ -509,3 +545,3 @@ const classNames = key.trim().split(/\s+/);
   if (prop === "class") return className(node, value, prev), value;
-  if (value === prev && !DOMWithState[nodeName]?.[prop]) return prev;
+  if (value === prev && DOMWithState[nodeName]?.[prop] !== 1) return prev;
   if (prop === "ref") {
@@ -593,2 +629,3 @@ if (!skipRef && value) ref(() => value, node);
   if (value === current) return;
+  const childRoot = getChildRoot(parent);
   const t = typeof value,
@@ -599,4 +636,4 @@ multi = marker !== undefined;
     if (tc === "string" || tc === "number") {
-      parent.firstChild.data = value;
-    } else parent.textContent = value;
+      childRoot.firstChild.data = value;
+    } else childRoot.textContent = value;
   } else if (value === undefined) {
@@ -607,5 +644,5 @@ cleanChildren(parent, current, marker);
       cleanChildren(parent, current, multi ? marker : null, value);
-    } else if (current === undefined || !parent.firstChild) {
-      parent.appendChild(value);
-    } else parent.replaceChild(value, parent.firstChild);
+    } else if (current === undefined || !childRoot.firstChild) {
+      childRoot.appendChild(value);
+    } else childRoot.replaceChild(value, childRoot.firstChild);
   } else if (Array.isArray(value)) {
@@ -618,3 +655,3 @@ const currentArray = current && Array.isArray(current);
         appendNodes(parent, value, marker);
-      } else reconcileArrays(parent, current, value);
+      } else reconcileArrays(childRoot, current, value);
     } else {
@@ -644,5 +681,7 @@ current && cleanChildren(parent);
 function appendNodes(parent, array, marker = null) {
+  parent = getChildRoot(parent);
   for (let i = 0, len = array.length; i < len; i++) parent.insertBefore(array[i], marker);
 }
 function cleanChildren(parent, current, marker, replacement) {
+  parent = getChildRoot(parent);
   if (marker === undefined) return parent.textContent = "";
@@ -704,5 +743,4 @@ if (current.length) {
 const isDev = true;
-const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
-function createElement(tagName, isSVG = false, is = undefined) {
-  return isSVG ? document.createElementNS(SVG_NAMESPACE, tagName) : document.createElement(tagName, {
+function createElement(tagName, is = undefined) {
+  return SVGElements.has(tagName) ? document.createElementNS(Namespaces.svg, tagName) : MathMLElements.has(tagName) ? document.createElementNS(Namespaces.mathml, tagName) : document.createElement(tagName, {
     is
@@ -763,5 +801,4 @@ });
       case "string":
-        const isSvg = SVGElements.has(component);
-        const el = solidJs.sharedConfig.hydrating ? getNextElement() : createElement(component, isSvg, solidJs.untrack(() => props.is));
-        spread(el, props, isSvg);
+        const el = solidJs.sharedConfig.hydrating ? getNextElement() : createElement(component, solidJs.untrack(() => props.is));
+        spread(el, props);
         return el;
@@ -800,2 +837,6 @@ }
 });
+Object.defineProperty(exports, "Repeat", {
+  enumerable: true,
+  get: function () { return solidJs.Repeat; }
+});
 Object.defineProperty(exports, "Reveal", {
@@ -802,0 +843,0 @@ enumerable: true,

dist/dev.js

 import { createRenderEffect, createMemo as createMemo$1, sharedConfig, untrack, runWithOwner, flatten, createRoot, omit, $DEVCOMP, enableHydration, enforceLoadingBoundary } from 'solid-js';
-export { Errored, For, Hydration, Loading, Match, NoHydration, Reveal, Show, Switch, createComponent, getOwner, merge as mergeProps, untrack } from 'solid-js';
+export { Errored, For, Hydration, Loading, Match, NoHydration, Repeat, Reveal, Show, Switch, createComponent, getOwner, merge as mergeProps, untrack } from 'solid-js';
 import { createMemo } from '@solidjs/signals';
@@ -8,5 +8,5 @@
     value: 1,
-    defaultValue: 1,
+    defaultValue: 2,
     checked: 1,
-    defaultChecked: 1
+    defaultChecked: 2
   },
@@ -19,22 +19,17 @@ SELECT: {
     selected: 1,
-    defaultSelected: 1
+    defaultSelected: 2
   },
   TEXTAREA: {
     value: 1,
-    defaultValue: 1
+    defaultValue: 2
   },
   VIDEO: {
     muted: 1,
-    defaultMuted: 1
+    defaultMuted: 2
   },
   AUDIO: {
     muted: 1,
-    defaultMuted: 1
+    defaultMuted: 2
   }
 };
-for (const tagName in DOMWithState) {
-  for (const propName in DOMWithState[tagName]) {
-    DOMWithState[tagName]["prop:" + propName] = 1;
-  }
-}
 const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
@@ -58,6 +53,6 @@ const DelegatedEvents = /*#__PURE__*/new Set(["beforeinput", "click", "dblclick", "contextmenu", "focusin", "focusout", "input", "keydown", "keyup", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "pointerdown", "pointermove", "pointerout", "pointerover", "pointerup", "touchend", "touchmove", "touchstart"]);
 
-const effect = (fn, effectFn, initial) => createRenderEffect(fn, effectFn, initial, {
+const effect = (fn, effectFn) => createRenderEffect(fn, effectFn, {
   transparent: true
 });
-const memo = (fn, transparent) => transparent ? fn.$r ? fn : createMemo(() => fn(), undefined, {
+const memo = (fn, transparent) => transparent ? fn.$r ? fn : createMemo(() => fn(), {
   transparent: true
@@ -128,6 +123,7 @@ }) : createMemo$1(() => fn());
   }
+  const renderRoot = getChildRoot(element);
   let disposer;
   createRoot(dispose => {
     disposer = dispose;
-    element === document ? flatten(code) : insert(element, code(), element.firstChild ? null : undefined, init);
+    element === document ? flatten(code) : insert(element, code(), renderRoot.firstChild ? null : undefined, init);
   }, {
@@ -138,3 +134,3 @@ id: options.renderId
     disposer();
-    element.textContent = "";
+    renderRoot.textContent = "";
   };
@@ -279,6 +275,7 @@ }
 function insert(parent, accessor, marker, initial) {
+  const childRoot = getChildRoot(parent);
   const multi = marker !== undefined;
   if (multi && !initial) initial = [];
   if (isHydrating(parent)) {
-    if (!multi && initial === undefined && parent) initial = [...parent.childNodes];
+    if (!multi && initial === undefined && parent) initial = [...childRoot.childNodes];
     if (Array.isArray(initial)) {
@@ -299,6 +296,6 @@ let j = 0;
     const placeholder = document.createTextNode("");
-    parent.insertBefore(placeholder, marker);
+    childRoot.insertBefore(placeholder, marker);
     initial = [placeholder];
   }
-  effect(prev => normalize(accessor, prev, multi), (value, current) => insertExpression(parent, value, current, marker), initial);
+  effect((prev = initial) => normalize(accessor, prev, multi), (value, current = initial) => insertExpression(parent, value, current, marker));
 }
@@ -322,4 +319,20 @@ function assign(node, props, skipChildren, prevProps = {}, skipRef = false) {
 }
+function loadModuleAssets(mapping) {
+  const hy = globalThis._$HY;
+  if (!hy) return;
+  const pending = [];
+  for (const moduleUrl in mapping) {
+    if (hy.modules[moduleUrl]) continue;
+    const entryUrl = mapping[moduleUrl];
+    if (!hy.loading[moduleUrl]) {
+      hy.loading[moduleUrl] = import(entryUrl).then(mod => {
+        hy.modules[moduleUrl] = mod;
+      });
+    }
+    pending.push(hy.loading[moduleUrl]);
+  }
+  return pending.length ? Promise.all(pending).then(() => {}) : undefined;
+}
 function hydrate$1(code, element, options = {}) {
-  if (globalThis._$HY.done) return render$1(code, element, [...element.childNodes], options);
+  if (globalThis._$HY.done) return render$1(code, element, [...getChildRoot(element).childNodes], options);
   options.renderId ||= "";
@@ -333,2 +346,3 @@ if (!globalThis._$HY.modules) globalThis._$HY.modules = {};
   sharedConfig.gather = root => gatherHydratable(element, root);
+  sharedConfig.loadModuleAssets = loadModuleAssets;
   sharedConfig.cleanupFragment = id => {
@@ -362,5 +376,23 @@ const tpl = document.getElementById("pl-" + id);
   }
+  const rootMapping = globalThis._$HY.r && globalThis._$HY.r["_assets"];
+  if (rootMapping && typeof rootMapping === "object") {
+    const p = loadModuleAssets(rootMapping);
+    if (p) {
+      gatherHydratable(element, options.renderId);
+      let disposer;
+      p.then(() => {
+        try {
+          disposer = render$1(code, element, [...getChildRoot(element).childNodes], options);
+        } finally {
+          sharedConfig.hydrating = false;
+        }
+      }, () => {
+        sharedConfig.hydrating = false;
+      });
+      return () => disposer && disposer();
+    }
+  }
   try {
     gatherHydratable(element, options.renderId);
-    return render$1(code, element, [...element.childNodes], options);
+    return render$1(code, element, [...getChildRoot(element).childNodes], options);
   } finally {
@@ -414,3 +446,3 @@ sharedConfig.hydrating = false;
 function getFirstChild(node, expectedTag) {
-  const child = node.firstChild;
+  const child = getChildRoot(node).firstChild;
   if (isHydrating() && expectedTag && child?.localName !== expectedTag) {
@@ -425,3 +457,3 @@ const isMissing = !child || child.nodeType !== 1;
   if (isHydrating() && expectedTag && sibling?.localName !== expectedTag) {
-    const parent = node.parentElement;
+    const parent = node.parentNode;
     const isMissing = !sibling || sibling.nodeType !== 1;
@@ -433,4 +465,5 @@ console.warn("Hydration structure mismatch: expected <" + expectedTag + "> after", node, "in", parent, "\n  " + describeSiblings(parent, sibling, expectedTag, isMissing));
 function describeSiblings(parent, mismatchChild, expectedTag, isMissing) {
+  if (!parent) return `<${expectedTag} \u2190 parent unavailable>`;
   const children = [];
-  let child = parent.firstChild;
+  let child = getChildRoot(parent).firstChild;
   while (child) {
@@ -440,3 +473,3 @@ if (child.nodeType === 1) children.push(child);
   }
-  const pTag = parent.localName;
+  const pTag = parent.localName || "#fragment";
   if (isMissing) {
@@ -486,2 +519,5 @@ const tags = children.map(c => `<${c.localName}>`).join("");
 }
+function getChildRoot(node) {
+  return node && node.localName === "template" ? node.content : node;
+}
 function toggleClassKey(node, key, value) {
@@ -508,3 +544,3 @@ const classNames = key.trim().split(/\s+/);
   if (prop === "class") return className(node, value, prev), value;
-  if (value === prev && !DOMWithState[nodeName]?.[prop]) return prev;
+  if (value === prev && DOMWithState[nodeName]?.[prop] !== 1) return prev;
   if (prop === "ref") {
@@ -592,2 +628,3 @@ if (!skipRef && value) ref(() => value, node);
   if (value === current) return;
+  const childRoot = getChildRoot(parent);
   const t = typeof value,
@@ -598,4 +635,4 @@ multi = marker !== undefined;
     if (tc === "string" || tc === "number") {
-      parent.firstChild.data = value;
-    } else parent.textContent = value;
+      childRoot.firstChild.data = value;
+    } else childRoot.textContent = value;
   } else if (value === undefined) {
@@ -606,5 +643,5 @@ cleanChildren(parent, current, marker);
       cleanChildren(parent, current, multi ? marker : null, value);
-    } else if (current === undefined || !parent.firstChild) {
-      parent.appendChild(value);
-    } else parent.replaceChild(value, parent.firstChild);
+    } else if (current === undefined || !childRoot.firstChild) {
+      childRoot.appendChild(value);
+    } else childRoot.replaceChild(value, childRoot.firstChild);
   } else if (Array.isArray(value)) {
@@ -617,3 +654,3 @@ const currentArray = current && Array.isArray(current);
         appendNodes(parent, value, marker);
-      } else reconcileArrays(parent, current, value);
+      } else reconcileArrays(childRoot, current, value);
     } else {
@@ -643,5 +680,7 @@ current && cleanChildren(parent);
 function appendNodes(parent, array, marker = null) {
+  parent = getChildRoot(parent);
   for (let i = 0, len = array.length; i < len; i++) parent.insertBefore(array[i], marker);
 }
 function cleanChildren(parent, current, marker, replacement) {
+  parent = getChildRoot(parent);
   if (marker === undefined) return parent.textContent = "";
@@ -703,5 +742,4 @@ if (current.length) {
 const isDev = true;
-const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
-function createElement(tagName, isSVG = false, is = undefined) {
-  return isSVG ? document.createElementNS(SVG_NAMESPACE, tagName) : document.createElement(tagName, {
+function createElement(tagName, is = undefined) {
+  return SVGElements.has(tagName) ? document.createElementNS(Namespaces.svg, tagName) : MathMLElements.has(tagName) ? document.createElementNS(Namespaces.mathml, tagName) : document.createElement(tagName, {
     is
@@ -762,5 +800,4 @@ });
       case "string":
-        const isSvg = SVGElements.has(component);
-        const el = sharedConfig.hydrating ? getNextElement() : createElement(component, isSvg, untrack(() => props.is));
-        spread(el, props, isSvg);
+        const el = sharedConfig.hydrating ? getNextElement() : createElement(component, untrack(() => props.is));
+        spread(el, props);
         return el;
@@ -767,0 +804,0 @@ }

dist/server.cjs

@@ -8,35 +8,2 @@ 'use strict';
 
-const DOMWithState = {
-  INPUT: {
-    value: 1,
-    defaultValue: 1,
-    checked: 1,
-    defaultChecked: 1
-  },
-  SELECT: {
-    value: 1
-  },
-  OPTION: {
-    value: 1,
-    selected: 1,
-    defaultSelected: 1
-  },
-  TEXTAREA: {
-    value: 1,
-    defaultValue: 1
-  },
-  VIDEO: {
-    muted: 1,
-    defaultMuted: 1
-  },
-  AUDIO: {
-    muted: 1,
-    defaultMuted: 1
-  }
-};
-for (const tagName in DOMWithState) {
-  for (const propName in DOMWithState[tagName]) {
-    DOMWithState[tagName]["prop:" + propName] = 1;
-  }
-}
 const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
@@ -60,6 +27,6 @@ const DelegatedEvents = /*#__PURE__*/new Set(["beforeinput", "click", "dblclick", "contextmenu", "focusin", "focusout", "input", "keydown", "keyup", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "pointerdown", "pointermove", "pointerout", "pointerover", "pointerup", "touchend", "touchmove", "touchstart"]);
 
-const effect = (fn, effectFn, initial) => solidJs.createRenderEffect(fn, effectFn, initial, {
+const effect = (fn, effectFn) => solidJs.createRenderEffect(fn, effectFn, {
   transparent: true
 });
-const memo = (fn, transparent) => transparent ? fn.$r ? fn : signals.createMemo(() => fn(), undefined, {
+const memo = (fn, transparent) => transparent ? fn.$r ? fn : signals.createMemo(() => fn(), {
   transparent: true
@@ -149,7 +116,7 @@ }) : solidJs.createMemo(() => fn());
     registerModule(moduleUrl, entryUrl) {
-      if (!currentBoundaryId) return;
-      let map = boundaryModules.get(currentBoundaryId);
+      const id = currentBoundaryId || "";
+      let map = boundaryModules.get(id);
       if (!map) {
         map = {};
-        boundaryModules.set(currentBoundaryId, map);
+        boundaryModules.set(id, map);
       }
@@ -237,2 +204,3 @@ map[moduleUrl] = entryUrl;
   });
+  serializeFragmentAssets("", tracking.boundaryModules, solidJs.sharedConfig.context);
   solidJs.sharedConfig.context.noHydrate = true;
@@ -256,6 +224,8 @@ serializer.close();
   const blockingPromises = new Set();
+  let headerEmitted = false;
   const pushTask = task => {
     if (noScripts) return;
-    if (!tasks && !firstFlushed) {
-      tasks = getLocalHeaderScript(renderId);
+    if (!headerEmitted) {
+      headerEmitted = true;
+      tasks += getLocalHeaderScript(renderId);
     }
@@ -495,2 +465,3 @@ tasks += task + ";";
     if (rootHoles) {
+      const pending = [];
       for (const {
@@ -502,4 +473,22 @@ id,
         const res = resolveSSRNode(fn);
-        html = html.replace(marker, !res.h.length ? res.t[0] : "");
+        if (!res.h.length) {
+          html = html.replace(marker, res.t[0]);
+        } else {
+          let out = res.t[0];
+          for (let j = 0; j < res.h.length; j++) {
+            const newId = nextHoleId++;
+            pending.push({
+              id: newId,
+              fn: res.h[j]
+            });
+            out += `<!--rh${newId}-->` + res.t[j + 1];
+          }
+          html = html.replace(marker, out);
+          for (const p of res.p) blockingPromises.add(p);
+        }
       }
+      if (pending.length) {
+        rootHoles = pending;
+        return;
+      }
       rootHoles = null;
@@ -514,2 +503,3 @@ }
     html = injectPreloadLinks(tracking.emittedAssets, html);
+    serializeFragmentAssets("", tracking.boundaryModules, context);
     if (tasks.length) html = injectScripts(html, tasks, nonce);
@@ -541,44 +531,52 @@ buffer.write(html);
     pipe(w) {
-      allSettled(blockingPromises).then(() => {
-        setTimeout(() => {
-          doShell();
-          buffer = writable = w;
-          buffer.write(tmp);
-          firstFlushed = true;
-          if (completed) {
-            dispose();
-            writable.end();
-          } else flushEnd();
+      function flush() {
+        allSettled(blockingPromises).then(() => {
+          setTimeout(() => {
+            doShell();
+            if (!shellCompleted) return flush();
+            buffer = writable = w;
+            buffer.write(tmp);
+            firstFlushed = true;
+            if (completed) {
+              dispose();
+              writable.end();
+            } else flushEnd();
+          });
         });
-      });
+      }
+      flush();
     },
     pipeTo(w) {
-      return allSettled(blockingPromises).then(() => {
-        let resolve;
-        const p = new Promise(r => resolve = r);
-        setTimeout(() => {
-          doShell();
-          const encoder = new TextEncoder();
-          const writer = w.getWriter();
-          writable = {
-            end() {
-              writer.releaseLock();
-              w.close().catch(() => {});
-              resolve();
-            }
-          };
-          buffer = {
-            write(payload) {
-              writer.write(encoder.encode(payload)).catch(() => {});
-            }
-          };
-          buffer.write(tmp);
-          firstFlushed = true;
-          if (completed) {
-            dispose();
-            writable.end();
-          } else flushEnd();
+      let resolve;
+      const p = new Promise(r => resolve = r);
+      function flush() {
+        allSettled(blockingPromises).then(() => {
+          setTimeout(() => {
+            doShell();
+            if (!shellCompleted) return flush();
+            const encoder = new TextEncoder();
+            const writer = w.getWriter();
+            writable = {
+              end() {
+                writer.releaseLock();
+                w.close().catch(() => {});
+                resolve();
+              }
+            };
+            buffer = {
+              write(payload) {
+                writer.write(encoder.encode(payload)).catch(() => {});
+              }
+            };
+            buffer.write(tmp);
+            firstFlushed = true;
+            if (completed) {
+              dispose();
+              writable.end();
+            } else flushEnd();
+          });
         });
-        return p;
-      });
+      }
+      flush();
+      return p;
     }
@@ -585,0 +583,0 @@ };

dist/server.js

@@ -7,35 +7,2 @@ import { createRenderEffect, createMemo as createMemo$1, sharedConfig, createRoot, ssrHandleError, omit, getOwner, getNextChildId, createOwner, runWithOwner } from 'solid-js';
 
-const DOMWithState = {
-  INPUT: {
-    value: 1,
-    defaultValue: 1,
-    checked: 1,
-    defaultChecked: 1
-  },
-  SELECT: {
-    value: 1
-  },
-  OPTION: {
-    value: 1,
-    selected: 1,
-    defaultSelected: 1
-  },
-  TEXTAREA: {
-    value: 1,
-    defaultValue: 1
-  },
-  VIDEO: {
-    muted: 1,
-    defaultMuted: 1
-  },
-  AUDIO: {
-    muted: 1,
-    defaultMuted: 1
-  }
-};
-for (const tagName in DOMWithState) {
-  for (const propName in DOMWithState[tagName]) {
-    DOMWithState[tagName]["prop:" + propName] = 1;
-  }
-}
 const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
@@ -59,6 +26,6 @@ const DelegatedEvents = /*#__PURE__*/new Set(["beforeinput", "click", "dblclick", "contextmenu", "focusin", "focusout", "input", "keydown", "keyup", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "pointerdown", "pointermove", "pointerout", "pointerover", "pointerup", "touchend", "touchmove", "touchstart"]);
 
-const effect = (fn, effectFn, initial) => createRenderEffect(fn, effectFn, initial, {
+const effect = (fn, effectFn) => createRenderEffect(fn, effectFn, {
   transparent: true
 });
-const memo = (fn, transparent) => transparent ? fn.$r ? fn : createMemo(() => fn(), undefined, {
+const memo = (fn, transparent) => transparent ? fn.$r ? fn : createMemo(() => fn(), {
   transparent: true
@@ -148,7 +115,7 @@ }) : createMemo$1(() => fn());
     registerModule(moduleUrl, entryUrl) {
-      if (!currentBoundaryId) return;
-      let map = boundaryModules.get(currentBoundaryId);
+      const id = currentBoundaryId || "";
+      let map = boundaryModules.get(id);
       if (!map) {
         map = {};
-        boundaryModules.set(currentBoundaryId, map);
+        boundaryModules.set(id, map);
       }
@@ -236,2 +203,3 @@ map[moduleUrl] = entryUrl;
   });
+  serializeFragmentAssets("", tracking.boundaryModules, sharedConfig.context);
   sharedConfig.context.noHydrate = true;
@@ -255,6 +223,8 @@ serializer.close();
   const blockingPromises = new Set();
+  let headerEmitted = false;
   const pushTask = task => {
     if (noScripts) return;
-    if (!tasks && !firstFlushed) {
-      tasks = getLocalHeaderScript(renderId);
+    if (!headerEmitted) {
+      headerEmitted = true;
+      tasks += getLocalHeaderScript(renderId);
     }
@@ -494,2 +464,3 @@ tasks += task + ";";
     if (rootHoles) {
+      const pending = [];
       for (const {
@@ -501,4 +472,22 @@ id,
         const res = resolveSSRNode(fn);
-        html = html.replace(marker, !res.h.length ? res.t[0] : "");
+        if (!res.h.length) {
+          html = html.replace(marker, res.t[0]);
+        } else {
+          let out = res.t[0];
+          for (let j = 0; j < res.h.length; j++) {
+            const newId = nextHoleId++;
+            pending.push({
+              id: newId,
+              fn: res.h[j]
+            });
+            out += `<!--rh${newId}-->` + res.t[j + 1];
+          }
+          html = html.replace(marker, out);
+          for (const p of res.p) blockingPromises.add(p);
+        }
       }
+      if (pending.length) {
+        rootHoles = pending;
+        return;
+      }
       rootHoles = null;
@@ -513,2 +502,3 @@ }
     html = injectPreloadLinks(tracking.emittedAssets, html);
+    serializeFragmentAssets("", tracking.boundaryModules, context);
     if (tasks.length) html = injectScripts(html, tasks, nonce);
@@ -540,44 +530,52 @@ buffer.write(html);
     pipe(w) {
-      allSettled(blockingPromises).then(() => {
-        setTimeout(() => {
-          doShell();
-          buffer = writable = w;
-          buffer.write(tmp);
-          firstFlushed = true;
-          if (completed) {
-            dispose();
-            writable.end();
-          } else flushEnd();
+      function flush() {
+        allSettled(blockingPromises).then(() => {
+          setTimeout(() => {
+            doShell();
+            if (!shellCompleted) return flush();
+            buffer = writable = w;
+            buffer.write(tmp);
+            firstFlushed = true;
+            if (completed) {
+              dispose();
+              writable.end();
+            } else flushEnd();
+          });
         });
-      });
+      }
+      flush();
     },
     pipeTo(w) {
-      return allSettled(blockingPromises).then(() => {
-        let resolve;
-        const p = new Promise(r => resolve = r);
-        setTimeout(() => {
-          doShell();
-          const encoder = new TextEncoder();
-          const writer = w.getWriter();
-          writable = {
-            end() {
-              writer.releaseLock();
-              w.close().catch(() => {});
-              resolve();
-            }
-          };
-          buffer = {
-            write(payload) {
-              writer.write(encoder.encode(payload)).catch(() => {});
-            }
-          };
-          buffer.write(tmp);
-          firstFlushed = true;
-          if (completed) {
-            dispose();
-            writable.end();
-          } else flushEnd();
+      let resolve;
+      const p = new Promise(r => resolve = r);
+      function flush() {
+        allSettled(blockingPromises).then(() => {
+          setTimeout(() => {
+            doShell();
+            if (!shellCompleted) return flush();
+            const encoder = new TextEncoder();
+            const writer = w.getWriter();
+            writable = {
+              end() {
+                writer.releaseLock();
+                w.close().catch(() => {});
+                resolve();
+              }
+            };
+            buffer = {
+              write(payload) {
+                writer.write(encoder.encode(payload)).catch(() => {});
+              }
+            };
+            buffer.write(tmp);
+            firstFlushed = true;
+            if (completed) {
+              dispose();
+              writable.end();
+            } else flushEnd();
+          });
         });
-        return p;
-      });
+      }
+      flush();
+      return p;
     }
@@ -584,0 +582,0 @@ };

dist/web.cjs

@@ -9,5 +9,5 @@ 'use strict';
     value: 1,
-    defaultValue: 1,
+    defaultValue: 2,
     checked: 1,
-    defaultChecked: 1
+    defaultChecked: 2
   },
@@ -20,22 +20,17 @@ SELECT: {
     selected: 1,
-    defaultSelected: 1
+    defaultSelected: 2
   },
   TEXTAREA: {
     value: 1,
-    defaultValue: 1
+    defaultValue: 2
   },
   VIDEO: {
     muted: 1,
-    defaultMuted: 1
+    defaultMuted: 2
   },
   AUDIO: {
     muted: 1,
-    defaultMuted: 1
+    defaultMuted: 2
   }
 };
-for (const tagName in DOMWithState) {
-  for (const propName in DOMWithState[tagName]) {
-    DOMWithState[tagName]["prop:" + propName] = 1;
-  }
-}
 const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
@@ -59,6 +54,6 @@ const DelegatedEvents = /*#__PURE__*/new Set(["beforeinput", "click", "dblclick", "contextmenu", "focusin", "focusout", "input", "keydown", "keyup", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "pointerdown", "pointermove", "pointerout", "pointerover", "pointerup", "touchend", "touchmove", "touchstart"]);
 
-const effect = (fn, effectFn, initial) => solidJs.createRenderEffect(fn, effectFn, initial, {
+const effect = (fn, effectFn) => solidJs.createRenderEffect(fn, effectFn, {
   transparent: true
 });
-const memo = (fn, transparent) => transparent ? fn.$r ? fn : signals.createMemo(() => fn(), undefined, {
+const memo = (fn, transparent) => transparent ? fn.$r ? fn : signals.createMemo(() => fn(), {
   transparent: true
@@ -126,6 +121,7 @@ }) : solidJs.createMemo(() => fn());
 function render$1(code, element, init, options = {}) {
+  const renderRoot = getChildRoot(element);
   let disposer;
   solidJs.createRoot(dispose => {
     disposer = dispose;
-    element === document ? solidJs.flatten(code) : insert(element, code(), element.firstChild ? null : undefined, init);
+    element === document ? solidJs.flatten(code) : insert(element, code(), renderRoot.firstChild ? null : undefined, init);
   }, {
@@ -136,3 +132,3 @@ id: options.renderId
     disposer();
-    element.textContent = "";
+    renderRoot.textContent = "";
   };
@@ -275,6 +271,7 @@ }
 function insert(parent, accessor, marker, initial) {
+  const childRoot = getChildRoot(parent);
   const multi = marker !== undefined;
   if (multi && !initial) initial = [];
   if (isHydrating(parent)) {
-    if (!multi && initial === undefined && parent) initial = [...parent.childNodes];
+    if (!multi && initial === undefined && parent) initial = [...childRoot.childNodes];
     if (Array.isArray(initial)) {
@@ -295,6 +292,6 @@ let j = 0;
     const placeholder = document.createTextNode("");
-    parent.insertBefore(placeholder, marker);
+    childRoot.insertBefore(placeholder, marker);
     initial = [placeholder];
   }
-  effect(prev => normalize(accessor, prev, multi), (value, current) => insertExpression(parent, value, current, marker), initial);
+  effect((prev = initial) => normalize(accessor, prev, multi), (value, current = initial) => insertExpression(parent, value, current, marker));
 }
@@ -318,4 +315,20 @@ function assign(node, props, skipChildren, prevProps = {}, skipRef = false) {
 }
+function loadModuleAssets(mapping) {
+  const hy = globalThis._$HY;
+  if (!hy) return;
+  const pending = [];
+  for (const moduleUrl in mapping) {
+    if (hy.modules[moduleUrl]) continue;
+    const entryUrl = mapping[moduleUrl];
+    if (!hy.loading[moduleUrl]) {
+      hy.loading[moduleUrl] = import(entryUrl).then(mod => {
+        hy.modules[moduleUrl] = mod;
+      });
+    }
+    pending.push(hy.loading[moduleUrl]);
+  }
+  return pending.length ? Promise.all(pending).then(() => {}) : undefined;
+}
 function hydrate$1(code, element, options = {}) {
-  if (globalThis._$HY.done) return render$1(code, element, [...element.childNodes], options);
+  if (globalThis._$HY.done) return render$1(code, element, [...getChildRoot(element).childNodes], options);
   options.renderId ||= "";
@@ -329,2 +342,3 @@ if (!globalThis._$HY.modules) globalThis._$HY.modules = {};
   solidJs.sharedConfig.gather = root => gatherHydratable(element, root);
+  solidJs.sharedConfig.loadModuleAssets = loadModuleAssets;
   solidJs.sharedConfig.cleanupFragment = id => {
@@ -348,5 +362,23 @@ const tpl = document.getElementById("pl-" + id);
   solidJs.sharedConfig.hydrating = true;
+  const rootMapping = globalThis._$HY.r && globalThis._$HY.r["_assets"];
+  if (rootMapping && typeof rootMapping === "object") {
+    const p = loadModuleAssets(rootMapping);
+    if (p) {
+      gatherHydratable(element, options.renderId);
+      let disposer;
+      p.then(() => {
+        try {
+          disposer = render$1(code, element, [...getChildRoot(element).childNodes], options);
+        } finally {
+          solidJs.sharedConfig.hydrating = false;
+        }
+      }, () => {
+        solidJs.sharedConfig.hydrating = false;
+      });
+      return () => disposer && disposer();
+    }
+  }
   try {
     gatherHydratable(element, options.renderId);
-    return render$1(code, element, [...element.childNodes], options);
+    return render$1(code, element, [...getChildRoot(element).childNodes], options);
   } finally {
@@ -394,3 +426,3 @@ solidJs.sharedConfig.hydrating = false;
 function getFirstChild(node, expectedTag) {
-  const child = node.firstChild;
+  const child = getChildRoot(node).firstChild;
   return child;
@@ -428,2 +460,5 @@ }
 }
+function getChildRoot(node) {
+  return node && node.localName === "template" ? node.content : node;
+}
 function toggleClassKey(node, key, value) {
@@ -450,3 +485,3 @@ const classNames = key.trim().split(/\s+/);
   if (prop === "class") return className(node, value, prev), value;
-  if (value === prev && !DOMWithState[nodeName]?.[prop]) return prev;
+  if (value === prev && DOMWithState[nodeName]?.[prop] !== 1) return prev;
   if (prop === "ref") {
@@ -534,2 +569,3 @@ if (!skipRef && value) ref(() => value, node);
   if (value === current) return;
+  const childRoot = getChildRoot(parent);
   const t = typeof value,
@@ -540,4 +576,4 @@ multi = marker !== undefined;
     if (tc === "string" || tc === "number") {
-      parent.firstChild.data = value;
-    } else parent.textContent = value;
+      childRoot.firstChild.data = value;
+    } else childRoot.textContent = value;
   } else if (value === undefined) {
@@ -548,5 +584,5 @@ cleanChildren(parent, current, marker);
       cleanChildren(parent, current, multi ? marker : null, value);
-    } else if (current === undefined || !parent.firstChild) {
-      parent.appendChild(value);
-    } else parent.replaceChild(value, parent.firstChild);
+    } else if (current === undefined || !childRoot.firstChild) {
+      childRoot.appendChild(value);
+    } else childRoot.replaceChild(value, childRoot.firstChild);
   } else if (Array.isArray(value)) {
@@ -559,3 +595,3 @@ const currentArray = current && Array.isArray(current);
         appendNodes(parent, value, marker);
-      } else reconcileArrays(parent, current, value);
+      } else reconcileArrays(childRoot, current, value);
     } else {
@@ -585,5 +621,7 @@ current && cleanChildren(parent);
 function appendNodes(parent, array, marker = null) {
+  parent = getChildRoot(parent);
   for (let i = 0, len = array.length; i < len; i++) parent.insertBefore(array[i], marker);
 }
 function cleanChildren(parent, current, marker, replacement) {
+  parent = getChildRoot(parent);
   if (marker === undefined) return parent.textContent = "";
@@ -643,5 +681,4 @@ if (current.length) {
 const isDev = false;
-const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
-function createElement(tagName, isSVG = false, is = undefined) {
-  return isSVG ? document.createElementNS(SVG_NAMESPACE, tagName) : document.createElement(tagName, {
+function createElement(tagName, is = undefined) {
+  return SVGElements.has(tagName) ? document.createElementNS(Namespaces.svg, tagName) : MathMLElements.has(tagName) ? document.createElementNS(Namespaces.mathml, tagName) : document.createElement(tagName, {
     is
@@ -699,5 +736,4 @@ });
       case "string":
-        const isSvg = SVGElements.has(component);
-        const el = solidJs.sharedConfig.hydrating ? getNextElement() : createElement(component, isSvg, solidJs.untrack(() => props.is));
-        spread(el, props, isSvg);
+        const el = solidJs.sharedConfig.hydrating ? getNextElement() : createElement(component, solidJs.untrack(() => props.is));
+        spread(el, props);
         return el;
@@ -736,2 +772,6 @@ }
 });
+Object.defineProperty(exports, "Repeat", {
+  enumerable: true,
+  get: function () { return solidJs.Repeat; }
+});
 Object.defineProperty(exports, "Reveal", {
@@ -738,0 +778,0 @@ enumerable: true,

dist/web.js

 import { createRenderEffect, createMemo as createMemo$1, sharedConfig, untrack, runWithOwner, flatten, createRoot, omit, enableHydration } from 'solid-js';
-export { Errored, For, Hydration, Loading, Match, NoHydration, Reveal, Show, Switch, createComponent, getOwner, merge as mergeProps, untrack } from 'solid-js';
+export { Errored, For, Hydration, Loading, Match, NoHydration, Repeat, Reveal, Show, Switch, createComponent, getOwner, merge as mergeProps, untrack } from 'solid-js';
 import { createMemo } from '@solidjs/signals';
@@ -8,5 +8,5 @@
     value: 1,
-    defaultValue: 1,
+    defaultValue: 2,
     checked: 1,
-    defaultChecked: 1
+    defaultChecked: 2
   },
@@ -19,22 +19,17 @@ SELECT: {
     selected: 1,
-    defaultSelected: 1
+    defaultSelected: 2
   },
   TEXTAREA: {
     value: 1,
-    defaultValue: 1
+    defaultValue: 2
   },
   VIDEO: {
     muted: 1,
-    defaultMuted: 1
+    defaultMuted: 2
   },
   AUDIO: {
     muted: 1,
-    defaultMuted: 1
+    defaultMuted: 2
   }
 };
-for (const tagName in DOMWithState) {
-  for (const propName in DOMWithState[tagName]) {
-    DOMWithState[tagName]["prop:" + propName] = 1;
-  }
-}
 const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
@@ -58,6 +53,6 @@ const DelegatedEvents = /*#__PURE__*/new Set(["beforeinput", "click", "dblclick", "contextmenu", "focusin", "focusout", "input", "keydown", "keyup", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "pointerdown", "pointermove", "pointerout", "pointerover", "pointerup", "touchend", "touchmove", "touchstart"]);
 
-const effect = (fn, effectFn, initial) => createRenderEffect(fn, effectFn, initial, {
+const effect = (fn, effectFn) => createRenderEffect(fn, effectFn, {
   transparent: true
 });
-const memo = (fn, transparent) => transparent ? fn.$r ? fn : createMemo(() => fn(), undefined, {
+const memo = (fn, transparent) => transparent ? fn.$r ? fn : createMemo(() => fn(), {
   transparent: true
@@ -125,6 +120,7 @@ }) : createMemo$1(() => fn());
 function render$1(code, element, init, options = {}) {
+  const renderRoot = getChildRoot(element);
   let disposer;
   createRoot(dispose => {
     disposer = dispose;
-    element === document ? flatten(code) : insert(element, code(), element.firstChild ? null : undefined, init);
+    element === document ? flatten(code) : insert(element, code(), renderRoot.firstChild ? null : undefined, init);
   }, {
@@ -135,3 +131,3 @@ id: options.renderId
     disposer();
-    element.textContent = "";
+    renderRoot.textContent = "";
   };
@@ -274,6 +270,7 @@ }
 function insert(parent, accessor, marker, initial) {
+  const childRoot = getChildRoot(parent);
   const multi = marker !== undefined;
   if (multi && !initial) initial = [];
   if (isHydrating(parent)) {
-    if (!multi && initial === undefined && parent) initial = [...parent.childNodes];
+    if (!multi && initial === undefined && parent) initial = [...childRoot.childNodes];
     if (Array.isArray(initial)) {
@@ -294,6 +291,6 @@ let j = 0;
     const placeholder = document.createTextNode("");
-    parent.insertBefore(placeholder, marker);
+    childRoot.insertBefore(placeholder, marker);
     initial = [placeholder];
   }
-  effect(prev => normalize(accessor, prev, multi), (value, current) => insertExpression(parent, value, current, marker), initial);
+  effect((prev = initial) => normalize(accessor, prev, multi), (value, current = initial) => insertExpression(parent, value, current, marker));
 }
@@ -317,4 +314,20 @@ function assign(node, props, skipChildren, prevProps = {}, skipRef = false) {
 }
+function loadModuleAssets(mapping) {
+  const hy = globalThis._$HY;
+  if (!hy) return;
+  const pending = [];
+  for (const moduleUrl in mapping) {
+    if (hy.modules[moduleUrl]) continue;
+    const entryUrl = mapping[moduleUrl];
+    if (!hy.loading[moduleUrl]) {
+      hy.loading[moduleUrl] = import(entryUrl).then(mod => {
+        hy.modules[moduleUrl] = mod;
+      });
+    }
+    pending.push(hy.loading[moduleUrl]);
+  }
+  return pending.length ? Promise.all(pending).then(() => {}) : undefined;
+}
 function hydrate$1(code, element, options = {}) {
-  if (globalThis._$HY.done) return render$1(code, element, [...element.childNodes], options);
+  if (globalThis._$HY.done) return render$1(code, element, [...getChildRoot(element).childNodes], options);
   options.renderId ||= "";
@@ -328,2 +341,3 @@ if (!globalThis._$HY.modules) globalThis._$HY.modules = {};
   sharedConfig.gather = root => gatherHydratable(element, root);
+  sharedConfig.loadModuleAssets = loadModuleAssets;
   sharedConfig.cleanupFragment = id => {
@@ -347,5 +361,23 @@ const tpl = document.getElementById("pl-" + id);
   sharedConfig.hydrating = true;
+  const rootMapping = globalThis._$HY.r && globalThis._$HY.r["_assets"];
+  if (rootMapping && typeof rootMapping === "object") {
+    const p = loadModuleAssets(rootMapping);
+    if (p) {
+      gatherHydratable(element, options.renderId);
+      let disposer;
+      p.then(() => {
+        try {
+          disposer = render$1(code, element, [...getChildRoot(element).childNodes], options);
+        } finally {
+          sharedConfig.hydrating = false;
+        }
+      }, () => {
+        sharedConfig.hydrating = false;
+      });
+      return () => disposer && disposer();
+    }
+  }
   try {
     gatherHydratable(element, options.renderId);
-    return render$1(code, element, [...element.childNodes], options);
+    return render$1(code, element, [...getChildRoot(element).childNodes], options);
   } finally {
@@ -393,3 +425,3 @@ sharedConfig.hydrating = false;
 function getFirstChild(node, expectedTag) {
-  const child = node.firstChild;
+  const child = getChildRoot(node).firstChild;
   return child;
@@ -427,2 +459,5 @@ }
 }
+function getChildRoot(node) {
+  return node && node.localName === "template" ? node.content : node;
+}
 function toggleClassKey(node, key, value) {
@@ -449,3 +484,3 @@ const classNames = key.trim().split(/\s+/);
   if (prop === "class") return className(node, value, prev), value;
-  if (value === prev && !DOMWithState[nodeName]?.[prop]) return prev;
+  if (value === prev && DOMWithState[nodeName]?.[prop] !== 1) return prev;
   if (prop === "ref") {
@@ -533,2 +568,3 @@ if (!skipRef && value) ref(() => value, node);
   if (value === current) return;
+  const childRoot = getChildRoot(parent);
   const t = typeof value,
@@ -539,4 +575,4 @@ multi = marker !== undefined;
     if (tc === "string" || tc === "number") {
-      parent.firstChild.data = value;
-    } else parent.textContent = value;
+      childRoot.firstChild.data = value;
+    } else childRoot.textContent = value;
   } else if (value === undefined) {
@@ -547,5 +583,5 @@ cleanChildren(parent, current, marker);
       cleanChildren(parent, current, multi ? marker : null, value);
-    } else if (current === undefined || !parent.firstChild) {
-      parent.appendChild(value);
-    } else parent.replaceChild(value, parent.firstChild);
+    } else if (current === undefined || !childRoot.firstChild) {
+      childRoot.appendChild(value);
+    } else childRoot.replaceChild(value, childRoot.firstChild);
   } else if (Array.isArray(value)) {
@@ -558,3 +594,3 @@ const currentArray = current && Array.isArray(current);
         appendNodes(parent, value, marker);
-      } else reconcileArrays(parent, current, value);
+      } else reconcileArrays(childRoot, current, value);
     } else {
@@ -584,5 +620,7 @@ current && cleanChildren(parent);
 function appendNodes(parent, array, marker = null) {
+  parent = getChildRoot(parent);
   for (let i = 0, len = array.length; i < len; i++) parent.insertBefore(array[i], marker);
 }
 function cleanChildren(parent, current, marker, replacement) {
+  parent = getChildRoot(parent);
   if (marker === undefined) return parent.textContent = "";
@@ -642,5 +680,4 @@ if (current.length) {
 const isDev = false;
-const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
-function createElement(tagName, isSVG = false, is = undefined) {
-  return isSVG ? document.createElementNS(SVG_NAMESPACE, tagName) : document.createElement(tagName, {
+function createElement(tagName, is = undefined) {
+  return SVGElements.has(tagName) ? document.createElementNS(Namespaces.svg, tagName) : MathMLElements.has(tagName) ? document.createElementNS(Namespaces.mathml, tagName) : document.createElement(tagName, {
     is
@@ -698,5 +735,4 @@ });
       case "string":
-        const isSvg = SVGElements.has(component);
-        const el = sharedConfig.hydrating ? getNextElement() : createElement(component, isSvg, untrack(() => props.is));
-        spread(el, props, isSvg);
+        const el = sharedConfig.hydrating ? getNextElement() : createElement(component, untrack(() => props.is));
+        spread(el, props);
         return el;
@@ -703,0 +739,0 @@ }

package.json

 {
   "name": "@solidjs/web",
   "description": "Solid's web runtime for the browser and the server",
-  "version": "2.0.0-beta.6",
+  "version": "2.0.0-beta.7",
   "author": "Ryan Carniato",
@@ -24,5 +24,7 @@ "license": "MIT",
     "types",
+    "types-cjs",
     "package.json",
     "storage/dist",
     "storage/types",
+    "storage/types-cjs",
     "storage/package.json"
@@ -33,41 +35,80 @@ ],
       "worker": {
-        "types": "./types/index.d.ts",
-        "import": "./dist/server.js",
-        "require": "./dist/server.cjs"
+        "import": {
+          "types": "./types/index.d.ts",
+          "default": "./dist/server.js"
+        },
+        "require": {
+          "types": "./types-cjs/index.d.cts",
+          "default": "./dist/server.cjs"
+        }
       },
       "browser": {
         "development": {
+          "import": {
+            "types": "./types/index.d.ts",
+            "default": "./dist/dev.js"
+          },
+          "require": {
+            "types": "./types-cjs/index.d.cts",
+            "default": "./dist/dev.cjs"
+          }
+        },
+        "import": {
           "types": "./types/index.d.ts",
-          "import": "./dist/dev.js",
-          "require": "./dist/dev.cjs"
+          "default": "./dist/web.js"
         },
-        "types": "./types/index.d.ts",
-        "import": "./dist/web.js",
-        "require": "./dist/web.cjs"
+        "require": {
+          "types": "./types-cjs/index.d.cts",
+          "default": "./dist/web.cjs"
+        }
       },
       "deno": {
-        "types": "./types/index.d.ts",
-        "import": "./dist/server.js",
-        "require": "./dist/server.cjs"
+        "import": {
+          "types": "./types/index.d.ts",
+          "default": "./dist/server.js"
+        },
+        "require": {
+          "types": "./types-cjs/index.d.cts",
+          "default": "./dist/server.cjs"
+        }
       },
       "node": {
-        "types": "./types/index.d.ts",
-        "import": "./dist/server.js",
-        "require": "./dist/server.cjs"
+        "import": {
+          "types": "./types/index.d.ts",
+          "default": "./dist/server.js"
+        },
+        "require": {
+          "types": "./types-cjs/index.d.cts",
+          "default": "./dist/server.cjs"
+        }
       },
       "development": {
+        "import": {
+          "types": "./types/index.d.ts",
+          "default": "./dist/dev.js"
+        },
+        "require": {
+          "types": "./types-cjs/index.d.cts",
+          "default": "./dist/dev.cjs"
+        }
+      },
+      "import": {
         "types": "./types/index.d.ts",
-        "import": "./dist/dev.js",
-        "require": "./dist/dev.cjs"
+        "default": "./dist/web.js"
       },
-      "types": "./types/index.d.ts",
-      "import": "./dist/web.js",
-      "require": "./dist/web.cjs"
+      "require": {
+        "types": "./types-cjs/index.d.cts",
+        "default": "./dist/web.cjs"
+      }
     },
     "./storage": {
-      "types": "./storage/types/index.d.ts",
-      "import": "./storage/dist/storage.js",
-      "require": "./storage/dist/storage.cjs"
+      "import": {
+        "types": "./storage/types/index.d.ts",
+        "default": "./storage/dist/storage.js"
+      },
+      "require": {
+        "types": "./storage/types-cjs/index.d.cts",
+        "default": "./storage/dist/storage.cjs"
+      }
     },
-    "./dist/*": "./dist/*",
     "./types/*": "./types/*"
@@ -80,8 +121,8 @@ },
   "peerDependencies": {
-    "@solidjs/signals": "^0.13.11",
-    "solid-js": "^2.0.0-beta.6"
+    "@solidjs/signals": "^2.0.0-beta.7",
+    "solid-js": "^2.0.0-beta.7"
   },
   "devDependencies": {
-    "@solidjs/signals": "^0.13.11",
-    "solid-js": "2.0.0-beta.6"
+    "@solidjs/signals": "2.0.0-beta.7",
+    "solid-js": "2.0.0-beta.7"
   },
@@ -93,7 +134,8 @@ "scripts": {
     "link": "symlink-dir . node_modules/@solidjs/web",
-    "types": "npm-run-all -nl types:*",
-    "types:clean": "rimraf types/",
+    "types": "npm-run-all -nl types:clean types:web types:copy-web types:web-storage types:cjs",
+    "types:clean": "rimraf types/ types-cjs/ storage/types-cjs/",
     "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",
+    "types:cjs": "node ../../scripts/sync-dual-types.mjs ./types ./types-cjs ./storage/types ./storage/types-cjs",
     "test": "vitest run && vitest run --config vite.config.server.mjs && vitest run --config vite.config.hydrate.mjs",
@@ -100,0 +142,0 @@ "test:server": "vitest run --config vite.config.server.mjs",

storage/package.json

@@ -10,7 +10,12 @@ {
     ".": {
-      "types": "./types/index.d.ts",
-      "import": "./dist/storage.js",
-      "require": "./dist/storage.cjs"
+      "import": {
+        "types": "./types/index.d.ts",
+        "default": "./dist/storage.js"
+      },
+      "require": {
+        "types": "./types-cjs/index.d.cts",
+        "default": "./dist/storage.cjs"
+      }
     }
   }
 }

storage/types/src/index.d.ts

@@ -5,3 +5,3 @@ import { hydrate as hydrateCore, render as renderCore } from "./client.js";
 export declare function render(...args: Parameters<typeof renderCore>): ReturnType<typeof renderCore>;
-export { For, Show, Switch, Match, Errored, Loading, Reveal, NoHydration, Hydration, merge as mergeProps } from "solid-js";
+export { For, Show, Switch, Match, Errored, Loading, Repeat, Reveal, NoHydration, Hydration, merge as mergeProps } from "solid-js";
 export * from "./server-mock.js";
@@ -8,0 +8,0 @@ export declare const isServer: boolean;

types/client.d.ts

 import { JSX } from "./jsx.js";
-export const DOMWithState: Record<string, Record<string, number>>;
+export const DOMWithState: Record<string, Record<string, 1 | 2>>;
 export const ChildProperties: Set<string>;
@@ -17,4 +17,10 @@ export const DelegatedEvents: Set<string>;
 ): () => void;
-export function template(html: string, flag?: number): () => Element;
-export function effect<T>(fn: (prev?: T) => T, effect: (value: T, prev?: T) => void, init?: T): void;
+/**
+ * @param flag
+ * - `undefined` — clone the template as-is (uses `cloneNode`).
+ * - `1` — use `document.importNode` instead of `cloneNode`.
+ * - `2` — the template html is wrapped; the outer tag is stripped at clone time.
+ */
+export function template(html: string, flag?: 1 | 2): () => Element;
+export function effect<T>(fn: (prev?: T) => T, effect: (value: T, prev?: T) => void): void;
 export function memo<T>(fn: () => T, equal: boolean): () => T;
@@ -21,0 +27,0 @@ export function untrack<T>(fn: () => T): T;

types/core.d.ts

 export { getOwner, runWithOwner, createComponent, createRoot as root, sharedConfig, untrack, merge as mergeProps, flatten, ssrHandleError, ssrRunInScope } from "solid-js";
-export declare const effect: (fn: any, effectFn: any, initial: any) => void;
+export declare const effect: (fn: any, effectFn: any) => void;
 export declare const memo: (fn: any, transparent: any) => any;

types/index.d.ts

@@ -5,3 +5,3 @@ import { hydrate as hydrateCore, render as renderCore } from "./client.js";
 export declare function render(...args: Parameters<typeof renderCore>): ReturnType<typeof renderCore>;
-export { For, Show, Switch, Match, Errored, Loading, Reveal, NoHydration, Hydration, merge as mergeProps } from "solid-js";
+export { For, Show, Switch, Match, Errored, Loading, Repeat, Reveal, NoHydration, Hydration, merge as mergeProps } from "solid-js";
 export * from "./server-mock.js";
@@ -8,0 +8,0 @@ export declare const isServer: boolean;

types/server.d.ts

@@ -72,3 +72,3 @@ import { JSX } from "./jsx.js";
 export function getHydrationKey(): string | undefined;
-export function effect<T>(fn: (prev?: T) => T, effect: (value: T, prev?: T) => void, init?: T): void;
+export function effect<T>(fn: (prev?: T) => T, effect: (value: T, prev?: T) => void): void;
 export function memo<T>(fn: () => T, equal: boolean): () => T;
@@ -133,5 +133,11 @@ export function createComponent<T>(Comp: (props: T) => JSX.Element, props: T): JSX.Element;
 export function render(code: () => JSX.Element, element: MountableElement): () => void;
+/**
+ * @deprecated not supported on the server side
+ * @param flag
+ * - `undefined` — clone the template as-is (uses `cloneNode`).
+ * - `1` — use `document.importNode` instead of `cloneNode`.
+ * - `2` — the template html is wrapped; the outer tag is stripped at clone time.
+ */
+export function template(html: string, flag?: 1 | 2): () => Element;
 /** @deprecated not supported on the server side */
-export function template(html: string, flag?: number): () => Element;
-/** @deprecated not supported on the server side */
 export function setProperty(node: Element, name: string, value: any): void;
@@ -138,0 +144,0 @@ /** @deprecated not supported on the server side */

No alert changes

Improved metrics

Total package byte prevSize

249170

12.74%

Number of package files

36

56.52%

Lines of code

5805

2.87%

No dependency changes