dom-expressions 0.34.13 → 0.35.0-beta.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dom-expressions",
   "description": "A Fine-Grained Runtime for Performant DOM Rendering",
-  "version": "0.34.13",
+  "version": "0.35.0-beta.1",
   "author": "Ryan Carniato",
   "license": "MIT",
   "repository": {
@@ -23,8 +23,8 @@
     "csstype": "^3.0"
   },
   "devDependencies": {
-    "babel-plugin-jsx-dom-expressions": "^0.34.13",
+    "babel-plugin-jsx-dom-expressions": "^0.35.0-beta.1",
     "csstype": "^3.1.0"
   },
-  "gitHead": "4c0cade4a828b281fd2eb47dfe09b70d012e6858"
+  "gitHead": "2d62fd655ecdf2462f7c9e10232f4f8aaa4b7fd5"
 }

package/src/client.d.ts

@@ -57,15 +57,18 @@ export function dynamicProperty(props: unknown, key: string): unknown;
 export function hydrate(
   fn: () => JSX.Element,
   node: MountableElement,
-  options?: { renderId?: string }
+  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: () => string): void;
+export function setHydratable(fn: () => JSX.Element, hydratable: boolean): JSX.Element;
+export function useAssets(fn: () => JSX.Element): void;
 export function getAssets(): string;
-export function Assets(props: { children?: JSX.Element }): JSX.Element;
 export function HydrationScript(): JSX.Element;
-export function NoHydration(props: { children?: JSX.Element }): JSX.Element;
-export function generateHydrationScript(): string;
+export function generateHydrationScript(): string;
+
+// deprecated
+export function Assets(props: { children?: JSX.Element }): JSX.Element;
+export function NoHydration(props: { children?: JSX.Element }): JSX.Element;

package/src/client.js

@@ -6,7 +6,16 @@ import {
   SVGNamespace,
   DelegatedEvents
 } from "./constants";
-import { root, effect, memo, getOwner, createComponent, sharedConfig, untrack } from "rxcore";
+import {
+  root,
+  effect,
+  memo,
+  getOwner,
+  createComponent,
+  sharedConfig,
+  untrack,
+  mergeProps
+} from "rxcore";
 import reconcileArrays from "./reconcile";
 export {
   Properties,
@@ -27,6 +36,7 @@ export {
   untrack,
   getOwner,
   createComponent,
+  mergeProps,
   voidFn as useAssets,
   voidFn as getAssets,
   voidFn as Assets,
@@ -34,14 +44,14 @@ export {
   voidFn as HydrationScript
 };
 
-export function render(code, element, init) {
+export function render(code, element, init, options = {}) {
   let disposer;
   root(dispose => {
     disposer = dispose;
     element === document
       ? code()
       : insert(element, code(), element.firstChild ? null : undefined, init);
-  });
+  }, options.owner);
   return () => {
     disposer();
     element.textContent = "";
@@ -145,20 +155,14 @@ export function style(node, value, prev) {
   return prev;
 }
 
-export function spread(node, accessor, isSVG, skipChildren) {
-  if (typeof accessor === "function") {
-    effect(current => spreadExpression(node, accessor(), current, isSVG, skipChildren));
-  } else spreadExpression(node, accessor, undefined, isSVG, skipChildren);
-}
-
-export function mergeProps(...sources) {
-  const target = {};
-  for (let i = 0; i < sources.length; i++) {
-    let source = sources[i];
-    if (typeof source === "function") source = source();
-    if (source) Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+export function spread(node, props = {}, isSVG, skipChildren) {
+  const prevProps = {};
+  if (!skipChildren) {
+    effect(() => (prevProps.children = insertExpression(node, props.children, prevProps.children)));
   }
-  return target;
+  effect(() => props.ref && props.ref(node));
+  effect(() => assign(node, props, isSVG, true, prevProps, true));
+  return prevProps;
 }
 
 export function dynamicProperty(props, key) {
@@ -216,7 +220,7 @@ export function hydrate(code, element, options = {}) {
     count: 0
   };
   gatherHydratable(element, options.renderId);
-  const dispose = render(code, element, [...element.childNodes]);
+  const dispose = render(code, element, [...element.childNodes], options);
   sharedConfig.context = null;
   return dispose;
 }
@@ -294,9 +298,7 @@ function assignProp(node, prop, value, prev, isSVG, skipRef) {
   if (prop === "classList") return classList(node, value, prev);
   if (value === prev) return prev;
   if (prop === "ref") {
-    if (!skipRef) {
-      value(node);
-    }
+    if (!skipRef) value(node);
   } else if (prop.slice(0, 3) === "on:") {
     const e = prop.slice(3);
     prev && node.removeEventListener(e, prev);
@@ -369,16 +371,6 @@ function eventHandler(e) {
   }
 }
 
-function spreadExpression(node, props, prevProps = {}, isSVG, skipChildren) {
-  props || (props = {});
-  if (!skipChildren) {
-    effect(() => (prevProps.children = insertExpression(node, props.children, prevProps.children)));
-  }
-  effect(() => props.ref && props.ref(node));
-  effect(() => assign(node, props, isSVG, true, prevProps, true));
-  return prevProps;
-}
-
 function insertExpression(parent, value, current, marker, unwrapArray) {
   if (sharedConfig.context && !current) current = [...parent.childNodes];
   while (typeof current === "function") current = current();
@@ -487,7 +479,7 @@ function normalizeIncomingArray(normalized, array, current, unwrap) {
   return dynamic;
 }
 
-function appendNodes(parent, array, marker) {
+function appendNodes(parent, array, marker = null) {
   for (let i = 0, len = array.length; i < len; i++) parent.insertBefore(array[i], marker);
 }
 
@@ -524,8 +516,12 @@ export function getHydrationKey() {
   return `${hydrate.id}${hydrate.count++}`;
 }
 
+export function setHydratable(fn, hydratable) {
+  return sharedConfig.context && (sharedConfig.context.count++, !hydratable) ? undefined : fn();
+}
+
 export function NoHydration(props) {
-  return sharedConfig.context ? undefined : props.children;
+  return setHydratable(() => props.children, false);
 }
 
 function voidFn() {}

package/src/server.d.ts

@@ -26,18 +26,22 @@ export function renderToStream<T>(
   pipeTo: (writable: WritableStream) => void;
 };
 
-export function Assets(props: { children?: JSX.Element }): JSX.Element;
 export function HydrationScript(props: { nonce?: string; eventNames?: string[] }): JSX.Element;
-export function NoHydration(props: { children?: JSX.Element }): 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 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: () => string): void;
+export function setHydratable(fn: () => JSX.Element, hydratable: boolean): JSX.Element;
+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;
@@ -47,6 +51,9 @@ export function mergeProps(...sources: unknown[]): unknown;
 export function getOwner(): unknown;
 export function generateHydrationScript(options: { nonce?: string; eventNames?: string[] }): string;
 
+export function NoHydration(props: { children?: JSX.Element }): JSX.Element;
+export function Assets(props: { children?: JSX.Element }): JSX.Element;
+
 // deprecated
 export type LegacyResults = {
   write: (text: string) => void;

package/src/server.js

@@ -14,6 +14,7 @@ export function renderToString(code, options = {}) {
     assets: [],
     nonce: options.nonce,
     writeResource(id, p, error) {
+      if (sharedConfig.context.noHydrate) return;
       if (error) return (scripts += `_$HY.set("${id}", ${serializeError(p)});`);
       scripts += `_$HY.set("${id}", ${stringify(p)});`;
     }
@@ -106,11 +107,13 @@ export function renderToStream(code, options = {}) {
       );
     },
     writeResource(id, p, error, wait) {
-      if (error) return pushTask(serializeSet(dedupe, id, p, serializeError));
+      const serverOnly = sharedConfig.context.noHydrate;
+      if (error) return !serverOnly && pushTask(serializeSet(dedupe, id, p, serializeError));
       if (!p || typeof p !== "object" || !("then" in p))
-        return pushTask(serializeSet(dedupe, id, p));
+        return !serverOnly && pushTask(serializeSet(dedupe, id, p));
       if (!firstFlushed) wait && blockingResources.push(p);
-      else pushTask(`_$HY.init("${id}")`);
+      else !serverOnly && pushTask(`_$HY.init("${id}")`);
+      if (serverOnly) return;
       p.then(d => {
         !completed && pushTask(serializeSet(dedupe, id, d));
       }).catch(() => {
@@ -225,23 +228,11 @@ export function renderToStream(code, options = {}) {
 }
 
 // components
-export function Assets(props) {
-  useAssets(() => props.children);
-}
-
 export function HydrationScript(props) {
   const { nonce } = sharedConfig.context;
   return ssr(generateHydrationScript({ nonce, ...props }));
 }
 
-export function NoHydration(props) {
-  const c = sharedConfig.context;
-  c.noHydrate = true;
-  const children = props.children;
-  c.noHydrate = false;
-  return children;
-}
-
 // rendering
 export function ssr(t, ...nodes) {
   if (nodes.length) {
@@ -280,8 +271,11 @@ export function ssrStyle(value) {
   const k = Object.keys(value);
   for (let i = 0; i < k.length; i++) {
     const s = k[i];
-    if (i) result += ";";
-    result += `${s}:${escape(value[s], true)}`;
+    const v = value[s];
+    if (v != undefined) {
+      if (i) result += ";";
+      result += `${s}:${escape(v, true)}`;
+    }
   }
   return result;
 }
@@ -415,6 +409,14 @@ export function getHydrationKey() {
   return hydrate && !hydrate.noHydrate && `${hydrate.id}${hydrate.count++}`;
 }
 
+export function setHydratable(fn, hydratable) {
+  const c = sharedConfig.context;
+  sharedConfig.context = { ...c, id: `${c.id}${c.count++}-`, count: 0, noHydrate: !hydratable };
+  const res = fn();
+  sharedConfig.context = c;
+  return res;
+}
+
 export function useAssets(fn) {
   sharedConfig.context.assets.push(() => resolveSSRNode(fn()));
 }
@@ -502,6 +504,16 @@ function replacePlaceholder(html, key, value) {
   return html.slice(0, first) + value + html.slice(nextRegex.lastIndex);
 }
 
+// consider deprecating
+export function Assets(props) {
+  useAssets(() => props.children);
+}
+
+
+export function NoHydration(props) {
+  return setHydratable(() => props.children, false);
+}
+
 /* istanbul ignore next */
 /**
  * @deprecated Replaced by renderToStream

package/src/universal.js

@@ -1,4 +1,4 @@
-import { root, effect, memo, createComponent, untrack } from "rxcore";
+import { root, effect, memo, createComponent, untrack, mergeProps } from "rxcore";
 
 export function createRenderer({
   createElement,
@@ -261,14 +261,3 @@ export function createRenderer({
     }
   };
 }
-
-function mergeProps(...sources) {
-  const target = {};
-  for (let i = 0; i < sources.length; i++) {
-    let source = sources[i];
-    if (typeof source === "function") source = source();
-    const descriptors = Object.getOwnPropertyDescriptors(source);
-    Object.defineProperties(target, descriptors);
-  }
-  return target;
-}