solid-js 1.8.23 → 1.9.0

package/web/dist/web.js

@@ -565,14 +565,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
+  const fn = isImportNode
     ? () => untrack(() => document.importNode(node || (node = create()), true))
     : () => (node || (node = create())).cloneNode(true);
   fn.cloneNode = fn;
@@ -608,6 +608,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");
@@ -622,7 +626,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 || {}),
@@ -698,7 +702,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) {
@@ -707,7 +711,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 = {}) {
@@ -795,7 +799,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);
@@ -804,8 +808,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);
@@ -823,12 +827,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);
@@ -848,14 +854,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() {
@@ -863,15 +883,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);
@@ -1171,6 +1199,7 @@ export {
   runHydrationEvents,
   setAttribute,
   setAttributeNS,
+  setBoolAttribute,
   setProperty,
   spread,
   ssr,

package/web/package.json

@@ -2,10 +2,6 @@
   "name": "solid-js/web",
   "main": "./dist/server.cjs",
   "module": "./dist/server.js",
-  "browser": {
-    "./dist/server.cjs": "./dist/web.cjs",
-    "./dist/server.js": "./dist/web.js"
-  },
   "unpkg": "./dist/web.cjs",
   "types": "./types/index.d.ts",
   "type": "module",

package/web/types/client.d.ts

@@ -32,12 +32,13 @@ 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 setBoolAttribute(node: Element, name: string, value: any): void;
 export function className(node: Element, value: string): void;
 export function setProperty(node: Element, name: string, value: any): void;
 export function addEventListener(
   node: Element,
   name: string,
-  handler: () => void,
+  handler: EventListener | EventListenerObject | (EventListenerObject & AddEventListenerOptions),
   delegate: boolean
 ): void;
 export function classList(
@@ -75,3 +76,4 @@ export interface RequestEvent {
 }
 export declare const RequestContext: unique symbol;
 export function getRequestEvent(): RequestEvent | undefined;
+export function runHydrationEvents(): void;

package/web/types/server.d.ts

@@ -1,3 +1,15 @@
+import { JSX } from "./jsx.js";
+export const Aliases: Record<string, string>;
+export const Properties: Set<string>;
+export const ChildProperties: Set<string>;
+export const DelegatedEvents: Set<string>;
+export const DOMElements: Set<string>;
+export const SVGElements: Set<string>;
+export const SVGNamespace: Record<string, string>;
+export function getPropAlias(prop: string, tagName: string): string | undefined;
+
+type MountableElement = Element | Document | ShadowRoot | DocumentFragment | Node;
+
 export function renderToString<T>(
   fn: () => T,
   options?: {
@@ -87,3 +99,79 @@ export function pipeToNodeWritable<T>(
     onCompleteAll?: () => void;
   }
 ): void;
+
+export function untrack<T>(fn: () => T): T;
+
+// client-only APIs
+
+/** @deprecated not supported on the server side */
+export function classList(
+  node: Element,
+  value: { [k: string]: boolean },
+  prev?: { [k: string]: boolean }
+): { [k: string]: boolean };
+
+/** @deprecated not supported on the server side */
+export function style(
+  node: Element,
+  value: { [k: string]: string },
+  prev?: { [k: string]: string }
+): void;
+
+/** @deprecated not supported on the server side */
+export function insert<T>(
+  parent: MountableElement,
+  accessor: (() => T) | T,
+  marker?: Node | null,
+  init?: JSX.Element
+): JSX.Element;
+
+/** @deprecated not supported on the server side */
+export function spread<T>(
+  node: Element,
+  accessor: (() => T) | T,
+  isSVG?: Boolean,
+  skipChildren?: Boolean
+): void;
+
+/** @deprecated not supported on the server side */
+export function delegateEvents(eventNames: string[], d?: Document): void;
+/** @deprecated not supported on the server side */
+export function dynamicProperty(props: unknown, key: string): unknown;
+/** @deprecated not supported on the server side */
+export function setAttribute(node: Element, name: string, value: string): void;
+/** @deprecated not supported on the server side */
+export function setAttributeNS(node: Element, namespace: string, name: string, value: string): void;
+
+/** @deprecated not supported on the server side */
+export function addEventListener(
+  node: Element,
+  name: string,
+  handler: () => void,
+  delegate: boolean
+): void;
+
+/** @deprecated not supported on the server side */
+export function render(code: () => JSX.Element, element: MountableElement): () => void;
+/** @deprecated not supported on the server side */
+export function template(html: string, isCE?: boolean, isSVG?: boolean): () => Element;
+/** @deprecated not supported on the server side */
+export function setProperty(node: Element, name: string, value: any): void;
+/** @deprecated not supported on the server side */
+export function className(node: Element, value: string): void;
+/** @deprecated not supported on the server side */
+export function assign(node: Element, props: any, isSVG?: Boolean, skipChildren?: Boolean): void;
+
+/** @deprecated not supported on the server side */
+export function hydrate(
+  fn: () => JSX.Element,
+  node: MountableElement,
+  options?: { renderId?: string; owner?: unknown }
+): () => void;
+
+/** @deprecated not supported on the server side */
+export function getNextElement(template?: HTMLTemplateElement): Element;
+/** @deprecated not supported on the server side */
+export function getNextMatch(start: Node, elementName: string): Element;
+/** @deprecated not supported on the server side */
+export function getNextMarker(start: Node): [Node, Array<Node>];