@defx/c8

The little JavaScript library for building pure functional UI components

import { html, define } from "@defx/c8"

define(
  "simple-counter",
  (state, dispatch) => html`
    <p>${state.count}</p>
    <button onclick="${() => dispatch("incrementCount")}"></button>
  `,
  { count: 0 },
  { incrementCount: (state) => ({ ...state, count: state.count + 1 }) }
)

C8 components are designed specifically to enable programming UI as a pure function of state.

c8 components...

• are described as pure / idempotent functions
• are easy to test (no need to mock the internals)
• use standard ES Template Literals
• require no pre-compilation

UI as a function of state

...

Components that are easy to test

...

Install via NPM

npm install @defx/c8

Import via CDN

import { html, define } from "https://www.unpkg.com/@defx/c8"

API

define

c8 uses standard Custom Elements as reusable component containers. attribute and property reflection is inferred from usage rather than declaraed implicitly.

define(
    /**
     * As per the Web Component spec, the name of a Custom Element must be at least two words separated by a hyphen, so as to differentiate from native built-in elements
    */
    name: string,
    template: TemplateFunction,
    reducer: ReducerFunction
    )

html

The HTML function is a Tag Function that accepts an HTML Template Literal. It returns an R5 template object, which is essentially a description of what needs to be rendered. You can use any JS logic you like here, as long as you return valid HTML...the only exception being event handlers, - you can bind any event to a node using on-* attributes, - the value you supply here should be a function that invokes the provided dispatch function to send an action ({ type, payload }) to the store reducer.