Skip to content

Support UI extensions#1392

Open
pbennett1-godaddy wants to merge 15 commits into
mainfrom
support-ui-extensions
Open

Support UI extensions#1392
pbennett1-godaddy wants to merge 15 commits into
mainfrom
support-ui-extensions

Conversation

@pbennett1-godaddy

@pbennett1-godaddy pbennett1-godaddy commented Jun 25, 2026

Copy link
Copy Markdown
Collaborator

Summary

Adds Phase 1 checkout UI extension runtime support to @godaddy/react.

This introduces a production-shaped bridge runtime that can discover enabled store UI extensions, load deterministic CDN-hosted DOM bundles, and mount them into checkout target slots without blocking
checkout. Phase 1 intentionally supports trusted in-page DOM bundles while preserving runtime seams for a future worker/SDK-based UI extension architecture.

Key goals addressed:

  • Load enabled UI extensions for a target from checkout-api or provided checkout session app data.
  • Build deterministic extension bundle URLs from cdnUrl, target, applicationId, and releaseId.
  • Mount each extension into a host-owned checkout target container.
  • Pass only minimized checkout context plus consumer-owned initialProps.
  • Keep checkout resilient when extension loading, registration, mount, update, or unmount fails.
  • Add structured runtime errors for observability.
  • Keep debug behavior diagnostic-only through GoDaddyProvider debug logging, without changing runtime behavior.

Changeset

  • Changeset added (docs)

Test Plan

Validated locally with:

pnpm --filter @godaddy/react typecheck                                                                                                                                                                  
pnpm --filter @godaddy/react test -- --runInBand                                                                                                                                                        
pnpm --filter @godaddy/react lint                                                                                                                                                                       
pnpm --filter @godaddy/react build                                                                                                                                                                      

Results:

  • Typecheck passes.
  • React package test suite passes.
  • Biome lint/check passes.
  • React package build succeeds, including the new @godaddy/react/ui-extensions subpath export.

Additional coverage added for:

  • Deterministic UI extension script URL construction.
  • Missing required script URL fields.
  • DOM bundle registration and mount lifecycle.
  • Invalid DOM bundle contracts.
  • Runtime update and unmount lifecycle.
  • Unmount-before-script-load behavior.
  • Queued updates while an extension bundle is still loading.
  • Target behavior with provided app data.
  • Target behavior with checkout-api response data.
  • Provider debug mode continuing to render runtime containers instead of JSON.
  • Grouping multiple UI extensions by target without duplicating app entries.

@pbennett1-godaddy pbennett1-godaddy requested a review from a team as a code owner June 25, 2026 16:19
@changeset-bot

changeset-bot Bot commented Jun 25, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 2719c26

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
@godaddy/react Patch
nextjs Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Comment thread packages/react/src/ui-extensions/runtime/script-url.ts Fixed
…port-ui-extensions

# Conflicts:
#	packages/react/src/components/checkout/form/checkout-form.tsx
#	packages/react/src/lib/godaddy/checkout-env.ts
@wcole1-godaddy

Copy link
Copy Markdown
Contributor

Thanks for the work here. The runtime shape looks good overall, and the React package checks are green from my local pass after building the workspace dependency.

Before approval, I think we should tighten up these three items:

  1. Clean up failed or timed-out mounts

    In packages/react/src/ui-extensions/runtime/dom-bundle-runtime.ts, once contract.mount() has been invoked, a rejection or timeout can leave partial DOM/listener work behind. Because hasMounted only flips after mount completes, a later unmount() clears runtime state without calling the extension's unmount(). Please attempt cleanup when mount fails or times out after a contract exists.

  2. Wrap shipping notes with the new notes targets

    Pickup and standalone notes now render checkout.form.notes.before / checkout.form.notes.after, but the shipping notes path still renders a plain <NotesForm /> in packages/react/src/components/checkout/form/checkout-form.tsx. Please add the same target wrappers there so notes extensions work consistently for shipping-enabled checkouts.

  3. Do not render discovery errors directly to shoppers

    packages/react/src/ui-extensions/target.tsx currently renders hook/discovery errors as a visible <pre>. Since extension discovery failure should not affect checkout UX, please route that through onExtensionError, debug-only output, or silent logging instead of rendering the error by default.

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.

3 participants