Merge pull request #8 from bit-docs/tmpl

Prevent removing styles/scripts within templates

Author: matthewp

codepen-data.js

@@ -1,29 +1,29 @@
 var scriptRegExp = /<script\s([^>]+)>([\s\S]*?)<\/script>/ig;
 var styleRegExp = /<style>([\s\S]*?)<\/style>/i;
+var templateRegExp = /<template>([\s\S]*?)<\/template>/ig;
 var moduleTest = /type=["']([\w\/]+)["']/;
 var srcTest = /src=/;
 var DEFAULT_EDITORS = "0011";
 
 var types = {
 	html: function htmlType(text) {
-
 		var result;
-		var HTML =  text;
-
-		text.replace(scriptRegExp, function(match, attrs, code) {
+		var HTML = text;
+		var textWithoutTemplates = text.replace(templateRegExp, "");
 
+		textWithoutTemplates.replace(scriptRegExp, function(match, attrs, code) {
 			var matchTest = attrs.match(moduleTest);
+			var HTMLwithoutTemplates = HTML.replace(templateRegExp, "");
 
 			// This has a src="".  We look for codepen-external
 			if(srcTest.test(attrs)) {
 
 			}
 			// 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);
+				var styleResults = HTMLwithoutTemplates.match(styleRegExp);
 				if (styleResults) {
 					HTML = HTML.replace(styleResults[0], "").trim();
 					CSS = styleResults[1].trim();

test.js

@@ -136,5 +136,53 @@ describe("bit-docs-html-codepen-link", function() {
 
 		assert(data, "got data");
 		assert.equal(data.html.trim(), "<div>Hello world</div>");
-	})
+	});
+
+	it("Does not remove styles from within a template", function() {
+		var data = codepenData.html(`
+<template>
+	<style>.root { display: block; }</style>
+</template>
+<script type="module"></script>
+		`);
+
+		assert(!data.css, "There should not be css");
+		assert.equal(data.html.trim(), `
+<template>
+	<style>.root { display: block; }</style>
+</template>
+		`.trim());
+	});
+
+	it("Does not remove scripts from within a template", function() {
+		var data = codepenData.html(`
+<template>
+	<script>console.log('testing');</script>
+</template>
+<script type="module"></script>
+		`);
+
+		assert(!data.js, "There should not be js");
+		assert.equal(data.html.trim(), `
+<template>
+	<script>console.log('testing');</script>
+</template>
+		`.trim());
+	});
+
+	it("Does not remove module scripts from within a template", function() {
+		var data = codepenData.html(`
+<template>
+	<script type="module">console.log('testing');</script>
+</template>
+<script type="module"></script>
+		`);
+
+		assert(!data.js, "There should not be js");
+		assert.equal(data.html.trim(), `
+<template>
+	<script type="module">console.log('testing');</script>
+</template>
+		`.trim());
+	});
 });