solid-js 1.8.23 → 1.9.0

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

@@ -1,5 +1,5 @@
-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;
 declare function jsx(
   type: any,

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

@@ -40,6 +40,7 @@ export namespace JSX {
       }
     ): void;
   }
+
   interface BoundEventHandler<T, E extends Event> {
     0: (
       data: any,
@@ -52,6 +53,19 @@ export namespace JSX {
   }
   type EventHandlerUnion<T, E extends Event> = EventHandler<T, E> | BoundEventHandler<T, E>;
 
+  interface EventHandlerWithOptions<T, E extends Event> extends AddEventListenerOptions {
+    handleEvent: (
+      e: E & {
+        currentTarget: T;
+        target: Element;
+      }
+    ) => void;
+  }
+
+  type CustomEventHandlerUnion<T, E extends Event> =
+    | EventHandler<T, E>
+    | EventHandlerWithOptions<T, E>;
+
   const SERIALIZABLE: unique symbol;
   interface SerializableAttributeValue {
     toString(): string;
@@ -75,7 +89,11 @@ export namespace JSX {
   }
   interface ExplicitProperties {}
   interface ExplicitAttributes {}
+  interface ExplicitBoolAttributes {}
   interface CustomEvents {}
+  /**
+   * @deprecated Replaced by CustomEvents
+   */
   interface CustomCaptureEvents {}
   type DirectiveAttributes = {
     [Key in keyof Directives as `use:${Key}`]?: Directives[Key];
@@ -102,8 +120,11 @@ export namespace JSX {
   type AttrAttributes = {
     [Key in keyof ExplicitAttributes as `attr:${Key}`]?: ExplicitAttributes[Key];
   };
+  type BoolAttributes = {
+    [Key in keyof ExplicitBoolAttributes as `bool:${Key}`]?: ExplicitBoolAttributes[Key];
+  };
   type OnAttributes<T> = {
-    [Key in keyof CustomEvents as `on:${Key}`]?: EventHandler<T, CustomEvents[Key]>;
+    [Key in keyof CustomEvents as `on:${Key}`]?: CustomEventHandlerUnion<T, CustomEvents[Key]>;
   };
   type OnCaptureAttributes<T> = {
     [Key in keyof CustomCaptureEvents as `oncapture:${Key}`]?: EventHandler<

package/h/types/index.d.ts

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

package/html/dist/html.cjs

@@ -330,6 +330,7 @@ function createHTML(r, {
     options.counter = childOptions.counter;
     options.templateId = childOptions.templateId;
     options.hasCustomElement = options.hasCustomElement || childOptions.hasCustomElement;
+    options.isImportNode = options.isImportNode || childOptions.isImportNode;
   }
   function processComponentProps(propGroups) {
     let result = [];
@@ -440,8 +441,9 @@ function createHTML(r, {
       const templateId = options.templateId;
       options.decl.push(topDecl ? "" : `${tag} = ${options.path}.${options.first ? "firstChild" : "nextSibling"}`);
       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 === "###")) {
         const spreadArgs = [];
         let current = "";
@@ -498,7 +500,7 @@ function createHTML(r, {
       options.first = false;
       processChildren(node, options);
       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)`;
       }
     } else if (node.type === "text") {
       const tag = `_$el${uuid++}`;

package/html/dist/html.js

@@ -408,6 +408,7 @@ function createHTML(
     options.counter = childOptions.counter;
     options.templateId = childOptions.templateId;
     options.hasCustomElement = options.hasCustomElement || childOptions.hasCustomElement;
+    options.isImportNode = options.isImportNode || childOptions.isImportNode;
   }
   function processComponentProps(propGroups) {
     let result = [];
@@ -543,8 +544,11 @@ function createHTML(
         topDecl ? "" : `${tag} = ${options.path}.${options.first ? "firstChild" : "nextSibling"}`
       );
       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 === "###")) {
         const spreadArgs = [];
         let current = "";
@@ -601,9 +605,10 @@ function createHTML(
       options.first = false;
       processChildren(node, options);
       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)`;
       }
     } else if (node.type === "text") {
       const tag = `_$el${uuid++}`;

package/html/types/index.d.ts

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

package/html/types/lit.d.ts

@@ -5,7 +5,12 @@ interface Runtime {
   insert(parent: MountableElement, accessor: any, marker?: Node | null, init?: any): any;
   spread<T>(node: Element, accessor: (() => T) | T, isSVG?: Boolean, skipChildren?: Boolean): void;
   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;
   classList(
     node: Element,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "solid-js",
   "description": "A declarative JavaScript library for building user interfaces.",
-  "version": "1.8.23",
+  "version": "1.9.0",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",
@@ -11,10 +11,6 @@
   },
   "main": "./dist/server.cjs",
   "module": "./dist/server.js",
-  "browser": {
-    "./dist/server.cjs": "./dist/solid.cjs",
-    "./dist/server.js": "./dist/solid.js"
-  },
   "unpkg": "./dist/solid.cjs",
   "types": "types/index.d.ts",
   "sideEffects": false,

package/store/dist/server.cjs

@@ -87,6 +87,9 @@ function createStore(state) {
 function createMutable(state) {
   return state;
 }
+function modifyMutable(state, modifier) {
+  modifier(state);
+}
 function reconcile(value, options = {}) {
   return state => {
     if (!isWrappable(state) || !isWrappable(value)) return value;
@@ -115,6 +118,7 @@ exports.DEV = DEV;
 exports.createMutable = createMutable;
 exports.createStore = createStore;
 exports.isWrappable = isWrappable;
+exports.modifyMutable = modifyMutable;
 exports.produce = produce;
 exports.reconcile = reconcile;
 exports.setProperty = setProperty;

package/store/dist/server.js

@@ -85,6 +85,9 @@ function createStore(state) {
 function createMutable(state) {
   return state;
 }
+function modifyMutable(state, modifier) {
+  modifier(state);
+}
 function reconcile(value, options = {}) {
   return state => {
     if (!isWrappable(state) || !isWrappable(value)) return value;
@@ -114,6 +117,7 @@ export {
   createMutable,
   createStore,
   isWrappable,
+  modifyMutable,
   produce,
   reconcile,
   setProperty,

package/store/package.json

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

package/store/types/server.d.ts

@@ -1,4 +1,17 @@
 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;
 export declare function isWrappable(obj: any): boolean;
 export declare function unwrap<T>(item: T): T;
@@ -11,6 +24,7 @@ export declare function setProperty(
 export declare function updatePath(current: any, path: any[], traversed?: PropertyKey[]): void;
 export declare function createStore<T>(state: T | Store<T>): [Store<T>, SetStoreFunction<T>];
 export declare function createMutable<T>(state: T | Store<T>): T;
+export declare function modifyMutable<T>(state: T, modifier: (state: T) => T): void;
 type ReconcileOptions = {
   key?: string | null;
   merge?: boolean;
@@ -21,4 +35,3 @@ export declare function reconcile<T extends U, U extends object>(
 ): (state: U) => T;
 export declare function produce<T>(fn: (state: T) => void): (state: T) => T;
 export declare const DEV: undefined;
-export {};

package/store/types/store.d.ts

@@ -9,7 +9,7 @@ type DataNode = {
   (): any;
   $(value?: any): void;
 };
-type DataNodes = Record<PropertyKey, DataNode | undefined>;
+export type DataNodes = Record<PropertyKey, DataNode | undefined>;
 export type OnStoreNodeUpdate = (
   state: StoreNode,
   property: PropertyKey,

package/types/jsx.d.ts

@@ -28,6 +28,7 @@ export namespace JSX {
       }
     ): void;
   }
+
   interface BoundEventHandler<T, E extends Event> {
     0: (
       data: any,
@@ -40,6 +41,19 @@ export namespace JSX {
   }
   type EventHandlerUnion<T, E extends Event> = EventHandler<T, E> | BoundEventHandler<T, E>;
 
+  interface EventHandlerWithOptions<T, E extends Event> extends AddEventListenerOptions {
+    handleEvent: (
+      e: E & {
+        currentTarget: T;
+        target: Element;
+      }
+    ) => void;
+  }
+
+  type CustomEventHandlerUnion<T, E extends Event> =
+    | EventHandler<T, E>
+    | EventHandlerWithOptions<T, E>;
+
   interface InputEventHandler<T, E extends InputEvent> {
     (
       e: E & {
@@ -141,7 +155,11 @@ export namespace JSX {
   }
   interface ExplicitProperties {}
   interface ExplicitAttributes {}
+  interface ExplicitBoolAttributes {}
   interface CustomEvents {}
+  /**
+   * @deprecated Replaced by CustomEvents
+   */
   interface CustomCaptureEvents {}
   type DirectiveAttributes = {
     [Key in keyof Directives as `use:${Key}`]?: Directives[Key];
@@ -168,8 +186,11 @@ export namespace JSX {
   type AttrAttributes = {
     [Key in keyof ExplicitAttributes as `attr:${Key}`]?: ExplicitAttributes[Key];
   };
+  type BoolAttributes = {
+    [Key in keyof ExplicitBoolAttributes as `bool:${Key}`]?: ExplicitBoolAttributes[Key];
+  };
   type OnAttributes<T> = {
-    [Key in keyof CustomEvents as `on:${Key}`]?: EventHandler<T, CustomEvents[Key]>;
+    [Key in keyof CustomEvents as `on:${Key}`]?: CustomEventHandlerUnion<T, CustomEvents[Key]>;
   };
   type OnCaptureAttributes<T> = {
     [Key in keyof CustomCaptureEvents as `oncapture:${Key}`]?: EventHandler<

package/types/reactive/signal.d.ts

@@ -102,12 +102,12 @@ export type RootFunction<T> = (dispose: () => void) => T;
 export declare function createRoot<T>(fn: RootFunction<T>, detachedOwner?: typeof Owner): T;
 export type Accessor<T> = () => T;
 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: (prev: T) => U): U;
   <U extends T>(value: Exclude<U, Function>): U;
-  <U extends T>(value: Exclude<U, Function> | ((prev: T) => U)): U;
+  <U extends T>(value: (prev: T) => U): U;
 };
 export type Signal<T> = [get: Accessor<T>, set: Setter<T>];
 export interface SignalOptions<T> extends MemoOptions<T> {

package/web/dist/dev.cjs

@@ -122,7 +122,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()) throw new Error("Failed attempt to create new DOM elements during hydration. Check that the libraries you are using support hydration.");
@@ -130,7 +130,7 @@ function template(html, isCE, isSVG) {
     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;
 }
@@ -162,6 +162,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;
@@ -175,7 +179,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 || {}),
@@ -249,7 +253,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) {
@@ -258,7 +262,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 = {}) {
@@ -285,7 +289,10 @@ function getNextElement(template) {
     key,
     hydrating = isHydrating();
   if (!hydrating || !(node = solidJs.sharedConfig.registry.get(key = getHydrationKey()))) {
-    if (hydrating) throw new Error(`Hydration Mismatch. Unable to find DOM nodes for hydration key: ${key}`);
+    if (hydrating) {
+      solidJs.sharedConfig.done = true;
+      throw new Error(`Hydration Mismatch. Unable to find DOM nodes for hydration key: ${key}\n${template ? template().outerHTML : ""}`);
+    }
     return template();
   }
   if (solidJs.sharedConfig.completed) solidJs.sharedConfig.completed.add(node);
@@ -348,7 +355,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);
@@ -357,8 +364,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);
@@ -376,7 +383,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;
@@ -392,30 +401,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);
@@ -757,6 +788,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;