dust-scriptjs-helper

0.0.4 • Public • Published

A set of helpers for using script.js as async dependency loader with dust.js

What does it do?

Basically it helps you build your script.js code, and if any depended bundle is not requested, it will not be built. It builds a very simple graph internally and is used to build the code

Not loading of unnecessary bundles

The following code is very much similar to the above code, except, the final set of script only depends on bundle("two") and as you can see the final result is much shorter(since bundle three is not loaded, bundle one is not needed)

<!doctype html>
<head>
</head>
<body>
<!-- you must first include script.js on your own -->
<!-- now you can add your dependencies -->
{@bundleScript bundle="one" src="one.js"/}
{@bundleScript bundle="two" src="two.js"/}
{@bundleScript bundle="three" src="three.js"/}
{@bundleDepends bundle="three"}
{@dependsOn bundle="one"/}
{@dependsOn bundle="two"/}
{/bundleDepends}
{@scriptjs}
{@dependsOn bundle="two"/}
{/scriptjs}
<!-- please include renderScript as late as possible, this is where the script code will be rendered -->
{@renderScript /}
</body>
</html>

output

<!doctype html>
<head>
</head>
<body>
<script>
$script(["two.js"],"two");
$script.ready("two",function(){
});
</script>
</body>
</html>

Not repeating the code if possible(still improving)

Here, two scripts depends on "one" and "three", and "three" depends on "one" and "two", although "one" is included by two different sets, but $script() is only called for bundle "one" once.

<!doctype html>
<head>
</head>
<body>
<!-- you must first include script.js on your own -->
<!-- now you can add your dependencies -->
{@bundleScript bundle="one" src="one.js"/}
{@bundleScript bundle="two" src="two.js"/}
{@bundleScript bundle="three" src="three.js"/}
{@bundleDepends bundle="three"}
{@dependsOn bundle="one"/}
{@dependsOn bundle="two"/}
{/bundleDepends}
{@scriptjs}
{@dependsOn bundle="three"/}
{/scriptjs}
{@scriptjs dependsOn="one"/}
{/scriptjs}
<!-- please include renderScript as late as possible, this is where the script code will be rendered -->
{@renderScript /}
</body>
</html>

output

<!doctype html>
<head>
</head>
<body>
<script>
$script(["one.js"],"one");
$script(["two.js"],"two");
$script.ready(["one","two"],function(){
  $script(["three.js"],"three");
});
$script.ready("three", function(){
})
$script.ready("one", function(){
})
</script>
</body>
</html>

Usage

installation

npm install --save dust-scriptjs-helper

nodejs usage

import {* as dust} from "dust-scriptjs-helper" // this is the decorated dust object with dustjs-helpers

example

dustjs code

<!doctype html>
<head>
</head>
<body>
<!-- you must first include script.js on your own -->
<!-- now you can add your dependencies -->
{@bundleScript bundle="one" src="one.js"/}
{@bundleScript bundle="two" src="two.js"/}
{@bundleScript bundle="three" src="three.js"/}
{@bundleDepends bundle="three"}
{@dependsOn bundle="one"/}
{@dependsOn bundle="two"/}
{/bundleDepends}
{@scriptjs}
{@dependsOn bundle="two"/}
{@dependsOn bundle="three"/}
{/scriptjs}
<!-- please include renderScript as late as possible, this is where the script code will be rendered -->
{@renderScript /}
</body>
</html>

output(or something similar, it is not prettified right now)

<!doctype html>
<head>
</head>
<body>
<script>
<!-- the unused bundles are not included -->
$script(["one.js"],"one");
$script(["two.js"],"two");
$script.ready(["one","two"], function(){
  $script(["three.js"],"three");
})
$script.ready(["two","three"],function(){
});
</script>
</body>
</html>

helper list

Helper name Use
bundleScript defining script in a bundle
bundleDepends defining bundle dependencies
dependsOn To be used with @scriptjs and @bundleDepends for defining script or bundle dependency
scriptjs for a block of code encapculated within a $script.ready
loadBundle if you want to explicitly load a bundle, for example some global.js kinda things that you wanna load even if it is not depended
renderScript place this at where you want to render the scripts, unfortunately this has to be placed after all the above definitions, so, best right before

Readme

Keywords

Package Sidebar

Install

npm i dust-scriptjs-helper

Weekly Downloads

6

Version

0.0.4

License

ISC

Last publish

Collaborators

  • shekhei