KevinMidboe/inline-html
1
0
Fork 0
mirror of https://github.com/KevinMidboe/inline-html.git synced 2025-10-29 17:40:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added support for html being a string or filename. Added tests. Updated dependencies. Updated docs.

Browse Source
This commit is contained in:
Alexandre Gigliotti
2015-08-26 10:31:29 -07:00
parent 251431a110
commit 0bd64b1308
16 changed files with 191 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

@@ -81,7 +81,7 @@ To create the following `html` string:
---
<a name="inlineHtml"/>
### inlineHtml ( filename [, options] )
### inlineHtml ( html [, options] )
Reads an HTML file and embeds referenced local assets into the HTML.
@@ -89,8 +89,9 @@ Returns a `Promise` that is fulfilled with an `html` string or an instance of [`
__Arguments__
- `filename` - The filename of the HTML file to be inlined. Relative file paths are resolved relative to the filename directory.
- `html` - An HTML string or a filename of an HTML file to inline. Relative file paths are resolved relative to `options.filename` if a string or the filename's directory if a filename.
- `options`
- `filename` - The filename used to resolve relative paths when `html` is a string. If `html` is a string and this option is not provided, relative paths will be resolved relative to the process's current working directory.
- `less` - An object containing LESS options to pass to the less compiler. Defaults to `{}`.
- `verbose` - A boolean that determines the promises fulfillment value. Supported values are:
- `true`: An instance of [`Results`](#Results).

17
lib/index.js
View File

@@ -6,12 +6,25 @@ var inlineStyle = require('./inline-style');
var inlineImg = require('./inline-img');
var inlineLinkLess = require('./inline-link-less');
var inline = co.wrap(function * (filename, options) {
var inline = co.wrap(function * (html, options) {
options = _.defaults(options || {}, {
filename: null,
less: {},
verbose: false
});
var html = yield fs.readFile(filename, 'utf8');
var filename;
try {
filename = html;
html = yield fs.readFile(filename, 'utf8');
}
catch (error) {
if (error.code === 'ENOENT') {
filename = options.filename;
}
else {
throw error;
}
}
var files = [filename];
// Inline links

9
package.json
View File

@@ -5,7 +5,7 @@
"repository": "panosoft/inline-html",
"main": "lib/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
"test": "mocha --harmony_arrow_functions"
},
"author": "",
"license": "MIT",
@@ -17,8 +17,13 @@
"less": "^2.5.1",
"lodash": "^3.10.0",
"mz": "^2.0.0",
"postcss": "^4.1.16",
"postcss": "^5.0.0",
"postcss-url": "^4.0.0",
"string": "^3.3.0"
},
"devDependencies": {
"chai": "^3.2.0",
"chai-as-promised": "^5.1.0",
"mocha": "^2.2.5"
}
}

8
test/fixtures/assets/imported.css vendored
View File

@@ -1,8 +0,0 @@
body {
border: solid 4px green;
}
#import {
background-image: url('./person.png');
background-size: contain;
background-repeat: no-repeat;
}

BIN
test/fixtures/assets/person.png vendored
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.7 KiB

1
test/fixtures/basic.css vendored Normal file
View File

@@ -0,0 +1 @@
div { color: blue; }

1
test/fixtures/basic.less vendored Normal file
View File

@@ -0,0 +1 @@
div { color: blue; }

1
test/fixtures/css-url.html vendored Normal file
View File

@@ -0,0 +1 @@
<style>div { background-image: url("file.txt"); }</style>

1
test/fixtures/file.txt vendored Normal file
View File

@@ -0,0 +1 @@
Test.

1
test/fixtures/img.html vendored Normal file
View File

@@ -0,0 +1 @@
<img src="file.txt"/>

2
test/fixtures/import.less vendored Normal file
View File

@@ -0,0 +1,2 @@
@import 'basic.less';
@import (inline) 'basic.css';

25
test/fixtures/index.html vendored
View File

@@ -1,25 +0,0 @@
<!doctype html>
<html>
<head>
<link rel="stylesheet/less" href="main.less"/>
<style>
div {
padding-left: 2em;
}
#style {
background-image: url('./assets/person.png');
background-size: contain;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="link">Link</div>
<div id="import">Import</div>
<div id="style">Style</div>
<div id="attribute" style="background-image: url('./assets/person.png'); background-size: contain; background-repeat: no-repeat;">Attribute</div>
<img height="32px" width="32px" src="./assets/person.png"/>Image
{{> partial}}
{{helper}}
</body>
</html>

7
test/fixtures/main.less vendored
View File

@@ -1,7 +0,0 @@
@import (less) './assets/imported.css';
#link {
background-image: url('assets/person.png');
background-size: contain;
background-repeat: no-repeat;
}

168
test/index.js
View File

@@ -1,13 +1,163 @@
var inline = require('../lib');
var path = require('path');
var expect = require('chai')
.use(require('chai-as-promised'))
.expect;
var datauri = require('datauri');
var fs = require('fs');
var path = require('path');
var filepath = path.resolve(__dirname, './fixtures/index.html');
var options = {verbose: true};
describe('inlineHtml', function () {
inline(filepath, options)
.then(function (html) {
console.log(html);
fs.writeFileSync('./test.html', html);
})
.catch(console.error);
it('html: filename', function () {
var filename = path.resolve(__dirname, './fixtures/file.txt');
var content = fs.readFileSync(filename, 'utf8');
return expect(inline(filename)).to.eventually.equal(content);
});
it('html: string', function () {
var html = 'HTML';
return expect(inline(html)).to.eventually.equal(html);
});
it('inline link less', function () {
var filename = path.resolve(__dirname, 'fixtures/basic.less');
var html = `<link rel="stylesheet/less" href="${filename}"/>`;
return expect(inline(html)).to.eventually.match(/<style>[^]*<\/style>/);
});
it('inline link less imports', function () {
var filename = path.resolve(__dirname, 'fixtures/import.less');
var html = `<link rel="stylesheet/less" href="${filename}"/>`;
return expect(inline(html)).to.eventually.match(/<style>[^]*<\/style>/)
.and.not.match(/@import/);
});
it('inline css url path in style element', function () {
var filename = path.resolve(__dirname, 'fixtures/file.txt');
var html = `<style>div {background-image: url("${filename}");}</style>`;
return expect(inline(html)).to.eventually.match(/data:.*,.*/);
});
it('inline css url path in element style attribute', function () {
var filename = path.resolve(__dirname, 'fixtures/file.txt');
var html = `<div style="background-image: url('${filename}');"></div>`;
return expect(inline(html)).to.eventually.match(/data:.*,.*/);
});
it('inline img src', function () {
var filename = path.resolve(__dirname, 'fixtures/file.txt');
var html = `<img src="${filename}"/>`;
return expect(inline(html)).to.eventually.match(/data:.*,.*/);
});
it('options.verbose: return results object if true', function () {
var filename = path.resolve(__dirname, 'fixtures/file.txt');
var html = `<img src="${filename}"/>`;
var options = { verbose: true };
return expect(inline(html, options)).to.eventually.be.an('object')
.that.contains.keys(['html', 'files']);
});
it('options.verbose: return html if false', function () {
var filename = path.resolve(__dirname, 'fixtures/file.txt');
var html = `<img src="${filename}"/>`;
var options = { verbose: false };
return expect(inline(html, options)).to.eventually.be.a('string');
});
it('options.verbose: default false', function () {
var filename = path.resolve(__dirname, 'fixtures/file.txt');
var html = `<img src="${filename}"/>`;
return expect(inline(html)).to.eventually.be.a('string');
});
it('options.filename: ignored for css url path resolution if html filename', function () {
var html = 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
return expect(inline(html, options)).to.eventually.match(/"data:.*,.*"/);
});
it('options.filename: ignored for img src path resolution if html filename', function () {
var html = path.resolve(__dirname, 'fixtures/img.html'); // file contains src relative to itself
var options = { filename: __filename }; // sets filename relative to this test file
return expect(inline(html, options)).to.eventually.match(/"data:.*,.*"/);
});
it('options.filename: set basepath for css url path resolution if html string', function () {
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) => `<style>div { background-image: url('${path}'); }</style>`;
var options = { filename: filename };
return expect(inline(html(url), options)).to.eventually.equal(html(uri));
});
it('options.filename: set basepath for img src path resolution if html string', function () {
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(url), options)).to.eventually.equal(html(uri));
});
it('options.filename: default to cwd for css url path resolution if html string', function () {
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(url))).to.eventually.equal(html(uri));
});
it('options.filename: default to cwd for img src path resolution if html string', function () {
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(url))).to.eventually.equal(html(uri));
});
it('options.filename: included in results.files for img src if html string and options.verbose true', function () {
var filename = path.resolve(__dirname, 'fixtures/file.txt');
var html = `<img src="${filename}"/>`;
var options = { verbose: true };
return expect(inline(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 html string and options.verbose true', function () {
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, options)).to.eventually.have.property('files')
.that.is.an('array')
.that.contains(filename);
});
it('preserve self closing tags', function () {
var html = '<br/>';
return expect(inline(html)).to.eventually.equal(html);
});
it('preserve partials', function () {
var html = '{{> partial}}';
return expect(inline(html)).to.eventually.equal(html);
});
it('preserve helpers', function () {
var html = '{{helper}}';
return expect(inline(html)).to.eventually.equal(html);
});
it('ignore css url remote paths', function () {
var html = `<style> div { background-image: url('http://test.com/file.txt?query=string#hash'); }</style>`;
return expect(inline(html)).to.eventually.equal(html);
});
it('ignore img src remote paths', function () {
var html = `<img src="http://test.com/file.txt?query=string#hash"/>`;
return expect(inline(html)).to.eventually.equal(html);
});
it('ignore query strings and hashes on local paths', function () {
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(url))).to.eventually.equal(html(uri));
});
});

7
test/inline-css-url.js
View File

@@ -1,7 +0,0 @@
var inline = require('../lib/inline-css-url');
var fs = require('fs');
var filePath = './fixtures/assets/imported.css';
var css = fs.readFileSync(filePath, 'utf8');
var result = inline(css, filePath);
console.log(result.css);

10
test/inline-link-less.js
View File

@@ -1,10 +0,0 @@
var inline = require('../lib/inline-link-less');
var fs = require('fs');
var path = require('path');
var filepath = path.resolve(__dirname, './fixtures/index.html');
var html = fs.readFileSync(filepath, 'utf8');
inline(html, filepath, {})
.then(console.log)
.catch(console.error);