solid-js - npm Package Compare versions

Comparing version 1.8.23 to 1.9.0

h/jsx-runtime/types/index.d.ts

@@ -1,3 +0,3 @@
-export type { JSX } from "./jsx";
-import type { JSX } from "./jsx";
+export type { JSX } from "./jsx.d.ts";
+import type { JSX } from "./jsx.d.ts";
 declare function Fragment(props: { children: JSX.Element }): JSX.Element;
@@ -4,0 +4,0 @@ declare function jsx(

h/types/index.d.ts

@@ -1,3 +0,3 @@
-import type { HyperScript } from "./hyperscript";
+import type { HyperScript } from "./hyperscript.js";
 declare const h: HyperScript;
 export default h;

html/dist/html.js

@@ -411,2 +411,3 @@ import {
     options.hasCustomElement = options.hasCustomElement || childOptions.hasCustomElement;
+    options.isImportNode = options.isImportNode || childOptions.isImportNode;
   }
@@ -547,4 +548,7 @@ function processComponentProps(propGroups) {
       const isSVG = r.SVGElements.has(node.name);
-      const isCE = node.name.includes("-");
+      const isCE = node.name.includes("-") || node.attrs.some(e => e.name === "is");
       options.hasCustomElement = isCE;
+      options.isImportNode =
+        (node.name === "img" || node.name === "iframe") &&
+        node.attrs.some(e => e.name === "loading" && e.value === "lazy");
       if (node.attrs.some(e => e.name === "###")) {
@@ -606,5 +610,6 @@ const spreadArgs = [];
       if (topDecl) {
-        options.decl[0] = options.hasCustomElement
-          ? `const ${tag} = r.untrack(() => document.importNode(tmpls[${templateId}].content.firstChild, true))`
-          : `const ${tag} = tmpls[${templateId}].content.firstChild.cloneNode(true)`;
+        options.decl[0] =
+          options.hasCustomElement || options.isImportNode
+            ? `const ${tag} = r.untrack(() => document.importNode(tmpls[${templateId}].content.firstChild, true))`
+            : `const ${tag} = tmpls[${templateId}].content.firstChild.cloneNode(true)`;
       }
@@ -611,0 +616,0 @@ } else if (node.type === "text") {

html/types/index.d.ts

@@ -1,3 +0,3 @@
-import type { HTMLTag } from "./lit";
+import type { HTMLTag } from "./lit.js";
 declare const html: HTMLTag;
 export default html;

html/types/lit.d.ts

@@ -8,3 +8,8 @@ type MountableElement = Element | Document | ShadowRoot | DocumentFragment | Node;
   createComponent(Comp: (props: any) => any, props: any): any;
-  addEventListener(node: Element, name: string, handler: () => void, delegate: boolean): void;
+  addEventListener(
+    node: Element,
+    name: string,
+    handler: EventListener | EventListenerObject | (EventListenerObject & AddEventListenerOptions),
+    delegate: boolean
+  ): void;
   delegateEvents(eventNames: string[]): void;
@@ -11,0 +16,0 @@ classList(

package.json

 {
   "name": "solid-js",
   "description": "A declarative JavaScript library for building user interfaces.",
-  "version": "1.8.23",
+  "version": "1.9.0",
   "author": "Ryan Carniato",
@@ -14,6 +14,2 @@ "license": "MIT",
   "module": "./dist/server.js",
-  "browser": {
-    "./dist/server.cjs": "./dist/solid.cjs",
-    "./dist/server.js": "./dist/solid.js"
-  },
   "unpkg": "./dist/solid.cjs",
@@ -20,0 +16,0 @@ "types": "types/index.d.ts",

store/dist/server.js

@@ -88,2 +88,5 @@ const $RAW = Symbol("state-raw");
 }
+function modifyMutable(state, modifier) {
+  modifier(state);
+}
 function reconcile(value, options = {}) {
@@ -118,2 +121,3 @@ return state => {
   isWrappable,
+  modifyMutable,
   produce,
@@ -120,0 +124,0 @@ reconcile,

store/package.json

@@ -5,6 +5,2 @@ {
   "module": "./dist/server.js",
-  "browser": {
-    "./dist/server.cjs": "./dist/store.cjs",
-    "./dist/server.js": "./dist/store.js"
-  },
   "unpkg": "./dist/store.cjs",
@@ -11,0 +7,0 @@ "types": "./types/index.d.ts",

store/types/server.d.ts

 import type { SetStoreFunction, Store } from "./store.js";
+export type {
+  ArrayFilterFn,
+  DeepMutable,
+  DeepReadonly,
+  NotWrappable,
+  Part,
+  SetStoreFunction,
+  SolidStore,
+  Store,
+  StoreNode,
+  StorePathRange,
+  StoreSetter
+} from "./store.js";
 export declare const $RAW: unique symbol;
@@ -14,2 +27,3 @@ export declare function isWrappable(obj: any): boolean;
 export declare function createMutable<T>(state: T | Store<T>): T;
+export declare function modifyMutable<T>(state: T, modifier: (state: T) => T): void;
 type ReconcileOptions = {
@@ -25,2 +39,1 @@ key?: string | null;
 export declare const DEV: undefined;
-export {};

store/types/store.d.ts

@@ -12,3 +12,3 @@ export declare const $RAW: unique symbol,
 };
-type DataNodes = Record<PropertyKey, DataNode | undefined>;
+export type DataNodes = Record<PropertyKey, DataNode | undefined>;
 export type OnStoreNodeUpdate = (
@@ -15,0 +15,0 @@ state: StoreNode,

types/reactive/signal.d.ts

@@ -105,8 +105,8 @@ /**
 export type Setter<in out T> = {
+  <U extends T>(value: Exclude<U, Function> | ((prev: T) => U)): U;
   <U extends T>(...args: undefined extends T ? [] : [value: (prev: T) => U]): undefined extends T
     ? undefined
     : U;
+  <U extends T>(value: Exclude<U, Function>): U;
   <U extends T>(value: (prev: T) => U): U;
-  <U extends T>(value: Exclude<U, Function>): U;
-  <U extends T>(value: Exclude<U, Function> | ((prev: T) => U)): U;
 };
@@ -113,0 +113,0 @@ export type Signal<T> = [get: Accessor<T>, set: Setter<T>];

web/dist/dev.js

@@ -574,3 +574,3 @@ import {
 }
-function template(html, isCE, isSVG) {
+function template(html, isImportNode, isSVG) {
   let node;
@@ -586,3 +586,3 @@ const create = () => {
   };
-  const fn = isCE
+  const fn = isImportNode
     ? () => untrack(() => document.importNode(node || (node = create()), true))
@@ -623,2 +623,6 @@ : () => (node || (node = create())).cloneNode(true);
 }
+function setBoolAttribute(node, name, value) {
+  if (isHydrating(node)) return;
+  value ? node.setAttribute(name, "") : node.removeAttribute(name);
+}
 function className(node, value) {
@@ -638,3 +642,3 @@ if (isHydrating(node)) return;
     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);
 }
@@ -715,3 +719,3 @@ function classList(node, value, prev = {}) {
       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);
     }
@@ -725,3 +729,3 @@ }
     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);
   }
@@ -753,4 +757,10 @@ }
   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();
@@ -817,3 +827,3 @@ }
 }
-function assignProp(node, prop, value, prev, isSVG, skipRef) {
+function assignProp(node, prop, value, prev, isSVG, skipRef, props) {
   let isCE, isProp, isChildProp, propAlias, forceProp;
@@ -827,4 +837,4 @@ if (prop === "style") return style(node, value, prev);
     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:") {
@@ -847,2 +857,4 @@ const e = prop.slice(10);
     setAttribute(node, prop.slice(5), value);
+  } else if (prop.slice(0, 5) === "bool:") {
+    setBoolAttribute(node, prop.slice(5), value);
   } else if (
@@ -853,3 +865,3 @@ (forceProp = prop.slice(0, 5) === "prop:") ||
       ((propAlias = getPropAlias(prop, node.tagName)) || (isProp = Properties.has(prop)))) ||
-    (isCE = node.nodeName.includes("-"))
+    (isCE = node.nodeName.includes("-") || "is" in props)
   ) {
@@ -874,10 +886,24 @@ if (forceProp) {
   }
+  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", {
@@ -890,11 +916,19 @@ configurable: true,
   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);
 }
@@ -1202,2 +1236,3 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
   setAttributeNS,
+  setBoolAttribute,
   setProperty,
@@ -1204,0 +1239,0 @@ spread,

web/dist/server.js

@@ -12,3 +12,7 @@ import { sharedConfig, createRoot, splitProps } from "solid-js";
   createComponent,
-  mergeProps
+  createRenderEffect as effect,
+  getOwner,
+  createMemo as memo,
+  mergeProps,
+  untrack
 } from "solid-js";
@@ -57,2 +61,12 @@ import { Feature, Serializer, getCrossReferenceHeader } from "seroval";
 const BooleanAttributes = /*#__PURE__*/ new Set(booleans);
+const Properties = /*#__PURE__*/ new Set([
+  "className",
+  "value",
+  "readOnly",
+  "formNoValidate",
+  "isMap",
+  "noModule",
+  "playsInline",
+  ...booleans
+]);
 const ChildProperties = /*#__PURE__*/ new Set([
@@ -68,2 +82,419 @@ "innerHTML",
 });
+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"
+]);
 
@@ -686,4 +1117,10 @@ const ES2017FLAG = Feature.AggregateError | Feature.BigIntTypedArray;
     } 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)}"`;
+      }
     }
@@ -694,11 +1131,10 @@ if (i !== keys.length - 1) 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) {
@@ -720,3 +1156,7 @@ const [p, others] = splitProps(props, ["component"]);
 export {
+  Aliases,
   Assets,
+  ChildProperties,
+  DOMElements,
+  DelegatedEvents,
   Dynamic,
@@ -727,5 +1167,12 @@ Hydration,
   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,
@@ -735,5 +1182,9 @@ generateHydrationScript,
   getHydrationKey,
+  notSup as getNextElement,
+  notSup as getNextMarker,
+  notSup as getNextMatch,
+  getPropAlias,
   getRequestEvent,
-  hydrate,
-  insert,
+  notSup as hydrate,
+  notSup as insert,
   isDev,
@@ -743,3 +1194,3 @@ isServer,
   pipeToWritable,
-  render,
+  notSup as render,
   renderToStream,
@@ -749,3 +1200,7 @@ renderToString,
   resolveSSRNode,
-  spread,
+  notSup as runHydrationEvents,
+  notSup as setAttribute,
+  notSup as setAttributeNS,
+  notSup as setProperty,
+  notSup as spread,
   ssr,
@@ -758,3 +1213,5 @@ ssrAttribute,
   ssrStyle,
+  notSup as style,
+  notSup as template,
   useAssets
 };

web/dist/web.js

@@ -568,3 +568,3 @@ import {
 }
-function template(html, isCE, isSVG) {
+function template(html, isImportNode, isSVG) {
   let node;
@@ -576,3 +576,3 @@ const create = () => {
   };
-  const fn = isCE
+  const fn = isImportNode
     ? () => untrack(() => document.importNode(node || (node = create()), true))
@@ -613,2 +613,6 @@ : () => (node || (node = create())).cloneNode(true);
 }
+function setBoolAttribute(node, name, value) {
+  if (isHydrating(node)) return;
+  value ? node.setAttribute(name, "") : node.removeAttribute(name);
+}
 function className(node, value) {
@@ -628,3 +632,3 @@ if (isHydrating(node)) return;
     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);
 }
@@ -705,3 +709,3 @@ function classList(node, value, prev = {}) {
       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);
     }
@@ -715,3 +719,3 @@ }
     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);
   }
@@ -804,3 +808,3 @@ }
 }
-function assignProp(node, prop, value, prev, isSVG, skipRef) {
+function assignProp(node, prop, value, prev, isSVG, skipRef, props) {
   let isCE, isProp, isChildProp, propAlias, forceProp;
@@ -814,4 +818,4 @@ if (prop === "style") return style(node, value, prev);
     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:") {
@@ -834,2 +838,4 @@ const e = prop.slice(10);
     setAttribute(node, prop.slice(5), value);
+  } else if (prop.slice(0, 5) === "bool:") {
+    setBoolAttribute(node, prop.slice(5), value);
   } else if (
@@ -840,3 +846,3 @@ (forceProp = prop.slice(0, 5) === "prop:") ||
       ((propAlias = getPropAlias(prop, node.tagName)) || (isProp = Properties.has(prop)))) ||
-    (isCE = node.nodeName.includes("-"))
+    (isCE = node.nodeName.includes("-") || "is" in props)
   ) {
@@ -861,10 +867,24 @@ if (forceProp) {
   }
+  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", {
@@ -877,11 +897,19 @@ configurable: true,
   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);
 }
@@ -1186,2 +1214,3 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
   setAttributeNS,
+  setBoolAttribute,
   setProperty,
@@ -1188,0 +1217,0 @@ spread,

web/package.json

@@ -5,6 +5,2 @@ {
   "module": "./dist/server.js",
-  "browser": {
-    "./dist/server.cjs": "./dist/web.cjs",
-    "./dist/server.js": "./dist/web.js"
-  },
   "unpkg": "./dist/web.cjs",
@@ -11,0 +7,0 @@ "types": "./types/index.d.ts",

web/types/client.d.ts

@@ -35,2 +35,3 @@ import { JSX } from "./jsx.js";
 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;
@@ -41,3 +42,3 @@ export function setProperty(node: Element, name: string, value: any): void;
   name: string,
-  handler: () => void,
+  handler: EventListener | EventListenerObject | (EventListenerObject & AddEventListenerOptions),
   delegate: boolean
@@ -80,1 +81,2 @@ ): void;
 export function getRequestEvent(): RequestEvent | undefined;
+export function runHydrationEvents(): void;

web/types/server.d.ts

@@ -0,1 +1,13 @@
+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>(
@@ -90,1 +102,77 @@ fn: () => T,
 ): 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>];

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

872818

increased by2.57%

Lines of code

26532

increased by3.19%

No dependency changes