npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

inline-resource

v0.1.7

Published

Inline image/css/js/html etc. what you wanna inline resource

Downloads

15

Readme

inline-resource

Build Status Dependency Status devDependency Status NPM Version Coverage Status

A node utility to inline everything you want to inline, including image, css, html, etc.

Features

  • Support inline image referred by img html element or css url using base64 data-uri

  • Support inline svg files referred by css or html using svg source file or base64 data-uri

  • Support inline font files using base64 data-uri

  • Support inline css file referred by link element or @import rule

  • Support inline html file referred by link element

  • Support inline js file referred by script element or document.write statement

  • Support custom inline method using __inline(path) in script or html

  • The script and style element content defined in html can also be processed

  • The inline is processed recursively and support inline all local assets into a single file or specify which asset need to been processed inline

  • The inline file support compress option

  • You can custom your inline processor or inline task if existed cannot satisfy

How to use

Install

npm install inline-resource --save

A simple example

var inliner = require('inline-resource');
var result = inliner.inline({
    inlineAll: true,
    files: ['index.html'],
    svg: {
        useSource: true
    }
});

Using with web server

  • edp webserver

    {
        location: /\.js($|\?)/,
        handler: [
            file(),
            function (context) {
                var req = context.request;
                var path = req.pathname.replace(/^\/+/, '');
                var result = inliner.inline({
                    files: [{path: path, data: context.content}],
                    inlinePathResolver: function (path) {
                        return {path: path.replace(/\{\$course_host\}\//, ''), dir: '.'};
                    }
                });
                context.content = result[0].data;
            }
        ]
    },
    {
        location: /\.php/,
        handler: [
            php('php-cgi'),
            function (context) {
                var req = context.request;
                var path = req.pathname.replace(/^\/+/, '');
                var result = inliner.inline({
                    files: [{path: path, data: context.content}],
                    processor: {php: 'html'},
                    img: false,
                    css: false,
                    html: false,
                    inlinePathResolver: function (path) {
                        var url = require('url').parse(path, true);
                        var newPath = url.pathname.replace(/^\/+/, '') + url.search;
                        return {path: newPath, dir: '.'};
                    }
                });
                context.content = result[0].data;
            }
        ]
    },

Options

  • root - string optional the root directory to process, by defautl using current working directory

  • output - string optional the output directory, by default, none will output

  • files - Array the file to been processed inline, the file pattern using minimatch, the regexp or file object is supported, the file object structure: {data: string, path: string}, the path is relative to root

  • fileMap - Object optional the all read-ahead file collection, the key is path relative to root, the value is file data

  • processor - Object optional custom the processor type using, e.g., {mustache: 'html'}

  • inlinePathResolver - Function optional resolve the inline file path

    inlinePathResolver: function (path, file) {
        var path = path.replace(/{%site_host%}\//, '');
          
        return path;
        // var dir;
        // if (/\W+views\//.test(file.path)) {
        //     dir = 'example';
        // }
        // you can specify the directory that the path relative to
        // return {path: path, dir: dir};
    }
  • inlineAll - boolean optional whether inline all local resources referred by the processed file, by default false, specify which resource need to be inline manually using url inline query param. Notice if setting true, you should manuall specify which resource type you want to inline all using the following resource type option, e.g., setting css: true or css: {/*options*/}, it will inline all css files.

  • inlineParamName - string optional by default _inline, specify the inline resource like:

    <img src="a/b.jpg?_inline">
      
    <!-- the value of the inline param can used to specify the relative directory of the inline path --> 
    <img src="a/b.jpg?_inline=example">
  • ignoreCompressFiles - Array<string|RegExp> optional the files to been ignored when enable compress option

  • img - boolean|Object optional whether enable image inline process using base64 encode, by default true if inlineAll is not true

    img: {
        // the image file size less than or equal 1024 byte will be inlined
        limit: 1024
    }
  • font - boolean|Object optional whether enable font inline process using base64 encode, by default true if inlineAll is not true

    font: {
        // the font file file size less than or equal 1024 byte will be inlined
        limit: 1024
    }
  • svg - boolean|Object optional whether enable svg inline process using base64 encode or svg source, by default true if inlineAll is not true

    svg: {
        // by default, using base64 encode
        useSource: false, 
          
        // the svg file size less than or equal 1024 byte will be inlined
        limit: 1024
          
        // whether compress svg source file when inline svg source, by default false
        // if enabled, please make sure `svgo@^1.0.0` is installed in global or working dir
        compress: false 
    }
  • css - boolean|Object optional whether enable css inline process, by default true if inlineAll is not true

    css: {
        // whether rebase the file path referred by inline css file, by default false
        rebase: false, 
        rebase: {
            absolute: true, // rebase as absolute path
            ignore: function (url, relativeFile, targetFile) { // ignore url rebase
                return false;
            }
        },
        rebase: function (url, relativeFile, targetFile) { // custom rebase logic
            var isLocalPath = this.isLocal(url);
            var absPath = this.resolve(url, relativeFile);
            var rebasePath = this.rebase(url, relativeFile, targetFile);
            return url;
        }
          
        // whether compress css source file, by default false
        // if enabled, please make sure `clean-css@4` is installed in global or working dir
        compress: false 
    }
  • js - boolean|Object optional whether enable js inline process, by default true if inlineAll is not true

    js: {
        // whether using the custom inline method, by default true
        // e.g., var tpl = '__inline("./a.tpl")'; // output: var tpl = '<inline tpl content>'
        // '__inline("./a.js")' // output: <inline js file content>
        custom: false, 
          
        // whether compress js source file, by default false
        // if enabled, please make sure `uglify-js@3` is installed in global or working dir
        compress: false 
    }
  • html - boolean|Object optional whether enable html inline process, by default true if inlineAll is not true

    html: {
        // whether compress html source file, by default false
        compress: false 
    }

API

  • addInlineTaskFor(type, tasks) - add custom inline task for the specified processor type
var inliner = require('inline-resource');
inliner.addInlineTaskFor('html', function (file) {
    var me = this;
    var inlineTplRegexp = /<!--\s*inline:\s*([^\s]+)\s*-->/g;
    return file.data.replace(inlineTplRegexp, function (match, path) {
        var result = me.getInlineResult(path);
        if (result) {
            return result.data;
        }
        return match;
    });
});
  • registerInlineProcessor(type, processor) - register inline processor for custom file type
inliner.registerInlineProcessor('etpl', {
    taskList: [
        function (file) {
            var me = this;
            return file.data.replace(
                /<!--\s*include:\s*([^\s]+)\s*-->/g,
                function (match, path) {
                    var result = me.getInlineResult(path);
                    if (result) {
                        return result.data;
                    }
                    return match;
                }
            )
        }
    ],
    // if support compress option, implement it
    compress: function (file, compressOption) {
        return file.data;
    }
});