From 611a5aedd401d4f196681d79fe74a673624b9c1c Mon Sep 17 00:00:00 2001
From: Kevin Zolkiewicz <kevin@zolk.com>
Date: Thu, 17 Sep 2020 15:50:03 -0500
Subject: [PATCH] Web Components: Add script tag support

---
 app/web-components/package.json                     |  1 +
 app/web-components/src/client/preview/render.ts     |  4 ++++
 .../stories/script.stories.js                       | 13 +++++++++++++
 3 files changed, 18 insertions(+)
 create mode 100644 examples/web-components-kitchen-sink/stories/script.stories.js

diff --git a/app/web-components/package.json b/app/web-components/package.json
index ac225fa37647..b791862d9754 100644
--- a/app/web-components/package.json
+++ b/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",
diff --git a/app/web-components/src/client/preview/render.ts b/app/web-components/src/client/preview/render.ts
index 77c5b87e36ba..5970b4d3e704 100644
--- a/app/web-components/src/client/preview/render.ts
+++ b/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}".`,
diff --git a/examples/web-components-kitchen-sink/stories/script.stories.js b/examples/web-components-kitchen-sink/stories/script.stories.js
new file mode 100644
index 000000000000..168fc83e4f43
--- /dev/null
+++ b/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>';