From 93712eacd62538ee5950ebe3d9b503f5860f1112 Mon Sep 17 00:00:00 2001 From: Manu MA Date: Thu, 15 Sep 2022 14:20:24 +0200 Subject: [PATCH] fix: fix className rendering (#1248) --- .../qwik/src/core/render/dom/render.unit.tsx | 2 +- packages/qwik/src/core/render/dom/visitor.ts | 13 +++++++--- .../render/jsx/types/jsx-qwik-attributes.ts | 2 +- .../src/core/render/ssr/render-ssr.unit.tsx | 4 ++-- .../e2e/src/components/resource/resource.tsx | 4 ++-- .../apps/e2e/src/components/styles/child.css | 2 +- .../apps/e2e/src/components/styles/child2.css | 2 +- .../apps/e2e/src/components/styles/parent.css | 2 +- .../apps/e2e/src/components/styles/styles.tsx | 24 ++++++++++++------- starters/dev-server.ts | 1 - starters/e2e/e2e.spec.ts | 3 +++ 11 files changed, 37 insertions(+), 22 deletions(-) diff --git a/packages/qwik/src/core/render/dom/render.unit.tsx b/packages/qwik/src/core/render/dom/render.unit.tsx index 36db0570c9f..f1f98338242 100644 --- 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 }) => { - {state.count} - diff --git a/packages/qwik/src/core/render/dom/visitor.ts b/packages/qwik/src/core/render/dom/visitor.ts index 7c215b60f90..32036ccd5af 100644 --- 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 = { 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).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 index 14501746a2a..42887ef5b32 100644 --- 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; diff --git a/packages/qwik/src/core/render/ssr/render-ssr.unit.tsx b/packages/qwik/src/core/render/ssr/render-ssr.unit.tsx index e397e10c4f5..8182cfca852 100644 --- 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 () => { }
-
+
Scoped1
projected
@@ -852,7 +852,7 @@ export const ScopedStyles1 = component$(() => { return (
-
+
Scoped1

Que tal?

diff --git a/starters/apps/e2e/src/components/resource/resource.tsx b/starters/apps/e2e/src/components/resource/resource.tsx index 90429adc210..b196164d63f 100644 --- 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 (
- @@ -108,7 +108,7 @@ export const Results = component$((props: { result: ResourceReturn }) => onResolved={(number) => { return ( <> -
resource 1 is {number}
+
resource 1 is {number}
diff --git a/starters/apps/e2e/src/components/styles/child.css b/starters/apps/e2e/src/components/styles/child.css index f34bf715c6c..b292abeba9b 100644 --- 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 index 05a836ba563..6a9ee7103e5 100644 --- 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 index c9344550d1d..9cc78000d87 100644 --- 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 index ba609d89384..0394003b2ad 100644 --- 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 ( -
- Parent - - {Array.from({ length: store.count }).map((_, i) => ( - - ))} +
+
+ Parent + + {Array.from({ length: store.count }).map((_, i) => ( + + ))} +
); }); @@ -25,5 +27,9 @@ export const Child = component$((props: { index: number }) => { useStylesScoped$(child); useStylesScoped$(child2); - return
Child {props.index}
; + return ( +
+
Child {props.index}
+
+ ); }); diff --git a/starters/dev-server.ts b/starters/dev-server.ts index ae938b16229..39f85b5e153 100644 --- 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 index 7425d1df91a..e909d9dd6f8 100644 --- 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');