Documentation / examples for component markup without using React

[garethson]

Hello! We have a series of checkout extensions built using the vanilla JS (non-React) set of libraries and components. Our approach was to use the htm method from the (now-deprecated) @remote-ui/htm library to make our markup easier to reason about. eg:

import { createHtm } from '@remote-ui/htm';
...
const htm = createHtm(root);
let component = htm`
    <BlockStack>
      <Heading alignment="center">${customTitle}</Heading>
    </BlockStack>
  `
root.replaceChildren(component);

The new Shopify recommended way of interacting with the DOM for those not using React is to use a series of nested root.createComponent calls, which results in code that is harder to mentally parse than its React equivalent. The differences can be seen here.

React:

return (
    <InlineStack>
      <Image source="/url/for/image" />
      <BlockStack>
        <Text size="large">Heading</Text>
        <Text size="small">Description</Text>
      </BlockStack>
      <Button
        onPress={() => {
          console.log('button was pressed');
        }}
      >
        Button
      </Button>
    </InlineStack>
  );

JS:

const inlineStack = root.createComponent(
      InlineStack,
      {},
      [
        root.createComponent(Image, {
          source: '/url/for/image',
        }),
        root.createComponent(BlockStack, {}, [
          root.createComponent(
            Text,
            {size: 'large'},
            'Heading',
          ),
          root.createComponent(
            Text,
            {size: 'small'},
            'Description',
          ),
        ]),
        root.createComponent(
          Button,
          {
            onPress: () => {
              console.log('button was pressed');
            },
          },
          'Button',
        ),
      ],
);

Are there any examples available using Shopify's recommended@remote-dom library for accomplishing the same thing using react-like declarative markup the way we previously did using @remote-ui/htm? We've looked through the Migration Guide which does state:

@remote-ui/htm. The @remote-dom/core/html package exports an htm function for building trees of DOM nodes.

but other than the new method being called html (probably a small typo here?) that method seems to rely on full access to document. which does not exist in the extensions sandbox context. Are there any examples anywhere for building a UI without using nested createComponent calls?

Thanks!