mirror of
https://github.com/KevinMidboe/inline-html.git
synced 2025-10-29 17:40:29 +00:00
Add support for script elements. Update tests. Update docs.
This commit is contained in:
12
README.md
12
README.md
@@ -9,6 +9,8 @@ This library parses HTML, embeds the contents of local assets that are reference
|
|||||||
|
|
||||||
The following HTML elements and CSS data types are inlined:
|
The following HTML elements and CSS data types are inlined:
|
||||||
|
|
||||||
|
- Scripts - The source path is read and inlined.
|
||||||
|
|
||||||
- Images - The source path is replaced with a datauri.
|
- Images - The source path is replaced with a datauri.
|
||||||
|
|
||||||
- Linked LESS stylesheets - The LESS is compiled and the result is inlined within a `<style>` element. Note that `@imports` are processed as well.
|
- Linked LESS stylesheets - The LESS is compiled and the result is inlined within a `<style>` element. Note that `@imports` are processed as well.
|
||||||
@@ -21,6 +23,12 @@ Also, `inline-html` calls can be statically evaluated and included in Browserify
|
|||||||
|
|
||||||
Assuming ...
|
Assuming ...
|
||||||
|
|
||||||
|
- `main.js`
|
||||||
|
|
||||||
|
```js
|
||||||
|
var a = 1;
|
||||||
|
```
|
||||||
|
|
||||||
- `main.less`
|
- `main.less`
|
||||||
|
|
||||||
```css
|
```css
|
||||||
@@ -42,6 +50,7 @@ var inline = require('inline-html');
|
|||||||
|
|
||||||
co(function * () {
|
co(function * () {
|
||||||
var html = `
|
var html = `
|
||||||
|
<script src="main.js"></script>
|
||||||
<link rel="stylesheet/less" href="main.less"/>
|
<link rel="stylesheet/less" href="main.less"/>
|
||||||
<style> div { background-image: url('path/to/file'); } </style>
|
<style> div { background-image: url('path/to/file'); } </style>
|
||||||
<div style="background-image: url('path/to/file');"></div>
|
<div style="background-image: url('path/to/file');"></div>
|
||||||
@@ -50,6 +59,9 @@ co(function * () {
|
|||||||
html = yield inline.html(html);
|
html = yield inline.html(html);
|
||||||
console.log(html);
|
console.log(html);
|
||||||
/**
|
/**
|
||||||
|
<script>
|
||||||
|
var a = 1;
|
||||||
|
</script>
|
||||||
<style>
|
<style>
|
||||||
@font-face { src: url('data:...'); }
|
@font-face { src: url('data:...'); }
|
||||||
div { background-image: url('data:...'); }
|
div { background-image: url('data:...'); }
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ const fs = require('mz/fs');
|
|||||||
const inlineCssUrl = require('./css-url');
|
const inlineCssUrl = require('./css-url');
|
||||||
const inlineImg = require('./img');
|
const inlineImg = require('./img');
|
||||||
const inlineLess = require('./link-less');
|
const inlineLess = require('./link-less');
|
||||||
|
const inlineScript = require('./script');
|
||||||
const R = require('ramda');
|
const R = require('ramda');
|
||||||
const Ru = require('@panosoft/ramda-utils');
|
const Ru = require('@panosoft/ramda-utils');
|
||||||
|
|
||||||
@@ -33,11 +34,15 @@ inline.html = co.wrap(function * (html, options) {
|
|||||||
$ = result.$;
|
$ = result.$;
|
||||||
files = R.concat(files, result.files);
|
files = R.concat(files, result.files);
|
||||||
|
|
||||||
result = inlineCssUrl($, filename);
|
result = inlineCssUrl($, filename, options);
|
||||||
$ = result.$;
|
$ = result.$;
|
||||||
files = R.concat(files, result.files);
|
files = R.concat(files, result.files);
|
||||||
|
|
||||||
result = yield inlineImg($, filename);
|
result = yield inlineImg($, filename, options);
|
||||||
|
$ = result.$;
|
||||||
|
files = R.concat(files, result.files);
|
||||||
|
|
||||||
|
result = yield inlineScript($, filename, options);
|
||||||
$ = result.$;
|
$ = result.$;
|
||||||
files = R.concat(files, result.files);
|
files = R.concat(files, result.files);
|
||||||
|
|
||||||
|
|||||||
36
lib/script.js
Normal file
36
lib/script.js
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
const co = require('co');
|
||||||
|
const fs = require('mz/fs');
|
||||||
|
const isLocalPath = require('is-local-path');
|
||||||
|
const isTemplateExpression = require('./is-template-expression');
|
||||||
|
const path = require('path');
|
||||||
|
const R = require('ramda');
|
||||||
|
|
||||||
|
const forEachIndexed = R.addIndex(R.forEach);
|
||||||
|
|
||||||
|
const inlineScript = co.wrap(function * ($, filename) {
|
||||||
|
var basedir = path.dirname(filename);
|
||||||
|
var files;
|
||||||
|
try {
|
||||||
|
const scripts = $('script')
|
||||||
|
.filter((index, element) => {
|
||||||
|
const source = $(element).attr('src');
|
||||||
|
return isLocalPath(source) && !isTemplateExpression(source);
|
||||||
|
})
|
||||||
|
.toArray();
|
||||||
|
const getFilename = element => path.resolve(basedir, $(element).attr('src'));
|
||||||
|
const filenames = R.map(getFilename, scripts);
|
||||||
|
files = R.uniq(filenames);
|
||||||
|
const readFile = filename => fs.readFile(filename, 'utf8');
|
||||||
|
const contents = yield R.map(readFile, filenames);
|
||||||
|
const replaceScript = (script, index) => $(script).attr('src', null).html(contents[index]);
|
||||||
|
forEachIndexed(replaceScript, scripts);
|
||||||
|
return { $, files };
|
||||||
|
}
|
||||||
|
catch (error) {
|
||||||
|
error.filename = filename;
|
||||||
|
error.files = files;
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
module.exports = inlineScript;
|
||||||
452
test/index.js
452
test/index.js
@@ -18,12 +18,12 @@ describe('inline-html', () => {
|
|||||||
return expect(inline.file(filename)).to.eventually.equal(content);
|
return expect(inline.file(filename)).to.eventually.equal(content);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('options.filename: ignored for css url path resolution', () => {
|
it('options.filename: always reset to current filename and used for css url path resolution', () => {
|
||||||
var filename = path.resolve(__dirname, 'fixtures/css-url.html'); // file contains url path relative to itself
|
var filename = path.resolve(__dirname, 'fixtures/css-url.html'); // file contains url path relative to itself
|
||||||
var options = { filename: __filename }; // sets filename relative to this test file
|
var options = { filename: __filename }; // sets filename relative to this test file
|
||||||
return expect(inline.file(filename, options)).to.eventually.match(/"data:.*,.*"/);
|
return expect(inline.file(filename, options)).to.eventually.match(/"data:.*,.*"/);
|
||||||
});
|
});
|
||||||
it('options.filename: ignored for img src path resolution', () => {
|
it('options.filename: always reset to current filename and used for img src path resolution', () => {
|
||||||
var filename = path.resolve(__dirname, 'fixtures/img.html'); // file contains src relative to itself
|
var filename = path.resolve(__dirname, 'fixtures/img.html'); // file contains src relative to itself
|
||||||
var options = { filename: __filename }; // sets filename relative to this test file
|
var options = { filename: __filename }; // sets filename relative to this test file
|
||||||
return expect(inline.file(filename, options)).to.eventually.match(/"data:.*,.*"/);
|
return expect(inline.file(filename, options)).to.eventually.match(/"data:.*,.*"/);
|
||||||
@@ -39,32 +39,72 @@ describe('inline-html', () => {
|
|||||||
var html = 'HTML';
|
var html = 'HTML';
|
||||||
return expect(inline.html(html)).to.eventually.equal(html);
|
return expect(inline.html(html)).to.eventually.equal(html);
|
||||||
});
|
});
|
||||||
|
it('preserve self closing tags', () => {
|
||||||
|
var html = '<br/>';
|
||||||
|
return expect(inline.html(html)).to.eventually.equal(html);
|
||||||
|
});
|
||||||
|
it('preserve partials', () => {
|
||||||
|
var html = '{{> partial}}';
|
||||||
|
return expect(inline.html(html)).to.eventually.equal(html);
|
||||||
|
});
|
||||||
|
it('preserve helpers', () => {
|
||||||
|
var html = '{{helper}}';
|
||||||
|
return expect(inline.html(html)).to.eventually.equal(html);
|
||||||
|
});
|
||||||
|
|
||||||
it('inline link less', () => {
|
it('options.filename: default to cwd for css url path resolution', () => {
|
||||||
var filename = path.resolve(__dirname, 'fixtures/basic.less');
|
var url = 'test/fixtures/file.txt'; // Note: this is relative to cwd
|
||||||
var html = `<link rel="stylesheet/less" href="${filename}"/>`;
|
var uri = datauri(url);
|
||||||
return expect(inline.html(html)).to.eventually.match(/<style>[^]*<\/style>/);
|
|
||||||
|
var html = (path) => `<style>div { background-image: url('${path}'); }</style>`;
|
||||||
|
return expect(inline.html(html(url))).to.eventually.equal(html(uri));
|
||||||
});
|
});
|
||||||
it('inline link less imports', () => {
|
it('options.filename: set basepath for css url path resolution', () => {
|
||||||
var filename = path.resolve(__dirname, 'fixtures/import.less');
|
var filename = path.resolve(__dirname, 'fixtures/fake.html');
|
||||||
var html = `<link rel="stylesheet/less" href="${filename}"/>`;
|
var dirname = path.dirname(filename);
|
||||||
return expect(inline.html(html)).to.eventually.match(/<style>[^]*<\/style>/)
|
|
||||||
.and.not.match(/@import/);
|
var url = 'file.txt'; // Note: path relative to filename's dirname
|
||||||
|
var uri = datauri(path.resolve(dirname, url));
|
||||||
|
|
||||||
|
var html = (path) => `<style>div { background-image: url('${path}'); }</style>`;
|
||||||
|
var options = { filename: filename };
|
||||||
|
return expect(inline.html(html(url), options)).to.eventually.equal(html(uri));
|
||||||
});
|
});
|
||||||
it('inline css url path in style element', () => {
|
|
||||||
var filename = path.resolve(__dirname, 'fixtures/file.txt');
|
it('options.filename: default to cwd for img src path resolution', () => {
|
||||||
var html = `<style>div {background-image: url("${filename}");}</style>`;
|
var url = 'test/fixtures/file.txt'; // Note: path relative to cwd
|
||||||
return expect(inline.html(html)).to.eventually.match(/data:.*,.*/);
|
var uri = datauri(url);
|
||||||
|
|
||||||
|
var html = (path) => `<img src="${path}"/>`;
|
||||||
|
return expect(inline.html(html(url))).to.eventually.equal(html(uri));
|
||||||
});
|
});
|
||||||
it('inline css url path in element style attribute', () => {
|
it('options.filename: set basepath for img src path resolution', () => {
|
||||||
var filename = path.resolve(__dirname, 'fixtures/file.txt');
|
var filename = path.resolve(__dirname, 'fixtures/fake.html');
|
||||||
var html = `<div style="background-image: url('${filename}');"></div>`;
|
var dirname = path.dirname(filename);
|
||||||
return expect(inline.html(html)).to.eventually.match(/data:.*,.*/);
|
|
||||||
|
var url = 'file.txt'; // Note: path relative to filename's dirname
|
||||||
|
var uri = datauri(path.resolve(dirname, url));
|
||||||
|
|
||||||
|
var html = (path) => `<img src="${path}"/>`;
|
||||||
|
var options = { filename: filename };
|
||||||
|
return expect(inline.html(html(url), options)).to.eventually.equal(html(uri));
|
||||||
});
|
});
|
||||||
it('inline img src', () => {
|
|
||||||
|
it('options.filename: included in results.files for img src if options.verbose true', () => {
|
||||||
var filename = path.resolve(__dirname, 'fixtures/file.txt');
|
var filename = path.resolve(__dirname, 'fixtures/file.txt');
|
||||||
var html = `<img src="${filename}"/>`;
|
var html = `<img src="${filename}"/>`;
|
||||||
return expect(inline.html(html)).to.eventually.match(/data:.*,.*/);
|
var options = { verbose: true };
|
||||||
|
return expect(inline.html(html, options)).to.eventually.have.property('files')
|
||||||
|
.that.is.an('array')
|
||||||
|
.that.contains(filename);
|
||||||
|
});
|
||||||
|
it('options.filename: included in results.files for css url path if options.verbose true', () => {
|
||||||
|
var filename = path.resolve(__dirname, 'fixtures/file.txt');
|
||||||
|
var html = `<style>div { background-image: url('${filename}'); }</style>`;
|
||||||
|
var options = { verbose: true };
|
||||||
|
return expect(inline.html(html, options)).to.eventually.have.property('files')
|
||||||
|
.that.is.an('array')
|
||||||
|
.that.contains(filename);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
@@ -88,146 +128,39 @@ describe('inline-html', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
it('options.filename: set basepath for css url path resolution', () => {
|
describe('css-url', () => {
|
||||||
var filename = path.resolve(__dirname, 'fixtures/fake.html');
|
it('inline local url in style element', () => {
|
||||||
var dirname = path.dirname(filename);
|
var filename = path.resolve(__dirname, 'fixtures/file.txt');
|
||||||
|
var html = `<style>div {background-image: url("${filename}");}</style>`;
|
||||||
var url = 'file.txt'; // Note: path relative to filename's dirname
|
return expect(inline.html(html)).to.eventually.match(/data:.*,.*/);
|
||||||
var uri = datauri(path.resolve(dirname, url));
|
|
||||||
|
|
||||||
var html = (path) => `<style>div { background-image: url('${path}'); }</style>`;
|
|
||||||
var options = { filename: filename };
|
|
||||||
return expect(inline.html(html(url), options)).to.eventually.equal(html(uri));
|
|
||||||
});
|
|
||||||
it('options.filename: set basepath for img src path resolution', () => {
|
|
||||||
var filename = path.resolve(__dirname, 'fixtures/fake.html');
|
|
||||||
var dirname = path.dirname(filename);
|
|
||||||
|
|
||||||
var url = 'file.txt'; // Note: path relative to filename's dirname
|
|
||||||
var uri = datauri(path.resolve(dirname, url));
|
|
||||||
|
|
||||||
var html = (path) => `<img src="${path}"/>`;
|
|
||||||
var options = { filename: filename };
|
|
||||||
return expect(inline.html(html(url), options)).to.eventually.equal(html(uri));
|
|
||||||
});
|
|
||||||
it('options.filename: default to cwd for css url path resolution', () => {
|
|
||||||
var url = 'test/fixtures/file.txt'; // Note: this is relative to cwd
|
|
||||||
var uri = datauri(url);
|
|
||||||
|
|
||||||
var html = (path) => `<style>div { background-image: url('${path}'); }</style>`;
|
|
||||||
return expect(inline.html(html(url))).to.eventually.equal(html(uri));
|
|
||||||
});
|
|
||||||
it('options.filename: default to cwd for img src path resolution', () => {
|
|
||||||
var url = 'test/fixtures/file.txt'; // Note: path relative to cwd
|
|
||||||
var uri = datauri(url);
|
|
||||||
|
|
||||||
var html = (path) => `<img src="${path}"/>`;
|
|
||||||
return expect(inline.html(html(url))).to.eventually.equal(html(uri));
|
|
||||||
});
|
|
||||||
it('options.filename: included in results.files for img src if options.verbose true', () => {
|
|
||||||
var filename = path.resolve(__dirname, 'fixtures/file.txt');
|
|
||||||
var html = `<img src="${filename}"/>`;
|
|
||||||
var options = { verbose: true };
|
|
||||||
return expect(inline.html(html, options)).to.eventually.have.property('files')
|
|
||||||
.that.is.an('array')
|
|
||||||
.that.contains(filename);
|
|
||||||
});
|
|
||||||
it('options.filename: included in results.files for css url path if options.verbose true', () => {
|
|
||||||
var filename = path.resolve(__dirname, 'fixtures/file.txt');
|
|
||||||
var html = `<style>div { background-image: url('${filename}'); }</style>`;
|
|
||||||
var options = { verbose: true };
|
|
||||||
return expect(inline.html(html, options)).to.eventually.have.property('files')
|
|
||||||
.that.is.an('array')
|
|
||||||
.that.contains(filename);
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
it('preserve self closing tags', () => {
|
|
||||||
var html = '<br/>';
|
|
||||||
return expect(inline.html(html)).to.eventually.equal(html);
|
|
||||||
});
|
|
||||||
it('preserve partials', () => {
|
|
||||||
var html = '{{> partial}}';
|
|
||||||
return expect(inline.html(html)).to.eventually.equal(html);
|
|
||||||
});
|
|
||||||
it('preserve helpers', () => {
|
|
||||||
var html = '{{helper}}';
|
|
||||||
return expect(inline.html(html)).to.eventually.equal(html);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('ignore css url remote paths', () => {
|
|
||||||
var html = `<style> div { background-image: url('http://test.com/file.txt?query=string#hash'); }</style>`;
|
|
||||||
return expect(inline.html(html)).to.eventually.equal(html);
|
|
||||||
});
|
|
||||||
it('ignore img src remote paths', () => {
|
|
||||||
var html = `<img src="http://test.com/file.txt?query=string#hash"/>`;
|
|
||||||
return expect(inline.html(html)).to.eventually.equal(html);
|
|
||||||
});
|
|
||||||
it('ignore css url template expression paths', () => {
|
|
||||||
var html = `<style> div { background-image: url({{path}}); }</style>`;
|
|
||||||
return expect(inline.html(html)).to.eventually.equal(html);
|
|
||||||
});
|
|
||||||
it('ignore img src template expression paths', () => {
|
|
||||||
var html = `<img src="{{path}}"/>`;
|
|
||||||
return expect(inline.html(html)).to.eventually.equal(html);
|
|
||||||
});
|
|
||||||
it('ignore query strings and hashes on local paths', () => {
|
|
||||||
var filename = path.resolve(__dirname, 'fixtures/file.txt');
|
|
||||||
var url = `${filename}?query=string#hash`;
|
|
||||||
var uri = datauri(filename);
|
|
||||||
var html = (source) => `<style> div { background-image: url('${source}'); }</style>`;
|
|
||||||
return expect(inline.html(html(url))).to.eventually.equal(html(uri));
|
|
||||||
});
|
|
||||||
it('handle assets with a space in their filename', () => {
|
|
||||||
var filename = path.resolve(__dirname, 'fixtures/file space.txt');
|
|
||||||
var uri = datauri(filename);
|
|
||||||
var html = (source) => `<style> div { background-image: url('${source}'); }</style>`;
|
|
||||||
return expect(inline.html(html(filename))).to.eventually.equal(html(uri));
|
|
||||||
});
|
|
||||||
|
|
||||||
// Error handling
|
|
||||||
// inline-img
|
|
||||||
it('throw error when html image source invalid', () => {
|
|
||||||
return co(function * () {
|
|
||||||
var filename = path.resolve(__dirname, 'index.html');
|
|
||||||
var source = 'missing.png';
|
|
||||||
var html = `<img src="${source}" >`;
|
|
||||||
var resolvedSource = path.resolve(path.dirname(filename), source);
|
|
||||||
try {
|
|
||||||
yield inline.html(html, {filename});
|
|
||||||
throw new Error('No error thrown');
|
|
||||||
}
|
|
||||||
catch (error) {
|
|
||||||
expect(error).to.have.property('filename').that.equals(filename);
|
|
||||||
expect(error).to.have.property('files').that.contains(resolvedSource);
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
});
|
it('inline local url in style attribute', () => {
|
||||||
it('image: include all sources in error.files up until and including invalid source', () => {
|
var filename = path.resolve(__dirname, 'fixtures/file.txt');
|
||||||
return co(function * () {
|
var html = `<div style="background-image: url('${filename}');"></div>`;
|
||||||
var filename = path.resolve(__dirname, 'index.html');
|
return expect(inline.html(html)).to.eventually.match(/data:.*,.*/);
|
||||||
var valid = 'fixtures/file.txt';
|
|
||||||
var invalid = 'missing.png';
|
|
||||||
var resolvedInvalid = path.resolve(path.dirname(filename), invalid);
|
|
||||||
var resolvedValid = path.resolve(path.dirname(filename), valid);
|
|
||||||
var html = `
|
|
||||||
<img src="${valid}" >
|
|
||||||
<img src="${invalid}" >
|
|
||||||
`;
|
|
||||||
try {
|
|
||||||
yield inline.html(html, {filename});
|
|
||||||
throw new Error('No error thrown');
|
|
||||||
}
|
|
||||||
catch (error) {
|
|
||||||
expect(error).to.have.property('filename').that.equals(filename);
|
|
||||||
expect(error).to.have.property('files').that.contains(resolvedValid);
|
|
||||||
expect(error).to.have.property('files').that.contains(resolvedInvalid);
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
});
|
it('ignore remote url', () => {
|
||||||
// inline-style
|
var html = `<style> div { background-image: url('http://test.com/file.txt?query=string#hash'); }</style>`;
|
||||||
it('throw error when style element syntax invalid', () => {
|
return expect(inline.html(html)).to.eventually.equal(html);
|
||||||
return co(function * () {
|
});
|
||||||
|
it('ignore template expression url', () => {
|
||||||
|
var html = `<style> div { background-image: url({{path}}); }</style>`;
|
||||||
|
return expect(inline.html(html)).to.eventually.equal(html);
|
||||||
|
});
|
||||||
|
it('ignore url query strings and hashes', () => {
|
||||||
|
var filename = path.resolve(__dirname, 'fixtures/file.txt');
|
||||||
|
var url = `${filename}?query=string#hash`;
|
||||||
|
var uri = datauri(filename);
|
||||||
|
var html = (source) => `<style> div { background-image: url('${source}'); }</style>`;
|
||||||
|
return expect(inline.html(html(url))).to.eventually.equal(html(uri));
|
||||||
|
});
|
||||||
|
it('handle url with spaces', () => {
|
||||||
|
var filename = path.resolve(__dirname, 'fixtures/file space.txt');
|
||||||
|
var uri = datauri(filename);
|
||||||
|
var html = (source) => `<style> div { background-image: url('${source}'); }</style>`;
|
||||||
|
return expect(inline.html(html(filename))).to.eventually.equal(html(uri));
|
||||||
|
});
|
||||||
|
it('throw when syntax invalid in style element', () => co(function * () {
|
||||||
var filename = path.resolve(__dirname, 'index.html');
|
var filename = path.resolve(__dirname, 'index.html');
|
||||||
var html = `<style>div {</style>`;
|
var html = `<style>div {</style>`;
|
||||||
try {
|
try {
|
||||||
@@ -238,10 +171,20 @@ describe('inline-html', () => {
|
|||||||
expect(error).to.have.property('filename').that.equals(filename);
|
expect(error).to.have.property('filename').that.equals(filename);
|
||||||
expect(error).to.have.property('files').that.contains(filename);
|
expect(error).to.have.property('files').that.contains(filename);
|
||||||
}
|
}
|
||||||
});
|
}));
|
||||||
});
|
it('throw when syntax invalid in style attribute', () => co(function * () {
|
||||||
it('throw error when html style url invalid', () => {
|
var filename = path.resolve(__dirname, 'index.html');
|
||||||
return co(function * () {
|
var html = `<div style="background url()"></div>`;
|
||||||
|
try {
|
||||||
|
yield inline.html(html, {filename});
|
||||||
|
throw new Error('No error thrown');
|
||||||
|
}
|
||||||
|
catch (error) {
|
||||||
|
expect(error).to.have.property('filename').that.equals(filename);
|
||||||
|
expect(error).to.have.property('files').that.contains(filename);
|
||||||
|
}
|
||||||
|
}));
|
||||||
|
it('throw when url invalid in style element', () => co(function * () {
|
||||||
var filename = path.resolve(__dirname, 'index.html');
|
var filename = path.resolve(__dirname, 'index.html');
|
||||||
var url = 'missing.png';
|
var url = 'missing.png';
|
||||||
var resolvedUrl = path.resolve(path.dirname(filename), url);
|
var resolvedUrl = path.resolve(path.dirname(filename), url);
|
||||||
@@ -254,24 +197,8 @@ describe('inline-html', () => {
|
|||||||
expect(error).to.have.property('filename').that.equals(filename);
|
expect(error).to.have.property('filename').that.equals(filename);
|
||||||
expect(error).to.have.property('files').that.contains(resolvedUrl);
|
expect(error).to.have.property('files').that.contains(resolvedUrl);
|
||||||
}
|
}
|
||||||
});
|
}));
|
||||||
});
|
it('throw when url invalid in style attribute ', () => co(function * () {
|
||||||
it('throw error when style attribute syntax invalid', () => {
|
|
||||||
return co(function * () {
|
|
||||||
var filename = path.resolve(__dirname, 'index.html');
|
|
||||||
var html = `<div style="background url()"></div>`;
|
|
||||||
try {
|
|
||||||
yield inline.html(html, {filename});
|
|
||||||
throw new Error('No error thrown');
|
|
||||||
}
|
|
||||||
catch (error) {
|
|
||||||
expect(error).to.have.property('filename').that.equals(filename);
|
|
||||||
expect(error).to.have.property('files').that.contains(filename);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
it('throw error when html style attribute url invalid', () => {
|
|
||||||
return co(function * () {
|
|
||||||
var filename = path.resolve(__dirname, 'index.html');
|
var filename = path.resolve(__dirname, 'index.html');
|
||||||
var url = 'missing.png';
|
var url = 'missing.png';
|
||||||
var resolvedUrl = path.resolve(path.dirname(filename), url);
|
var resolvedUrl = path.resolve(path.dirname(filename), url);
|
||||||
@@ -284,18 +211,16 @@ describe('inline-html', () => {
|
|||||||
expect(error).to.have.property('filename').that.equals(filename);
|
expect(error).to.have.property('filename').that.equals(filename);
|
||||||
expect(error).to.have.property('files').that.contains(resolvedUrl);
|
expect(error).to.have.property('files').that.contains(resolvedUrl);
|
||||||
}
|
}
|
||||||
});
|
}));
|
||||||
});
|
it('include all urls in error.files up until and including invalid url in style element', () => co(function * () {
|
||||||
it('include valid and invalid paths in error.files when html style url invalid', () => {
|
|
||||||
return co(function * () {
|
|
||||||
var filename = path.resolve(__dirname, 'index.html');
|
var filename = path.resolve(__dirname, 'index.html');
|
||||||
var validUrl = 'fixtures/file.txt';
|
var validUrl = 'fixtures/file.txt';
|
||||||
var invalidUrl = 'missing.png';
|
var invalidUrl = 'missing.png';
|
||||||
var resolvedInvalidUrl = path.resolve(path.dirname(filename), invalidUrl);
|
var resolvedInvalidUrl = path.resolve(path.dirname(filename), invalidUrl);
|
||||||
var resolvedValidUrl = path.resolve(path.dirname(filename), validUrl);
|
var resolvedValidUrl = path.resolve(path.dirname(filename), validUrl);
|
||||||
var html = `
|
var html = `
|
||||||
<style>div {background-image: url("${validUrl}");}</style>
|
<style>div {background-image: url('${validUrl}');}</style>
|
||||||
<style>div { background-image: url('${invalidUrl}'); }</style>
|
<style>div {background-image: url('${invalidUrl}');}</style>
|
||||||
`;
|
`;
|
||||||
try {
|
try {
|
||||||
yield inline.html(html, {filename});
|
yield inline.html(html, {filename});
|
||||||
@@ -306,10 +231,8 @@ describe('inline-html', () => {
|
|||||||
expect(error).to.have.property('files').that.contains(resolvedValidUrl);
|
expect(error).to.have.property('files').that.contains(resolvedValidUrl);
|
||||||
expect(error).to.have.property('files').that.contains(resolvedInvalidUrl);
|
expect(error).to.have.property('files').that.contains(resolvedInvalidUrl);
|
||||||
}
|
}
|
||||||
});
|
}));
|
||||||
});
|
it('include all urls in error.files up until and including invalid url in style attribute', () => co(function * () {
|
||||||
it('include valid and invalid paths in error.files when html attribute url invalid', () => {
|
|
||||||
return co(function * () {
|
|
||||||
var filename = path.resolve(__dirname, 'index.html');
|
var filename = path.resolve(__dirname, 'index.html');
|
||||||
var validUrl = 'fixtures/file.txt';
|
var validUrl = 'fixtures/file.txt';
|
||||||
var invalidUrl = 'missing.png';
|
var invalidUrl = 'missing.png';
|
||||||
@@ -328,10 +251,8 @@ describe('inline-html', () => {
|
|||||||
expect(error).to.have.property('files').that.contains(resolvedValidUrl);
|
expect(error).to.have.property('files').that.contains(resolvedValidUrl);
|
||||||
expect(error).to.have.property('files').that.contains(resolvedInvalidUrl);
|
expect(error).to.have.property('files').that.contains(resolvedInvalidUrl);
|
||||||
}
|
}
|
||||||
});
|
}));
|
||||||
});
|
it('include all urls in error.files up until and including invalid url when style element valid and style attribute invalid', () => co(function * () {
|
||||||
it('include valid and invalid paths in error.files when style element valid and html attribute invalid', () => {
|
|
||||||
return co(function * () {
|
|
||||||
var filename = path.resolve(__dirname, 'index.html');
|
var filename = path.resolve(__dirname, 'index.html');
|
||||||
var validUrl = 'fixtures/file.txt';
|
var validUrl = 'fixtures/file.txt';
|
||||||
var invalidUrl = 'missing.png';
|
var invalidUrl = 'missing.png';
|
||||||
@@ -350,11 +271,72 @@ describe('inline-html', () => {
|
|||||||
expect(error).to.have.property('files').that.contains(resolvedValidUrl);
|
expect(error).to.have.property('files').that.contains(resolvedValidUrl);
|
||||||
expect(error).to.have.property('files').that.contains(resolvedInvalidUrl);
|
expect(error).to.have.property('files').that.contains(resolvedInvalidUrl);
|
||||||
}
|
}
|
||||||
});
|
}));
|
||||||
});
|
});
|
||||||
// inline-link-less
|
|
||||||
it('throw error when link href invalid', () => {
|
describe('img', () => {
|
||||||
return co(function * () {
|
it('inline img src', () => {
|
||||||
|
var filename = path.resolve(__dirname, 'fixtures/file.txt');
|
||||||
|
var html = `<img src="${filename}"/>`;
|
||||||
|
return expect(inline.html(html)).to.eventually.match(/data:.*,.*/);
|
||||||
|
});
|
||||||
|
it('ignore img src remote paths', () => {
|
||||||
|
var html = `<img src="http://test.com/file.txt?query=string#hash"/>`;
|
||||||
|
return expect(inline.html(html)).to.eventually.equal(html);
|
||||||
|
});
|
||||||
|
it('ignore img src template expression paths', () => {
|
||||||
|
var html = `<img src="{{path}}"/>`;
|
||||||
|
return expect(inline.html(html)).to.eventually.equal(html);
|
||||||
|
});
|
||||||
|
it('throw when src invalid', () => co(function * () {
|
||||||
|
var filename = path.resolve(__dirname, 'index.html');
|
||||||
|
var source = 'missing.png';
|
||||||
|
var html = `<img src="${source}" >`;
|
||||||
|
var resolvedSource = path.resolve(path.dirname(filename), source);
|
||||||
|
try {
|
||||||
|
yield inline.html(html, {filename});
|
||||||
|
throw new Error('No error thrown');
|
||||||
|
}
|
||||||
|
catch (error) {
|
||||||
|
expect(error).to.have.property('filename').that.equals(filename);
|
||||||
|
expect(error).to.have.property('files').that.contains(resolvedSource);
|
||||||
|
}
|
||||||
|
}));
|
||||||
|
it('include all sources in error.files up until and including invalid source', () => co(function * () {
|
||||||
|
var filename = path.resolve(__dirname, 'index.html');
|
||||||
|
var valid = 'fixtures/file.txt';
|
||||||
|
var invalid = 'missing.png';
|
||||||
|
var resolvedInvalid = path.resolve(path.dirname(filename), invalid);
|
||||||
|
var resolvedValid = path.resolve(path.dirname(filename), valid);
|
||||||
|
var html = `
|
||||||
|
<img src="${valid}">
|
||||||
|
<img src="${invalid}">
|
||||||
|
`;
|
||||||
|
try {
|
||||||
|
yield inline.html(html, {filename});
|
||||||
|
throw new Error('No error thrown');
|
||||||
|
}
|
||||||
|
catch (error) {
|
||||||
|
expect(error).to.have.property('filename').that.equals(filename);
|
||||||
|
expect(error).to.have.property('files').that.contains(resolvedValid);
|
||||||
|
expect(error).to.have.property('files').that.contains(resolvedInvalid);
|
||||||
|
}
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('link-less', () => {
|
||||||
|
it('inline link less', () => {
|
||||||
|
var filename = path.resolve(__dirname, 'fixtures/basic.less');
|
||||||
|
var html = `<link rel="stylesheet/less" href="${filename}"/>`;
|
||||||
|
return expect(inline.html(html)).to.eventually.match(/<style>[^]*<\/style>/);
|
||||||
|
});
|
||||||
|
it('inline link less imports', () => {
|
||||||
|
var filename = path.resolve(__dirname, 'fixtures/import.less');
|
||||||
|
var html = `<link rel="stylesheet/less" href="${filename}"/>`;
|
||||||
|
return expect(inline.html(html)).to.eventually.match(/<style>[^]*<\/style>/)
|
||||||
|
.and.not.match(/@import/);
|
||||||
|
});
|
||||||
|
it('throw error when link href invalid', () => co(function * () {
|
||||||
var filename = path.resolve(__dirname, 'index.html');
|
var filename = path.resolve(__dirname, 'index.html');
|
||||||
var href = 'missing.less';
|
var href = 'missing.less';
|
||||||
var resolvedHref = path.resolve(path.dirname(filename), href);
|
var resolvedHref = path.resolve(path.dirname(filename), href);
|
||||||
@@ -367,10 +349,8 @@ describe('inline-html', () => {
|
|||||||
expect(error).to.have.property('filename').that.equals(filename);
|
expect(error).to.have.property('filename').that.equals(filename);
|
||||||
expect(error).to.have.property('files').that.contains(resolvedHref);
|
expect(error).to.have.property('files').that.contains(resolvedHref);
|
||||||
}
|
}
|
||||||
});
|
}));
|
||||||
});
|
it('throw error when less import invalid', () => co(function * () {
|
||||||
it('throw error when less import invalid', () => {
|
|
||||||
return co(function * () {
|
|
||||||
var filename = path.resolve(__dirname, 'fixtures/index.html');
|
var filename = path.resolve(__dirname, 'fixtures/index.html');
|
||||||
var lessBasename = 'invalidImport.less';
|
var lessBasename = 'invalidImport.less';
|
||||||
var lessFilename = path.resolve(path.dirname(filename), lessBasename);
|
var lessFilename = path.resolve(path.dirname(filename), lessBasename);
|
||||||
@@ -383,10 +363,8 @@ describe('inline-html', () => {
|
|||||||
expect(error).to.have.property('filename').that.equals(lessFilename);
|
expect(error).to.have.property('filename').that.equals(lessFilename);
|
||||||
expect(error).to.have.property('files').that.contains(lessFilename);
|
expect(error).to.have.property('files').that.contains(lessFilename);
|
||||||
}
|
}
|
||||||
});
|
}));
|
||||||
});
|
it('throw error when less syntax invalid', () => co(function * () {
|
||||||
it('throw error when less syntax invalid', () => {
|
|
||||||
return co(function * () {
|
|
||||||
var filename = path.resolve(__dirname, 'fixtures/index.html');
|
var filename = path.resolve(__dirname, 'fixtures/index.html');
|
||||||
var lessBasename = 'invalidSyntax.less';
|
var lessBasename = 'invalidSyntax.less';
|
||||||
var lessFilename = path.resolve(path.dirname(filename), lessBasename);
|
var lessFilename = path.resolve(path.dirname(filename), lessBasename);
|
||||||
@@ -399,10 +377,8 @@ describe('inline-html', () => {
|
|||||||
expect(error).to.have.property('filename').that.equals(lessFilename);
|
expect(error).to.have.property('filename').that.equals(lessFilename);
|
||||||
expect(error).to.have.property('files').that.contains(lessFilename);
|
expect(error).to.have.property('files').that.contains(lessFilename);
|
||||||
}
|
}
|
||||||
});
|
}));
|
||||||
});
|
it('throw error when less url invalid', () => co(function * () {
|
||||||
it('throw error when less url invalid', () => {
|
|
||||||
return co(function * () {
|
|
||||||
var filename = path.resolve(__dirname, 'fixtures/index.html');
|
var filename = path.resolve(__dirname, 'fixtures/index.html');
|
||||||
var lessBasename = 'invalidUrl.less';
|
var lessBasename = 'invalidUrl.less';
|
||||||
var badUrl = path.resolve(path.dirname(filename), 'missing.png');
|
var badUrl = path.resolve(path.dirname(filename), 'missing.png');
|
||||||
@@ -417,6 +393,60 @@ describe('inline-html', () => {
|
|||||||
expect(error).to.have.property('filename').that.equals(filename);
|
expect(error).to.have.property('filename').that.equals(filename);
|
||||||
expect(error).to.have.property('files').that.contains(badUrl);
|
expect(error).to.have.property('files').that.contains(badUrl);
|
||||||
}
|
}
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('script', () => {
|
||||||
|
it('inline local src', () => {
|
||||||
|
var source = path.resolve(__dirname, 'fixtures/file.txt');
|
||||||
|
var html = `<script src="${source}"></script>`;
|
||||||
|
var contents = fs.readFileSync(source, 'utf8');
|
||||||
|
return expect(inline.html(html)).to.eventually.equal(`<script>${contents}</script>`);
|
||||||
|
});
|
||||||
|
it('ignore remote src', () => {
|
||||||
|
var html = `<script src="http://test.com/file.txt?query=string#hash"/>`;
|
||||||
|
return expect(inline.html(html)).to.eventually.equal(html);
|
||||||
|
});
|
||||||
|
it('ignore template expression src', () => {
|
||||||
|
var html = `<script src="{{path}}"/>`;
|
||||||
|
return expect(inline.html(html)).to.eventually.equal(html);
|
||||||
|
});
|
||||||
|
it('throw when source invalid', () => co(function * () {
|
||||||
|
var filename = path.resolve(__dirname, 'index.html');
|
||||||
|
var source = 'missing.js';
|
||||||
|
var html = `<script src="${source}"></script>`;
|
||||||
|
var resolvedSource = path.resolve(path.dirname(filename), source);
|
||||||
|
try {
|
||||||
|
yield inline.html(html, {filename});
|
||||||
|
throw new Error('No error thrown');
|
||||||
|
}
|
||||||
|
catch (error) {
|
||||||
|
expect(error).to.have.property('filename').that.equals(filename);
|
||||||
|
expect(error).to.have.property('files').that.contains(resolvedSource);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
);
|
||||||
|
it('include all sources in error.files up until and including invalid source', () => {
|
||||||
|
return co(function * () {
|
||||||
|
var filename = path.resolve(__dirname, 'index.html');
|
||||||
|
var valid = 'fixtures/file.txt';
|
||||||
|
var invalid = 'missing.js';
|
||||||
|
var resolvedInvalid = path.resolve(path.dirname(filename), invalid);
|
||||||
|
var resolvedValid = path.resolve(path.dirname(filename), valid);
|
||||||
|
var html = `
|
||||||
|
<script src="${valid}"></script>
|
||||||
|
<script src="${invalid}"></script>
|
||||||
|
`;
|
||||||
|
try {
|
||||||
|
yield inline.html(html, {filename});
|
||||||
|
throw new Error('No error thrown');
|
||||||
|
}
|
||||||
|
catch (error) {
|
||||||
|
expect(error).to.have.property('filename').that.equals(filename);
|
||||||
|
expect(error).to.have.property('files').that.contains(resolvedValid);
|
||||||
|
expect(error).to.have.property('files').that.contains(resolvedInvalid);
|
||||||
|
}
|
||||||
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user