asciitorium/dist/examples/StateBasics.js

an ASCII CLUI framework

import { jsx as _jsx, jsxs as _jsxs } from "asciitorium/jsx-runtime";
import { Line, Column, Text, State, PersistentState, TextInput, } from "../index.js";
import { BaseStyle } from './constants.js';
/**
 * State Basics
 *
 * Guide to reactive state management in asciitorium.
 */
export const StateBasics = () => {
    // Regular State - resets when page reloads
    const textValue = new State('Type something here!');
    // PersistentState - persists across page reloads
    const persistentCounter = new PersistentState(0, 'demo-persistent-counter');
    return (_jsxs(Column, { style: BaseStyle, label: "State Basics", children: [_jsx(Text, { width: "90%", gap: { top: 1 }, children: "State (In-Memory Reactivity)" }), _jsx(Line, { width: "90%" }), _jsx(Text, { width: "90%", gap: { left: 4, bottom: 1 }, children: "State provides reactive variables that trigger re-renders when changed. Use for temporary values that reset on page reload." }), _jsxs(Column, { width: "90%", align: "center", gap: { bottom: 1 }, children: [_jsx(TextInput, { width: "90%", hotkey: "i", value: textValue }), _jsxs(Text, { gap: { top: 1, bottom: 1 }, children: ["You typed: ", textValue] })] }), _jsx(Text, { width: "90%", children: "State API" }), _jsx(Line, { width: "90%" }), _jsx(Text, { width: "90%", gap: { left: 6 }, children: "\u2022 new State<T>(initialValue) \u2014 Create reactive state \u00B6 \u2022 state.value \u2014 Get or set the current values \u00B6" }), _jsx(Text, { width: "90%", children: "PersistentState (localStorage Backed)" }), _jsx(Line, { width: "90%" }), _jsx(Text, { width: "90%", gap: { left: 4, bottom: 1 }, children: "Asciitorium also supports PersistentState in the browser which extends State with automatic localStorage persistence. Values survive page reloads." }), _jsx(Text, { width: "90%", children: "Tip: You can also use subscribe() for custom side effects when state changes." })] }));
};