fix: text html with signals (#1601)

QwikDev · Oct 6, 2022 · b4b06f2 · b4b06f2
1 parent 8adb568
commit b4b06f2
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 4 deletions.
diff --git a/packages/qwik/src/core/render/ssr/render-ssr.ts b/packages/qwik/src/core/render/ssr/render-ssr.ts
@@ -73,6 +73,7 @@ export interface SSRContext {
 
 const IS_HEAD = 1 << 0;
 const IS_HTML = 1 << 2;
+const IS_TEXT = 1 << 3;
 
 export const createDocument = () => {
   const doc = { nodeType: 9 };
@@ -495,6 +496,9 @@ export const renderNode = (
     if (isHead) {
       flags |= IS_HEAD;
     }
+    if (textOnlyElements[tagName]) {
+      flags |= IS_TEXT;
+    }
 
     classStr = classStr.trim();
     if (classStr) {
@@ -605,13 +609,22 @@ export const processData = (
   } else if (isArray(node)) {
     return walkChildren(node, ssrCtx, stream, flags);
   } else if (isSignal(node)) {
+    const insideText = flags & IS_TEXT;
     const hostEl = ssrCtx.hostCtx?.$element$ as QwikElement;
-    const value = node.value;
-    const id = getNextIndex(ssrCtx.rCtx);
+    let value;
     if (hostEl) {
-      addSignalSub(2, hostEl, node, '#' + id, 'data');
+      if (!insideText) {
+        value = node.value;
+        const id = getNextIndex(ssrCtx.rCtx);
+        addSignalSub(2, hostEl, node, '#' + id, 'data');
+        stream.write(`<!--t=${id}-->${escapeHtml(String(value))}<!---->`);
+        return;
+      } else {
+        value = invoke(ssrCtx.invocationContext, () => node.value);
+      }
     }
-    stream.write(`<!--t=${id}-->${escapeHtml(String(value))}<!---->`);
+    stream.write(escapeHtml(String(value)));
+    return;
   } else if (isPromise(node)) {
     stream.write(FLUSH_COMMENT);
     return node.then((node) => processData(node, ssrCtx, stream, flags, beforeClose));
@@ -777,6 +790,14 @@ function processPropValue(prop: string, value: any): string | null {
   return String(value);
 }
 
+const textOnlyElements: Record<string, true | undefined> = {
+  title: true,
+  style: true,
+  script: true,
+  noframes: true,
+  noscript: true,
+};
+
 const emptyElements: Record<string, true | undefined> = {
   area: true,
   base: true,

diff --git a/packages/qwik/src/core/render/ssr/render-ssr.unit.tsx b/packages/qwik/src/core/render/ssr/render-ssr.unit.tsx
@@ -19,6 +19,7 @@ import { Slot } from '../jsx/slot.public';
 import { jsx } from '../jsx/jsx-runtime';
 import { renderSSR, RenderSSROptions } from './render-ssr';
 import { useStore } from '../../use/use-store.public';
+import { useSignal } from '../../use/use-signal';
 
 const renderSSRSuite = suite('renderSSR');
 renderSSRSuite('render attributes', async () => {
@@ -557,6 +558,26 @@ renderSSRSuite('mixes slots', async () => {
   );
 });
 
+renderSSRSuite('component RenderSignals()', async () => {
+  await testSSR(
+    <RenderSignals />,
+    `
+    <html q:container="paused" q:version="dev" q:render="ssr-dev">
+      <!--qv q:id=0 q:key=sX:-->
+      <head q:head>
+        <title q:head>value</title>
+        <style q:head>
+          value
+        </style>
+        <script q:head>
+          value
+        </script>
+      </head>
+      <!--/qv-->
+    </html>`
+  );
+});
+
 renderSSRSuite('component useContextProvider()', async () => {
   await testSSR(
     <Context>
@@ -1008,6 +1029,19 @@ export const HeadCmp = component$(() => {
   );
 });
 
+export const RenderSignals = component$(() => {
+  const signal = useSignal('value');
+  return (
+    <>
+      <head>
+        <title>{signal.value}</title>
+        <style>{signal.value}</style>
+        <script>{signal.value}</script>
+      </head>
+    </>
+  );
+});
+
 export const HtmlContext = component$(() => {
   const store = useStore({});
   useStylesQrl(inlinedQrl(`body {background: blue}`, 'styles_DelayResource'));

diff --git a/starters/apps/e2e/src/components/signals/signals.tsx b/starters/apps/e2e/src/components/signals/signals.tsx
@@ -19,6 +19,8 @@ export const Signals = component$(() => {
     signal,
   });
 
+  const styles = useSignal('body { background: white}');
+
   useClientEffect$(() => {
     ref.current!.setAttribute('data-set', 'ref');
     ref2.value!.setAttribute('data-set', 'ref2');
@@ -51,6 +53,14 @@ export const Signals = component$(() => {
       >
         Increment ID
       </button>
+      <button
+        id="background"
+        onClick$={() => {
+          styles.value = 'body { background: black }';
+        }}
+      >
+        Black background
+      </button>
       <Child
         text="Message"
         count={store.foo}
@@ -59,6 +69,7 @@ export const Signals = component$(() => {
         signal={signal}
         signal2={store.signal}
         id={id.value}
+        styles={styles.value}
       />
     </div>
   );
@@ -72,6 +83,7 @@ interface ChildProps {
   signal: Signal<string>;
   signal2: Signal<string>;
   id: number;
+  styles: string;
 }
 export const Child = component$((props: ChildProps) => {
   return (
@@ -84,6 +96,7 @@ export const Child = component$((props: ChildProps) => {
       <div id="stuff" ref={props.ref2}>
         Stuff: {props.count}
       </div>
+      <style>{props.styles}</style>
     </>
   );
 });
diff --git a/starters/e2e/e2e.spec.ts b/starters/e2e/e2e.spec.ts
@@ -1103,11 +1103,13 @@ Click`);
       const incrementBtn = await page.locator('#count');
       const clickBtn = await page.locator('#click');
       const incrementIdBtn = await page.locator('#increment-id');
+      const backgroundBtn = await page.locator('#background');
 
       const text = await page.locator('#text');
       const id = await page.locator('#id');
       const computed = await page.locator('#computed');
       const stuff = await page.locator('#stuff');
+      const body = await page.locator('body');
 
       await page.waitForTimeout(100);
       await expect(text).toHaveText('Text: Message');
@@ -1140,6 +1142,16 @@ Click`);
       await expect(computed).toHaveText('computed: clicked');
       await expect(stuff).toHaveText('Stuff: 11');
       await expect(stuff).toHaveAttribute('data-set', 'ref2');
+      await expect(body).toHaveCSS('background-color', 'rgb(255, 255, 255)');
+
+      await backgroundBtn.click();
+      await expect(text).toHaveText('Text: Message');
+      await expect(text).toHaveAttribute('data-set', 'ref');
+      await expect(id).toHaveText('Id: 1');
+      await expect(computed).toHaveText('computed: clicked');
+      await expect(stuff).toHaveText('Stuff: 11');
+      await expect(stuff).toHaveAttribute('data-set', 'ref2');
+      await expect(body).toHaveCSS('background-color', 'rgb(0, 0, 0)');
     });
   });
 });
diff --git a/starters/playwright.config.ts b/starters/playwright.config.ts
@@ -14,6 +14,7 @@ expect.extend({
     };
   },
 });
+
 const config: PlaywrightTestConfig = {
   use: {
     viewport: {
-Original file line number
+Diff line change
@@ Expand Up / @@ -14,6 +14,7 @@ expect.extend({ @@
         };
       },
     });
     const config: PlaywrightTestConfig = {
       use: {
         viewport: {
@@ Expand Down @@