Put the JS into the HTML as <script type="module">

Related to canjs/canjs#4763

Author: Chasen Le Hara

index.js

@@ -110,6 +110,10 @@ module.exports = function() {
                 }
                 if(data.html) {
                     data.html = data.html.trim();
+                    if (data.js) {
+                        data.html += "\n\n<script type=\"module\">\n" + data.js + "\n</script>";
+                        data.js = "";
+                    }
                 }
                 if(data) {
                     if(window.CREATE_CODE_PEN) {
@@ -123,12 +127,15 @@ module.exports = function() {
                 }
             }
             if(el && matches.call(el, ".demo_wrapper")) {
-                var htmlCode = el.querySelector("[data-for=html] code");
-                var htmlText = htmlCode ? htmlCode.textContent.trim() : "";
-
                 var jsCode = el.querySelector("[data-for=js] code");
                 var jsText = jsCode ? jsCode.textContent.trim() : "";
 
+                var htmlCode = el.querySelector("[data-for=html] code");
+                var htmlText = htmlCode ? htmlCode.textContent.trim() : "";
+                if (jsText) {
+                    htmlText += "\n\n<script type=\"module\">\n" + jsText + "\n</script>";
+                }
+
                 var cssText = getStylesFromIframe( el.querySelector("iframe") );
 
                 var codePen = {

test.js

@@ -22,7 +22,7 @@ var open = function(url, callback, done) {
 };
 
 describe("bit-docs-html-codepen-link", function() {
-	it.only("basics works", function(done) {
+	it("basics works", function(done) {
 		this.timeout(60000);
 
 		var docMap = Promise.resolve({
@@ -60,8 +60,8 @@ describe("bit-docs-html-codepen-link", function() {
                     codePen.click();
                 });
                 assert.deepEqual(createCallData,[
-                    {   html: '<my-app></my-app>',
-                        js: 'import { Component } from "//unpkg.com/can@^5.0.0-pre.1/core.mjs";\nComponent',
+                    {   html: '<my-app></my-app>\n\n<script type="module">\nimport { Component } from "//unpkg.com/can@^5.0.0-pre.1/core.mjs";\nComponent\n</script>',
+                        js: '',
                         js_module: true,
                         editors: '1011',
 						css: 'my-app {color: "green";}'