Merge pull request #12509 from zolk/feat/wc-script

Web Components: Add script tag support

app/web-components/package.json

@@ -40,6 +40,7 @@
     "@babel/plugin-syntax-import-meta": "^7.10.4",
     "@babel/preset-env": "^7.11.5",
     "@storybook/addons": "6.1.0-alpha.12",
+    "@storybook/client-api": "6.1.0-alpha.12",
     "@storybook/core": "6.1.0-alpha.12",
     "@types/webpack-env": "^1.15.2",
     "babel-plugin-bundled-import-meta": "^0.3.1",

app/web-components/src/client/preview/render.ts

@@ -1,6 +1,7 @@
 import { document, Node } from 'global';
 import dedent from 'ts-dedent';
 import { render, TemplateResult } from 'lit-html';
+import { simulatePageLoad, simulateDOMContentLoaded } from '@storybook/client-api';
 import { RenderContext } from './types';
 
 const rootElement = document.getElementById('root');
@@ -26,8 +27,10 @@ export default function renderMain({
     const renderTo = rootElement.querySelector('[id="root-inner"]');
 
     render(element, renderTo);
+    simulatePageLoad(rootElement);
   } else if (typeof element === 'string') {
     rootElement.innerHTML = element;
+    simulatePageLoad(rootElement);
   } else if (element instanceof Node) {
     // Don't re-mount the element if it didn't change and neither did the story
     if (rootElement.firstChild === element && forceRender === true) {
@@ -36,6 +39,7 @@ export default function renderMain({
 
     rootElement.innerHTML = '';
     rootElement.appendChild(element);
+    simulateDOMContentLoaded();
   } else {
     showError({
       title: `Expecting an HTML snippet or DOM node from the story: "${name}" of "${kind}".`,

examples/web-components-kitchen-sink/stories/script.stories.js

@@ -0,0 +1,13 @@
+import { html } from 'lit-html';
+
+export default {
+  title: 'Script Tag',
+};
+
+export const inTemplate = () =>
+  html`<div>JS alert</div>
+    <script>
+      alert('hello');
+    </script>`;
+
+export const inString = () => '<div>JS alert</div><script>alert("hello")</script>';