https://github.com/xeaone/element

X-Element a zero knowledge curve, agnostic non framework that enhances custom elements with functionality and data binding that mimics native custom element and language standards.
https://github.com/xeaone/element

angular application browser components customelements data-binding esmodules framework front-end library lit-element lit-html polymer router routing spa vue web-components webcomponents

Last synced: 2 days ago
JSON representation

X-Element a zero knowledge curve, agnostic non framework that enhances custom elements with functionality and data binding that mimics native custom element and language standards.

• Host: GitHub
• URL: https://github.com/xeaone/element
• Owner: xeaone
• License: mpl-2.0
• Created: 2017-04-18T05:07:51.000Z (over 7 years ago)
• Default Branch: main
• Last Pushed: 2024-03-25T22:27:09.000Z (8 months ago)
• Last Synced: 2024-05-08T05:32:34.264Z (6 months ago)
• Topics: angular, application, browser, components, customelements, data-binding, esmodules, framework, front-end, library, lit-element, lit-html, polymer, router, routing, spa, vue, web-components, webcomponents
• Language: TypeScript
• Homepage: https://xeaone.github.io/element/
• Size: 5.68 MB
• Stars: 19
• Watchers: 3
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Security: docs/security.js

Awesome Lists containing this project

README

        


# X-Element

### A zero knowledge curve, agnostic non framework that enhances custom elements with functionality and data binding that mimics native custom element and language standards.

## Features

- 👶 **Simple** If you know HTML, JS, and Template Literals then you know how to use X-Element

- ⛽ **Agnostic** Use XElement with any framework or library - Lit, Vue, React, Angular.

- ⚛ **Reactive** Efficient two way reactive databinding by default.

- ⚡ **Fast** Rendering is blazing fast, because XElement only interacts with the dynamic DOM Nodes.

- 📦 **Small** ~(15)KB minified.

- 🧭 **Router** Client side routing using the new [Navigation API](https://developer.chrome.com/docs/web-platform/navigation-api/)

## Learn

[https://xeaone.github.io/element/](https://xeaone.github.io/element/)

## Example

```js

import { component, html } from '/x-element.js';

export default class greet extends component {

    greeting = 'Default Greeting';

    greet = () => this.greeting = 'Updated Greeting';

    render = () => html`

        
this.greeting

        Greet

    `;


}

```

## Use

The two directories to use are `module` and `bundle`. Bundle includes ESNext and ES2015 js bundles. Module contains ESM files with `.js, .ts, and .d.ts`.

[https://www.npmjs.com/package/@xeaone/element](https://www.npmjs.com/package/@xeaone/element)

[https://esm.sh/@xeaone/element/module/index.ts](https://esm.sh/@xeaone/element/module/index.ts)

[https://esm.sh/@xeaone/element/module/index.js](https://esm.sh/@xeaone/element/module/index.js)

[https://cdn.jsdelivr.net/gh/xeaone/element/module/index.ts](https://cdn.jsdelivr.net/gh/xeaone/element/module/index.ts)

[https://cdn.jsdelivr.net/gh/xeaone/element/module/index.js](https://cdn.jsdelivr.net/gh/xeaone/element/module/index.js)

## Author

[xeaone](https://github.com/xeaone)

## License

This project is licensed under the MPL-2.0 License