@ifaxity/fx

@ifaxity/element

What if we could use Vue like features with Webcomponents (Custom Elements, ShadowDOM, HTMLTemplates)?

The result is this, a lit-html powered custom element with a Vue like syntax and reactivity system. All written in Typescript to have the useful typehints in an editor like VSCode.

As this is a WIP and just my hobby project its not ready for serious use yet. Mostly because there is still not a lot of users using a web components ready browser version (~70%).

A lot is going to change in the package so don't expect code to work when you update. More packages for this coming soon like a router and maybe a Flux like store.

---

Installation:

To install just use your preferred package manager, like npm:

npm install @ifaxity/fx --save

---

Usage

To use the module just import it like this:

import Fx from '@ifaxity/fx';

And then you can then use the module like this:

import Fx from '@ifaxity/fx';

// Define a element like this
// The tagname is important the element will only render when the browser sees this tagname
Fx.define('hello-world', {
  props: {
    name: {
      type: String,
      default: 'World',
    },
  },
  render(html) {
    return html`
      <h1>Hello ${this.name}!</h1>
    `;
  },
});

// Then it will automatically be rendered in the browser when it detects the tagname.