https://github.com/atellmer/dark
The lightweight and powerful UI rendering engine without dependencies and written in TypeScript💫 (Browser, Node.js, Android, iOS, Windows, Linux, macOS)
https://github.com/atellmer/dark
angular components concurrent fiber framework frontend hooks jsx nativescript no-build-required nodegui performance react renderer server-side-rendering spring-animation typescript ui virtual-dom web
Last synced: about 2 months ago
JSON representation
The lightweight and powerful UI rendering engine without dependencies and written in TypeScript💫 (Browser, Node.js, Android, iOS, Windows, Linux, macOS)
- Host: GitHub
- URL: https://github.com/atellmer/dark
- Owner: atellmer
- License: mit
- Created: 2019-10-05T05:42:49.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-08-31T06:33:30.000Z (8 months ago)
- Last Synced: 2024-10-29T21:54:56.891Z (6 months ago)
- Topics: angular, components, concurrent, fiber, framework, frontend, hooks, jsx, nativescript, no-build-required, nodegui, performance, react, renderer, server-side-rendering, spring-animation, typescript, ui, virtual-dom, web
- Language: TypeScript
- Homepage:
- Size: 49.2 MB
- Stars: 43
- Watchers: 4
- Forks: 1
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Dark
The lightweight and powerful UI rendering engine without dependencies and written in TypeScript
(Browser, Node.js, Android, iOS, Windows, Linux, macOS)
&style=flat&colorA=000063&colorB=673ab7)
## Features
- 🌟 Reactive
- 🎉 Declarative
- 🛸 Fast
- 🏭 Has components and hooks
- 🧶 Based on the Fiber architecture
- ⚡️ Сan use without build tools
- 🦾 Strongly typed
- 🦄 Small size (4x smaller than React)
- ✂️ No dependencies
- 💥 Tree-shakeable
- 🔄 Async rendering
- 🔀 Concurrent rendering
- 🥱 Lazy loading modules
- 🎀 Suspense fallbacks
- 🧲 Error boundaries
- ☄️ Hot module replacement
- 💅 Styled components
- 💃🏼 Spring animations
- 💽 Server-side rendering
- 🏄♂️ Isomorphic routing
- 📖 SEO metadata
- 💾 Shared state between server and client
- ⚙️ Server asynchronous code in the app (in SSR)
- 📬 Declarative queries and mutations
- 📲 Rendering to mobile platforms (Android, iOS) via NativeScript
- 💻 Rendering to desktop platforms (Windows, Linux, macOS) via NodeGui and Qt
```tsx
const Greeting = component(({ name }) =>
Hello {name} 🥰
);
```
## Installation
from template:
```
npx degit github:atellmer/dark/templates/browser app
```
```
cd app
npm i
npm start
```
## Dark vs React Fiber
- [Concurrent Sierpinski triangle](https://atellmer.github.io/dark/next/sierpinski-triangle/)
## Demos
- [1k components](https://atellmer.github.io/dark/next/1k-components/)
- [10k rows](https://atellmer.github.io/dark/next/10k-rows/)
- [Animated grid](https://atellmer.github.io/dark/next/animated-grid/)
- [Concurrent deferred search](https://atellmer.github.io/dark/next/deferred-search/)
- [Spring draggable list](https://atellmer.github.io/dark/next/spring-draggable-list/)
- [Spring snake](https://atellmer.github.io/dark/next/spring-snake/)
- [Spring masonry grid](https://atellmer.github.io/dark/next/spring-masonry-grid/)
- [Spring slider](https://atellmer.github.io/dark/next/spring-slider/)
- [Spring menu](https://atellmer.github.io/dark/next/spring-menu/)
- [Spring dialog window](https://atellmer.github.io/dark/next/spring-dialog/)
## Stackblitz demos
- [Dark context](https://stackblitz.com/edit/darkapp-ccz57rk-z41sup?file=index.tsx)
- [Working with standard HTML input elements](https://stackblitz.com/edit/darkapp-ccz57rk-wqitdr?file=index.tsx)
- [SPA with lazy routes](https://stackblitz.com/edit/darkapp-ccz57rk-hu65rp?file=index.tsx)
- [Concurrent tabs](https://stackblitz.com/edit/darkapp-ccz57rk-g8ppbn?file=index.tsx)
- [Spring page transitions](https://stackblitz.com/edit/darkapp-ccz57rk-ccf2wq?file=page-transition.tsx)
- [Concurrent router](https://stackblitz.com/edit/darkapp-ccz57rk-fy8rha?file=index.tsx,pending.tsx)
- [SSR+PWA app](https://stackblitz.com/edit/darkapp-ccz57rk-wrfqdk?file=backend%2Fapp.ts,frontend%2Fcomponents%2Fapp.tsx)
## Motivation
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.
## Inspiration
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.
## Ecosystem
| Package | Description | URL |
|----------------------------------|------------------------------------------------------------------|--------------------------------------------------------------------------------|
| `@dark-engine/core` | Abstract core with main functionality | [Link](https://github.com/atellmer/dark/tree/master/packages/core) |
| `@dark-engine/platform-browser` | Renderer for browser (Single-Page apps) | [Link](https://github.com/atellmer/dark/tree/master/packages/platform-browser) |
| `@dark-engine/platform-server` | Renderer for Node.js (Multi-Page, Static-Gen and Universal apps) | [Link](https://github.com/atellmer/dark/tree/master/packages/platform-server) |
| `@dark-engine/platform-native` | Renderer for Android, iOS (Native mobile apps) | [Link](https://github.com/atellmer/dark/tree/master/packages/platform-native) |
| `@dark-engine/platform-desktop` | Renderer for Windows, Linux, macOS (Native desktop apps) | [Link](https://github.com/atellmer/dark/tree/master/packages/platform-desktop) |
| `@dark-engine/web-router` | Isomorphic router for browser and server | [Link](https://github.com/atellmer/dark/tree/master/packages/web-router) |
| `@dark-engine/native-navigation` | Dark NativeScript router | [Link](https://github.com/atellmer/dark/tree/master/packages/native-navigation)|
| `@dark-engine/animations` | Spring based animations | [Link](https://github.com/atellmer/dark/tree/master/packages/animations) |
| `@dark-engine/styled` | Styled components | [Link](https://github.com/atellmer/dark/tree/master/packages/styled) |
| `@dark-engine/data` | Declarative queries and mutations | [Link](https://github.com/atellmer/dark/tree/master/packages/data) |
## Usage
```tsx
import { component, useState } from '@dark-engine/core';
import { createRoot } from '@dark-engine/platform-browser';
const App = component(() => {
const [name, setName] = useState('Dark');
return (
<>
Hello {name}
setName(e.target.value)} />
>
);
});
createRoot(document.getElementById('root')).render();
```
without JSX:
```tsx
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());
```
## Benchmark
[js-framework-benchmark](https://krausest.github.io/js-framework-benchmark/2024/table_chrome_131.0.6778.85.html)
Based on the benchmark results, Dark is approximately 28% slower than the reference `vanillajs-lite implementation`, yet it outperforms Angular, React and Preact.
## Lighthouse
A [small application](https://github.com/atellmer/dark/tree/master/examples/server-side-rendering/) 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.
## Concurrent feature
Dark can split large rendering tasks automatically.
### Turn this...
### into this
# LICENSE
MIT © [Alex Plex](https://github.com/atellmer)