https://github.com/molecule-js/moleculejs

A library for creating fast and reactive Custom Elements
https://github.com/molecule-js/moleculejs

custom-elements declarative frontend lit-html molecule ui webcomponents

Last synced: 7 days ago
JSON representation

A library for creating fast and reactive Custom Elements

• Host: GitHub
• URL: https://github.com/molecule-js/moleculejs
• Owner: Molecule-JS
• License: apache-2.0
• Archived: true
• Created: 2018-05-11T21:23:09.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2020-06-02T18:12:01.000Z (over 4 years ago)
• Last Synced: 2025-01-22T12:35:30.729Z (11 days ago)
• Topics: custom-elements, declarative, frontend, lit-html, molecule, ui, webcomponents
• Language: TypeScript
• Homepage: https://moleculejs.org
• Size: 1.22 MB
• Stars: 38
• Watchers: 4
• Forks: 3
• Open Issues: 25
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# Molecule · [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Molecule-JS/MoleculeJS/blob/master/LICENSE) [![codecov](https://codecov.io/gh/Molecule-JS/MoleculeJS/branch/master/graph/badge.svg)](https://codecov.io/gh/Molecule-JS/MoleculeJS) [![npm version](https://badge.fury.io/js/%40moleculejs%2Fmolecule.svg)](https://badge.fury.io/js/%40moleculejs%2Fmolecule) [![Build Status](https://travis-ci.org/Molecule-JS/MoleculeJS.svg?branch=master)](https://travis-ci.org/Molecule-JS/MoleculeJS) [![Greenkeeper badge](https://badges.greenkeeper.io/Molecule-JS/MoleculeJS.svg)](https://greenkeeper.io/) [![Codacy Badge](https://api.codacy.com/project/badge/Grade/f28f115aeadf4538ac046a8885c6e7c5)](https://app.codacy.com/app/DerDrodt/MoleculeJS?utm_source=github.com&utm_medium=referral&utm_content=Molecule-JS/MoleculeJS&utm_campaign=Badge_Grade_Dashboard)

## Overview

Molecule is a JavaScript library for building user interfaces using web components.

It provides several classes from which you can build your Custom Elements

- The Molecule base class. It is agnostic about your actual templatization and rendering function.

- MoleculeLit class which uses the standard functions from [lit-html](https://github.com/PolymerLabs/lit-html) by the Polymer team.

- MoleculeLitExtended uses the extended rendering functions of `lit-html`.

## Installation

The `@moleculejs/molecule` package can be installed using npm or yarn:

```bash

npm install --save @moleculejs/molecule

```

```bash

yarn add @moleculejs/molecule

```

## Documentation

See the full documentation at [MoleculeJS.org](https://moleculejs.org).

## Examples

Let's start with a simple Example:

```js

class HelloWorld extends MoleculeLit.Element {

  static get properties() {

    return {

      name: { type: String, attribute: true, value: 'John Doe' },

    };

  }

  render({ name }) {

    html`

      
Hello ${name}

    `;

  }

}


customElements.define('hello-world', HelloWorld);

```

This creates a new Custom Element called `hello-world`, which can now be used anywhere in your application using ``.

This new element will also keep the _property_ `name` in sync with the _attribute_ `name`, meaning that the element will look like this in the DOM:

```html

```

If you change the attribute or the property, both will be kept in sync and the element will be rerendered.

## Contributing

Coming soon!