fix(core): dynamic text signals (QwikDev#5284)

* fix(core): subscribe dynamic text tags to signals Due to the mutable/immutable split for components, text tags in _jsxC weren't subscribing to signals. * refactor(e2e): remove tsconfig again This causes annoying messages in e2e output but otherwise code linting is impacted.
Piscarocarlos · Oct 7, 2023 · 34522a7 · 34522a7
1 parent cf0cef0
commit 34522a7
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 2 deletions.
diff --git a/packages/qwik/src/core/render/jsx/jsx-runtime.ts b/packages/qwik/src/core/render/jsx/jsx-runtime.ts
@@ -80,6 +80,15 @@ export const _jsxC = <T extends string | FunctionComponent<any>>(
 ): JSXNode<T> => {
   const processed = key == null ? null : String(key);
   const props = mutableProps ?? (EMPTY_OBJ as any);
+  // In dynamic components, type could be a string
+  if (typeof type === 'string' && _IMMUTABLE in props) {
+    const p = {} as any;
+    // The immutable props are all regular props minus the children
+    for (const [k, v] of Object.entries(props[_IMMUTABLE])) {
+      p[k] = v === _IMMUTABLE ? props[k] : v;
+    }
+    return _jsxQ(type, null, p, props.children, flags, key, dev);
+  }
   const node = new JSXNodeImpl<T>(type, props, null, props.children, flags, processed);
   if (typeof type === 'string' && mutableProps) {
     delete mutableProps.children;

diff --git a/starters/apps/e2e/src/components/render/render.tsx b/starters/apps/e2e/src/components/render/render.tsx
@@ -108,6 +108,7 @@ export const RenderChildren = component$<{ v: number }>(({ v }) => {
       <Issue4292 />
       <Issue4386 />
       <Issue4455 />
+      <Issue5266 />
     </>
   );
 });
@@ -929,3 +930,28 @@ export const Issue4455 = component$(() => {
     </>
   );
 });
+
+export const DynamicComponent = component$<{ b?: boolean; v: string }>(
+  ({ b, v }) => {
+    // Make the tag dynamic
+    const Tag = b ? "button" : "div";
+    return (
+      <Tag id="issue-5266-tag" data-v={v}>
+        hello
+      </Tag>
+    );
+  },
+);
+export const Issue5266 = component$(() => {
+  const show = useSignal(false);
+  const state = useSignal("foo");
+  return (
+    <div>
+      <button id="issue-5266-render" onClick$={() => (show.value = true)} />
+      <button id="issue-5266-button" onClick$={() => (state.value = "bar")}>
+        toggle
+      </button>
+      {show.value && <DynamicComponent v={state.value} />}
+    </div>
+  );
+});
diff --git a/starters/apps/e2e/tsconfig.json b/starters/apps/e2e/tsconfig.json
diff --git a/starters/apps/qwikcity-test/tsconfig.json b/starters/apps/qwikcity-test/tsconfig.json
diff --git a/starters/e2e/e2e.render.spec.ts b/starters/e2e/e2e.render.spec.ts
@@ -5,6 +5,7 @@ test.describe("render", () => {
     await page.goto("/e2e/render");
     page.on("pageerror", (err) => expect(err).toEqual(undefined));
     page.on("console", (msg) => {
+      // console.warn(msg.type(), msg.text());
       if (msg.type() === "error") {
         expect(msg.text()).toEqual(undefined);
       }
@@ -489,6 +490,16 @@ test.describe("render", () => {
       await expect(input1).toHaveValue("0.5");
       await expect(input2).toHaveValue("0.5");
     });
+
+    test("issue 5266", async ({ page }) => {
+      const tag = page.locator("#issue-5266-tag");
+      const button = page.locator("#issue-5266-button");
+      await page.locator("#issue-5266-render").click();
+
+      await expect(tag).toHaveAttribute("data-v", "foo");
+      await button.click();
+      await expect(tag).toHaveAttribute("data-v", "bar");
+    });
   }
 
   tests();