solid-js 1.2.5 → 1.3.0-beta.10

package/web/dist/web.js

@@ -1,4 +1,4 @@
-import { createMemo, createRoot, createRenderEffect, sharedConfig, createSignal, onCleanup, splitProps, untrack } from 'solid-js';
+import { createMemo, createRoot, createRenderEffect, sharedConfig, enableHydration, createSignal, onCleanup, splitProps, untrack } from 'solid-js';
 export { ErrorBoundary, For, Index, Match, Show, Suspense, SuspenseList, Switch, createComponent, createRenderEffect as effect, getOwner, mergeProps } from 'solid-js';
 
 const booleans = ["allowfullscreen", "async", "autofocus", "autoplay", "checked", "controls", "default", "disabled", "formnovalidate", "hidden", "indeterminate", "ismap", "loop", "multiple", "muted", "nomodule", "novalidate", "open", "playsinline", "readonly", "required", "reversed", "seamless", "selected"];
@@ -95,7 +95,7 @@ function render(code, element, init) {
   let disposer;
   createRoot(dispose => {
     disposer = dispose;
-    insert(element, code(), element.firstChild ? null : undefined, init);
+    element === document ? code() : insert(element, code(), element.firstChild ? null : undefined, init);
   });
   return () => {
     disposer();
@@ -214,28 +214,21 @@ function assign(node, props, isSVG, skipChildren, prevProps = {}) {
     prevProps[prop] = assignProp(node, prop, value, prevProps[prop], isSVG);
   }
 }
-function hydrate(code, element) {
-  sharedConfig.resources = globalThis._$HYDRATION.resources;
-  sharedConfig.completed = globalThis._$HYDRATION.completed;
-  sharedConfig.events = globalThis._$HYDRATION.events;
+function hydrate$1(code, element, options = {}) {
+  sharedConfig.completed = globalThis._$HY.completed;
+  sharedConfig.events = globalThis._$HY.events;
+  sharedConfig.load = globalThis._$HY.load;
+  sharedConfig.gather = root => gatherHydratable(element, root);
+  sharedConfig.registry = new Map();
   sharedConfig.context = {
-    id: "",
-    count: 0,
-    loadResource: globalThis._$HYDRATION.loadResource
+    id: options.renderId || "",
+    count: 0
   };
-  sharedConfig.registry = new Map();
-  gatherHydratable(element);
+  gatherHydratable(element, options.renderId);
   const dispose = render(code, element, [...element.childNodes]);
   sharedConfig.context = null;
   return dispose;
 }
-function gatherHydratable(element) {
-  const templates = element.querySelectorAll(`*[data-hk]`);
-  for (let i = 0; i < templates.length; i++) {
-    const node = templates[i];
-    sharedConfig.registry.set(node.getAttribute("data-hk"), node);
-  }
-}
 function getNextElement(template) {
   let node, key;
   if (!sharedConfig.context || !(node = sharedConfig.registry.get(key = getHydrationKey()))) {
@@ -329,7 +322,7 @@ function eventHandler(e) {
   Object.defineProperty(e, "currentTarget", {
     configurable: true,
     get() {
-      return node;
+      return node || document;
     }
   });
   while (node !== null) {
@@ -384,7 +377,12 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
       createRenderEffect(() => current = insertExpression(parent, array, current, marker, true));
       return () => current;
     }
-    if (sharedConfig.context && current && current.length) return current;
+    if (sharedConfig.context && current && current.length) {
+      for (let i = 0; i < array.length; i++) {
+        if (array[i].parentNode) return current = array;
+      }
+      return current;
+    }
     if (array.length === 0) {
       current = cleanChildren(parent, current, marker);
       if (multi) return current;
@@ -401,6 +399,7 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
     }
     current = array;
   } else if (value instanceof Node) {
+    if (sharedConfig.context) return current = value.parentNode ? value : current;
     if (Array.isArray(current)) {
       if (multi) return current = cleanChildren(parent, current, marker, value);
       cleanChildren(parent, current, null, value);
@@ -452,6 +451,14 @@ function cleanChildren(parent, current, marker, replacement) {
   } else parent.insertBefore(node, marker);
   return [node];
 }
+function gatherHydratable(element, root) {
+  const templates = element.querySelectorAll(`*[data-hk]`);
+  for (let i = 0; i < templates.length; i++) {
+    const node = templates[i];
+    const key = node.getAttribute("data-hk");
+    if (!root || key.startsWith(root)) sharedConfig.registry.set(key, node);
+  }
+}
 function getHydrationKey() {
   const hydrate = sharedConfig.context;
   return `${hydrate.id}${hydrate.count++}`;
@@ -465,8 +472,7 @@ function NoHydration(props) {
 
 function renderToString(fn, options) {}
 function renderToStringAsync(fn, options) {}
-function pipeToNodeWritable(fn, writable, options) {}
-function pipeToWritable(fn, writable, options) {}
+function renderToStream(fn, options) {}
 function ssr(template, ...nodes) {}
 function resolveSSRNode(node) {}
 function ssrClassList(value) {}
@@ -482,6 +488,10 @@ const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
 function createElement(tagName, isSVG = false) {
   return isSVG ? document.createElementNS(SVG_NAMESPACE, tagName) : document.createElement(tagName);
 }
+const hydrate = (...args) => {
+  enableHydration();
+  return hydrate$1(...args);
+};
 function Portal(props) {
   const {
     useShadow
@@ -535,4 +545,4 @@ function Dynamic(props) {
   });
 }
 
-export { Aliases, Assets, ChildProperties, DelegatedEvents, Dynamic, Assets as HydrationScript, NoHydration, Portal, PropAliases, Properties, SVGElements, SVGNamespace, addEventListener, assign, classList, clearDelegatedEvents, delegateEvents, dynamicProperty, escape, gatherHydratable, generateHydrationScript, getHydrationKey, getNextElement, getNextMarker, getNextMatch, hydrate, insert, isServer, memo, pipeToNodeWritable, pipeToWritable, render, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, spread, ssr, ssrBoolean, ssrClassList, ssrHydrationKey, ssrSpread, ssrStyle, style, template };
+export { Aliases, Assets, ChildProperties, DelegatedEvents, Dynamic, Assets as HydrationScript, NoHydration, Portal, PropAliases, Properties, SVGElements, SVGNamespace, addEventListener, assign, classList, clearDelegatedEvents, delegateEvents, dynamicProperty, escape, generateHydrationScript, getHydrationKey, getNextElement, getNextMarker, getNextMatch, hydrate, insert, isServer, memo, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, spread, ssr, ssrBoolean, ssrClassList, ssrHydrationKey, ssrSpread, ssrStyle, style, template };

package/web/types/client.d.ts

@@ -30,7 +30,12 @@ export function spread<T>(
 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 addEventListener(node: Element, name: string, handler: () => void, delegate: boolean): void;
+export function addEventListener(
+  node: Element,
+  name: string,
+  handler: () => void,
+  delegate: boolean
+): void;
 export function classList(
   node: Element,
   value: { [k: string]: boolean },
@@ -45,8 +50,11 @@ 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): () => void;
-export function gatherHydratable(node: Element): void;
+export function hydrate(
+  fn: () => JSX.Element,
+  node: MountableElement,
+  options: { renderId?: string }
+): () => void;
 export function getHydrationKey(): string;
 export function getNextElement(template?: HTMLTemplateElement): Element;
 export function getNextMatch(start: Node, elementName: string): Element;

package/web/types/core.d.ts

@@ -1,3 +1,3 @@
-import { createRoot, createRenderEffect, createComponent, getOwner, sharedConfig, awaitSuspense } from "../..";
+import { createRoot, createRenderEffect, createComponent, getOwner, sharedConfig } from "../..";
 declare function memo<T>(fn: () => T, equals: boolean): import("../..").Accessor<T>;
-export { getOwner, createComponent, createRoot as root, createRenderEffect as effect, memo, sharedConfig, awaitSuspense as asyncWrap };
+export { getOwner, createComponent, createRoot as root, createRenderEffect as effect, memo, sharedConfig };

package/web/types/index.d.ts

@@ -1,8 +1,10 @@
+import { hydrate as hydrateCore } from "./client";
 import { Component, JSX, Accessor } from "../..";
 export * from "./client";
 export { For, Show, Suspense, SuspenseList, Switch, Match, Index, ErrorBoundary, mergeProps } from "../..";
 export * from "./server-mock";
 export declare const isServer = false;
+export declare const hydrate: typeof hydrateCore;
 /**
  * renders components somewhere else in the DOM
  *

package/web/types/server-mock.d.ts

@@ -1,31 +1,23 @@
-export declare type PipeToWritableResults = {
-    startWriting: () => void;
-    write: (v: string) => void;
-    abort: () => void;
-};
 export declare function renderToString<T>(fn: () => T, options?: {
-    eventNames?: string[];
     nonce?: string;
+    renderId?: string;
 }): string;
 export declare function renderToStringAsync<T>(fn: () => T, options?: {
-    eventNames?: string[];
     timeoutMs?: number;
     nonce?: string;
+    renderId?: string;
 }): Promise<string>;
-export declare function pipeToNodeWritable<T>(fn: () => T, writable: {
-    write: (v: string) => void;
-}, options?: {
-    eventNames?: string[];
+export declare function renderToStream<T>(fn: () => T, options?: {
     nonce?: string;
-    onReady?: (r: PipeToWritableResults) => void;
-    onComplete?: (r: PipeToWritableResults) => void | Promise<void>;
-}): void;
-export declare function pipeToWritable<T>(fn: () => T, writable: WritableStream, options?: {
-    eventNames?: string[];
-    nonce?: string;
-    onReady?: (r: PipeToWritableResults) => void;
-    onComplete?: (r: PipeToWritableResults) => void | Promise<void>;
-}): void;
+    renderId?: string;
+    onCompleteShell?: () => void;
+    onCompleteAll?: () => void;
+}): {
+    pipe: (writable: {
+        write: (v: string) => void;
+    }) => void;
+    pipeTo: (writable: WritableStream) => void;
+};
 export declare function ssr(template: string[] | string, ...nodes: any[]): {
     t: string;
 };
@@ -41,3 +33,24 @@ export declare function ssrBoolean(key: string, value: boolean): string;
 export declare function ssrHydrationKey(): string;
 export declare function escape(html: string): string;
 export declare function generateHydrationScript(): string;
+export declare type LegacyResults = {
+    startWriting: () => void;
+};
+/**
+ * @deprecated Replaced by renderToStream
+ */
+export declare function pipeToWritable<T>(fn: () => T, writable: WritableStream, options?: {
+    nonce?: string;
+    onReady?: (res: LegacyResults) => void;
+    onCompleteAll?: () => void;
+}): void;
+/**
+ * @deprecated Replaced by renderToStream
+ */
+export declare function pipeToNodeWritable<T>(fn: () => T, writable: {
+    write: (v: string) => void;
+}, options?: {
+    nonce?: string;
+    onReady?: (res: LegacyResults) => void;
+    onCompleteAll?: () => void;
+}): void;