@knotx/decorators 0.0.1

package/dist/index.mjs

@@ -0,0 +1,586 @@
+import { getSymbol, Runtime, Engine, Layer, use } from '@knotx/core';
+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 edgeOperator() {
+  return function(_target, { name, static: isStatic, private: isPrivate, addInitializer }) {
+    if (isStatic || isPrivate) {
+      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)) {
+            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;
+    }
+    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;
+      });
+    });
+  };
+}
+
+function edgeType(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("Edge renderer must be a function");
+      }
+      requireEngine(this).subscribe((engine) => engine == null ? void 0 : engine.registerEdgeRenderer(type, renderer.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) {
+          return void 0;
+        }
+        const engineKey$ = `${String(engineKey)}$`;
+        const paths = get(engine, engineKey$) ? [engineKey$] : [engineKey];
+        return Runtime.getInstance().getValue(engine, { paths, selector });
+      }
+    });
+  });
+}
+
+function injectMethod(context, methodKey) {
+  context.addInitializer(function() {
+    Reflect.set(this, context.name, (...methodArgs) => {
+      const engine = requireEngine(this).value;
+      const engineMethod = engine == null ? void 0 : engine[methodKey];
+      if (!engineMethod || typeof engineMethod !== "function") {
+        throw new Error(`Engine method ${String(methodKey)} not found`);
+      }
+      return Reflect.apply(engineMethod, engine, methodArgs);
+    });
+  });
+}
+
+function injectPluginData(context, pluginName, property, selector) {
+  context.addInitializer(function() {
+    const engine$ = requireEngine(this);
+    Reflect.defineProperty(this, context.name, {
+      get() {
+        const engine = engine$.value;
+        if (!engine) {
+          return void 0;
+        }
+        const paths = ["_pluginDataContainer", pluginName, property];
+        return Runtime.getInstance().getValue(engine, { paths, selector });
+      }
+    });
+  });
+}
+
+function createInjectableProxy(engine, accessRecord) {
+  return new Proxy({}, {
+    get(_, prop) {
+      if (prop === Symbol.toPrimitive || prop === "toString" || prop === "valueOf") {
+        return () => "[object Injectable]";
+      }
+      if (typeof prop !== "string") {
+        return void 0;
+      }
+      if (prop in engine) {
+        const engineProp = engine[prop];
+        if (typeof engineProp === "function") {
+          throw new TypeError(`Engine method ${String(prop)} cannot be accessed via injectable`);
+        }
+        if (isBehaviorSubject(engineProp)) {
+          accessRecord.subjects.push(engineProp);
+          accessRecord.paths.push([prop]);
+          return engineProp;
+        }
+        if (engineProp && typeof engineProp === "object") {
+          return createEnginePropertyProxy(engine, prop, engineProp, accessRecord);
+        }
+        return engineProp;
+      }
+      return createPluginPropertyProxy(engine, prop, accessRecord);
+    }
+  });
+}
+function createEnginePropertyProxy(engine, propName, propValue, accessRecord) {
+  return new Proxy({}, {
+    get(_, subProp) {
+      if (subProp === Symbol.toPrimitive || subProp === "toString" || subProp === "valueOf") {
+        return () => `[object Injectable.${String(propName)}]`;
+      }
+      if (typeof subProp !== "string") {
+        return void 0;
+      }
+      const nestedProp = propValue[subProp];
+      if (isBehaviorSubject(nestedProp)) {
+        accessRecord.subjects.push(nestedProp);
+        accessRecord.paths.push([propName, subProp]);
+        return nestedProp;
+      }
+      if (nestedProp && typeof nestedProp === "object") {
+        return createNestedPropertyProxy(engine, [propName, subProp], nestedProp, accessRecord);
+      }
+      return nestedProp;
+    }
+  });
+}
+function createNestedPropertyProxy(engine, path, propValue, accessRecord) {
+  return new Proxy({}, {
+    get(_, subProp) {
+      if (subProp === Symbol.toPrimitive || subProp === "toString" || subProp === "valueOf") {
+        return () => `[object Injectable.${path.join(".")}]`;
+      }
+      if (typeof subProp !== "string") {
+        return void 0;
+      }
+      const nestedProp = propValue[subProp];
+      if (isBehaviorSubject(nestedProp)) {
+        accessRecord.subjects.push(nestedProp);
+        accessRecord.paths.push([...path, subProp]);
+        return nestedProp;
+      }
+      if (nestedProp && typeof nestedProp === "object") {
+        return createNestedPropertyProxy(engine, [...path, subProp], nestedProp, accessRecord);
+      }
+      return nestedProp;
+    }
+  });
+}
+function createPluginPropertyProxy(engine, pluginName, accessRecord) {
+  return new Proxy({}, {
+    get(_, prop) {
+      if (prop === Symbol.toPrimitive || prop === "toString" || prop === "valueOf") {
+        return () => `[object Injectable.${String(pluginName)}]`;
+      }
+      if (typeof prop !== "string") {
+        return void 0;
+      }
+      try {
+        const paths = ["_pluginDataContainer", pluginName, prop];
+        const pluginData = get(engine, paths);
+        if (isBehaviorSubject(pluginData)) {
+          accessRecord.subjects.push(pluginData);
+          accessRecord.paths.push(paths);
+          return pluginData.value;
+        }
+        return pluginData;
+      } catch (e) {
+        return void 0;
+      }
+    }
+  });
+}
+function isBehaviorSubject(value) {
+  return value instanceof BehaviorSubject;
+}
+
+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,
+      wrappedSubject$: null,
+      subscription: null,
+      selector: null,
+      matcher: null,
+      paths: []
+    });
+    Reflect.defineProperty(this, context.name, {
+      get() {
+        const engine = engine$.value;
+        if (!engine) {
+          return void 0;
+        }
+        const state = this[injectableStateSymbol];
+        if (!state.initialized) {
+          state.initialized = true;
+          const accessRecord = {
+            subjects: [],
+            paths: []
+          };
+          const injectable2 = createInjectableProxy(engine, accessRecord);
+          injectableSelector(injectable2, {});
+          if (accessRecord.subjects.length > 0) {
+            const combinedObservable$ = combineLatest(accessRecord.subjects);
+            const wrappedSubject$ = new BehaviorSubject(
+              accessRecord.subjects.map((subject) => subject.value)
+            );
+            const subscription = combinedObservable$.subscribe(wrappedSubject$);
+            state.accessRecord = accessRecord;
+            state.wrappedSubject$ = wrappedSubject$;
+            state.subscription = subscription;
+            state.matcher = () => state.wrappedSubject$;
+          }
+          state.selector = (_, context2) => {
+            const injectable3 = createInjectableProxy(engine, { subjects: [], paths: [] });
+            return injectableSelector(injectable3, context2 || {});
+          };
+        }
+        return Runtime.getInstance().getValue(engine, state);
+      }
+    });
+  });
+}
+
+function injectDecorator(arg0, arg1, arg2) {
+  return function(_, context) {
+    var _a;
+    if (typeof arg0 === "function") {
+      return injectable(context, arg0);
+    }
+    if (typeof arg1 === "string") {
+      return injectPluginData(context, arg0, arg1, arg2);
+    }
+    const engineKey = arg0;
+    const isMethod = typeof ((_a = Reflect.getOwnPropertyDescriptor(Engine.prototype, engineKey)) == null ? void 0 : _a.value) === "function";
+    if (isMethod) {
+      return injectMethod(context, engineKey);
+    }
+    return injectData(context, engineKey, arg1);
+  };
+}
+
+function createInjectProxy(...presets) {
+  return new Proxy(
+    new Object(() => {
+    }),
+    {
+      get(_, prop) {
+        return createInjectProxy(...presets, prop);
+      },
+      apply(_, thisArg, args) {
+        return Reflect.apply(injectDecorator, thisArg, [...presets, ...args]);
+      }
+    }
+  );
+}
+const inject = createInjectProxy();
+
+function register(property) {
+  return function(_, context) {
+    if (context.kind !== "field" && context.kind !== "getter") {
+      return;
+    }
+    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);
+          }
+        }
+      });
+    });
+  };
+}
+
+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);
+      });
+    }
+  };
+}
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+function getPositionStyle(position, container, offset = {}) {
+  const { x = 0, y = 0 } = offset;
+  const { width, height } = container;
+  const baseStyle = {
+    position: "absolute",
+    top: 0,
+    left: 0
+  };
+  switch (position) {
+    case "top":
+      return __spreadProps(__spreadValues({}, baseStyle), {
+        transform: `translate(calc(${width / 2}px - 50%), ${y}px)`
+      });
+    case "bottom":
+      return __spreadProps(__spreadValues({}, baseStyle), {
+        transform: `translate(calc(${width / 2}px - 50%), calc(${height}px - 100% + ${y}px))`
+      });
+    case "left":
+      return __spreadProps(__spreadValues({}, baseStyle), {
+        transform: `translate(${x}px, calc(${height / 2}px - 50%))`
+      });
+    case "right":
+      return __spreadProps(__spreadValues({}, baseStyle), {
+        transform: `translate(calc(${width}px - 100% + ${x}px), calc(${height / 2}px - 50%))`
+      });
+    case "center":
+      return __spreadProps(__spreadValues({}, baseStyle), {
+        transform: `translate(calc(${width / 2}px - 50% + ${x}px), calc(${height / 2}px - 50% + ${y}px))`
+      });
+    case "left-top":
+      return __spreadProps(__spreadValues({}, baseStyle), {
+        transform: `translate(${x}px, ${y}px)`
+      });
+    case "right-top":
+      return __spreadProps(__spreadValues({}, baseStyle), {
+        transform: `translate(calc(${width}px - 100% + ${x}px), ${y}px)`
+      });
+    case "left-bottom":
+      return __spreadProps(__spreadValues({}, baseStyle), {
+        transform: `translate(${x}px, calc(${height}px - 100% + ${y}px))`
+      });
+    case "right-bottom":
+      return __spreadProps(__spreadValues({}, baseStyle), {
+        transform: `translate(calc(${width}px - 100% + ${x}px), calc(${height}px - 100% + ${y}px))`
+      });
+    default:
+      return baseStyle;
+  }
+}
+function createPanelWrapper(position, offset = {}) {
+  return function PanelWrapper({ children, container }) {
+    const style = getPositionStyle(position, container, offset);
+    return /* @__PURE__ */ jsx("div", { style, children });
+  };
+}
+function ContainerListener({
+  getContainer,
+  children,
+  position,
+  offset
+}) {
+  const container = use(getContainer);
+  const Wrapper = createPanelWrapper(position, offset);
+  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);
+      });
+    }
+  };
+}
+
+function nodeOperator() {
+  return function(_target, { name, static: isStatic, private: isPrivate, addInitializer }) {
+    if (isStatic || isPrivate) {
+      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)) {
+            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;
+    }
+    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;
+      });
+    });
+  };
+}
+
+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 = () => {
+      originalMethod.call(this);
+    };
+  });
+}
+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 observable() {
+  return function(_, context) {
+    if (context.kind !== "field") {
+      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);
+        }
+      });
+    });
+  };
+}
+
+export { OnDestroy, OnInit, createPanelWrapper, edgeOperator, edgePipe, edgeType, inject, layer, nodeOperator, nodePipe, nodeType, observable, panel, register };

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@knotx/decorators",
+  "type": "module",
+  "version": "0.0.1",
+  "description": "Decorators for Knotx",
+  "author": "boenfu",
+  "license": "MIT",
+  "homepage": "https://github.com/boenfu/knotx#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/boenfu/knotx.git",
+    "directory": "packages/decorators"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "lodash-es": "^4.17.21",
+    "rxjs": "^7.8.1",
+    "@knotx/core": "0.0.1"
+  },
+  "devDependencies": {
+    "@types/lodash-es": "^4.14.12",
+    "@knotx/build-config": "0.0.1",
+    "@knotx/jsx": "0.0.1",
+    "@knotx/eslint-config": "0.0.1",
+    "@knotx/typescript-config": "0.0.1"
+  },
+  "scripts": {
+    "build": "unbuild --failOnWarn=false",
+    "dev": "unbuild --stub",
+    "lint": "eslint .",
+    "typecheck": "tsc --noEmit"
+  }
+}