flarp 1.0.0

package/src/components/FField.js

@@ -0,0 +1,153 @@
+/**
+ * FField - Two-way form binding
+ * 
+ * @element f-field
+ * 
+ * @attr {string} path - XML path to bind
+ * @attr {string} store - Optional store ID reference
+ * @attr {string} type - Input type (text, number, checkbox, etc.)
+ * @attr {string} target - CSS selector for external input
+ * @attr {string} event - Event to listen for (default: input)
+ * 
+ * @example
+ * <f-field path="User.Name"></f-field>
+ * <f-field path="User.Age" type="number"></f-field>
+ * <f-field path="User.Active" type="checkbox"></f-field>
+ * <f-field path="User.Email" target="#emailInput"></f-field>
+ */
+
+import { findStore } from '../dom/find.js';
+
+export default class FField extends HTMLElement {
+  #input = null;
+  #unsubscribe = null;
+  #updating = false;
+
+  connectedCallback() {
+    this.#connect();
+  }
+
+  disconnectedCallback() {
+    this.#unsubscribe?.();
+  }
+
+  #connect() {
+    const path = this.getAttribute('path');
+    const type = this.getAttribute('type') || 'text';
+    const target = this.getAttribute('target');
+    const eventType = this.getAttribute('event') || 'input';
+
+    if (!path) {
+      console.warn('<f-field> requires path attribute');
+      return;
+    }
+
+    const store = this._store || findStore(this);
+    if (!store) {
+      console.warn('<f-field> could not find store');
+      return;
+    }
+
+    store.state.when('ready', () => {
+      const node = store.at(path);
+      if (!node) {
+        console.warn(`<f-field> path not found: ${path}`);
+        return;
+      }
+
+      // Get or create input
+      this.#input = target 
+        ? document.querySelector(target)
+        : this.#createInput(type);
+
+      if (!this.#input) return;
+
+      // Node → Input
+      this.#unsubscribe = node.subscribe(value => {
+        if (this.#updating) return;
+        this.#setInputValue(value, type);
+      });
+
+      // Input → Node
+      const handler = () => {
+        this.#updating = true;
+        node.value = this.#getInputValue(type);
+        this.#updating = false;
+      };
+
+      this.#input.addEventListener(eventType, handler);
+      if (eventType !== 'change') {
+        this.#input.addEventListener('change', handler);
+      }
+    });
+  }
+
+  #createInput(type) {
+    let input;
+
+    switch (type) {
+      case 'textarea':
+        input = document.createElement('textarea');
+        break;
+
+      case 'select':
+        input = document.createElement('select');
+        // Copy option children
+        for (const opt of this.querySelectorAll('option')) {
+          input.appendChild(opt.cloneNode(true));
+        }
+        break;
+
+      default:
+        input = document.createElement('input');
+        input.type = type;
+    }
+
+    // Copy attributes
+    for (const attr of ['placeholder', 'class', 'id', 'name', 'min', 'max', 'step', 'pattern', 'required', 'disabled', 'readonly']) {
+      const val = this.getAttribute(attr);
+      if (val !== null) input.setAttribute(attr, val);
+    }
+
+    this.replaceWith(input);
+    return input;
+  }
+
+  #setInputValue(value, type) {
+    if (!this.#input) return;
+
+    switch (type) {
+      case 'checkbox':
+        this.#input.checked = value === 'true' || value === '1';
+        break;
+      case 'radio':
+        this.#input.checked = this.#input.value === value;
+        break;
+      default:
+        this.#input.value = value ?? '';
+    }
+  }
+
+  #getInputValue(type) {
+    if (!this.#input) return '';
+
+    switch (type) {
+      case 'checkbox':
+        return this.#input.checked ? 'true' : 'false';
+      case 'radio':
+        return this.#input.checked ? this.#input.value : '';
+      default:
+        return this.#input.value;
+    }
+  }
+
+  get input() {
+    return this.#input;
+  }
+
+  focus() {
+    this.#input?.focus();
+  }
+}
+
+customElements.define('f-field', FField);

package/src/components/FStore.js

@@ -0,0 +1,332 @@
+/**
+ * FStore - Main XML state container
+ * 
+ * @element f-state
+ * 
+ * @attr {string} key - Storage key for persistence
+ * @attr {string} src - URL to load XML from
+ * @attr {number} autosave - Autosave debounce in ms
+ * 
+ * @example
+ * <f-state key="myapp" autosave="500">
+ *   <User>
+ *     <n>Alice</n>
+ *     <Role>Developer</Role>
+ *   </User>
+ * </f-state>
+ * 
+ * <script>
+ *   const store = document.querySelector('f-state');
+ *   
+ *   store.state.when('ready', () => {
+ *     const name = store.at('User.Name');
+ *     name.subscribe(v => console.log('Name:', v));
+ *   });
+ * </script>
+ */
+
+import Signal from '../core/Signal.js';
+import State from '../core/State.js';
+import Tree from '../xml/Tree.js';
+import Node, { AttrNode } from '../xml/Node.js';
+import * as Path from '../xml/Path.js';
+import * as Persist from '../sync/Persist.js';
+import Channel, { Protocol } from '../sync/Channel.js';
+
+export default class FStore extends HTMLElement {
+  #tree;
+  #state = new State();
+  #actions = new Map();
+  #storage = null;
+  #channel = null;
+  #saveDebounced = null;
+  #parser = new DOMParser();
+
+  // Expose for scoped stores
+  static Node = Node;
+  static AttrNode = AttrNode;
+  static Path = Path;
+
+  constructor() {
+    super();
+    this.#tree = new Tree(this);
+  }
+
+  connectedCallback() {
+    this.#initialize();
+  }
+
+  disconnectedCallback() {
+    this.#channel?.close();
+    this.#tree.dispose();
+    this.#state.dispose();
+  }
+
+  async #initialize() {
+    const key = this.getAttribute('key');
+    const src = this.getAttribute('src');
+    const autosave = parseInt(this.getAttribute('autosave') || '0', 10);
+
+    // Setup persistence
+    if (key) {
+      this.#storage = Persist.auto();
+      
+      // Try to restore from storage
+      const stored = await this.#storage.get(key);
+      if (stored) {
+        this.#applyXML(stored, false);
+      }
+
+      // Setup cross-tab sync
+      this.#channel = new Channel(key);
+      this.#channel.onMessage(msg => {
+        if (msg.type === Protocol.UPDATE) {
+          this.#applyXML(msg.xml, false);
+        }
+      });
+    }
+
+    // Load from URL if no stored state
+    if (src && this.#tree.empty) {
+      await this.load(src);
+    }
+
+    // Parse inline XML if present
+    if (this.#tree.empty && this.innerHTML.trim()) {
+      this.#parseInline();
+    }
+
+    // Setup autosave
+    if (autosave > 0 && key) {
+      this.#saveDebounced = Persist.debounce(() => this.#save(), autosave);
+      this.#tree.onChange(() => this.#saveDebounced());
+    }
+
+    // Mark ready
+    this.#state.set('ready');
+  }
+
+  #parseInline() {
+    const xml = this.innerHTML;
+    const doc = this.#parser.parseFromString(
+      `<root>${xml}</root>`,
+      'application/xml'
+    );
+
+    const error = doc.querySelector('parsererror');
+    if (error) {
+      console.error('Flarp parse error:', error.textContent);
+      this.#state.set('error');
+      return;
+    }
+
+    this.innerHTML = '';
+    for (const child of Array.from(doc.documentElement.children)) {
+      this.appendChild(document.importNode(child, true));
+    }
+  }
+
+  #applyXML(xml, broadcast = true) {
+    const doc = this.#parser.parseFromString(
+      `<root>${xml}</root>`,
+      'application/xml'
+    );
+
+    const error = doc.querySelector('parsererror');
+    if (error) {
+      this.#state.set('error');
+      return false;
+    }
+
+    this.innerHTML = '';
+    for (const child of Array.from(doc.documentElement.children)) {
+      this.appendChild(document.importNode(child, true));
+    }
+
+    if (broadcast && this.#channel) {
+      this.#channel.send(Protocol.update(xml));
+    }
+
+    return true;
+  }
+
+  async #save() {
+    const key = this.getAttribute('key');
+    if (!key || !this.#storage) return;
+
+    const xml = this.serialize();
+    await this.#storage.set(key, xml);
+    
+    if (this.#channel) {
+      this.#channel.send(Protocol.update(xml));
+    }
+
+    this.#state.set('saved');
+  }
+
+  // ========== Public API ==========
+
+  /**
+   * Get state machine
+   */
+  get state() {
+    return this.#state;
+  }
+
+  /**
+   * Get reactive node at path
+   * @param {string} path
+   * @returns {Node|AttrNode|null}
+   */
+  at(path) {
+    return this.#tree.at(path);
+  }
+
+  /**
+   * Get all nodes matching path
+   * @param {string} path
+   * @returns {Node[]}
+   */
+  query(path) {
+    return this.#tree.query(path);
+  }
+
+  /**
+   * Set value at path
+   * @param {string} path
+   * @param {string} value
+   */
+  set(path, value) {
+    this.#tree.set(path, value);
+  }
+
+  /**
+   * Add XML fragment
+   * @param {string} parentPath
+   * @param {string} xml
+   * @returns {Node|Node[]}
+   */
+  add(parentPath, xml) {
+    return this.#tree.add(parentPath, xml);
+  }
+
+  /**
+   * Remove node at path
+   * @param {string} path
+   * @returns {boolean}
+   */
+  remove(path) {
+    return this.#tree.remove(path);
+  }
+
+  /**
+   * Serialize entire state
+   * @returns {string}
+   */
+  serialize() {
+    return this.innerHTML;
+  }
+
+  /**
+   * Get/set raw XML
+   */
+  get xml() {
+    return this.serialize();
+  }
+
+  set xml(value) {
+    this.#applyXML(value);
+  }
+
+  /**
+   * Load from URL
+   * @param {string} url
+   */
+  async load(url) {
+    this.#state.set('loading');
+    
+    try {
+      const response = await fetch(url || this.getAttribute('src'));
+      if (!response.ok) throw new Error(`HTTP ${response.status}`);
+      
+      const text = await response.text();
+      this.#applyXML(text);
+      this.#state.clear('loading');
+      this.#state.set('loaded');
+    } catch (error) {
+      console.error('Flarp load error:', error);
+      this.#state.clear('loading');
+      this.#state.set('error');
+    }
+  }
+
+  /**
+   * Force save to storage
+   */
+  async save() {
+    await this.#save();
+  }
+
+  /**
+   * Clear stored state
+   */
+  async clear() {
+    const key = this.getAttribute('key');
+    if (key && this.#storage) {
+      await this.#storage.remove(key);
+    }
+  }
+
+  // ========== Event Sourcing ==========
+
+  /**
+   * Register action handler
+   * @param {string} action
+   * @param {Function} handler
+   * @returns {Function} Unsubscribe
+   */
+  on(action, handler) {
+    if (!this.#actions.has(action)) {
+      this.#actions.set(action, new Set());
+    }
+    this.#actions.get(action).add(handler);
+    return () => this.#actions.get(action)?.delete(handler);
+  }
+
+  /**
+   * Emit action
+   * @param {string} action
+   * @param {*} payload
+   */
+  emit(action, payload) {
+    const handlers = this.#actions.get(action);
+    if (handlers) {
+      for (const handler of handlers) {
+        try {
+          handler.call(this, payload, this);
+        } catch (e) {
+          console.error(`Action error (${action}):`, e);
+        }
+      }
+    }
+
+    // Also dispatch as DOM event
+    this.dispatchEvent(new CustomEvent(`action:${action}`, {
+      detail: payload,
+      bubbles: true
+    }));
+  }
+
+  // ========== Tree subscription ==========
+
+  /**
+   * Subscribe to any tree change
+   * @param {Function} fn
+   * @returns {Function} Unsubscribe
+   */
+  onChange(fn) {
+    return this.#tree.onChange(fn);
+  }
+}
+
+customElements.define('f-state', FStore);

package/src/components/FText.js

@@ -0,0 +1,73 @@
+/**
+ * FText - Reactive text display
+ * 
+ * @element f-text
+ * 
+ * @attr {string} path - XML path to display
+ * @attr {string} store - Optional store ID reference
+ * @attr {string} format - Optional format (uppercase, lowercase, number, etc.)
+ * @attr {string} default - Default value if path not found
+ * 
+ * @example
+ * <f-text path="User.Name"></f-text>
+ * <f-text path="Product.Price" format="currency"></f-text>
+ */
+
+import { findStore } from '../dom/find.js';
+
+const FORMATS = {
+  uppercase: v => String(v).toUpperCase(),
+  lowercase: v => String(v).toLowerCase(),
+  capitalize: v => String(v).charAt(0).toUpperCase() + String(v).slice(1),
+  number: v => Number(v).toLocaleString(),
+  currency: v => Number(v).toLocaleString(undefined, { style: 'currency', currency: 'USD' }),
+  percent: v => Number(v).toLocaleString(undefined, { style: 'percent' }),
+  trim: v => String(v).trim(),
+};
+
+export default class FText extends HTMLElement {
+  #unsubscribe = null;
+
+  connectedCallback() {
+    this.#connect();
+  }
+
+  disconnectedCallback() {
+    this.#unsubscribe?.();
+  }
+
+  #connect() {
+    const path = this.getAttribute('path');
+    const format = this.getAttribute('format');
+    const defaultValue = this.getAttribute('default') || '';
+
+    const store = this._store || findStore(this);
+    if (!store) {
+      console.warn('<f-text> could not find store');
+      return;
+    }
+
+    // Wait for store to be ready
+    store.state.when('ready', () => {
+      const node = store.at(path);
+      
+      if (!node) {
+        this.textContent = defaultValue;
+        return;
+      }
+
+      this.#unsubscribe = node.subscribe(value => {
+        const formatted = this.#format(value ?? defaultValue, format);
+        this.textContent = formatted;
+      });
+    });
+  }
+
+  #format(value, format) {
+    if (!format) return value;
+    const formatter = FORMATS[format];
+    return formatter ? formatter(value) : value;
+  }
+}
+
+customElements.define('f-text', FText);