diff --git a/packages/solid/web/src/index.ts b/packages/solid/web/src/index.ts index 78e36b2d..9efb55e8 100644 --- a/packages/solid/web/src/index.ts +++ b/packages/solid/web/src/index.ts @@ -115,26 +115,33 @@ export type DynamicProps> = { }; /** - * Renders an arbitrary custom or native component and passes the other props + * 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 function Dynamic(props: DynamicProps): JSX.Element { - const [p, others] = splitProps(props, ["component"]); - const cached = createMemo(() => p.component); +export function createDynamic( + component: () => T, + props: ComponentProps +): JSX.Element { + const cached = createMemo(component); return createMemo(() => { const component = cached(); switch (typeof component) { case "function": if (isDev) 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; default: @@ -142,3 +149,15 @@ export function Dynamic(props: DynamicProps): JSX.E } }) as unknown as JSX.Element; } + +/** + * Renders an arbitrary custom or native component and passes the other props + * ```typescript + * + * ``` + * @description https://docs.solidjs.com/reference/components/dynamic + */ +export function Dynamic(props: DynamicProps): JSX.Element { + const [p, others] = splitProps(props, ["component"]); + return createDynamic(() => p.component, others); +}