static-include

    0.1.9 • Public • Published

    static-include

    Allow a programmatic way to statically add <script>/<link>/<whatever> to your files. Or more generally, static-include compiles files based on given rules.

    Preface

    Ever feel irritated when you have to add <script>/<link> to your html files manually? Even copy and paste is annoying, isn't it? YOU LAZY PROGRAMMER! HAHA!

    We all want some programmatic way to add those tags. You might instantly think of RequireJS/WebPack... However, sometimes your projects are so tiny that RequireJS/WebPack might be too heavy. static-include might help you if this is your case.

    Table of content

    Installation

    You can install static-include globally:

    > npm install -g static-include
    

    Or just in devDependencies:

    > npm install --save-dev static-include
    

    Note that you might need to add an npm script in order to compile files.

    Usage

    > static-include [options] <dirs ...>
    

    The above command will look into all dirs recursively and compile files with .si. in their names.

    Options

    • -h, --help - show usage information
    • -w, --watch - keeps the program running and watch for further changes to compile
    • -c, --config <file> - specify the config file, default: ./siconfig.js

    siconfig.js

    This file exports an object containing these properties:

    • rules
      • An array containing all rules. Each rule is defined as mentioned below.
    • si_identifier (optional), default: /\.si\./
      • Specify a regular expression that will match with the filenames that you wish to compile.
      • By default, any file containing .si. will match.
    • si_identifier_replacement (optional), default: '.'
      • Specify what to replace the si_identifier after compiling.
      • By default, '.' will be used. Example:
        • index.si.html compiles to index.html
        • homepage.si.htm compiles to hompage.htm

    Rule

    A rule has 3 properties:

    • placeholder
    • replacement
    • values

    placeholder will be replaced by replacement with different values plugged in. In order to illustrate this better, here is an example:

    javascript_rule = {
        placeholder: '{[javascript]}',
        replacement: '<script src="{}"></script>',
        values: ['lib/jquery.min.js', 'main.js']
    }

    If this rule is applied to the following text

    abcde {[javascript]} haha
    

    The output would be

    abcde <script src="lib/jquery.min.js"></script><script src="main.js"></script> haha
    

    Examples

    Adding <script> and <link>

    • index.si.html
    <html>
        <head>
            {[css]}
        </head>
        <body>
            Welcome to my homepage.
            {[javascript]}
        </body>
    </html>
    • siconfig.js
    var Rule = require('static-include').Rule;
     
    var jsfiles = [
        'lib/jquery.js',
        'bootstrap.js'
    ];
     
    var cssfiles = [
        'css/main.css',
        'css/second.css'
    ];
     
    var jsrule = Rule.useTemplate('js').withValues(jsfiles);
    var cssrule = Rule.useTemplate('css').withValues(cssfiles);
    /* equivalent version without using template:
    var jsrule = {
        placeholder: '{[javascript]}',
        replacement: '<script src="{}"></script>',
        values: jsfiles
    };
    var cssrule = {
        placeholder: '{[css]}',
        replacement: '<link rel="stylesheet" href="{}"></link>',
        values: cssfiles
    };
    */
    module.exports = {
        rules: [jsrule, cssrule]
    };

    Here I used some predefined templates that comes with static-include.

    Now we are ready to compile!

    > static-include .
    Compiled `index.si.html` > `index.html`
    

    A new file index.html is created as expected:

    <html>
        <head>
            <link rel="stylesheet" href="css/main.css"></link><link rel="stylesheet" href="css/second.css"></link>
        </head>
        <body>
            Welcome to my homepage.
            
        <script src "lib/jquery.js"></script><script src "bootstrap.js"></script>
        </body>
    </html>

    See how handy this is? Later on if you were to add new javascript/css, you simply add them to the jsfiles/cssfiles array!

    Generate table

    We can also use static-include to generate table! Here we illustrate that rule.values could be an array of array of values.

    • members.template.html
    Members:
    <table>
      <tr>
        <td>name</td>
        <td>age</td>
      </tr>
      {[members]}
    </table>
    • siconfig.js
    /* Notice that here each element has 2 values */
    var members = [
        ['Jason', 21],
        ['Margaret', 40],
        ['Tiny', 10]
    ];
    var membersrule = {
        placeholder: '{[members]}',
        replacement: '<tr><td>{}</td><td>{}</td></tr>',
        values: members
    };
     
    module.exports = {
        rules: [membersrule],
        // notice that our html file is named "members.template.html"
        si_identifier: /\.template\./
    };

    To compile, simply run:

    > static-include .
    Compiled `members.template.html` > `members.html`
    

    members.html should look like this:

    Members:
    <table>
      <tr>
        <td>name</td>
        <td>age</td>
      </tr>
      <tr><td>Jason</td><td>21</td></tr><tr><td>Margaret</td><td>40</td></tr><tr><td>Tiny</td><td>10</td></tr>
    </table>

    Very easily we have created a table with data in it.

    Generate letters

    Some more examples! This might not be the best situation to use static-include, but still works.

    • letter.template.txt
    ::letter::
    
    • siconfig.js
    var creditors = [
      ['John', 'john@domain.com', 3000],
      ['Mary', 'mary100@domain.net', 5000],
      ['James', 'james@domain.org', 6000]
    ];
     
    var letterrule = {
      placeholder: '::letter::',
      replacement: 'Dear {}({}),\nYou owe me ${}. When are you planning to return me? \nJason (me@ycmjason.com)\n\n',
      values: creditors
    }
     
    module.exports = {
      rules: [letterrule],
      si_identifier: /\.template\./
    };

    Compile:

    > static-include .
    Compiled `letter.template.html` > `letter.html`
    

    letter.txt should look like this:

    Dear John(john@domain.com),
    You owe me $3000. When are you planning to return me? 
    Jason (me@ycmjason.com)
    
    Dear Mary(mary100@domain.net),
    You owe me $5000. When are you planning to return me? 
    Jason (me@ycmjason.com)
    
    Dear James(james@domain.org),
    You owe me $6000. When are you planning to return me? 
    Jason (me@ycmjason.com)
    
    

    Hope you get the general idea by now. :)

    Templates

    There are some common rules that most of us might want to use. To avoid typing, as demonstrated in the example, we have pre-defined some templates for you.

    How to?

    You can use a template with Rule.useTemplate([name of template]).withValues([values]). See example.

    Rule.use([name of template]) is an alias for Rule.useTemplate([name of template]). So you can simply call Rule.use('js') for the Javascript template.

    Javascript template

    • Name: javascript, alias: js
    • Default properties:
    {
         placeholder: '{[javascript]}',
         replacement: '<script src="{}"></script>'
    }
    • Definition: rule_templates/javascript.js

    CSS template

    • Name: css, alias: stylesheet
    • Default properties:
    {
         placeholder: '{[css]}',
         replacement: '<link rel="stylesheet" href="{}">'
    }
    • Definition: rule_templates/javascript.js

    Contributing

    Feel free to contribute to this project. You can add more templates/boilerplates in rule_templates/ directory.

    Tests

    You can run the test with npm test.

    License

    ISC

    Install

    npm i static-include

    DownloadsWeekly Downloads

    11

    Version

    0.1.9

    License

    ISC

    Last publish

    Collaborators

    • ycm.jason