makeastatement
v0.1.0
Published
super simple state management for vanilla JS
Downloads
1
Readme
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 statementThen 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"
}elementis 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++)