coralite 0.40.1 → 0.41.0

package/dist/lib/index.js

@@ -3460,59 +3460,106 @@ var staticAssetPlugin = (assets = []) => {
 };
 
 // plugins/testing.js
-function traverseAndAddTestId(children) {
+function traverseAndAddTestId(children, instanceId, { autoTestId = false, counters = {} } = {}) {
   if (!Array.isArray(children)) {
     return;
   }
   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?.ref) {
+        if (!node.attribs["data-testid"]) {
+          const refValue = node.attribs.ref;
+          const prefix = instanceId ? `${instanceId}__` : "";
+          if (instanceId === "page" && refValue.includes("__")) {
+            node.attribs["data-testid"] = refValue;
+          } else {
+            node.attribs["data-testid"] = `${prefix}${refValue}`;
+          }
+        }
+      } else if (autoTestId && instanceId) {
+        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"] = `${instanceId}__${tagName}-${index}`;
+          }
+        }
       }
     }
     if (node.children?.length > 0) {
-      traverseAndAddTestId(node.children);
+      traverseAndAddTestId(node.children, instanceId, {
+        autoTestId,
+        counters
+      });
     }
   }
 }
 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 isTesting = app.options.mode === "testing";
+      const counters = {};
+      const templateNode = template;
+      if (templateNode && templateNode.children) {
+        traverseAndAddTestId(templateNode.children, instanceId, {
+          autoTestId: isTesting,
+          counters
+        });
       }
     },
-    onPageSet: ({ elements }) => {
-      const children = elements?.root?.children;
-      if (children) {
-        traverseAndAddTestId(children);
-      }
+    onPageSet: ({ elements, app }) => {
+      const isTesting = app.options.mode === "testing";
+      const counters = {};
+      traverseAndAddTestId(elements?.root?.children, "page", {
+        autoTestId: isTesting,
+        counters
+      });
     }
   },
   client: {
     onBeforeComponentRender: ({ instanceId, refs }) => {
       for (let i = 0; i < refs.length; i++) {
         const ref = refs[i];
-        const uniqueRefValue = `${instanceId}__${ref.name}`;
+        const prefix = `${instanceId}__`;
+        const uniqueRefValue = ref.element && ref.element.getAttribute("ref");
         if (ref.element && ref.element.setAttribute) {
           const currentTestId = ref.element.getAttribute("data-testid");
           if (!currentTestId || currentTestId === ref.name) {
-            ref.element.setAttribute("data-testid", uniqueRefValue);
+            if (uniqueRefValue && uniqueRefValue.startsWith(prefix)) {
+              ref.element.setAttribute("data-testid", uniqueRefValue);
+            } else {
+              ref.element.setAttribute("data-testid", `${prefix}${ref.name}`);
+            }
           }
         }
       }
@@ -4190,8 +4237,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
       });
@@ -4566,7 +4620,6 @@ function createPageHandlers({
   scriptManager,
   createSession
 }) {
-  const { pageCustomElements, childCustomElements } = app._dependencyGraph;
   const onFileSetLocal = async (data) => {
     const rootPath = data.type === "component" ? app.options.path.components : app.options.path.pages;
     const urlPathname = pathToFileURL3(join3("/", relative2(rootPath, data.path.pathname))).pathname;
@@ -4597,34 +4650,11 @@ function createPageHandlers({
       };
     }
     const elements = parseHTML(data.content, app.options.ignoreByAttribute, app.options.skipRenderByAttribute, handleError2);
-    if (true) {
-      const customElementsList = elements && elements.customElements ? elements.customElements : [];
-      for (let i = 0; i < customElementsList.length; i++) {
-        const name = customElementsList[i].name;
-        if (!pageCustomElements[name]) {
-          pageCustomElements[name] = /* @__PURE__ */ new Set();
-          app._dependencyGraph.pageCustomElements[name] = pageCustomElements[name];
-          const component = app.components.getItem(name);
-          if (component && component.result && component.result.customElements && component.result.customElements.length) {
-            const stack = [component.result.customElements];
-            while (stack.length > 0) {
-              const current = stack.pop();
-              for (let i2 = 0; i2 < current.length; i2++) {
-                const element = current[i2];
-                if (!childCustomElements[element.name]) {
-                  childCustomElements[element.name] = name;
-                  const comp = app.components.getItem(element.name);
-                  if (comp && comp.result && comp.result.customElements && comp.result.customElements.length) {
-                    stack.push(comp.result.customElements);
-                  }
-                }
-              }
-            }
-          }
-        }
-        const customElements = pageCustomElements[name];
-        customElements.add(data.path.pathname);
-      }
+    const directPageComponents = app._dependencyGraph.directPageComponents;
+    if (elements && elements.customElements && directPageComponents) {
+      const directComponents = elements.customElements.map((el) => el.name);
+      directPageComponents[data.path.pathname] = directComponents;
+      app._refreshDependencyGraph();
     }
     const mappedContext = await triggerHook("onPageSet", {
       elements,
@@ -4633,8 +4663,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 {
@@ -4643,27 +4673,25 @@ 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);
+      }
       return newValue.result;
     }
-    let newCustomElements;
     if (!newValue.result) {
       const res = await onFileSetLocal(newValue);
       newValue.result = res.value;
-      newCustomElements = res.value.customElements;
-    } else {
-      newCustomElements = newValue.result.customElements;
     }
-    const oldElements = (oldValue.result.customElements || []).slice();
     const mappedContext = await triggerHook("onPageUpdate", {
       elements: newValue.result,
       page: newValue.result.page,
@@ -4673,51 +4701,31 @@ function createPageHandlers({
     });
     newValue.result = mappedContext.elements;
     newValue = mappedContext.newValue;
-    for (let i = 0; i < newCustomElements.length; i++) {
-      const name = newCustomElements[i].name;
-      let hasElement = false;
-      for (let j = 0; j < oldElements.length; j++) {
-        if (name === oldElements[j].name) {
-          hasElement = true;
-          oldElements.splice(j, 1);
-          break;
-        }
-      }
-      if (!hasElement) {
-        if (!pageCustomElements[name]) {
-          pageCustomElements[name] = /* @__PURE__ */ new Set();
-          app._dependencyGraph.pageCustomElements[name] = pageCustomElements[name];
-        }
-        const customElements = pageCustomElements[name];
-        customElements.add(newValue.path.pathname);
+    const elements = parseHTML(newValue.content, app.options.ignoreByAttribute, app.options.skipRenderByAttribute, handleError2);
+    const directPageComponents = app._dependencyGraph.directPageComponents;
+    if (directPageComponents) {
+      if (elements && elements.customElements) {
+        const directComponents = elements.customElements.map((el) => el.name);
+        directPageComponents[newValue.path.pathname] = directComponents;
+      } else {
+        delete directPageComponents[newValue.path.pathname];
       }
     }
-    oldElements.forEach((oe) => {
-      if (pageCustomElements[oe.name]) {
-        const customElements = pageCustomElements[oe.name];
-        customElements.delete(newValue.path.pathname);
-      }
-    });
+    app._refreshDependencyGraph();
     return newValue.result;
   };
   const onPageDeleteLocal = async (value) => {
-    if (app.options.mode === "production") {
-      return;
-    }
     const res = await triggerHook("onPageDelete", {
       data: value,
       app
     });
-    value = res.data;
-    if (value?.result?.customElements) {
-      value.result.customElements.forEach((ce) => {
-        const ceName = typeof ce === "string" ? ce : ce.name;
-        if (pageCustomElements[ceName]) {
-          const customElements = pageCustomElements[ceName];
-          customElements.delete(value.path.pathname);
-        }
-      });
+    const finalData = res?.data || value;
+    const pathname = finalData?.path?.pathname;
+    const directPageComponents = app._dependencyGraph.directPageComponents;
+    if (pathname && directPageComponents) {
+      delete directPageComponents[pathname];
     }
+    app._refreshDependencyGraph();
   };
   const onComponentSetLocal = async (v) => {
     if (v.content === void 0) {
@@ -4915,7 +4923,7 @@ ${css}
     root.children.unshift(styleElement);
   }
 }
-function injectReadinessScript(root, head, hasScripts) {
+function injectReadinessScript(root, head, hasScripts, mode) {
   const readinessScriptElement = createCoraliteElement({
     type: "tag",
     name: "script",
@@ -4924,6 +4932,9 @@ 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 === "testing") {
+    data += " window.__coralite__.components = {}; window.__coralite__.events = [];";
+  }
   if (!hasScripts) {
     data += " window.__coralite__.lifecycle._start(0, 0);";
   }
@@ -5030,8 +5041,32 @@ import { getClientContext, createCoraliteClass, globalClientHooks } from '${base
 (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()));
+
+  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);
   }
@@ -5080,16 +5115,6 @@ import { getClientContext, createCoraliteClass, globalClientHooks } from '${base
           customElements.define(id, createCoraliteClass(module.default, getClientContext, globalClientHooks, hydrationData));
           if (window.__coralite__ && window.__coralite__.lifecycle) window.__coralite__.lifecycle._markDefined(id);
         }
-
-        // Upgrade any existing elements that might have been created before the definition was loaded
-        const elements = document.querySelectorAll(id);
-        for (const el of elements) {
-          if (el.constructor === HTMLElement) {
-             // Re-trigger the lifecycle by replacing the element or manually calling upgrade if supported
-             // For most cases, customElements.define handles this automatically if the element is already in DOM,
-             // but if it's currently disconnected it might need help.
-          }
-        }
       }
     })();
     return loadCache[componentId];
@@ -5480,20 +5505,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,
@@ -5503,6 +5519,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;
@@ -6080,7 +6106,7 @@ function createRenderer({
               chunkManifest[tag] = scriptResult.manifest[tag];
             }
           }
-          injectReadinessScript(mappedComponent.root, headElement, true);
+          injectReadinessScript(mappedComponent.root, headElement, true, normalizedOptions.mode);
           injectImportMap(mappedComponent.root, headElement, scriptResult.importMap);
           const base = normalizedOptions.baseURL.endsWith("/") ? normalizedOptions.baseURL : normalizedOptions.baseURL + "/";
           const hydrationData = {};
@@ -6113,7 +6139,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 = {
@@ -6214,7 +6240,7 @@ function createRenderer({
     if (!buildOptions) {
       buildOptions = {};
     }
-    if (normalizedOptions.mode === "production") {
+    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);
@@ -6286,6 +6312,17 @@ function createRenderer({
     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.virtual || {})) {
+        if (metadata.dependencies) {
+          app._dependencyGraph.directPageComponents[path2] = metadata.dependencies;
+        }
+      }
+      app._refreshDependencyGraph();
     } catch (e) {
       if (e.code !== "ENOENT") {
         handleError2({
@@ -6294,30 +6331,39 @@ function createRenderer({
         });
       }
     }
+    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: {},
+      testingMocksHash: mocksHash
     };
     const componentChanges = /* @__PURE__ */ new Map();
     const allComponents = app.components.list;
+    let anyComponentChanged = false;
     for (const component of allComponents) {
       const { changed, metadata } = await checkFileChange(component.path.pathname, manifest.physical[component.path.pathname]);
       newManifest.physical[component.path.pathname] = metadata;
-      if (changed) {
+      if (changed || !manifest.physical[component.path.pathname]) {
         componentChanges.set(component.result.id, true);
+        anyComponentChanged = true;
         await app.components.updateItem(component.path.pathname);
       }
     }
+    if (anyComponentChanged) {
+      app._refreshDependencyGraph();
+    }
     const pageCustomElements = {
       ...manifest.dependencies,
       ...app._dependencyGraph.pageCustomElements
     };
     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 {
@@ -6336,6 +6382,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;
@@ -6385,10 +6434,17 @@ function createRenderer({
         }
       }
     }
-    const { pageCustomElements: livePageCustomElements } = app._dependencyGraph;
+    const { pageCustomElements: livePageCustomElements, directPageComponents: liveDirectPageComponents } = app._dependencyGraph;
     for (const [id, pages] of Object.entries(livePageCustomElements)) {
       newManifest.dependencies[id] = Array.from(pages);
     }
+    for (const [path2, deps] of Object.entries(liveDirectPageComponents)) {
+      if (newManifest.physical[path2]) {
+        newManifest.physical[path2].dependencies = deps;
+      } else if (newManifest.virtual[path2]) {
+        newManifest.virtual[path2].dependencies = deps;
+      }
+    }
     for (const [id, pages] of Object.entries(manifest.dependencies || {})) {
       if (!newManifest.dependencies[id]) {
         newManifest.dependencies[id] = pages;
@@ -6490,7 +6546,6 @@ function createRenderer({
       });
       renderQueues.delete(buildId);
       sealedQueues.delete(buildId);
-      app._clearDependencies();
       pagesToRender.length = 0;
       skippedPages.length = 0;
     }
@@ -6528,7 +6583,8 @@ async function createCoralite({
   skipRenderByAttribute,
   onError,
   mode = "production",
-  output
+  output,
+  testing
 }) {
   if (!components || typeof components !== "string") {
     handleError({
@@ -6564,7 +6620,8 @@ async function createCoralite({
     skipRenderByAttribute,
     mode,
     path: path2,
-    output: output ? normalize(output) : void 0
+    output: output ? normalize(output) : void 0,
+    testing
   };
   const trackedOutputFiles = /* @__PURE__ */ new Set();
   const app = {
@@ -6595,11 +6652,44 @@ async function createCoralite({
     createComponentElement: null,
     _dependencyGraph: {
       pageCustomElements: {},
-      childCustomElements: {}
+      directPageComponents: {}
+    },
+    _refreshDependencyGraph: () => {
+      const { pageCustomElements, directPageComponents } = app._dependencyGraph;
+      for (const tag in pageCustomElements) {
+        delete pageCustomElements[tag];
+      }
+      const resolveDependencies = (pagePath, directComponents) => {
+        const visited = /* @__PURE__ */ new Set();
+        const allDependencies = /* @__PURE__ */ new Set();
+        const walk = (tags) => {
+          for (const tag of tags) {
+            if (visited.has(tag)) {
+              continue;
+            }
+            visited.add(tag);
+            allDependencies.add(tag);
+            const sharedFn = scriptManager.sharedFunctions[tag];
+            if (sharedFn && sharedFn.components?.length) {
+              walk(sharedFn.components);
+            }
+          }
+        };
+        walk(directComponents);
+        for (const tag of allDependencies) {
+          if (!pageCustomElements[tag]) {
+            pageCustomElements[tag] = /* @__PURE__ */ new Set();
+          }
+          pageCustomElements[tag].add(pagePath);
+        }
+      };
+      for (const [pagePath, directComponents] of Object.entries(directPageComponents)) {
+        resolveDependencies(pagePath, directComponents);
+      }
     },
     _clearDependencies: () => {
       app._dependencyGraph.pageCustomElements = {};
-      app._dependencyGraph.childCustomElements = {};
+      app._dependencyGraph.directPageComponents = {};
     }
   };
   const plugins = {
@@ -6768,16 +6858,21 @@ async function createCoralite({
       const item = app.components.getItem(targetPath);
       const results = [];
       if (item) {
-        const id = app._dependencyGraph.childCustomElements[item.result.id] || item.result.id;
+        const id = item.result.id;
         const pce = app._dependencyGraph.pageCustomElements[id];
         if (pce) {
           pce.forEach((p) => results.push(p));
         }
+      } else {
+        const pce = app._dependencyGraph.pageCustomElements[targetPath];
+        if (pce) {
+          pce.forEach((p) => results.push(p));
+        }
       }
       return results;
     }
   });
-  if (app.options.mode === "development") {
+  if (app.options.mode === "testing") {
     app.options.plugins.unshift(testingPlugin);
   }
   app.options.plugins.unshift(metadataPlugin);
@@ -6835,7 +6930,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,
@@ -6876,6 +6971,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(