fix: pause container at runtime (#706)

packages/qwik/src/core/error/error.ts

@@ -21,6 +21,7 @@ export const QError_immutableProps = 17;
 export const QError_hostCanOnlyBeAtRoot = 18;
 export const QError_immutableJsxProps = 19;
 export const QError_useInvokeContext = 20;
+export const QError_containerAlreadyPaused = 21;
 
 export const qError = (code: number, ...parts: any[]): Error => {
   const text = codeToText(code);
@@ -53,6 +54,7 @@ export const codeToText = (code: number): string => {
       '<Host> component can only be used at the root of a Qwik component$()', // 18
       'Props are immutable by default.', // 19
       'use- method must be called only at the root level of a component$()',
+      'Container is already paused. Skipping',
     ];
     return `Code(${code}): ${MAP[code] ?? ''}`;
   } else {

packages/qwik/src/core/object/store.ts

@@ -22,7 +22,12 @@ import { destroyWatch, WatchDescriptor, WatchFlagsIsDirty } from '../use/use-wat
 import type { QRL } from '../import/qrl.public';
 import { emitEvent } from '../util/event';
 import { ContainerState, getContainerState } from '../render/notify-render';
-import { codeToText, QError_cannotSerializeNode } from '../error/error';
+import {
+  codeToText,
+  qError,
+  QError_cannotSerializeNode,
+  QError_containerAlreadyPaused,
+} from '../error/error';
 import { isArray, isObject, isString } from '../util/types';
 import { directGetAttribute, directSetAttribute } from '../render/fast-calls';
 import { isNotNullable } from '../util/promises';
@@ -45,9 +50,13 @@ export const DOCUMENT_PREFIX = '\u0012';
 // </docs>
 export const pauseContainer = (elmOrDoc: Element | Document): SnapshotResult => {
   const doc = getDocument(elmOrDoc);
-  const containerEl = isDocument(elmOrDoc) ? elmOrDoc.documentElement : elmOrDoc;
-  const parentJSON = isDocument(elmOrDoc) ? elmOrDoc.body : containerEl;
-  const data = snapshotState(containerEl);
+  const documentElement = doc.documentElement;
+  const containerEl = isDocument(elmOrDoc) ? documentElement : elmOrDoc;
+  if (directGetAttribute(containerEl, QContainerAttr) === 'paused') {
+    throw qError(QError_containerAlreadyPaused);
+  }
+  const parentJSON = containerEl === doc.documentElement ? doc.body : containerEl;
+  const data = pauseState(containerEl);
   const script = doc.createElement('script');
   directSetAttribute(script, 'type', 'qwik/json');
   script.textContent = escapeText(JSON.stringify(data.state, undefined, qDev ? '  ' : undefined));
@@ -182,7 +191,7 @@ const hasContext = (el: Element) => {
   return !!tryGetContext(el);
 };
 
-export const snapshotState = (containerEl: Element): SnapshotResult => {
+export const pauseState = (containerEl: Element): SnapshotResult => {
   const containerState = getContainerState(containerEl);
   const doc = getDocument(containerEl);
   const elementToIndex = new Map<Element, string | null>();
@@ -193,9 +202,11 @@ export const snapshotState = (containerEl: Element): SnapshotResult => {
   elements.forEach((node) => {
     const ctx = tryGetContext(node)!;
     collectProps(node, ctx.$props$, collector);
+
     ctx.$contexts$?.forEach((ctx) => {
       collectValue(ctx, collector);
     });
+
     ctx.$listeners$?.forEach((listeners) => {
       for (const l of listeners) {
         const captured = (l as QRLInternal).$captureRef$;
@@ -204,9 +215,14 @@ export const snapshotState = (containerEl: Element): SnapshotResult => {
         }
       }
     });
+
     ctx.$watches$.forEach((watch) => {
       collector.$watches$.push(watch);
     });
+
+    ctx.$refMap$.$array$.forEach((obj) => {
+      collectValue(obj, collector);
+    });
   });
 
   // Convert objSet to array

starters/apps/base/gitignore

@@ -33,3 +33,7 @@ lerna-debug.log*
 *.njsproj
 *.sln
 *.sw?
+
+# Yarn
+.yarn/*
+!.yarn/releases