dom-expressions 0.37.8 → 0.37.10

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dom-expressions",
   "description": "A Fine-Grained Runtime for Performant DOM Rendering",
-  "version": "0.37.8",
+  "version": "0.37.10",
   "author": "Ryan Carniato",
   "license": "MIT",
   "repository": {
@@ -20,12 +20,12 @@
   },
   "peerDependencies": {
     "csstype": "^3.0",
-    "seroval": "^0.12.0"
+    "seroval": "^0.15.1"
   },
   "devDependencies": {
-    "babel-plugin-jsx-dom-expressions": "^0.37.8",
+    "babel-plugin-jsx-dom-expressions": "^0.37.9",
     "csstype": "^3.1",
-    "seroval": "^0.12.0"
+    "seroval": "^0.15.1"
   },
-  "gitHead": "51b297d6ed45d1a3dbbe7a45f2f58b8b524427ab"
+  "gitHead": "d2d7f3d9057ed79b2bc404ccad53582427f6b4a2"
 }

package/src/constants.js

@@ -10,6 +10,7 @@ const booleans = [
   "formnovalidate",
   "hidden",
   "indeterminate",
+  "inert",
   "ismap",
   "loop",
   "multiple",

package/src/jsx-h.d.ts

@@ -51,6 +51,13 @@ export namespace JSX {
     1: any;
   }
   type EventHandlerUnion<T, E extends Event> = EventHandler<T, E> | BoundEventHandler<T, E>;
+
+  const SERIALIZABLE: unique symbol;
+  interface SerializableAttributeValue {
+    toString(): string;
+    [SERIALIZABLE]: never;
+  }
+
   interface IntrinsicAttributes {
     ref?: unknown | ((e: unknown) => void);
   }
@@ -718,7 +725,7 @@ export namespace JSX {
     autofocus?: FunctionMaybe<boolean>;
     disabled?: FunctionMaybe<boolean>;
     form?: FunctionMaybe<string>;
-    formaction?: FunctionMaybe<string>;
+    formaction?: FunctionMaybe<string | SerializableAttributeValue>;
     formenctype?: FunctionMaybe<HTMLFormEncType>;
     formmethod?: FunctionMaybe<HTMLFormMethod>;
     formnovalidate?: FunctionMaybe<boolean>;
@@ -726,7 +733,7 @@ export namespace JSX {
     name?: FunctionMaybe<string>;
     type?: FunctionMaybe<"submit" | "reset" | "button">;
     value?: FunctionMaybe<string>;
-    formAction?: FunctionMaybe<string>;
+    formAction?: FunctionMaybe<string | SerializableAttributeValue>;
     formEnctype?: FunctionMaybe<HTMLFormEncType>;
     formMethod?: FunctionMaybe<HTMLFormMethod>;
     formNoValidate?: FunctionMaybe<boolean>;
@@ -767,7 +774,7 @@ export namespace JSX {
   }
   interface FormHTMLAttributes<T> extends HTMLAttributes<T> {
     "accept-charset"?: FunctionMaybe<string>;
-    action?: FunctionMaybe<string>;
+    action?: FunctionMaybe<string | SerializableAttributeValue>;
     autocomplete?: FunctionMaybe<string>;
     encoding?: FunctionMaybe<HTMLFormEncType>;
     enctype?: FunctionMaybe<HTMLFormEncType>;
@@ -819,7 +826,7 @@ export namespace JSX {
     crossorigin?: FunctionMaybe<HTMLCrossorigin>;
     disabled?: FunctionMaybe<boolean>;
     form?: FunctionMaybe<string>;
-    formaction?: FunctionMaybe<string>;
+    formaction?: FunctionMaybe<string | SerializableAttributeValue>;
     formenctype?: FunctionMaybe<HTMLFormEncType>;
     formmethod?: FunctionMaybe<HTMLFormMethod>;
     formnovalidate?: FunctionMaybe<boolean>;
@@ -843,7 +850,7 @@ export namespace JSX {
     value?: FunctionMaybe<string | string[] | number>;
     width?: FunctionMaybe<number | string>;
     crossOrigin?: FunctionMaybe<HTMLCrossorigin>;
-    formAction?: FunctionMaybe<string>;
+    formAction?: FunctionMaybe<string | SerializableAttributeValue>;
     formEnctype?: FunctionMaybe<HTMLFormEncType>;
     formMethod?: FunctionMaybe<HTMLFormMethod>;
     formNoValidate?: FunctionMaybe<boolean>;

package/src/jsx.d.ts

@@ -118,6 +118,12 @@ export namespace JSX {
     | FocusEventHandler<T, E>
     | BoundFocusEventHandler<T, E>;
 
+  const SERIALIZABLE: unique symbol;
+  interface SerializableAttributeValue {
+    toString(): string;
+    [SERIALIZABLE]: never;
+  }
+
   interface IntrinsicAttributes {
     ref?: unknown | ((e: unknown) => void);
   }
@@ -791,7 +797,7 @@ export namespace JSX {
     autofocus?: boolean;
     disabled?: boolean;
     form?: string;
-    formaction?: string;
+    formaction?: string | SerializableAttributeValue;
     formenctype?: HTMLFormEncType;
     formmethod?: HTMLFormMethod;
     formnovalidate?: boolean;
@@ -799,7 +805,7 @@ export namespace JSX {
     name?: string;
     type?: "submit" | "reset" | "button";
     value?: string;
-    formAction?: string;
+    formAction?: string | SerializableAttributeValue;
     formEnctype?: HTMLFormEncType;
     formMethod?: HTMLFormMethod;
     formNoValidate?: boolean;
@@ -842,7 +848,7 @@ export namespace JSX {
   }
   interface FormHTMLAttributes<T> extends HTMLAttributes<T> {
     "accept-charset"?: string;
-    action?: string;
+    action?: string | SerializableAttributeValue;
     autocomplete?: string;
     encoding?: HTMLFormEncType;
     enctype?: HTMLFormEncType;
@@ -898,7 +904,7 @@ export namespace JSX {
     disabled?: boolean;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send";
     form?: string;
-    formaction?: string;
+    formaction?: string | SerializableAttributeValue;
     formenctype?: HTMLFormEncType;
     formmethod?: HTMLFormMethod;
     formnovalidate?: boolean;
@@ -924,7 +930,7 @@ export namespace JSX {
     value?: string | string[] | number;
     width?: number | string;
     crossOrigin?: HTMLCrossorigin;
-    formAction?: string;
+    formAction?: string | SerializableAttributeValue;
     formEnctype?: HTMLFormEncType;
     formMethod?: HTMLFormMethod;
     formNoValidate?: boolean;

package/src/serializer.js

@@ -1,4 +1,4 @@
-import { Feature, GLOBAL_CONTEXT_API_SCRIPT, Serializer, getCrossReferenceHeader } from "seroval"
+import { Feature, Serializer, getCrossReferenceHeader } from "seroval"
 
 const ES2017FLAG =
   Feature.AggregateError // ES2021
@@ -18,10 +18,6 @@ export function createSerializer({ onData, onDone, scopeId, onError }) {
   });
 }
 
-export function getGlobalHeaderScript() {
-  return GLOBAL_CONTEXT_API_SCRIPT;
-}
-
 export function getLocalHeaderScript(id) {
-  return getCrossReferenceHeader(id);
+  return getCrossReferenceHeader(id) + ';';
 }

package/src/server.js

@@ -1,6 +1,6 @@
 import { Aliases, BooleanAttributes, ChildProperties } from "./constants";
 import { sharedConfig, root } from "rxcore";
-import { createSerializer, getGlobalHeaderScript, getLocalHeaderScript } from "./serializer";
+import { createSerializer, getLocalHeaderScript } from "./serializer";
 export { createComponent } from "rxcore";
 
 // Based on https://github.com/WebReflection/domtagger/blob/master/esm/sanitizer.js
@@ -30,7 +30,11 @@ export function renderToString(code, options = {}) {
     nonce: options.nonce,
     serialize(id, p) {
       !sharedConfig.context.noHydrate && serializer.write(id, p);
-    }
+    },
+    roots: 0,
+    nextRoot() {
+      return this.renderId + "i-" + this.roots++;
+    },
   };
   let html = root(d => {
     setTimeout(d);
@@ -158,11 +162,19 @@ export function renderToStream(code, options = {}) {
             });
       } else if (!serverOnly) serializer.write(id, p);
     },
+    roots: 0,
+    nextRoot() {
+      return this.renderId + "i-" + this.roots++;
+    },
     registerFragment(key) {
       if (!registry.has(key)) {
         let resolve, reject;
         const p = new Promise((r, rej) => ((resolve = r), (reject = rej)));
-        registry.set(key, { resolve, reject });
+        // double queue to ensure that Suspense is last but in same flush
+        registry.set(key, {
+          resolve: v => queue(() => queue(() => resolve(v))),
+          reject: e => queue(() => queue(() => reject(e)))
+        });
         serializer.write(key, p);
       }
       return (value, error) => {
@@ -175,9 +187,7 @@ export function renderToStream(code, options = {}) {
           }
           if ((value !== undefined || error) && !completed) {
             if (!firstFlushed) {
-              Promise.resolve().then(
-                () => (html = replacePlaceholder(html, key, value !== undefined ? value : ""))
-              );
+              queue(() => (html = replacePlaceholder(html, key, value !== undefined ? value : "")));
               error ? reject(error) : resolve(true);
             } else {
               buffer.write(`<template id="${key}">${value !== undefined ? value : " "}</template>`);
@@ -187,7 +197,7 @@ export function renderToStream(code, options = {}) {
             }
           }
         }
-        if (!registry.size) Promise.resolve().then(flushEnd);
+        if (!registry.size) queue(flushEnd);
         return firstFlushed;
       };
     }
@@ -225,10 +235,10 @@ export function renderToStream(code, options = {}) {
           complete();
         };
       } else onCompleteAll = complete;
-      if (!registry.size) Promise.resolve().then(flushEnd);
+      if (!registry.size) queue(flushEnd);
     },
     pipe(w) {
-      Promise.allSettled(blockingPromises).then(() => {
+      allSettled(blockingPromises).then(() => {
         doShell();
         buffer = writable = w;
         buffer.write(tmp);
@@ -238,7 +248,7 @@ export function renderToStream(code, options = {}) {
       });
     },
     pipeTo(w) {
-      return Promise.allSettled(blockingPromises).then(() => {
+      return allSettled(blockingPromises).then(() => {
         doShell();
         const encoder = new TextEncoder();
         const writer = w.getWriter();
@@ -485,7 +495,7 @@ export function generateHydrationScript({ eventNames = ["click", "input"], nonce
     nonce ? ` nonce="${nonce}"` : ""
   }>window._$HY||(e=>{let t=e=>e&&e.hasAttribute&&(e.hasAttribute("data-hk")?e:t(e.host&&e.host.nodeType?e.host:e.parentNode));["${eventNames.join(
     '", "'
-  )}"].forEach((o=>document.addEventListener(o,(o=>{let a=o.composedPath&&o.composedPath()[0]||o.target,s=t(a);s&&!e.completed.has(s)&&e.events.push([s,o])}))))})(_$HY={events:[],completed:new WeakSet,r:{},fe(){}});${getGlobalHeaderScript()}</script><!--xs-->`;
+  )}"].forEach((o=>document.addEventListener(o,(o=>{let a=o.composedPath&&o.composedPath()[0]||o.target,s=t(a);s&&!e.completed.has(s)&&e.events.push([s,o])}))))})(_$HY={events:[],completed:new WeakSet,r:{},fe(){}});</script><!--xs-->`;
 }
 
 export function Hydration(props) {
@@ -507,6 +517,18 @@ export function NoHydration(props) {
   return props.children;
 }
 
+function queue(fn) {
+  return Promise.resolve().then(fn);
+}
+
+function allSettled(promises) {
+  let length = promises.length;
+  return Promise.allSettled(promises).then(() => {
+    if (promises.length !== length) return allSettled(promises);
+    return;
+  })
+}
+
 function injectAssets(assets, html) {
   if (!assets || !assets.length) return html;
   let out = "";