solid-js 1.9.4 → 1.9.6

package/web/dist/web.cjs

@@ -3,7 +3,7 @@
 var solidJs = require('solid-js');
 
 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 Properties = /*#__PURE__*/new Set(["className", "value", "readOnly", "formNoValidate", "isMap", "noModule", "playsInline", ...booleans]);
+const Properties = /*#__PURE__*/new Set(["className", "value", "readOnly", "noValidate", "formNoValidate", "isMap", "noModule", "playsInline", ...booleans]);
 const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
 const Aliases = /*#__PURE__*/Object.assign(Object.create(null), {
   className: "class",
@@ -11,6 +11,10 @@ const Aliases = /*#__PURE__*/Object.assign(Object.create(null), {
 });
 const PropAliases = /*#__PURE__*/Object.assign(Object.create(null), {
   class: "className",
+  novalidate: {
+    $: "noValidate",
+    FORM: 1
+  },
   formnovalidate: {
     $: "formNoValidate",
     BUTTON: 1,
@@ -50,6 +54,8 @@ const SVGNamespace = {
 };
 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 memo = fn => solidJs.createMemo(() => fn());
+
 function reconcileArrays(parentNode, a, b) {
   let bLength = b.length,
     aEnd = a.length,
@@ -119,12 +125,12 @@ function render(code, element, init, options = {}) {
     element.textContent = "";
   };
 }
-function template(html, isImportNode, isSVG) {
+function template(html, isImportNode, isSVG, isMathML) {
   let node;
   const create = () => {
-    const t = document.createElement("template");
+    const t = isMathML ? document.createElementNS("http://www.w3.org/1998/Math/MathML", "template") : document.createElement("template");
     t.innerHTML = html;
-    return isSVG ? t.content.firstChild.firstChild : t.content.firstChild;
+    return isSVG ? t.content.firstChild.firstChild : isMathML ? t.firstChild : t.content.firstChild;
   };
   const fn = isImportNode ? () => solidJs.untrack(() => document.importNode(node || (node = create()), true)) : () => (node || (node = create())).cloneNode(true);
   fn.cloneNode = fn;
@@ -377,7 +383,7 @@ function assignProp(node, prop, value, prev, isSVG, skipRef, props) {
     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("-") || 'is' in props)) {
+  } 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;
@@ -661,22 +667,25 @@ function Portal(props) {
   });
   return marker;
 }
-function Dynamic(props) {
-  const [p, others] = solidJs.splitProps(props, ["component"]);
-  const cached = solidJs.createMemo(() => p.component);
+function createDynamic(component, props) {
+  const cached = solidJs.createMemo(component);
   return solidJs.createMemo(() => {
     const component = cached();
     switch (typeof component) {
       case "function":
-        return solidJs.untrack(() => component(others));
+        return solidJs.untrack(() => component(props));
       case "string":
         const isSvg = SVGElements.has(component);
         const el = solidJs.sharedConfig.context ? getNextElement() : createElement(component, isSvg);
-        spread(el, others, isSvg);
+        spread(el, props, isSvg);
         return el;
     }
   });
 }
+function Dynamic(props) {
+  const [, others] = solidJs.splitProps(props, ["component"]);
+  return createDynamic(() => props.component, others);
+}
 
 Object.defineProperty(exports, "ErrorBoundary", {
   enumerable: true,
@@ -722,10 +731,6 @@ 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; }
@@ -753,6 +758,7 @@ exports.assign = assign;
 exports.classList = classList;
 exports.className = className;
 exports.clearDelegatedEvents = clearDelegatedEvents;
+exports.createDynamic = createDynamic;
 exports.delegateEvents = delegateEvents;
 exports.dynamicProperty = dynamicProperty;
 exports.escape = escape;
@@ -769,6 +775,7 @@ exports.innerHTML = innerHTML;
 exports.insert = insert;
 exports.isDev = isDev;
 exports.isServer = isServer;
+exports.memo = memo;
 exports.render = render;
 exports.renderToStream = renderToStream;
 exports.renderToString = renderToString;

package/web/dist/web.js

@@ -1,4 +1,5 @@
 import {
+  createMemo,
   createRoot,
   createRenderEffect,
   untrack,
@@ -7,7 +8,6 @@ import {
   getOwner,
   createEffect,
   runWithOwner,
-  createMemo,
   createSignal,
   onCleanup,
   splitProps
@@ -24,7 +24,6 @@ export {
   createComponent,
   createRenderEffect as effect,
   getOwner,
-  createMemo as memo,
   mergeProps,
   untrack
 } from "solid-js";
@@ -60,6 +59,7 @@ const Properties = /*#__PURE__*/ new Set([
   "className",
   "value",
   "readOnly",
+  "noValidate",
   "formNoValidate",
   "isMap",
   "noModule",
@@ -78,6 +78,10 @@ const Aliases = /*#__PURE__*/ Object.assign(Object.create(null), {
 });
 const PropAliases = /*#__PURE__*/ Object.assign(Object.create(null), {
   class: "className",
+  novalidate: {
+    $: "noValidate",
+    FORM: 1
+  },
   formnovalidate: {
     $: "formNoValidate",
     BUTTON: 1,
@@ -494,6 +498,8 @@ const DOMElements = /*#__PURE__*/ new Set([
   "h6"
 ]);
 
+const memo = fn => createMemo(() => fn());
+
 function reconcileArrays(parentNode, a, b) {
   let bLength = b.length,
     aEnd = a.length,
@@ -565,12 +571,14 @@ function render(code, element, init, options = {}) {
     element.textContent = "";
   };
 }
-function template(html, isImportNode, isSVG) {
+function template(html, isImportNode, isSVG, isMathML) {
   let node;
   const create = () => {
-    const t = document.createElement("template");
+    const t = isMathML
+      ? document.createElementNS("http://www.w3.org/1998/Math/MathML", "template")
+      : document.createElement("template");
     t.innerHTML = html;
-    return isSVG ? t.content.firstChild.firstChild : t.content.firstChild;
+    return isSVG ? t.content.firstChild.firstChild : isMathML ? t.firstChild : t.content.firstChild;
   };
   const fn = isImportNode
     ? () => untrack(() => document.importNode(node || (node = create()), true))
@@ -1142,22 +1150,25 @@ function Portal(props) {
   );
   return marker;
 }
-function Dynamic(props) {
-  const [p, others] = splitProps(props, ["component"]);
-  const cached = createMemo(() => p.component);
+function createDynamic(component, props) {
+  const cached = createMemo(component);
   return createMemo(() => {
     const component = cached();
     switch (typeof component) {
       case "function":
-        return untrack(() => component(others));
+        return untrack(() => component(props));
       case "string":
         const isSvg = SVGElements.has(component);
         const el = sharedConfig.context ? getNextElement() : createElement(component, isSvg);
-        spread(el, others, isSvg);
+        spread(el, props, isSvg);
         return el;
     }
   });
 }
+function Dynamic(props) {
+  const [, others] = splitProps(props, ["component"]);
+  return createDynamic(() => props.component, others);
+}
 
 export {
   Aliases,
@@ -1179,6 +1190,7 @@ export {
   classList,
   className,
   clearDelegatedEvents,
+  createDynamic,
   delegateEvents,
   dynamicProperty,
   escape,
@@ -1195,6 +1207,7 @@ export {
   insert,
   isDev,
   isServer,
+  memo,
   render,
   renderToStream,
   renderToString,

package/web/types/core.d.ts

@@ -3,8 +3,8 @@ export {
   createComponent,
   createRoot as root,
   createRenderEffect as effect,
-  createMemo as memo,
   sharedConfig,
   untrack,
   mergeProps
 } from "solid-js";
+export declare const memo: (fn: any) => import("solid-js").Accessor<any>;

package/web/types/index.d.ts

@@ -44,6 +44,22 @@ export type DynamicProps<T extends ValidComponent, P = ComponentProps<T>> = {
 } & {
   component: T | undefined;
 };
+/**
+ * Renders an arbitrary component or element with the given props
+ *
+ * This is a lower level version of the `Dynamic` component, useful for
+ * performance optimizations in libraries. Do not use this unless you know
+ * what you are doing.
+ * ```typescript
+ * const element = () => multiline() ? 'textarea' : 'input';
+ * createDynamic(element, { value: value() });
+ * ```
+ * @description https://docs.solidjs.com/reference/components/dynamic
+ */
+export declare function createDynamic<T extends ValidComponent>(
+  component: () => T | undefined,
+  props: ComponentProps<T>
+): JSX.Element;
 /**
  * Renders an arbitrary custom or native component and passes the other props
  * ```typescript