Remote Rendering: Shopify’s Take on Extensible UI - Sandbox code that enables a host to load and render a 3rd party extension

sandbox.js

// Sandbox

import { createEndpoint, retain } from "@remote-ui/rpc";
import { createRemoteRoot } from "@remote-ui/core";

// The `regsiter` function will be available (as a global) for extensions to use

let renderCallback;
self.register = (callback) => {
  renderCallback = callback;
};


// The `load` and `render` functions will be available (via RPC) for the host to use

async function load(scriptUrl) {
  await import(scriptUrl);
}

function render(remoteChannel, api) {
  retain([remoteChannel, api]);
  const root = createRemoteRoot(remoteChannel);
  renderCallback(root, api);
}

createEndpoint(self).expose({ load, render });