rend-js v0.3.1

rend-js (alpha)

Base usage:

import { ref, el, mount } from 'rend-js';

const app = el('button', ({ on }) => {
  const counter = ref(0);

  on('click', () => counter.value++);

  return () => `count is ${counter.value}`;
});

mount(app, '#app');

Get node (button#button) from rendered DOM:

import { ref, el } from 'rend-js';

const app = el('%#button', ({ on }) => {
  const counter = ref(0);

  on('click', () => counter.value++);

  return () => `count is ${counter.value}`;
});

Reactivity primitives:

import { ref, computed, watch, el } from 'rend-js';

const counter = ref(0);

el('%#button').on('click', () => counter.value++);

const scr = computed(() => `value is: ${counter.value}`);

watch(scr, (value) => console.log(value));

DOMContentLoaded

import { ref, watch, el, onDOMContentLoaded } from 'rend-js';

onDOMContentLoaded(() => {
  const counter = ref(0);

  el('%#button').on('click', () => counter.value++);

  watch(counter, (value) => {
    console.log(`value is: ${value}`);
  });
});

Bind value

import { ref, el } from 'rend-js';

const userName = ref('');
el('%#user-name').bindValue(userName);

el('%#send').on('click', () => {
  console.log('userName', userName.value);
});