### Run Getting Started Example

Source: https://github.com/shopify/remote-dom/blob/main/examples/getting-started/README.md

This command executes the 'getting-started' example using pnpm, filtering for the specific example package within the repository.

```bash
pnpm --filter example-getting-started start
```

--------------------------------

### Run Custom Element Example

Source: https://github.com/shopify/remote-dom/blob/main/examples/custom-element/README.md

Command to start the custom element example using pnpm. This command filters for the 'example-custom-element' package and executes its start script.

```bash
pnpm --filter example-custom-element start
```

--------------------------------

### Run Kitchen Sink Example

Source: https://github.com/shopify/remote-dom/blob/main/examples/kitchen-sink/README.md

Command to start the kitchen sink example from the repository root using pnpm.

```bash
pnpm --filter example-kitchen-sink start
```

--------------------------------

### Initialize and Connect DOMRemoteReceiver

Source: https://github.com/shopify/remote-dom/blob/main/examples/getting-started/app/index.html

This snippet demonstrates how to initialize a `DOMRemoteReceiver` and connect it to a root element in the host environment. It also sets up an event listener to receive messages from an iframe and propagate mutations to the receiver.

```javascript
import {DOMRemoteReceiver} from '@remote-dom/core/receivers';

const root = document.querySelector('#root');
const iframe = document.querySelector('#remote-iframe');

// A `DOMRemoteReceiver` will automatically synchronize changes
// from the remote environment to the host environment as native
// HTML elements. We connect it to the `root` element so that it
// will insert any content from the remote environment there.
const receiver = new DOMRemoteReceiver();
receiver.connect(root);

window.addEventListener('message', ({source, data}) => {
  // Ensure the message is coming from our iframe
  if (source !== iframe.contentWindow) return;

  // Communicate the mutation to the `DOMRemoteReceiver`
  receiver.connection.mutate(data);
});
```

--------------------------------

### Installation

Source: https://github.com/shopify/remote-dom/blob/main/packages/signals/README.md

Instructions for installing the @remote-dom/signals library using npm, pnpm, and yarn.

```sh
npm install @remote-dom/signals --save
pnpm install @remote-dom/signals --save
yarn add @remote-dom/signals
```

--------------------------------

### Install @remote-dom/core

Source: https://github.com/shopify/remote-dom/blob/main/packages/core/README.md

Provides installation instructions for the @remote-dom/core package using different package managers like npm, pnpm, and yarn.

```sh
npm install @remote-dom/core --save # npm
pnpm install @remote-dom/core --save # pnpm
yarn add @remote-dom/core # yarn
```

--------------------------------

### Basic Remote DOM Synchronization

Source: https://github.com/shopify/remote-dom/blob/main/examples/getting-started/app/remote.html

This snippet demonstrates the basic usage of Remote DOM. It synchronizes changes in a specified DOM element to the host environment using `setInterval` for updates and `RemoteMutationObserver` to capture and post mutations.

```javascript
import {RemoteMutationObserver} from '@remote-dom/core/elements';

// We will synchronize changes in this element to the host environment.
const root = document.querySelector('#root');
let count = 0;

// Update text every second, to demonstrate that Remote DOM can handle
// both initial HTML and updates that happen later.
setInterval(() => {
  count += 1;
  render();
}, 1000);

render();

function render() {
  root.textContent = `Rendered ${count} ${count === 1 ? 'second' : 'seconds'} ago`;
}

// Create a special `MutationObserver` that will map changes
// in the HTML to Remote DOM-compatible mutations.
const observer = new RemoteMutationObserver({
  mutate(mutations) {
    window.parent.postMessage(mutations, '*');
  },
});

observer.observe(root);
```

--------------------------------

### Install @remote-dom/polyfill

Source: https://github.com/shopify/remote-dom/blob/main/packages/polyfill/README.md

Provides installation commands for the @remote-dom/polyfill package using npm, pnpm, and yarn.

```sh
npm install @remote-dom/polyfill --save # npm
pnpm install @remote-dom/polyfill --save # pnpm
yarn add @remote-dom/polyfill # yarn
```

--------------------------------

### Install @remote-dom/preact

Source: https://github.com/shopify/remote-dom/blob/main/packages/preact/README.md

Installs the necessary @remote-dom/core and @remote-dom/preact packages using npm, pnpm, or yarn.

```sh
npm install @remote-dom/core @remote-dom/preact --save # npm
pnpm install @remote-dom/core @remote-dom/preact --save # pnpm
yarn add @remote-dom/core @remote-dom/preact # yarn
```

--------------------------------

### Creating a RemoteReceiver

Source: https://github.com/shopify/remote-dom/blob/main/packages/core/README.md

Demonstrates how to create an empty RemoteReceiver instance using its constructor. This is the basic setup for using the RemoteReceiver.

```ts
import {RemoteReceiver} from '@remote-dom/core/receivers';

const receiver = new RemoteReceiver();
```

--------------------------------

### Install @remote-dom/core

Source: https://github.com/shopify/remote-dom/blob/main/README.md

Installs the core library for Remote DOM functionality using yarn.

```bash
yarn add @remote-dom/core
```

--------------------------------

### Installation

Source: https://github.com/shopify/remote-dom/blob/main/packages/react/README.md

Installs the necessary @remote-dom packages for core functionality and React integration using npm, pnpm, or yarn.

```sh
npm install @remote-dom/core @remote-dom/react --save # npm
pnpm install @remote-dom/core @remote-dom/react --save # pnpm
yarn add @remote-dom/core @remote-dom/react # yarn
```

--------------------------------

### Install @remote-dom/core

Source: https://github.com/shopify/remote-dom/blob/main/README.md

Installs the core package for Remote DOM, which is necessary for establishing connections between host and remote environments. This package is essential for any project utilizing Remote DOM.

```bash
# npm
npm install @remote-dom/core --save
# pnpm
pnpm install @remote-dom/core --save
```

--------------------------------

### Development Commands

Source: https://github.com/shopify/remote-dom/blob/main/CONTRIBUTING.md

Commands for setting up and running development tasks in the Remote DOM project, including installation, type checking, linting, testing, and building.

```bash
pnpm install
pnpm type-check
pnpm lint
pnpm test
pnpm build
```

--------------------------------

### Shopify Remote DOM Kitchen Sink

Source: https://github.com/shopify/remote-dom/blob/main/examples/kitchen-sink/app/index.html

A collection of examples showcasing the capabilities of the Shopify Remote DOM library. This includes various DOM manipulation techniques and remote rendering scenarios.

```javascript
// Example 1: Basic DOM update
remoteDOM.update(
  '#my-element',
  '<h1>Hello, Remote DOM!</h1>'
);

// Example 2: Adding an event listener remotely
remoteDOM.addEvent(
  '#my-button',
  'click',
  () => {
    alert('Button clicked!');
  }
);

// Example 3: Rendering a component remotely
remoteDOM.renderComponent(
  '#app-container',
  'MyAwesomeComponent',
  { message: 'Welcome!' }
);

// Example 4: Handling remote events
remoteDOM.on('custom-event', (data) => {
  console.log('Received custom event:', data);
});

// Example 5: Removing an element remotely
remoteDOM.remove('#element-to-remove');

// Example 6: Replacing an element remotely
remoteDOM.replace(
  '#old-element',
  '<p>This is the new content.</p>'
);

// Example 7: Getting element attributes remotely
const attributeValue = await remoteDOM.getAttribute('#my-element', 'data-id');
console.log('Attribute value:', attributeValue);

// Example 8: Setting element attributes remotely
remoteDOM.setAttribute('#my-element', 'data-status', 'active');

// Example 9: Traversing the DOM remotely
const children = await remoteDOM.children('#parent-element');
console.log('Children:', children);

// Example 10: Checking if an element exists remotely
const exists = await remoteDOM.exists('#some-element');
console.log('Element exists:', exists);

```

--------------------------------

### Remote Content Rendering Example

Source: https://github.com/shopify/remote-dom/blob/main/README.md

Demonstrates how to render dynamic content within the remote environment's root element using JavaScript. This content will be synchronized to the host page via the RemoteMutationObserver.

```html
<!doctype html>
<html>
  <body>
    <div id="root"></div>

    <script type="module">
      // Previous script’s contents, excluded for brevity.
      // ...
    </script>

    <script type="module">
      const root = document.querySelector('#root');

      let count = 0;

      setInterval(() => {
        count += 1;
        render();
      }, 1_000);

      function render() {
        root.textContent = `Rendered ${count} ${ 
          count === 1 ? 'second' : 'seconds'
        } ago`;
      }
    </script>
  </body>
</html>
```

--------------------------------

### RemoteRootRenderer Setup with Preact

Source: https://github.com/shopify/remote-dom/blob/main/packages/preact/README.md

Shows how to set up the `RemoteRootRenderer` to render a tree of remote elements using Preact. It includes initializing a `SignalRemoteReceiver` and mapping remote elements to Preact components.

```javascript
// If you don’t already have this import somewhere in your project, you need
// to add it — this import adds the Preact hooks that auto-subscribe components
// to signals.
import '@preact/signals';

import {render} from 'preact';
import {
  createRemoteComponentRenderer,
  RemoteRootRenderer,
  SignalRemoteReceiver,
} from '@remote-dom/preact/host';

// Create wrapper elements to render our actual UI components in response
// to remote elements. See the `createRemoteComponentRenderer()` section above.
const Card = createRemoteComponentRenderer(UICard);

const receiver = new SignalRemoteReceiver();
// TODO: send the `receiver.connection` object to the remote environment,
// so it can send us updates about the tree of remote elements.

render(
  <RemoteRootRenderer
    receiver={receiver}
    components={new Map([['ui-card', Card]])}
  />,
  document.querySelector('#root'),
);
```

--------------------------------

### HTML Structure for Remote DOM Example

Source: https://github.com/shopify/remote-dom/blob/main/README.md

Basic HTML structure including a root element for Remote DOM rendering and an iframe for the remote content.

```html
<div id="root"></div>
<iframe id="remote-iframe"></iframe>
```

--------------------------------

### Customizing DOM Operations with Hooks

Source: https://github.com/shopify/remote-dom/blob/main/packages/polyfill/README.md

Shows how to customize DOM operations by overwriting properties on the `hooks` export from the @remote-dom/polyfill library. This example logs the creation of elements to the console.

```ts
import {hooks} from '@remote-dom/polyfill';

hooks.createElement = (element) => {
  console.log('Creating element:', element);
};
```

--------------------------------

### Host Setup: Integrating Iframe and Receiver

Source: https://github.com/shopify/remote-dom/blob/main/README.md

Integrates a hidden iframe as the remote environment and sets up a message listener on the host to forward mutations from the iframe to the DOMRemoteReceiver. This enables real-time DOM synchronization.

```html
<!doctype html>
<html>
  <body>
    <div id="root"></div>

    <iframe id="remote-iframe" src="/remote" hidden></iframe>

    <script type="module">
      import {DOMRemoteReceiver} from '@remote-dom/core/receivers';

      const root = document.querySelector('#root');
      const iframe = document.querySelector('#remote-iframe');

      const receiver = new DOMRemoteReceiver();
      receiver.connect(root);

      // We will send this message in the next step.
      window.addEventListener('message', ({source, data}) => {
        if (source !== iframe.contentWindow) return;
        receiver.connection.mutate(data);
      });
    </script>
  </body>
</html>
```

--------------------------------

### Host Setup: DOMRemoteReceiver

Source: https://github.com/shopify/remote-dom/blob/main/README.md

Sets up the DOMRemoteReceiver on the host page to receive and render DOM updates from a remote environment. It connects the receiver to a specified root element.

```html
<!doctype html>
<html>
  <body>
    <div id="root"></div>

    <script type="module">
      import {DOMRemoteReceiver} from '@remote-dom/core/receivers';

      const root = document.querySelector('#root');

      const receiver = new DOMRemoteReceiver();
      receiver.connect(root);
    </script>
  </body>
</html>
```

--------------------------------

### Update package dependencies for @remote-dom/react

Source: https://github.com/shopify/remote-dom/blob/main/documentation/migrations/remote-ui-to-remote-dom.md

Shows the necessary changes to `package.json` to uninstall `@remote-ui/react` and install `@remote-dom/react`, along with related React dependencies.

```diff
{
  "dependencies": {
-    "@remote-ui/react": "^5.0.0",
+    "@remote-dom/react": "^1.0.0",
  }
}

{
  "dependencies": {
    "@remote-dom/react": "^1.0.0",
    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
-    "react-reconciler": "*",
  }
}
```

--------------------------------

### Remote Setup: RemoteMutationObserver

Source: https://github.com/shopify/remote-dom/blob/main/README.md

Configures the RemoteMutationObserver in the remote environment (e.g., an iframe) to monitor changes within a specified root element and send these mutations to the parent window via `postMessage`.

```html
<!doctype html>
<html>
  <body>
    <div id="root"></div>

    <script type="module">
      import {RemoteMutationObserver} from '@remote-dom/core/elements';

      // We will synchronize everything inside this element to the host.
      const root = document.querySelector('#root');

      // Send the mutations to the host via `postMessage`, which we just finished
      // adding a listener for in the previous step.
      const observer = new RemoteMutationObserver({
        mutate(mutations) {
          window.parent.postMessage(mutations, '*');
        },
      });

      observer.observe(root);
    </script>
  </body>
</html>
```

--------------------------------

### Remote DOM Setup with UIButton

Source: https://github.com/shopify/remote-dom/blob/main/examples/custom-element/app/index.html

Initializes the Remote DOM receiver to only allow 'ui-button' elements and connects it to a root element. It then establishes a thread connection to an iframe to render the remote DOM tree, enabling communication for events like 'click'.

```javascript
import {DOMRemoteReceiver} from '@remote-dom/core/receivers';
import {ThreadIframe} from '@quilted/threads';

const root = document.querySelector('#root');
const iframe = document.querySelector('#remote-iframe');

const receiver = new DOMRemoteReceiver({
  elements: ['ui-button'],
});
receiver.connect(root);

const thread = new ThreadIframe(iframe);
thread.imports.render(receiver.connection);
```

--------------------------------

### Synchronize DOM Changes with RemoteMutationObserver

Source: https://github.com/shopify/remote-dom/blob/main/examples/custom-element/app/remote.html

Utilizes RemoteMutationObserver to synchronize DOM changes within a specified root element. This observer is configured to work with a RemoteConnection, enabling real-time updates to be sent to a host environment.

```javascript
import {RemoteMutationObserver} from '@remote-dom/core/elements';
import {ThreadNestedIframe} from '@quilted/threads';

const root = document.querySelector('#root');

new ThreadNestedIframe({
  exports: {
    async render(connection) {
      const observer = new RemoteMutationObserver(connection);
      observer.observe(root);
    },
  },
});
```

--------------------------------

### Handle Button Click Events

Source: https://github.com/shopify/remote-dom/blob/main/examples/custom-element/app/remote.html

Adds an event listener to a 'ui-button' element to increment a counter, update the button's text content, and remove the 'primary' attribute after 5 clicks. This demonstrates dynamic UI updates based on user interaction.

```javascript
let count = 0;
const button = document.querySelector('ui-button');
button.addEventListener('click', () => {
  count += 1;
  button.textContent = `Clicked ${count} ${ count === 1 ? 'time' : 'times'}`;
  if (count === 5) {
    button.removeAttribute('primary');
  }
});
```

--------------------------------

### Deprecated Event Listener Synchronization

Source: https://github.com/shopify/remote-dom/blob/main/packages/core/README.md

Provides an example of the deprecated `event: true` configuration for remote properties, which was used to synchronize event listeners. It highlights the usage pattern but notes its deprecation in favor of `remoteEvents`.

```ts
import {RemoteElement} from '@remote-dom/core/elements';

class MyElement extends RemoteElement {
  static get remoteProperties() {
    return {
      onPress: {event: true},
    };
  }
}

```

--------------------------------

### Update Remote Code with DOM Elements

Source: https://github.com/shopify/remote-dom/blob/main/documentation/migrations/remote-ui-to-remote-dom.md

Illustrates the shift from using `createRemoteRoot()` in remote-ui to native DOM APIs for managing remote elements. This example shows creating and appending a custom `ui-button` element to a `remote-root` element.

```javascript
// Replace this:

import {createRemoteRoot} from '@remote-ui/core';

export function receiveChannelFromHostEnvironment(channel) {
  const root = createRemoteRoot(channel);
  const button = root.createComponent(
    'Button',
    {
      primary: true,
      onPress: () => console.log('Pressed!'),
    },
    ['Press me!'],
  );
  root.appendChild(button);
}

// With this:

import {RemoteRootElement} from '@remote-dom/core/elements';

// Define our `Button` custom element, from earlier.
customElements.define('ui-button', Button);

// If you’re using an `<iframe>` sandbox, you should use the `RemoteMutationObserver`
// and an empty `div` element instead.
customElements.define('remote-root', RemoteRootElement);

export function receiveConnectionFromHostEnvironment(connection) {
  const root = document.createElement('remote-root');
  document.body.appendChild(root);

  const button = document.createElement('ui-button');
  button.primary = true;
  button.addEventListener('press', () => console.log('Pressed!'));
  button.textContent = 'Press me!';
  root.appendChild(button);
}
```

--------------------------------

### Define Custom UIButton Element

Source: https://github.com/shopify/remote-dom/blob/main/examples/custom-element/app/remote.html

Defines a custom HTML element 'ui-button' that extends RemoteElement. It specifies remote attributes and handles click events, logging event details and updating the button's text content.

```javascript
import {RemoteElement} from '@remote-dom/core/elements';

class UIButton extends RemoteElement {
  static get remoteAttributes() {
    return ['primary'];
  }

  static get remoteEvents() {
    return {
      click: {
        dispatchEvent(detail) {
          console.log(`Event detail: `, detail);
        },
      },
    };
  }
}

customElements.define('ui-button', UIButton);
```

--------------------------------

### Initialize Remote DOM Polyfill

Source: https://github.com/shopify/remote-dom/blob/main/packages/polyfill/README.md

Demonstrates how to initialize the Remote DOM polyfill by creating a new `Window` instance and setting it as the global environment. This enables the use of DOM APIs like `document.createElement`.

```ts
import {Window} from '@remote-dom/polyfill';

const window = new Window();
Window.setGlobal(window);

// Now you can use many important DOM APIs, like `document` and `Element`:
const div = document.createElement('div');
```

--------------------------------

### Initialize DOMRemoteReceiver

Source: https://github.com/shopify/remote-dom/blob/main/packages/core/README.md

Demonstrates the basic initialization of DOMRemoteReceiver and connecting it to a host element (document.body) to serve as the root for synchronized remote elements.

```ts
import {DOMRemoteReceiver} from '@remote-dom/core/receivers';

const receiver = new DOMRemoteReceiver();

receiver.connect(document.body);
```

--------------------------------

### Import Remote DOM Polyfill

Source: https://github.com/shopify/remote-dom/blob/main/packages/core/README.md

Demonstrates how to import the minimal DOM polyfill from `@remote-dom/core/polyfill` to enable running remote elements in a web worker.

```ts
import '@remote-dom/core/polyfill';
import {RemoteElement} from '@remote-dom/core/elements';

// ...
```

--------------------------------

### RemoteFragmentElement Definition

Source: https://github.com/shopify/remote-dom/blob/main/packages/core/README.md

Provides an example of defining a custom element for generic containers used by @remote-dom/preact and @remote-dom/react. This element is named 'remote-fragment' by Remote DOM.

```ts
import {RemoteFragmentElement} from '@remote-dom/core/elements';

customElements.define('remote-fragment', RemoteFragmentElement);
```

--------------------------------

### Get Remote Element State

Source: https://github.com/shopify/remote-dom/blob/main/packages/core/README.md

Illustrates how to fetch the latest state of a remote element using RemoteReceiver.get(). It checks if the returned value is the same as the provided root element.

```ts
import {RemoteReceiver} from '@remote-dom/core/receivers';

const receiver = new RemoteReceiver();

receiver.get(receiver.root) === receiver.root; // true
```

--------------------------------

### Create DOM Elements with html Helper

Source: https://github.com/shopify/remote-dom/blob/main/packages/core/README.md

Shows how to use the `html` helper function from `@remote-dom/core/html` to create DOM elements from tagged template literals, with intelligent property handling for attributes, properties, and event listeners.

```javascript
import {html} from '@remote-dom/core/html';

function MyButton() {
  return html`<ui-button
    onClick=${() => {
      console.log('Pressed!');
    }}
    >Click me!</ui-button
  >`;
}

const html = html`
  <ui-stack spacing>
    <ui-text>Hello, world!</ui-text>
    <${MyButton} />
  </ui-stack>
` satisfies HTMLElement;

```

--------------------------------

### Original remote-ui RemoteChannel Usage

Source: https://github.com/shopify/remote-dom/blob/main/packages/compat/README.md

Illustrates the typical way to obtain a `RemoteChannel` from a `RemoteReceiver` in the older `remote-ui` project. This serves as a baseline for understanding the migration facilitated by `@remote-dom/compat`.

```ts
import {createRemoteReceiver} from '@remote-ui/core';

const receiver = createRemoteReceiver();
const channel = receiver.receive;

// Do something with the channel, typically by sending it to a remote environment:
sendChannelToRemoteEnvironment(channel);
```

--------------------------------

### Listen for Remote Events

Source: https://github.com/shopify/remote-dom/blob/main/packages/core/README.md

Demonstrates how to create an element that dispatches remote events and add an event listener to capture these events in the host environment.

```javascript
const element = document.createElement('my-element');
element.addEventListener('change', () => console.log('Changed!'));
```

--------------------------------

### Implement Remote Method

Source: https://github.com/shopify/remote-dom/blob/main/packages/core/README.md

Demonstrates how to implement a remote method ('alert') for a specific element using RemoteReceiver. The host environment provides the implementation, which can be called from the remote environment.

```ts
import {RemoteReceiver} from '@remote-dom/core/receivers';

const receiver = new RemoteReceiver();

receiver.implement(receiver.root, {
  alert(message) {
    window.alert(message);
  },
});
```

--------------------------------

### RemoteReceiver with Manual Memory Management

Source: https://github.com/shopify/remote-dom/blob/main/packages/core/README.md

Shows how to initialize a RemoteReceiver with `retain` and `release` options for manual memory management, which is useful when passing functions over `postMessage` to prevent memory leaks.

```ts
// This library is not included with Remote DOM, but it pairs
// well with it in allowing you to pass functions between
// JavaScript environments without leaking memory, by manually
// managing the memory for those functions.
import {retain, release} from '@quilted/threads';
import {RemoteReceiver} from '@remote-dom/core/receivers';

const receiver = new RemoteReceiver({retain, release});
```

--------------------------------

### Custom Element with Remote Events

Source: https://github.com/shopify/remote-dom/blob/main/packages/react/README.md

Defines a custom element that extends RemoteElement and declares custom events that can be emitted. This example shows a 'ui-card' element that can emit an 'expand' event.

```ts
import {RemoteElement} from '@remote-dom/core/elements';

class Card extends RemoteElement {
  static get remoteEvents() {
    return ['expand'];
  }
}

customElements.define('ui-card', Card);

```

--------------------------------

### Create Changeset File

Source: https://github.com/shopify/remote-dom/blob/main/CONTRIBUTING.md

This command initiates the process of creating a changeset file, which describes the nature and scope of your code changes for release management. It prompts you to select affected packages and the type of release (patch, minor, or major), and allows for an initial description.

```shell
pnpm changeset
```

--------------------------------

### Remote Component Rendering with Event Target Check

Source: https://github.com/shopify/remote-dom/blob/main/packages/preact/README.md

Provides an example of how to prevent event propagation issues in Remote DOM by checking the event target before calling the callback. This ensures the event is handled only by the intended element.

```tsx
import {createRemoteComponentRenderer} from '@remote-dom/preact/host';

const Card = createRemoteComponentRenderer(function Card({children, onClick}) {
  // This `onclick` will be called, even if the `Button` was the actual target
  return (
    <ui-card
      onClick={(event) => {
        if (event.target === event.currentTarget) {
          onClick?.();
        }
      }}
    >
      {children}
    </ui-card>
  );
});

const Button = createRemoteComponentRenderer(function Button({
  children,
  onClick,
}) {
  return (
    <ui-button
      onClick={(event) => {
        if (event.target === event.currentTarget) {
          onClick?.();
        }
      }}
    >
      {children}
    </ui-button>
  );
});
```

--------------------------------

### Basic Custom Element Definition and Event Handling

Source: https://github.com/shopify/remote-dom/blob/main/packages/core/README.md

Demonstrates the basic process of defining a custom element and attaching event listeners that map to remote properties. It shows both direct event listener attachment and direct property assignment for handling events.

```javascript
customElements.define('my-element', MyElement);

const element = document.createElement('my-element');

// Adding an event listener that maps to the `onPress` property:
element.addEventListener('press', () => console.log('Pressed!'));

// Alternatively, directly setting the remote property:
element.onPress = () => console.log('Pressed!');
```

--------------------------------

### SignalRemoteReceiver with Manual Memory Management

Source: https://github.com/shopify/remote-dom/blob/main/packages/signals/README.md

Shows how to initialize SignalRemoteReceiver with `retain` and `release` options for manual memory management, useful when passing functions over postMessage.

```typescript
// This library is not included with Remote DOM, but it pairs
// well with it in allowing you to pass functions between
// JavaScript environments without leaking memory, by manually
// managing the memory for those functions.
import {retain, release} from '@quilted/threads';
import {SignalRemoteReceiver} from '@remote-dom/signals';

const receiver = new SignalRemoteReceiver({retain, release});
```

--------------------------------

### Customize Event Mapping with `eventProps`

Source: https://github.com/shopify/remote-dom/blob/main/packages/react/README.md

Customizes event mapping by providing an `eventProps` configuration to `createRemoteComponentRenderer`. This example maps the 'expand' remote event to a lowercase `onexpand` prop, suitable for direct use as a web component event listener in React 19+.

```tsx
import {createRemoteComponentRenderer} from '@remote-dom/preact/host';

const Card = createRemoteComponentRenderer(
  function Card({children, onexpand}) {
    return <ui-card onexpand={onexpand}>{children}</ui-card>;
  },
  {
    eventProps: {
      // Convert the `expand` event listener into an all-lowercase `onexpand` prop, which allows the prop to be passed
      // directly as a web component event listener (in React 19+).
      onexpand: {event: 'expand'},
    },
  },
);
```

--------------------------------

### Update Host Code with RemoteReceiver

Source: https://github.com/shopify/remote-dom/blob/main/documentation/migrations/remote-ui-to-remote-dom.md

Shows how to replace the `createRemoteReceiver()` utility from remote-ui with the new `RemoteReceiver` class in Remote DOM. It highlights the need for manual memory management for functions using `retain` and `release` if not using `@quilted/threads`.

```javascript
// Replace this:

import {createRemoteReceiver} from '@remote-ui/core';

const receiver = createRemoteReceiver();
sendToRemoteEnvironment(receiver.receive);

// With this:

import {RemoteReceiver} from '@remote-dom/core';
import {retain, release} from '@quilted/threads';

// You now need to pass in functions to manage the memory for functions manually,
// where this was previously done automatically in `@remote-ui/rpc`. If you are
// using the automatic memory management provided by `@quilted/threads`, you can
// omit the `retain` and `release` functions.
const receiver = new RemoteReceiver({retain, release});
sendToRemoteEnvironment(receiver.connection);
```

--------------------------------

### Adapt RemoteConnection to Legacy RemoteChannel

Source: https://github.com/shopify/remote-dom/blob/main/packages/compat/README.md

Demonstrates how to use `adaptToLegacyRemoteChannel` to make a Remote DOM `RemoteConnection` compatible with `remote-ui`'s `RemoteChannel` API. This is useful when migrating existing `remote-ui` codebases to use Remote DOM receivers.

```ts
import {DOMRemoteReceiver} from '@remote-dom/core/receivers';
import {adaptToLegacyRemoteChannel} from '@remote-dom/compat';

const receiver = new DOMRemoteReceiver();
const channel = adaptToLegacyRemoteChannel(receiver.connection);

// Do something with the channel, typically by sending it to a remote environment:
sendChannelToRemoteEnvironment(channel);
```

--------------------------------

### Handle Bubbling Events with Multiple Listeners

Source: https://github.com/shopify/remote-dom/blob/main/packages/preact/README.md

Provides an example of defining bubbling events for multiple Remote DOM elements and the potential issue of triggering multiple event listeners when a single event occurs on a nested element. This highlights the need for careful event handling when events bubble.

```ts
import {RemoteElement} from '@remote-dom/core/elements';

class Card extends RemoteElement {
  static get remoteEvents() {
    return {
      click: {
        bubbles: true,
      },
    };
  }
}

class Button extends RemoteElement {
  static get remoteEvents() {
    return {
      click: {
        bubbles: true,
      },
    };
  }
}

customElements.define('ui-card', Card);
customElements.define('ui-button', Button);

const card = document.createElement('ui-card');
card.addEventListener('click', (event) => {
  console.log('Click event in card', event.target);
});

const button = document.createElement('ui-button');
button.textContent = 'Click me!';
button.addEventListener('click', (event) => {
  console.log('Click event in button', event.target);
});

card.append(button);

// Host: both are implemented to call their respective event listener props when clicked,
// leads to `card.addEventListener()` callback being called twice (once from the bubbling
// click on `ui-button` in the remote, and once from the bubbling in the host).
```

--------------------------------

### Define a Basic Remote Element

Source: https://github.com/shopify/remote-dom/blob/main/packages/core/README.md

Demonstrates how to define a custom element `my-element` by subclassing `RemoteElement` and registering it with the `customElements` registry. This is the fundamental step for creating elements that can be synchronized.

```ts
import {RemoteElement} from '@remote-dom/core/elements';

class MyElement extends RemoteElement {}

customElements.define('my-element', MyElement);
```

--------------------------------

### Update Dependencies for Remote DOM

Source: https://github.com/shopify/remote-dom/blob/main/documentation/migrations/remote-ui-to-remote-dom.md

This snippet shows how to update your project's dependencies to switch from `@remote-ui/core` to `@remote-dom/core`. It highlights the package name change and a potential version update.

```diff
{
  "dependencies": {
-    "@remote-ui/core": "^2.2.0",
+    "@remote-dom/core": "^1.0.0",
  }
}
```

--------------------------------

### DOMRemoteReceiver with Manual Memory Management

Source: https://github.com/shopify/remote-dom/blob/main/packages/core/README.md

Shows how to initialize DOMRemoteReceiver with 'retain' and 'release' options for manual memory management of remote properties, often used with libraries like '@quilted/threads'.

```ts
import {retain, release} from '@quilted/threads';
import {DOMRemoteReceiver} from '@remote-dom/core/receivers';

const receiver = new DOMRemoteReceiver({retain, release});
```

--------------------------------

### Automatic Remote Method Exposure with `remoteMethods`

Source: https://github.com/shopify/remote-dom/blob/main/packages/core/README.md

Explains how to use the `remoteMethods` static getter to automatically expose methods with matching names from the `RemoteElement` subclass to the remote environment, simplifying method exposure.

```typescript
import {RemoteElement} from '@remote-dom/core/elements';

class MyElement extends RemoteElement {
  static get remoteMethods() {
    return ['focus'];
  }
}

customElements.define('my-element', MyElement);

const element = document.createElement('my-element');
element.focus();
```

--------------------------------

### RemoteRootElement Definition and Connection

Source: https://github.com/shopify/remote-dom/blob/main/packages/core/README.md

Shows how to define and use RemoteRootElement, a custom HTMLElement subclass for synchronizing a tree of custom elements with the host environment. This requires the environment to be polyfilled with @remote-dom/core/polyfill.

```ts
import {RemoteRootElement} from '@remote-dom/core/elements';

// Remote DOM does not define this element, so you can give it a
// name of your choice. We recommend using `remote-root`.

customElements.define('remote-root', RemoteRootElement);

const root = document.createElement('remote-root');

// Now, any changes to this elements descendants will be communicated
// to the host environment.
root.connect(connection);
```

--------------------------------

### Create SignalRemoteReceiver

Source: https://github.com/shopify/remote-dom/blob/main/packages/signals/README.md

Demonstrates how to create an empty SignalRemoteReceiver instance.

```typescript
import {SignalRemoteReceiver} from '@remote-dom/signals';

const receiver = new SignalRemoteReceiver();
```

--------------------------------

### Basic Remote Component Rendering

Source: https://github.com/shopify/remote-dom/blob/main/packages/preact/README.md

Demonstrates how to create a remote component renderer for a 'ui-card' component using Preact. It shows a basic implementation of an onClick handler.

```tsx
import {createRemoteComponentRenderer} from '@remote-dom/preact/host';

const Card = createRemoteComponentRenderer(function Card({children, onClick}) {
  // This `onclick` will be called, even if the `Button` was the actual target
  return <ui-card onClick={() => onClick?.()}>{children}</ui-card>;
});

const Button = createRemoteComponentRenderer(function Button({
  children,
  onClick,
}) {
  return <ui-button onClick={() => onClick?.()}>{children}</ui-button>;
});
```

--------------------------------

### Using RemoteReceiver.connection

Source: https://github.com/shopify/remote-dom/blob/main/packages/core/README.md

Illustrates how to use the `connection` property of a RemoteReceiver. This connection object can be passed to a `RemoteMutationObserver` or `RemoteRootElement` to manage communication between remote and host environments.

```ts
// In the host environment:
import {RemoteReceiver} from '@remote-dom/core/receivers';

const receiver = new RemoteReceiver();

// In the remote environment:
import {RemoteMutationObserver} from '@remote-dom/core/elements';

const observer = new RemoteMutationObserver(receiver.connection);
```

--------------------------------

### Call Remote Method

Source: https://github.com/shopify/remote-dom/blob/main/packages/core/README.md

Shows how to call a remote method ('alert') on a remote element from the remote environment after connecting it to the receiver's connection.

```ts
import {RemoteRootElement} from '@remote-dom/core/elements';

customElements.define('remote-root', RemoteRootElement);

const root = document.createElement('remote-root');
root.connect(receiver.connection);

root.callRemoteMethod('alert', 'Hello, world!');
```

--------------------------------

### RemoteMutationObserver Usage

Source: https://github.com/shopify/remote-dom/blob/main/packages/core/README.md

Demonstrates how to use RemoteMutationObserver to detect and communicate changes in a remote element to the host environment. This is useful when polyfilling the DOM or working with iframes.

```ts
import {RemoteMutationObserver} from '@remote-dom/core/elements';

const observer = new RemoteMutationObserver(connection);

// Now, any changes to the `body` element will be communicated
// to the host environment.
observer.observe(document.body);
```

--------------------------------

### Accessing and Observing Root Children

Source: https://github.com/shopify/remote-dom/blob/main/packages/signals/README.md

Demonstrates how to access the `root` property of SignalRemoteReceiver and use Preact Signals' `effect` to observe changes in the root's children.

```typescript
import {SignalRemoteReceiver} from '@remote-dom/signals';

const receiver = new SignalRemoteReceiver();
const root = receiver.root;
// { 
//   children: signal([]),
//   ...
// }

// You can use the signals in the root object to compute other signals,
// or use any of the standard signal APIs to interact with them:

import {effect} from '@preact/signals';

// @preact/signals will re-run this function whenever the `root.children.value`
// signal changes; this is, whenever children are added or removed from
// the root node of the remote tree.
effect(() => {
  console.log(`Receiver has ${root.children.value.length} children`);
});
```

--------------------------------

### Host Implementation of UIButton

Source: https://github.com/shopify/remote-dom/blob/main/README.md

Provides a basic host-side implementation for the `ui-button` custom element. The `DOMRemoteReceiver` automatically maps remote properties to host element properties, requiring a corresponding custom element definition on the host page.

```html
<!doctype html>
<html>
  <body>
    <div id="root"></div>

    <iframe id="remote-iframe" src="/remote" hidden></iframe>

    <script type="module">
      class UIButton extends HTMLElement {
        // By default, `DOMRemoteReceiver` will assign remote properties as properties,

```

--------------------------------

### Handling Remote Events with `RemoteEvent` Object

Source: https://github.com/shopify/remote-dom/blob/main/packages/core/README.md

Shows how to handle remote events, which are dispatched with a `RemoteEvent` object. This object provides `detail` for arguments passed to the remote property and `respondWith` for returning values from asynchronous operations.

```typescript
import {RemoteElement} from '@remote-dom/core/elements';

class MyElement extends RemoteElement {
  static get remoteProperties() {
    return {
      onSave: {event: true},
    };
  }
}

customElements.define('my-element', MyElement);

const element = document.createElement('my-element');

element.addEventListener('save', (event) => {
  // Argument passed to the `onSave()` remote property
  console.log(event.detail);

  // Return a promise
  event.respondWith(
    (async () => {
      // Do something asynchronous
      await doSomething();

      // Return a value to the caller of the remote property
      return {success: true};
    })()
  );
});
```

--------------------------------

### Subscribing with AbortSignal

Source: https://github.com/shopify/remote-dom/blob/main/packages/core/README.md

Demonstrates how to use the `signal` option with `RemoteReceiver.subscribe()` to cancel the subscription using an `AbortSignal`. This is useful for managing the lifecycle of subscriptions.

```ts
import {RemoteReceiver} from '@remote-dom/core/receivers';

const abort = new AbortController();
const receiver = new RemoteReceiver();

// Subscribe to all changes in the top-level children, attached
// directly to the remote “root”.
receiver.subscribe(
  receiver.root,
  (root) => {
    console.log('Root changed!', root);
  },
  {signal: abort.signal},
);

// Stop listening in 10 seconds
setTimeout(() => {
  abort.abort();
}, 10_000);
```

--------------------------------

### Manual Rendering with Remote Fragment

Source: https://github.com/shopify/remote-dom/blob/main/packages/preact/README.md

Illustrates the manual equivalent of passing slotted children by wrapping them in a `<remote-fragment>` element with the `slot` attribute.

```tsx
import {render} from 'preact';

render(
  <ui-card>
    This is the body of the card.
    <remote-fragment slot="header">
      <ui-text>Hello, world!</ui-text>
    </remote-fragment>
  </ui-card>,
  document.querySelector('#root'),
);
```

--------------------------------

### Create Remote Component Renderer for Host

Source: https://github.com/shopify/remote-dom/blob/main/packages/preact/README.md

Shows how to use `createRemoteComponentRenderer` from `@remote-dom/preact/host` to create Preact components that render remote elements, handling properties, attributes, event listeners, and slotted children.

```tsx
import {createRemoteComponentRenderer} from '@remote-dom/preact/host';
import {useIsExpanded} from './hooks'; // Assuming useIsExpanded is defined elsewhere

const Card = createRemoteComponentRenderer(function Card({
  header,
  subdued,
  onExpand,
  children,
}) {
  const isExpanded = useIsExpanded();

  return (
    <div
      class={[
        'Card',
        isExpanded.value && 'Card--expanded',
        subdued && 'Card--subdued',
      ]
        .filter(Boolean)
        .join(' ')}
    >
      {header && (
        <button
          class="Card__Header"
          onClick={() => {
            isExpanded.value = !isExpanded.value;
            if (isExpanded.value && onExpand) onExpand();
          }}>
          {header}
        </button>
      )}
      {children}
    </div>
  );
});

// Usage example (assuming RemoteRootRenderer is set up elsewhere):
// render(
//   <RemoteRootRenderer receiver={receiver} components={{'ui-card': Card}} />,
//   document.getElementById('host-root')
// );
```

--------------------------------

### Subscribing to RemoteReceiver Root Changes

Source: https://github.com/shopify/remote-dom/blob/main/packages/core/README.md

Shows how to subscribe to changes in the remote root element using `RemoteReceiver.subscribe()`. The provided callback function is executed whenever the root element or its direct children change.

```ts
import {RemoteReceiver} from '@remote-dom/core/receivers';

const receiver = new RemoteReceiver();

// Subscribe to all changes in the top-level children, attached
// directly to the remote “root”.
receiver.subscribe(receiver.root, (root) => {
  console.log('Root changed!', root);
});
```

--------------------------------

### Typed Remote Element Creation with `createRemoteElement`

Source: https://github.com/shopify/remote-dom/blob/main/packages/core/README.md

Demonstrates using TypeScript generics with `createRemoteElement` to define type interfaces for attributes, properties, events, and methods, ensuring type safety for the created element instances.

```typescript
import {createRemoteElement} from '@remote-dom/core/elements';

interface MyElementAttributes {
  label?: string;
}

interface MyElementProperties {
  emphasized?: boolean;
}

interface MyElementEvents {
  change(event: CustomEvent): void;
}

interface MyElementMethods {
  focus(): void;
}

const MyElement = createRemoteElement<
  MyElementProperties,
  MyElementMethods,
  {},
  MyElementEvents
>({
  attributes: ['label'],
  events: ['change'],
  properties: {
    emphasized: {type: Boolean},
  },
  methods: ['focus'],
});

customElements.define('my-element', MyElement);
```

--------------------------------

### RemoteFragmentRenderer Usage

Source: https://github.com/shopify/remote-dom/blob/main/packages/preact/README.md

Demonstrates how to include the `RemoteFragmentRenderer` in the `components` map for `RemoteRootRenderer`. This allows Remote DOM to render fragments without introducing unnecessary wrapper elements.

```javascript
import {render} from 'preact';
import {
  createRemoteComponentRenderer,
  RemoteRootRenderer,
  RemoteFragmentRenderer,
  SignalRemoteReceiver,
} from '@remote-dom/preact/host';

// Same setup as above...

render(
  <RemoteRootRenderer
    receiver={receiver}
    components={
      new Map([
        ['ui-card', Card],
        // We allow `remote-fragment` elements to be rendered, which is the
        // name Remote DOM gives these wrapper elements by default. If you changed
        // the name using the `slotProps.wrapper` option, match that name here.
        ['remote-fragment', RemoteFragmentRenderer],
      ])
    }
  />,
  document.querySelector('#root'),
);
```

--------------------------------

### Creating Remote Elements with `createRemoteElement`

Source: https://github.com/shopify/remote-dom/blob/main/packages/core/README.md

Shows how to use the `createRemoteElement` function to define a remote element class without subclassing `RemoteElement`. This approach allows specifying properties, attributes, events, and methods as configuration options.

```typescript
import {createRemoteElement} from '@remote-dom/core/elements';

const MyElement = createRemoteElement({
  attributes: ['label'],
  events: ['change'],
  properties: {
    emphasized: {type: Boolean},
  },
  methods: ['focus'],
});

customElements.define('my-element', MyElement);
```

--------------------------------

### Import DOM Polyfill for Web Workers

Source: https://github.com/shopify/remote-dom/blob/main/documentation/migrations/remote-ui-to-remote-dom.md

This TypeScript code demonstrates how to import the DOM polyfill required for Remote DOM to function correctly within a Web Worker sandbox. This import should be one of the first lines in your worker code.

```typescript
import '@remote-dom/core/polyfill';
```

--------------------------------

### Migrating Remote Element Rendering Host to @remote-dom/react/host

Source: https://github.com/shopify/remote-dom/blob/main/documentation/migrations/remote-ui-to-remote-dom.md

This snippet shows the transformation from using `@remote-ui/react/host` to `@remote-dom/react/host`. The key changes include replacing `createController` with `createRemoteComponentRenderer` and updating the root renderer from `RemoteRenderer` to `RemoteRootRenderer`. It also demonstrates how to register custom components and handle `remote-fragment` elements.

```tsx
import {useMemo, useEffect} from 'react';
import {
  createController,
  createRemoteReceiver,
  RemoteRenderer,
} from '@remote-ui/react/host';

import {Button} from './Button';

function MyRemoteRenderer() {
  const controller = useMemo(() => createController({Button}), []);
  const receiver = useMemo(() => createRemoteReceiver(), []);

  useEffect(() => {
    sendReceiverToRemoteContext(receiver.receive);
  }, [receiver]);

  return <RemoteRenderer receiver={receiver} controller={controller} />;
}

// With this:

import {useMemo, useEffect} from 'react';
import {
  createRemoteComponentRenderer,
  RemoteRootRenderer,
  RemoteFragmentRenderer,
  RemoteReceiver,
} from '@remote-dom/react/host';

import {Button} from './Button';

function MyRemoteRenderer() {
  const components = useMemo(
    () =>
      new Map([
        ['ui-button', createRemoteComponentRenderer(Button)],
        // If you want to allow React elements to be passed as props in the remote
        // environment, `@remote-dom/react` will render a `remote-fragment` element
        // in some cases. You need to provide a renderer for this element.
        ['remote-fragment', RemoteFragmentRenderer],
      ]),
    [],
  );
  const receiver = useMemo(() => new RemoteReceiver(), []);

  useEffect(() => {
    sendReceiverToRemoteContext(receiver.connection);
  }, [receiver]);

  return <RemoteRootRenderer receiver={receiver} components={components} />;
}
```