https://github.com/webtides/element-js

Simple and lightweight base classes for web components with a beautiful API
https://github.com/webtides/element-js

Last synced: 4 days ago
JSON representation

Simple and lightweight base classes for web components with a beautiful API

• Host: GitHub
• URL: https://github.com/webtides/element-js
• Owner: webtides
• License: mit
• Created: 2020-04-30T12:08:55.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2024-05-21T07:38:38.000Z (6 months ago)
• Last Synced: 2024-05-21T08:58:12.907Z (6 months ago)
• Language: JavaScript
• Homepage:
• Size: 2.68 MB
• Stars: 23
• Watchers: 5
• Forks: 3
• Open Issues: 22
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: .github/CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-web-components - Element-js
• awesome-web-components - element-js - Simple and lightweight base classes for web components with a beautiful API. (Libraries / Class Based)

README

        
# element-js

Simple and lightweight base classes for web components with a beautiful API. Dependency free.

## Introduction

`element-js` lets you write simple, declarative and beautiful web components without the boilerplate.

## How to use

#### Installation

install `element-js`

```sh

npm install --save @webtides/element-js

```

#### Use / Example Element

`element-js` elements are plain ES6 classes (vanilla JS) with some nice mappings (eg. properties, watch, etc.).

```javascript

// Import from a CDN

// import { BaseElement, defineElement } from 'https://unpkg.com/@webtides/element-js';

// import { BaseElement, defineElement } from 'https://cdn.skypack.dev/@webtides/element-js';

// or when installed via npm

import { BaseElement, defineElement, Store } from '@webtides/element-js';

const sharedDate = new Store({ date: Date.now() });

class ExampleElement extends BaseElement {

    // normal public properties

    greeting = 'Hello';

    name = 'John';

    // lifecycle hook

    connected() {

        this.greet();

    }

    // reactive attributes/properties

    properties() {

        return {

            familyName: 'Doe',

            sharedDate

        };

    }

    // watchers for property changes

    watch() {

        return {

            familyName: (newValue, oldValue) => {

                console.log('familyName changed', newValue, oldValue);

            }

        };

    }

    // computed property

    get computedMsg() {

        return `${this.greeting} ${this.name} ${this.familyName} ${this.sharedDate.date}`;

    }

    // method

    greet() {

        alert('greeting: ' + this.computedMsg);

    }

}

defineElement('example-element', ExampleElement);

```

To use this element, just import it and use it like any other HTML element

```html

```

## Documentation

For detailed documentation see the [Docs](docs/README.md).

## Contributing & Development

For contributions and development see [contributing docs](.github/CONTRIBUTING.md)

## License

`element-js` is open-sourced software licensed under the MIT [license](LICENSE).