feat(ssr): keep track of written size, expose write()

Author: wmertens

packages/docs/src/routes/api/qwik-testing/api.json

@@ -178,7 +178,7 @@
         }
       ],
       "kind": "Function",
-      "content": "```typescript\nexport declare function ssrRenderToDom(jsx: JSXOutput, opts?: {\n    debug?: boolean;\n    raw?: boolean;\n}): Promise<{\n    container: _DomContainer;\n    document: Document;\n    vNode: _VNode | null;\n    getStyles: () => Record<string, string | string[]>;\n}>;\n```\n\n\n<table><thead><tr><th>\n\nParameter\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\njsx\n\n\n</td><td>\n\nJSXOutput\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\nopts\n\n\n</td><td>\n\n{ debug?: boolean; raw?: boolean; }\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n</tbody></table>\n\n**Returns:**\n\nPromise&lt;{ container: \\_DomContainer; document: Document; vNode: \\_VNode \\| null; getStyles: () =&gt; Record&lt;string, string \\| string\\[\\]&gt;; }&gt;",
+      "content": "```typescript\nexport declare function ssrRenderToDom(jsx: JSXOutput, opts?: {\n    debug?: boolean;\n    raw?: boolean;\n    qwikLoader?: boolean;\n}): Promise<{\n    container: _DomContainer;\n    document: Document;\n    vNode: _VNode | null;\n    getStyles: () => Record<string, string | string[]>;\n}>;\n```\n\n\n<table><thead><tr><th>\n\nParameter\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\njsx\n\n\n</td><td>\n\nJSXOutput\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\nopts\n\n\n</td><td>\n\n{ debug?: boolean; raw?: boolean; qwikLoader?: boolean; }\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n</tbody></table>\n\n**Returns:**\n\nPromise&lt;{ container: \\_DomContainer; document: Document; vNode: \\_VNode \\| null; getStyles: () =&gt; Record&lt;string, string \\| string\\[\\]&gt;; }&gt;",
       "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/testing/rendering.unit-util.tsx",
       "mdFile": "core.ssrrendertodom.md"
     },

packages/docs/src/routes/api/qwik-testing/index.mdx

@@ -435,6 +435,7 @@ export declare function ssrRenderToDom(
   opts?: {
     debug?: boolean;
     raw?: boolean;
+    qwikLoader?: boolean;
   },
 ): Promise<{
   container: _DomContainer;
@@ -474,7 +475,7 @@ opts
 
 </td><td>
 
-\{ debug?: boolean; raw?: boolean; }
+\{ debug?: boolean; raw?: boolean; qwikLoader?: boolean; }
 
 </td><td>
 

packages/qwik/src/core/ssr/ssr-types.ts

@@ -61,6 +61,7 @@ export type SymbolToChunkResolver = (symbol: string) => string;
 export interface SSRContainer extends Container {
   readonly tag: string;
   readonly isHtml: boolean;
+  readonly size: number;
   readonly writer: StreamWriter;
   readonly serializationCtx: SerializationContext;
   readonly symbolToChunkResolver: SymbolToChunkResolver;
@@ -69,6 +70,8 @@ export interface SSRContainer extends Container {
   additionalBodyNodes: Array<JSXNodeInternal>;
   unclaimedProjectionComponentFrameQueue: ISsrComponentFrame[];
 
+  write(text: string): void;
+
   openContainer(): void;
   closeContainer(): ValueOrPromise<void>;
 

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

@@ -17,6 +17,11 @@ import { ELEMENT_BACKPATCH_DATA } from '../../server/qwik-copy';
 const debug = false; //true;
 Error.stackTraceLimit = 100;
 
+vi.hoisted(() => {
+  vi.stubGlobal('QWIK_BACKPATCH_EXECUTOR_MINIFIED', 'min');
+  vi.stubGlobal('QWIK_BACKPATCH_EXECUTOR_DEBUG', 'debug');
+});
+
 describe('SSR Backpatching', () => {
   it('should handle basic backpatching', async () => {
     const Ctx = createContextId<{ descId: Signal<string> }>('bp-ctx-1');

packages/qwik/src/core/tests/use-context.spec.tsx

@@ -33,6 +33,11 @@ import * as qError from '../shared/error/error';
 const debug = false; //true;
 Error.stackTraceLimit = 100;
 
+vi.hoisted(() => {
+  vi.stubGlobal('QWIK_LOADER_DEFAULT_MINIFIED', 'min');
+  vi.stubGlobal('QWIK_LOADER_DEFAULT_DEBUG', 'debug');
+});
+
 /**
  * Below are helper functions that are constant. They have to be in the top level scope so that the
  * optimizer doesn't consider them as captured scope. It would be great if the optimizer could

packages/qwik/src/core/tests/use-styles-scoped.spec.tsx

@@ -12,7 +12,7 @@ import {
 import { renderToString } from '@qwik.dev/core/server';
 import { createDocument, domRender, ssrRenderToDom, trigger } from '@qwik.dev/core/testing';
 import { cleanupAttrs } from 'packages/qwik/src/testing/element-fixture';
-import { afterEach, describe, expect, it } from 'vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 import { useStore } from '..';
 import { getPlatform, setPlatform } from '../shared/platform/platform';
 import { QStyleSelector } from '../shared/utils/markers';
@@ -21,6 +21,11 @@ import { getScopedStyles } from '../shared/utils/scoped-stylesheet';
 const debug = false; //true;
 Error.stackTraceLimit = 100;
 
+vi.hoisted(() => {
+  vi.stubGlobal('QWIK_LOADER_DEFAULT_MINIFIED', 'min');
+  vi.stubGlobal('QWIK_LOADER_DEFAULT_DEBUG', 'debug');
+});
+
 describe.each([
   { render: ssrRenderToDom }, //
   { render: domRender }, //

packages/qwik/src/core/tests/use-styles.spec.tsx

@@ -10,13 +10,18 @@ import {
 } from '@qwik.dev/core';
 import { renderToString } from '@qwik.dev/core/server';
 import { createDocument, domRender, ssrRenderToDom, trigger } from '@qwik.dev/core/testing';
-import { afterEach, describe, expect, it } from 'vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 import { getPlatform, setPlatform } from '../shared/platform/platform';
 import { QStyleSelector } from '../shared/utils/markers';
 
 const debug = false; //true;
 Error.stackTraceLimit = 100;
 
+vi.hoisted(() => {
+  vi.stubGlobal('QWIK_LOADER_DEFAULT_MINIFIED', 'min');
+  vi.stubGlobal('QWIK_LOADER_DEFAULT_DEBUG', 'debug');
+});
+
 describe.each([
   { render: ssrRenderToDom }, //
   { render: domRender }, //

packages/qwik/src/server/preload-impl.ts

@@ -99,7 +99,7 @@ export const preloaderPre = (
       scriptAttrs.push('nonce', nonce);
     }
     container.openElement('script', null, scriptAttrs);
-    container.writer.write(script);
+    container.write(script);
     container.closeElement();
   }
 
@@ -197,7 +197,7 @@ export const includePreloader = (
       attrs.push('nonce', nonce);
     }
     container.openElement('script', null, attrs);
-    container.writer.write(script);
+    container.write(script);
     container.closeElement();
   }
 

packages/qwik/src/server/ssr-container.ts

@@ -183,6 +183,7 @@ class SSRContainer extends _SharedContainer implements ISSRContainer {
   public isHtml: boolean;
   public writer: StreamWriter;
   public timing: RenderToStreamResult['timing'];
+  public size = 0;
   public resolvedManifest: ResolvedManifest;
   public symbolToChunkResolver: SymbolToChunkResolver;
   public renderOptions: RenderOptions;
@@ -1106,7 +1107,8 @@ class SSRContainer extends _SharedContainer implements ISSRContainer {
   }
 
   ////////////////////////////////////
-  private write(text: string) {
+  write(text: string) {
+    this.size += text.length;
     this.writer.write(text);
   }
 

packages/qwik/src/server/ssr-render.ts

@@ -75,7 +75,7 @@ export const renderToStream = async (
       ? opts.locale(opts)
       : opts.serverData?.locale || opts.locale || opts.containerAttributes?.locale || '';
 
-  const { stream, flush, networkFlushes, totalSize } = handleStreaming(opts, timing);
+  const { stream, flush, networkFlushes } = handleStreaming(opts, timing);
 
   const ssrContainer = ssrCreateContainer({
     tagName: containerTagName,
@@ -101,7 +101,7 @@ export const renderToStream = async (
     snapshotResult,
     flushes: networkFlushes,
     manifest: resolvedManifest?.manifest,
-    size: totalSize,
+    size: ssrContainer.size,
     isStatic: !isDynamic,
     timing: timing,
   };
@@ -134,7 +134,6 @@ function handleStreaming(opts: RenderToStreamOptions, timing: RenderToStreamResu
   let stream = opts.stream;
   let bufferSize = 0;
   let buffer: string = '';
-  let totalSize = 0;
   let networkFlushes = 0;
   const inOrderStreaming = opts.streaming?.inOrder ?? {
     strategy: 'auto',
@@ -158,7 +157,6 @@ function handleStreaming(opts: RenderToStreamOptions, timing: RenderToStreamResu
   function enqueue(chunk: string) {
     const len = chunk.length;
     bufferSize += len;
-    totalSize += len;
     buffer += chunk;
   }
 
@@ -219,7 +217,6 @@ function handleStreaming(opts: RenderToStreamOptions, timing: RenderToStreamResu
     stream,
     flush,
     networkFlushes,
-    totalSize,
   };
 }