coralite 0.40.2 → 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
       });
@@ -4609,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 {
@@ -4619,16 +4673,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 +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",
@@ -4878,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);";
   }
@@ -4984,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);
   }
@@ -5424,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,
@@ -5447,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;
@@ -6024,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 = {};
@@ -6057,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 = {
@@ -6158,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);
@@ -6249,12 +6331,16 @@ 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;
@@ -6277,7 +6363,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 +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;
@@ -6494,7 +6583,8 @@ async function createCoralite({
   skipRenderByAttribute,
   onError,
   mode = "production",
-  output
+  output,
+  testing
 }) {
   if (!components || typeof components !== "string") {
     handleError({
@@ -6530,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 = {
@@ -6781,7 +6872,7 @@ async function createCoralite({
       return results;
     }
   });
-  if (app.options.mode === "development") {
+  if (app.options.mode === "testing") {
     app.options.plugins.unshift(testingPlugin);
   }
   app.options.plugins.unshift(metadataPlugin);
@@ -6839,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,
@@ -6880,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(