A lightweight viritual-dom with a friendly interface.
Many virtual-dom implementations are bulky and are not optimized for immutable data or server side rendering. Currently this is experimental and should not be used in production.
npm install tusk
/** @jsx tusk */
let tusk = require('tusk');
// Using immstruct for example, feel free to replace with immutable.js or others.
let immstruct = require('immstruct');
// Define some initial state for the app.
let struct = immstruct({ i : 0 });
function MyCounter (props, children) {
let { message, cursor } = props;
// Define handlers.
let handleClick = (e)=> cursor.update((state)=> state.set("i", state.get("i") + 1));
let setup = (e)=> ...;
let teardown = (e)=> ...;
// Render the component.
return (
<body>
<button onClick={ handleClick } onMount={ setup } onDismount={ teardown }>
{ message } : { cursor.get('i') }
</button>
</body>
);
}
// Initial render
render();
// We can use the render function to re-render when the state changes.
struct.on("next-animation-frame", function render () {
tusk.render(document.body,
<MyCounter message="Times clicked" cursor={ struct.cursor() }/>
);
});
// We can also render into a string (Usually for the server).
let HTML = String(<MyCounter type="Times clicked" cursor={ struct.cursor() }/>);
// -> "<body><button>Times clicked : 0</button></body>"
node inside of an HTML Entity.tusk.render(document.body,
<body>
<div>Hello World</div>
</body>
);
// -> document.body.innerHTML === "<div>Hello World</div>"
context.// renderer must be a function that returns a virtual node.
function MyComponent (props, children, context) {
return (
<div>External data: { context }</div>
);
}
String(tusk.with(1, ()=> <MyComponent/>));
//-> "<div>External Data: 1</div>"
// Automatically called when using JSX.
let vNode = tusk.createElement("div", { editable: true }, "Hello World");
// Or call tusk directly
let vNode = tusk("div", { editable: true }, "Hello World");
// Render to string on the server.
vNode.toString(); // '<div editable="true">Hello World</div>';
/**
* @params type can also be a function (shown in example above).
*/
In React and many other virtual doms "shouldUpdate" is a common theme for performance. Tusk does not feature shouldUpdate and opts for a more performant, simpler, and well known approach: memoization.
Basically Tusk will never re-render when given the same node twice, meaning the following will only render once.
let _ = require("lodash");
let MyDiv = _.memoize(function () {
return (
<div>Hello World</div>
);
});
// creates and renders myDiv.
tusk.render(HTMLEntity, <MyDiv/>);
// noop.
tusk.render(HTMLEntity, <MyDiv/>);
// render something entirely different.
tusk.render(HTMLEntity, <MyOtherDiv/>);
// switch back - reuses existing "MyDiv" dom. (Extremely fast).
tusk.render(HTMLEntity, <MyDiv/>);
Please feel free to create a PR!
FAQs
Automation library
The npm package tusk receives a total of 103 weekly downloads. As such, tusk popularity was classified as not popular.
We found that tusk demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.