- pwa kinda working

OnlyPrompt.Frontend/js/pwa.js

@@ -49,38 +49,36 @@ export class Route {
 }
 
 export class ComponentInput {
-  constructor(
+  constructor(defaultValue, options = {}) {
-    defaultValue,
-    options = {
-      transform: (value) => value,
-      validate: (value) => true,
-      alias: null,
-    },
-  ) {
     this._value = defaultValue;
-    this.transform = options.transform;
+    this.transform = options.transform || ((v) => v);
-    this.validate = options.validate;
+    this.validate = options.validate || (() => true);
-    this.alias = options.alias;
+    this.alias = options.alias || null;
     this._isComponentInput = true;
+    this._owner = null;
     const self = this;
     const fn = function () {
       return self._value;
     };
     return new Proxy(fn, {
       get(target, prop) {
-        if (prop === Symbol.toPrimitive) return (hint) => self._value;
+        if (prop === "set") return (v) => self._set(v);
+        if (prop === "_isComponentInput") return true;
+        if (prop === "_self") return self;
+        if (prop === "alias") return self.alias;
+        if (prop === Symbol.toPrimitive) return () => self._value;
         if (prop === "valueOf") return () => self._value;
-        if (prop in self) return self[prop];
+        if (prop === "toString") return () => String(self._value);
         const inner = self._value;
-        const value = inner[prop];
+        if (inner == null) return undefined;
-        return typeof value === "function" ? value.bind(inner) : value;
+        const val = inner[prop];
+        return typeof val === "function" ? val.bind(inner) : val;
       },
       set(target, prop, value) {
-        if (Object.prototype.hasOwnProperty.call(self, prop)) {
+        if (self._value != null) {
-          self[prop] = value;
-          return true;
-        }
           self._value[prop] = value;
+          if (self._owner) self._owner.requestUpdate();
+        }
         return true;
       },
       apply(target, thisArg, args) {
@@ -89,12 +87,13 @@ export class ComponentInput {
     });
   }
 
-  set(newValue) {
+  _set(newValue) {
-    const transformedValue = this.transform(newValue);
+    const transformed = this.transform(newValue);
-    if (!this.validate(transformedValue)) {
+    if (!this.validate(transformed)) {
       throw new Error("Invalid value");
     }
-    this._value = transformedValue;
+    this._value = transformed;
+    if (this._owner) this._owner.requestUpdate();
   }
 
   static [Symbol.hasInstance](instance) {
@@ -170,19 +169,22 @@ export class Component extends EventTarget {
     return new Proxy(this, {
       get(target, prop, receiver) {
         const value = Reflect.get(target, prop, target);
-        return typeof value === "function" && typeof value.bind === "function"
+        if (typeof value === "function" && typeof value.bind === "function") {
-          ? value.bind(receiver)
+          return prop in EventTarget.prototype
-          : value;
+            ? value.bind(target)
+            : value.bind(receiver);
+        }
+        return value;
       },
       set(target, prop, value) {
         if (target[prop] instanceof ComponentInput) {
           target[prop].set(value);
+          return true;
         } else if (target[prop] instanceof ViewChild) {
           target[prop]._setValue(value);
         } else {
           target[prop] = value;
         }
-
         target.requestUpdate();
         return true;
       },
@@ -255,9 +257,10 @@ export class Router {
       this.activeController = controller;
       this.activeTemplate = template;
       this.insertIncludes(routeMatch.route);
+      this._boundUpdateHandler = this.handleUpdateRequest.bind(this);
       this.activeController.addEventListener(
         "requestUpdate",
-        this.handleUpdateRequest.bind(this),
+        this._boundUpdateHandler,
       );
       this.renderActiveComponent();
     }
@@ -267,7 +270,7 @@ export class Router {
     if (this.activeController) {
       this.activeController.removeEventListener(
         "requestUpdate",
-        this.handleUpdateRequest,
+        this._boundUpdateHandler,
       );
       this.activeController.onDestroy();
       this.activeController = null;
@@ -361,10 +364,27 @@ export class Router {
 
   createComponentInstance(component, params) {
     const instance = new component();
+
+    for (const key of Object.keys(instance)) {
+      const val = instance[key];
+      if (val instanceof ComponentInput) {
+        val._self._owner = instance;
+      }
+    }
+
     instance.onInit();
-    for (const [key, value] of Object.entries(params)) {
+
-      if (instance[key] instanceof ComponentInput) {
+    for (const [paramKey, paramValue] of Object.entries(params)) {
-        instance[key].set(value);
+      if (instance[paramKey] instanceof ComponentInput) {
+        instance[paramKey].set(paramValue);
+        continue;
+      }
+      for (const key of Object.keys(instance)) {
+        const val = instance[key];
+        if (val instanceof ComponentInput && val.alias === paramKey) {
+          val.set(paramValue);
+          break;
+        }
       }
     }