From 3f1bdb1d3f373436bffb27a76a1ba92775a2800f Mon Sep 17 00:00:00 2001
From: Alan Orozco <alan@orozco.xyz>
Date: Sun, 13 Feb 2022 00:36:29 -0800
Subject: [PATCH] decorators for other wrappers

---
 src/addon.ts                                  | 14 ++-
 src/index.ts                                  | 18 +++-
 .../{Wrapper.tsx => ConfigPanel.tsx}          | 67 ++++++-------
 src/register/components/PreactDecorator.tsx   | 68 -------------
 src/register/components/bento.tsx             | 82 ----------------
 src/register/index.tsx                        |  4 +-
 src/register/wrappers.tsx                     | 96 ++++++++++++++++++
 src/util/{amphtml.tsx => amp.tsx}             | 97 ++++++++-----------
 src/util/bento.tsx                            | 63 ++++++++++++
 src/util/cdn-url.ts                           | 12 +++
 src/util/html.ts                              |  6 --
 src/util/html.tsx                             | 46 +++++++++
 12 files changed, 317 insertions(+), 256 deletions(-)
 rename src/register/components/{Wrapper.tsx => ConfigPanel.tsx} (79%)
 delete mode 100644 src/register/components/PreactDecorator.tsx
 delete mode 100644 src/register/components/bento.tsx
 create mode 100644 src/register/wrappers.tsx
 rename src/util/{amphtml.tsx => amp.tsx} (54%)
 create mode 100644 src/util/bento.tsx
 create mode 100644 src/util/cdn-url.ts
 delete mode 100644 src/util/html.ts
 create mode 100644 src/util/html.tsx

diff --git a/src/addon.ts b/src/addon.ts
index c8b9cfc..d1b09aa 100755
--- a/src/addon.ts
+++ b/src/addon.ts
@@ -1,7 +1,15 @@
+export interface AmpParameters {
+  extensions?: {name: string; version: string}[];
+  experiments?: string[];
+}
+
 export const AddonName = 'storybook/amp';
-export const PanelName = AddonName + '/panel';
+export const PanelName = `${AddonName}/panel`;
+
 export const Events = {
-  UpdateConfig: AddonName + '/update_config',
-  AskConfig: AddonName + '/ask_config',
+  UpdateDocumentType: `${AddonName}/update_document_type`,
+  UpdateConfig: `${AddonName}/update_config`,
+  AskConfig: `${AddonName}/ask_config`,
 };
+
 export const ParameterName = 'amp';
diff --git a/src/index.ts b/src/index.ts
index 6fed622..2877976 100755
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,13 +1,27 @@
 import {makeDecorator} from '@storybook/addons';
 
 import {ParameterName} from './addon';
-import PreactDecorator from './register/components/PreactDecorator';
+import {AmphtmlWrapper, BentoWrapper, PlainWrapper} from './register/wrappers';
 
 export const withAmp = makeDecorator({
   name: 'withAmp',
   parameterName: ParameterName,
   skipIfNoParametersOrOptions: false,
-  wrapper: PreactDecorator, // TODO: Implement React and Vue.js deocrators
+  wrapper: AmphtmlWrapper,
+});
+
+export const withBento = makeDecorator({
+  name: 'withBento',
+  parameterName: ParameterName,
+  skipIfNoParametersOrOptions: false,
+  wrapper: BentoWrapper,
+});
+
+export const withIframe = makeDecorator({
+  name: 'withIframe',
+  parameterName: ParameterName,
+  skipIfNoParametersOrOptions: false,
+  wrapper: PlainWrapper,
 });
 
 if (module && module.hot && module.hot.decline) {
diff --git a/src/register/components/Wrapper.tsx b/src/register/components/ConfigPanel.tsx
similarity index 79%
rename from src/register/components/Wrapper.tsx
rename to src/register/components/ConfigPanel.tsx
index 84c9d7e..76e1382 100755
--- a/src/register/components/Wrapper.tsx
+++ b/src/register/components/ConfigPanel.tsx
@@ -15,7 +15,7 @@ import {SourceSelect} from './SourceSelect';
 import {ScrollArea, Form} from '@storybook/components';
 import {useParameter} from '@storybook/api';
 
-import {Events, ParameterName} from '../../addon';
+import {Events} from '../../addon';
 import {
   Config,
   SOURCE_BASE_URL,
@@ -53,8 +53,13 @@ const HorizontalFormFields = styled.div({
   },
 });
 
-export const Wrapper: FunctionComponent<Props> = ({active, api, channel}) => {
+export const ConfigPanel: FunctionComponent<Props> = ({
+  active,
+  api,
+  channel,
+}) => {
   const [config, setConfig] = useState<Config>(getPersistedConfig);
+  const [documentType, setDocumentType] = useState();
   const configRef = useRef(config);
   configRef.current = config;
   const ampBaseUrlOptions = useParameter<string[]>('ampBaseUrlOptions', []);
@@ -75,10 +80,12 @@ export const Wrapper: FunctionComponent<Props> = ({active, api, channel}) => {
 
     channel.on(STORY_CHANGED, onStoryChanged);
     channel.on(Events.AskConfig, onStoryChanged);
+    channel.on(Events.UpdateDocumentType, setDocumentType);
 
     return () => {
       channel.removeListener(STORY_CHANGED, onStoryChanged);
       channel.removeListener(Events.AskConfig, onStoryChanged);
+      channel.removeListener(Events.UpdateDocumentType, setDocumentType);
     };
   }, []);
 
@@ -126,44 +133,30 @@ export const Wrapper: FunctionComponent<Props> = ({active, api, channel}) => {
               />
             </Form.Field>
           </HorizontalFormFields>
-          <Form.Field key={'binary'} label={'Binary'}>
-            <Form.Select
-              value={config?.binary}
-              name={'binary'}
-              onChange={(e) => {
-                updateConfig({...config, binary: e.target.value});
-              }}
-              size="flex"
-            >
-              <option key={'no-modules'} value={'no-modules'}>
-                {'v0.js (nomodule)'}
-              </option>
-              <option key={'modules'} value={'modules'}>
-                {'v0.mjs (type="module")'}
-              </option>
-            </Form.Select>
-          </Form.Field>
-          <Form.Field key={'mode'} label={'Mode'}>
-            <Form.Select
-              value={config?.mode}
-              name={'mode'}
-              onChange={(e) => {
-                updateConfig({...config, mode: e.target.value});
-              }}
-              size="flex"
-            >
-              <option key={'ampdoc'} value={'ampdoc'}>
-                {'AMP'}
-              </option>
-              <option key={'bento'} value={'bento'}>
-                {'Bento'}
-              </option>
-            </Form.Select>
-          </Form.Field>
+          {/* BentoWrapper uses nomodule/module at the same time */}
+          {documentType !== 'bento' && (
+            <Form.Field key={'binary'} label={'Binary'}>
+              <Form.Select
+                value={config?.binary}
+                name={'binary'}
+                onChange={(e) => {
+                  updateConfig({...config, binary: e.target.value});
+                }}
+                size="flex"
+              >
+                <option key={'nomodule'} value={'nomodule'}>
+                  {'v0.js (nomodule)'}
+                </option>
+                <option key={'module'} value={'module'}>
+                  {'v0.mjs (type="module")'}
+                </option>
+              </Form.Select>
+            </Form.Field>
+          )}
         </Form>
       </PanelWrapper>
     </Fragment>
   );
 };
 
-export default Wrapper;
+export default ConfigPanel;
diff --git a/src/register/components/PreactDecorator.tsx b/src/register/components/PreactDecorator.tsx
deleted file mode 100644
index e5a137d..0000000
--- a/src/register/components/PreactDecorator.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-/** @jsx h */
-import {h} from 'preact';
-import {renderToString as preactRenderToString} from 'preact-render-to-string';
-import {useEffect, useRef, useState} from '@storybook/client-api';
-import addons, {StoryWrapper} from '@storybook/addons';
-import {Events} from '../../addon';
-import {Config, defaultConfig, sameConfig} from '../../util/config';
-import {useBentoMode} from './bento';
-import {wrapAmpHtml} from '../../util/amphtml';
-
-export const Decorator: StoryWrapper = (getStory, context, {parameters}) => {
-  const [config, setConfig] = useState<Config>(defaultConfig);
-  const configRef = useRef<Config>(config);
-  configRef.current = config;
-
-  useEffect(() => {
-    const channel = addons.getChannel();
-    channel.emit(Events.AskConfig);
-
-    const onUpdatedConfig = (config) => {
-      if (!sameConfig(config, configRef.current)) {
-        setConfig(config);
-      }
-    };
-    channel.on(Events.UpdateConfig, onUpdatedConfig);
-    return () => {
-      channel.removeListener(Events.UpdateConfig, onUpdatedConfig);
-    };
-  }, []);
-
-  const tree = getStory(context) as preact.VNode;
-  const html = wrapAmpHtml(tree, config, context);
-  const ref = useRef<HTMLDivElement | null>(null);
-
-  // TODO(alanorozco): Figure out this `useBentoMode` business. This is not
-  // used on amphtml's config of the addon.
-  useBentoMode(ref, config, html, getStory, context);
-  if (config.mode === 'bento') {
-    // Preact mode, unfortunately, completely rerenders the content
-    // (e.g. iframe), which forces the reload making it impossible to test
-    // Bento mode. Thus, this code only renders the placeholder element and
-    // the iframe is created and reused in the `useBentoMode`.
-    // See https://github.com/storybookjs/storybook/issues/12177
-    return <div ref={ref} />;
-  }
-
-  // ampdoc mode: reload the iframe.
-  const contents = preactRenderToString(tree);
-  const fullContent = html.replace('<body></body>', contents);
-  const blob = new Blob([fullContent], {type: 'text/html'});
-  return (
-    <iframe
-      src={URL.createObjectURL(blob)}
-      title={'AMP Document container'}
-      style={{
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: '100%',
-        border: 'none',
-        backgroundColor: '#fff',
-      }}
-    />
-  );
-};
-
-export default Decorator;
diff --git a/src/register/components/bento.tsx b/src/register/components/bento.tsx
deleted file mode 100644
index ace45d1..0000000
--- a/src/register/components/bento.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-/** @jsx h */
-import {h} from 'preact';
-import {useEffect} from '@storybook/client-api';
-import {render} from 'preact';
-import type {RefObject} from 'react';
-import type {Config} from '../../util/config';
-import type {StoryContext, LegacyStoryFn} from '@storybook/addons';
-import type {VNode} from 'preact';
-
-export function useBentoMode(
-  ref: RefObject<HTMLDivElement>,
-  config: Config,
-  ampHtml: string,
-  getStory: LegacyStoryFn,
-  context: StoryContext
-) {
-  useEffect(() => {
-    if (config.mode !== 'bento') {
-      return;
-    }
-
-    // Preact mode, unfortunately, completely rerenders the content
-    // (e.g. iframe), which forces the reload making it impossible to test
-    // Bento mode. Thus, this code only renders the placeholder element and
-    // the iframe is created and reused in the `useBentoMode`.
-    // See https://github.com/storybookjs/storybook/issues/12177
-    const placeholder = ref?.current;
-    const parent = placeholder?.parentElement;
-    if (!placeholder || !parent) {
-      return;
-    }
-    let iframe = parent.querySelector(
-      '#amp-iframe'
-    ) as HTMLIFrameElement | null;
-    if (!iframe) {
-      const doc = parent.ownerDocument;
-      iframe = doc.createElement('iframe') as HTMLIFrameElement;
-      iframe.id = 'amp-iframe';
-      iframe.setAttribute('title', 'AMP Document container');
-      iframe.style.cssText = `
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        border: none;
-        background-color: #fff;
-      `;
-
-      const blob = new Blob([ampHtml], {type: 'text/html'});
-      const blobUrl = URL.createObjectURL(blob);
-      iframe.src = blobUrl;
-      parent.appendChild(iframe);
-    }
-
-    const readyPromise = new Promise<void>((resolve) => {
-      const isReady = () => {
-        const iframeDoc = iframe!.contentDocument;
-        return (
-          iframeDoc &&
-          iframeDoc.readyState == 'complete' &&
-          iframeDoc.documentElement.hasAttribute('amp')
-        );
-      };
-
-      if (isReady()) {
-        resolve();
-      } else {
-        const interval = setInterval(() => {
-          if (isReady()) {
-            resolve();
-            clearInterval(interval);
-          }
-        }, 10);
-      }
-    });
-    readyPromise.then(() => {
-      const iframeDoc = iframe!.contentDocument!;
-      render(getStory(context) as VNode, iframeDoc.body);
-    });
-  });
-}
diff --git a/src/register/index.tsx b/src/register/index.tsx
index 7824838..086300f 100755
--- a/src/register/index.tsx
+++ b/src/register/index.tsx
@@ -4,14 +4,14 @@ import {jsx} from '@storybook/theming';
 
 import {AddonName, PanelName} from '../addon';
 
-import {Wrapper} from './components/Wrapper';
+import {ConfigPanel} from './components/ConfigPanel';
 
 addons.register(AddonName, (api) => {
   addons.addPanel(PanelName, {
     title: 'AMP',
     render({active = false, key}) {
       return (
-        <Wrapper
+        <ConfigPanel
           key={key}
           channel={addons.getChannel()}
           api={api}
diff --git a/src/register/wrappers.tsx b/src/register/wrappers.tsx
new file mode 100644
index 0000000..752c91c
--- /dev/null
+++ b/src/register/wrappers.tsx
@@ -0,0 +1,96 @@
+/** @jsx h */
+import {h} from 'preact';
+import {renderToString as preactRenderToString} from 'preact-render-to-string';
+import {useEffect, useRef, useState} from '@storybook/client-api';
+import addons, {StoryWrapper} from '@storybook/addons';
+import {Events} from '../addon';
+import {Config, defaultConfig, sameConfig} from '../util/config';
+import {getAmphtmlHeadContent} from '../util/amp';
+import {getHtmlWrapper, HtmlWrapperOptions} from '../util/html';
+import {getBentoHeadContent} from '../util/bento';
+import type {VNode} from 'preact';
+
+function useSetDocumentType(type: 'amp' | 'bento') {
+  useEffect(() => {
+    const channel = addons.getChannel();
+    channel.emit(Events.UpdateDocumentType, type);
+  }, [type]);
+}
+
+function useReadConfig(): Config {
+  const [config, setConfig] = useState<Config>(defaultConfig);
+  const configRef = useRef<Config>(config);
+  configRef.current = config;
+
+  useEffect(() => {
+    const channel = addons.getChannel();
+    channel.emit(Events.AskConfig);
+
+    const onUpdatedConfig = (config) => {
+      if (!sameConfig(config, configRef.current)) {
+        setConfig(config);
+      }
+    };
+    channel.on(Events.UpdateConfig, onUpdatedConfig);
+    return () => {
+      channel.removeListener(Events.UpdateConfig, onUpdatedConfig);
+    };
+  }, []);
+
+  return config;
+}
+
+function renderSrcBlobIframe(
+  tree: VNode,
+  htmlWrapperOptions: HtmlWrapperOptions
+): VNode {
+  const html = getHtmlWrapper({...htmlWrapperOptions});
+  const contents = preactRenderToString(tree);
+  const fullContent = html.replace('<body></body>', contents);
+  const blob = new Blob([fullContent], {type: 'text/html'});
+  return (
+    <iframe
+      src={URL.createObjectURL(blob)}
+      title={htmlWrapperOptions.title}
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        border: 'none',
+        backgroundColor: '#fff',
+      }}
+    />
+  );
+}
+
+export const AmphtmlWrapper: StoryWrapper = (getStory, context) => {
+  const tree = getStory(context) as VNode;
+  const config = useReadConfig();
+  useSetDocumentType('amp');
+  return renderSrcBlobIframe(tree, {
+    title: context.title,
+    htmlOpenTag: '<html amp lang="en">',
+    head: getAmphtmlHeadContent(tree, config, context.parameters),
+  });
+};
+
+export const BentoWrapper: StoryWrapper = (getStory, context) => {
+  const tree = getStory(context) as VNode;
+  const config = useReadConfig();
+  useSetDocumentType('bento');
+  return renderSrcBlobIframe(tree, {
+    title: context.title,
+    htmlOpenTag: '<html lang="en">',
+    head: getBentoHeadContent(tree, config, context.parameters),
+  });
+};
+
+export const PlainWrapper: StoryWrapper = (getStory, context) => {
+  const tree = getStory(context) as VNode;
+  useSetDocumentType('bento');
+  return renderSrcBlobIframe(tree, {
+    title: context.title,
+  });
+};
diff --git a/src/util/amphtml.tsx b/src/util/amp.tsx
similarity index 54%
rename from src/util/amphtml.tsx
rename to src/util/amp.tsx
index 9fbe33f..3267aae 100644
--- a/src/util/amphtml.tsx
+++ b/src/util/amp.tsx
@@ -3,9 +3,11 @@ import {h} from 'preact';
 import {renderToString as preactRenderToString} from 'preact-render-to-string';
 import {SOURCE_BASE_URL, Config} from './config';
 import {collectNodes} from './vnode';
-import {encodeHtmlEntities} from './html';
+import {HtmlChildren} from './html';
 import {createHash} from 'crypto';
 import type {VNode} from 'preact';
+import {AmpParameters} from '../addon';
+import {getRtvUrl} from './cdn-url';
 
 const EXT_TYPES = {
   'amp-mustache': 'template',
@@ -62,16 +64,16 @@ function getExtType(name: string) {
   return EXT_TYPES[name] || 'element';
 }
 
-function getBase(config: Config): string {
+function maybeGetBaseHref(config: Config): HtmlChildren {
   if (!config.baseUrl.startsWith('http://localhost')) {
-    return '';
+    return null;
   }
   return `<base href="${new URL(config.baseUrl).origin}">`;
 }
 
-function get3pIframeMeta(config: Config): string {
+function get3pIframeMeta(config: Config): HtmlChildren {
   if (!config.baseUrl.startsWith('http://localhost')) {
-    return '';
+    return null;
   }
   const baseUrl3p = config.baseUrl.replace('//localhost', '//ads.localhost');
   const src3p = new URL('/dist.3p/current/frame.max.html', baseUrl3p).href;
@@ -80,32 +82,30 @@ function get3pIframeMeta(config: Config): string {
 
 function getAmpUrl(
   module: string,
-  version: string | null,
+  version: string | null | undefined,
   type: string,
   config: Config
 ): string {
   let {baseUrl} = config;
   const unminifiedFiles = baseUrl.startsWith('http://localhost');
-  if (baseUrl === SOURCE_BASE_URL.cdn && config.rtv) {
-    baseUrl += `/rtv/${config.rtv}`;
-  }
   const ext =
     type === 'css' ? 'css' : config.binary === 'no-modules' ? 'js' : 'mjs';
 
   // v0.js
   if (module === 'amp') {
-    return `${baseUrl}/${unminifiedFiles ? 'amp' : 'v0'}.${ext}`;
+    return getRtvUrl(`/${unminifiedFiles ? 'amp' : 'v0'}.${ext}`, config);
   }
 
   // Extension.
-  return `${baseUrl}/v0/${module}-${version || '0.1'}${
-    unminifiedFiles ? '.max' : ''
-  }.${ext}`;
+  return getRtvUrl(
+    `/v0/${module}-${version || '0.1'}${unminifiedFiles ? '.max' : ''}.${ext}`,
+    config
+  );
 }
 
-function getAmpToggleExperimentsScript(experiments) {
+function getAmpToggleExperimentsScript(experiments): HtmlChildren {
   if (!experiments?.length) {
-    return '';
+    return null;
   }
   return /* HTML */ `
     <script>
@@ -121,9 +121,9 @@ function getAmpToggleExperimentsScript(experiments) {
 function getAmpScriptAndStylesheet(
   config,
   name,
-  version = null,
-  attributes = ''
-) {
+  version?: string,
+  attrs?: string
+): HtmlChildren {
   return /* HTML */ `
     ${config.binary === 'modules'
       ? /* HTML */ `
@@ -135,47 +135,32 @@ function getAmpScriptAndStylesheet(
       : ''}
     <script
       async
-      ${attributes}
+      ${attrs}
       src="${getAmpUrl(name, version, 'js', config)}"
     ></script>
   `;
 }
 
-export function wrapAmpHtml(tree, config, context) {
-  const {parameters} = context;
-  const boilerplate = `<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>`;
-  return /* HTML */ `
-    <!DOCTYPE html>
-    <html amp lang="en">
-      <head>
-        <meta charset="utf-8" />
-        <title>${encodeHtmlEntities(context.title)}</title>
-        <meta
-          name="viewport"
-          content="width=device-width,minimum-scale=1,initial-scale=1"
-        />
-        ${[
-          maybeGenerateCspHashMeta(collectInlineAmpScripts(tree)),
-          getBase(config),
-          get3pIframeMeta(config),
-          getAmpToggleExperimentsScript(parameters?.experiments),
-          getAmpScriptAndStylesheet(config, 'amp'),
-          boilerplate,
-          parameters?.extensions?.map(({name, version}) =>
-            getAmpScriptAndStylesheet(
-              config,
-              name,
-              version,
-              `custom-${getExtType(name)}="${name}"`
-            )
-          ),
-          getStyleAmpCustom(tree),
-        ]
-          .flat()
-          .filter(Boolean)
-          .join('')}
-      </head>
-      <body></body>
-    </html>
-  `;
+export function getAmphtmlHeadContent(
+  tree: VNode,
+  config: Config,
+  parameters?: AmpParameters
+): HtmlChildren {
+  return [
+    maybeGenerateCspHashMeta(collectInlineAmpScripts(tree)),
+    maybeGetBaseHref(config),
+    get3pIframeMeta(config),
+    getAmpToggleExperimentsScript(parameters?.experiments),
+    getAmpScriptAndStylesheet(config, 'amp'),
+    `<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>`,
+    parameters?.extensions?.map(({name, version}) =>
+      getAmpScriptAndStylesheet(
+        config,
+        name,
+        version,
+        `custom-${getExtType(name)}="${name}"`
+      )
+    ),
+    getStyleAmpCustom(tree),
+  ];
 }
diff --git a/src/util/bento.tsx b/src/util/bento.tsx
new file mode 100644
index 0000000..baa37c2
--- /dev/null
+++ b/src/util/bento.tsx
@@ -0,0 +1,63 @@
+/** @jsx h */
+import {h} from 'preact';
+import {Config} from './config';
+import {HtmlChildren} from './html';
+import type {VNode} from 'preact';
+import {getRtvUrl} from './cdn-url';
+
+function maybeGetBaseHref(config: Config): HtmlChildren {
+  if (!config.baseUrl.startsWith('http://localhost')) {
+    return null;
+  }
+  return `<base href="${new URL(config.baseUrl).origin}">`;
+}
+
+function getLinkRelStylesheet(path: string, config: Config): HtmlChildren {
+  return /* HTML */ `
+    <link
+      rel="stylesheet"
+      href="${getRtvUrl(path, config)}"
+      crossorigin="anonymous"
+    />
+  `;
+}
+
+function getScripts(basename: string, config: Config): HtmlChildren {
+  return /* HTML */ `
+    <script
+      type="module"
+      src="${getRtvUrl(`${basename}.mjs`, config)}"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      nomodule
+      src="${getRtvUrl(`${basename}.js`, config)}"
+      crossorigin="anonymous"
+    ></script>
+  `;
+}
+
+function getComponentScriptsAndStyle(
+  name: string,
+  version: string,
+  config: Config
+): HtmlChildren {
+  return [
+    getScripts(`v0/${name}-${version}`, config),
+    getLinkRelStylesheet(`v0/${name}-${version}.css`, config),
+  ];
+}
+
+export function getBentoHeadContent(
+  tree: VNode,
+  config: Config,
+  parameters?: {[string: string]: any}
+): HtmlChildren {
+  return [
+    maybeGetBaseHref(config),
+    getScripts('bento', config),
+    parameters?.components?.map(({name, version}) =>
+      getComponentScriptsAndStyle(name, version, config)
+    ),
+  ];
+}
diff --git a/src/util/cdn-url.ts b/src/util/cdn-url.ts
new file mode 100644
index 0000000..8129d1a
--- /dev/null
+++ b/src/util/cdn-url.ts
@@ -0,0 +1,12 @@
+import {Config, SOURCE_BASE_URL} from './config';
+
+export function getRtvBaseUrl(config: Config) {
+  if (config.baseUrl === SOURCE_BASE_URL.cdn && config.rtv) {
+    return `${config.baseUrl}/rtv/${config.rtv}`;
+  }
+  return config.baseUrl;
+}
+
+export function getRtvUrl(path: string, config: Config) {
+  return `${getRtvBaseUrl(config)}/${path}`;
+}
diff --git a/src/util/html.ts b/src/util/html.ts
deleted file mode 100644
index 75e279f..0000000
--- a/src/util/html.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export function encodeHtmlEntities(string: string): string {
-  return string.replace(
-    /[\u00A0-\u9999<>\&]/g,
-    (i) => '&#' + i.charCodeAt(0) + ';'
-  );
-}
diff --git a/src/util/html.tsx b/src/util/html.tsx
new file mode 100644
index 0000000..4f1942e
--- /dev/null
+++ b/src/util/html.tsx
@@ -0,0 +1,46 @@
+export type HtmlWrapperOptions = {
+  title?: string;
+  head?: HtmlChildren;
+  htmlOpenTag?: string;
+};
+
+export type HtmlChildren = HtmlChildren[] | string | null | undefined | false;
+
+export function encodeHtmlEntities(string: string): string {
+  return string.replace(
+    /[\u00A0-\u9999<>\&]/g,
+    (i) => '&#' + i.charCodeAt(0) + ';'
+  );
+}
+
+export function getHtmlWrapper({
+  title,
+  head,
+  htmlOpenTag = '<html>',
+}: HtmlWrapperOptions) {
+  return /* HTML */ `
+    <!DOCTYPE html>
+    ${htmlOpenTag}
+      <head>
+        <meta charset="utf-8" />
+        ${title ? /* HTML */ `<title>${encodeHtmlEntities(title)}</title>` : ''}
+        <meta
+          name="viewport"
+          content="width=device-width,minimum-scale=1,initial-scale=1"
+        />
+        ${flattenHtmlChildren(head)}
+      </head>
+      <body></body>
+    </html>
+  `;
+}
+
+function flattenHtmlChildren(children: HtmlChildren): string {
+  if (!children) {
+    return '';
+  }
+  if (typeof children === 'string') {
+    return children;
+  }
+  return children.flat().filter(Boolean).join('\n');
+}