Skip to content

Commit 68f8565

Browse files
Kurdi SzabolcsKurdi Szabolcs
Kurdi Szabolcs
authored and
Kurdi Szabolcs
committed
feat: initial release
1 parent b549895 commit 68f8565

16 files changed

Lines changed: 412 additions & 1 deletion

‎.babelrc‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["es2015-ie"]
3+
}

‎.editorconfig‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
root = true
2+
3+
[*]
4+
end_of_line = lf
5+
insert_final_newline = true
6+
trim_trailing_whitespace = true
7+
charset = utf-8
8+
indent_style = space
9+
indent_size = 2
10+
11+
[*.md]
12+
trim_trailing_whitespace = false

‎.eslintrc‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"extends": "semistandard",
3+
"env": {
4+
"node": true,
5+
"browser": true,
6+
"mocha": true
7+
}
8+
}

‎.gitignore‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# github node preset
2+
logs
3+
*.log
4+
npm-debug.log*
5+
pids
6+
*.pid
7+
*.seed
8+
lib-cov
9+
coverage
10+
.nyc_output
11+
.grunt
12+
.lock-wscript
13+
build/Release
14+
node_modules
15+
jspm_packages
16+
.npm
17+
.node_repl_history
18+
19+
# ----
20+
.idea
21+
.DS_Store

‎README.md‎

Lines changed: 39 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,40 @@
11
# basic-loader
2-
David Walsh's super simple loader for loading image, CSS, and JavaScript files.
2+
3+
David Walsh's [super simple loader](https://davidwalsh.name/javascript-loader) for loading image, CSS, and JavaScript files.
4+
5+
## installation
6+
7+
```shell
8+
npm i -S @prepair/basic-loader
9+
```
10+
11+
* Requires browser environment (dom).
12+
* Transpiled to es2015+ie context (polyfills not included).
13+
14+
## usage
15+
16+
```
17+
import load from '@prepair/basic-loader'
18+
19+
Promise.all([
20+
load.js('lib/highlighter.js'),
21+
load.js('lib/main.js'),
22+
load.css('lib/highlighter.css'),
23+
load.img('images/logo.png')
24+
]).then(() => {
25+
console.log('Everything has loaded!');
26+
}).catch(err => {
27+
console.log('Oh no, epic failure!');
28+
});
29+
```
30+
31+
## caveats
32+
33+
* Loading is not sequential
34+
* Style loading may not work with mobile borwsers or in old Safari?
35+
[Followup is here](https://github.com/w3core/import.js/issues/2).
36+
* The e2e test runner breaks (in phantom, but the test.html works in the browser)
37+
this is caused by an old phantomjs version in the _mocha-phantomjs_ package.
38+
[Issue is here](https://github.com/nathanboktae/mocha-phantomjs/issues/248)
39+
* either wait for the upstream package to be updated
40+
* or update the binary manually

‎e2e/bar.png‎

2.33 KB
Loading

‎e2e/baz.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
#css-target { width: 20px; height: 20px; background-color: lime; border: 4px solid fuchsia; color: red; padding: 5px; }

‎e2e/foo.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
window.foo = true;

‎e2e/test.html‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<html>
2+
<head>
3+
<!-- https://mochajs.org/#running-mocha-in-the-browser -->
4+
<meta charset="utf-8">
5+
<title>Mocha Tests</title>
6+
<link href="https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.css" rel="stylesheet" />
7+
<script src="https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.js"></script>
8+
<script src="https://cdn.rawgit.com/chaijs/chai/3.5.0/chai.js"></script>
9+
<script src="https://cdn.rawgit.com/cujojs/curl/0.8.13/dist/curl/curl.js"></script>
10+
<script src="https://cdn.rawgit.com/taylorhakes/promise-polyfill/6.0.2/promise.js"></script>
11+
</head>
12+
<body>
13+
<div id="mocha"></div>
14+
15+
<div id="css-target"></div>
16+
17+
<script type="text/javascript">
18+
curl.config({ baseUrl: "../lib" });
19+
curl(['basic-loader-amd'], function (load) {
20+
21+
mocha.ui('bdd');
22+
expect = chai.expect;
23+
24+
function getProp(elem, prop) {
25+
return window.getComputedStyle(elem, null).getPropertyValue(prop);
26+
}
27+
28+
describe('basic-loader', function () {
29+
30+
it('should load javascript files', function (done) {
31+
expect(window.foo).to.be.undefined;
32+
load.js('foo.js').then(function () {
33+
expect(window.foo).to.be.true;
34+
done();
35+
});
36+
});
37+
38+
it('should raise a promise error for non-existent javascript files', function (done) {
39+
load.js('foo-missing.js').catch(function () {
40+
done();
41+
});
42+
});
43+
44+
it('should load image files', function (done) {
45+
expect(document.getElementsByTagName('IMG').length).to.equal(0); // empty breaks phantom
46+
load.img('bar.png').then(function () {
47+
expect(document.getElementsByTagName('IMG')).to.have.length(1);
48+
done();
49+
});
50+
});
51+
52+
it('should raise a promise error for non-existent image files', function (done) {
53+
load.img('bar-missing.png').catch(function () {
54+
done();
55+
});
56+
});
57+
58+
it('should load css files', function (done) {
59+
var target = document.getElementById('css-target');
60+
expect(getProp(target, 'color')).to.equal('rgb(0, 0, 0)'); // phantom is terribly picky about props
61+
load.css('baz.css').then(function () {
62+
expect(getProp(target, 'color')).to.equal('rgb(255, 0, 0)');
63+
done();
64+
});
65+
});
66+
67+
it('should raise a promise error for non-existent css files', function (done) {
68+
load.img('baz-missing.css').catch(function () {
69+
done();
70+
});
71+
});
72+
73+
});
74+
75+
mocha.run();
76+
});
77+
</script>
78+
</body>
79+
</html>

‎lib/basic-loader-amd.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
define(['module'], function (module) {
2+
'use strict';
3+
4+
function _load(tag) {
5+
return function (url) {
6+
// This promise will be used by Promise.all to determine success or failure
7+
return new Promise(function (resolve, reject) {
8+
var element = document.createElement(tag);
9+
var parent = 'body';
10+
var attr = 'src';
11+
12+
// Important success and error for the promise
13+
element.onload = function () {
14+
return resolve(url);
15+
};
16+
element.onerror = function () {
17+
return reject(url);
18+
};
19+
20+
// Need to set different attributes depending on tag type
21+
switch (tag) {
22+
case 'script':
23+
element.async = true;
24+
break;
25+
case 'link':
26+
element.type = 'text/css';
27+
element.rel = 'stylesheet';
28+
attr = 'href';
29+
parent = 'head';
30+
}
31+
32+
// Inject into document to kick off loading
33+
element[attr] = url;
34+
document[parent].appendChild(element);
35+
});
36+
};
37+
}
38+
39+
module.exports = {
40+
css: _load('link'),
41+
js: _load('script'),
42+
img: _load('img')
43+
};
44+
});

0 commit comments

Comments
 (0)