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.
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.
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>
`);
}
});@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.
var assets = assetsFor("app/orders/orders");
console.log(assets); // [ { path: "dist/bundles/app/orders/orders.js", type: "script", weight: 2 }, ... ]@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.
var assets = assetsFor("app/orders/orders");
var scripts = filter(assets, "script");@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.
var assets = assetsFor("orders");
toHTML(filter(assets, "script"), {
root: "/product-app"
});