@solidjs/web 2.0.0-experimental.0 → 2.0.0-experimental.2

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2016-2023 Ryan Carniato
+Copyright (c) 2016-2025 Ryan Carniato
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/dist/dev.cjs

@@ -609,9 +609,8 @@ function createElementProxy(el, marker) {
     }
   });
 }
-function Dynamic(props) {
-  const others = solidJs.omit(props, "component");
-  const cached = solidJs.createMemo(() => props.component);
+function createDynamic(component, props) {
+  const cached = solidJs.createMemo(component);
   return solidJs.createMemo(() => {
     const component = cached();
     switch (typeof component) {
@@ -619,15 +618,19 @@ function Dynamic(props) {
         Object.assign(component, {
           [solidJs.$DEVCOMP]: true
         });
-        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.omit(props, "component");
+  return createDynamic(() => props.component, others);
+}
 
 Object.defineProperty(exports, "ErrorBoundary", {
   enumerable: true,
@@ -694,6 +697,7 @@ exports.addEventListener = addEventListener;
 exports.assign = assign;
 exports.className = className;
 exports.clearDelegatedEvents = clearDelegatedEvents;
+exports.createDynamic = createDynamic;
 exports.delegateEvents = delegateEvents;
 exports.dynamicProperty = dynamicProperty;
 exports.escape = escape;

package/dist/dev.js

@@ -6,8 +6,8 @@ import {
   flatten,
   enableHydration,
   createMemo,
-  omit,
-  $DEVCOMP
+  $DEVCOMP,
+  omit
 } from "solid-js";
 export {
   ErrorBoundary,
@@ -1098,9 +1098,8 @@ function createElementProxy(el, marker) {
     }
   });
 }
-function Dynamic(props) {
-  const others = omit(props, "component");
-  const cached = createMemo(() => props.component);
+function createDynamic(component, props) {
+  const cached = createMemo(component);
   return createMemo(() => {
     const component = cached();
     switch (typeof component) {
@@ -1108,15 +1107,19 @@ function Dynamic(props) {
         Object.assign(component, {
           [$DEVCOMP]: true
         });
-        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 = omit(props, "component");
+  return createDynamic(() => props.component, others);
+}
 
 export {
   voidFn as Assets,
@@ -1136,6 +1139,7 @@ export {
   assign,
   className,
   clearDelegatedEvents,
+  createDynamic,
   delegateEvents,
   dynamicProperty,
   escape,

package/dist/server.cjs

@@ -592,16 +592,19 @@ function notSup() {
 
 const isServer = true;
 const isDev = false;
-function Dynamic(props) {
-  const [p, others] = solidJs.splitProps(props, ["component"]);
-  const comp = p.component,
+function createDynamic(component, props) {
+  const comp = component(),
     t = typeof comp;
   if (comp) {
-    if (t === "function") return comp(others);else if (t === "string") {
-      return ssrElement(comp, others, undefined, true);
+    if (t === "function") return comp(props);else if (t === "string") {
+      return ssrElement(comp, props, undefined, true);
     }
   }
 }
+function Dynamic(props) {
+  const [, others] = solidJs.splitProps(props, ["component"]);
+  return createDynamic(() => props.component, others);
+}
 function Portal(props) {
   return "";
 }
@@ -678,6 +681,7 @@ exports.SVGNamespace = SVGNamespace;
 exports.addEventListener = notSup;
 exports.assign = notSup;
 exports.className = notSup;
+exports.createDynamic = createDynamic;
 exports.delegateEvents = notSup;
 exports.dynamicProperty = notSup;
 exports.escape = escape;

package/dist/server.js

@@ -1058,17 +1058,20 @@ function notSup() {
 
 const isServer = true;
 const isDev = false;
-function Dynamic(props) {
-  const [p, others] = splitProps(props, ["component"]);
-  const comp = p.component,
+function createDynamic(component, props) {
+  const comp = component(),
     t = typeof comp;
   if (comp) {
-    if (t === "function") return comp(others);
+    if (t === "function") return comp(props);
     else if (t === "string") {
-      return ssrElement(comp, others, undefined, true);
+      return ssrElement(comp, props, undefined, true);
     }
   }
 }
+function Dynamic(props) {
+  const [, others] = splitProps(props, ["component"]);
+  return createDynamic(() => props.component, others);
+}
 function Portal(props) {
   return "";
 }
@@ -1090,6 +1093,7 @@ export {
   notSup as addEventListener,
   notSup as assign,
   notSup as className,
+  createDynamic,
   notSup as delegateEvents,
   notSup as dynamicProperty,
   escape,

package/dist/web.cjs

@@ -601,22 +601,25 @@ function createElementProxy(el, marker) {
     }
   });
 }
-function Dynamic(props) {
-  const others = solidJs.omit(props, "component");
-  const cached = solidJs.createMemo(() => props.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.omit(props, "component");
+  return createDynamic(() => props.component, others);
+}
 
 Object.defineProperty(exports, "ErrorBoundary", {
   enumerable: true,
@@ -683,6 +686,7 @@ exports.addEventListener = addEventListener;
 exports.assign = assign;
 exports.className = className;
 exports.clearDelegatedEvents = clearDelegatedEvents;
+exports.createDynamic = createDynamic;
 exports.delegateEvents = delegateEvents;
 exports.dynamicProperty = dynamicProperty;
 exports.escape = escape;

package/dist/web.js

@@ -1080,22 +1080,25 @@ function createElementProxy(el, marker) {
     }
   });
 }
-function Dynamic(props) {
-  const others = omit(props, "component");
-  const cached = createMemo(() => props.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 = omit(props, "component");
+  return createDynamic(() => props.component, others);
+}
 
 export {
   voidFn as Assets,
@@ -1115,6 +1118,7 @@ export {
   assign,
   className,
   clearDelegatedEvents,
+  createDynamic,
   delegateEvents,
   dynamicProperty,
   escape,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@solidjs/web",
   "description": "Solid's web runtime for the browser and the server",
-  "version": "2.0.0-experimental.0",
+  "version": "2.0.0-experimental.2",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",
@@ -75,10 +75,10 @@
     "seroval-plugins": "^1.1.0"
   },
   "peerDependencies": {
-    "solid-js": "^2.0.0-experimental.0"
+    "solid-js": "^2.0.0-experimental.2"
   },
   "devDependencies": {
-    "solid-js": "2.0.0-experimental.0"
+    "solid-js": "2.0.0-experimental.2"
   },
   "scripts": {
     "build": "npm-run-all -nl build:*",

package/types/index.d.ts

@@ -22,6 +22,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