hopefully merging everythign correctly

Author: justinbmeyer

codepen-data.js

@@ -6,14 +6,20 @@ var types = {
 	html: function htmlType(text) {
 
 		var result;
+		var HTML =  text;
 
 		text.replace(scriptRegExp, function(match, attrs, code) {
 
 			var matchTest = attrs.match(moduleTest);
 
-			if (matchTest && !srcTest.test(attrs)) {
+			// This has a src="".  We look for codepen-external
+			if(srcTest.test(attrs)) {
 
-				var HTML = text.replace(match, "").trim();
+			}
+			// It doesn't have a src, so we assume this has a body
+			else if (matchTest) {
+
+				HTML = HTML.replace(match, "").trim();
 				var CSS;
 				var styleResults = HTML.match(styleRegExp);
 				if (styleResults) {

index.js

@@ -11,6 +11,9 @@ var assign = Object.assign || function(d, s) {
 function cleanCodePenData(data) {
     if(docObject.codepen) {
         docObject.codepen.forEach(function(replacement){
+            if(data.html) {
+                data.html = data.html.split(replacement[0]).join(replacement[1]);
+            }
             if(data.js) {
                 data.js = data.js.split(replacement[0]).join(replacement[1]);
             }
@@ -19,20 +22,8 @@ function cleanCodePenData(data) {
 }
 
 function createCodePen(data) {
-    if(data.html) {
-        // HTML needs to be escaped because put this in the page
-        data = assign({}, data);
-        data.html = data.html.replace(/&/g,"&")
-                .replace(/</g,"&lt;")
-                .replace(/>/g,"&gt;");
-    }
-
-    var JSONstring =
-      JSON.stringify(data)
-        // Quotes will screw up the JSON
-        .replace(/"/g, "&quot;")
-        .replace(/'/g, "&apos;");
 
+    var JSONstring = JSON.stringify(data);
 
     var form =  '<form action="https://codepen.io/pen/define" method="POST" target="_blank">' +
         '<input type="hidden" name="data">' +
@@ -128,6 +119,12 @@ module.exports = function() {
                 if(data.html) {
                     data.html = data.html.trim();
                 }
+                if (data.js && data.js.indexOf('import') > -1) {
+                    var jsAsModule = "<script type=\"module\">\n" + data.js + "\n</script>";
+                    data.html = data.html ? data.html + "\n\n" + jsAsModule : jsAsModule;
+                    data.js = "";
+                    data.editors = "1001";// HTML, Result, & Console
+                }
                 if(data) {
                     cleanCodePenData(data);
                     if(window.CREATE_CODE_PEN) {
@@ -146,6 +143,10 @@ module.exports = function() {
 
                 var jsCode = el.querySelector("[data-for=js] code");
                 var jsText = jsCode ? jsCode.textContent.trim() : "";
+                if (jsText) {
+                    htmlText += "\n<script type=\"module\">\n" + jsText + "\n</script>";
+                    jsText = "";
+                }
 
                 var cssText = getStylesFromIframe( el.querySelector("iframe") );
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bit-docs-html-codepen-link",
-  "version": "1.3.2",
+  "version": "1.3.5",
   "description": "add a codepen link ",
   "main": "index.js",
   "scripts": {
@@ -28,7 +28,7 @@
   "devDependencies": {
     "bit-docs-generate-html": "^0.1.0",
     "connect": "^2.14.4",
-    "mocha": "^2.5.3",
+    "mocha": "^6.0.2",
     "zombie": "^4.3.0"
   }
 }

test.js

@@ -60,16 +60,17 @@ 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',
+						editors: '1001',
 						css: 'my-app {color: "green";}'
 					},
 					{
-						js: 'import {DefineMap} from "//unpkg.com/can@^5.0.0-pre.1/core.mjs";\nconsole.log( myCounter.count ) //-> 1',
+						html: '<script type="module">\nimport {DefineMap} from "//unpkg.com/can@^5.0.0-pre.1/core.mjs";\nconsole.log( myCounter.count ) //-> 1\n</script>',
+						js: '',
 						js_module: true,
-						editors: '0011'
+						editors: '1001'
 					}
 				]);
 
@@ -114,4 +115,18 @@ describe("bit-docs-html-codepen-link", function() {
 		assert.equal(data.js.trim(), 'const element = <h1>Hello, world!</h1>;');
 		assert.equal(data.js_pre_processor, 'babel');
 	});
+
+	it.skip("is able to create external js", function(){
+		var data = codepenData.html(`
+			<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.2.1/rxjs.umd.js" codepen-external></script>
+			<script src="https://foo.com" codepen-external></script>
+			<script type="typescript">
+			const {Observable} = rxjs;
+			</script>
+		`);
+		assert.equal(data.js.trim(), 'const {Observable} = rxjs;');
+		assert.equal(data.js_pre_processor, 'typescript');
+		assert.equal(data.js_external,'https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.2.1/rxjs.umd.js;https://foo.com');
+		assert.equal(data.html, undefined, "no html")
+	});
 });