# 📦 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.

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

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

username.set('Michael');
```

---

### 🔹 `createPersistentState(key, defaultValue)`

Wie `createState`, aber mit `localStorage`-Speicherung.

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

---

### 🔹 `state.subscribe(callback)`

Reagiert auf Änderungen des Zustands.

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

---

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

Bindet einen State an ein DOM-Element.

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

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

---

### 🔹 `bindInputToState(inputElement, state)`

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

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

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

---

### 🔹 `initStateBindings()`

Initialisiert alle Elemente mit `data-bind-*` automatisch.

```html
<!-- 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>
```

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

---

### 🔹 `createComputedState([dependencies], computeFn)`

Leitet einen State aus anderen ab.

```js
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.

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

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

---

### 🔹 `enableStateLogging(state, label?)`

Gibt alle Änderungen in der Konsole aus.

```js
enableStateLogging(username, 'Benutzername');
```

---

## 📁 `core/events.js` – EventBus & ActionDispatcher

### 🔹 `on(eventName, callback)`

Abonniert benutzerdefinierte Events.

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

---

### 🔹 `emit(eventName, payload)`

Sendet ein Event global.

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

---

### 🔹 `registerActionListener(callback)`

Reagiert auf alle ausgelösten Aktionen.

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

---

### 🔹 `dispatchAction(type, payload?)`

Löst eine benannte Aktion aus.

```js
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 |