Liveflow.js is a small runtime extension that enables live-editing of scripts as-well as live-reloading of required json files.
It's a pure, self-contained JavaScript based implementation with no external parts and should work in any more or less any JavaScript runtime, be it Node.js, Chrome, Firefox, Safari, Internet Explorer or Microsoft Edge.
Whenever scripts are changed on disk, across the network or within the document object model itself (e.g inline script tags) the source of that script is re-evaluated in its original execution context.
Re-evaluation means the following things:
- Modified and new top level call expressions are called.
- Surviving call expressions yield their previous value.
- Function modifications are applied.
Whenever a document is changed on disk or across the network, the page will be reloaded.
Whenever style-sheets are changed on disk or across the network, the old style link will be replaced with a new one causing the style-sheet to reload.
Whenever image sources are changed on disk or across the network, the image elements linking to that file will be reloaded.
Whenever the source of a JSON file changes on disk that has been imported with
require, it will reload and replace the key/value pairs on the original
object.
This only applies to Node.js environments.
Liveflow.js has been designed to be as configuration free as possible, just include the script in your runtime environment and be done with it.
- Install the
thingamajigmodule.
npm install thingamajig
- Start node with the
--require(shorthand-r) option, passing inthingamajigas the module name to require.
node -r thingamajig myapp.js
-
- Enjoy live editing and reloading.
If you want to do your own post-processing in addition to what thingamajig does,
add a listener on the reload event.
proces.on('reload', function(module) {
console.log(module.filename, 'reloaded');
});- Include the following script at the very top of the
headsection in your document, it should be the first element after the opening<head>tag.
<script src="//thingamajig.js.org/thingamajig.js"></script>-
Open the document in your preferred browser.
-
Enjoy live editing and reloading.
If you want to do your own post-processing in addition to what thingamajig does,
add an event listener to the reload event.
document.addEventListener('reload', function(event) {
console.log(event.target);
});See [https://thingamajig.js.org].
MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent