@knotx/decorators 0.2.3 → 0.2.5

package/dist/index.js

@@ -3,92 +3,94 @@ import { BehaviorSubject, combineLatest } from 'rxjs';
 import { get } from 'lodash-es';
 import { jsx } from '@knotx/jsx/jsx-runtime';
 
-function requireEngine(plugin) {
-  const engineSymbol = getSymbol("engine");
-  if (!Reflect.has(plugin, engineSymbol)) {
-    Reflect.set(plugin, engineSymbol, new BehaviorSubject(null));
-  }
-  return Reflect.get(plugin, engineSymbol);
+function getEngine() {
+  return Reflect.get(this, getSymbol("engine")).value;
+}
+function subscribeEngine(callback) {
+  this.subscriptions.push(Reflect.get(this, getSymbol("engine")).subscribe((engine) => {
+    if (!engine)
+      return;
+    callback(engine);
+  }));
+}
+function pushSubscription(callback) {
+  this.subscriptions.push(callback);
+}
+function createBehaviorSubject(plugin, key, value) {
+  Reflect.set(plugin, key, new BehaviorSubject(value));
+  pushSubscription.call(plugin, () => {
+    var _a;
+    return (_a = Reflect.get(plugin, key)) == null ? void 0 : _a.complete();
+  });
+  return true;
+}
+function getPropertyBehaviorSubjectKey(key) {
+  return `__${key}$__`;
+}
+function mergePluginHookFunction(...[key, newFunction]) {
+  const original = this[key];
+  this[key] = (...args) => {
+    original == null ? void 0 : original.apply(this, args);
+    newFunction.apply(this, args);
+  };
 }
 
 function edgeOperator() {
-  return function(_target, { name, static: isStatic, private: isPrivate, addInitializer }) {
-    if (isStatic || isPrivate) {
+  return function(_, context) {
+    if (context.static) {
       return;
     }
-    addInitializer(function() {
-      const operator = Reflect.get(this, name);
-      if (typeof operator !== "function") {
-        throw new TypeError("Edge operator must be a function");
-      }
-      requireEngine(this).subscribe((engine) => {
-        if (!engine)
-          return;
-        const boundOperator = operator.bind(this);
-        Reflect.set(this, name, (...args) => {
-          const operations = boundOperator(...args);
-          if (Array.isArray(operations)) {
+    context.addInitializer(function() {
+      const original = this[context.name];
+      subscribeEngine.call(this, (engine) => {
+        this[context.name] = (...args) => {
+          const operations = original.apply(this, args);
+          if (Array.isArray(operations) && operations.length > 0) {
             engine.dispatchEdgeOperation({
               type: "batch",
               operations
             });
           }
           return operations;
-        });
+        };
       });
     });
   };
 }
 
-const edgePipeSymbol = Symbol("edgePipe");
 function edgePipe() {
-  return function(_target, { name, static: isStatic, private: isPrivate, addInitializer }) {
-    if (isStatic || isPrivate) {
+  return function(_, context) {
+    if (context.static) {
       return;
     }
-    addInitializer(function() {
-      const pipeFactory = Reflect.get(this, name);
-      if (typeof pipeFactory !== "function") {
-        throw new TypeError("Edge pipe must be a function");
-      }
-      requireEngine(this).subscribe((engine) => {
-        if (!engine)
-          return;
-        const pipe = pipeFactory.call(this);
-        engine.addEdgePipe(pipe);
-        if (!this[edgePipeSymbol]) {
-          this[edgePipeSymbol] = {};
-        }
-        this[edgePipeSymbol][name] = pipe;
+    context.addInitializer(function() {
+      subscribeEngine.call(this, (engine) => {
+        pushSubscription.call(this, engine.addEdgePipe(this[context.name]()));
       });
     });
   };
 }
 
 function edgeType(type) {
-  return function(_target, { name, static: isStatic, private: isPrivate, addInitializer }) {
-    if (isStatic || isPrivate) {
+  return function(_, context) {
+    if (context.static) {
       return;
     }
-    addInitializer(function() {
-      const renderer = Reflect.get(this, name);
-      if (typeof renderer !== "function") {
-        throw new TypeError("Edge renderer must be a function");
-      }
-      requireEngine(this).subscribe((engine) => engine == null ? void 0 : engine.registerEdgeRenderer(type, renderer.bind(this)));
+    context.addInitializer(function() {
+      subscribeEngine.call(this, (engine) => {
+        pushSubscription.call(this, engine.registerEdgeRenderer(type, this[context.name].bind(this)));
+      });
     });
   };
 }
 
 function injectData(context, engineKey, selector) {
   context.addInitializer(function() {
-    const engine$ = requireEngine(this);
     Reflect.defineProperty(this, context.name, {
       get() {
-        const engine = engine$.value;
-        if (!engine) {
+        const engine = getEngine.call(this);
+        if (!engine)
           return void 0;
-        }
         const engineKey$ = `${String(engineKey)}$`;
         const paths = get(engine, engineKey$) ? [engineKey$] : [engineKey];
         return Runtime.getInstance().getValue(engine, { paths, selector });
@@ -100,7 +102,7 @@ function injectData(context, engineKey, selector) {
 function injectMethod(context, methodKey) {
   context.addInitializer(function() {
     Reflect.set(this, context.name, (...methodArgs) => {
-      const engine = requireEngine(this).value;
+      const engine = getEngine.call(this);
       const engineMethod = engine == null ? void 0 : engine[methodKey];
       if (!engineMethod || typeof engineMethod !== "function") {
         throw new Error(`Engine method ${String(methodKey)} not found`);
@@ -112,10 +114,9 @@ function injectMethod(context, methodKey) {
 
 function injectPluginData(context, pluginName, property, selector) {
   context.addInitializer(function() {
-    const engine$ = requireEngine(this);
     Reflect.defineProperty(this, context.name, {
       get() {
-        const engine = engine$.value;
+        const engine = getEngine.call(this);
         if (!engine) {
           return void 0;
         }
@@ -229,7 +230,6 @@ function isBehaviorSubject(value) {
 function injectable(context, injectableSelector) {
   const injectableStateSymbol = Symbol(`injectable:${String(context.name)}`);
   context.addInitializer(function() {
-    const engine$ = requireEngine(this);
     Reflect.set(this, injectableStateSymbol, {
       initialized: false,
       accessRecord: null,
@@ -241,7 +241,7 @@ function injectable(context, injectableSelector) {
     });
     Reflect.defineProperty(this, context.name, {
       get() {
-        const engine = engine$.value;
+        const engine = getEngine.call(this);
         if (!engine) {
           return void 0;
         }
@@ -310,43 +310,89 @@ function createInjectProxy(...presets) {
 }
 const inject = createInjectProxy();
 
+function observable() {
+  return function(_, context) {
+    if (context.static || typeof context.name !== "string") {
+      return;
+    }
+    context.addInitializer(function() {
+      const behaviorKey = getPropertyBehaviorSubjectKey(context.name);
+      if (createBehaviorSubject(this, behaviorKey, this[context.name])) {
+        subscribeEngine.call(this, (engine) => {
+          Reflect.defineProperty(this, context.name, {
+            get() {
+              return Runtime.getInstance().getValue(engine, {
+                paths: [],
+                matcher: () => this[behaviorKey]
+              });
+            },
+            set(value) {
+              this[behaviorKey].next(value);
+            }
+          });
+        });
+      }
+    });
+  };
+}
+
+function config() {
+  return function(_, context) {
+    if (context.static) {
+      return;
+    }
+    observable()(_, context);
+    context.addInitializer(function() {
+      const updateConfig = (config2) => {
+        this[context.name] = config2;
+      };
+      mergePluginHookFunction.call(this, "onInit", updateConfig);
+      mergePluginHookFunction.call(this, "onConfigChange", updateConfig);
+    });
+  };
+}
+
+function OnInit(_, context) {
+  context.addInitializer(function() {
+    mergePluginHookFunction.call(this, "onInit", this[context.name]);
+  });
+}
+function OnDestroy(_, context) {
+  context.addInitializer(function() {
+    mergePluginHookFunction.call(this, "onDestroy", this[context.name]);
+  });
+}
+function OnConfigChange(_, context) {
+  context.addInitializer(function() {
+    mergePluginHookFunction.call(this, "onConfigChange", this[context.name]);
+  });
+}
+
 function register(property) {
   return function(_, context) {
-    if (context.kind !== "field" && context.kind !== "getter") {
+    if (context.static) {
       return;
     }
+    observable()(_, context);
     context.addInitializer(function() {
-      const subject = new BehaviorSubject(Reflect.get(this, context.name));
-      const engine$ = requireEngine(this);
-      engine$.subscribe((engine) => engine == null ? void 0 : engine.registerPluginData(this.name, property, subject));
-      Reflect.defineProperty(this, context.name, {
-        get() {
-          const engine = engine$.value;
-          if (!engine) {
-            return void 0;
-          }
-          return Runtime.getInstance().getValue(engine, { paths: ["_pluginDataContainer", this.name, property] });
-        },
-        set(value) {
-          if (context.kind === "field") {
-            subject.next(value);
-          }
-        }
+      subscribeEngine.call(this, (engine) => {
+        engine.registerPluginData(this.name, property, this[getPropertyBehaviorSubjectKey(context.name)]);
       });
     });
   };
 }
 
 function layer(layer2, offset) {
-  return function(_target, { name, kind, static: isStatic, private: isPrivate, addInitializer }) {
-    if (kind === "method" && typeof name === "string" && !isStatic && !isPrivate) {
-      addInitializer(function() {
-        var _a;
-        const layers = (_a = Reflect.get(this, getSymbol("layer"))) != null ? _a : {};
-        layers[name] = { layer: layer2, offset };
-        Reflect.set(this, getSymbol("layer"), layers);
-      });
+  return function(_, context) {
+    if (context.static) {
+      return;
     }
+    context.addInitializer(function() {
+      var _a;
+      const layers = (_a = Reflect.get(this, getSymbol("layer"))) != null ? _a : {};
+      layers[context.name] = { layer: layer2, offset };
+      Reflect.set(this, getSymbol("layer"), layers);
+    });
   };
 }
 
@@ -435,163 +481,83 @@ function ContainerListener({
   return container.width > 0 && container.height > 0 ? /* @__PURE__ */ jsx(Wrapper, { container, children }) : null;
 }
 function panel(position, offset) {
-  return function(_target, { name, kind, static: isStatic, private: isPrivate, addInitializer }) {
-    if (kind === "method" && typeof name === "string" && !isStatic && !isPrivate) {
-      addInitializer(function() {
-        var _a;
-        const layers = (_a = Reflect.get(this, getSymbol("layer"))) != null ? _a : {};
-        const originalRender = Reflect.get(this, name);
-        Reflect.set(this, name, function(...args) {
-          const result = originalRender == null ? void 0 : originalRender.apply(this, args);
-          const engine = requireEngine(this).value;
-          if (!engine || !result) {
-            return result;
-          }
-          return /* @__PURE__ */ jsx(
-            ContainerListener,
-            {
-              getContainer: () => Runtime.getInstance().getValue(engine, { paths: ["container$"] }),
-              position,
-              offset,
-              children: result
-            }
-          );
-        });
-        layers[name] = { layer: Layer.Foreground };
-        Reflect.set(this, getSymbol("layer"), layers);
-      });
+  return function(_, context) {
+    if (context.static) {
+      return;
     }
+    layer(Layer.Foreground)(_, context);
+    context.addInitializer(function() {
+      const originalRender = this[context.name];
+      this[context.name] = () => {
+        const result = originalRender == null ? void 0 : originalRender.apply(this);
+        const engine = getEngine.call(this);
+        if (!result || !engine) {
+          return result;
+        }
+        return /* @__PURE__ */ jsx(
+          ContainerListener,
+          {
+            getContainer: () => (
+              // TODO (boen): fixhack
+              Runtime.getInstance().getValue(engine, { paths: ["container$"] })
+            ),
+            position,
+            offset,
+            children: result
+          }
+        );
+      };
+    });
   };
 }
 
 function nodeOperator() {
-  return function(_target, { name, static: isStatic, private: isPrivate, addInitializer }) {
-    if (isStatic || isPrivate) {
+  return function(_, context) {
+    if (context.static) {
       return;
     }
-    addInitializer(function() {
-      const operator = Reflect.get(this, name);
-      if (typeof operator !== "function") {
-        throw new TypeError("Node operator must be a function");
-      }
-      requireEngine(this).subscribe((engine) => {
-        if (!engine)
-          return;
-        const boundOperator = operator.bind(this);
-        Reflect.set(this, name, (...args) => {
-          const operations = boundOperator(...args);
-          if (Array.isArray(operations)) {
+    context.addInitializer(function() {
+      const original = this[context.name];
+      subscribeEngine.call(this, (engine) => {
+        this[context.name] = (...args) => {
+          const operations = original.apply(this, args);
+          if (Array.isArray(operations) && operations.length > 0) {
             engine.dispatchNodeOperation({
               type: "batch",
               operations
             });
           }
           return operations;
-        });
+        };
       });
     });
   };
 }
 
-const nodePipeSymbol = Symbol("nodePipe");
 function nodePipe() {
-  return function(_target, { name, static: isStatic, private: isPrivate, addInitializer }) {
-    if (isStatic || isPrivate) {
+  return function(_, context) {
+    if (context.static) {
       return;
     }
-    addInitializer(function() {
-      const pipeFactory = Reflect.get(this, name);
-      if (typeof pipeFactory !== "function") {
-        throw new TypeError("Node pipe must be a function");
-      }
-      requireEngine(this).subscribe((engine) => {
-        if (!engine)
-          return;
-        const pipe = pipeFactory.call(this);
-        engine.addNodePipe(pipe);
-        if (!this[nodePipeSymbol]) {
-          this[nodePipeSymbol] = {};
-        }
-        this[nodePipeSymbol][name] = pipe;
+    context.addInitializer(function() {
+      subscribeEngine.call(this, (engine) => {
+        pushSubscription.call(this, engine.addNodePipe(this[context.name]()));
       });
     });
   };
 }
 
 function nodeType(type) {
-  return function(_target, { name, static: isStatic, private: isPrivate, addInitializer }) {
-    if (isStatic || isPrivate) {
-      return;
-    }
-    addInitializer(function() {
-      const renderer = Reflect.get(this, name);
-      if (typeof renderer !== "function") {
-        throw new TypeError("Node renderer must be a function");
-      }
-      requireEngine(this).subscribe((engine) => engine == null ? void 0 : engine.registerNodeRenderer(type, renderer.bind(this)));
-    });
-  };
-}
-
-function OnInit(originalMethod, context) {
-  if (context.kind !== "method") {
-    console.warn("OnInit decorator can only be applied to methods");
-    return;
-  }
-  context.addInitializer(function() {
-    this.onInit = (config) => {
-      originalMethod.call(this, config);
-    };
-  });
-}
-function OnDestroy(originalMethod, context) {
-  if (context.kind !== "method") {
-    console.warn("OnDestroy decorator can only be applied to methods");
-    return;
-  }
-  context.addInitializer(function() {
-    this.onDestroy = () => {
-      originalMethod.call(this);
-    };
-  });
-}
-function OnConfigChange(originalMethod, context) {
-  if (context.kind !== "method") {
-    console.warn("OnConfigChange decorator can only be applied to methods");
-    return;
-  }
-  context.addInitializer(function() {
-    this.onConfigChange = (config) => {
-      originalMethod.call(this, config);
-    };
-  });
-}
-
-function observable() {
   return function(_, context) {
-    if (context.kind !== "field") {
+    if (context.static) {
       return;
     }
     context.addInitializer(function() {
-      const subject = new BehaviorSubject(Reflect.get(this, context.name));
-      const engine$ = requireEngine(this);
-      Reflect.defineProperty(this, context.name, {
-        get() {
-          const engine = engine$.value;
-          if (!engine) {
-            return subject.value;
-          }
-          return Runtime.getInstance().getValue(engine, {
-            paths: [],
-            matcher: () => subject
-          });
-        },
-        set(value) {
-          subject.next(value);
-        }
+      subscribeEngine.call(this, (engine) => {
+        pushSubscription.call(this, engine.registerNodeRenderer(type, this[context.name].bind(this)));
       });
     });
   };
 }
 
-export { OnConfigChange, OnDestroy, OnInit, createPanelWrapper, edgeOperator, edgePipe, edgeType, inject, layer, nodeOperator, nodePipe, nodeType, observable, panel, register };
+export { OnConfigChange, OnDestroy, OnInit, config, createPanelWrapper, edgeOperator, edgePipe, edgeType, inject, layer, nodeOperator, nodePipe, nodeType, observable, panel, register };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knotx/decorators",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "Decorators for Knotx",
   "author": "boenfu",
   "license": "MIT",
@@ -28,19 +28,19 @@
     "dist"
   ],
   "peerDependencies": {
-    "@knotx/jsx": "0.2.3"
+    "@knotx/jsx": "0.2.5"
   },
   "dependencies": {
     "lodash-es": "^4.17.21",
     "rxjs": "^7.8.1",
-    "@knotx/core": "0.2.3"
+    "@knotx/core": "0.2.5"
   },
   "devDependencies": {
     "@types/lodash-es": "^4.14.12",
-    "@knotx/build-config": "0.2.3",
-    "@knotx/eslint-config": "0.2.3",
-    "@knotx/jsx": "0.2.3",
-    "@knotx/typescript-config": "0.2.3"
+    "@knotx/build-config": "0.2.5",
+    "@knotx/eslint-config": "0.2.5",
+    "@knotx/jsx": "0.2.5",
+    "@knotx/typescript-config": "0.2.5"
   },
   "scripts": {
     "build": "unbuild",