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