@diginet/use-reactive
Version:
A reactive state management hook for React.
291 lines • 13.7 kB
JavaScript
import React, { useState } from "react";
import { useReactive } from "./useReactive.js";
import { createReactiveStore } from "./useReactiveStore.js";
// Example 1: Simple Counter
const Counter = () => {
const [state] = useReactive({ count: 0 });
return (React.createElement("div", null,
React.createElement("h3", null, "Counter"),
React.createElement("p", null,
"Count: ",
state.count),
React.createElement("button", { onClick: () => state.count++ }, "Increment"),
React.createElement("button", { onClick: () => state.count-- }, "Decrement")));
};
// Example 2: Computed Property
const ComputedPropertyExample = () => {
const [state] = useReactive({
count: 2,
get double() {
return this.count * 2;
},
});
return (React.createElement("div", null,
"_________________________________",
React.createElement("h3", null, "Computed Property"),
React.createElement("p", null,
"Count: ",
state.count),
React.createElement("p", null,
"Double: ",
state.double),
React.createElement("button", { onClick: () => state.count++ }, "Increment")));
};
// Example 3: Async State Update
const AsyncExample = () => {
const [state] = useReactive({
count: 0,
async incrementAsync() {
await new Promise((resolve) => setTimeout(resolve, 1000));
this.count++;
},
});
return (React.createElement("div", null,
"_________________________________",
React.createElement("h3", null, "Async Update"),
React.createElement("p", null,
"Count: ",
state.count),
React.createElement("button", { onClick: () => state.incrementAsync() }, "Increment Async")));
};
// Example 4: Nested State
const NestedStateExample = () => {
const [state] = useReactive({
nested: { value: 10 },
});
return (React.createElement("div", null,
"_________________________________",
React.createElement("h3", null, "Nested State"),
React.createElement("p", null,
"Nested Value: ",
state.nested.value),
React.createElement("button", { onClick: () => state.nested.value++ }, "Increment Nested")));
};
// Example 5: Single Effect
const SingleEffectExample = () => {
const [state] = useReactive({ count: 0 }, {
effects: [[
function () {
console.log("Count changed:", this.count);
},
function () {
return [this.count];
}
]]
});
return (React.createElement("div", null,
"_________________________________",
React.createElement("h3", null, "Single Effect"),
React.createElement("p", null,
"Count: ",
state.count),
React.createElement("button", { onClick: () => state.count++ }, "Increment")));
};
// Example 6: Multiple Effects
const MultipleEffectsExample = () => {
const [state] = useReactive({ count: 0, text: "Hello" }, {
effects: [
[function () { console.log("Count changed:", this.count); }, () => []],
[function () { console.log("Text changed:", this.text); }, () => []],
]
});
return (React.createElement("div", null,
"_________________________________",
React.createElement("h3", null, "Multiple Effects"),
React.createElement("p", null,
"Count: ",
state.count),
React.createElement("p", null,
"Text: ",
state.text),
React.createElement("button", { onClick: () => state.count++ }, "Increment Count"),
React.createElement("button", { onClick: () => (state.text = "World") }, "Change Text")));
};
const ControlButtons = ({ onIncrement, onDecrement, incrementLabel, decrementLabel }) => (React.createElement("div", null,
React.createElement("button", { onClick: onIncrement }, incrementLabel),
onDecrement && React.createElement("button", { onClick: onDecrement }, decrementLabel)));
const ReactiveChild = ({ initialCount }) => {
const [state] = useReactive({ count: initialCount }, {
init() {
console.log("Count changed due to prop update:", this.count);
},
});
return (React.createElement("div", null,
React.createElement("h3", null, "Reactive Child"),
React.createElement("p", null,
"Count: ",
state.count),
React.createElement(ControlButtons, { onIncrement: () => state.count++, incrementLabel: "Increment" })));
};
// Example using ReactiveChild to test prop dependency
const EffectDependencyExample = () => {
const [state] = useReactive({ count: 0 });
return (React.createElement("div", null,
"_________________________________",
React.createElement("h3", null, "Effect Dependency Example"),
React.createElement("p", null,
"Parent Count: ",
state.count),
React.createElement(ControlButtons, { onIncrement: () => state.count++, incrementLabel: "Increment Parent" }),
React.createElement(ReactiveChild, { initialCount: state.count })));
};
// Example using ReactiveChild to test prop dependency
const ArrayExample = () => {
const [state] = useReactive({
todos: ['hello'],
addWorld() {
this.todos = [...this.todos, ' world'];
},
addExclamation() {
this.todos.push('!');
}
});
return (React.createElement("div", null,
"_________________________________",
React.createElement("h3", null, "Array Example"),
React.createElement("p", null,
"todos: ",
state.todos.map(todo => todo)),
React.createElement("button", { onClick: state.addWorld }, "Add world"),
React.createElement("button", { onClick: state.addExclamation }, "Add !")));
};
const [ReactiveStoreProvider, useReactiveStore] = createReactiveStore({
counter: 0,
user: { name: "John Doe", age: 30 },
}, { init(_state, _subscribe, history) { history.enable(true); } });
function ReactiveStoreUser() {
const [store, _subscribe, history] = useReactiveStore();
return (React.createElement("div", null,
"_________________________________",
React.createElement("h3", null, "Reactive store user"),
React.createElement("p", null,
"Name: ",
store.user.name,
", Age: ",
store.user.age),
React.createElement("button", { onClick: () => store.user.name = "Jane Doe" }, "Change name"),
React.createElement("button", { onClick: () => store.user.age++ }, "Increment age"),
React.createElement("button", { onClick: () => history.undo() }, "Undo")));
}
function AnotherReactiveStoreUser() {
const [store, _subscribe, history] = useReactiveStore();
return (React.createElement("div", null,
React.createElement("h3", null, "Another Reactive store user"),
React.createElement("p", null,
"Name: ",
store.user.name,
", Age: ",
store.user.age),
React.createElement("button", { onClick: () => store.user.name = "Jane Doe" }, "Change name"),
React.createElement("button", { onClick: () => store.user.age++ }, "Increment age"),
React.createElement("button", { onClick: () => history.redo() }, "Redo")));
}
export const SubscribedCounter = () => {
const [items, setItems] = useState([]);
const [state] = useReactive({
count: 0,
count2: 0,
}, {
init(_state, subscribe) {
this.count = 10;
setItems(items => [...items, "SubscribedCounter initialized"]);
subscribe(() => [this.count2, this.count], (_state, key, value, previous) => {
setItems(items => [...items, `${key} changed from ${previous} to ${value}`]);
});
}
});
return (React.createElement("div", null,
"_________________________________",
React.createElement("h3", null, "Subscribed Counter"),
React.createElement("p", null,
"Count: ",
state.count,
" Count2: ",
state.count2),
React.createElement("button", { onClick: () => state.count++ }, "Increment"),
React.createElement("button", { onClick: () => state.count-- }, "Decrement"),
React.createElement("button", { onClick: () => state.count2++ }, "Increment 2"),
React.createElement("button", { onClick: () => state.count2-- }, "Decrement 2"),
React.createElement("p", null,
"Items: ",
React.createElement("button", { onClick: () => setItems([]) }, "Clear")),
items.map((item, index) => (React.createElement("p", { key: index }, item)))));
};
const ExampleComponent = () => {
const [state, , history] = useReactive({ count: 0 }, { historySettings: { enabled: true } });
return (React.createElement("div", null,
"_________________________________",
React.createElement("h3", null,
"Count: ",
state.count),
React.createElement("button", { onClick: () => state.count++ }, "Increment"),
React.createElement("button", { onClick: () => history.undo() }, "Undo"),
React.createElement("button", { onClick: () => history.redo() }, "Redo")));
};
const CheckBox = ({ caption, checked, setChecked }) => {
return (React.createElement("div", null,
React.createElement("label", null,
React.createElement("input", { type: "checkbox", checked: checked, onChange: (e) => setChecked(e.target.checked) }),
caption)));
};
const ReactiveHistoryExample = () => {
const [state, , history] = useReactive({ checked: false, sub: { text1: "", text2: "" } });
const [historyEnabled, setHistoryEnabled] = useState(false);
const [snapshot, setSnapshot] = useState(undefined);
return (React.createElement("div", null,
"_________________________________",
React.createElement("h3", null, "History"),
React.createElement(CheckBox, { caption: "Some boolean", checked: state.checked, setChecked: (checked) => state.checked = checked }),
React.createElement("input", { type: "text", value: state.sub.text1, onChange: (e) => (state.sub.text1 = e.target.value) }),
React.createElement("p", null),
React.createElement("input", { type: "text", value: state.sub.text2, onChange: (e) => (state.sub.text2 = e.target.value) }),
React.createElement("br", null),
React.createElement(CheckBox, { caption: "Enable history", checked: historyEnabled, setChecked: (checked) => {
setHistoryEnabled(checked);
history.enable(checked);
} }),
React.createElement("br", null),
React.createElement("button", { onClick: () => history.undo(), disabled: !historyEnabled }, "Undo"),
React.createElement("button", { onClick: () => history.undo(0), disabled: !historyEnabled }, "Undo all"),
React.createElement("button", { onClick: () => history.redo(), disabled: !historyEnabled }, "Redo"),
React.createElement("button", { onClick: () => history.redo(true), disabled: !historyEnabled }, "Redo all"),
React.createElement("button", { onClick: () => history.clear(), disabled: !historyEnabled }, "Clear"),
React.createElement("p", null),
React.createElement("button", { onClick: () => setSnapshot(history.snapshot()), disabled: !historyEnabled }, "Take snapshot"),
React.createElement("button", { onClick: () => history.restore(snapshot), disabled: snapshot === undefined || !historyEnabled }, "Restore snapshot"),
React.createElement("h4", null, "Changes:"),
React.createElement("ul", { style: { minHeight: '800px', overflowY: 'scroll' } }, history.entries.map((entry, index) => (React.createElement("div", { key: index, style: { display: 'flex' } },
React.createElement("li", { key: entry.id },
"[",
new Date(entry.timestamp).toLocaleTimeString(),
"]\u00A0",
entry.key,
"\u00A0 \"",
String(entry.previous),
"\" \u2192 \"",
String(entry.value),
"\"\u00A0",
React.createElement("button", { onClick: () => history.revert(index) }, "Revert"),
"\u00A0",
React.createElement("button", { onClick: () => history.undo(index) }, "Undo to here"))))))));
};
// Super Component to Include All Examples
export const Examples = () => {
return (React.createElement("div", null,
React.createElement("h2", null, "useReactive Examples"),
React.createElement(Counter, null),
React.createElement(ComputedPropertyExample, null),
React.createElement(AsyncExample, null),
React.createElement(NestedStateExample, null),
React.createElement(SingleEffectExample, null),
React.createElement(EffectDependencyExample, null),
React.createElement(ArrayExample, null),
React.createElement(MultipleEffectsExample, null),
React.createElement(ReactiveStoreProvider, null,
React.createElement(ReactiveStoreUser, null),
React.createElement(AnotherReactiveStoreUser, null)),
React.createElement(SubscribedCounter, null),
React.createElement(ExampleComponent, null),
React.createElement(ReactiveHistoryExample, null)));
};
//# sourceMappingURL=Examples.js.map