Nonlinear Performance Magnification

    @eik/client

    1.0.0-alpha.1 • Public • Published

    Eik Node Client

    The Eik Node.js client facilitates switching between local and production assets in Node.js apps based on values provided by an assets.json metafile.

    Install

    npm install @eik/client

    Basic usage

    include the client in your node apps

    const Client = require('@eik/client');

    in production mode the client will build an object pointing to production assets

    The client will read your local assets.json file and build a object based on the values found therein.

    const client = new Client();
    
    // client.js will be an object of the form:
    /* 
    [
        { type: 'module', value: 'http://<asset server>/finn/js/my-app/1.0.0/main/index.js' },
        { type: 'iife', value: 'http://<asset server>/finn/js/my-app/1.0.0/ie11/index.js' },
    ]
    */
    
    // client.css will be an object of the form:
    /*
    [
        { type: 'text/css', value: 'http://<asset server>/finn/css/my-app/1.0.0/index.css' }
    ]
    */

    In both cases, each object in the array also has a toHTML() method that can be used to render out the appropriate HTML tag for the object.

    const client = new Client();
    
    client.js[0].toHTML();
    // <script type="module" src="http://<asset server>/finn/js/my-app/1.0.0/main/index.js"><script>
    
    client.js[1].toHTML();
    // <script src="http://<asset server>/finn/js/my-app/1.0.0/ie11/index.js"><script>
    
    client.css[0].toHTML();
    // <link rel="stylesheet" type="text/css" href="http://<asset server>/finn/js/my-app/1.0.0/main/index.css">

    in development mode the client will build an object pointing to development assets provided

    const client = new Client({ js: '/assets/scripts.js', css: '/assets/styles.css' development: true });
    
    // client.js will be an array of the form [{ type: 'module', value: '/assets/script.js' }]
    // client.css will be an array of the form [{ type: 'text/css', value: '/assets/styles.css' }]

    It's up to you to make sure that these assets are available to the app. In an express app you might use express-static to serve the assets with your app

    Example: Express app using express-static

    app.use('/assets', express.static('assets'));
    
    const client = new Client({
        js: '/assets/scripts.js',
        css: '/assets/styles.css'
        development: true
    });

    Or you might use webpack or some other bundling system that can also serve the assets in development mode for you (remembering to set appropriate CORS headers)

    Example: Setup when using Webpack dev server

    const client = new Client({
        js: 'http://localhost:8080/scripts.bundle.js',
        development: true,
    });

    Or you might just use an HTTP server to serve your files on a port such as 4000. (remembering to set appropriate CORS headers)

    Example: Setup when using a standalone web server

    const client = new Client({
        js: 'http://localhost:4000/assets/scripts.js',
        css: 'http://localhost:4000/assets/styles.css'
        development: true
    });

    API

    Client

    new Client(opts);

    Creates a new instance of the client. Created instance have the accessor properties .js and .css as described below.

    opts

    name description type default required
    development switches the client between development and non development modes boolean false false
    path modifies the default path to the assets.json meta file string ./assets.json false
    js URL or path to location of JavaScript assets to be used in development mode. An object can also be passed for additional configuration `string object`
    css URL or path to location of CSS assets to be used in development mode. An object can also be passed for additional configuration `string object`

    Example

    const client = new Client({
        path: './some/other/assets.json',
        development: true,
        js: '/assets/scripts.js',
        css: '/assets/styles.css',
    });

    Example

    const client = new Client({
        development: true,
        js: { value: '/assets/scripts.js', type: 'module', async: true },
        css: { value: '/assets/styles.css', type: 'text/css' },
    });

    client.js

    Returns an array of JavaScript asset objects for the given mode (development or non development) based on values in assets.json As asset object can be serialized using JSON.stringify or converted into an HTML script tag using the method .toHTML()

    Examples

    client.js; // [{ type: 'module', value: 'http://<asset server>/finn/js/my-app/1.0.0/index.js' }]
    client.js[0].toHTML(); // <script type="module" src="http://<asset server>/finn/js/my-app/1.0.0/index.js">

    client.css

    Returns an array of CSS asset objects for the given mode (development or non development) based on values in assets.json As asset object can be serialized using JSON.stringify or converted into an HTML link tag using the method .toHTML()

    Example

    client.css; // [{ type: 'default', value: 'http://<asset server>/finn/css/my-app/1.0.0/index.css' }]
    client.css[0].toHTML(); // <link type="text/stylesheet" rel="stylesheet" href="http://<asset server>/finn/css/my-app/1.0.0/index.css">

    client.scripts

    Returns JavaScript script tag markup for the given mode (development or non development) based on values in assets.json

    Examples

    client.scripts;
    // <script src="http://localhost:4001/my-org/pkg/my-app-name/1.0.0/main/index.js" type="module"></script>
    // <script src="http://localhost:4001/my-org/pkg/my-app-name/1.0.0/ie11/index.js"></script>`

    client.styles

    Returns CSS link tag markup for the given mode (development or non development) based on values in assets.json

    Examples

    client.styles;
    // <link href="http://localhost:4001/my-org/pkg/my-app-name/1.0.0/main/index.css" type="text/css" rel="stylesheet">

    Keywords

    none

    Install

    npm i @eik/client

    DownloadsWeekly Downloads

    2

    Version

    1.0.0-alpha.1

    License

    ISC

    Unpacked Size

    20.7 kB

    Total Files

    13

    Last publish

    Collaborators

    • trygve
    • digitalsadhu
    • trygve-bot
    • stipsan