npm - @elliemae/pui-app-bridge - Versions diffs - 2.23.4 → 2.24.0 - Mend

@elliemae/pui-app-bridge 2.23.4 → 2.24.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (61) hide show

package/dist/cjs/appBridge.js CHANGED Viewed

@@ -84,6 +84,10 @@ class CAppBridge {
    * list of active apps
    */
   #activeApps = /* @__PURE__ */ new Map();
+  /**
+   * host-supplied metadata per guest, keyed by app id
+   */
+  #guestMetadata = /* @__PURE__ */ new Map();
   /**
    * instance of the app registry
    */
@@ -417,6 +421,22 @@ class CAppBridge {
       } else if (this.#isFunction(propValue)) {
         Object.defineProperty(so, propName, {
           value: async (...args) => {
+            const callerCtx = so[propName]?.callContext;
+            if (callerCtx?.guest) {
+              const existingChain = callerCtx.callChain ?? [];
+              const guestId = callerCtx.guest.id;
+              const meta = this.#guestMetadata.get(guestId);
+              const callerEntry = { id: guestId };
+              if (meta) callerEntry.metadata = meta;
+              Object.defineProperty(propValue, "callContext", {
+                value: {
+                  callChain: [...existingChain, callerEntry]
+                },
+                configurable: true,
+                enumerable: true,
+                writable: true
+              });
+            }
             const retVal = await propValue(...args);
             return (0, import_microfe_common.isScriptingObjectProxy)(retVal) ? this.cloneScriptingObject(retVal) : retVal;
           },
@@ -485,6 +505,7 @@ class CAppBridge {
         });
       }
       this.#activeApps.delete(instanceId);
+      this.#guestMetadata.delete(id);
       import_frame.Frame.remove(instanceId);
     }
   };
@@ -555,8 +576,17 @@ class CAppBridge {
    * @param {OpenAppParams} params - options to open guest application
    */
   openApp = async (params) => {
-    const { id, frameOptions, history, theme, homeRoute, initialRoute } = params;
+    const {
+      id,
+      frameOptions,
+      history,
+      theme,
+      homeRoute,
+      initialRoute,
+      metadata
+    } = params;
     const instanceId = (0, import_uuid.v4)();
+    if (metadata) this.#guestMetadata.set(id, metadata);
     const appConfig = this.#microFEConfig.getConfigById(id);
     if (!appConfig) {
       throw new Error(`Application ${id} is not found in app config`);

package/dist/cjs/e2e-host.html ADDED Viewed

@@ -0,0 +1,505 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>AppBridge E2E — Comprehensive Host Test</title>
+    <script src="https://cdn.tailwindcss.com?plugins=forms"></script>
+    <script src="https://cdn.mortgagetech.q1.ice.com/pui-diagnostics@3"></script>
+  </head>
+  <body class="bg-gray-50">
+    <header
+      class="bg-indigo-600 text-white px-4 py-3 flex items-center justify-between"
+    >
+      <h1 class="text-lg font-semibold">
+        AppBridge E2E — Comprehensive Host Test
+      </h1>
+      <a
+        href="./e2e-index.html"
+        class="text-indigo-200 hover:text-white text-sm"
+        >&larr; Back to dashboard</a
+      >
+    </header>
+    <main class="mx-auto max-w-7xl px-4 py-4">
+      <!-- Instructions -->
+      <div class="bg-blue-50 border border-blue-200 rounded-md p-3 mb-4">
+        <h2 class="text-sm font-bold text-blue-900 mb-1">
+          How to Use This Page
+        </h2>
+        <ol class="text-xs text-blue-800 list-decimal ml-4 space-y-1">
+          <li>Wait for <strong>"E2E Host ready"</strong> in the Event Log.</li>
+          <li>Use buttons in each section to test AppBridge features.</li>
+          <li>Check Event Log and result panels for expected output.</li>
+          <li>Work through the Verification Checklist at the bottom.</li>
+        </ol>
+      </div>
+      <div class="grid grid-cols-3 gap-4">
+        <!-- Column 1: Controls -->
+        <div class="col-span-2 space-y-4">
+          <!-- App Loading -->
+          <div class="bg-white rounded-lg shadow p-4">
+            <h2 class="text-sm font-semibold text-gray-700 mb-2">
+              App Loading
+            </h2>
+            <div class="flex flex-wrap gap-2">
+              <button
+                data-testid="btn-open-app"
+                id="btnOpenApp"
+                class="rounded bg-indigo-600 px-3 py-1 text-xs text-white hover:bg-indigo-700"
+              >
+                Open App (pricingservice)
+              </button>
+              <button
+                data-testid="btn-open-credit"
+                id="btnOpenCredit"
+                class="rounded bg-indigo-600 px-3 py-1 text-xs text-white hover:bg-indigo-700"
+              >
+                Open App (creditservice)
+              </button>
+              <button
+                data-testid="btn-open-validation"
+                id="btnOpenValidation"
+                class="rounded bg-indigo-600 px-3 py-1 text-xs text-white hover:bg-indigo-700"
+              >
+                Open App (loanvalidation)
+              </button>
+              <button
+                data-testid="btn-open-with-metadata"
+                id="btnOpenWithMetadata"
+                class="rounded bg-purple-600 px-3 py-1 text-xs text-white hover:bg-purple-700"
+              >
+                Open App with Metadata
+              </button>
+              <button
+                data-testid="btn-open-e2e-guest"
+                id="btnOpenE2EGuest"
+                class="rounded bg-teal-600 px-3 py-1 text-xs text-white hover:bg-teal-700"
+              >
+                Open E2E Test Guest
+              </button>
+              <button
+                data-testid="btn-open-nested-chain"
+                id="btnOpenNestedChain"
+                class="rounded bg-orange-600 px-3 py-1 text-xs text-white hover:bg-orange-700"
+              >
+                Open Nested Chain (A→B→C)
+              </button>
+            </div>
+            <p class="text-xs text-gray-400 mt-1">
+              <strong>Expected:</strong> App loads into the container below. Log
+              shows "openApp" succeeded. The E2E Test Guest provides interactive
+              buttons to test guest→host communication. The Nested Chain (A→B→C)
+              opens an intermediate that clones Loan and re-exposes it to a
+              grandchild — use C's buttons to verify callChain propagation on
+              Host A.
+            </p>
+          </div>
+          <!-- Scripting Object Management -->
+          <div class="bg-white rounded-lg shadow p-4">
+            <h2 class="text-sm font-semibold text-gray-700 mb-2">
+              Scripting Object Management
+            </h2>
+            <div class="flex flex-wrap gap-2">
+              <button
+                data-testid="btn-add-so"
+                id="btnAddSO"
+                class="rounded bg-green-600 px-3 py-1 text-xs text-white hover:bg-green-700"
+              >
+                Add "Inventory" Object
+              </button>
+              <button
+                data-testid="btn-remove-so"
+                id="btnRemoveSO"
+                class="rounded bg-red-600 px-3 py-1 text-xs text-white hover:bg-red-700"
+              >
+                Remove "Inventory" Object
+              </button>
+              <button
+                data-testid="btn-remove-all-so"
+                id="btnRemoveAllSO"
+                class="rounded bg-red-600 px-3 py-1 text-xs text-white hover:bg-red-700"
+              >
+                Remove All Objects
+              </button>
+            </div>
+            <p class="text-xs text-gray-400 mt-1">
+              <strong>Expected:</strong> Add succeeds. Remove succeeds. Guest
+              apps can/cannot call removed objects.
+            </p>
+          </div>
+          <!-- Event Dispatching -->
+          <div class="bg-white rounded-lg shadow p-4">
+            <h2 class="text-sm font-semibold text-gray-700 mb-2">
+              Event Dispatching
+            </h2>
+            <div class="flex flex-wrap gap-2">
+              <button
+                data-testid="btn-dispatch-presave"
+                id="btnDispatchPreSave"
+                class="rounded bg-yellow-600 px-3 py-1 text-xs text-white hover:bg-yellow-700"
+              >
+                Dispatch onPreSave (all apps)
+              </button>
+              <button
+                data-testid="btn-dispatch-amount"
+                id="btnDispatchAmount"
+                class="rounded bg-yellow-600 px-3 py-1 text-xs text-white hover:bg-yellow-700"
+              >
+                Dispatch onLoanAmountChanged
+              </button>
+              <button
+                data-testid="btn-dispatch-term"
+                id="btnDispatchTerm"
+                class="rounded bg-yellow-600 px-3 py-1 text-xs text-white hover:bg-yellow-700"
+              >
+                Dispatch onLoanTermChanged
+              </button>
+            </div>
+            <div
+              data-testid="dispatch-result"
+              id="dispatchResult"
+              class="mt-2 text-xs bg-gray-100 rounded p-2 min-h-[40px]"
+            >
+              Dispatch results appear here...
+            </div>
+          </div>
+          <!-- callContext Display -->
+          <div class="bg-white rounded-lg shadow p-4">
+            <h2 class="text-sm font-semibold text-gray-700 mb-2">
+              callContext (from last scripting object invocation)
+            </h2>
+            <div class="grid grid-cols-2 gap-2">
+              <div>
+                <h3 class="text-xs font-medium text-gray-500 mb-1">
+                  callContext.guest
+                </h3>
+                <pre
+                  data-testid="call-context-guest"
+                  id="callContextGuest"
+                  class="text-xs bg-gray-100 rounded p-2 min-h-[30px] whitespace-pre-wrap"
+                >
+Waiting for invocation...</pre
+                >
+              </div>
+              <div>
+                <h3 class="text-xs font-medium text-gray-500 mb-1">
+                  callContext.callChain
+                </h3>
+                <pre
+                  data-testid="call-context-chain"
+                  id="callContextChain"
+                  class="text-xs bg-gray-100 rounded p-2 min-h-[30px] whitespace-pre-wrap"
+                >
+Waiting for invocation...</pre
+                >
+              </div>
+            </div>
+          </div>
+          <!-- Lifecycle -->
+          <div class="bg-white rounded-lg shadow p-4">
+            <h2 class="text-sm font-semibold text-gray-700 mb-2">
+              App Lifecycle
+            </h2>
+            <div class="flex flex-wrap gap-2">
+              <button
+                data-testid="btn-close-app"
+                id="btnCloseApp"
+                class="rounded bg-red-600 px-3 py-1 text-xs text-white hover:bg-red-700"
+              >
+                Close First App
+              </button>
+              <button
+                data-testid="btn-close-all"
+                id="btnCloseAll"
+                class="rounded bg-red-800 px-3 py-1 text-xs text-white hover:bg-red-900"
+              >
+                Close All Apps
+              </button>
+              <button
+                data-testid="btn-list-apps"
+                id="btnListApps"
+                class="rounded bg-gray-600 px-3 py-1 text-xs text-white hover:bg-gray-700"
+              >
+                List Apps
+              </button>
+            </div>
+            <pre
+              data-testid="app-list"
+              id="appList"
+              class="mt-2 text-xs bg-gray-100 rounded p-2 min-h-[30px] whitespace-pre-wrap"
+            >
+(no apps)</pre
+            >
+          </div>
+        </div>
+        <!-- Column 2: App container + Event Log -->
+        <div class="space-y-4">
+          <div class="bg-white rounded-lg shadow p-3">
+            <h2 class="text-sm font-semibold text-gray-700 mb-2">
+              Guest App Container
+            </h2>
+            <div
+              data-testid="app-container"
+              id="appContainer"
+              class="border-2 border-dashed border-indigo-300 rounded-lg"
+              style="height: 700px; overflow: auto"
+            ></div>
+          </div>
+          <div class="bg-white rounded-lg shadow p-3">
+            <div class="flex justify-between items-center mb-2">
+              <h2 class="text-sm font-semibold text-gray-700">Event Log</h2>
+              <button
+                data-testid="btn-clear-log"
+                id="btnClearLog"
+                class="rounded bg-gray-200 px-2 py-0.5 text-xs text-gray-600 hover:bg-gray-300"
+              >
+                Clear
+              </button>
+            </div>
+            <div
+              data-testid="event-log"
+              id="eventLog"
+              class="text-xs bg-gray-100 rounded p-2 min-h-[200px] max-h-[400px] overflow-y-auto"
+            ></div>
+          </div>
+        </div>
+      </div>
+      <!-- Verification Checklist -->
+      <div class="bg-gray-100 border border-gray-300 rounded-md p-3 mt-4">
+        <h2 class="text-sm font-bold text-gray-800 mb-2">
+          Verification Checklist
+        </h2>
+        <div class="grid grid-cols-2 gap-2 text-xs">
+          <label class="flex items-start gap-2">
+            <input type="checkbox" class="mt-0.5" />
+            <span
+              ><strong>TC-APP-01:</strong> openApp loads pricingservice into
+              container, log shows mounted</span
+            >
+          </label>
+          <label class="flex items-start gap-2">
+            <input type="checkbox" class="mt-0.5" />
+            <span
+              ><strong>TC-APP-02:</strong> openApp loads creditservice into
+              container</span
+            >
+          </label>
+          <label class="flex items-start gap-2">
+            <input type="checkbox" class="mt-0.5" />
+            <span
+              ><strong>TC-APP-03:</strong> openApp loads loanvalidation into
+              container</span
+            >
+          </label>
+          <label class="flex items-start gap-2">
+            <input type="checkbox" class="mt-0.5" />
+            <span
+              ><strong>TC-APP-04:</strong> openApp with metadata — metadata
+              stored for callChain</span
+            >
+          </label>
+          <label class="flex items-start gap-2">
+            <input type="checkbox" class="mt-0.5" />
+            <span
+              ><strong>TC-SO-01:</strong> Loan object registered on init (guest
+              apps can call getLoanDetails)</span
+            >
+          </label>
+          <label class="flex items-start gap-2">
+            <input type="checkbox" class="mt-0.5" />
+            <span
+              ><strong>TC-SO-02:</strong> Add Inventory object succeeds</span
+            >
+          </label>
+          <label class="flex items-start gap-2">
+            <input type="checkbox" class="mt-0.5" />
+            <span
+              ><strong>TC-SO-03:</strong> Remove Inventory object succeeds</span
+            >
+          </label>
+          <label class="flex items-start gap-2">
+            <input type="checkbox" class="mt-0.5" />
+            <span
+              ><strong>TC-SO-04:</strong> removeAllScriptingObjects clears
+              everything</span
+            >
+          </label>
+          <label class="flex items-start gap-2">
+            <input type="checkbox" class="mt-0.5" />
+            <span
+              ><strong>TC-SO-05:</strong> callContext.guest populated when guest
+              invokes scripting object method</span
+            >
+          </label>
+          <label class="flex items-start gap-2">
+            <input type="checkbox" class="mt-0.5" />
+            <span
+              ><strong>TC-SO-06:</strong> Loan.getLoanDetails returns expected
+              loan data</span
+            >
+          </label>
+          <label class="flex items-start gap-2">
+            <input type="checkbox" class="mt-0.5" />
+            <span
+              ><strong>TC-EVT-01:</strong> Dispatch onPreSave reaches all
+              subscribed apps, results returned</span
+            >
+          </label>
+          <label class="flex items-start gap-2">
+            <input type="checkbox" class="mt-0.5" />
+            <span
+              ><strong>TC-EVT-02:</strong> Dispatch onLoanAmountChanged reaches
+              subscribed apps</span
+            >
+          </label>
+          <label class="flex items-start gap-2">
+            <input type="checkbox" class="mt-0.5" />
+            <span
+              ><strong>TC-EVT-03:</strong> Dispatch onLoanTermChanged reaches
+              subscribed apps</span
+            >
+          </label>
+          <label class="flex items-start gap-2">
+            <input type="checkbox" class="mt-0.5" />
+            <span
+              ><strong>TC-LIFE-01:</strong> closeApp removes first app from
+              list</span
+            >
+          </label>
+          <label class="flex items-start gap-2">
+            <input type="checkbox" class="mt-0.5" />
+            <span
+              ><strong>TC-LIFE-02:</strong> List Apps shows all active apps with
+              instanceIds</span
+            >
+          </label>
+          <label class="flex items-start gap-2">
+            <input type="checkbox" class="mt-0.5" />
+            <span
+              ><strong>TC-LIFE-03:</strong> closeAllApps removes all apps</span
+            >
+          </label>
+          <label class="flex items-start gap-2">
+            <input type="checkbox" class="mt-0.5" />
+            <span
+              ><strong>TC-LIFE-04:</strong> No console errors during any
+              operation</span
+            >
+          </label>
+          <label class="flex items-start gap-2">
+            <input type="checkbox" class="mt-0.5" />
+            <span
+              ><strong>TC-META-01:</strong> openApp with metadata —
+              callContext.callChain contains metadata when guest invokes cloned
+              object</span
+            >
+          </label>
+          <label class="flex items-start gap-2">
+            <input type="checkbox" class="mt-0.5" />
+            <span
+              ><strong>TC-GUEST-01:</strong> Guest getObject("Loan") returns
+              proxy with expected methods (getLoanDetails, setCreditScore)</span
+            >
+          </label>
+          <label class="flex items-start gap-2">
+            <input type="checkbox" class="mt-0.5" />
+            <span
+              ><strong>TC-GUEST-02:</strong> Guest Loan.getLoanDetails() returns
+              loan data, host callContext.guest shows e2etestguest</span
+            >
+          </label>
+          <label class="flex items-start gap-2">
+            <input type="checkbox" class="mt-0.5" />
+            <span
+              ><strong>TC-GUEST-03:</strong> Guest Loan.setCreditScore(800)
+              returns {updated: true}, host callContext updates</span
+            >
+          </label>
+          <label class="flex items-start gap-2">
+            <input type="checkbox" class="mt-0.5" />
+            <span
+              ><strong>TC-GUEST-04:</strong> Guest getObject("Inventory")
+              returns proxy after host adds it; null before</span
+            >
+          </label>
+          <label class="flex items-start gap-2">
+            <input type="checkbox" class="mt-0.5" />
+            <span
+              ><strong>TC-GUEST-05:</strong> Guest Inventory.getItems() returns
+              item array</span
+            >
+          </label>
+          <label class="flex items-start gap-2">
+            <input type="checkbox" class="mt-0.5" />
+            <span
+              ><strong>TC-GUEST-06:</strong> Guest getObject("NonExistent")
+              returns null</span
+            >
+          </label>
+          <label class="flex items-start gap-2">
+            <input type="checkbox" class="mt-0.5" />
+            <span
+              ><strong>TC-GUEST-07:</strong> Guest subscribes to onPreSave —
+              receives event when host dispatches</span
+            >
+          </label>
+          <label class="flex items-start gap-2">
+            <input type="checkbox" class="mt-0.5" />
+            <span
+              ><strong>TC-GUEST-08:</strong> Guest subscribes to
+              onLoanAmountChanged — receives event when host dispatches</span
+            >
+          </label>
+          <label class="flex items-start gap-2">
+            <input type="checkbox" class="mt-0.5" />
+            <span
+              ><strong>TC-GUEST-09:</strong> Guest unsubscribe all — no more
+              events received after unsubscribe</span
+            >
+          </label>
+          <label class="flex items-start gap-2">
+            <input type="checkbox" class="mt-0.5" />
+            <span
+              ><strong>TC-CHAIN-01:</strong> Open Nested Chain — Intermediate B
+              loads, shows "CAppBridge B initialized"</span
+            >
+          </label>
+          <label class="flex items-start gap-2">
+            <input type="checkbox" class="mt-0.5" />
+            <span
+              ><strong>TC-CHAIN-02:</strong> Grandchild C (E2E Test Guest)
+              appears inside Intermediate B</span
+            >
+          </label>
+          <label class="flex items-start gap-2">
+            <input type="checkbox" class="mt-0.5" />
+            <span
+              ><strong>TC-CHAIN-03:</strong> In C: getObject("Loan") →
+              Loan.getLoanDetails() → Host A shows callContext.guest =
+              e2eintermediateguest, callChain = [{id: "e2etestguest", metadata:
+              {role: "grandchild", ...}}]</span
+            >
+          </label>
+          <label class="flex items-start gap-2">
+            <input type="checkbox" class="mt-0.5" />
+            <span
+              ><strong>TC-CHAIN-04:</strong> In C: Loan.setCreditScore(800) →
+              Host A callChain includes e2etestguest with metadata from B</span
+            >
+          </label>
+        </div>
+      </div>
+    </main>
+    <script src="./e2e-host.js" type="module"></script>
+  </body>
+</html>

package/dist/cjs/e2e-index.html ADDED Viewed

@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>AppBridge E2E Test Suite</title>
+    <script src="https://cdn.tailwindcss.com?plugins=forms"></script>
+  </head>
+  <body class="bg-gray-50">
+    <header class="bg-gray-900 text-white px-6 py-4">
+      <h1 class="text-xl font-bold">AppBridge End-to-End Test Suite</h1>
+      <p class="text-sm text-gray-400 mt-1">
+        Comprehensive blackbox tests for AppBridge (in-process micro-frontend
+        framework). Each page includes test steps, expected values, and a
+        verification checklist.
+      </p>
+    </header>
+    <main class="mx-auto max-w-5xl px-6 py-6">
+      <section
+        class="mb-6 bg-yellow-50 border border-yellow-200 rounded-lg p-4"
+      >
+        <h2 class="text-sm font-semibold text-yellow-800 mb-2">
+          Setup Instructions
+        </h2>
+        <ol class="text-xs text-yellow-700 list-decimal ml-4 space-y-1">
+          <li>
+            Install dependencies:
+            <code class="bg-yellow-100 px-1 rounded">pnpm install</code>
+          </li>
+          <li>
+            Start AppBridge dev server:
+            <code class="bg-yellow-100 px-1 rounded"
+              >cd libs/app-bridge && pnpm start</code
+            >
+            (default port 3000)
+          </li>
+          <li>
+            Open
+            <code class="bg-yellow-100 px-1 rounded"
+              >http://localhost:3000/e2e-index.html</code
+            >
+            in the browser
+          </li>
+          <li>
+            Each test page has
+            <code class="bg-yellow-100 px-1 rounded">data-testid</code>
+            attributes for Playwright/Cypress selectors
+          </li>
+        </ol>
+      </section>
+      <section class="mb-6">
+        <h2 class="text-lg font-semibold text-gray-800 border-b pb-1 mb-3">
+          1. Core AppBridge Host Tests
+        </h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
+          <a
+            href="./e2e-host.html"
+            data-testid="link-e2e-host"
+            class="block bg-white rounded-lg shadow p-4 hover:shadow-md transition"
+          >
+            <h3 class="font-medium text-indigo-700">Comprehensive E2E Host</h3>
+            <p class="text-xs text-gray-500 mt-1">
+              All host scenarios: openApp, closeApp, scripting objects, events,
+              lifecycle, metadata, callContext.
+            </p>
+            <p class="text-xs text-gray-400 mt-2">
+              <strong>What to verify:</strong> Apps open and mount into
+              containers. Scripting objects can be added/removed/invoked with
+              correct callContext. Events reach subscribed apps.
+              closeApp/closeAllApps cleans up properly.
+            </p>
+            <div class="mt-2 text-xs text-gray-400">
+              <strong>Test Cases:</strong>
+              TC-APP-01..04 &bull; TC-SO-01..06 &bull; TC-EVT-01..03 &bull;
+              TC-LIFE-01..04 &bull; TC-META-01
+            </div>
+          </a>
+          <a
+            href="./index.html"
+            data-testid="link-main-demo"
+            class="block bg-white rounded-lg shadow p-4 hover:shadow-md transition"
+          >
+            <h3 class="font-medium text-indigo-700">Main Demo App</h3>
+            <p class="text-xs text-gray-500 mt-1">
+              Original Loan Application demo with credit, pricing, and loan
+              validation micro-apps.
+            </p>
+            <p class="text-xs text-gray-400 mt-2">
+              <strong>What to verify:</strong> Loan form data flows to guest
+              apps. Events (onLoanAmountChanged, etc.) update guest UIs. Credit
+              score updates from guest. Save dispatches onPreSave with feedback.
+            </p>
+          </a>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>