From d919e535eff6ce09059f4e9eea5b57819a2c4aee Mon Sep 17 00:00:00 2001 From: Alexandre Gigliotti Date: Tue, 1 Dec 2015 09:20:24 -0800 Subject: [PATCH] Add support for script elements. Update tests. Update docs. --- README.md | 12 ++ lib/index.js | 9 +- lib/script.js | 36 ++++ test/index.js | 452 +++++++++++++++++++++++++++----------------------- 4 files changed, 296 insertions(+), 213 deletions(-) create mode 100644 lib/script.js diff --git a/README.md b/README.md index d496d1f..5dbb843 100644 --- a/README.md +++ b/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: +- Scripts - The source path is read and inlined. + - Images - The source path is replaced with a datauri. - Linked LESS stylesheets - The LESS is compiled and the result is inlined within a `
@@ -50,6 +59,9 @@ co(function * () { html = yield inline.html(html); console.log(html); /** + `; + return expect(inline.html(html(url))).to.eventually.equal(html(uri)); }); - it('inline link less imports', () => { - var filename = path.resolve(__dirname, 'fixtures/import.less'); - var html = ``; - return expect(inline.html(html)).to.eventually.match(/`; + 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'); - var html = ``; - return expect(inline.html(html)).to.eventually.match(/data:.*,.*/); + + 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) => ``; + return expect(inline.html(html(url))).to.eventually.equal(html(uri)); }); - it('inline css url path in element style attribute', () => { - var filename = path.resolve(__dirname, 'fixtures/file.txt'); - var html = `
`; - return expect(inline.html(html)).to.eventually.match(/data:.*,.*/); + 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) => ``; + 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 html = ``; - 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 = ``; + 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', () => { - 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) => ``; - 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) => ``; - 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) => ``; - 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) => ``; - 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 = ``; - 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 = ``; - 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 = '
'; - 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 = ``; - return expect(inline.html(html)).to.eventually.equal(html); - }); - it('ignore img src remote paths', () => { - var html = ``; - return expect(inline.html(html)).to.eventually.equal(html); - }); - it('ignore css url template expression paths', () => { - var html = ``; - return expect(inline.html(html)).to.eventually.equal(html); - }); - it('ignore img src template expression paths', () => { - var html = ``; - 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) => ``; - 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) => ``; - 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 = ``; - 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); - } + describe('css-url', () => { + it('inline local url in style element', () => { + var filename = path.resolve(__dirname, 'fixtures/file.txt'); + var html = ``; + return expect(inline.html(html)).to.eventually.match(/data:.*,.*/); }); - }); - it('image: 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.png'; - var resolvedInvalid = path.resolve(path.dirname(filename), invalid); - var resolvedValid = path.resolve(path.dirname(filename), valid); - var html = ` - - - `; - 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('inline local url in style attribute', () => { + var filename = path.resolve(__dirname, 'fixtures/file.txt'); + var html = `
`; + return expect(inline.html(html)).to.eventually.match(/data:.*,.*/); }); - }); - // inline-style - it('throw error when style element syntax invalid', () => { - return co(function * () { + it('ignore remote url', () => { + var html = ``; + return expect(inline.html(html)).to.eventually.equal(html); + }); + it('ignore template expression url', () => { + var html = ``; + 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) => ``; + 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) => ``; + 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 html = ``; try { @@ -238,10 +171,20 @@ describe('inline-html', () => { expect(error).to.have.property('filename').that.equals(filename); expect(error).to.have.property('files').that.contains(filename); } - }); - }); - it('throw error when html style url invalid', () => { - return co(function * () { + })); + it('throw when syntax invalid in style attribute', () => co(function * () { + var filename = path.resolve(__dirname, 'index.html'); + var html = `
`; + 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 url = 'missing.png'; 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('files').that.contains(resolvedUrl); } - }); - }); - it('throw error when style attribute syntax invalid', () => { - return co(function * () { - var filename = path.resolve(__dirname, 'index.html'); - var html = `
`; - 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 * () { + })); + it('throw when url invalid in style attribute ', () => co(function * () { var filename = path.resolve(__dirname, 'index.html'); var url = 'missing.png'; 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('files').that.contains(resolvedUrl); } - }); - }); - it('include valid and invalid paths in error.files when html style url invalid', () => { - return co(function * () { + })); + it('include all urls in error.files up until and including invalid url in style element', () => co(function * () { var filename = path.resolve(__dirname, 'index.html'); var validUrl = 'fixtures/file.txt'; var invalidUrl = 'missing.png'; var resolvedInvalidUrl = path.resolve(path.dirname(filename), invalidUrl); var resolvedValidUrl = path.resolve(path.dirname(filename), validUrl); var html = ` - - + + `; try { 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(resolvedInvalidUrl); } - }); - }); - it('include valid and invalid paths in error.files when html attribute url invalid', () => { - return co(function * () { + })); + it('include all urls in error.files up until and including invalid url in style attribute', () => co(function * () { var filename = path.resolve(__dirname, 'index.html'); var validUrl = 'fixtures/file.txt'; 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(resolvedInvalidUrl); } - }); - }); - it('include valid and invalid paths in error.files when style element valid and html attribute invalid', () => { - return co(function * () { + })); + it('include all urls in error.files up until and including invalid url when style element valid and style attribute invalid', () => co(function * () { var filename = path.resolve(__dirname, 'index.html'); var validUrl = 'fixtures/file.txt'; 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(resolvedInvalidUrl); } - }); + })); }); - // inline-link-less - it('throw error when link href invalid', () => { - return co(function * () { + + describe('img', () => { + it('inline img src', () => { + var filename = path.resolve(__dirname, 'fixtures/file.txt'); + var html = ``; + return expect(inline.html(html)).to.eventually.match(/data:.*,.*/); + }); + it('ignore img src remote paths', () => { + var html = ``; + return expect(inline.html(html)).to.eventually.equal(html); + }); + it('ignore img src template expression paths', () => { + var html = ``; + 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 = ``; + 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 = ` + + + `; + 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 = ``; + return expect(inline.html(html)).to.eventually.match(/