Skip to content

Commit abc7625

Browse files
justinbmeyerjustinbmeyer
committed
handles jsx and typescript
1 parent 28a3db7 commit abc7625

File tree

2 files changed

+96
-61
lines changed

2 files changed

+96
-61
lines changed

‎codepen-data.js

Lines changed: 50 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,62 @@
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;
99

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

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

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-
}
14+
if (matchTest && !srcTest.test(attrs)) {
3415

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

4962
module.exports = types;

‎test.js

Lines changed: 46 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,24 @@ 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+
});
95117
});

0 commit comments

Comments
 (0)