ElemX.js
ElemX is a proof-of-concept front-end javascript library for connecting MobX to native Web Components with a Vue-like template binding syntax.
# import
$ npm install elemx
# use in project
import { ReactiveElement } from 'elemx';
Why?
Yes, this is another front-end javascript framework, so why write it?
- I like the potential of native Web Components
- I prefer using MobX for state management
- I like the template binding syntax of Vue.js and Knockout.js
Example Code
Hello World
class HelloWorldElement extends ReactiveElement {
@observable name = "World";
templateHTML() {
return `
<p>
Enter your name:
<wl-textfield outlined placeholder="Your name" @sync="this.name" @sync-event="keyup"></wl-textfield>
</p>
<p>
π Hello, {{ this.name }}!
</p>
`;
}
templateCSS() {
// These styles are scoped to this component using the shadow dom
return `
p { ... }
`;
}
}
customElements.define('hello-world', HelloWorldElement);
Live Code
-
Hello World - A must have
-
Todo List - Also incorporates weightless elements
-
Todo List Full App - Todo List demo app with full code
Bindings
ElemX binds expressions using observables and computeds to ReactiveElement attributes using direct attribute bindings and directive bindings.
Attribute Bindings
Attribute bindings use : to denote an attribute of the element is bound to a reactive expression.
// This will update the name attribute when `this.name` changes.
<div :name="this.name"/>
You can also use :: to denote a two-way attribute binding.
// This will update the name attribute when `this.name` changes,
// *AND* `this.name` will be updated if the name attribute changes.
<div ::name="this.name"/>
Attribute bindings will also bind to element properties if they are defined.
Directive Bindings
Directive bindings use the @ symbol. They are definable to perform specific customizable reactive actions to the element.
For example, the sync bindings synchronizes a form element with an observable. There are several pre-defined bindings (see below).
// This will update the value of the input when `this.name` changes,
// *AND* `this.name` will be updated when the input value changes
<input type="text" @sync="this.name"/>
Conditional Rendering
<template @if="this.isShown">
<div>Conditionally shown</div>
</template>
List Rendering
<template @each="this.todos" @as="todo">
// `this` is still available here, and references the ReactiveElement
// that defines this template
<todo-item :item="context.todo"></todo-item>
</template>
Event Handling
You can handle events from elements using the @on-<event-name> syntax.
<div @on-click="this.handleClick"></div>
Elements can also trigger custom events using emitEvent in a ReactiveElement.
class MyElement extends ReactiveElement {
emitCustomEvent() {
this.emitEvent('customevent', {test: true})
}
}
Input Bindings
<input @sync="this.message" placeholder="edit me"/>
<p>Message is: {{ this.message }}</p>
Several other bindings are already pre-defined. See pre-defined bindings
Custom Bindings
Bindings are very easy to add. See below:
import { bindings } from 'elemx';
let newBinding = {
// how to access binding on element with '@'
name: "my-binding",
// whether to pass the evaluated binding express to the binding handlers
evaluateValue: true
// initialization
init: ({element, rawValue, evalValue, customElement, context})=> {
// init code here
}
// code that runs when attribute expression changes
update: ({element, rawValue, evalValue, customElement, context})=> {
// binding reaction here
}
}
// register the binding with ElemX
bindings.registerBinding(newBinding);
// now use the binding in template HTML
class MyElement extends ReactiveElement {
templateHTML() {
return `
<div @my-binding="this.value"></div>
`;
}
}
58 Nov 11, 2022
12 Jul 30, 2020
2.3k Jan 2, 2023
1.4k Nov 26, 2022
112 Dec 17, 2022
23 Sep 27, 2022
7 Mar 29, 2022
49 Apr 28, 2022
30 Jan 28, 2023
65 Aug 16, 2021
1 May 18, 2021
57 Nov 21, 2022
281 Dec 4, 2022
3 Mar 5, 2023
160 Dec 24, 2022
3 Nov 4, 2019
70 Aug 28, 2022
58 Nov 24, 2022
1.4k Dec 2, 2022