fix: rendering attribute value from array of classes from spread props

.changeset/angry-grapes-itch.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: rendering attribute value from array of classes from spread props

packages/qwik/src/core/api.md

@@ -805,8 +805,10 @@ export interface ResourceResolved<T> {
 // @public (undocumented)
 export type ResourceReturn<T> = ResourcePending<T> | ResourceResolved<T> | ResourceRejected<T>;
 
+// Warning: (ae-forgotten-export) The symbol "PropsProxy" needs to be exported by the entry point index.d.ts
+//
 // @internal (undocumented)
-export const _restProps: (props: Record<string, any>, omit: string[], target?: {}) => {};
+export const _restProps: (props: PropsProxy, omit: string[], target?: Props) => Props;
 
 // @internal
 export function _serialize(data: unknown[]): Promise<string>;

packages/qwik/src/core/shared/jsx/jsx-runtime.ts

@@ -14,6 +14,7 @@ import type { QwikJSX } from './types/jsx-qwik';
 import type { JSXChildren } from './types/jsx-qwik-attributes';
 
 export type Props = Record<string, unknown>;
+export type PropsProxy = { [_VAR_PROPS]: Props; [_CONST_PROPS]: Props | null };
 
 /**
  * Create a JSXNode with the properties fully split into variable and constant parts, and children
@@ -198,9 +199,7 @@ export function h<TYPE extends string | FunctionComponent<PROPS>, PROPS extends
 
 export const SKIP_RENDER_TYPE = ':skipRender';
 
-export const isPropsProxy = (
-  obj: any
-): obj is { [_VAR_PROPS]: Props; [_CONST_PROPS]: Props | null } => {
+export const isPropsProxy = (obj: any): obj is PropsProxy => {
   return obj && obj[_VAR_PROPS] !== undefined;
 };
 

packages/qwik/src/core/shared/utils/prop.ts

@@ -1,3 +1,5 @@
+import { createPropsProxy, type Props, type PropsProxy } from '../jsx/jsx-runtime';
+import { _CONST_PROPS, _VAR_PROPS } from './constants';
 import { NON_SERIALIZABLE_MARKER_PREFIX, QSlotParent } from './markers';
 
 export function isSlotProp(prop: string): boolean {
@@ -9,11 +11,24 @@ export function isParentSlotProp(prop: string): boolean {
 }
 
 /** @internal */
-export const _restProps = (props: Record<string, any>, omit: string[], target = {}) => {
-  for (const key in props) {
+export const _restProps = (props: PropsProxy, omit: string[], target: Props = {}) => {
+  let constPropsTarget: Props | null = null;
+  const constProps = props[_CONST_PROPS];
+  if (constProps) {
+    for (const key in constProps) {
+      if (!omit.includes(key)) {
+        constPropsTarget ||= {};
+        constPropsTarget[key] = constProps[key];
+      }
+    }
+  }
+  const varPropsTarget: Props = target;
+  const varProps = props[_VAR_PROPS];
+  for (const key in varProps) {
     if (!omit.includes(key)) {
-      (target as any)[key] = props[key];
+      varPropsTarget[key] = varProps[key];
     }
   }
-  return target;
+
+  return createPropsProxy(varPropsTarget, constPropsTarget);
 };

packages/qwik/src/core/tests/attributes.spec.tsx

@@ -5,9 +5,16 @@ import {
   useSignal,
   useStore,
   Fragment as Component,
+  Fragment as Projection,
+  Fragment as Signal,
   Fragment,
   type PropsOf,
   useComputed$,
+  createContextId,
+  useContext,
+  useContextProvider,
+  $,
+  Slot,
 } from '@qwik.dev/core';
 
 const debug = false; //true;
@@ -437,4 +444,205 @@ describe.each([
       </Component>
     );
   });
+
+  it('should render array of classes from rest props', async () => {
+    const ctxId = createContextId<any>('abcd');
+    const TabCmp = component$<any>(({ tabId, ...props }) => {
+      const ctxObj = useContext(ctxId);
+
+      const computedClass = useComputed$(() => {
+        return ctxObj.selected.value === Number(tabId) ? 'selected' : '';
+      });
+
+      return (
+        <button
+          id={tabId}
+          onClick$={() => ctxObj.onSelect$(tabId)}
+          class={[props.class, computedClass.value]}
+        >
+          <Slot />
+        </button>
+      );
+    });
+
+    const ParentComponent = component$(() => {
+      const selected = useSignal(0);
+      const ctxObj = {
+        selected,
+        onSelect$: $((tabId: number) => {
+          selected.value = Number(tabId);
+        }),
+      };
+      useContextProvider(ctxId, ctxObj);
+      return (
+        <>
+          {selected.value}
+          <TabCmp tabId={0} class={selected.value === 0 ? 'custom' : ''}>
+            TAB 1
+          </TabCmp>
+          <TabCmp tabId={1} class={selected.value === 1 ? 'custom' : ''}>
+            TAB 2
+          </TabCmp>
+        </>
+      );
+    });
+
+    const { vNode, document } = await render(<ParentComponent />, { debug });
+
+    expect(vNode).toMatchVDOM(
+      <Component ssr-required>
+        <Fragment ssr-required>
+          <Signal ssr-required>0</Signal>
+          <Component ssr-required>
+            <button id="0" class="custom selected">
+              <Projection ssr-required>TAB 1</Projection>
+            </button>
+          </Component>
+          <Component ssr-required>
+            <button id="1" class="">
+              <Projection ssr-required>TAB 2</Projection>
+            </button>
+          </Component>
+        </Fragment>
+      </Component>
+    );
+
+    await trigger(document.body, 'button[id=1]', 'click');
+
+    expect(vNode).toMatchVDOM(
+      <Component ssr-required>
+        <Fragment ssr-required>
+          <Signal ssr-required>1</Signal>
+          <Component ssr-required>
+            <button id="0" class="">
+              <Projection ssr-required>TAB 1</Projection>
+            </button>
+          </Component>
+          <Component ssr-required>
+            <button id="1" class="custom selected">
+              <Projection ssr-required>TAB 2</Projection>
+            </button>
+          </Component>
+        </Fragment>
+      </Component>
+    );
+  });
+
+  describe('class attribute', () => {
+    it('should render class attribute', async () => {
+      const Cmp = component$(() => {
+        return <span class="test-class"></span>;
+      });
+
+      const { vNode } = await render(<Cmp />, { debug });
+      expect(vNode).toMatchVDOM(
+        <Component>
+          <span class="test-class"></span>
+        </Component>
+      );
+    });
+
+    it('should trim class attribute value', async () => {
+      const Cmp = component$(() => {
+        return <span class="   test-class   "></span>;
+      });
+
+      const { vNode } = await render(<Cmp />, { debug });
+      expect(vNode).toMatchVDOM(
+        <Component>
+          <span class="test-class"></span>
+        </Component>
+      );
+    });
+
+    it('should render class attribute from signal', async () => {
+      const Cmp = component$(() => {
+        const sigValue = useSignal('testA');
+        return <button class={sigValue.value}></button>;
+      });
+
+      const { vNode } = await render(<Cmp />, { debug });
+      expect(vNode).toMatchVDOM(
+        <Component ssr-required>
+          <button class="testA"></button>
+        </Component>
+      );
+    });
+
+    it('should render class attribute from array of strings', async () => {
+      const Cmp = component$(() => {
+        return <button class={['testA', 'testB']}></button>;
+      });
+
+      const { vNode } = await render(<Cmp />, { debug });
+      expect(vNode).toMatchVDOM(
+        <Component ssr-required>
+          <button class="testA testB"></button>
+        </Component>
+      );
+    });
+
+    it('should render class attribute from array of mixed signals and strings', async () => {
+      const Cmp = component$(() => {
+        const sigValue = useSignal('testA');
+        return <button class={[sigValue.value, 'testB']}></button>;
+      });
+
+      const { vNode } = await render(<Cmp />, { debug });
+      expect(vNode).toMatchVDOM(
+        <Component ssr-required>
+          <button class="testA testB"></button>
+        </Component>
+      );
+    });
+
+    it('should render class attribute from objects ', async () => {
+      const Cmp = component$(() => {
+        return (
+          <button
+            class={{
+              testA: true,
+              testB: false,
+            }}
+          ></button>
+        );
+      });
+
+      const { vNode } = await render(<Cmp />, { debug });
+      expect(vNode).toMatchVDOM(
+        <Component ssr-required>
+          <button class="testA"></button>
+        </Component>
+      );
+    });
+
+    it('should render class attribute from object', async () => {
+      const Cmp = component$(() => {
+        const renderClass = useSignal(true);
+        return (
+          <button
+            class={{
+              testA: true,
+              testB: false,
+              toggle: renderClass.value,
+            }}
+            onClick$={() => (renderClass.value = !renderClass.value)}
+          ></button>
+        );
+      });
+
+      const { vNode, document } = await render(<Cmp />, { debug });
+      expect(vNode).toMatchVDOM(
+        <Component ssr-required>
+          <button class="testA toggle"></button>
+        </Component>
+      );
+      await trigger(document.body, 'button', 'click');
+      expect(vNode).toMatchVDOM(
+        <Component ssr-required>
+          <button class="testA"></button>
+        </Component>
+      );
+    });
+  });
 });