Makeastatement NPM

STATEMENT

super simple state management for vanilla JS

STATEMENT makes it really easy to add reactive, state-based elements to your vanilla JS projects.

Assigning a variable to a new 'Statement' object will automatically render the associated HTML template whenever any of its values change.

const counter = new Statement{
    state: { value: 0 },
    element: document.body,
    template: counter => html`<h1>The count is ${counter.value}</h1>`
}

counter.value ++

Instatllation

Using NPM CLI

Install statement from NPM.

npm install statement

Then import like this:

import { Statement, html } from "statement";

ES Modules

If you use ES Modules, you don't need NPM. You can import from a CDN URL in your browser or on CodePen.

<script type="module">
  import { Statement,html } from 'https://cdn.skypack.dev/statement';
</script>

Making a Statement

To create a Statement, all you need to do is assign a variable to the constructor function using the new keyword and provide state, element and template arguments:

const data = new Statement(
    state,
    element,
    template
)

These 3 arguments are all that's needed to

state is an object that contains your inital state. e.g.

{
    name: "Statement",
    version: 1.0,
    difficulty: "easy"
}

element is the element that you want the template to be rendered inside. e.g.

document.getElementById("data-container")

template is a function that returns a string of HTML that will be rendered inside the target element. It uses the html tag function provided by µhtml that accepts a template literal as an argument and returns a string of HTML that depends on the value of the properties in state. The template literal contains the HTML code to be displayed inside element and uses ${expression} placeholders to insert properties of state. e.g.

data => html`<h1>${data.name}</h1>`

Putting all this together would look like the following:

const data = new Statement(
    state: {name: "Statement"},
    element: document.getElementById("data-container"),
    template: data => html`<h1>${data.name}</h1>`
)

Creating the statement will trigger the initial render of the template inside the element using the initial values provided as state:

<div id="data-container">
  <h1>Statement</h1>
</div>

Statement

Once you have created a statement, you can then make any changes to the variable you assigned it to as you usually would using JavaScript and the view will update to reflect those changes. For example, you could assign one of the properties to a different value:

data.name = "Super Statement"

This would result in the HTML inside the "data-container" element automatically updating to reflect this change:

<div id="data-container">
  <h1>Super Statement</h1>
</div>

Super Statement

When creating a Statement, all you need to remember is the mneuomonic S.E.T.

state
element
template

Simple Counter Example

You can see this example live on CodePen.

index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Statement Counter App</title>
        <script type="module" src="app.js"></script>
    </head>
    <body>
        <h1>Statement</h1>
        <h2>Counter Example</h2>
        <div id='counter'></div>
        <button id='down'>-</button>
        <button id='up'>+</button>
    </body>
</html>

app.js:

import { Statement,html } from "statement"

const counter = new Statement({
  state: { value: 10 },
  element: document.getElementById("counter"),
  template: counter => html`${counter.count}`
})                                                    
 
document.getElementById("down")
  .addEventListener("click",e => counter.value--)
document.getElementById("up")
  .addEventListener("click",e => counter.value++)

License

Released under Unlicense by @daz4126.

vanillaJS state

uhtml

@everything-registry/sub-chunk-2124 @zalastax/nolb-make

0.1.0

2 years ago