Skip to content

Commit 14fe74e

Browse files
author
Chasen Le Hara
committed
Merge branch 'external-resources'
2 parents 749933d + de5fadd commit 14fe74e

File tree

4 files changed

+130
-69
lines changed

4 files changed

+130
-69
lines changed

‎codepen-data.js

Lines changed: 55 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,68 @@
11
var scriptRegExp = /<script\s([^>]+)>([\s\S]*?)<\/script>/ig;
22
var styleRegExp = /<style>([\s\S]*?)<\/style>/i;
3-
var moduleTest = /type=["']module["']/;
3+
var moduleTest = /type=["']([\w\/]+)["']/;
44
var srcTest = /src=/;
55
var types = {
6-
html: function htmlType(text){
6+
html: function htmlType(text) {
77

8-
var result;
8+
var result;
9+
var HTML = text;
910

10-
text.replace(scriptRegExp, function(match, attrs, code){
11-
12-
if(moduleTest.test(attrs) && !srcTest.test(attrs)) {
11+
text.replace(scriptRegExp, function(match, attrs, code) {
1312

14-
var HTML = text.replace(match,"").trim();
13+
var matchTest = attrs.match(moduleTest);
1514

16-
var styleResults = HTML.match(styleRegExp);
17-
if(styleResults) {
18-
HTML = HTML.replace(styleResults[0],"").trim();
19-
result = {
20-
html: HTML,
21-
js: code.trim(),
22-
js_module: true,
23-
editors: "1011",
24-
css: styleResults[1].trim()
25-
};
26-
} else {
27-
result = {
28-
html: HTML,
29-
js: code.trim(),
30-
js_module: true,
31-
editors: "1011"
32-
};
33-
}
15+
// This has a src="". We look for codepen-external
16+
if(srcTest.test(attrs)) {
3417

18+
}
19+
// It doesn't have a src, so we assume this has a body
20+
else if (matchTest) {
3521

36-
}
37-
});
38-
return result;
39-
},
40-
js: function (text){
41-
return {
42-
js: text,
43-
js_module: true,
44-
editors: "0011"
45-
};
46-
}
22+
HTML = HTML.replace(match, "").trim();
23+
var CSS;
24+
var styleResults = HTML.match(styleRegExp);
25+
if (styleResults) {
26+
HTML = HTML.replace(styleResults[0], "").trim();
27+
CSS = styleResults[1].trim();
28+
}
29+
if (types[matchTest[1]]) {
30+
result = types[matchTest[1]](code.trim());
31+
} else {
32+
result = types.js(code.trim());
33+
}
34+
result.editors = "1011";
35+
if (HTML) {
36+
result.html = HTML;
37+
}
38+
if (CSS) {
39+
result.css = CSS;
40+
}
41+
}
42+
});
43+
return result;
44+
},
45+
js: function(text) {
46+
return {
47+
js: text,
48+
js_module: true,
49+
editors: "0011"
50+
};
51+
},
52+
typescript: function(text) {
53+
return {
54+
js: text,
55+
js_pre_processor: "typescript",
56+
editors: "0011"
57+
};
58+
},
59+
jsx: function(text) {
60+
return {
61+
js: text,
62+
js_pre_processor: "babel",
63+
editors: "0011"
64+
};
65+
}
4766
};
4867

4968
module.exports = types;

‎index.js

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,17 @@
11
var types = require("./codepen-data");
22
var languageHTML = /language-(\w+)/;
33

4+
5+
function cleanCodePenData(data) {
6+
if(docObject.codepen) {
7+
docObject.codepen.forEach(function(replacement){
8+
if(data.js) {
9+
data.js = data.js.split(replacement[0]).join(replacement[1]);
10+
}
11+
});
12+
}
13+
}
14+
415
function createCodePen(data) {
516

617
var JSONstring =
@@ -98,20 +109,15 @@ module.exports = function() {
98109
var text = codeElement.textContent;
99110

100111
var data = types[language](text);
101-
if(docObject.codepen) {
102-
docObject.codepen.forEach(function(replacement){
103-
if(data.js) {
104-
data.js = data.js.split(replacement[0]).join(replacement[1]);
105-
}
106-
});
107-
}
112+
108113
if(data.js) {
109114
data.js = data.js.trim();
110115
}
111116
if(data.html) {
112117
data.html = data.html.trim();
113118
}
114119
if(data) {
120+
cleanCodePenData(data);
115121
if(window.CREATE_CODE_PEN) {
116122
CREATE_CODE_PEN(data);
117123
} else {
@@ -138,7 +144,7 @@ module.exports = function() {
138144
editors: "1011",
139145
css: cssText.trim()
140146
};
141-
147+
cleanCodePenData(codePen);
142148
if(window.CREATE_CODE_PEN) {
143149
CREATE_CODE_PEN(codePen);
144150
} else {

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "bit-docs-html-codepen-link",
3-
"version": "1.1.2",
3+
"version": "1.3.2",
44
"description": "add a codepen link ",
55
"main": "index.js",
66
"scripts": {

‎test.js

Lines changed: 60 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -22,17 +22,17 @@ var open = function(url, callback, done) {
2222
};
2323

2424
describe("bit-docs-html-codepen-link", function() {
25-
it.only("basics works", function(done) {
25+
it("basics works", function(done) {
2626
this.timeout(60000);
2727

2828
var docMap = Promise.resolve({
2929
index: {
3030
name: "index",
3131
demo: "path/to/demo.html",
32-
body: fs.readFileSync(__dirname+"/test-demo.md", "utf8"),
33-
codepen: [
34-
["can", "//unpkg.com/can@^5.0.0-pre.1/core.mjs"]
35-
]
32+
body: fs.readFileSync(__dirname + "/test-demo.md", "utf8"),
33+
codepen: [
34+
["can", "//unpkg.com/can@^5.0.0-pre.1/core.mjs"]
35+
]
3636
}
3737
});
3838

@@ -48,36 +48,38 @@ describe("bit-docs-html-codepen-link", function() {
4848
forceBuild: true,
4949
minifyBuild: false
5050
}).then(function() {
51-
open("temp/index.html",function(browser, close) {
51+
open("temp/index.html", function(browser, close) {
5252
var doc = browser.window.document;
53-
var createCallData = [];
54-
browser.window.CREATE_CODE_PEN = function(data){
55-
createCallData.push(data);
56-
};
57-
var codePens = doc.querySelectorAll('.codepen');
53+
var createCallData = [];
54+
browser.window.CREATE_CODE_PEN = function(data) {
55+
createCallData.push(data);
56+
};
57+
var codePens = doc.querySelectorAll('.codepen');
5858

59-
Array.from(codePens).forEach(function(codePen){
60-
codePen.click();
61-
});
62-
assert.deepEqual(createCallData,[
63-
{ html: '<my-app></my-app>',
64-
js: 'import { Component } from "//unpkg.com/can@^5.0.0-pre.1/core.mjs";\nComponent',
65-
js_module: true,
66-
editors: '1011',
59+
Array.from(codePens).forEach(function(codePen) {
60+
codePen.click();
61+
});
62+
assert.deepEqual(createCallData, [{
63+
html: '<my-app></my-app>',
64+
js: 'import { Component } from "//unpkg.com/can@^5.0.0-pre.1/core.mjs";\nComponent',
65+
js_module: true,
66+
editors: '1011',
6767
css: 'my-app {color: "green";}'
6868
},
69-
{ js: 'import {DefineMap} from "//unpkg.com/can@^5.0.0-pre.1/core.mjs";\nconsole.log( myCounter.count ) //-> 1',
70-
js_module: true,
71-
editors: '0011' }
72-
]);
69+
{
70+
js: 'import {DefineMap} from "//unpkg.com/can@^5.0.0-pre.1/core.mjs";\nconsole.log( myCounter.count ) //-> 1',
71+
js_module: true,
72+
editors: '0011'
73+
}
74+
]);
7375

7476
close();
7577
done();
7678
}, done);
7779
}, done);
7880
});
7981

80-
it("is able to ignore scripts with sources", function(){
82+
it("is able to ignore scripts with sources", function() {
8183
var data = codepenData.html(`
8284
<mock-url></mock-url>
8385
<bit-json-editor></bit-json-editor>
@@ -92,4 +94,38 @@ describe("bit-docs-html-codepen-link", function() {
9294
`);
9395
assert.equal(data.js, 'foo = "bar";')
9496
});
97+
98+
it("is able to parse typescript in html", function() {
99+
var data = codepenData.html(`
100+
<script type="typescript">
101+
function greeter(person: string) { return "Hello, " + person; }
102+
</script>
103+
`);
104+
assert.equal(data.js.trim(), 'function greeter(person: string) { return "Hello, " + person; }');
105+
assert.equal(data.js_pre_processor, 'typescript');
106+
});
107+
108+
it("is able to parse jsx in html", function() {
109+
var data = codepenData.html(`
110+
<script type="jsx">
111+
const element = <h1>Hello, world!</h1>;
112+
</script>
113+
`);
114+
assert.equal(data.js.trim(), 'const element = <h1>Hello, world!</h1>;');
115+
assert.equal(data.js_pre_processor, 'babel');
116+
});
117+
118+
it("is able to create external js", function(){
119+
var data = codepenData.html(`
120+
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.2.1/rxjs.umd.js" codepen-external></script>
121+
<script src="https://foo.com" codepen-external></script>
122+
<script type="typescript">
123+
const {Observable} = rxjs;
124+
</script>
125+
`);
126+
assert.equal(data.js.trim(), 'const {Observable} = rxjs;');
127+
assert.equal(data.js_pre_processor, 'typescript');
128+
assert.equal(data.js_external,'https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.2.1/rxjs.umd.js;https://foo.com');
129+
assert.equal(data.html, undefined, "no html")
130+
});
95131
});

0 commit comments

Comments
 (0)