fix: fix className rendering (QwikDev#1248)

willkuerlich · Sep 15, 2022 · 93712ea · 93712ea
1 parent 80f37d1
commit 93712ea
Show file tree

Hide file tree

Showing 11 changed files with 37 additions and 22 deletions.
diff --git a/packages/qwik/src/core/render/dom/render.unit.tsx b/packages/qwik/src/core/render/dom/render.unit.tsx
@@ -758,7 +758,7 @@ export const Counter = component$((props: { step?: number }) => {
         -
       </button>
       <span>{state.count}</span>
-      <button class="increment" onClick$={runtimeQrl(Counter_add, [state, { value: step }])}>
+      <button className="increment" onClick$={runtimeQrl(Counter_add, [state, { value: step }])}>
         +
       </button>
     </>

diff --git a/packages/qwik/src/core/render/dom/visitor.ts b/packages/qwik/src/core/render/dom/visitor.ts
@@ -813,7 +813,6 @@ const noop: PropHandler = () => {
 export const PROP_HANDLER_MAP: Record<string, PropHandler | undefined> = {
   style: handleStyle,
   class: handleClass,
-  className: handleClass,
   value: checkBeforeAssign,
   checked: checkBeforeAssign,
   [dangerouslySetInnerHTML]: setInnerHTML,
@@ -833,11 +832,15 @@ export const updateProperties = (
     return listenersMap;
   }
   const elm = elCtx.$element$;
-  for (const key of keys) {
+  for (let key of keys) {
     if (key === 'children') {
       continue;
     }
     const newValue = newProps[key];
+    if (key === 'className') {
+      newProps['class'] = newValue;
+      key = 'class';
+    }
     const oldValue = oldProps[key];
     if (oldValue === newValue) {
       continue;
@@ -930,11 +933,15 @@ export const setProperties = (
   if (keys.length === 0) {
     return listenerMap;
   }
-  for (const key of keys) {
+  for (let key of keys) {
     if (key === 'children') {
       continue;
     }
     const newValue = newProps[key];
+    if (key === 'className') {
+      newProps['class'] = newValue;
+      key = 'class';
+    }
     if (key === 'ref') {
       (newValue as Ref<Element>).current = elm as Element;
       continue;

diff --git a/packages/qwik/src/core/render/jsx/types/jsx-qwik-attributes.ts b/packages/qwik/src/core/render/jsx/types/jsx-qwik-attributes.ts
@@ -127,7 +127,7 @@ export type PreventDefault = {
 };
 
 export interface QwikProps extends PreventDefault {
-  class?: string | { [className: string]: boolean };
+  class?: string | { [className: string]: boolean } | string[];
   dangerouslySetInnerHTML?: string;
   ref?: Ref<Element>;
 

diff --git a/packages/qwik/src/core/render/ssr/render-ssr.unit.tsx b/packages/qwik/src/core/render/ssr/render-ssr.unit.tsx
@@ -548,7 +548,7 @@ renderSSRSuite('component useStylesScoped()', async () => {
           }
         </style>
         <div class="⭐️1d-0 host">
-          <div class="⭐️1d-0">
+          <div class="⭐️1d-0 div">
             Scoped1
             <!--qv q:s q:sref=0 q:key=-->
             <div>projected</div>
@@ -852,7 +852,7 @@ export const ScopedStyles1 = component$(() => {
 
   return (
     <div class="host">
-      <div>
+      <div className="div">
         Scoped1
         <Slot></Slot>
         <p>Que tal?</p>

diff --git a/starters/apps/e2e/src/components/resource/resource.tsx b/starters/apps/e2e/src/components/resource/resource.tsx
@@ -80,7 +80,7 @@ export const ResourceApp = component$(() => {
 
   return (
     <div>
-      <button type="button" class="increment" onClick$={() => state.count++}>
+      <button type="button" className="increment" onClick$={() => state.count++}>
         Increment
       </button>
       <Results result={resource} />
@@ -108,7 +108,7 @@ export const Results = component$((props: { result: ResourceReturn<number> }) =>
         onResolved={(number) => {
           return (
             <>
-              <div class="resource1">resource 1 is {number}</div>
+              <div className="resource1">resource 1 is {number}</div>
               <button class="count" onClick$={() => state.count++}>
                 count is {state.count}
               </button>

diff --git a/starters/apps/e2e/src/components/styles/child.css b/starters/apps/e2e/src/components/styles/child.css
@@ -1,3 +1,3 @@
-.child {
+.child-container > .child {
   font-size: 20px;
 }
diff --git a/starters/apps/e2e/src/components/styles/child2.css b/starters/apps/e2e/src/components/styles/child2.css
@@ -1,3 +1,3 @@
-.child2 {
+.child-container > .child2 {
   font-size: 10px;
 }
diff --git a/starters/apps/e2e/src/components/styles/parent.css b/starters/apps/e2e/src/components/styles/parent.css
@@ -1,3 +1,3 @@
-.parent {
+.parent-container > .parent {
   font-size: 200px;
 }
diff --git a/starters/apps/e2e/src/components/styles/styles.tsx b/starters/apps/e2e/src/components/styles/styles.tsx
@@ -9,14 +9,16 @@ export const Styles = component$(() => {
     count: 10,
   });
   return (
-    <div class="parent">
-      Parent
-      <button type="button" onClick$={() => store.count++}>
-        Add Child
-      </button>
-      {Array.from({ length: store.count }).map((_, i) => (
-        <Child index={i} />
-      ))}
+    <div class="parent-container">
+      <div class={['parent', `count-${store.count}`]}>
+        Parent
+        <button type="button" onClick$={() => store.count++}>
+          Add Child
+        </button>
+        {Array.from({ length: store.count }).map((_, i) => (
+          <Child index={i} />
+        ))}
+      </div>
     </div>
   );
 });
@@ -25,5 +27,9 @@ export const Child = component$((props: { index: number }) => {
   useStylesScoped$(child);
   useStylesScoped$(child2);
 
-  return <div class="child">Child {props.index}</div>;
+  return (
+    <div class="child-container">
+      <div className="child">Child {props.index}</div>
+    </div>
+  );
 });
diff --git a/starters/dev-server.ts b/starters/dev-server.ts
@@ -51,7 +51,6 @@ async function handleApp(req: Request, res: Response, next: NextFunction) {
     const pkgJson: PackageJSON = JSON.parse(readFileSync(pkgPath, 'utf-8'));
     const enableCityServer = !!pkgJson.__qwik__?.qwikCity;
 
-    console.log('enableCityServer', enableCityServer);
     let clientManifest = cache.get(appDir);
     if (!clientManifest) {
       clientManifest = await buildApp(appDir, appName, enableCityServer);

diff --git a/starters/e2e/e2e.spec.ts b/starters/e2e/e2e.spec.ts
@@ -709,6 +709,8 @@ test.describe('e2e', () => {
       const child1 = await page.locator('text=Child 2');
 
       const addChild = await page.locator('button');
+
+      await expect(parent).toHaveAttribute('class', '⭐️yalzmy-0 parent count-10');
       await expect(parent).toHaveCSS('font-size', '200px');
       await expect(child1).toHaveCSS('font-size', '20px');
 
@@ -718,6 +720,7 @@ test.describe('e2e', () => {
       await page.waitForTimeout(100);
 
       const child10 = await page.locator('text=Child 10');
+      await expect(parent).toHaveAttribute('class', '⭐️yalzmy-0 parent count-11');
       await expect(parent).toHaveCSS('font-size', '200px');
       await expect(child1).toHaveCSS('font-size', '20px');
       await expect(child10).toHaveCSS('font-size', '20px');