Add a remote-dom to remote-ui adapter #511

robin-drexler · 2024-11-25T20:13:52Z

Close https://github.com/Shopify/checkout-web/issues/40150.

The adapter is supposed to help transition from remote-ui to remote-dom, while supporting existing legacy code that uses remote-ui-style APIs.

robin-drexler · 2024-12-04T18:38:56Z

/snapit

shopify-github-actions-access · 2024-12-04T18:39:46Z

🫰✨ Thanks @robin-drexler! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

"@remote-dom/core": "0.0.0-snapshot-20241204183932",
"@remote-dom/polyfill": "0.0.0-snapshot-20241204183932",
"@remote-dom/preact": "0.0.0-snapshot-20241204183932",
"@remote-dom/react": "0.0.0-snapshot-20241204183932",
"@remote-dom/signals": "0.0.0-snapshot-20241204183932"

igor10k · 2024-12-04T20:43:02Z

/snapit

shopify-github-actions-access · 2024-12-04T20:43:48Z

🫰✨ Thanks @igor10k! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

"@remote-dom/core": "0.0.0-snapshot-20241204204334",
"@remote-dom/polyfill": "0.0.0-snapshot-20241204204334",
"@remote-dom/preact": "0.0.0-snapshot-20241204204334",
"@remote-dom/react": "0.0.0-snapshot-20241204204334",
"@remote-dom/signals": "0.0.0-snapshot-20241204204334"

igor10k · 2024-12-04T20:49:52Z

/snapit

shopify-github-actions-access · 2024-12-04T20:50:31Z

🫰✨ Thanks @igor10k! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

"@remote-dom/core": "0.0.0-snapshot-20241204205017",
"@remote-dom/polyfill": "0.0.0-snapshot-20241204205017",
"@remote-dom/preact": "0.0.0-snapshot-20241204205017",
"@remote-dom/react": "0.0.0-snapshot-20241204205017",
"@remote-dom/signals": "0.0.0-snapshot-20241204205017"

robin-drexler · 2024-12-04T22:44:23Z

/snapit

shopify-github-actions-access · 2024-12-04T22:45:13Z

🫰✨ Thanks @robin-drexler! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

"@remote-dom/core": "0.0.0-snapshot-20241204224457",
"@remote-dom/polyfill": "0.0.0-snapshot-20241204224457",
"@remote-dom/preact": "0.0.0-snapshot-20241204224457",
"@remote-dom/react": "0.0.0-snapshot-20241204224457",
"@remote-dom/signals": "0.0.0-snapshot-20241204224457"

igor10k · 2025-01-07T18:02:30Z

/snapit

shopify-github-actions-access · 2025-01-07T18:03:15Z

🫰✨ Thanks @igor10k! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

"@remote-dom/core": "0.0.0-snapshot-20250107180300",
"@remote-dom/polyfill": "0.0.0-snapshot-20250107180300",
"@remote-dom/preact": "0.0.0-snapshot-20250107180300",
"@remote-dom/react": "0.0.0-snapshot-20250107180300",
"@remote-dom/signals": "0.0.0-snapshot-20250107180300"

examples/kitchen-sink/app/remote/examples/remote-ui.ts

lemonmade

Had a bunch of requests, but this is looking really great 👍

.changeset/beige-windows-appear.md

examples/remote-ui/README.md

examples/remote-ui/app/index.html

examples/remote-ui/app/remote/iframe.html

examples/remote-ui/app/remote/remote.tsx

packages/core/source/legacy/host.ts

lemonmade · 2025-01-09T21:44:00Z

packages/core/source/legacy/host.ts

+            const index = tree[id]?.findIndex(({slot}) => slot === key) ?? -1;
+
+            if (index !== -1) {
+              records.push([


Should we check if the new fragment is actually different from the old one, before removing it?

Can it be the same? I assume that there's some shallow comparison happening on the remote to not cause redundant payloads. I mean if the fragment didn't change then there should be no "update props" action.

packages/core/source/legacy/host.ts

igor10k · 2025-01-10T14:22:03Z

/snapit

igor10k · 2025-01-10T19:12:31Z

/snapit

shopify-github-actions-access · 2025-01-10T19:13:17Z

🫰✨ Thanks @igor10k! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

"@remote-dom/core": "0.0.0-snapshot-20250110191257",
"@remote-dom/polyfill": "0.0.0-snapshot-20250110191257",
"@remote-dom/preact": "0.0.0-snapshot-20250110191257",
"@remote-dom/react": "0.0.0-snapshot-20250110191257",
"@remote-dom/signals": "0.0.0-snapshot-20250110191257"

Co-authored-by: Chris Sauve <[email protected]>

kumar303

I think it would be nicer to introduce this as a separate package

kumar303 · 2025-01-13T16:19:46Z

packages/core/package.json

@@ -81,6 +91,7 @@
  },
  "dependencies": {
    "@remote-dom/polyfill": "workspace:^1.4.2",
+    "@remote-ui/core": "^2.0.0",


re: https://github.com/Shopify/remote-dom/pull/511/files#r1909454081

It also struck me as "not right" for @remote-dom/core to depend on @remote-ui/core.

What about, instead, extracting all the adapter parts to a new package like @remote-dom/compat? Is it possible to do that? This would allow core to remain focused on remote-dom exclusively while still allowing someone to use @remote-dom/compat if they need remote-ui backwards compatibility.

examples/kitchen-sink/app/host.tsx

oluwatimio · 2025-01-15T14:19:02Z

/snapit

shopify-github-actions-access · 2025-01-15T14:19:47Z

🫰✨ Thanks @oluwatimio! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

"@remote-dom/core": "0.0.0-snapshot-20250115141927",
"@remote-dom/polyfill": "0.0.0-snapshot-20250115141927",
"@remote-dom/preact": "0.0.0-snapshot-20250115141927",
"@remote-dom/react": "0.0.0-snapshot-20250115141927",
"@remote-dom/signals": "0.0.0-snapshot-20250115141927"

igor10k · 2025-01-16T20:35:34Z

/snapit

shopify-github-actions-access · 2025-01-16T20:36:24Z

🫰✨ Thanks @igor10k! Your snapshot has been published to npm.

Test the snapshot by updating your package.json with the newly published version:

"@remote-dom/compat": "0.0.0-snapshot-20250116203606"

simontaisne · 2025-01-24T09:49:38Z

Hey folks, just trying to figure out if something is blocking this PR from being shipped?

robin-drexler · 2025-01-24T14:34:17Z

@simontaisne another review from @lemonmade would be good, I think.

robin-drexler force-pushed the rd/legacy-adapter branch 3 times, most recently from c8e1a10 to 364cac0 Compare November 25, 2024 20:18

robin-drexler force-pushed the rd/legacy-adapter branch 3 times, most recently from 8283f6e to d57efb4 Compare December 4, 2024 16:29

igor10k changed the base branch from main to create-legacy-adaptors December 4, 2024 22:26

igor10k changed the base branch from create-legacy-adaptors to main December 4, 2024 22:27

robin-drexler changed the title ~~Rd/legacy adapter~~ legacy adapter Dec 4, 2024

robin-drexler force-pushed the rd/legacy-adapter branch from 9659e48 to e9d04ef Compare December 6, 2024 22:00

igor10k force-pushed the rd/legacy-adapter branch 2 times, most recently from 584ccad to fdd1a75 Compare January 7, 2025 17:47

igor10k marked this pull request as ready for review January 7, 2025 17:49

igor10k force-pushed the rd/legacy-adapter branch from fdd1a75 to 590eb6d Compare January 7, 2025 17:58

igor10k requested a review from lemonmade January 7, 2025 18:01

igor10k changed the title ~~legacy adapter~~ Add a remote-dom to remote-ui adapter Jan 7, 2025

igor10k requested a review from kumar303 January 7, 2025 19:08

robin-drexler commented Jan 8, 2025

View reviewed changes

examples/kitchen-sink/app/remote/examples/remote-ui.ts Outdated Show resolved Hide resolved

lemonmade requested changes Jan 9, 2025

View reviewed changes

igor10k added 4 commits January 10, 2025 14:10

Switch tree to Map

41a30eb

Get rid of negation in conditions

d771f15

Lift out "update props" variables

656152e

Add slotWrapper

53c1b2e

igor10k force-pushed the rd/legacy-adapter branch from 9336ffd to 53c1b2e Compare January 10, 2025 19:10

simontaisne added the #gsd:42886 Remote DOM for Checkout and Customer Account UI Extensions label Jan 13, 2025

igor10k and others added 2 commits January 13, 2025 10:38

Update packages/core/source/legacy/host.ts

19f7240

Co-authored-by: Chris Sauve <[email protected]>

slotWrapper -> slotProps.wrapper

410ad7c

kumar303 reviewed Jan 13, 2025

View reviewed changes

Add first set of tests

587f994

lemonmade reviewed Jan 13, 2025

View reviewed changes

examples/kitchen-sink/app/host.tsx Outdated Show resolved Hide resolved

examples/kitchen-sink/app/host.tsx Outdated Show resolved Hide resolved

simontaisne added 3 commits January 14, 2025 13:06

Update tests

4a2ab2e

Fix test imports

9e4f271

Add additional tests

56eab19

Extract adapter into a separate package

c409934

igor10k force-pushed the rd/legacy-adapter branch from e753b82 to c409934 Compare January 15, 2025 20:01

igor10k and others added 4 commits January 15, 2025 15:03

Use adapter component mapping

28c82ad

ensure files are imported from source

2b839d0

renderRemoteUi -> renderLegacy

0e2ab31

Merge imports

d1ad8d4

simontaisne requested review from kumar303 and lemonmade January 24, 2025 09:48

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add a remote-dom to remote-ui adapter #511

Add a remote-dom to remote-ui adapter #511

robin-drexler commented Nov 25, 2024 •

edited by simontaisne

Loading

robin-drexler commented Dec 4, 2024

shopify-github-actions-access bot commented Dec 4, 2024

igor10k commented Dec 4, 2024

shopify-github-actions-access bot commented Dec 4, 2024

igor10k commented Dec 4, 2024

shopify-github-actions-access bot commented Dec 4, 2024

robin-drexler commented Dec 4, 2024

shopify-github-actions-access bot commented Dec 4, 2024

igor10k commented Jan 7, 2025

shopify-github-actions-access bot commented Jan 7, 2025

lemonmade left a comment

lemonmade Jan 9, 2025

igor10k Jan 10, 2025

igor10k commented Jan 10, 2025

igor10k commented Jan 10, 2025

shopify-github-actions-access bot commented Jan 10, 2025

kumar303 left a comment

kumar303 Jan 13, 2025

oluwatimio commented Jan 15, 2025

shopify-github-actions-access bot commented Jan 15, 2025

igor10k commented Jan 16, 2025

shopify-github-actions-access bot commented Jan 16, 2025

simontaisne commented Jan 24, 2025

robin-drexler commented Jan 24, 2025

Add a remote-dom to remote-ui adapter #511

Are you sure you want to change the base?

Add a remote-dom to remote-ui adapter #511

Conversation

robin-drexler commented Nov 25, 2024 • edited by simontaisne Loading

robin-drexler commented Dec 4, 2024

shopify-github-actions-access bot commented Dec 4, 2024

igor10k commented Dec 4, 2024

shopify-github-actions-access bot commented Dec 4, 2024

igor10k commented Dec 4, 2024

shopify-github-actions-access bot commented Dec 4, 2024

robin-drexler commented Dec 4, 2024

shopify-github-actions-access bot commented Dec 4, 2024

igor10k commented Jan 7, 2025

shopify-github-actions-access bot commented Jan 7, 2025

lemonmade left a comment

Choose a reason for hiding this comment

lemonmade Jan 9, 2025

Choose a reason for hiding this comment

igor10k Jan 10, 2025

Choose a reason for hiding this comment

igor10k commented Jan 10, 2025

igor10k commented Jan 10, 2025

shopify-github-actions-access bot commented Jan 10, 2025

kumar303 left a comment

Choose a reason for hiding this comment

kumar303 Jan 13, 2025

Choose a reason for hiding this comment

oluwatimio commented Jan 15, 2025

shopify-github-actions-access bot commented Jan 15, 2025

igor10k commented Jan 16, 2025

shopify-github-actions-access bot commented Jan 16, 2025

simontaisne commented Jan 24, 2025

robin-drexler commented Jan 24, 2025

robin-drexler commented Nov 25, 2024 •

edited by simontaisne

Loading