Inline and compress tags that contain the inline attribute. Supports <script>, <link>, and <img> (including *.svg sources) tags by default, and is easily extensible to handle others.
NOTE: since version 6, the API is now Promise based, and compatible with async/await, requiring a minimum Node version of 7.6
You can use inline-source-cli to run
inline-sourcefrom the command line or NPM Scripts.
inlineSource(htmlpath, [options]): Promise<string>: parse htmlpath content for tags containing an inline attribute, and replace with (optionally compressed) file contents.
htmlpath can be either a filepath or a string of html content.
Available options include:
attribute: attribute used to parse sources (all tags will be parsed if set tofalse. Default'inline')compress: enable/disable compression of inlined content (defaulttrue)fs: specifyfsimplementation (default is Node core'fs')handlers: specify custom handlers (default[]) [see custom handlers]ignore: disable inlining based ontag,type, and/orformat(default[])pretty: maintain leading whitespace whenoptions.compressisfalse(defaultfalse)rootpath: directory path used for resolving inlineable paths (defaultprocess.cwd())saveRemote: enable/disable saving a local copy of remote sources (defaulttrue)swallowErrors: enable/disable suppression of errors (defaultfalse)svgAsImage: convert<img inline src="*.svg" />to<img>and not<svg>(defaultfalse)
$ npm install inline-source<!-- located at project/src/html/index.html -->
<!DOCTYPE html>
<html>
<head>
<!-- inline project/www/css/inlineStyle.css as <style> -->
<link inline href="css/inlineStyle.css">
<!-- inline project/src/js/inlineScript.js as <script> -->
<script inline src="../src/js/inlineScript.js"></script>
<!-- inline remote file as <script> -->
<script inline src="http://js/inlineScript.js"></script>
<!-- inline project/www/images/inlineImage.png as base64 <img> -->
<img inline src="images/inlineImage.png" />
<!-- inline project/www/images/inlineImage.svg as <svg> -->
<img inline src="images/inlineImage.svg" />
</head>
</html>const { inlineSource } = require('inline-source');
const fs = require('fs');
const path = require('path');
const htmlpath = path.resolve('project/src/html/index.html');
inlineSource(htmlpath, {
compress: true,
rootpath: path.resolve('www'),
// Skip all css types and png formats
ignore: ['css', 'png']
}).then(html => {
// Do something with html
}).catch(err => {
// Handle error
});...or preferably using async/await:
const { inlineSource } = require('inline-source');
const fs = require('fs');
const path = require('path');
const htmlpath = path.resolve('project/src/html/index.html');
let html;
try {
html = await inlineSource(htmlpath, {
compress: true,
rootpath: path.resolve('www'),
// Skip all css types and png formats
ignore: ['css', 'png']
});
// Do something with html
} catch(err) {
// Handle error
}Custom handlers are simple middleware-type functions that enable you to provide new, or override existing, inlining behaviour. All handlers have the following signature: (source, context) => Promise
-
source: the current source object to act uponattributes: the parsed tag attributes objectcompress: the compress flag (may be overriden at the tag level via props)content: the processedfileContentstringextension: the file extensionfileContent: the loaded file content stringfilepath: the fully qualified path stringformat: the format string (jpg,gif,svg+xml, etc)match: the matched html tag string, including closing tag if appropriateprops: the parsed namespaced attributes object (see props)replace: the tag wrappedcontentstring to replacematchtag: the tag string (script,link, etc)type: the content type based ontypemime-type attribute, ortag(jsforapplication/javascript,cssfortext/css, etc)
-
context: the global context object storing all configuration options (attribute,compress,ignore,pretty,rootpath,swallowErrors,svgAsImage), in addtion to:html: the html file's content stringhtmlpath: the html file's path stringsources: the array ofsourceobjects
Custom handlers are inserted before the defaults, enabling overriding of default behaviour:
module.exports = function customjs(source, context) {
if (source.fileContent && !source.content && source.type == 'js') {
source.content = "Hey! I'm overriding the file's content!";
}
return Promise.resolve();
};In general, default file content processing will be skipped if source.content is already set, and default wrapping of processed content will be skipped if source.replace is already set.
Source props are a subset of attributes that are namespaced with the current global attribute ('inline' by default), and allow declaratively passing data or settings to handlers:
<script inline inline-foo="foo" inline-compress="false" src="../src/js/inlineScript.js"></script>module.exports = function customjs(source, context) {
if (source.fileContent && !source.content && source.type == 'js') {
// The `inline-compress` attribute automatically overrides the global flag
if (!source.compress) {
// do something
}
if (source.props.foo == 'foo') {
// foo content
}
}
return Promise.resolve();
};