🔥 feat(rendering): Handle rendering concerns framework-agnostic, prove with Web components#324
Merged
Charles Hudson (phobetron) merged 1 commit intoJun 17, 2026
Conversation
Charles Hudson (phobetron)
requested review from
Lotfi Anwar L Arif (Lotfi-Arif) and
François (Lp-Francois)
as code owners
Charles Hudson (phobetron)
force-pushed
the
NT-3484_make-rendering-concerns-agnostic
branch
2 times, most recently
from
dcc2de2 to
393ebfb
Compare
…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)]
Charles Hudson (phobetron)
force-pushed
the
NT-3484_make-rendering-concerns-agnostic
branch
from
393ebfb to
f513f95
Compare
Charles Hudson (phobetron)
deleted the
NT-3484_make-rendering-concerns-agnostic
branch
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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:
@contentful/optimization-web/presentationwith shared optimized-entry snapshot logic, loading/fallback behavior, live-update locking, host tracking attributes, duplicate-baseline nesting state, and optimization root SDK binding helpers.@contentful/optimization-web/web-componentswithctfl-optimization-root,ctfl-optimized-entry, anddefineContentfulOptimizationElements.OptimizedEntryto consume the shared presentation controller instead of duplicating presentation, loading, tracking-attribute, and live-update logic.display: contentswrappers, with tracking attributes applied to the host.Notes for reviewers
data-ctfl-entry-idcontinues to represent the currently rendered entry, starting from baseline and updating to the variant after resolution.data-ctfl-baseline-idis preserved for optimization-backed entries.main.Validation
Passed:
pnpm --filter @contentful/optimization-web typecheckpnpm --filter @contentful/optimization-web test:unit— 276 passedpnpm --filter @contentful/optimization-web buildpnpm --filter @contentful/optimization-web size:checkpnpm --filter @contentful/optimization-react-web typecheckpnpm --filter @contentful/optimization-react-web test:unit— 93 passedpnpm --filter @contentful/optimization-react-web buildpnpm --filter @contentful/optimization-react-web size:checkpnpm lintpnpm build:pkgspnpm implementation:run -- web-sdk typecheckpnpm implementation:run -- web-sdk buildpnpm implementation:run -- web-sdk implementation:test:e2e:run— 99 passedpnpm implementation:run -- react-web-sdk typecheckpnpm implementation:run -- react-web-sdk buildpnpm implementation:run -- react-web-sdk implementation:test:e2e:run— 84 passedpnpm exec eslint implementations/web-sdk implementations/react-web-sdkpnpm size:checkgit diff --check[NT-3484]