diff --git a/.eslintignore b/.eslintignore index 894e662..41e8898 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,2 +1,4 @@ helix-importer-ui -*.min.js \ No newline at end of file +*.min.js +blocks/_react/ +build/ diff --git a/.stylelintignore b/.stylelintignore new file mode 100644 index 0000000..4fe3c63 --- /dev/null +++ b/.stylelintignore @@ -0,0 +1 @@ +blocks/_react/react-runtime.css diff --git a/POC-GUIDE.md b/POC-GUIDE.md new file mode 100644 index 0000000..79648f7 --- /dev/null +++ b/POC-GUIDE.md @@ -0,0 +1,142 @@ +# HAL × Adobe EDS / DA.live — Native Authoring POC Guide + +**Start here.** This repo (`hal`, from `AdobeDevXSC/hal`) is a proof-of-concept answering one question: +**can we reuse HAL's `@hal-sbn-root/shared-ui` design system inside Adobe Edge Delivery Services (EDS)** — +where authors compose pages in **DA.live** (Document Authoring), **Adobe's edge renders the page**, and +authors can **drag / rearrange** our components? + +Answer so far: **yes** — our shared-ui components run as **React islands** inside vanilla EDS blocks. + +> A prior track — **headless** (a Next.js app that fetched DA.live JSON and rendered shared-ui itself) — +> was proven separately and is **archived** at `../hal-headless-poc/`. This repo is the **native** +> (EDS-rendered) track, plus the **Universal Editor** work on the roadmap below. + +--- + +## The core idea — "React islands" + +An EDS page is **mostly plain HTML** rendered by Adobe's edge (nav, text, images, footer — no React). +Each of our components is a **self-contained pocket of React** — an *island* — mounted into one block's +`
`, with its own React runtime bundled in. The rest of the page never loads React. (The term comes +from "islands architecture": the page is the static ocean; each interactive component is a React island.) + +EDS is **no-build**, so we pre-bundle the island (React + shared-ui + providers) with esbuild and **commit +the output** — EDS serves it as-is. + +--- + +## ★ How the React → block mapping works + +When EDS renders a page, for each block named `` it auto-imports `blocks//.js` +and calls its default export with the block's DOM element (EDS's `decorate()` contract): + +``` +Authored block table (rows of: key | value) + │ + ▼ EDS auto-loads blocks//.js (e.g. blocks/button/button.js) +renderBlock(block, 'Button') ← blocks/_react/block.js (orchestrator) + │ + ├─ parseBlock(block) ← blocks/_react/parse.js ★ the table → props mapping + │ reads the 2-col rows into a props object; supports dotted + [index] paths + booleans: + │ children -> "Book now" + │ fareCards[0].title -> array of objects + │ card1.isBestValue -> boolean + │ + ├─ ensureIslandCss() injects react-runtime.css once + │ + ▼ dynamic import of the esbuild bundle (react-runtime.js) +mountComponent(el, 'Button', props) ← blocks/_react/runtime.jsx (the island) + │ registry['Button'] → the shared-ui Button ← blocks/_react/registry.jsx + ▼ +createRoot(el).render(