Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Bundle Manifest Tools

What

A tool for making sense of the bundle manifest file (see bundleManifest here).

This module will allow you to:

  • Get the bundle assets for a given module such as app/orders/orders.
  • Create <script> and <link> tags for assets.

Why

In Steal projects a bundle often corresponds to a particular bundle. With optimized builds you can load each bundle in parallel, like so:

<script src="/dist/bundles/app/orders-cart.js" async></script>
<script src="/dist/bundles/app/orders.js" async></script>
<script src="/dist/bundles/app/app.js" async></script>

In larger applications there might be many shared bundles between pages. You won't know which bundles are needed for a page without examing the manifest file.

How

A new project that consists of a set of utilities for working with bundle manifest files. A typical usage would look like:

var Handlebars = require("handlebars");
var manifestTools = require(PACKAGE_NAME);
var { assetsFor, filter } = manifestTools;

var assets = assetsFor("app/orders/");

var scripts = filter(assets, "script");
var styles = filter(assets, "style");

var template = Handlebars.compile(`
      <head>
        <title>Orders</title>
        
        {{#styles}}
          <link rel="stylesheet" href="{{path}}">
        {{/styles}}
      </head>
      <body>
        <h1>Order page</h1>
        
        {{#scripts}}
          <script src="{{path}}" async></script>
        {{/scripts}}
      </body>
`);

require("http").createServer(function(req, res){

  if(isOrders(req.url)) {
  
    res.end(template({ scripts, styles });
  
  }

});

Or to produce strings for each script/link:

var manifestTools = require(PACKAGE_NAME);
var { assetsFor, filter, stringify } = manifestTools;

var assets = assetsFor("app/orders/");

var scripts = filter(assets, "script");
var styles = filter(assets, "style");

require("http").createServer(function(req, res){

  if(isOrders(req.url)) {
  
    res.end(`
      <head>
        <title>Orders</title>
        ${stringify(styles)}
      </head>
      <body>
        <h1>Order page</h1>
        ${stringify(scripts)}
      </body>
    `);
  
  }

});

API

assetsFor

@function assetsFor
@signature assetsFor(identifierOrRoute)
@param {String} identifierOrRoute
@return {Array} bundleAssets

Given an identifier (a common identifier like you put into steal.bundle configuration) returns an array of assets for that bundle.

Or given a route, returns the same. To make this work steal-tools has to know what bundles are associated with which routes.

Usage

var assets = assetsFor("app/orders/orders");

console.log(assets); // [ { path: "dist/bundles/app/orders/orders.js", type: "script", weight: 2 }, ... ]

filter

@function filter
@signature filter(assets, opts)
@param {Array} assets Assets derived from assetsFor
@param {Object|String} opts Options on how to filter
@return {Array}

Simplest form is a shorthand for assets.filter(a => a.type === TYPE). But we might want to expand it to enable more complex filtering like "give me all style assets with a weight of 2 or less.

Usage

var assets = assetsFor("app/orders/orders");
var scripts = filter(assets, "script");

toHTML

@function toHTML
@param {Array|Object} assets The asset(s) to turn into an HTML string.
@return {String} A HTML string representation of the assets.

Useful in case you are not using a templating library and want to generate some script and link tags.

Usage

var assets = assetsFor("orders");

toHTML(filter(assets, "script"), {
  root: "/product-app"
});
Owner

matthewp commented Aug 11, 2017

/cart

/public/assets
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment