SMRT

SMRT is a SMall experimental library from building functional and Reactive web Templates.

I am so smart, SMRT, I mean SMART.

Homer J. Simpson

SMRT can be used to add reactivity to an existing webpage, or to build a whole app.

🎮 View the Code Playground here

Getting Started

Add SMRT to your web page or app either as a package or as a script.

npm install smrt or <script src="https://unpkg.com/smrt"></script

Example

import smrt from 'smrt';

const myApp = smrt();

const helloWorldState = {
  userName: 'World',
};

const appTitle = {
  tag: 'h1',
  innerHTML: () => `Hello ${helloWorldState.userName} 👋`,
};

const userNameInput = {
  tag: 'input',
  value: () => helloWorldState.userName,
  events: {
    input: event => {
      helloWorldState.userName = event.target.value;
    },
  },
};

const helloWorldApp = {
  tag: 'div',
  children: [
    appTitle,
    userNameInput,
  ],
};

const parent = document.querySelected('#app');
myApp.run(helloWorldApp, parent, [myAppState]);

IMPORTANT Notice how in the example above userNameInput.value and appTitle.innerHTML are functions that return a value from helloWorldState? This makes that part of your DOM reactive to state changes.

Further examples can be found here

Docs

• Reactivity
  • How Reactivity Works
• Creating Components
  • Component Spec

Reactivity

Component values can be reactive, or non reactive. A value will only be reacted to if it is read from a function in a components spec.

How Reactivity Works

Reactivity works by replacing each value in a state with a pair of getters and setters. When a component is first rendered, any template updates that require a value from state are recorded again that state item (in an array of observers). Then when a state item is change, the recorded updates are replayed, keeping the DOM upto date.

Creating Components

A component can be defined as either a function (returning a spec) or an object following the spec. Functions are useful for a few reasons:

• If you want to pass a value to a component when it's fist rendered e.g. a prop,
• You may want to create helpers for commonly used elements,
• You may want to run an action when you component is first rendered e.g. a call to the server.

Otherwise most components will be simple objects.

Component Spec

possible component spec values: {
    tag: String: html tag name,
    attrs: {
      [any html attribute e.g. id]: value or function,
    },
    events: {
      any dom event e.g. click, change: function
    },
    value: value or function,
    children: array or function returning an array of components
}