Shared UI react blocks#18
Closed
glvbata wants to merge 7 commits into
Closed
Conversation
Reuse HAL @hal-sbn-root/shared-ui inside Edge Delivery Services via a
React-in-a-block island, authorable in DA.live.
- blocks/_react/: esbuild-bundled island runtime, registry, generic
table->props parser, block glue
- blocks/{button,headline,savings-badge,fare-card,choose-your-fare}/:
5 shared-ui components wired as EDS blocks
- component-definition.json / component-filters.json: DA.live picker entries
- build/esbuild.mjs + build:blocks script: bundles the island (EDS is no-build)
- POC-GUIDE.md: code-level map of the POC
Scoped to the native track; the headless app (frontend/) is excluded.
package.json documents deps; lockfile/.npmrc omitted (shared-ui installs from
HAL Artifactory over VPN — the committed island bundle runs without install).
… from lint npm ci failed resolving @hal-sbn-root/shared-ui (private, HAL Artifactory) from public npm. EDS serves the committed pre-built island bundle, so the repo needs no npm deps at all — reverted package.json to main. npm run lint failed on the bundled React island + block-comment line length: - .eslintignore: ignore blocks/_react/ (bundled JSX/JS) and build/ - .stylelintignore: ignore blocks/_react/react-runtime.css (bundled CSS) - shortened the 5 block-entry comments under the 100-char max-len rule Verified: npm run lint passes locally; package.json now matches main so npm ci resolves.
The headless track (frontend/) is archived and the personal .html explainer moved out of the repo, so their references were stale. POC-GUIDE now stands alone: - explains the React-island model up front - keeps the native react->block flow, key files, picker config, last mile - adds the roadmap (Universal Editor native/headless + Content Fragments) - adds a Build & test section incl. the CI constraint (private dep out of package.json, island ignored by lint) - repo layout updated (no frontend/, no docs/)
|
Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
|
The blocks rendered + were selectable in UE (via component-definition + the ue.da.live crosswalk), but the Properties panel was empty — no field models. Adds a 'model' ref on button/headline/savings-badge/fare-card and the matching entries in component-models.json (children/variant, text, title/price/ctaLabel). Mirrors the boilerplate blocks' model pattern; no plugins.xwalk needed for this ue.da.live setup. choose-your-fare (nested fareCards[] array) is a follow-up.
…eanly UE edits a field, then re-runs the block's decorate. The old block.js wiped the source (block.textContent='') and created a fresh React root each time — so on re-render the parser read the already-rendered output → empty props → blank component (the button broke on edit). Now: authored source rows stay in the DOM (hidden), React mounts into a dedicated child island ([data-island-root]), and the root is reused across re-renders; the parser skips the island target. Verified locally: editing the source + re-decorating updates the component (no blank, single root).
EDS loadBlock() fetches /blocks/<name>/<name>.css for every block. Only choose-your-fare had one; button/headline/savings-badge/fare-card 404'd → 'failed to load block'. Harmless on first mount (React still mounts), but on a UE edit the whole Section re-decorates — every block 404s and they collapse into each other (breaking siblings). Adds the four missing near-empty block CSS files; the React island still provides the actual styling.
…UE save
After a UE save/publish, UE serializes the injected [data-island-root] div into
the content. On reload mountComponent found that div, but the root was stored as a
DOM property (target._root) that doesn't survive serialization → undefined →
target._root.render() threw → components didn't render at all ('not showing up').
Track roots in a WeakMap keyed by the target element. A fresh/serialized target
isn't in the map, so we clear any stale serialized output and create a new root.
Verified: re-decorating a serialized block (island baked in, no tracked root)
re-renders cleanly, no crash, single island root.
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
1 participant
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.
Please always provide the GitHub issue(s) your PR is for, as well as test URLs where your change can be observed (before and after):
Fix #
Test URLs: