Library for connecting MobX to native Web Components with a Vue-like template binding syntax

Overview

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?

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

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>
    `;
  }
}
You might also like...
Official site of LikeCoin - Decentralized Publishing Infrastructure. https://like.co

likeco like.co, official site of LikeCoin Foundation Essential Folder structure β”œβ”€β”€ components # Vue components β”œβ”€β”€ layouts # nuxt layouts β”œβ”€β”€ locales

:seedling: Vue and vuex based library, writing less verbose code.

lue 🌱 Vue and vuex based library, writing less verbose code. Installation Install the pkg with npm: npm install lue --save or yarn yarn add lue Bas

A simple light-weight authentication library for Vue.js

Vue Auth A simple light-weight authentication library for Vue.js Sponsor If you like this plugin please consider sponsoring. GitHub Patreon Demo Check

Simple Vue.js authentication library

[WARNING]: README file is currently in process of rewrite and will be released soon. vue-authenticate vue-authenticate is easily configurable solution

Vue plugin for using Microsoft Authentication Library (MSAL)

vue-msal Wrapper of MSAL.js (Microsoft Authentication Library) for usage in Vue. The vue-msal library enables client-side vue applications, running in

Lightweight Vue 3 composition API-compatible store pattern library with built-in undo/redo functionality.

vue-store Lightweight Vue 3 composition API-compatible store pattern library. Offers a simple alternative that is on par with VueX in terms of feature

A state management library for react inspired by vue 3.0 reactivity api and immer

Welcome to costate πŸ‘‹ A state management library for react inspired by vue 3.0 reactivity api and immer costate is a tiny package that allows you to w

A library providing Vue applications with asynchronous-first state management

OverVue OverVue is a stream-based persistent state management library for Vue built on RxJS observables. While Vuex provides a robust option for handl

A tiny state management library for Vue Composition API.
A tiny state management library for Vue Composition API.

vue-unstated A tiny state management library for Vue Composition API based on unstated-next which is for React. πŸ‡ Demo πŸ”Œ Installation $ npm install

Comments
  • Logo for WebComponents.dev

    Logo for WebComponents.dev

    Hi @agquick

    We are working on adding ElemX in the starter kit list of webcomponents.dev. Do you have a [svg] logo ?

    Cheers

    import { observable } from "mobx";
    import { ReactiveElement } from "elemx";
    
    class MyCounterElement extends ReactiveElement {
      @observable counter = 0;
    
      templateHTML() {
        return `
        <button @on-click="this.dec">-</button>
        {{ this.counter }}
        <button @on-click="this.inc">+</button>
        `;
      }
    
      inc() {
        this.counter++;
      }
    
      dec() {
        this.counter--;
      }
    
      templateCSS() {
        return `
      * {
    		font-size: 200%;
    	}
    
    	span {
    		width: 4rem;
    		display: inline-block;
    		text-align: center;
    	}
    
    	button {
    		width: 4rem;
    		height: 4rem;
    		border: none;
    		border-radius: 10px;
    		background-color: seagreen;
    		color: white;
    	}
        `;
      }
    }
    customElements.define("my-counter", MyCounterElement);
    
    opened by georges-gomes 2
  • Bump lodash from 4.17.15 to 4.17.19

    Bump lodash from 4.17.15 to 4.17.19

    Bumps lodash from 4.17.15 to 4.17.19.

    Release notes

    Sourced from lodash's releases.

    4.17.16

    Commits
    Maintainer changes

    This version was pushed to npm by mathias, a new releaser for lodash since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump path-parse from 1.0.6 to 1.0.7

    Bump path-parse from 1.0.6 to 1.0.7

    Bumps path-parse from 1.0.6 to 1.0.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump lodash from 4.17.15 to 4.17.21

    Bump lodash from 4.17.15 to 4.17.21

    Bumps lodash from 4.17.15 to 4.17.21.

    Commits
    • f299b52 Bump to v4.17.21
    • c4847eb Improve performance of toNumber, trim and trimEnd on large input strings
    • 3469357 Prevent command injection through _.template's variable option
    • ded9bc6 Bump to v4.17.20.
    • 63150ef Documentation fixes.
    • 00f0f62 test.js: Remove trailing comma.
    • 846e434 Temporarily use a custom fork of lodash-cli.
    • 5d046f3 Re-enable Travis tests on 4.17 branch.
    • aa816b3 Remove /npm-package.
    • d7fbc52 Bump to v4.17.19
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by bnjmnt4n, a new releaser for lodash since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Owner
Alan Graham
Alan Graham
An implementation of the Mobx/Vue state tracking approach, for library authors

proxy-state-tree An implementation of the Mobx/Vue state tracking approach, for library authors DEPRECATED Has moved to repo: https://github.com/cereb

Christian Alfoni 65 Aug 16, 2021
Bryce Soghigian 1 May 18, 2021
MobX integration for Vue.js.

Movue MobX integration for Vue.js, inspired by vue-rx. Movue aims for providing simple and reliable integration between Mobx and Vue.js, which sometim

Hanxing Yang 57 Nov 21, 2022
πŸ– A concise & flexible state model for Redux/MobX/Vuex, etc.

USM USM is a universal state modular library, supports Redux(4.x), MobX(6.x), Vuex(4.x) and Angular(2.0+). Support Libraries/Frameworks None Redux Mob

Michael Lin 281 Dec 4, 2022
Vue redux binding like react-redux.

Originated from Nadim Tuhin's https://github.com/nadimtuhin/redux-vue #TODO Need to have an exact copy of the parent component during extend vue redux

Sazzad Hossain (Tushar) Khan 3 Mar 5, 2023
Vuex binding for client-side search with indexers and Web Workers :green_book::mag:

Vuex Search is a plugin for searching collections of objects. Search algorithms powered by js-worker-search. See working example here. Installation: n

Albert Lucianto 160 Dec 24, 2022
Lightweight vuex inspired centralized state management library for all kinds of javascript applications. Great for React Native.

Verx Lightweight vuex inspired centralized state management library for all kinds of javascript applications. install npm install --save verx # yarn a

Jaynti Kanani 3 Nov 4, 2019
Binding Solutions for Vue & Redux

vuedeux Full Documentation https://vueduex.gitbooks.io/vuedeux-documentation/content/ Synopsis Vuedeux is a lightweight open-source utility layer for

null 70 Aug 28, 2022
Flexible binding between Vue and Redux

vuejs-redux Description Flexible binding between Vue and Redux, allowing use of multiple stores. It works, in the same way, like render props does in

Titouan CREACH 58 Nov 24, 2022
Enable two-way data binding for form fields saved in a Vuex store

vuex-map-fields Enable two-way data binding for form fields saved in a Vuex store. Install npm install --save vuex-map-fields Basic example The follow

Markus Oberlehner 1.4k Dec 2, 2022