Gem

Read in other languages: English | 中文

Create custom elements, bind data, route switching, and quickly develop WebApps based on custom elements. Stripped from mt-music-player.

Features

• Lightweight: The whole librarie is divided into three modules (custom elements, global data management, routing), you can choose whether to use the built-in custom elements, all the content is packaged together and only 15kb(br compression).

• Simple: There is no new syntax, everything is HTML, CSS, JavaScript. There is no superfluous concept, only "Observe" is needed to create reactive custom elements;

• High performance: The template engine uses lit-html, bundle size, performance of addition, deletion, modification, and memory usage are better than React and Vue, here is the performance comparison between lit-html and React and Vue;

• Asynchronous rendering: which will avoid blocking the main thread for a long time when continuously rendering (such as creating a list) of element, providing a smooth user experience;

Document

• Guide
• API

Project Packages

| Package | Description | | ----------------------------------------------- | ---------------------------------------------------------------------------------------------------- | | gem | Gem core | | gem-devtools | Browser debugging tool for Gem | | gem-analyzer | Gem element analyzer, which can automatically generate documents | | gem-book | Documentation site builder created using Gem | | duoyun-ui | UI library created using Gem | | gem-port | Export Gem elements as React/Vue/Svelte components | | gem-examples | Gem and DuoyunUI examples | | ts-gem-plugin | Gem language service plugin for TypeScript | | swc-plugin-gem | Building plugin for SWC | | zed-plugin-gem | Zed extension | | vscode-gem-plugin | VSCode extension |

Roadmap.

Contribution

Fork repo, submit PR