Skip to content

feat: add experience-toolbar starter example [EXT-7365]#11009

Open
Jared Jolton (jjolton-contentful) wants to merge 1 commit into
masterfrom
feat/experience-toolbar-example
Open

feat: add experience-toolbar starter example [EXT-7365]#11009
Jared Jolton (jjolton-contentful) wants to merge 1 commit into
masterfrom
feat/experience-toolbar-example

Conversation

@jjolton-contentful
Copy link
Copy Markdown
Contributor

@jjolton-contentful Jared Jolton (jjolton-contentful) commented Jun 3, 2026

EXT-7365

Summary

  • Adds a Create Contentful App example at examples/experience-toolbar for the new ExO toolbar App SDK location (LOCATION_EXPERIENCE_TOOLBAR), scaffoldable via npx create-contentful-app --example experience-toolbar.
  • Typed with ExperienceEditorToolbarAppSDK from @contentful/app-sdk@4.58.0 (first example to pin 4.58.0). Demonstrates every pattern in the ticket AC:
    • location detection — sdk.location.is(locations.LOCATION_EXPERIENCE_TOOLBAR) in App.tsx
    • reading sdk.exo.context to tell experience vs. fragment apart (+ onContextChanged)
    • subscribing to sdk.exo.experience.selection.onChange()
    • resolving the selected node via sdk.exo.experience.getNode(nodeId) and reading its properties
    • reacting to sdk.exo.onUiModeChanged() (form/visual), with graceful form-mode degradation
  • React-only; no Data Assembly or save()/publish() (per ticket excluded scope). Mirrors examples/typescript conventions (Vite + Vitest + Forma 36).

Two deviations from the AC (intentional — flagging for review)

  1. --example, not --template. The AC says --template experience-toolbar, but the CLI scaffolds repo examples via --example <name> (resolved from apps/examples/ via the GitHub API on master). --template is a fixed allowlist of framework starters (IGNORED_EXAMPLE_FOLDERS). Delivered as an example, matching how editor-assignment, page-location, etc. ship. The ticket hedges with "(or equivalent)".
  2. No app-definition.json. No example in the repo ships a manifest, and the toolbar location is not an EditorInterface target state — visibility is determined solely by whether the location is registered on the app definition. Documented registration via create-app-definition / add-locations in the README and a ConfigScreen note instead of inventing a manifest the CLI would strip.

Verification status

  • ✅ Type-verified: tsc --noEmit clean against the published 4.58.0 types.
  • vite build clean.
  • ✅ 7/7 Vitest specs pass (mocked SDK drives selection / ui-mode / context subscriptions).
  • ⚠️ Not runtime-verified inside a live ExO editor — the host renderer serving sdk.exo is still rolling out (EXT-7363/EXT-7364). The README states this explicitly. API shapes match the published types exactly.

Test plan

  • npm install && npm run build in examples/experience-toolbar succeeds
  • npm run test:ci passes
  • npx create-contentful-app --example experience-toolbar scaffolds a working project (once merged to master, since the CLI reads examples from the GitHub API)
  • (When host renderer lands) install into a space, register the experience-toolbar location, open an experience, and confirm context/selection/ui-mode/properties render live

Generated with Claude Code

Add a Create Contentful App example demonstrating the new ExO toolbar
App SDK location (LOCATION_EXPERIENCE_TOOLBAR), scaffoldable via
`npx create-contentful-app --example experience-toolbar`.

Typed with ExperienceEditorToolbarAppSDK (@contentful/app-sdk@4.58.0),
it demonstrates location detection, reading sdk.exo.context
(experience vs. fragment), subscribing to selection changes, reading
the selected node's properties via getNode, and reacting to UI mode
changes. React-only; no Data Assembly or save/publish (per ticket scope).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
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