feat(Campaign): make context creation extensible via async overridable template method

src/components/Campaign/Campaign.ts

@@ -67,6 +67,29 @@ export class Campaign extends NostoElement {
   async load() {
     await loadCampaign(this)
   }
+
+  /**
+   * Extension point: override to enrich or modify the template context.
+   * This method is called during campaign rendering to create the context object
+   * that will be passed to the template. Subclasses can override this method
+   * to add custom properties, feature flags, or transform the data.
+   *
+   * @param raw - The raw JSON result from the Nosto API
+   * @returns The context object to be used in template rendering
+   *
+   * @example
+   * ```typescript
+   * class CustomCampaign extends Campaign {
+   *   async createContext(raw) {
+   *     const context = await super.createContext(raw);
+   *     return { ...context, customProperty: 'value' };
+   *   }
+   * }
+   * ```
+   */
+  async createContext(raw: JSONResult): Promise<object> {
+    return getContext(raw)
+  }
 }
 
 export async function loadCampaign(element: Campaign) {
@@ -85,7 +108,7 @@ export async function loadCampaign(element: Campaign) {
   if (rec) {
     if (useTemplate) {
       const template = getTemplate(element)
-      compile(element, template, getContext(rec as JSONResult))
+      compile(element, template, await element.createContext(rec as JSONResult))
       api.attributeProductClicksInCampaign(element, rec as JSONResult)
     } else {
       await api.placements.injectCampaigns(

test/components/Campaign.spec.tsx

@@ -1,6 +1,7 @@
 /** @jsx createElement */
 import { describe, it, expect, vi, Mock } from "vitest"
 import { Campaign } from "@/components/Campaign/Campaign"
+import { JSONResult } from "@nosto/nosto-js/client"
 import { mockNostoRecs } from "../mockNostoRecs"
 import { createElement } from "../utils/jsx"
 
@@ -163,4 +164,46 @@ describe("Campaign", () => {
     expect(mockObserver.observe).not.toHaveBeenCalled()
     expect(mockBuilder.load).not.toHaveBeenCalled()
   })
+
+  it("should allow subclasses to override createContext method", async () => {
+    // Create a custom campaign that extends the base Campaign
+    class CustomCampaign extends Campaign {
+      async createContext(raw: JSONResult) {
+        const context = await super.createContext(raw)
+        return { ...context, customProperty: "customValue", modified: true }
+      }
+    }
+
+    // Register the custom element
+    if (!customElements.get("custom-campaign")) {
+      customElements.define("custom-campaign", CustomCampaign)
+    }
+
+    const templateId = "custom-template"
+    const template = document.createElement("template")
+    template.id = templateId
+    template.innerHTML = `
+      <div class="custom">{{ customProperty }}</div>
+      <div class="modified">{{ modified }}</div>
+      <div class="title">{{ title }}</div>
+    `
+    document.body.appendChild(template)
+
+    const { mockBuilder } = mockNostoRecs({
+      "custom-123": {
+        title: "Custom Campaign Test"
+      }
+    })
+
+    // Create custom element using JSX syntax
+    const customCampaign = (<custom-campaign placement="custom-123" template={templateId} />) as Campaign
+    document.body.appendChild(customCampaign)
+
+    await customCampaign.connectedCallback()
+
+    expect(customCampaign.innerHTML).toContain("customValue")
+    expect(customCampaign.innerHTML).toContain("true")
+    expect(customCampaign.innerHTML).toContain("Custom Campaign Test")
+    expect(mockBuilder.load).toHaveBeenCalledWith()
+  })
 })