@ynor/ynor 1.0.1

package/src/lib/core/runtime.js

@@ -0,0 +1,138 @@
+// src/lib/core/runtime.js
+export class YnorRuntime {
+  constructor() {
+    this.components = new Map();
+    this.stores = new Map();
+    this.mounted = new Set();
+  }
+
+  registerComponent(name, component) {
+    this.components.set(name, component);
+    if (typeof window !== 'undefined') {
+      window[`Ynor${name}`] = component;
+    }
+    return this;
+  }
+
+  createStore(key, initialValue) {
+    if (this.stores.has(key)) {
+      return this.stores.get(key);
+    }
+
+    let value = initialValue;
+    const subscribers = new Set();
+    const store = {
+      get: () => value,
+      set: (newValue) => {
+        if (newValue !== value) {
+          value = newValue;
+          subscribers.forEach(fn => fn(value));
+        }
+      },
+      subscribe: (fn) => {
+        subscribers.add(fn);
+        fn(value);
+        return () => subscribers.delete(fn);
+      },
+      update: (fn) => {
+        const newValue = fn(value);
+        store.set(newValue);
+      }
+    };
+
+    this.stores.set(key, store);
+    return store;
+  }
+
+  mount(Component, target, props = {}) {
+    console.log('🔧 Mounting component:', Component.name || 'Unknown');
+    console.log('📦 Props:', props);
+    console.log('🎯 Target:', target);
+    
+    try {
+      const instance = new Component({
+        target,
+        props
+      });
+      console.log('✅ Component instance created:', instance);
+      console.log('✅ Instance has render?', typeof instance.render === 'function');
+      console.log('✅ Instance has $mount?', typeof instance.$mount === 'function');
+      
+      if (instance && instance.$mount) {
+        instance.$mount(target);
+        console.log('✅ Component mounted');
+        console.log('📦 Element after mount:', instance._element);
+        if (instance._element) {
+          console.log('📦 Element innerHTML:', instance._element.innerHTML);
+        }
+      } else {
+        console.warn('⚠️ Component has no $mount method');
+      }
+      
+      this.mounted.add(instance);
+      return instance;
+    } catch (error) {
+      console.error('❌ Error mounting component:', error);
+      throw error;
+    }
+  }
+
+  destroy(instance) {
+    if (instance && instance.$destroy) {
+      instance.$destroy();
+      this.mounted.delete(instance);
+    }
+  }
+}
+
+export const runtime = new YnorRuntime();
+export const store = (key, initial) => runtime.createStore(key, initial);
+export const mount = (Component, target, props) => runtime.mount(Component, target, props);
+
+export class YnorComponent {
+  constructor(options = {}) {
+    this.target = options.target || document.body;
+    this.props = options.props || {};
+    this._destroyed = false;
+    this._element = null;
+  }
+
+  render() {
+    throw new Error('Component must implement render()');
+  }
+
+  onMount() {}
+  onDestroy() {}
+
+  _update() {
+    if (this._destroyed) return;
+    const newElement = this.render();
+    if (this._element && this._element.parentNode) {
+      this._element.parentNode.replaceChild(newElement, this._element);
+    } else if (this.target) {
+      this.target.appendChild(newElement);
+    }
+    this._element = newElement;
+  }
+
+  $mount(target = this.target) {
+    if (this._destroyed) return;
+    this.target = target;
+    const element = this.render();
+    if (element && this.target) {
+      this.target.appendChild(element);
+    }
+    this._element = element;
+    this.onMount();
+    return this;
+  }
+
+  $destroy() {
+    if (this._destroyed) return;
+    this._destroyed = true;
+    this.onDestroy();
+    if (this._element && this._element.parentNode) {
+      this._element.parentNode.removeChild(this._element);
+    }
+  }
+}