## []()
npm install @defx/c8The little JavaScript library for building pure functional UI components
``js
import { html, define } from "@defx/c8"
define(
"simple-counter",
(state, dispatch) => html
${state.count}
,
{ 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
...
$3
sh
npm install @defx/c8
`$3
js
import { html, define } from "https://www.unpkg.com/@defx/c8"
`API
$3
c8 uses standard Custom Elements as reusable component containers. attribute and property reflection is inferred from usage rather than declaraed implicitly.
ts
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
)
`$3
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
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.