NT-1769: Node ESR Implementation

.github/workflows/main-pipeline.yaml

@@ -206,8 +206,8 @@ jobs:
 
       - run: pnpm test:unit
 
-  e2e-node:
-    name: E2E Node 🖥️
+  e2e-node-ssr:
+    name: E2E Node SSR 🖥️
     runs-on: ubuntu-latest
     timeout-minutes: 15
     needs: setup
@@ -240,19 +240,66 @@ jobs:
 
       - run: pnpm i --prefer-offline --frozen-lockfile
 
-      - run: pnpm --filter @implementation/node exec playwright install --with-deps
+      - run: pnpm --filter @implementation/node-ssr exec playwright install --with-deps
 
-      - run: pnpm --filter @implementation/node test:e2e
+      - run: pnpm --filter @implementation/node-ssr test:e2e
 
       - uses: actions/upload-artifact@v6
         if: ${{ !cancelled() }}
         with:
-          name: ci-results-node
+          name: ci-results-node-ssr
           path: |
             ./implementations/node-ssr/playwright-report/
             ./implementations/node-ssr/test-results/
           retention-days: 1
 
+  e2e-node-esr:
+    name: E2E Node ESR 🖥️
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    needs: setup
+    steps:
+      - uses: actions/checkout@v6
+
+      - run: |
+          echo "DOTENV_CONFIG_QUIET=true" >>implementations/node-esr/.env
+          echo "VITE_NINETAILED_CLIENT_ID=${{secrets.NINETAILED_CLIENT_ID}}" >>implementations/node-esr/.env
+          echo "VITE_NINETAILED_ENVIRONMENT=${{secrets.NINETAILED_ENVIRONMENT}}" >>implementations/node-esr/.env
+          echo "VITE_EXPERIENCE_API_BASE_URL=http://localhost:8000/experience/" >>implementations/node-esr/.env
+          echo "VITE_INSIGHTS_API_BASE_URL=http://localhost:8000/insights/" >>implementations/node-esr/.env
+          echo "VITE_CONTENTFUL_TOKEN=${{secrets.CONTENTFUL_TOKEN}}" >>implementations/node-esr/.env
+          echo "VITE_CONTENTFUL_PREVIEW_TOKEN=${{secrets.CONTENTFUL_PREVIEW_TOKEN}}" >>implementations/node-esr/.env
+          echo "VITE_CONTENTFUL_ENVIRONMENT=${{secrets.CONTENTFUL_ENVIRONMENT}}" >>implementations/node-esr/.env
+          echo "VITE_CONTENTFUL_SPACE_ID=${{secrets.CONTENTFUL_SPACE_ID}}" >>implementations/node-esr/.env
+          echo "VITE_CONTENTFUL_CDA_HOST=localhost:8000" >>implementations/node-esr/.env
+          echo "VITE_CONTENTFUL_BASE_PATH=contentful" >>implementations/node-esr/.env
+
+      - uses: pnpm/action-setup@v4
+
+      - uses: actions/setup-node@v6
+        with:
+          node-version-file: '.nvmrc'
+
+      - uses: actions/cache@v5
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-node-modules-pnpm-${{ hashFiles('pnpm-lock.yaml') }}
+
+      - run: pnpm i --prefer-offline --frozen-lockfile
+
+      - run: pnpm --filter @implementation/node-esr exec playwright install --with-deps
+
+      - run: pnpm --filter @implementation/node-esr test:e2e
+
+      - uses: actions/upload-artifact@v6
+        if: ${{ !cancelled() }}
+        with:
+          name: ci-results-node-esr
+          path: |
+            ./implementations/node-esr/playwright-report/
+            ./implementations/node-esr/test-results/
+          retention-days: 1
+
   e2e-web:
     name: E2E Web Vanilla 🖥️
     runs-on: ubuntu-latest

implementations/node-esr/assets/script.js

@@ -0,0 +1,127 @@
+/* --- Standard Rendering Code --- */
+
+const contentfulClient = contentful.createClient(CONFIG.contentful)
+const optimization = new Optimization({
+  ...CONFIG.optimization,
+  autoTrackEntryViews: true,
+  app: { name: document.title, version: '0.0.0' },
+})
+
+optimization.personalization.page()
+
+function isRichText(field) {
+  return field && typeof field === 'object' && field.content !== undefined
+}
+
+// Barebones "Rich Text" renderer
+// Full renderer must be customer-supplied, or rendered via ctfl Rich Text libs where possible
+function simpleRenderRichText(field, parent) {
+  if (!field || typeof field !== 'object') return
+  if (!parent || !(parent instanceof HTMLElement)) return
+
+  if (field.nodeType === 'document') {
+    field.content.forEach((content) => simpleRenderRichText(content, parent))
+  } else if (field.nodeType === 'paragraph') {
+    const p = document.createElement('p')
+    field.content.forEach((content) => simpleRenderRichText(content, p))
+    parent.appendChild(p)
+  } else if (field.nodeType === 'text') {
+    const span = document.createElement('span')
+    span.innerText = field.value
+    parent.appendChild(span)
+  } else if (field.nodeType === 'embedded-entry-inline') {
+    const span = document.createElement('span')
+
+    // This is how we can inject MergeTag data into Rich Text
+    span.innerText = optimization.personalization.getMergeTagValue(field.data.target)
+
+    parent.appendChild(span)
+  } else {
+    const span = document.createElement('span')
+    span.innerText = '[unknown rich text fragment]'
+    parent.appendChild(span)
+  }
+}
+
+// Render personalized entries
+async function renderPersonalizedEntry(rawEntry, element, autoObserve = true) {
+  const { entry, personalization } = optimization.personalization.personalizeEntry(rawEntry)
+
+  if (isRichText(entry.fields?.text)) {
+    const div = document.createElement('div')
+    simpleRenderRichText(entry.fields.text, div)
+    element.replaceChildren(div)
+  } else {
+    const p = document.createElement('p')
+    p.innerText = entry.fields?.text
+    element.replaceChildren(p)
+  }
+
+  if (entry.fields?.nested) {
+    const div = document.createElement('div')
+    div.className = 'nested'
+    entry.fields.nested.forEach((nestedEntry) =>
+      renderPersonalizedEntry(nestedEntry, div, autoObserve),
+    )
+    element.appendChild(div)
+  }
+
+  // NOTE: Elements that are not auto-observed may still be auto-tracked (see below)
+  if (autoObserve) {
+    // The `data-ctfl - entry - id` data attribute is required for auto-observing
+    element.dataset.ctflEntryId = entry.sys?.id
+
+    // Other standard auto-observing attributes are optional
+    if (personalization) {
+      element.dataset.ctflPersonalizationId = personalization?.experienceId
+      element.dataset.ctflSticky = personalization?.sticky
+      element.dataset.ctflVariantIndex = personalization?.variantIndex
+    }
+  }
+
+  return [entry, personalization]
+}
+
+// Get the personalized entry to render
+async function addPersonalizedEntry(entryId, element, autoObserve = true) {
+  try {
+    const entry = await contentfulClient.getEntry(entryId, { include: 10 })
+    return renderPersonalizedEntry(entry, element, autoObserve)
+  } catch (error) {
+    console.warn(`Entry "${entryId}" could not be found in the current space`)
+    return []
+  }
+}
+
+// Manually observe view elements for auto-tracking
+async function manuallyObserveEntryElement(element) {
+  const [entry, personalization] = await addPersonalizedEntry(
+    element.dataset.entryId,
+    element,
+    false,
+  )
+
+  optimization.untrackEntryViewForElement(element)
+
+  // Manually observe the element for auto-tracking (does not use `data - ctfl -* ` attributes)
+  optimization.trackEntryViewForElement(element, {
+    data: {
+      // The `entryId` property is required for auto-tracking
+      entryId: entry.sys.id,
+      personalizationId: personalization?.experienceId,
+      sticky: personalization?.sticky,
+      variantIndex: personalization?.variantIndex,
+    },
+  })
+}
+
+// Subscribe to profile state, find entries in the markup, and render them
+optimization.states.profile.subscribe((profile) => {
+  if (!profile) return
+
+  document
+    .querySelectorAll('[data-ctfl-entry-id]')
+    .forEach((element) => addPersonalizedEntry(element.dataset.ctflEntryId, element))
+
+  document.querySelectorAll('[data-entry-id]').forEach(manuallyObserveEntryElement)
+})

implementations/node-esr/assets/style.css

@@ -0,0 +1,94 @@
+* {
+  box-sizing: border-box;
+}
+html,
+textarea,
+input,
+button {
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    avenir next,
+    avenir,
+    segoe ui,
+    helvetica neue,
+    Adwaita Sans,
+    Cantarell,
+    Ubuntu,
+    roboto,
+    noto,
+    helvetica,
+    arial,
+    sans-serif;
+}
+h1,
+main {
+  max-width: 1040px;
+  margin-inline: auto;
+}
+main {
+  display: grid;
+  grid-gap: 2rem;
+  grid-template-rows: auto 1fr;
+  grid-template-columns: 1fr auto;
+}
+section:first-of-type {
+  grid-column: 1 / span 2;
+}
+ol {
+  margin: 0;
+}
+summary {
+  cursor: pointer;
+}
+button {
+  cursor: pointer;
+
+  &:not([type]) {
+    appearance: none;
+    background: transparent;
+    border: 0;
+    padding: 0;
+    font-family: inherit;
+    font-size: inherit;
+    text-decoration: underline;
+
+    &:hover,
+    &:active {
+      color: blue;
+    }
+  }
+}
+#event-stream-panel {
+  position: sticky;
+  top: 0;
+  margin-block-start: -1px;
+  padding-block-start: 1px;
+}
+#auto-observed,
+#manually-observed {
+  display: grid;
+  grid-gap: 2rem;
+  grid-auto-rows: minmax(75dvh, auto);
+  margin-block-end: 2rem;
+
+  > div {
+    display: grid;
+    grid-gap: inherit;
+    grid-auto-rows: inherit;
+    width: 100%;
+    height: 100%;
+    padding: 2rem;
+    background: #eee;
+    overflow: visible;
+  }
+
+  div.nested {
+    display: grid;
+    grid-gap: inherit;
+    grid-auto-rows: inherit;
+    padding: 1rem;
+    border: 1px solid #ccc;
+    overflow: visible;
+  }
+}

implementations/node-esr/e2e/displays-identified-user-variants-cookie.spec.ts

@@ -0,0 +1,76 @@
+import { ANONYMOUS_ID_COOKIE } from '@contentful/optimization-core'
+import { expect, test } from '@playwright/test'
+import { getAnonymousIdFromCookie, getAnonymousIdFromStorage } from './utils'
+
+const CUSTOM_PROFILE_ID = 'custom-profile-id'
+
+test.describe('identified user: cookie', () => {
+  test.beforeEach(async ({ page, context }) => {
+    // user is already identified with a custom profile id
+    await context.addCookies([
+      {
+        name: ANONYMOUS_ID_COOKIE,
+        value: CUSTOM_PROFILE_ID,
+        domain: 'localhost',
+        path: '/',
+        sameSite: 'Lax', // good default for same-site apps
+      },
+    ])
+    await page.goto(`/user/someone`)
+    await page.waitForLoadState('domcontentloaded')
+  })
+
+  test('should preserve custom profile id in cookie', async ({ context }) => {
+    const cookieId = await getAnonymousIdFromCookie(context)
+    expect(cookieId).toBeDefined()
+    expect(cookieId).toEqual(CUSTOM_PROFILE_ID)
+  })
+
+  test('should sync profile id between cookie and localStorage', async ({ context }) => {
+    const cookieId = await getAnonymousIdFromCookie(context)
+    const storedId = await getAnonymousIdFromStorage(context)
+
+    expect(storedId).toBeDefined()
+    expect(storedId).toEqual(cookieId)
+  })
+
+  test('displays common variants', async ({ page }) => {
+    await expect(
+      page.getByText(
+        'This is a merge tag content entry that displays the visitor\'s continent "EU" embedded within the text.',
+      ),
+    ).toBeVisible()
+
+    await expect(
+      page.getByText('This is a variant content entry for visitors from Europe.'),
+    ).toBeVisible()
+
+    await expect(
+      page.getByText('This is a variant content entry for visitors using a desktop browser.'),
+    ).toBeVisible()
+  })
+
+  test('displays identified user variants', async ({ page }) => {
+    await expect(page.getByText('This is a level 0 nested variant entry.')).toBeVisible()
+
+    await expect(page.getByText('This is a level 1 nested variant entry.')).toBeVisible()
+
+    await expect(page.getByText('This is a level 2 nested variant entry.')).toBeVisible()
+
+    await expect(
+      page.getByText('This is a variant content entry for return visitors.'),
+    ).toBeVisible()
+
+    await expect(
+      page.getByText('This is a variant content entry for an A/B/C experiment: B'),
+    ).toBeVisible()
+
+    await expect(
+      page.getByText('This is a variant content entry for visitors with a custom event.'),
+    ).toBeVisible()
+
+    await expect(
+      page.getByText('This is a variant content entry for identified users.'),
+    ).toBeVisible()
+  })
+})