venonx

VenonX adds reactivity to build-in HTML elements. It works like Vue and React, but the VenonX filesize is less than 2kb (min+gzip). VenonX is based on web components – more precisely customized built-in elements.

Usage no npm install needed!

<script type="module">
  import venonx from 'https://cdn.skypack.dev/venonx';
</script>

README

VenonX

VenonX adds reactivity to build-in HTML elements. It works like Vue and React, but the VenonX filesize is less than 2kb (min+gzip). VenonX is based on web components – more precisely customized built-in elements.

Why VenonX?

  • Light, fast and simple
  • Minimalistic API
  • Global state (get and set data easily at the site wide)
  • No CLI
  • No compiler
  • No virtual DOM

NPM: https://www.npmjs.com/package/VenonX**

Install

<script src="//unpkg.com/orkestral/venonx.min.js"></script>

<!-- Polyfill for Safari -->
<script src="//unpkg.com/@ungap/custom-elements-builtin"></script>

or

npm install VenonX

Get started

import VenonX from "VenonX"; // or use script tag

window.VenonX = new VenonX({
  elements: ["h3", "div", "img", "input"],
  state: {
    title: "Awesome monkeys!",
    titleUpperCase: "",
    subtitle: "Everyone <strong>loves</strong> monkeys.",
    showExample: true,
    animals: [
      {
        name: "Monk",
        photo: "https://source.unsplash.com/Z05GiksmqYU/150x150",
      },
      {
        name: "Twins",
        photo: "https://source.unsplash.com/aXqlZFeVFrU/150x150",
      },
      {
        name: "Jon Snow",
        photo: "https://source.unsplash.com/iJ7cD_VocxE/150x150",
      },
    ],
  },
});

text / html

<h3 is="x-h3" text="title"></h3>
<div is="x-div" html="subtitle"></div>

Awesome monkeys!

Everyone loves monkeys.

:attribute

<img is="x-img" :src="animals.0.photo" :alt="animals.0.name" />

Monk

for

<div is="x-div" for="animal in animals">
  <img
    is="x-img"
    :src="animal.photo"
    :alt="animal.name"
    :data-index="#animal"
  /> 
</div>

Monk Twins Jon Snow

show

<div is="x-div" show="showExample"></div>

set()

VenonX.set("title", "Monkeys are awesome!");

<input
  is="x-input"
  :value="title"
  oninput="VenonX.set(this.path.value, this.value)"
/>

get()

const title = VenonX.get("title");
// or
const title = VenonX.state.title;

observe()

VenonX.observe({
  path: "title",
  handler: (newValue, oldValue) => {
    VenonX.set("titleUpperCase", newValue.toUpperCase());
  },
  immediate: true,
});

<div is="x-div" text="title"></div>
<div is="x-div" text="titleUpperCase"></div>

Monkeys are awesome!
MONKEYS ARE AWESOME!

Package update guide

https://docs.npmjs.com/updating-your-published-package-version-number

License

MIT

Copyright 2020, Orkestral, [Orkestral]