inline-source
Advanced tools
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 to false. Default 'inline')compress: enable/disable compression of inlined content (default true)fs: specify fs implementation (default is Node core 'fs')handlers: specify custom handlers (default []) [see custom handlers]ignore: disable inlining based on tag, type, and/or format (default [])pretty: maintain leading whitespace when options.compress is false (default false)rootpath: directory path used for resolving inlineable paths (default process.cwd())saveRemote: enable/disable saving a local copy of remote sources (default true)swallowErrors: enable/disable suppression of errors (default false)svgAsImage: convert <img inline src="*.svg" /> to <img> and not <svg> (default false)$ 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 upon
attributes: the parsed tag attributes objectcompress: the compress flag (may be overriden at the tag level via props)content: the processed fileContent stringextension: 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 wrapped content string to replace matchtag: the tag string (script, link, etc)type: the content type based on type mime-type attribute, or tag (js for application/javascript, css for text/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 of source objectsCustom 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();
};
FAQs
Inline all flagged js, css, image source files
We found that inline-source demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.