solid-js 1.8.23 → 1.9.0

package/web/dist/server.js

@@ -9,7 +9,11 @@ export {
   SuspenseList,
   Switch,
   createComponent,
-  mergeProps
+  createRenderEffect as effect,
+  getOwner,
+  createMemo as memo,
+  mergeProps,
+  untrack
 } from "solid-js";
 import { Feature, Serializer, getCrossReferenceHeader } from "seroval";
 import {
@@ -53,6 +57,16 @@ const booleans = [
   "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",
@@ -63,6 +77,423 @@ 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 = Feature.AggregateError | Feature.BigIntTypedArray;
 const GLOBAL_IDENTIFIER = "_$HY.r";
@@ -680,22 +1111,27 @@ function ssrSpread(props, isSVG, skipChildren) {
     ) {
       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] = splitProps(props, ["component"]);
   const comp = p.component,
@@ -712,32 +1148,51 @@ function Portal(props) {
 }
 
 export {
+  Aliases,
   Assets,
+  ChildProperties,
+  DOMElements,
+  DelegatedEvents,
   Dynamic,
   Hydration,
   HydrationScript,
   NoHydration,
   Portal,
+  Properties,
   RequestContext,
-  addEventListener,
-  delegateEvents,
+  SVGElements,
+  SVGNamespace,
+  notSup as addEventListener,
+  notSup as assign,
+  notSup as classList,
+  notSup as className,
+  notSup as delegateEvents,
+  notSup as dynamicProperty,
   escape,
   generateHydrationScript,
   getAssets,
   getHydrationKey,
+  notSup as getNextElement,
+  notSup as getNextMarker,
+  notSup as getNextMatch,
+  getPropAlias,
   getRequestEvent,
-  hydrate,
-  insert,
+  notSup as hydrate,
+  notSup as insert,
   isDev,
   isServer,
   pipeToNodeWritable,
   pipeToWritable,
-  render,
+  notSup as render,
   renderToStream,
   renderToString,
   renderToStringAsync,
   resolveSSRNode,
-  spread,
+  notSup as runHydrationEvents,
+  notSup as setAttribute,
+  notSup as setAttributeNS,
+  notSup as setProperty,
+  notSup as spread,
   ssr,
   ssrAttribute,
   ssrClassList,
@@ -745,5 +1200,7 @@ export {
   ssrHydrationKey,
   ssrSpread,
   ssrStyle,
+  notSup as style,
+  notSup as template,
   useAssets
 };

package/web/dist/web.cjs

@@ -119,14 +119,14 @@ function render(code, element, init, options = {}) {
     element.textContent = "";
   };
 }
-function template(html, isCE, isSVG) {
+function template(html, isImportNode, isSVG) {
   let node;
   const create = () => {
     const t = document.createElement("template");
     t.innerHTML = html;
     return isSVG ? t.content.firstChild.firstChild : t.content.firstChild;
   };
-  const fn = isCE ? () => solidJs.untrack(() => document.importNode(node || (node = create()), true)) : () => (node || (node = create())).cloneNode(true);
+  const fn = isImportNode ? () => solidJs.untrack(() => document.importNode(node || (node = create()), true)) : () => (node || (node = create())).cloneNode(true);
   fn.cloneNode = fn;
   return fn;
 }
@@ -158,6 +158,10 @@ function setAttributeNS(node, namespace, name, value) {
   if (isHydrating(node)) return;
   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");else node.className = value;
@@ -171,7 +175,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 || {}),
@@ -245,7 +249,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) {
@@ -254,7 +258,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 = {}) {
@@ -343,7 +347,7 @@ function toggleClassKey(node, key, value) {
   const classNames = key.trim().split(/\s+/);
   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);
@@ -352,8 +356,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);
@@ -371,7 +375,9 @@ function assignProp(node, prop, value, prev, isSVG, skipRef) {
     }
   } else if (prop.slice(0, 5) === "attr:") {
     setAttribute(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("-"))) {
+  } 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("-") || 'is' in props)) {
     if (forceProp) {
       prop = prop.slice(5);
       isProp = true;
@@ -387,30 +393,52 @@ function eventHandler(e) {
   if (solidJs.sharedConfig.registry && solidJs.sharedConfig.events) {
     if (solidJs.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) {
-    Object.defineProperty(e, "target", {
-      configurable: true,
-      value: node
-    });
-  }
-  Object.defineProperty(e, "currentTarget", {
+  const oriTarget = e.target;
+  const oriCurrentTarget = e.currentTarget;
+  const retarget = value => Object.defineProperty(e, "target", {
     configurable: true,
-    get() {
-      return node || document;
-    }
+    value
   });
-  if (solidJs.sharedConfig.registry && !solidJs.sharedConfig.done) solidJs.sharedConfig.done = _$HY.done = true;
-  while (node) {
+  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 = node._$host || node.parentNode || node.host;
+    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() {
+      return node || document;
+    }
+  });
+  if (solidJs.sharedConfig.registry && !solidJs.sharedConfig.done) solidJs.sharedConfig.done = _$HY.done = true;
+  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;
+      }
+    }
   }
+  else walkUpTree();
+  retarget(oriTarget);
 }
 function insertExpression(parent, value, current, marker, unwrapArray) {
   const hydrating = isHydrating(parent);
@@ -749,6 +777,7 @@ exports.resolveSSRNode = resolveSSRNode;
 exports.runHydrationEvents = runHydrationEvents;
 exports.setAttribute = setAttribute;
 exports.setAttributeNS = setAttributeNS;
+exports.setBoolAttribute = setBoolAttribute;
 exports.setProperty = setProperty;
 exports.spread = spread;
 exports.ssr = ssr;