solid-js 1.8.23 → 1.9.0

package/web/dist/dev.js

@@ -571,7 +571,7 @@ function render(code, element, init, options = {}) {
     element.textContent = "";
   };
 }
-function template(html, isCE, isSVG) {
+function template(html, isImportNode, isSVG) {
   let node;
   const create = () => {
     if (isHydrating())
@@ -582,7 +582,7 @@ function template(html, isCE, isSVG) {
     t.innerHTML = html;
     return isSVG ? t.content.firstChild.firstChild : t.content.firstChild;
   };
-  const fn = isCE
+  const fn = isImportNode
     ? () => untrack(() => document.importNode(node || (node = create()), true))
     : () => (node || (node = create())).cloneNode(true);
   fn.cloneNode = fn;
@@ -618,6 +618,10 @@ function setAttributeNS(node, namespace, name, value) {
   if (value == null) node.removeAttributeNS(namespace, name);
   else node.setAttributeNS(namespace, name, value);
 }
+function setBoolAttribute(node, name, value) {
+  if (isHydrating(node)) return;
+  value ? node.setAttribute(name, "") : node.removeAttribute(name);
+}
 function className(node, value) {
   if (isHydrating(node)) return;
   if (value == null) node.removeAttribute("class");
@@ -632,7 +636,7 @@ function addEventListener(node, name, handler, delegate) {
   } else if (Array.isArray(handler)) {
     const handlerFn = handler[0];
     node.addEventListener(name, (handler[0] = e => handlerFn.call(node, handler[1], e)));
-  } else node.addEventListener(name, handler);
+  } else node.addEventListener(name, handler, typeof handler !== "function" && handler);
 }
 function classList(node, value, prev = {}) {
   const classKeys = Object.keys(value || {}),
@@ -708,7 +712,7 @@ function assign(node, props, isSVG, skipChildren, prevProps = {}, skipRef = fals
   for (const prop in prevProps) {
     if (!(prop in props)) {
       if (prop === "children") continue;
-      prevProps[prop] = assignProp(node, prop, null, prevProps[prop], isSVG, skipRef);
+      prevProps[prop] = assignProp(node, prop, null, prevProps[prop], isSVG, skipRef, props);
     }
   }
   for (const prop in props) {
@@ -717,7 +721,7 @@ function assign(node, props, isSVG, skipChildren, prevProps = {}, skipRef = fals
       continue;
     }
     const value = props[prop];
-    prevProps[prop] = assignProp(node, prop, value, prevProps[prop], isSVG, skipRef);
+    prevProps[prop] = assignProp(node, prop, value, prevProps[prop], isSVG, skipRef, props);
   }
 }
 function hydrate$1(code, element, options = {}) {
@@ -744,8 +748,14 @@ function getNextElement(template) {
     key,
     hydrating = isHydrating();
   if (!hydrating || !(node = sharedConfig.registry.get((key = getHydrationKey())))) {
-    if (hydrating)
-      throw new Error(`Hydration Mismatch. Unable to find DOM nodes for hydration key: ${key}`);
+    if (hydrating) {
+      sharedConfig.done = true;
+      throw new Error(
+        `Hydration Mismatch. Unable to find DOM nodes for hydration key: ${key}\n${
+          template ? template().outerHTML : ""
+        }`
+      );
+    }
     return template();
   }
   if (sharedConfig.completed) sharedConfig.completed.add(node);
@@ -807,7 +817,7 @@ function toggleClassKey(node, key, value) {
   for (let i = 0, nameLen = classNames.length; i < nameLen; i++)
     node.classList.toggle(classNames[i], value);
 }
-function assignProp(node, prop, value, prev, isSVG, skipRef) {
+function assignProp(node, prop, value, prev, isSVG, skipRef, props) {
   let isCE, isProp, isChildProp, propAlias, forceProp;
   if (prop === "style") return style(node, value, prev);
   if (prop === "classList") return classList(node, value, prev);
@@ -816,8 +826,8 @@ function assignProp(node, prop, value, prev, isSVG, skipRef) {
     if (!skipRef) value(node);
   } else if (prop.slice(0, 3) === "on:") {
     const e = prop.slice(3);
-    prev && node.removeEventListener(e, prev);
-    value && node.addEventListener(e, value);
+    prev && node.removeEventListener(e, prev, typeof prev !== "function" && prev);
+    value && node.addEventListener(e, value, typeof value !== "function" && value);
   } else if (prop.slice(0, 10) === "oncapture:") {
     const e = prop.slice(10);
     prev && node.removeEventListener(e, prev, true);
@@ -835,12 +845,14 @@ function assignProp(node, prop, value, prev, isSVG, skipRef) {
     }
   } else if (prop.slice(0, 5) === "attr:") {
     setAttribute(node, prop.slice(5), value);
+  } else if (prop.slice(0, 5) === "bool:") {
+    setBoolAttribute(node, prop.slice(5), value);
   } else if (
     (forceProp = prop.slice(0, 5) === "prop:") ||
     (isChildProp = ChildProperties.has(prop)) ||
     (!isSVG &&
       ((propAlias = getPropAlias(prop, node.tagName)) || (isProp = Properties.has(prop)))) ||
-    (isCE = node.nodeName.includes("-"))
+    (isCE = node.nodeName.includes("-") || "is" in props)
   ) {
     if (forceProp) {
       prop = prop.slice(5);
@@ -860,14 +872,28 @@ function eventHandler(e) {
   if (sharedConfig.registry && sharedConfig.events) {
     if (sharedConfig.events.find(([el, ev]) => ev === e)) return;
   }
+  let node = e.target;
   const key = `$$${e.type}`;
-  let node = (e.composedPath && e.composedPath()[0]) || e.target;
-  if (e.target !== node) {
+  const oriTarget = e.target;
+  const oriCurrentTarget = e.currentTarget;
+  const retarget = value =>
     Object.defineProperty(e, "target", {
       configurable: true,
-      value: node
+      value
     });
-  }
+  const handleNode = () => {
+    const handler = node[key];
+    if (handler && !node.disabled) {
+      const data = node[`${key}Data`];
+      data !== undefined ? handler.call(node, data, e) : handler.call(node, e);
+      if (e.cancelBubble) return;
+    }
+    node.host && node.contains(e.target) && !node.host._$host && retarget(node.host);
+    return true;
+  };
+  const walkUpTree = () => {
+    while (handleNode() && (node = node._$host || node.parentNode || node.host));
+  };
   Object.defineProperty(e, "currentTarget", {
     configurable: true,
     get() {
@@ -875,15 +901,23 @@ function eventHandler(e) {
     }
   });
   if (sharedConfig.registry && !sharedConfig.done) sharedConfig.done = _$HY.done = true;
-  while (node) {
-    const handler = node[key];
-    if (handler && !node.disabled) {
-      const data = node[`${key}Data`];
-      data !== undefined ? handler.call(node, data, e) : handler.call(node, e);
-      if (e.cancelBubble) return;
+  if (e.composedPath) {
+    const path = e.composedPath();
+    retarget(path[0]);
+    for (let i = 0; i < path.length - 2; i++) {
+      node = path[i];
+      if (!handleNode()) break;
+      if (node._$host) {
+        node = node._$host;
+        walkUpTree();
+        break;
+      }
+      if (node.parentNode === oriCurrentTarget) {
+        break;
+      }
     }
-    node = node._$host || node.parentNode || node.host;
-  }
+  } else walkUpTree();
+  retarget(oriTarget);
 }
 function insertExpression(parent, value, current, marker, unwrapArray) {
   const hydrating = isHydrating(parent);
@@ -1186,6 +1220,7 @@ export {
   runHydrationEvents,
   setAttribute,
   setAttributeNS,
+  setBoolAttribute,
   setProperty,
   spread,
   ssr,

package/web/dist/server.cjs

@@ -6,11 +6,52 @@ var web = require('seroval-plugins/web');
 
 const booleans = ["allowfullscreen", "async", "autofocus", "autoplay", "checked", "controls", "default", "disabled", "formnovalidate", "hidden", "indeterminate", "inert", "ismap", "loop", "multiple", "muted", "nomodule", "novalidate", "open", "playsinline", "readonly", "required", "reversed", "seamless", "selected"];
 const BooleanAttributes = /*#__PURE__*/new Set(booleans);
+const Properties = /*#__PURE__*/new Set(["className", "value", "readOnly", "formNoValidate", "isMap", "noModule", "playsInline", ...booleans]);
 const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
 const Aliases = /*#__PURE__*/Object.assign(Object.create(null), {
   className: "class",
   htmlFor: "for"
 });
+const PropAliases = /*#__PURE__*/Object.assign(Object.create(null), {
+  class: "className",
+  formnovalidate: {
+    $: "formNoValidate",
+    BUTTON: 1,
+    INPUT: 1
+  },
+  ismap: {
+    $: "isMap",
+    IMG: 1
+  },
+  nomodule: {
+    $: "noModule",
+    SCRIPT: 1
+  },
+  playsinline: {
+    $: "playsInline",
+    VIDEO: 1
+  },
+  readonly: {
+    $: "readOnly",
+    INPUT: 1,
+    TEXTAREA: 1
+  }
+});
+function getPropAlias(prop, tagName) {
+  const a = PropAliases[prop];
+  return typeof a === "object" ? a[tagName] ? a["$"] : undefined : a;
+}
+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 SVGElements = /*#__PURE__*/new Set([
+"altGlyph", "altGlyphDef", "altGlyphItem", "animate", "animateColor", "animateMotion", "animateTransform", "circle", "clipPath", "color-profile", "cursor", "defs", "desc", "ellipse", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "filter", "font", "font-face", "font-face-format", "font-face-name", "font-face-src", "font-face-uri", "foreignObject", "g", "glyph", "glyphRef", "hkern", "image", "line", "linearGradient", "marker", "mask", "metadata", "missing-glyph", "mpath", "path", "pattern", "polygon", "polyline", "radialGradient", "rect",
+"set", "stop",
+"svg", "switch", "symbol", "text", "textPath",
+"tref", "tspan", "use", "view", "vkern"]);
+const SVGNamespace = {
+  xlink: "http://www.w3.org/1999/xlink",
+  xml: "http://www.w3.org/XML/1998/namespace"
+};
+const DOMElements = /*#__PURE__*/new Set(["html", "base", "head", "link", "meta", "style", "title", "body", "address", "article", "aside", "footer", "header", "main", "nav", "section", "body", "blockquote", "dd", "div", "dl", "dt", "figcaption", "figure", "hr", "li", "ol", "p", "pre", "ul", "a", "abbr", "b", "bdi", "bdo", "br", "cite", "code", "data", "dfn", "em", "i", "kbd", "mark", "q", "rp", "rt", "ruby", "s", "samp", "small", "span", "strong", "sub", "sup", "time", "u", "var", "wbr", "area", "audio", "img", "map", "track", "video", "embed", "iframe", "object", "param", "picture", "portal", "source", "svg", "math", "canvas", "noscript", "script", "del", "ins", "caption", "col", "colgroup", "table", "tbody", "td", "tfoot", "th", "thead", "tr", "button", "datalist", "fieldset", "form", "input", "label", "legend", "meter", "optgroup", "option", "output", "progress", "select", "textarea", "details", "dialog", "menu", "summary", "details", "slot", "template", "acronym", "applet", "basefont", "bgsound", "big", "blink", "center", "content", "dir", "font", "frame", "frameset", "hgroup", "image", "keygen", "marquee", "menuitem", "nobr", "noembed", "noframes", "plaintext", "rb", "rtc", "shadow", "spacer", "strike", "tt", "xmp", "a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b", "base", "basefont", "bdi", "bdo", "bgsound", "big", "blink", "blockquote", "body", "br", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "content", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "dir", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "font", "footer", "form", "frame", "frameset", "head", "header", "hgroup", "hr", "html", "i", "iframe", "image", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "link", "main", "map", "mark", "marquee", "menu", "menuitem", "meta", "meter", "nav", "nobr", "noembed", "noframes", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "plaintext", "portal", "pre", "progress", "q", "rb", "rp", "rt", "rtc", "ruby", "s", "samp", "script", "section", "select", "shadow", "slot", "small", "source", "spacer", "span", "strike", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "tt", "u", "ul", "var", "video", "wbr", "xmp", "input", "h1", "h2", "h3", "h4", "h5", "h6"]);
 
 const ES2017FLAG = seroval.Feature.AggregateError
 | seroval.Feature.BigIntTypedArray;
@@ -603,22 +644,25 @@ function ssrSpread(props, isSVG, skipChildren) {
     } else if (value == undefined || prop === "ref" || prop.slice(0, 2) === "on" || prop.slice(0, 5) === "prop:") {
       continue;
     } else {
-      if (prop.slice(0, 5) === "attr:") prop = prop.slice(5);
-      result += `${Aliases[prop] || escape(prop)}="${escape(value, true)}"`;
+      if (prop.slice(0, 5) === "bool:") {
+        if (!value) continue;
+        prop = prop.slice(5);
+        result += `${escape(prop)}`;
+      } else {
+        if (prop.slice(0, 5) === "attr:") prop = prop.slice(5);
+        result += `${Aliases[prop] || escape(prop)}="${escape(value, true)}"`;
+      }
     }
     if (i !== keys.length - 1) result += " ";
   }
   return result;
 }
+function notSup() {
+  throw new Error("Client-only API called on the server side. Run client-only code in onMount, or conditionally run client-only component with <Show>.");
+}
 
 const isServer = true;
 const isDev = false;
-function render() {}
-function hydrate() {}
-function insert() {}
-function spread() {}
-function addEventListener() {}
-function delegateEvents() {}
 function Dynamic(props) {
   const [p, others] = solidJs.splitProps(props, ["component"]);
   const comp = p.component,
@@ -669,36 +713,71 @@ Object.defineProperty(exports, 'createComponent', {
   enumerable: true,
   get: function () { return solidJs.createComponent; }
 });
+Object.defineProperty(exports, 'effect', {
+  enumerable: true,
+  get: function () { return solidJs.createRenderEffect; }
+});
+Object.defineProperty(exports, 'getOwner', {
+  enumerable: true,
+  get: function () { return solidJs.getOwner; }
+});
+Object.defineProperty(exports, 'memo', {
+  enumerable: true,
+  get: function () { return solidJs.createMemo; }
+});
 Object.defineProperty(exports, 'mergeProps', {
   enumerable: true,
   get: function () { return solidJs.mergeProps; }
 });
+Object.defineProperty(exports, 'untrack', {
+  enumerable: true,
+  get: function () { return solidJs.untrack; }
+});
+exports.Aliases = Aliases;
 exports.Assets = Assets;
+exports.ChildProperties = ChildProperties;
+exports.DOMElements = DOMElements;
+exports.DelegatedEvents = DelegatedEvents;
 exports.Dynamic = Dynamic;
 exports.Hydration = Hydration;
 exports.HydrationScript = HydrationScript;
 exports.NoHydration = NoHydration;
 exports.Portal = Portal;
+exports.Properties = Properties;
 exports.RequestContext = RequestContext;
-exports.addEventListener = addEventListener;
-exports.delegateEvents = delegateEvents;
+exports.SVGElements = SVGElements;
+exports.SVGNamespace = SVGNamespace;
+exports.addEventListener = notSup;
+exports.assign = notSup;
+exports.classList = notSup;
+exports.className = notSup;
+exports.delegateEvents = notSup;
+exports.dynamicProperty = notSup;
 exports.escape = escape;
 exports.generateHydrationScript = generateHydrationScript;
 exports.getAssets = getAssets;
 exports.getHydrationKey = getHydrationKey;
+exports.getNextElement = notSup;
+exports.getNextMarker = notSup;
+exports.getNextMatch = notSup;
+exports.getPropAlias = getPropAlias;
 exports.getRequestEvent = getRequestEvent;
-exports.hydrate = hydrate;
-exports.insert = insert;
+exports.hydrate = notSup;
+exports.insert = notSup;
 exports.isDev = isDev;
 exports.isServer = isServer;
 exports.pipeToNodeWritable = pipeToNodeWritable;
 exports.pipeToWritable = pipeToWritable;
-exports.render = render;
+exports.render = notSup;
 exports.renderToStream = renderToStream;
 exports.renderToString = renderToString;
 exports.renderToStringAsync = renderToStringAsync;
 exports.resolveSSRNode = resolveSSRNode;
-exports.spread = spread;
+exports.runHydrationEvents = notSup;
+exports.setAttribute = notSup;
+exports.setAttributeNS = notSup;
+exports.setProperty = notSup;
+exports.spread = notSup;
 exports.ssr = ssr;
 exports.ssrAttribute = ssrAttribute;
 exports.ssrClassList = ssrClassList;
@@ -706,4 +785,6 @@ exports.ssrElement = ssrElement;
 exports.ssrHydrationKey = ssrHydrationKey;
 exports.ssrSpread = ssrSpread;
 exports.ssrStyle = ssrStyle;
+exports.style = notSup;
+exports.template = notSup;
 exports.useAssets = useAssets;