The lightweight and powerful UI rendering engine without dependencies and written in TypeScriptπ« (Browser, Node.js, Android, iOS, Windows, Linux, macOS)
MIT License
The lightweight and powerful UI rendering engine without dependencies and written in TypeScript (Browser, Node.js, Android, iOS, Windows, Linux, macOS)
const Greeting = component(({ name }) => <h1>Hello {name} π₯°</h1>);
<Greeting name='Alice' />
from template:
npx degit github:atellmer/dark/templates/browser app
cd app
npm i
npm start
This project was written in my free time as a hobby. I challenged myself: can I write something similar to React without third-party dependencies and alone. The biggest discovery for me: writing a rendering library is not difficult, it is difficult to write one that is fast and consumes little memory. And this is a really hard task.
If you liked the project, please rate it with a star β, it gives me inspiration to work for the benefit of the open-source community.
Package | Description | URL |
---|---|---|
@dark-engine/core |
Abstract core with main functionality | Link |
@dark-engine/platform-browser |
Renderer for browser (Single-Page apps) | Link |
@dark-engine/platform-server |
Renderer for Node.js (Multi-Page, Static-Gen and Universal apps) | Link |
@dark-engine/platform-native |
Renderer for Android, iOS (Native mobile apps) | Link |
@dark-engine/platform-desktop |
Renderer for Windows, Linux, macOS (Native desktop apps) | Link |
@dark-engine/web-router |
Isomorphic router for browser and server | Link |
@dark-engine/native-navigation |
Dark NativeScript router | Link |
@dark-engine/animations |
Spring based animations | Link |
@dark-engine/styled |
Styled components | Link |
@dark-engine/data |
Declarative queries and mutations | Link |
import { component, useState } from '@dark-engine/core';
import { createRoot } from '@dark-engine/platform-browser';
const App = component(() => {
const [name, setName] = useState('Dark');
return (
<>
<div>Hello {name}</div>
<input value={name} onInput={e => setName(e.target.value)} />
</>
);
});
createRoot(document.getElementById('root')).render(<App />);
without JSX:
import { Text, component, useState } from '@dark-engine/core';
import { createRoot, div, input } from '@dark-engine/platform-browser';
const App = component(() => {
const [name, setName] = useState('Dark');
return [
div({ slot: Text(`Hello ${name}`) }),
input({ value: name, onInput: e => setName(e.target.value) }),
];
});
createRoot(document.getElementById('root')).render(App());
Based on the benchmark results (on the my machine), Dark is approximately 24% slower than the reference vanillajs implementation
, yet it outperforms both React and Preact.
A small application demonstrating the capabilities of Dark using SSR
, rendering to stream
, service-worker
, offline mode
, concurrent rendering
, caching
, suspense
, router
, async queries
, lazy
and styled
components scores maximum points in Lighthouse.
Dark can split large rendering tasks automatically.
MIT Β© Alex Plex