
Security News
Vite Releases Technical Preview of Rolldown-Vite, a Rust-Based Bundler
Vite releases Rolldown-Vite, a Rust-based bundler preview offering faster builds and lower memory usage as a drop-in replacement for Vite.
faster-dom
Advanced tools
Lightweight replacement of React + MobX + React Router (I hope in future Angular/Vue), which does not use the virtual DOM comparison, but the re-render of only the changed parts. Abandon the HTML template in favor of their interpretation in JS, give to us
Lightweight replacement of React + MobX + React Router (I hope in future Angular/Vue), which does not use the virtual DOM comparison, but the re-render of only the changed parts. Abandon the HTML template in favor of their interpretation in JS, give to us tree-shaking is components/templates and the speed of work increases since the time to parse the template is zero. Use requestAnimationFrame
for change detection, which allows batch updates to do.
The library allows you to create quick and responsive interfaces using only JS / TS. With this you will get the minimum application size, speed and ease of development.
yarn add faster-dom@0.0.21-alpha
index.html
<div id="timer"></div>
timer.ts
import {
Component,
FastDomNode,
createComponent,
fdObject,
fdIf,
fdValue,
} from 'faster-dom';
// Extends your class from Component
class Timer extends Component {
private timer: number;
// Put here all reactive values, when component will be destroyed
// They will be destroy automatically
protected reactive = {
// create reactive value
// if you provide here object/array, you on change need always return new one, not link on previous
counter: fdValue(0),
// create reactive for true/false
classOdd: fdIf(true),
}
// All fdObjects(for attrs/prop/classList binding) must be here for auto destroy
fdObjects = {
classList: new fdObject<boolean>({
"odd": this.currentClass
}),
}
// Create shortcuts, not required
get counter () {
return this.reactive.counter;
}
// Create shortcuts, not required
get currentClass () {
return this.reactive.classOdd;
}
onInit () {
const timer = () => {
this.timer = window.setTimeout(() => {
this.counter.value += 1; // increase counter on '1'
// If counter value odd then 'true'
this.currentClass.value = this.counter.value % 2 === 0 ? true : false;
timer();
}, 1000);
}
timer();
}
onDestroy () {
// Use destroy hook for clear timeout
clearTimeout(this.timer);
}
// Provide template
template: FastDomNode = {
tag: 'div',
// Create reactive class
classList: this.fdObjects.classList,
// Create reactive textValue
textValue: this.counter,
}
}
export function createTimer() {
return createComponent(Timer);
}
index.ts
import { generateNode } from 'faster-dom';
import { createTimer } from './timer';
const timerContainer = document.getElementById('timer');
// create real node element from component
timerContainer.appendChild(generateNode(createTimer()));
Here will be good api
onInit
and onDestroy
.if
condition and for
directive.Help me please if you are interested.
FAQs
Lightweight replacement of React + MobX + React Router (I hope in future Angular/Vue), which does not use the virtual DOM comparison, but the re-render of only the changed parts. Abandon the HTML template in favor of their interpretation in JS, give to us
The npm package faster-dom receives a total of 0 weekly downloads. As such, faster-dom popularity was classified as not popular.
We found that faster-dom 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.
Security News
Vite releases Rolldown-Vite, a Rust-based bundler preview offering faster builds and lower memory usage as a drop-in replacement for Vite.
Research
Security News
A malicious npm typosquat uses remote commands to silently delete entire project directories after a single mistyped install.
Research
Security News
Malicious PyPI package semantic-types steals Solana private keys via transitive dependency installs using monkey patching and blockchain exfiltration.