Skip to content

🔥 feat(rendering): Handle rendering concerns framework-agnostic, prove with Web components#324

Open
Charles Hudson (phobetron) wants to merge 1 commit into
mainfrom
NT-3484_make-rendering-concerns-agnostic
Open

🔥 feat(rendering): Handle rendering concerns framework-agnostic, prove with Web components#324
Charles Hudson (phobetron) wants to merge 1 commit into
mainfrom
NT-3484_make-rendering-concerns-agnostic

Conversation

@phobetron

@phobetron Charles Hudson (phobetron) commented Jun 16, 2026

Copy link
Copy Markdown
Collaborator

Summary

This introduces a framework-agnostic presentation layer for optimized entry rendering and uses it from both the React Web SDK and the new Web Components surface.

Key changes:

  • Add @contentful/optimization-web/presentation with shared optimized-entry snapshot logic, loading/fallback behavior, live-update locking, host tracking attributes, duplicate-baseline nesting state, and optimization root SDK binding helpers.
  • Add @contentful/optimization-web/web-components with ctfl-optimization-root, ctfl-optimized-entry, and defineContentfulOptimizationElements.
  • Refactor React OptimizedEntry to consume the shared presentation controller instead of duplicating presentation, loading, tracking-attribute, and live-update logic.
  • Keep optimized entry hosts as display: contents wrappers, with tracking attributes applied to the host.
  • Update the Web SDK dev harness and Vanilla reference implementation to use Web Components as the primary integration pattern.
  • Expand Vanilla Web SDK E2E coverage for Web Components-based display, click, hover, view, consent, preview, live updates, offline recovery, and manual view tracking.
  • Keep one lean manual-tracking example with coverage proving it does not double-track.
  • Update bundle-size tooling so JavaScript entry budgets include reachable local split chunks, then adjust affected budgets accordingly.

Notes for reviewers

  • Web Components intentionally do not fetch or render entry content. They bind SDK state, host tracking attributes, and lifecycle events; the consumer renders content in response to resolved entry data.
  • data-ctfl-entry-id continues to represent the currently rendered entry, starting from baseline and updating to the variant after resolution.
  • data-ctfl-baseline-id is preserved for optimization-backed entries.
  • Loading/fallback states intentionally avoid tracking attributes until resolved, preserving React behavior.
  • The Web Components bundle-size budget increase reflects the now-budgeted reachable runtime chunks, including the display-contents view-tracking support from main.

Validation

Passed:

  • pnpm --filter @contentful/optimization-web typecheck
  • pnpm --filter @contentful/optimization-web test:unit — 276 passed
  • pnpm --filter @contentful/optimization-web build
  • pnpm --filter @contentful/optimization-web size:check
  • pnpm --filter @contentful/optimization-react-web typecheck
  • pnpm --filter @contentful/optimization-react-web test:unit — 93 passed
  • pnpm --filter @contentful/optimization-react-web build
  • pnpm --filter @contentful/optimization-react-web size:check
  • pnpm lint
  • pnpm build:pkgs
  • pnpm implementation:run -- web-sdk typecheck
  • pnpm implementation:run -- web-sdk build
  • pnpm implementation:run -- web-sdk implementation:test:e2e:run — 99 passed
  • pnpm implementation:run -- react-web-sdk typecheck
  • pnpm implementation:run -- react-web-sdk build
  • pnpm implementation:run -- react-web-sdk implementation:test:e2e:run — 84 passed
  • pnpm exec eslint implementations/web-sdk implementations/react-web-sdk
  • pnpm size:check
  • git diff --check

[NT-3484]

…e with Web components

**Description**

## Summary

This introduces a framework-agnostic presentation layer for optimized entry rendering and uses it from both the React Web SDK and the new Web Components surface.

Key changes:

- Add `@contentful/optimization-web/presentation` with shared optimized-entry snapshot logic, loading/fallback behavior, live-update locking, host tracking attributes, duplicate-baseline nesting state, and optimization root SDK binding helpers.
- Add `@contentful/optimization-web/web-components` with `ctfl-optimization-root`, `ctfl-optimized-entry`, and `defineContentfulOptimizationElements`.
- Refactor React `OptimizedEntry` to consume the shared presentation controller instead of duplicating presentation, loading, tracking-attribute, and live-update logic.
- Keep optimized entry hosts as `display: contents` wrappers, with tracking attributes applied to the host.
- Update the Web SDK dev harness and Vanilla reference implementation to use Web Components as the primary integration pattern.
- Expand Vanilla Web SDK E2E coverage for Web Components-based display, click, hover, view, consent, preview, live updates, offline recovery, and manual view tracking.
- Keep one lean manual-tracking example with coverage proving it does not double-track.
- Update bundle-size tooling so JavaScript entry budgets include reachable local split chunks, then adjust affected budgets accordingly.

## Notes for reviewers

- Web Components intentionally do not fetch or render entry content. They bind SDK state, host tracking attributes, and lifecycle events; the consumer renders content in response to resolved entry data.
- `data-ctfl-entry-id` continues to represent the currently rendered entry, starting from baseline and updating to the variant after resolution.
- `data-ctfl-baseline-id` is preserved for optimization-backed entries.
- Loading/fallback states intentionally avoid tracking attributes until resolved, preserving React behavior.
- The Web Components bundle-size budget increase reflects the now-budgeted reachable runtime chunks, including the display-contents view-tracking support from `main`.

## Validation

Passed:

- `pnpm --filter @contentful/optimization-web typecheck`
- `pnpm --filter @contentful/optimization-web test:unit` — 276 passed
- `pnpm --filter @contentful/optimization-web build`
- `pnpm --filter @contentful/optimization-web size:check`
- `pnpm --filter @contentful/optimization-react-web typecheck`
- `pnpm --filter @contentful/optimization-react-web test:unit` — 93 passed
- `pnpm --filter @contentful/optimization-react-web build`
- `pnpm --filter @contentful/optimization-react-web size:check`
- `pnpm lint`
- `pnpm build:pkgs`
- `pnpm implementation:run -- web-sdk typecheck`
- `pnpm implementation:run -- web-sdk build`
- `pnpm implementation:run -- web-sdk implementation:test:e2e:run` — 99 passed
- `pnpm implementation:run -- react-web-sdk typecheck`
- `pnpm implementation:run -- react-web-sdk build`
- `pnpm implementation:run -- react-web-sdk implementation:test:e2e:run` — 84 passed
- `pnpm exec eslint implementations/web-sdk implementations/react-web-sdk`
- `pnpm size:check`
- `git diff --check`

[[NT-3484](https://contentful.atlassian.net/browse/NT-3484)]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant