Skip to content

fix regression: reading props.is causes Dynamic component to re-render #2530

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

fix regression: reading props.is causes Dynamic component to re-render #2530

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 17 additions & 6 deletions packages/solid/web/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,11 @@ export const isServer: boolean = false;
export const isDev: boolean = "_SOLID_DEV_" as unknown as boolean;
const SVG_NAMESPACE = "http://www.w3.org/2000/svg";

function createElement(tagName: string, isSVG = false, is = undefined): HTMLElement | SVGElement {
function createElement(
tagName: string,
isSVG = false,
is: string | undefined = undefined
): HTMLElement | SVGElement {
return isSVG
? document.createElementNS(SVG_NAMESPACE, tagName)
: document.createElement(tagName, { is });
Expand Down Expand Up @@ -130,11 +134,14 @@ export type DynamicProps<T extends ValidComponent, P = ComponentProps<T>> = {
*/
export function createDynamic<T extends ValidComponent>(
component: () => T | undefined,
isWCAttr: () => string | undefined,
props: ComponentProps<T>
): JSX.Element {
const cached = createMemo<Function | string | undefined>(component);
const cachedComponent = createMemo<Function | string | undefined>(component);
const cachedIsWCAttr = createMemo<string | undefined>(isWCAttr);

return createMemo(() => {
const component = cached();
const component = cachedComponent();
switch (typeof component) {
case "function":
if (isDev) Object.assign(component, { [$DEVCOMP]: true });
Expand All @@ -144,7 +151,7 @@ export function createDynamic<T extends ValidComponent>(
const isSvg = SVGElements.has(component);
const el = sharedConfig.context
? getNextElement()
: createElement(component, isSvg, props.is);
: createElement(component, isSvg, cachedIsWCAttr());
spread(el, props, isSvg);
return el;

Expand All @@ -162,6 +169,10 @@ export function createDynamic<T extends ValidComponent>(
* @description https://docs.solidjs.com/reference/components/dynamic
*/
export function Dynamic<T extends ValidComponent>(props: DynamicProps<T>): JSX.Element {
const [, others] = splitProps(props, ["component"]);
return createDynamic(() => props.component, others as ComponentProps<T>);
const [, others] = splitProps(props, ["component", "is"]);
return createDynamic(
() => props.component,
() => props.is,
others as ComponentProps<T>
);
}
Loading