coralite 0.40.2 → 0.42.0

package/dist/lib/index.js

@@ -2248,6 +2248,22 @@ function findAndExtractScript(code) {
             let startLine = value.loc.start.line - 1;
             let prefix = "";
             let content = "";
+            let instanceIdVar;
+            if (value.params && value.params[0]) {
+              const param = value.params[0];
+              if (param.type === "Identifier") {
+                instanceIdVar = param.name + ".instanceId";
+              } else if (param.type === "ObjectPattern") {
+                const idProp = param.properties.find((p) => p.key?.type === "Identifier" && p.key?.name === "instanceId");
+                if (idProp) {
+                  if (idProp.value.type === "Identifier") {
+                    instanceIdVar = idProp.value.name;
+                  }
+                }
+              }
+            } else if (method) {
+              instanceIdVar = "this._instanceId";
+            }
             let source = code.slice(value.start, value.end);
             const replacements = [];
             walkJS(value, {
@@ -2262,7 +2278,7 @@ function findAndExtractScript(code) {
                   replacements.push({
                     start: node2.right.end - value.start,
                     end: node2.right.end - value.start,
-                    replacement: ")"
+                    replacement: `, ${instanceIdVar})`
                   });
                 }
               },
@@ -2292,7 +2308,7 @@ function findAndExtractScript(code) {
                     replacements.push({
                       start: arg.end - value.start,
                       end: arg.end - value.start,
-                      replacement: ")"
+                      replacement: `, ${instanceIdVar})`
                     });
                   }
                 }
@@ -3460,62 +3476,131 @@ var staticAssetPlugin = (assets = []) => {
 };
 
 // plugins/testing.js
-function traverseAndAddTestId(children) {
+function traverseAndAddTestId(children, instanceId, { autoTestId = false, counters = {}, mode = "production" } = {}) {
   if (!Array.isArray(children)) {
     return;
   }
+  const isProduction = mode === "production";
+  const isDevOrTest = mode === "development" || mode === "testing";
+  let prefix = "";
+  if (instanceId === "page") {
+    prefix = "page__";
+  } else if (instanceId) {
+    prefix = `${instanceId}__`;
+  }
   for (let i = 0; i < children.length; i++) {
     const node = children[i];
-    if (node.type === "tag" && node.attribs?.ref) {
-      if (!node.attribs["data-testid"]) {
-        node.attribs["data-testid"] = node.attribs.ref;
+    if (node.type === "tag") {
+      if (node.attribs) {
+        if (node.attribs.test !== void 0) {
+          delete node.attribs.test;
+        }
+        if (node.attribs["data-testid"] !== void 0) {
+          if (isProduction) {
+            delete node.attribs["data-testid"];
+          } else if (isDevOrTest) {
+            const val = node.attribs["data-testid"];
+            if (prefix && !val.startsWith(prefix)) {
+              node.attribs["data-testid"] = `${prefix}${val}`;
+            }
+          }
+        }
+      }
+      if (autoTestId && isDevOrTest) {
+        const tagName = node.name.toLowerCase();
+        const isInteractive = [
+          "button",
+          "a",
+          "input",
+          "form",
+          "select",
+          "textarea"
+        ].includes(tagName) || node.attribs && (node.attribs.tabindex !== void 0 || node.attribs.role && ["button", "link", "checkbox"].includes(node.attribs.role)) || node.slots;
+        if (isInteractive) {
+          if (!counters[tagName]) {
+            counters[tagName] = 0;
+          }
+          const index = counters[tagName]++;
+          if (!node.attribs) {
+            node.attribs = {};
+          }
+          if (!node.attribs["data-testid"]) {
+            node.attribs["data-testid"] = `${prefix}${tagName}-${index}`;
+          }
+        }
       }
     }
     if (node.children?.length > 0) {
-      traverseAndAddTestId(node.children);
+      traverseAndAddTestId(node.children, instanceId, {
+        autoTestId,
+        counters,
+        mode
+      });
     }
   }
 }
 var testingPlugin = definePlugin({
   name: "testing",
   server: {
-    onBeforeComponentRender: ({ instanceId, refs }) => {
-      for (let i = 0; i < refs.length; i++) {
-        const ref = refs[i];
-        const uniqueRefValue = `${instanceId}__${ref.name}`;
-        if (ref.element.attribs) {
-          const currentTestId = ref.element.attribs["data-testid"];
-          if (!currentTestId || currentTestId === ref.name) {
-            ref.element.attribs["data-testid"] = uniqueRefValue;
-          }
-        }
+    onBeforeBuild: ({ app }) => {
+      if (app.options.mode !== "testing") {
+        return;
       }
+      app.options.externalStyles = app.options.externalStyles || [];
+      const velocityStyle = `
+*, *::before, *::after {
+  transition: none !important;
+  animation: none !important;
+  scroll-behavior: auto !important;
+}
+`.trim();
+      app.options.externalStyles.push(`data:text/css;base64,${Buffer.from(velocityStyle).toString("base64")}`);
     },
-    onComponentSet: ({ component }) => {
-      const children = component?.template?.children;
-      if (children) {
-        traverseAndAddTestId(children);
+    onBeforeComponentRender: ({ instanceId, template, app }) => {
+      const mode = app.options.mode;
+      const isDevOrTest = mode === "development" || mode === "testing";
+      const counters = {};
+      const templateNode = template;
+      if (templateNode && templateNode.children) {
+        traverseAndAddTestId(templateNode.children, instanceId, {
+          autoTestId: isDevOrTest,
+          counters,
+          mode
+        });
       }
     },
-    onPageSet: ({ elements }) => {
-      const children = elements?.root?.children;
-      if (children) {
-        traverseAndAddTestId(children);
+    onAfterComponentRender: ({ result, app }) => {
+      const mode = app.options.mode;
+      if (mode !== "production") {
+        return;
       }
-    }
-  },
-  client: {
-    onBeforeComponentRender: ({ instanceId, refs }) => {
-      for (let i = 0; i < refs.length; i++) {
-        const ref = refs[i];
-        const uniqueRefValue = `${instanceId}__${ref.name}`;
-        if (ref.element && ref.element.setAttribute) {
-          const currentTestId = ref.element.getAttribute("data-testid");
-          if (!currentTestId || currentTestId === ref.name) {
-            ref.element.setAttribute("data-testid", uniqueRefValue);
+      const traverse = (children) => {
+        if (!Array.isArray(children)) {
+          return;
+        }
+        for (const node of children) {
+          if (node.type === "tag" && node.attribs) {
+            delete node.attribs["data-testid"];
+            delete node.attribs.test;
+          }
+          if (node.children) {
+            traverse(node.children);
           }
         }
+      };
+      if (result && result.children) {
+        traverse(result.children);
       }
+    },
+    onPageSet: ({ elements, app }) => {
+      const mode = app.options.mode;
+      const isDevOrTest = mode === "development" || mode === "testing";
+      const counters = {};
+      traverseAndAddTestId(elements?.root?.children, "page", {
+        autoTestId: isDevOrTest,
+        counters,
+        mode
+      });
     }
   }
 });
@@ -4190,8 +4275,15 @@ function createComponentDefinition({ app }) {
         }
       }
     }
-    if (typeof server === "function") {
-      const serverResult = await server({
+    let serverToExecute = server;
+    if (app.options.mode === "testing" && app.options.testing?.mocks) {
+      const mock = app.options.testing.mocks[module.id];
+      if (mock && typeof mock.server === "function") {
+        serverToExecute = mock.server;
+      }
+    }
+    if (typeof serverToExecute === "function") {
+      const serverResult = await serverToExecute({
         ...context2,
         ...initialState
       });
@@ -4609,8 +4701,8 @@ function createPageHandlers({
       data,
       app
     });
-    const isProduction = app.options.mode === "production";
-    if (isProduction && !data.virtual) {
+    const isStatic = app.options.mode === "production" || app.options.mode === "testing";
+    if (isStatic && !data.virtual) {
       delete data.content;
     }
     return {
@@ -4619,16 +4711,16 @@ function createPageHandlers({
         state: mappedContext.state,
         page: mappedContext.page,
         path: mappedContext.data.path,
-        root: isProduction ? null : mappedContext.elements.root,
-        customElements: isProduction ? null : mappedContext.elements.customElements,
-        tempElements: isProduction ? null : mappedContext.elements.tempElements,
-        skipRenderElements: isProduction ? null : mappedContext.elements.skipRenderElements
+        root: isStatic ? null : mappedContext.elements.root,
+        customElements: isStatic ? null : mappedContext.elements.customElements,
+        tempElements: isStatic ? null : mappedContext.elements.tempElements,
+        skipRenderElements: isStatic ? null : mappedContext.elements.skipRenderElements
       },
       state: mappedContext.state
     };
   };
   const onPageUpdateLocal = async (newValue, oldValue) => {
-    if (app.options.mode === "production") {
+    if (app.options.mode === "production" || app.options.mode === "testing") {
       if (!newValue.result) {
         await onFileSetLocal(newValue);
       }
@@ -4869,7 +4961,7 @@ ${css}
     root.children.unshift(styleElement);
   }
 }
-function injectReadinessScript(root, head, hasScripts) {
+function injectReadinessScript(root, head, hasScripts, mode) {
   const readinessScriptElement = createCoraliteElement({
     type: "tag",
     name: "script",
@@ -4878,6 +4970,12 @@ function injectReadinessScript(root, head, hasScripts) {
     children: []
   });
   let data = "class CoraliteLifecycleManager { constructor() { this.defined = new Promise(r => this._dr = r); this.rendered = new Promise(r => this._rr = r); this.hydrated = new Promise(r => this._hr = r); this._t = 0; this._rc = 0; this._hc = 0; this._ts = 0; this._dt = new Set(); this._ip = new WeakMap(); this._ir = new WeakMap(); this._rs = new WeakSet(); this._hs = new WeakSet(); this._s = false; } _start(t, ts) { this._t = t; this._ts = ts; this._s = true; this._check(); } _check() { if (!this._s) return; if (this._rc >= this._t) this._rr(); if (this._hc >= this._t) this._hr(); if (this._dt.size >= this._ts) this._dr(); } _markDefined(tag) { this._dt.add(tag); this._check(); } _markInstanceRendered(el) { if (el.hasAttribute('data-coralite-initial') && !this._rs.has(el)) { this._rs.add(el); this._rc++; this._check(); } } _markInstanceReady(el) { const r = this._ir.get(el); r && r(); this._ip.set(el, Promise.resolve()); if (el.hasAttribute('data-coralite-initial') && !this._hs.has(el)) { this._hs.add(el); this._hc++; this._check(); } } waitFor(el) { let p = this._ip.get(el); if (!p) { p = new Promise(r => this._ir.set(el, r)); this._ip.set(el, p); } return p; } } window.__coralite__ = { lifecycle: new CoraliteLifecycleManager() };";
+  if (mode) {
+    data += ` window.__coralite__.mode = '${mode}';`;
+  }
+  if (mode === "testing") {
+    data += " window.__coralite__.components = {}; window.__coralite__.events = [];";
+  }
   if (!hasScripts) {
     data += " window.__coralite__.lifecycle._start(0, 0);";
   }
@@ -4892,8 +4990,12 @@ function injectReadinessScript(root, head, hasScripts) {
     root.children.unshift(readinessScriptElement);
   }
 }
-function injectImportMap(root, head, importMap) {
-  if (!importMap || Object.keys(importMap).length === 0) {
+function injectImportMap(root, head, importMap, base) {
+  const finalImportMap = { ...importMap };
+  if (base) {
+    finalImportMap["assets/js/manifest.js"] = `${base}assets/js/manifest.js`;
+  }
+  if (Object.keys(finalImportMap).length === 0) {
     return;
   }
   const importMapElement = createCoraliteElement({
@@ -4907,7 +5009,7 @@ function injectImportMap(root, head, importMap) {
   });
   importMapElement.children.push(createCoraliteTextNode({
     type: "text",
-    data: JSON.stringify({ imports: importMap }),
+    data: JSON.stringify({ imports: finalImportMap }),
     parent: importMapElement
   }));
   if (head) {
@@ -4974,25 +5076,50 @@ function resolvePageQueue(pagesCollection, path2) {
 function generateClientRuntime({
   base,
   sharedChunkPath,
-  chunkManifest,
   declarativeTags = [],
-  hydrationData = "{}"
+  hydrationData = "{}",
+  mode = "production"
 }) {
   return `
 import { getClientContext, createCoraliteClass, globalClientHooks } from '${base}assets/js/${sharedChunkPath}';
+import componentManifest from '${base}assets/js/manifest.js';
 
 (async () => {
   const hydrationData = ${hydrationData};
   const declarativeTags = ${JSON.stringify(declarativeTags)};
-  const initialElements = Array.from(document.querySelectorAll('[data-coralite-initial]'))
-    .filter(el => declarativeTags.includes(el.tagName.toLowerCase()));
+  window.__coralite_mode__ = '${mode}';
+
+  const initialElements = Array.from(document.querySelectorAll('[data-cid]'))
+    .filter(el => {
+      const tagName = el.tagName.toLowerCase();
+      const isDeclarative = declarativeTags.includes(tagName);
+      const isInitial = el.hasAttribute('data-coralite-initial');
+
+      if (window['__coralite__'] && window['__coralite__'].components && isInitial) {
+        const cid = el.getAttribute('data-cid');
+        if (cid && !hydrationData[cid]) {
+          const error = new Error('Coralite Hydration Mismatch: Component with data-cid "' + cid + '" (' + tagName + ') has no matching server hydration data.');
+          if (typeof window['showCoraliteError'] === 'function') {
+            window['showCoraliteError'](error);
+          } else {
+            console.error(error);
+            const overlay = document.createElement('div');
+            overlay.style = 'position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(255,0,0,0.9);color:white;padding:20px;z-index:10000;font-family:monospace;white-space:pre-wrap;overflow:auto;';
+            overlay.innerHTML = '<h1>Coralite Hydration Mismatch</h1><p>' + error.message + '</p>';
+            document.body.appendChild(overlay);
+          }
+          throw error;
+        }
+      }
+
+      return isDeclarative && isInitial;
+    });
   if (window.__coralite__ && window.__coralite__.lifecycle) {
     window.__coralite__.lifecycle._start(initialElements.length, declarativeTags.length);
   }
   globalThis.executableScripts = [];
   globalThis.globalAbortController = new AbortController();
 
-  const componentManifest = ${JSON.stringify(chunkManifest)};
   const loadCache = {};
 
   const loadComponent = (componentId) => {
@@ -5007,7 +5134,10 @@ import { getClientContext, createCoraliteClass, globalClientHooks } from '${base
 
       if (cssPath) {
         const fullCssPath = '${base}assets/css/' + cssPath;
-        if (!document.querySelector('link[href="' + fullCssPath + '"]')) {
+        const inlineStyles = document.getElementById('coralite-inline-styles');
+        const hasStyleInInline = inlineStyles && inlineStyles.textContent.includes('[data-style-selector="' + componentId + '"]');
+
+        if (!document.querySelector('link[href="' + fullCssPath + '"]') && !hasStyleInInline) {
           const link = document.createElement('link');
           link.rel = 'stylesheet';
           link.href = fullCssPath;
@@ -5072,8 +5202,38 @@ import { getClientContext, createCoraliteClass, globalClientHooks } from '${base
     return element;
   };
 
-  window.processHTML = (html) => {
+  window.processHTML = (html, instanceId) => {
     if (typeof html !== 'string') return html;
+
+    const mode = window.__coralite_mode__;
+    const isDevOrTest = mode === 'development' || mode === 'testing';
+    const isProduction = mode === 'production';
+
+    if (isDevOrTest || isProduction) {
+      html = html.replace(/<([a-zA-Z0-9-]+)([^>]*)>/g, (match, tagName, attrs) => {
+        let newAttrs = attrs;
+
+        // Strip deprecated 'test' attribute
+        newAttrs = newAttrs.replace(/\\s+test\\s*=\\s*(['"]).*?\\1/g, '');
+
+        // Handle data-testid
+        const testIdRegex = /\\s+data-testid\\s*=\\s*(['"])(.*?)\\1/g;
+        if (isProduction) {
+          newAttrs = newAttrs.replace(testIdRegex, '');
+        } else if (isDevOrTest) {
+          const prefix = instanceId ? instanceId + '__' : '';
+          if (prefix) {
+            newAttrs = newAttrs.replace(testIdRegex, (attrMatch, quote, testValue) => {
+              if (testValue.startsWith(prefix)) return attrMatch;
+              return ' data-testid="' + prefix + testValue + '"';
+            });
+          }
+        }
+
+        return '<' + tagName + newAttrs + '>';
+      });
+    }
+
     const matches = html.matchAll(/<([a-zA-Z0-9-]+)/g);
     for (const match of matches) {
       const tag = match[1].toLowerCase();
@@ -5424,20 +5584,11 @@ function createRenderer({
       componentState = cleanKeys(componentState);
     }
     const module = cloneModuleInstance(moduleComponent.result);
-    if (module.values && module.values.refs) {
-      for (let i = 0; i < module.values.refs.length; i++) {
-        const ref = module.values.refs[i];
-        const uniqueRefValue = `${instanceId}__${ref.name}`;
-        if (ref.element && ref.element.attribs) {
-          ref.element.attribs.ref = uniqueRefValue;
-        }
-        componentState[`ref_${ref.name}`] = uniqueRefValue;
-      }
-    }
     const mappedComponentContext = await hooks.trigger("onBeforeComponentRender", {
       state: componentState,
       componentId: module.id,
       instanceId,
+      template: module.template,
       refs: module.values.refs,
       textNodes: module.values.textNodes,
       attributes: module.values.attributes,
@@ -5447,6 +5598,16 @@ function createRenderer({
       app
     });
     componentState = mappedComponentContext.state;
+    if (module.values && module.values.refs) {
+      for (let i = 0; i < module.values.refs.length; i++) {
+        const ref = module.values.refs[i];
+        const uniqueRefValue = `${instanceId}__${ref.name}`;
+        if (ref.element && ref.element.attribs) {
+          ref.element.attribs.ref = uniqueRefValue;
+        }
+        componentState[`ref_${ref.name}`] = uniqueRefValue;
+      }
+    }
     const result = module.template;
     if (module.styles.length) {
       const selector = module.id;
@@ -5947,27 +6108,7 @@ function createRenderer({
           injectExternalStyles(mappedComponent.root, headElement, normalizedOptions.externalStyles);
         }
         if (mappedSessionObject.styles.size > 0) {
-          if (isProduction && globalScriptResult && globalScriptResult.manifest) {
-            const cssPaths = [];
-            const remainingStyles = /* @__PURE__ */ new Map();
-            for (const [selector, css] of mappedSessionObject.styles) {
-              const entry = globalScriptResult.manifest[selector];
-              if (entry && entry.css) {
-                cssPaths.push(entry.css);
-              } else {
-                remainingStyles.set(selector, css);
-              }
-            }
-            if (cssPaths.length > 0) {
-              const base = normalizedOptions.baseURL.endsWith("/") ? normalizedOptions.baseURL : normalizedOptions.baseURL + "/";
-              injectExternalStyleLinks(mappedComponent.root, headElement, cssPaths, base);
-            }
-            if (remainingStyles.size > 0) {
-              injectStyles(mappedComponent.root, headElement, remainingStyles);
-            }
-          } else {
-            injectStyles(mappedComponent.root, headElement, mappedSessionObject.styles);
-          }
+          injectStyles(mappedComponent.root, headElement, mappedSessionObject.styles);
         }
         if (componentsToInclude.size > 0) {
           const targetElement = headElement || bodyElement || mappedComponent.root;
@@ -6013,20 +6154,9 @@ function createRenderer({
               error: new Error(JSON.stringify(scriptResult.manifest))
             });
           }
-          const chunkManifest = {};
-          for (const tag of componentsToInclude) {
-            if (scriptResult.manifest[tag]) {
-              chunkManifest[tag] = scriptResult.manifest[tag];
-            }
-          }
-          for (const tag in scriptResult.manifest) {
-            if (tag !== "coralite-runtime" && !chunkManifest[tag]) {
-              chunkManifest[tag] = scriptResult.manifest[tag];
-            }
-          }
-          injectReadinessScript(mappedComponent.root, headElement, true);
-          injectImportMap(mappedComponent.root, headElement, scriptResult.importMap);
+          injectReadinessScript(mappedComponent.root, headElement, true, normalizedOptions.mode);
           const base = normalizedOptions.baseURL.endsWith("/") ? normalizedOptions.baseURL : normalizedOptions.baseURL + "/";
+          injectImportMap(mappedComponent.root, headElement, scriptResult.importMap, base);
           const hydrationData = {};
           for (const [id, instance] of Object.entries(instances)) {
             if (instance.state && Object.keys(instance.state).length > 0) {
@@ -6037,9 +6167,9 @@ function createRenderer({
           const scriptContent = generateClientRuntime({
             base,
             sharedChunkPath: scriptResult.manifest["coralite-runtime"],
-            chunkManifest,
             declarativeTags: Array.from(declarativeTags),
-            hydrationData: serialize2(hydrationData)
+            hydrationData: serialize2(hydrationData),
+            mode: normalizedOptions.mode
           });
           const scriptElement = createCoraliteElement({
             type: "tag",
@@ -6057,7 +6187,7 @@ function createRenderer({
         }
         removeElements(mappedComponent.skipRenderElements, true);
         if (!mappedSessionObject.scripts.content[mappedComponent.path.pathname]) {
-          injectReadinessScript(mappedComponent.root, headElement, false);
+          injectReadinessScript(mappedComponent.root, headElement, false, normalizedOptions.mode);
         }
         const rawHTML = transformNode(mappedComponent.root);
         const result = {
@@ -6158,10 +6288,74 @@ function createRenderer({
     if (!buildOptions) {
       buildOptions = {};
     }
-    if (normalizedOptions.mode === "production") {
+    const projectRoot = app.options.projectRoot || process.cwd();
+    const cacheDir = join4(projectRoot, ".coralite");
+    const manifestPath = join4(cacheDir, "manifest.json");
+    let manifest = {
+      physical: {},
+      virtual: {},
+      dependencies: {},
+      components: {}
+    };
+    try {
+      const content = await readFile3(manifestPath, "utf8");
+      manifest = JSON.parse(content);
+      if (!manifest.components) {
+        manifest.components = {};
+      }
+    } catch (e) {
+      if (e.code !== "ENOENT") {
+        handleError2({
+          level: "WARN",
+          message: `Could not parse manifest at ${manifestPath}: ${e.message}. Starting with fresh manifest.`
+        });
+      }
+    }
+    let componentBuildInfo = {
+      completed: 0,
+      skipped: 0,
+      details: []
+    };
+    if (normalizedOptions.mode === "production" || normalizedOptions.mode === "testing") {
       const allComponentIds = app.components.list.map((c) => c.result.id);
       globalScriptResult = await scriptManager.compileAllInstances(allComponentIds, normalizedOptions.mode);
       Object.assign(outputFiles, globalScriptResult.outputFiles);
+      if (globalScriptResult.manifest) {
+        const manifestJS = `export default ${JSON.stringify(globalScriptResult.manifest)};`;
+        outputFiles["manifest.js"] = {
+          path: "assets/js/manifest.js",
+          hashedPath: "manifest.js",
+          text: manifestJS
+        };
+        const newComponentManifest = globalScriptResult.manifest;
+        const oldComponentManifest = manifest.components;
+        for (const [id, value] of Object.entries(newComponentManifest)) {
+          if (id === "coralite-runtime") {
+            continue;
+          }
+          const isNew = !oldComponentManifest[id];
+          const hasChanged = !isNew && (value.js !== oldComponentManifest[id].js || value.css !== oldComponentManifest[id].css);
+          if (isNew || hasChanged) {
+            componentBuildInfo.completed++;
+            componentBuildInfo.details.push({
+              id,
+              status: "built",
+              reason: isNew ? "New component" : "Source changed"
+            });
+          } else {
+            componentBuildInfo.skipped++;
+            componentBuildInfo.details.push({
+              id,
+              status: "skipped"
+            });
+          }
+        }
+        if (typeof buildOptions.onComponentBuild === "function") {
+          await buildOptions.onComponentBuild(componentBuildInfo);
+        } else if (typeof normalizedOptions.onComponentBuild === "function") {
+          await normalizedOptions.onComponentBuild(componentBuildInfo);
+        }
+      }
     } else if (normalizedOptions.mode === "development") {
       if (!siteWideBundlePromise) {
         const bundlePromise = (async () => {
@@ -6173,6 +6367,14 @@ function createRenderer({
               delete outputFiles[key];
             }
             Object.assign(outputFiles, result.outputFiles);
+            if (result.manifest) {
+              const manifestJS = `export default ${JSON.stringify(result.manifest)};`;
+              outputFiles["manifest.js"] = {
+                path: "assets/js/manifest.js",
+                hashedPath: "manifest.js",
+                text: manifestJS
+              };
+            }
           }
           return result;
         })();
@@ -6219,42 +6421,28 @@ function createRenderer({
       }
     }
     sealedQueues.add(buildId);
-    const projectRoot = app.options.projectRoot || process.cwd();
-    const cacheDir = join4(projectRoot, ".coralite");
-    const manifestPath = join4(cacheDir, "manifest.json");
-    let manifest = {
-      physical: {},
-      virtual: {},
-      dependencies: {}
-    };
-    try {
-      const content = await readFile3(manifestPath, "utf8");
-      manifest = JSON.parse(content);
-      for (const [path2, metadata] of Object.entries(manifest.physical || {})) {
-        if (metadata.dependencies) {
-          app._dependencyGraph.directPageComponents[path2] = metadata.dependencies;
-        }
+    for (const [path2, metadata] of Object.entries(manifest.physical || {})) {
+      if (metadata.dependencies) {
+        app._dependencyGraph.directPageComponents[path2] = metadata.dependencies;
       }
-      for (const [path2, metadata] of Object.entries(manifest.virtual || {})) {
-        if (metadata.dependencies) {
-          app._dependencyGraph.directPageComponents[path2] = metadata.dependencies;
-        }
-      }
-      app._refreshDependencyGraph();
-    } catch (e) {
-      if (e.code !== "ENOENT") {
-        handleError2({
-          level: "WARN",
-          message: `Could not parse manifest at ${manifestPath}: ${e.message}. Starting with fresh manifest.`
-        });
+    }
+    for (const [path2, metadata] of Object.entries(manifest.virtual || {})) {
+      if (metadata.dependencies) {
+        app._dependencyGraph.directPageComponents[path2] = metadata.dependencies;
       }
     }
+    app._refreshDependencyGraph();
+    const mocksStr = app.options.testing?.mocks ? serialize2(app.options.testing.mocks) : "";
+    const mocksHash = hash(mocksStr);
+    const mocksChanged = manifest.testingMocksHash !== mocksHash;
     const pagesToRender = [];
     const skippedPages = [];
     const newManifest = {
       physical: {},
       virtual: {},
-      dependencies: {}
+      dependencies: {},
+      components: {},
+      testingMocksHash: mocksHash
     };
     const componentChanges = /* @__PURE__ */ new Map();
     const allComponents = app.components.list;
@@ -6277,7 +6465,7 @@ function createRenderer({
     };
     for (const pageItem of queue) {
       let shouldRebuild = false;
-      if (normalizedOptions.output && normalizedOptions.mode === "production") {
+      if (normalizedOptions.output && (normalizedOptions.mode === "production" || normalizedOptions.mode === "testing")) {
         const relativeDir = relative3(normalizedOptions.path.pages, pageItem.path.dirname);
         const outFile = join4(normalizedOptions.output, relativeDir, pageItem.path.filename);
         try {
@@ -6296,6 +6484,9 @@ function createRenderer({
       if (componentIds.some((id) => componentChanges.get(id))) {
         shouldRebuild = true;
       }
+      if (mocksChanged) {
+        shouldRebuild = true;
+      }
       if (pageItem.virtual) {
         if (shouldRebuild || pageItem.volatile || !manifest.virtual || !manifest.virtual[pageItem.path.pathname] || String(manifest.virtual[pageItem.path.pathname].cacheKey) !== String(pageItem.cacheKey) || normalizedOptions.mode === "development") {
           shouldRebuild = true;
@@ -6427,6 +6618,7 @@ function createRenderer({
       }
       try {
         await mkdir2(cacheDir, { recursive: true });
+        newManifest.components = globalScriptResult?.manifest || {};
         const tempManifestPath = `${manifestPath}.tmp`;
         await writeFile(tempManifestPath, JSON.stringify(newManifest, null, 2));
         await rename(tempManifestPath, manifestPath);
@@ -6493,8 +6685,10 @@ async function createCoralite({
   ignoreByAttribute,
   skipRenderByAttribute,
   onError,
+  onComponentBuild,
   mode = "production",
-  output
+  output,
+  testing
 }) {
   if (!components || typeof components !== "string") {
     handleError({
@@ -6530,7 +6724,9 @@ async function createCoralite({
     skipRenderByAttribute,
     mode,
     path: path2,
-    output: output ? normalize(output) : void 0
+    output: output ? normalize(output) : void 0,
+    onComponentBuild,
+    testing
   };
   const trackedOutputFiles = /* @__PURE__ */ new Set();
   const app = {
@@ -6781,9 +6977,7 @@ async function createCoralite({
       return results;
     }
   });
-  if (app.options.mode === "development") {
-    app.options.plugins.unshift(testingPlugin);
-  }
+  app.options.plugins.unshift(testingPlugin);
   app.options.plugins.unshift(metadataPlugin);
   if (assets) {
     app.options.plugins.unshift(staticAssetPlugin(assets));
@@ -6839,7 +7033,7 @@ async function createCoralite({
     onUpdate: handlers.onPageUpdate,
     onDelete: handlers.onPageDelete
   });
-  if (app.options.mode === "production") {
+  if (app.options.mode === "production" || app.options.mode === "testing") {
     for await (const file of discoverHtmlFiles({
       path: app.options.pages,
       recursive: true,
@@ -6880,6 +7074,30 @@ function defineConfig(options) {
       throw new CoraliteError(`Config property "${prop}" cannot be empty`);
     }
   }
+  if (options.mode !== void 0) {
+    const validModes = ["production", "development", "testing"];
+    if (!validModes.includes(options.mode)) {
+      throw new CoraliteError(`Invalid mode: "${options.mode}". Valid modes are: ${validModes.join(", ")}`);
+    }
+  }
+  if (options.testing !== void 0) {
+    if (typeof options.testing !== "object" || options.testing === null) {
+      throw new CoraliteError('Config property "testing" must be an object');
+    }
+    if (options.testing.mocks !== void 0) {
+      if (typeof options.testing.mocks !== "object" || options.testing.mocks === null) {
+        throw new CoraliteError('Config property "testing.mocks" must be an object');
+      }
+      for (const [key, mock] of Object.entries(options.testing.mocks)) {
+        if (typeof mock !== "object" || mock === null) {
+          throw new CoraliteError(`Mock for component "${key}" must be an object`);
+        }
+        if (mock.server !== void 0 && typeof mock.server !== "function") {
+          throw new CoraliteError(`Mock server for component "${key}" must be a function`);
+        }
+      }
+    }
+  }
   if ("plugins" in options && options.plugins !== void 0) {
     if (!Array.isArray(options.plugins)) {
       throw new CoraliteError(