Add a remote-dom to remote-ui adapter by robin-drexler · Pull Request #511 · Shopify/remote-dom

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

Close https://github.com/Shopify/temp-project-mover-Archetypically-20250512095102/issues/58.

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 <chrismsauve@gmail.com>

kumar303

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

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

packages/core/package.json

  },
  "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.

kumar303

I'm lacking some context on remote-dom internals but it looks good to me. I played with the kitchen sink example and added some fragments to it in various places. Everything was working well ✨

lemonmade

Wonderful job — thank you all for maintaining the high bar for documentation and examples in this repo, and for elevating the bar on unit tests!

lemonmade · 2025-01-28T15:09:24Z

packages/compat/package.json

+    "access": "public",
+    "@remote-dom/registry": "https://registry.npmjs.org"
+  },
+  "version": "1.0.0",


Will the changeset being a major not put this to 2.0.0 on deploy? I assumed you'd want to start on a 0.x version instead.

I'm not familiar with how versioning works in this repo. My goal was to have a 1.0.0 release for the compat package. Should I put 0.1 here as the version and let changesets bump it to 1.0.0?

Yes, I think you should do that. IIRC, as soon as you merge to main it will deploy the 0.1.0 version, and then changesets will create an additional PR that will bump it to 1.0.0 and manage the changelogs.

lemonmade · 2025-01-28T15:11:25Z

packages/compat/source/tests/adapter.test.ts

Thank you for all these helpful, easy-to-read tests 💜

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

simontaisne added the gsd:42886 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 <chrismsauve@gmail.com>

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

kumar303 approved these changes Jan 28, 2025

View reviewed changes

lemonmade approved these changes Jan 28, 2025

View reviewed changes

compat v0.1.0

df77bf3

igor10k merged commit 1a42bf6 into main Jan 28, 2025
6 checks passed

shopify-github-actions-access bot mentioned this pull request Jan 27, 2025

Publish packages 🚀 #527

Merged

Conversation

robin-drexler commented Nov 25, 2024 • edited by simontaisne Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

robin-drexler commented Dec 4, 2024

Uh oh!

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

Uh oh!

igor10k commented Dec 4, 2024

Uh oh!

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

Uh oh!

igor10k commented Dec 4, 2024

Uh oh!

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

Uh oh!

robin-drexler commented Dec 4, 2024

Uh oh!

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

Uh oh!

igor10k commented Jan 7, 2025

Uh oh!

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

Uh oh!

Uh oh!

lemonmade left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

lemonmade Jan 9, 2025

Choose a reason for hiding this comment

Uh oh!

igor10k Jan 10, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

igor10k commented Jan 10, 2025

Uh oh!

igor10k commented Jan 10, 2025

Uh oh!

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

Uh oh!

kumar303 left a comment

Choose a reason for hiding this comment

Uh oh!

kumar303 Jan 13, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

oluwatimio commented Jan 15, 2025

Uh oh!

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

Uh oh!

igor10k commented Jan 16, 2025

Uh oh!

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

Uh oh!

simontaisne commented Jan 24, 2025

Uh oh!

robin-drexler commented Jan 24, 2025

Uh oh!

kumar303 left a comment

Choose a reason for hiding this comment

Uh oh!

lemonmade left a comment

Choose a reason for hiding this comment

Uh oh!

lemonmade Jan 28, 2025

Choose a reason for hiding this comment

Uh oh!

igor10k Jan 28, 2025

Choose a reason for hiding this comment

robin-drexler commented Nov 25, 2024 •

edited by simontaisne

Loading