michaelschiemer/resources/js/docs/state.md

📦 Framework-Module: state.js & events.js

Diese Dokumentation beschreibt die Verwendung der globalen State-Verwaltung und des Event-/Action-Dispatching in deinem Framework.

---

📁 core/state.js – Globale Zustandsverwaltung

🔹 createState(key, initialValue)

Erzeugt einen flüchtigen (nicht-persistenten) globalen Zustand.

const username = createState('username', 'Gast');

console.log(username.get()); // → "Gast"

username.set('Michael');

---

🔹 createPersistentState(key, defaultValue)

Wie createState, aber mit localStorage-Speicherung.

const theme = createPersistentState('theme', 'light');
theme.set('dark'); // Wird gespeichert

---

🔹 state.subscribe(callback)

Reagiert auf Änderungen des Zustands.

username.subscribe((val) => {
    console.log('Neuer Benutzername:', val);
});

---

🔹 bindStateToElement({ state, element, property, attributeName })

Bindet einen State an ein DOM-Element.

bindStateToElement({
    state: username,
    element: document.querySelector('#userDisplay'),
    property: 'text'
});

<span id="userDisplay"></span>

---

🔹 bindInputToState(inputElement, state)

Erzeugt eine Zwei-Wege-Bindung zwischen Eingabefeld und State.

bindInputToState(document.querySelector('#nameInput'), username);

<input id="nameInput" type="text" />

---

🔹 initStateBindings()

Initialisiert alle Elemente mit data-bind-* automatisch.

<!-- Einfache Textbindung -->
<span data-bind="username"></span>

<!-- Input mit persistenter Speicherung -->
<input data-bind-input="username" data-persistent />

<!-- Attributbindung -->
<img data-bind-attr="profilePic" data-bind-attr-name="src" />

<!-- Klassenbindung -->
<div data-bind-class="themeClass"></div>

initStateBindings(); // Einmalig in initApp() aufrufen

---

🔹 createComputedState([dependencies], computeFn)

Leitet einen State aus anderen ab.

const first = createState('first', 'Max');
const last = createState('last', 'Mustermann');

const fullName = createComputedState([first, last], (f, l) => \`\${f} \${l}\`);

---

🔹 enableUndoRedoForState(state)

Fügt Undo/Redo-Funktionalität hinzu.

const message = createState('message', '');
const history = enableUndoRedoForState(message);

history.undo();
history.redo();

---

🔹 enableStateLogging(state, label?)

Gibt alle Änderungen in der Konsole aus.

enableStateLogging(username, 'Benutzername');

---

📁 core/events.js – EventBus & ActionDispatcher

🔹 on(eventName, callback)

Abonniert benutzerdefinierte Events.

on('user:login', user => {
    console.log('Login:', user.name);
});

---

🔹 emit(eventName, payload)

Sendet ein Event global.

emit('user:login', { name: 'Max', id: 123 });

---

🔹 registerActionListener(callback)

Reagiert auf alle ausgelösten Aktionen.

registerActionListener(({ type, payload }) => {
    if (type === 'counter/increment') {
        payload.state.set(payload.state.get() + 1);
    }
});

---

🔹 dispatchAction(type, payload?)

Löst eine benannte Aktion aus.

dispatchAction('counter/increment', { state: counter });

---

✅ Zusammenfassung

Funktion	Zweck
createState / createPersistentState	Reaktiver globaler Zustand
bindStateToElement / bindInputToState	DOM-Bindings
createComputedState	Abhängiger Zustand
enableUndoRedoForState	History / Undo
enableStateLogging	Debugging
on / emit	Lose gekoppelte Event-Kommunikation
registerActionListener / dispatchAction	Zentrale Aktionssteuerung