1.0.1
This commit is contained in:
+211
-51
@@ -44,12 +44,21 @@ const age = new React.State(69); //will be State<number>
|
||||
|
||||
// Get value
|
||||
console.log(name.value);
|
||||
// John Doe
|
||||
|
||||
// Subscribe
|
||||
age.subscribe(newAge => console.log(`Age changed to ${newAge}`));
|
||||
// Age changed to 69
|
||||
|
||||
React.bulkSubscribe([name, age], () => console.log(`${name.value} is ${age.value} years old`))
|
||||
|
||||
// Set value
|
||||
name.value = "Jeff";
|
||||
age.value = 70;
|
||||
// Age changed to 70
|
||||
// John Doe is 70 years old
|
||||
|
||||
name.value = "Josh"
|
||||
// Josh is 70 years old
|
||||
```
|
||||
|
||||
## Proxy States
|
||||
@@ -61,43 +70,85 @@ A Proxy State is a State based on multiple other States. This reduces code and c
|
||||
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>
|
||||
const name = new React.State("John Doe");
|
||||
const age = new React.State(69);
|
||||
|
||||
// Proxy State
|
||||
const summary = React.createProxyState([name, age], () => `${name.value} is ${age.value} years old.`)
|
||||
summary.subscribe(console.log);
|
||||
//John Doe is 69 years old.
|
||||
```
|
||||
|
||||
## 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.
|
||||
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.
|
||||
|
||||
```TypeScript
|
||||
// Import
|
||||
import * as React from 'bloatless-react';
|
||||
import * as React from "bloatless-react";
|
||||
|
||||
// Define Item type
|
||||
class Item implements React.Identifiable {
|
||||
id = React.UUID();
|
||||
constructor(public text: string) {}
|
||||
}
|
||||
const listState = new React.ListState([1, 2]);
|
||||
|
||||
// Create ListState
|
||||
const listState = new React.ListState<Item>();
|
||||
console.log(listState.value);
|
||||
// Set [ 1, 2 ]
|
||||
|
||||
// Handle addition and removal
|
||||
listState.handleAddition((newItem) => {
|
||||
console.log(`${newItem.text} was added`);
|
||||
listState.handleRemoval(newItem, () => console.log(`${newItem.text} was removed`));
|
||||
listState.handleRemovals((item) => console.log(item + " removed"));
|
||||
listState.handleAddition((newItem: number) => {
|
||||
console.log("+", newItem);
|
||||
|
||||
listState.handleRemoval(newItem, () => {
|
||||
console.log("-", newItem);
|
||||
});
|
||||
});
|
||||
// + 1
|
||||
// + 2
|
||||
|
||||
// Add item
|
||||
const newItem = new Item("hello, world!");
|
||||
listState.add(newItem);
|
||||
listState.add(3);
|
||||
// + 3
|
||||
|
||||
// Remove item
|
||||
listState.remove(newItem);
|
||||
listState.remove(1);
|
||||
// - 1
|
||||
|
||||
listState.clear();
|
||||
// - 2
|
||||
// - 3
|
||||
|
||||
```
|
||||
|
||||
## MapStates
|
||||
|
||||
A `MapState<T>` is a State whose value is a `Map<string, T>`. A ListState allows specific subscriptions to detect when items get added and removed.
|
||||
|
||||
```TypeScript
|
||||
import * as React from "bloatless-react";
|
||||
|
||||
const mapState = new React.MapState<number>([
|
||||
["a", 1],
|
||||
["b", 2],
|
||||
])
|
||||
|
||||
console.log(mapState.value);
|
||||
// Map { a → 1, b → 2 }
|
||||
|
||||
mapState.handleRemovals((item) => console.log(item + " removed"));
|
||||
mapState.handleAddition((newItem: number) => {
|
||||
console.log("+", newItem)
|
||||
|
||||
mapState.handleRemoval(newItem, () => {
|
||||
console.log("-", newItem)
|
||||
})
|
||||
});
|
||||
// + 1
|
||||
// + 2
|
||||
|
||||
mapState.set("c", 3);
|
||||
// + 3
|
||||
|
||||
mapState.remove("a");
|
||||
// - 1
|
||||
|
||||
mapState.clear();
|
||||
// - 2
|
||||
// - 3
|
||||
```
|
||||
|
||||
## Persistence
|
||||
@@ -105,11 +156,23 @@ listState.remove(newItem);
|
||||
States can persist through reloads via LocalStorage. To implement this, modify your code like this:
|
||||
|
||||
```diff
|
||||
normal State
|
||||
-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");
|
||||
MapState
|
||||
-const myMapState = new React.MapState<T>();
|
||||
+const myMapState = React.restoreMapState<T>("my-map-state");
|
||||
OR
|
||||
-const myMapState = new React.MapState<number>([["a", 1], ["b", 2]]);
|
||||
+const myMapState = React.restoreMapState<number>("my-map-state", [["a", 1], ["b", 2]]);
|
||||
|
||||
ListState
|
||||
-const myListState = new React.ListState<T>();
|
||||
+const myListState = React.restoreListState<T>("my-list-state");
|
||||
OR
|
||||
-const myListState = new React.ListState<number>([1, 2]);
|
||||
+const myListState = React.restoreListState<number>("my-list-state", [1, 2]);
|
||||
```
|
||||
|
||||
# UI
|
||||
@@ -125,6 +188,7 @@ The `on:<event>` directive adds an EventListener. This directive also supports t
|
||||
```TypeScript
|
||||
<input on:enter={someFunction}></input>
|
||||
<button on:click={someFunction}>Click me</button>
|
||||
<div metakey:s={someFunction}>...</div> // triggers when pressing Command/Ctrl+s
|
||||
```
|
||||
|
||||
## Changing Properties
|
||||
@@ -167,49 +231,70 @@ const name = new React.State("John Doe");
|
||||
|
||||
## Dynamically Creating and Removing Child Elements
|
||||
|
||||
The `subscribe:children` directive subscribes to a ListState and adds/removes child elements accordingly.
|
||||
The **children:set** subscribes to a `State<HTMLElement>` or `State<HTMLElement[]>` and replaces the element's contents with the State's value.
|
||||
|
||||
```TypeScript
|
||||
import * as React from 'bloatless-react';
|
||||
let count = 0;
|
||||
const childElement = new React.State(<div>0</div>);
|
||||
|
||||
// Define Item
|
||||
class Item implements React.Identifiable {
|
||||
id = React.UUID();
|
||||
constructor(public text: string) {}
|
||||
function change() {
|
||||
count++;
|
||||
childElement.value = <div>{count}</div>;
|
||||
}
|
||||
|
||||
// This ListItemConverter creates an HTML element based on an Item
|
||||
const convertItem: React.ListItemConverter<Item> = (item) => {
|
||||
document.body.append(
|
||||
<div>
|
||||
<button on:click={change}>+</button>
|
||||
<div children:set={childElement}></div>
|
||||
</div>
|
||||
);
|
||||
```
|
||||
|
||||
The **children:append** and **children:prepend** directives subscribe to a `ListState` or `MapState` and sync the element's contents accordingly.
|
||||
|
||||
The StateItemConverter turns an item of the State into an HTMLElement.
|
||||
|
||||
```TypeScript
|
||||
import * as React from "bloatless-react";
|
||||
|
||||
// Model
|
||||
class MyDataModel {
|
||||
items = new React.ListState<string>();
|
||||
newItemName = new React.State("");
|
||||
|
||||
addItem = () => {
|
||||
console.log(this);
|
||||
this.items.add(this.newItemName.value);
|
||||
};
|
||||
removeItem = (item: string) => {
|
||||
this.items.remove(item);
|
||||
};
|
||||
}
|
||||
|
||||
const model = new MyDataModel();
|
||||
|
||||
// Item -> Element
|
||||
const convertItem: React.StateItemConverter<string> = (item: string) => {
|
||||
function remove() {
|
||||
// you should keep track of your data in a separate model
|
||||
// keep your removeListItem() method there
|
||||
myDataModel.removeListItem(item);
|
||||
model.removeItem(item);
|
||||
}
|
||||
return (
|
||||
<span>
|
||||
{item.text}
|
||||
{item}
|
||||
<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>
|
||||
<input bind:value={model.newItemName}></input>
|
||||
<button on:click={model.addItem}>Add</button>
|
||||
<div
|
||||
class="flex-column"
|
||||
children:append={[model.items, convertItem]}
|
||||
></div>
|
||||
</div>
|
||||
);
|
||||
```
|
||||
@@ -271,4 +356,79 @@ Other changes:
|
||||
|
||||
## 1.2.5
|
||||
|
||||
- Instead of using `scrollIntoView()`, `subscribe:children` now scrolls to the bottom
|
||||
- Instead of using `scrollIntoView()`, `subscribe:children` now scrolls to the bottom
|
||||
|
||||
## 1.3.0
|
||||
|
||||
**BREAKING CHANGES**
|
||||
|
||||
- Replace `set:children` with `children:append`
|
||||
|
||||
Other changes
|
||||
|
||||
- Add `children:<action>` directive
|
||||
- Improve documentation
|
||||
|
||||
## 1.3.1
|
||||
|
||||
- Allow arrays to be passed to `children:set`
|
||||
|
||||
## 1.3.2
|
||||
|
||||
- Allow initial value on `restoreListState()`
|
||||
- Add `MapState` and `restoreMapState()`
|
||||
|
||||
## 1.3.3
|
||||
|
||||
- Rename `ListItemConverter` to `StateItemConverter`
|
||||
- Improve documentation
|
||||
|
||||
## 1.3.4
|
||||
|
||||
- Remove old item from `MapState` when calling `MapState.set()` for an existing key
|
||||
|
||||
## 1.3.5
|
||||
|
||||
- Fix bug where `MapState.clear()` would not trigger removal handlers
|
||||
|
||||
## 1.3.6
|
||||
|
||||
- Add `State.subscribeSilent()`
|
||||
- Add `bulkSubscribe()`
|
||||
|
||||
## 1.3.7
|
||||
|
||||
- `bulkSubscribe()` does not fire the callback when set up
|
||||
|
||||
## 1.3.8
|
||||
|
||||
- Allow multiple handlers for `MapState` and `ListState`
|
||||
|
||||
## 1.3.9
|
||||
|
||||
- Improve error handling
|
||||
- Fix error where the `children:` directive would attempt to set attributes
|
||||
|
||||
## 1.3.10
|
||||
|
||||
- Improve error handling
|
||||
|
||||
## 1.3.11
|
||||
|
||||
- Add `metakey:` directive
|
||||
- Pass event to `on:enter` call
|
||||
|
||||
## 1.3.12
|
||||
- Replace `metakey:` with `keystroke:` directive to support control key additionally
|
||||
|
||||
## 1.3.13
|
||||
- trigger state subscriptions even when value is unchanged
|
||||
|
||||
## 1.3.14
|
||||
- fix bug where proxy states would trigger subscriptions upon creation$a
|
||||
|
||||
## 1.3.15
|
||||
- do not re-add values to `ListState` if already present
|
||||
|
||||
## 1.4.0
|
||||
- Add `handleRemovals` method
|
||||
|
||||
Reference in New Issue
Block a user