Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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 1 month 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 (almost 5 years ago)
Default Branch: master
Last Pushed: 2024-05-21T12:29:11.000Z (4 months ago)
Last Synced: 2024-05-22T12:31:33.987Z (4 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: 38
Watchers: 4
Forks: 1
Open Issues: 1
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)











 

  



## 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

- ☄️ 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_123.0.6312.59.html)



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.

## 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)