Introduction

Gem is a lightweight ECMAScript library that uses WebComponents technology to build WebApp. Essentially, you just create individual custom elements and let them work together. They are very flexible and can be easily extended, such as integrated gestures. In addition to building WebApps, you can also use Gem to publish custom elements that can work independently(e.g GemPanel). Custom elements can be easily used in other libraries, therefore, Gem is also particularly suitable for building a UI component library(e.g DuoyunUI).

Installation

npm install @mantou/gemimport * as Gem from 'https://esm.sh/@mantou/gem';<script src="https://unpkg.com/@mantou/gem/dist/gem.umd.js"></script>

Start

@customElement('my-element') class MyElement extends GemElement { render = () => { return html`<h1>Hello Gem</h1>`; } }<my-element></my-element>

Decorator @customElement use standard API to define a custom element, and then use it in HTML in any way, of course, it can also be used in other custom element templates.

Return the rendering template in the render method, Gem uses lit-html as its template engine, it uses ES6 template strings to write standard HTML content, there are no other concepts and no compile-time.

Use variables:

html`<div>${value}</div>`;

Bind attribute and property:

html`<div title=${title} .data=${data}></div>`;

Use event bind:

html`<div @click=${clickHandle}></div>`;

More detailed syntax can be found in lit-html document. In addition, please check the extension of Gem to template syntax here.

Are you ready?

Just introduced the most basic function of Gem: defining Gem elements, and then I will introduce the other parts of developing a reactive WebApp.