Skip to content

Commit 7c2ec6b

Browse files
remyremy
committed
feat: init commit
0 parents  commit 7c2ec6b

File tree

12 files changed

+6332
-0
lines changed

12 files changed

+6332
-0
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

‎__tests__/fixtures/1.html

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
2+
<!DOCTYPE html>
3+
<html>
4+
<!--
5+
6+
> Created using JS Bin - https://jsbin.com
7+
> Released under the MIT license - https://jsbin.mit-license.org
8+
> Copyright (c) 2018 anonymous - https://jsbin.com/nifoxeceho/1/edit
9+
10+
-->
11+
<meta name="robots" content="none">
12+
<head>
13+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
14+
<meta charset="utf-8">
15+
<title>JS Bin</title>
16+
</head>
17+
<body ng-app="app">
18+
19+
<div ng-controller="AppCtrl as ctrl">
20+
<select
21+
ng-change="ctrl.selectAction()"
22+
ng-model="ctrl.myOption"
23+
ng-options="value.id as value.label for value in ctrl.myOptions">
24+
<option>--</option>
25+
</select>
26+
</div>
27+
28+
<!--boot js-->
29+
<script id="jsbin-javascript" defer>
30+
var app = angular.module("app", []);
31+
32+
app.controller("AppCtrl", function () {
33+
this.myOptions = [
34+
{
35+
"id": 101,
36+
"label": "Item 1"
37+
},
38+
{
39+
"id": 102,
40+
"label": "Item 2"
41+
}
42+
];
43+
//this.myOption = this.myOptions[0].id;
44+
this.selectAction = function() {
45+
console.log(this.myOption);
46+
};
47+
48+
});
49+
</script>
50+
51+
52+
</body>
53+
</html>

‎__tests__/fixtures/1.json

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"id": 14485361,
3+
"url": "nifoxeceho",
4+
"revision": 1,
5+
"active": "y",
6+
"javascript":
7+
"var app = angular.module(\"app\", []);\r\n\r\napp.controller(\"AppCtrl\", function () {\r\n this.myOptions = [\r\n {\r\n \"id\": 101,\r\n \"label\": \"Item 1\"\r\n },\r\n {\r\n \"id\": 102,\r\n \"label\": \"Item 2\"\r\n }\r\n ];\r\n //this.myOption = this.myOptions[0].id;\r\n this.selectAction = function() {\r\n console.log(this.myOption);\r\n};\r\n\r\n});",
8+
"html":
9+
"<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<script src=\"https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js\"></script>\r\n <meta charset=\"utf-8\">\r\n <title>JS Bin</title>\r\n</head>\r\n<body ng-app=\"app\">\r\n\r\n <div ng-controller=\"AppCtrl as ctrl\">\r\n <select \r\n ng-change=\"ctrl.selectAction()\"\r\n ng-model=\"ctrl.myOption\"\r\n ng-options=\"value.id as value.label for value in ctrl.myOptions\">\r\n <option>--</option>\r\n </select>\r\n </div>\r\n \r\n</body>\r\n</html>",
10+
"css": "",
11+
"created": "2015-01-28T14:22:50.000Z",
12+
"settings":
13+
"{\"processors\":{\"html\":\"html\",\"css\":\"css\",\"javascript\":\"javascript\"}}"
14+
}

‎__tests__/fixtures/2.json

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"id": 15096772,
3+
"url": "lifeno",
4+
"revision": 2,
5+
"active": "y",
6+
"javascript": "",
7+
"html":
8+
"<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <meta charset=\"utf-8\">\r\n <title>JS Bin</title>\r\n</head>\r\n<body>\r\n <div id=\"pop-up\">\r\n <div id=\"message\">This page will reload soon.</div> \r\n <div class=\"option\">Wait 5 minutes</div>\r\n <ul id=\"option_container\">\r\n <li class=\"options\">Do not Reload</li>\r\n <li class=\"options\">Please Reload</li>\r\n </ul>\r\n </div>\r\n</body>\r\n</html>",
9+
"css":
10+
"#pop-up{\r\n background-color:gray;\r\n color:black;\r\n width:400px;\r\n height:200px;\r\n text-align:center;\r\n}\r\n\r\n#option_container{\r\n border:1px solid red;\r\n text-align:center;\r\n}\r\n\r\n.options{\r\n list-style:none;\r\n cursor:pointer;\r\n border:1px solid red;\r\n font-size:20px;\r\n color:black;\r\n display:inline-block;\r\n}",
11+
"created": "2015-02-23T22:54:14.000Z",
12+
"settings":
13+
"{\"processors\":{\"html\":\"html\",\"css\":\"css\",\"javascript\":\"javascript\"},\"title\":\"JS Bin\"}"
14+
}

‎__tests__/fixtures/3.json

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"id": 15155824,
3+
"url": "dihuha",
4+
"revision": 695,
5+
"active": "y",
6+
"javascript": "",
7+
"html":
8+
"<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <meta charset=\"utf-8\">\r\n <title>Shad's HTML</title>\r\n</head>\r\n<body>\r\n <div>\r\n <h1> Hello shad </h1>\r\n <hr /> \r\n <p>\r\n <strong> This is a bold tag.</strong> \r\n This word will be in <i>italic.</i> \r\n I want this <u>word</u> underline.\r\n <strike> This sentence is wrong.</strike>\r\n </p>\r\n \r\n <h2>Shad's favorite candy</h2>\r\n <ul> \r\n <li> herseys cookies n cream</li>\r\n <li> twix </li>\r\n <li> peanut butter</li>\r\n <li> m&m</li>\r\n </ul>\r\n \r\n <h3> My favorite characters</h3>\r\n <ol>\r\n <li> Hulk</li>\r\n <li> Iron man</li>\r\n <li> Superman </li>\r\n <li> Shadman</li>\r\n </ol>\r\n \r\n <img src=\"images/deck2.jpg\" />\r\n <img src=\"desktop/smith.jpg\" /> \r\n \r\n <form>\r\n <input type=\"email\" placeholder=\"typehere \" />\r\n <br /> <br />\r\n <textarea> my name goes here </textarea>\r\n <br /> <br /> \r\n <select> \r\n <option> select an superhero</option>\r\n <option>Hulk</option>\r\n <option>Iron man</option>\r\n </select>\r\n \r\n <br /> <br />\r\n \r\n </form>\r\n </div>\r\n</body>\r\n</html>",
9+
"css": "",
10+
"created": "2015-02-26T01:53:51.000Z",
11+
"settings":
12+
"{\"processors\":{\"html\":\"html\",\"css\":\"css\",\"javascript\":\"javascript\"},\"title\":\"Shad's HTML\"}"
13+
}

‎__tests__/fixtures/4.json

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"id": 43101612,
3+
"url": "cesexawewi",
4+
"revision": 2,
5+
"javascript":
6+
"const a = { a: 1, b: 2 };\r\n\r\nconst c = { ...a };\r\n\r\nconsole.log(c);",
7+
"active": "y",
8+
"html": "# Hello\r\n\r\nThis is [markdown](https://google.com)",
9+
"css":
10+
"body {\r\n background: white;\r\n \r\n h1 {\r\n color: red;\r\n }\r\n \r\n a {\r\n color: hotpink;\r\n }\r\n}",
11+
"created": "2018-04-19T13:09:26.000Z",
12+
"settings":
13+
"{\"processors\":{\"html\":\"markdown\",\"css\":\"scss\",\"javascript\":\"babel\"}}",
14+
15+
"res": {
16+
"javascript":
17+
"\"use strict\";\n\nvar _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };\n\nvar a = { a: 1, b: 2 };\n\nvar c = _extends({}, a);\n\nconsole.log(c);",
18+
"css":
19+
"body {\n background: white;\n}\nbody h1 {\n color: red;\n}\nbody a {\n color: hotpink;\n}\n",
20+
"html": "# Hello\n\nThis is [markdown](https://google.com)",
21+
"full":
22+
"<!-- source: https://jsbin.com/cesexawewi/2/edit -->\n<style id=\"jsbin-css\">\nbody {\n background: white; }\n body h1 {\n color: red; }\n body a {\n color: hotpink; }\n\n</style>\n<h1>Hello</h1>\n<p>This is <a href=\"https://google.com\">markdown</a></p>\n\n<!--boot js-->\n<script id=\"jsbin-javascript\" defer>\n\"use strict\";\n\nvar _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };\n\nvar a = { a: 1, b: 2 };\n\nvar c = _extends({}, a);\n\nconsole.log(c);\n</script>\n<script id=\"jsbin-source-html\" type=\"text/source-markdown\"># Hello\r\n\r\nThis is [markdown](https://google.com)\n</script>\n\n<script id=\"jsbin-source-css\" type=\"text/source-scss\">body {\r\n background: white;\r\n \r\n h1 {\r\n color: red;\r\n }\r\n \r\n a {\r\n color: hotpink;\r\n }\r\n}\n</script>\n\n<script id=\"jsbin-source-javascript\" type=\"text/source-babel\">const a = { a: 1, b: 2 };\r\n\r\nconst c = { ...a };\r\n\r\nconsole.log(c);\n</script>"
23+
}
24+
}

‎__tests__/fixtures/zabihiheha.html

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
2+
<!DOCTYPE html>
3+
<html>
4+
5+
<meta name="robots" content="none">
6+
<head>
7+
<meta charset="utf-8">
8+
<meta name="viewport" content="width=device-width">
9+
<title>JS Bin</title>
10+
<style id="jsbin-css">
11+
body {
12+
background: #f5f5f5;
13+
}
14+
body h1 {
15+
text-align: center;
16+
font-family: arial;
17+
color: #5a5a5a;
18+
}
19+
body ul {
20+
display: flex;
21+
list-style: none;
22+
flex-wrap: wrap;
23+
align-items: flex-start;
24+
justify-content: center;
25+
flex-basis: 80%;
26+
}
27+
body ul li {
28+
flex-basis: 20%;
29+
display: flex;
30+
flex-direction: column;
31+
margin-bottom: 20px;
32+
align-items: center;
33+
}
34+
body ul li span {
35+
font-family: arial;
36+
font-size: 14px;
37+
color: #5a5a5a;
38+
text-align: center;
39+
}
40+
body ul li img {
41+
margin: 5px;
42+
border-radius: 3px;
43+
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
44+
}
45+
46+
</style>
47+
</head>
48+
<body>
49+
<h1>Authors</h1>
50+
<ul id="authors"></ul>
51+
52+
<script id="jsbin-javascript" defer>
53+
'use strict';
54+
55+
function createNode(element) {
56+
return document.createElement(element);
57+
}
58+
59+
function append(parent, el) {
60+
return parent.appendChild(el);
61+
}
62+
63+
var ul = document.getElementById('authors');
64+
var url = 'https://randomuser.me/api/?results=10';
65+
fetch(url).then(function (resp) {
66+
return resp.json();
67+
}).then(function (data) {
68+
var authors = data.results;
69+
return authors.map(function (author) {
70+
var li = createNode('li'),
71+
img = createNode('img'),
72+
span = createNode('span');
73+
img.src = author.picture.medium;
74+
span.innerHTML = author.name.first + ' ' + author.name.last;
75+
append(li, img);
76+
append(li, span);
77+
append(ul, li);
78+
});
79+
}).catch(function (error) {
80+
console.log(JSON.stringify(error));
81+
});
82+
</script>
83+
<script id="jsbin-source-css" type="text/source-less">body {
84+
background: #f5f5f5;
85+
86+
h1 {
87+
text-align: center;
88+
font-family: arial;
89+
color: #5a5a5a;
90+
}
91+
92+
ul {
93+
display: flex;
94+
list-style:none;
95+
flex-wrap: wrap;
96+
align-items: flex-start;
97+
justify-content:center;
98+
flex-basis: 80%;
99+
100+
li {
101+
flex-basis: 20%;
102+
display:flex;
103+
flex-direction: column;
104+
margin-bottom: 20px;
105+
align-items:center;
106+
107+
span {
108+
font-family: arial;
109+
font-size: 14px;
110+
color: #5a5a5a;
111+
text-align: center;
112+
}
113+
114+
img {
115+
margin: 5px;
116+
border-radius: 3px;
117+
box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
118+
}
119+
}
120+
}
121+
122+
}
123+
</script>
124+
<script id="jsbin-source-javascript" type="text/source-babel"> function createNode(element) {
125+
return document.createElement(element);
126+
}
127+
128+
function append(parent, el) {
129+
return parent.appendChild(el);
130+
}
131+
132+
const ul = document.getElementById('authors');
133+
const url = 'https://randomuser.me/api/?results=10';
134+
fetch(url)
135+
.then((resp) => resp.json())
136+
.then(function(data) {
137+
let authors = data.results;
138+
return authors.map(function(author) {
139+
let li = createNode('li'),
140+
img = createNode('img'),
141+
span = createNode('span');
142+
img.src = author.picture.medium;
143+
span.innerHTML = `${author.name.first} ${author.name.last}`;
144+
append(li, img);
145+
append(li, span);
146+
append(ul, li);
147+
})
148+
})
149+
.catch(function(error) {
150+
console.log(JSON.stringify(error));
151+
});
152+
153+
</script></body>
154+
</html>

‎__tests__/fixtures/zabihiheha.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"id": 43229341,
3+
"url": "zabihiheha",
4+
"revision": 1,
5+
"active": "y",
6+
"javascript":
7+
" function createNode(element) {\n return document.createElement(element);\n }\n\n function append(parent, el) {\n return parent.appendChild(el);\n }\n\n const ul = document.getElementById('authors');\n const url = 'https://randomuser.me/api/?results=10';\n fetch(url)\n .then((resp) => resp.json())\n .then(function(data) {\n let authors = data.results;\n return authors.map(function(author) {\n let li = createNode('li'),\n img = createNode('img'),\n span = createNode('span');\n img.src = author.picture.medium;\n span.innerHTML = `${author.name.first} ${author.name.last}`;\n append(li, img);\n append(li, span);\n append(ul, li);\n })\n })\n .catch(function(error) {\n console.log(JSON.stringify(error));\n }); \n",
8+
"html":
9+
"<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <meta charset=\"utf-8\">\r\n <meta name=\"viewport\" content=\"width=device-width\">\r\n <title>JS Bin</title>\r\n</head>\r\n<body>\r\n <h1>Authors</h1>\r\n <ul id=\"authors\"></ul>\r\n</body>\r\n</html>",
10+
"css":
11+
"body {\r\n background: #f5f5f5;\r\n\r\n h1 {\r\n text-align: center;\r\n font-family: arial;\r\n color: #5a5a5a;\r\n }\r\n\r\n ul {\r\n display: flex;\r\n list-style:none;\r\n flex-wrap: wrap;\r\n align-items: flex-start;\r\n justify-content:center;\r\n flex-basis: 80%;\r\n\r\n li {\r\n flex-basis: 20%;\r\n display:flex;\r\n flex-direction: column;\r\n margin-bottom: 20px;\r\n align-items:center;\r\n\r\n span {\r\n font-family: arial;\r\n font-size: 14px;\r\n color: #5a5a5a;\r\n text-align: center;\r\n }\r\n\r\n img {\r\n margin: 5px;\r\n border-radius: 3px;\r\n box-shadow: 1px 1px 3px rgba(0,0,0,0.2); \r\n }\r\n }\r\n }\r\n\r\n}",
12+
"created": "2018-04-28T14:21:14.000Z",
13+
"settings":
14+
"{\"processors\":{\"html\":\"html\",\"css\":\"less\",\"javascript\":\"babel\"},\"title\":\"The Fetch API\"}"
15+
}

‎__tests__/index.js

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
const lib = require('../');
2+
const binToFile = require('bin-to-file');
3+
const fs = require('fs');
4+
const { promisify } = require('util');
5+
const read = promisify(fs.readFile);
6+
const diff = require('jest-diff');
7+
8+
expect.extend({
9+
toRoughlyMatch(received, expected) {
10+
const trimSplit = s =>
11+
s
12+
.trim()
13+
.split('\n')
14+
.map(_ => _.trim())
15+
// strip metadata build includes
16+
.filter(_ => !_.includes('<meta name="robots" content="none">'))
17+
.filter(Boolean);
18+
19+
const rLines = trimSplit(received);
20+
const eLines = trimSplit(expected);
21+
22+
const fail = rLines.find((line, i) => line.trim() !== eLines[i].trim());
23+
const pass = !fail;
24+
25+
const message = pass
26+
? () =>
27+
this.utils.matcherHint('.not.toBe') +
28+
'\n\n' +
29+
`Expected value to not rougly be:\n` +
30+
` ${this.utils.printExpected(expected)}\n` +
31+
`Received:\n` +
32+
` ${this.utils.printReceived(received)}`
33+
: () => {
34+
const diffString = diff(expected, received, {
35+
expand: this.expand,
36+
});
37+
return (
38+
this.utils.matcherHint('.toBe') +
39+
'\n\n' +
40+
`Expected value to roughly be:\n` +
41+
` ${this.utils.printExpected(expected)}\n` +
42+
`Received:\n` +
43+
` ${this.utils.printReceived(received)}` +
44+
(diffString ? `\n\nDifference:\n\n${diffString}` : '')
45+
);
46+
};
47+
48+
return { actual: received, message, pass };
49+
},
50+
});
51+
52+
const stripComments = s => s.replace(/<!--([\s\S]+)-->/g, '');
53+
54+
[1, 2, 3].forEach(n => {
55+
const fixture = require(`./fixtures/${n}.json`);
56+
test(`${fixture.url}/${fixture.revision} (${n}.json)`, async () => {
57+
const html = fixture.res ? fixture.res : binToFile(fixture);
58+
59+
expect(html.length).toBeGreaterThan(1);
60+
const res = lib(html);
61+
62+
expect(typeof res).toBe('object');
63+
expect(res.javascript).toRoughlyMatch(fixture.javascript);
64+
expect(stripComments(res.html)).toRoughlyMatch(fixture.html);
65+
expect(res.css).toEqual(fixture.css);
66+
expect(res.url).toEqual(fixture.url);
67+
expect(res.revision).toEqual(fixture.revision);
68+
});
69+
});
70+
71+
test.only('zabihiheha', async () => {
72+
const fixture = require('./fixtures/zabihiheha.json');
73+
const html = await read(__dirname + '/fixtures/zabihiheha.html', 'utf8');
74+
const res = lib(html);
75+
76+
const p = res.settings.processors;
77+
78+
expect(typeof res).toBe('object');
79+
expect(res.source[p.javascript]).toRoughlyMatch(fixture.javascript);
80+
expect(stripComments(res.source[p.css])).toRoughlyMatch(fixture.css);
81+
expect(res.html).toRoughlyMatch(fixture.html);
82+
});
83+
84+
test(`full deck of processors (4.json)`, async () => {
85+
const fixture = require(`./fixtures/4.json`);
86+
const html = fixture.res.full;
87+
88+
expect(html.length).toBeGreaterThan(1);
89+
const res = lib(html);
90+
91+
const p = res.settings.processors;
92+
93+
expect(typeof res).toBe('object');
94+
expect(res.source[p.javascript]).toRoughlyMatch(fixture.javascript);
95+
expect(stripComments(res.source[p.html])).toRoughlyMatch(fixture.html);
96+
expect(stripComments(res.html)).not.toEqual(
97+
expect.stringContaining('<script ')
98+
);
99+
expect(res.source[p.css]).toRoughlyMatch(fixture.css);
100+
expect(res.url).toEqual(fixture.url);
101+
expect(res.revision).toEqual(fixture.revision);
102+
});

0 commit comments

Comments
 (0)