@kupola/kupola 1.2.0 → 1.4.0

package/js/data-bind.js

@@ -1,3 +1,25 @@
+/**
+ * Kupola Data Bind — Reactive data binding, event bus, and state management.
+ * Provides KupolaDataBind (Proxy-based binding), KupolaEventBus, KupolaStore, and ref().
+ * @module kupola/data-bind
+ */
+
+/**
+ * Basic HTML sanitizer — removes <script>, <iframe>, <object>, <embed>, and on* event attributes.
+ * @param {string} html
+ * @returns {string}
+ */
+function sanitizeHtml(html) {
+  if (!html) return '';
+  const str = String(html);
+  return str
+    .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
+    .replace(/<iframe\b[^<]*(?:(?!<\/iframe>)<[^<]*)*<\/iframe>/gi, '')
+    .replace(/<object\b[^<]*(?:(?!<\/object>)<[^<]*)*<\/object>/gi, '')
+    .replace(/<embed\b[^>]*\/?>/gi, '')
+    .replace(/\bon\w+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, '');
+}
+
 class TrieNode {
   constructor() {
     this.children = {};
@@ -399,8 +421,9 @@ class KupolaDataBind {
           }
           break;
         case 'html':
-          if (element.innerHTML !== String(value ?? '')) {
-            element.innerHTML = value ?? '';
+          const sanitized = sanitizeHtml(value);
+          if (element.innerHTML !== sanitized) {
+            element.innerHTML = sanitized;
           }
           break;
         case 'value':
@@ -1258,29 +1281,63 @@ class KupolaEventBus {
   }
 }
 
+// ============================================================
+// Lightweight ref() — standalone reactive primitive
+// ============================================================
+
+function ref(initialValue = null) {
+    const refObj = {
+        _value: initialValue,
+        _subscribers: new Set()
+    };
+
+    Object.defineProperty(refObj, 'value', {
+        configurable: true,
+        enumerable: true,
+        get() { return refObj._value; },
+        set(newValue) {
+            if (newValue !== refObj._value) {
+                refObj._value = newValue;
+                refObj._subscribers.forEach(sub => sub(newValue));
+            }
+        }
+    });
+
+    return refObj;
+}
+
+/** @type {KupolaDataBind} Global data binding instance */
 const kupolaData = new KupolaDataBind();
+/** @type {KupolaEventBus} Global event bus instance */
 const kupolaEvents = new KupolaEventBus();
+/** @type {KupolaStoreManager} Global store manager instance */
 const kupolaStoreManager = new KupolaStoreManager();
 
+/** Create a named reactive store with state, getters, mutations, and actions. */
 function createStore(name, options) {
   return kupolaStoreManager.createStore(name, options);
 }
 
+/** Get a previously created store by name. */
 function getStore(name) {
   return kupolaStoreManager.getStore(name);
 }
 
-document.addEventListener('DOMContentLoaded', () => {
-  kupolaData.loadPersisted();
-  kupolaData.bind();
-});
-
-window.KupolaDataBind = KupolaDataBind;
-window.KupolaEventBus = KupolaEventBus;
-window.KupolaStore = KupolaStore;
-window.KupolaStoreManager = KupolaStoreManager;
-window.kupolaData = kupolaData;
-window.kupolaEvents = kupolaEvents;
-window.kupolaStoreManager = kupolaStoreManager;
-window.createStore = createStore;
-window.getStore = getStore;
+export { TrieNode, PathTrie, REACTIVE_SYMBOLS };
+export { KupolaDataBind, KupolaEventBus, KupolaStore, KupolaStoreManager };
+export { kupolaData, kupolaEvents, kupolaStoreManager };
+export { createStore, getStore };
+export { ref };
+
+if (typeof window !== 'undefined') {
+  window.KupolaDataBind = KupolaDataBind;
+  window.KupolaEventBus = KupolaEventBus;
+  window.KupolaStore = KupolaStore;
+  window.KupolaStoreManager = KupolaStoreManager;
+  window.kupolaData = kupolaData;
+  window.kupolaEvents = kupolaEvents;
+  window.kupolaStoreManager = kupolaStoreManager;
+  window.createStore = createStore;
+  window.getStore = getStore;
+  window.kupolaRef = ref;
+}