UDN/static/node_modules/bloatless-react

bloatless-react

Bloatless-React is a very minimal and flexible alternative to React.

Features

• Supports reactivity through States
• Supports JSX for components
• Written in TypeScript
• Really minimal (under 300 lines)
• No bloated server or compiler required - just bundle the JavaScript into a static .html file

Setup

You can use any bundler you want, but esbuild is the fastest and smallest out there:

npm install esbuild bloatless-react
mkdir src dist
touch src/index.tsx dist/index.html

The following build script will be enough:

{
  "scripts": {
    "build": "esbuild src/index.tsx --bundle --outdir=dist"
  }
}

States

In Bloatless-React, States are the foundation of how reactivity is implemented. Similar to many frameworks, a State can hold a value and triggers the UI to update when it changes. However, subscriptions have to be made manually due to the minimal nature of this project.

// Import
import * as React from 'bloatless-react';

// Create States
const name = new React.State("John Doe"); // will be State<string>
const age = new React.State(69); //will be State<number>

// Get value
console.log(name.value);

// Subscribe
age.subscribe(newAge => console.log(`Age changed to ${newAge}`));

// Set value
name.value = "Jeff";

Proxy States

A Proxy State is a State based on multiple other States. This reduces code and can increase performance.

// Import
import * as React from 'bloatless-react';

// Create States
const name = new React.State("John Doe"); // will be State<string>
const age = new React.State(69); //will be State<number>

// Proxy State
const summary = React.createProxyState([name, age], () => `${name.value} is ${age.value} years old.`)
summary.subscribe(console.log);

ListStates

A ListState<T> is a State whose value is a Set<T>. A ListState allows specific subscriptions to detect when items get added and removed. This allows dynamic lists to run efficiently.

// Import
import * as React from 'bloatless-react';

// Define Item type
class Item implements React.Identifiable {
  id = React.UUID();
  constructor(public text: string) {}
}

// Create ListState
const listState = new React.ListState<Item>();

// Handle addition and removal
listState.handleAddition((newItem) => {
  console.log(`${newItem.text} was added`);
  listState.handleRemoval(newItem, () => console.log(`${newItem.text} was removed`));
});

// Add item
const newItem = new Item("hello, world!");
listState.add(newItem);

// Remove item
listState.remove(newItem);

Persistence

States can persist through reloads via LocalStorage. To implement this, modify your code like this:

-const myState = new React.State("hello");
+const myState = React.restoreState("my-state", "hello");

-const myListState = new React.ListState<Item>();
+const myListState = React.restoreListState<Item>("my-list-state");

UI

For a minimalist stylesheet, I'd recommend checking out my project called carbon-mini.

Bloatless React provides a modified polyfill for the React API. This means that you can use JSX almost like you would in a React project. Additional functionailiy is implemented through directives, similar to Svelte:

Handling Events

The on:<event> directive adds an EventListener. This directive also supports the on:enter event.

<input on:enter={someFunction}></input>
<button on:click={someFunction}>Click me</button>

Changing Properties

The subscribe:<property> directive subscribes to a State and changes a property of the element. Use this for properties available via the DOM model (ie. innerText, innerHTML).

const name = new React.State("John Doe");
<span subscribe:innerText={name}></span>

Setting Attributes

The set:<attribute> directive subscribes to a State and changes an attribute of the element.

<span set:someAttribute={attributeValue}></span>

Toggling Attributes

The toggle:<attribute> directive toggles attributes on the HTML element without assigning a value. This is useful for the disabled attribute. You can use states or normal variables.

const isDisabled = new React.State(false);
<button toggle:disabled={isDisabled}>Some button</button>
<button toggle:disabled={false}>Some button</button>

Binding Input Values

The bind:<property> directive acts like a combination of subscribe:<property> and on:input. It binds the element's property to the state bi-directinally.

const name = new React.State("John Doe");
// Both inputs will be in sync
<input bind:value={name}></input>
<input bind:value={name}></input>

Dynamically Creating and Removing Child Elements

The subscribe:children directive subscribes to a ListState and adds/removes child elements accordingly.

import * as React from 'bloatless-react';

// Define Item
class Item implements React.Identifiable {
  id = React.UUID();
  constructor(public text: string) {}
}

// This ListItemConverter creates an HTML element based on an Item
const convertItem: React.ListItemConverter<Item> = (item) => {
  function remove() {
    // you should keep track of your data in a separate model
    // keep your removeListItem() method there
    myDataModel.removeListItem(item);
  }
  return (
    <span>
      {item.text}
      <button on:click={remove}>Remove</button>
    </span>
  );
};

// Create ListState
const listState = new React.ListState<Item>();

// Prepare adding items
const newItemName = new React.State("");

function addItem() {
  const newItem = new Item(newItemName.value);
  listState.add(newItem);
}

// Build UI
document.body.append(
  <div>
    <input bind:value={newItemName}></input>
    <button on:click={addItem}>Add</button>
    <div subscribe:children={[listState, convertItem]}></div>
  </div>
);

Changelog

1.1.0

• Improve code
• Add missing break statements for directives
• Add toggle directive
• Improve documentation

1.1.1

• Improve documentation

1.1.2

• Remove console.log() calls
• Improve documentation

1.1.3

• Add on:enter directive

1.2.0

BREAKING CHANGES

• Replace UUID class with function;
  • new UUID() => UUID() returns string
• Replace definition of Identifiable
  • now has id: string instead of uuid: UUID()

Other changes:

• Add State persistence
• Add error description when utilizing subscribe:children incorrectly
• Fix bug where ListState subscriptions were not called
• Improve documentation

1.2.1

• Add set:<attribute> directive

1.2.2

• Remove list parameter from ListItemConverter
• Add clear() method to ListState

1.2.3

• Allow toggle:<attribute> to be used without a state

1.2.4

• On subscribe:children, scroll new elements into view

1.2.5

• Instead of using scrollIntoView(), subscribe:children now scrolls to the bottom