@cfcs/core - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

declaration/reactive/adaptReactive.d.ts

 import { ReactiveAdapter } from "./ReactiveAdapter";
-import { ReactiveSubscribe } from "./ReactiveSubscribe";
+import { ReactiveSubscribe } from "./decorators/ReactiveSubscribe";
 import { ReactiveEventCallback } from "./types";
@@ -4,0 +4,0 @@ export declare function adaptReactive<Instance extends ReactiveSubscribe<Record<string, any>>, State extends Record<string, any> = {}, Methods extends keyof Partial<Instance> = any, Data = any, Events extends Record<string, any> = {}>(adapter: ReactiveAdapter<Instance, State, Methods, Data, Events>): {

declaration/reactive/const.d.ts

 export declare const OBSERVERS_PATH = "__observers__";
 export declare const REACTIVE_PATH = "__reactive__";
+export declare const CFCS_DETECTED_DEPENDENCIES_VERSION = 1;
+export declare const CFCS_DETECTED_DEPENDENCIES = "__CFCS_DETECTED_DEPENDENCIES__";

declaration/reactive/index.d.ts

 export * from "./utils";
 export * from "./types";
 export * from "./Observer";
-export * from "./inlineReactive";
-export * from "./Reactive";
+export * from "./ComputedObserver";
+export * from "./inline";
 export * from "./ReactiveAdapter";
-export * from "./ReactiveSubscribe";
 export * from "./adaptReactive";
+export * from "./decorators/Observe";
+export * from "./decorators/Computed";
+export * from "./decorators/ReactiveSubscribe";

declaration/reactive/Observer.d.ts

@@ -0,9 +1,23 @@
+import Component from "@egjs/component";
+interface EmitterEvents<Value> {
+    update: (value: Value) => void;
+}
+/**
+ * @memberof Reactive
+ */
 export declare class Observer<Value = any> {
-    private _current;
-    private _emitter;
+    protected _current: Value;
+    protected _emitter: Component<EmitterEvents<Value>>;
+    /**
+     *
+     */
     constructor(value?: Value);
     get current(): Value;
     set current(value: Value);
-    subscribe(callback: (value: Value) => void): void;
-    unsubscribe(callback?: (value: Value) => void): void;
+    subscribe(callback: (value: Value) => void): this;
+    unsubscribe(callback?: (value: Value) => void): this;
+    protected _setCurrent(value: Value): void;
+    toString(): string;
+    valueOf(): Value;
 }
+export {};

declaration/reactive/ReactiveAdapter.d.ts

 import { EventKey } from "@egjs/component/declaration/types";
 import { ReactiveEventCallback } from "./types";
-import { ReactiveSubscribe } from "./ReactiveSubscribe";
+import { ReactiveSubscribe } from "./decorators/ReactiveSubscribe";
 export interface ReactiveAdapter<Instance extends ReactiveSubscribe<Record<string, any>>, State extends Record<string, any> = {}, Methods extends keyof Partial<Instance> = never, Data = any, Events extends Record<string, any> = {}> {
@@ -5,0 +5,0 @@ /**

declaration/reactive/types.d.ts

 import { ComponentEvent } from "@egjs/component";
 import { Observer } from "./Observer";
-import { ReactiveSubscribe } from "./ReactiveSubscribe";
+import { ReactiveSubscribe } from "./decorators/ReactiveSubscribe";
 declare type AnyFunction = (...args: any[]) => any;
@@ -5,0 +5,0 @@ declare type NoArguments = undefined | null | void | never;

declaration/reactive/utils.d.ts

@@ -5,3 +5,2 @@ import { Observer } from "./Observer";
 export declare function withReactiveMethods<Instance, Names extends keyof Partial<Instance>, Return extends ReactiveMethods<Instance, Names>>(ref: Ref<Instance>, methods?: readonly Names[]): Return;
-export declare function observe<Type>(defaultValue?: Type): Observer<Type>;
 export declare function defineObservers(instance: any): Record<string, Observer<any>>;
@@ -8,0 +7,0 @@ export declare function getObservers(instance: any): Record<string, Observer<any>>;

dist/cfcs.cjs.js

@@ -7,3 +7,3 @@ /*
 repository: https://github.com/naver/cfcs
-version: 0.0.6
+version: 0.0.7
 */
@@ -84,6 +84,85 @@ 'use strict';
 var OBSERVERS_PATH = "__observers__";
+var CFCS_DETECTED_DEPENDENCIES_VERSION = 1;
+var CFCS_DETECTED_DEPENDENCIES = "__CFCS_DETECTED_DEPENDENCIES__";
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+/* global Reflect, Promise */
+var extendStatics = function (d, b) {
+  extendStatics = Object.setPrototypeOf || {
+    __proto__: []
+  } instanceof Array && function (d, b) {
+    d.__proto__ = b;
+  } || function (d, b) {
+    for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];
+  };
+
+  return extendStatics(d, b);
+};
+
+function __extends(d, b) {
+  if (typeof b !== "function" && b !== null) throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+  extendStatics(d, b);
+
+  function __() {
+    this.constructor = d;
+  }
+
+  d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
+
+function getDetectedStack() {
+  // Version issues do not occur when you access the native object in the global.
+  Object[CFCS_DETECTED_DEPENDENCIES] = Object[CFCS_DETECTED_DEPENDENCIES] || {};
+  var versionList = Object[CFCS_DETECTED_DEPENDENCIES];
+  versionList[CFCS_DETECTED_DEPENDENCIES_VERSION] = versionList[CFCS_DETECTED_DEPENDENCIES_VERSION] || [];
+  return versionList[CFCS_DETECTED_DEPENDENCIES_VERSION];
+}
+function getCurrentDetected() {
+  var stack = getDetectedStack();
+  return stack[stack.length - 1];
+}
+function detectDependencies(host) {
+  var stack = getDetectedStack();
+  var observers = [];
+  var detected = {
+    host: host,
+    observers: observers,
+    push: function (observer) {
+      if (host !== observer && observers.indexOf(observer) === -1) {
+        observers.push(observer);
+      }
+    }
+  };
+  stack.push(detected);
+  return detected;
+}
+function endDetectDependencies() {
+  var stack = getDetectedStack();
+  return stack.pop();
+}
+
+/**
+ * @memberof Reactive
+ */
+
 var Observer =
 /*#__PURE__*/
 function () {
+  /**
+   *
+   */
   function Observer(value) {
@@ -97,11 +176,8 @@ this._emitter = new Component();
     get: function () {
+      var currentDetected = getCurrentDetected();
+      currentDetected === null || currentDetected === void 0 ? void 0 : currentDetected.push(this);
       return this._current;
     },
     set: function (value) {
-      var isUpdate = value !== this._current;
-      this._current = value;
-
-      if (isUpdate) {
-        this._emitter.trigger("update", value);
-      }
+      this._setCurrent(value);
     },
@@ -113,3 +189,7 @@ enumerable: false,
   __proto.subscribe = function (callback) {
+    this.current;
+
     this._emitter.on("update", callback);
+
+    return this;
   };
@@ -119,88 +199,137 @@
     this._emitter.off("update", callback);
+
+    return this;
   };
 
+  __proto._setCurrent = function (value) {
+    var isUpdate = value !== this._current;
+    this._current = value;
+
+    if (isUpdate) {
+      this._emitter.trigger("update", value);
+    }
+  };
+
+  __proto.toString = function () {
+    return "".concat(this.current);
+  };
+
+  __proto.valueOf = function () {
+    return this.current;
+  };
+
   return Observer;
 }();
 
-function withReactiveMethods(ref, methods) {
-  var obj = {};
+/**
+ * @memberof Reactive
+ * @extends Reactive.Observer
+ */
 
-  if (!methods) {
-    return obj;
-  }
+var ComputedObserver =
+/*#__PURE__*/
+function (_super) {
+  __extends(ComputedObserver, _super);
+  /**
+   * Creates a new computed observer from the values of other observers.
+   * It is read-only and if you change the value of the observer used inside the callback, its value will be automatically updated.
+   * @param _computedCallback A function for observers to be computed.
+   */
 
-  methods.forEach(function (name) {
-    obj[name] = function () {
-      var args = [];
 
-      for (var _i = 0; _i < arguments.length; _i++) {
-        args[_i] = arguments[_i];
-      }
+  function ComputedObserver(_computedCallback) {
+    var _this = _super.call(this) || this;
 
-      var current = ref.current || ref.value;
-      return current[name].apply(current, args);
+    _this._computedCallback = _computedCallback;
+    _this._registered = [];
+
+    _this._onCheckUpdate = function () {
+      _this._setCurrent(_this.current);
     };
-  });
-  return obj;
-}
-function observe(defaultValue) {
-  return new Observer(defaultValue);
-}
-function defineObservers(instance) {
-  var observers = {};
-  Object.defineProperty(instance, OBSERVERS_PATH, {
+
+    _this._current = _this.current;
+    return _this;
+  }
+
+  var __proto = ComputedObserver.prototype;
+  Object.defineProperty(__proto, "current", {
     get: function () {
-      return observers;
-    }
+      var _this = this;
+
+      detectDependencies(this);
+
+      var value = this._computedCallback();
+
+      var results = endDetectDependencies();
+
+      this._registered.forEach(function (observer) {
+        observer.unsubscribe(_this._onCheckUpdate);
+      });
+
+      results.observers.forEach(function (observer) {
+        observer.subscribe(_this._onCheckUpdate);
+      });
+      this._registered = results.observers;
+      return value;
+    },
+    enumerable: false,
+    configurable: true
   });
-  return observers;
-}
-function getObservers(instance) {
-  if (!instance[OBSERVERS_PATH]) {
-    defineObservers(instance);
-  }
+  return ComputedObserver;
+}(Observer);
 
-  return instance[OBSERVERS_PATH];
-}
-function getObserver(instance, name, defaultValue) {
-  var observers = getObservers(instance);
-
-  if (!observers[name]) {
-    observers[name] = observe(defaultValue);
+function injectObserve(prototype, memberName, publicName) {
+  if (publicName === void 0) {
+    publicName = memberName;
   }
 
-  return observers[name];
-}
-function setObserver(instance, name, observer) {
-  var observers = getObservers(instance);
-  observers[name] = observer;
-}
-function isObserver(val) {
-  return val && isObject(val) && "current" in val && "subscribe" in val && "unsubscribe" in val;
-}
+  var nextAttributes = {
+    configurable: true,
+    get: function () {
+      return getObserver(this, publicName).current;
+    },
+    set: function (value) {
+      getObserver(this, publicName, value).current = value;
+    }
+  };
+  Object.defineProperty(prototype, memberName, nextAttributes);
 
-function Reactive(name) {
-  return function (prototype, memberName) {
-    var publicName = name || memberName;
-    Object.defineProperty(prototype, memberName, {
+  if (publicName !== memberName) {
+    Object.defineProperty(prototype, publicName, {
+      configurable: true,
       get: function () {
         return getObserver(this, publicName).current;
-      },
-      set: function (value) {
-        getObserver(this, publicName, value).current = value;
       }
     });
+  }
+}
 
-    if (publicName !== memberName) {
-      Object.defineProperty(prototype, publicName, {
-        get: function () {
-          return getObserver(this, publicName).current;
-        }
-      });
-    }
+function Observe() {
+  var args = [];
+
+  for (var _i = 0; _i < arguments.length; _i++) {
+    args[_i] = arguments[_i];
+  }
+
+  if (args.length > 1) {
+    return injectObserve(args[0], args[1]);
+  }
+
+  return function (prototype, memberName) {
+    return injectObserve(prototype, memberName, args[0]);
   };
 }
+function Reactive() {
+  var args = [];
 
+  for (var _i = 0; _i < arguments.length; _i++) {
+    args[_i] = arguments[_i];
+  }
+
+  return Observe.apply(void 0, args);
+}
+
 function injectReactiveSubscribe(object) {
   object["subscribe"] = function (name, callback) {
+    this[name];
     getObserver(this, name).subscribe(callback);
@@ -248,3 +377,63 @@ };
 }
+function computed(computedCallback) {
+  return new ComputedObserver(computedCallback);
+}
+function observe(defaultValue) {
+  return new Observer(defaultValue);
+}
 
+function withReactiveMethods(ref, methods) {
+  var obj = {};
+
+  if (!methods) {
+    return obj;
+  }
+
+  methods.forEach(function (name) {
+    obj[name] = function () {
+      var args = [];
+
+      for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+      }
+
+      var current = ref.current || ref.value;
+      return current[name].apply(current, args);
+    };
+  });
+  return obj;
+}
+function defineObservers(instance) {
+  var observers = {};
+  Object.defineProperty(instance, OBSERVERS_PATH, {
+    get: function () {
+      return observers;
+    }
+  });
+  return observers;
+}
+function getObservers(instance) {
+  if (!instance[OBSERVERS_PATH]) {
+    defineObservers(instance);
+  }
+
+  return instance[OBSERVERS_PATH];
+}
+function getObserver(instance, name, defaultValue) {
+  var observers = getObservers(instance);
+
+  if (!observers[name]) {
+    observers[name] = observe(defaultValue);
+  }
+
+  return observers[name];
+}
+function setObserver(instance, name, observer) {
+  var observers = getObservers(instance);
+  observers[name] = observer;
+}
+function isObserver(val) {
+  return val && isObject(val) && "current" in val && "subscribe" in val && "unsubscribe" in val;
+}
+
 function adaptReactive(adapter) {
@@ -317,2 +506,23 @@ var _a;
 
+function Computed(prototype, memberName, attributes) {
+  var get = attributes.get;
+
+  function getComputed() {
+    var observers = getObservers(this);
+
+    if (!(memberName in observers)) {
+      observers[memberName] = computed(get.bind(this));
+    }
+
+    return getObserver(this, memberName).current;
+  }
+
+  var nextAttributes = {
+    configurable: true,
+    get: getComputed
+  };
+  Object.defineProperty(prototype, memberName, nextAttributes);
+  return nextAttributes;
+}
+
 var modules = {
@@ -328,3 +538,2 @@ __proto__: null,
   withReactiveMethods: withReactiveMethods,
-  observe: observe,
   defineObservers: defineObservers,
@@ -336,7 +545,12 @@ getObservers: getObservers,
   Observer: Observer,
+  ComputedObserver: ComputedObserver,
   reactive: reactive,
+  computed: computed,
+  observe: observe,
+  adaptReactive: adaptReactive,
+  Observe: Observe,
   Reactive: Reactive,
+  Computed: Computed,
   injectReactiveSubscribe: injectReactiveSubscribe,
-  ReactiveSubscribe: ReactiveSubscribe,
-  adaptReactive: adaptReactive
+  ReactiveSubscribe: ReactiveSubscribe
 };
@@ -343,0 +557,0 @@

dist/cfcs.esm.js

@@ -7,3 +7,3 @@ /*
 repository: https://github.com/naver/cfcs
-version: 0.0.6
+version: 0.0.7
 */
@@ -82,6 +82,85 @@ import Component from '@egjs/component';
 var OBSERVERS_PATH = "__observers__";
+var CFCS_DETECTED_DEPENDENCIES_VERSION = 1;
+var CFCS_DETECTED_DEPENDENCIES = "__CFCS_DETECTED_DEPENDENCIES__";
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+/* global Reflect, Promise */
+var extendStatics = function (d, b) {
+  extendStatics = Object.setPrototypeOf || {
+    __proto__: []
+  } instanceof Array && function (d, b) {
+    d.__proto__ = b;
+  } || function (d, b) {
+    for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];
+  };
+
+  return extendStatics(d, b);
+};
+
+function __extends(d, b) {
+  if (typeof b !== "function" && b !== null) throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+  extendStatics(d, b);
+
+  function __() {
+    this.constructor = d;
+  }
+
+  d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
+
+function getDetectedStack() {
+  // Version issues do not occur when you access the native object in the global.
+  Object[CFCS_DETECTED_DEPENDENCIES] = Object[CFCS_DETECTED_DEPENDENCIES] || {};
+  var versionList = Object[CFCS_DETECTED_DEPENDENCIES];
+  versionList[CFCS_DETECTED_DEPENDENCIES_VERSION] = versionList[CFCS_DETECTED_DEPENDENCIES_VERSION] || [];
+  return versionList[CFCS_DETECTED_DEPENDENCIES_VERSION];
+}
+function getCurrentDetected() {
+  var stack = getDetectedStack();
+  return stack[stack.length - 1];
+}
+function detectDependencies(host) {
+  var stack = getDetectedStack();
+  var observers = [];
+  var detected = {
+    host: host,
+    observers: observers,
+    push: function (observer) {
+      if (host !== observer && observers.indexOf(observer) === -1) {
+        observers.push(observer);
+      }
+    }
+  };
+  stack.push(detected);
+  return detected;
+}
+function endDetectDependencies() {
+  var stack = getDetectedStack();
+  return stack.pop();
+}
+
+/**
+ * @memberof Reactive
+ */
+
 var Observer =
 /*#__PURE__*/
 function () {
+  /**
+   *
+   */
   function Observer(value) {
@@ -95,11 +174,8 @@ this._emitter = new Component();
     get: function () {
+      var currentDetected = getCurrentDetected();
+      currentDetected === null || currentDetected === void 0 ? void 0 : currentDetected.push(this);
       return this._current;
     },
     set: function (value) {
-      var isUpdate = value !== this._current;
-      this._current = value;
-
-      if (isUpdate) {
-        this._emitter.trigger("update", value);
-      }
+      this._setCurrent(value);
     },
@@ -111,3 +187,7 @@ enumerable: false,
   __proto.subscribe = function (callback) {
+    this.current;
+
     this._emitter.on("update", callback);
+
+    return this;
   };
@@ -117,88 +197,137 @@
     this._emitter.off("update", callback);
+
+    return this;
   };
 
+  __proto._setCurrent = function (value) {
+    var isUpdate = value !== this._current;
+    this._current = value;
+
+    if (isUpdate) {
+      this._emitter.trigger("update", value);
+    }
+  };
+
+  __proto.toString = function () {
+    return "".concat(this.current);
+  };
+
+  __proto.valueOf = function () {
+    return this.current;
+  };
+
   return Observer;
 }();
 
-function withReactiveMethods(ref, methods) {
-  var obj = {};
+/**
+ * @memberof Reactive
+ * @extends Reactive.Observer
+ */
 
-  if (!methods) {
-    return obj;
-  }
+var ComputedObserver =
+/*#__PURE__*/
+function (_super) {
+  __extends(ComputedObserver, _super);
+  /**
+   * Creates a new computed observer from the values of other observers.
+   * It is read-only and if you change the value of the observer used inside the callback, its value will be automatically updated.
+   * @param _computedCallback A function for observers to be computed.
+   */
 
-  methods.forEach(function (name) {
-    obj[name] = function () {
-      var args = [];
 
-      for (var _i = 0; _i < arguments.length; _i++) {
-        args[_i] = arguments[_i];
-      }
+  function ComputedObserver(_computedCallback) {
+    var _this = _super.call(this) || this;
 
-      var current = ref.current || ref.value;
-      return current[name].apply(current, args);
+    _this._computedCallback = _computedCallback;
+    _this._registered = [];
+
+    _this._onCheckUpdate = function () {
+      _this._setCurrent(_this.current);
     };
-  });
-  return obj;
-}
-function observe(defaultValue) {
-  return new Observer(defaultValue);
-}
-function defineObservers(instance) {
-  var observers = {};
-  Object.defineProperty(instance, OBSERVERS_PATH, {
+
+    _this._current = _this.current;
+    return _this;
+  }
+
+  var __proto = ComputedObserver.prototype;
+  Object.defineProperty(__proto, "current", {
     get: function () {
-      return observers;
-    }
+      var _this = this;
+
+      detectDependencies(this);
+
+      var value = this._computedCallback();
+
+      var results = endDetectDependencies();
+
+      this._registered.forEach(function (observer) {
+        observer.unsubscribe(_this._onCheckUpdate);
+      });
+
+      results.observers.forEach(function (observer) {
+        observer.subscribe(_this._onCheckUpdate);
+      });
+      this._registered = results.observers;
+      return value;
+    },
+    enumerable: false,
+    configurable: true
   });
-  return observers;
-}
-function getObservers(instance) {
-  if (!instance[OBSERVERS_PATH]) {
-    defineObservers(instance);
-  }
+  return ComputedObserver;
+}(Observer);
 
-  return instance[OBSERVERS_PATH];
-}
-function getObserver(instance, name, defaultValue) {
-  var observers = getObservers(instance);
-
-  if (!observers[name]) {
-    observers[name] = observe(defaultValue);
+function injectObserve(prototype, memberName, publicName) {
+  if (publicName === void 0) {
+    publicName = memberName;
   }
 
-  return observers[name];
-}
-function setObserver(instance, name, observer) {
-  var observers = getObservers(instance);
-  observers[name] = observer;
-}
-function isObserver(val) {
-  return val && isObject(val) && "current" in val && "subscribe" in val && "unsubscribe" in val;
-}
+  var nextAttributes = {
+    configurable: true,
+    get: function () {
+      return getObserver(this, publicName).current;
+    },
+    set: function (value) {
+      getObserver(this, publicName, value).current = value;
+    }
+  };
+  Object.defineProperty(prototype, memberName, nextAttributes);
 
-function Reactive(name) {
-  return function (prototype, memberName) {
-    var publicName = name || memberName;
-    Object.defineProperty(prototype, memberName, {
+  if (publicName !== memberName) {
+    Object.defineProperty(prototype, publicName, {
+      configurable: true,
       get: function () {
         return getObserver(this, publicName).current;
-      },
-      set: function (value) {
-        getObserver(this, publicName, value).current = value;
       }
     });
+  }
+}
 
-    if (publicName !== memberName) {
-      Object.defineProperty(prototype, publicName, {
-        get: function () {
-          return getObserver(this, publicName).current;
-        }
-      });
-    }
+function Observe() {
+  var args = [];
+
+  for (var _i = 0; _i < arguments.length; _i++) {
+    args[_i] = arguments[_i];
+  }
+
+  if (args.length > 1) {
+    return injectObserve(args[0], args[1]);
+  }
+
+  return function (prototype, memberName) {
+    return injectObserve(prototype, memberName, args[0]);
   };
 }
+function Reactive() {
+  var args = [];
 
+  for (var _i = 0; _i < arguments.length; _i++) {
+    args[_i] = arguments[_i];
+  }
+
+  return Observe.apply(void 0, args);
+}
+
 function injectReactiveSubscribe(object) {
   object["subscribe"] = function (name, callback) {
+    this[name];
     getObserver(this, name).subscribe(callback);
@@ -246,3 +375,63 @@ };
 }
+function computed(computedCallback) {
+  return new ComputedObserver(computedCallback);
+}
+function observe(defaultValue) {
+  return new Observer(defaultValue);
+}
 
+function withReactiveMethods(ref, methods) {
+  var obj = {};
+
+  if (!methods) {
+    return obj;
+  }
+
+  methods.forEach(function (name) {
+    obj[name] = function () {
+      var args = [];
+
+      for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+      }
+
+      var current = ref.current || ref.value;
+      return current[name].apply(current, args);
+    };
+  });
+  return obj;
+}
+function defineObservers(instance) {
+  var observers = {};
+  Object.defineProperty(instance, OBSERVERS_PATH, {
+    get: function () {
+      return observers;
+    }
+  });
+  return observers;
+}
+function getObservers(instance) {
+  if (!instance[OBSERVERS_PATH]) {
+    defineObservers(instance);
+  }
+
+  return instance[OBSERVERS_PATH];
+}
+function getObserver(instance, name, defaultValue) {
+  var observers = getObservers(instance);
+
+  if (!observers[name]) {
+    observers[name] = observe(defaultValue);
+  }
+
+  return observers[name];
+}
+function setObserver(instance, name, observer) {
+  var observers = getObservers(instance);
+  observers[name] = observer;
+}
+function isObserver(val) {
+  return val && isObject(val) && "current" in val && "subscribe" in val && "unsubscribe" in val;
+}
+
 function adaptReactive(adapter) {
@@ -315,3 +504,24 @@ var _a;
 
-export { Observer, Reactive, ReactiveSubscribe, adaptReactive, camelize, defineObservers, findTarget, getObserver, getObservers, injectReactiveSubscribe, isFunction, isObject, isObserver, isString, keys, observe, reactive, setObserver, withClassMethods, withReactiveMethods };
+function Computed(prototype, memberName, attributes) {
+  var get = attributes.get;
+
+  function getComputed() {
+    var observers = getObservers(this);
+
+    if (!(memberName in observers)) {
+      observers[memberName] = computed(get.bind(this));
+    }
+
+    return getObserver(this, memberName).current;
+  }
+
+  var nextAttributes = {
+    configurable: true,
+    get: getComputed
+  };
+  Object.defineProperty(prototype, memberName, nextAttributes);
+  return nextAttributes;
+}
+
+export { Computed, ComputedObserver, Observe, Observer, Reactive, ReactiveSubscribe, adaptReactive, camelize, computed, defineObservers, findTarget, getObserver, getObservers, injectReactiveSubscribe, isFunction, isObject, isObserver, isString, keys, observe, reactive, setObserver, withClassMethods, withReactiveMethods };
 //# sourceMappingURL=cfcs.esm.js.map

dist/cfcs.js

@@ -7,3 +7,3 @@ /*
 repository: https://github.com/naver/cfcs
-version: 0.0.6
+version: 0.0.7
 */
@@ -86,3 +86,75 @@ (function (global, factory) {
   var OBSERVERS_PATH = "__observers__";
+  var CFCS_DETECTED_DEPENDENCIES_VERSION = 1;
+  var CFCS_DETECTED_DEPENDENCIES = "__CFCS_DETECTED_DEPENDENCIES__";
 
+  /******************************************************************************
+  Copyright (c) Microsoft Corporation.
+
+  Permission to use, copy, modify, and/or distribute this software for any
+  purpose with or without fee is hereby granted.
+
+  THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+  REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+  AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+  INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+  PERFORMANCE OF THIS SOFTWARE.
+  ***************************************************************************** */
+
+  /* global Reflect, Promise */
+  var extendStatics = function (d, b) {
+    extendStatics = Object.setPrototypeOf || {
+      __proto__: []
+    } instanceof Array && function (d, b) {
+      d.__proto__ = b;
+    } || function (d, b) {
+      for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];
+    };
+
+    return extendStatics(d, b);
+  };
+
+  function __extends(d, b) {
+    if (typeof b !== "function" && b !== null) throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+    extendStatics(d, b);
+
+    function __() {
+      this.constructor = d;
+    }
+
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+  }
+
+  function getDetectedStack() {
+    // Version issues do not occur when you access the native object in the global.
+    Object[CFCS_DETECTED_DEPENDENCIES] = Object[CFCS_DETECTED_DEPENDENCIES] || {};
+    var versionList = Object[CFCS_DETECTED_DEPENDENCIES];
+    versionList[CFCS_DETECTED_DEPENDENCIES_VERSION] = versionList[CFCS_DETECTED_DEPENDENCIES_VERSION] || [];
+    return versionList[CFCS_DETECTED_DEPENDENCIES_VERSION];
+  }
+  function getCurrentDetected() {
+    var stack = getDetectedStack();
+    return stack[stack.length - 1];
+  }
+  function detectDependencies(host) {
+    var stack = getDetectedStack();
+    var observers = [];
+    var detected = {
+      host: host,
+      observers: observers,
+      push: function (observer) {
+        if (host !== observer && observers.indexOf(observer) === -1) {
+          observers.push(observer);
+        }
+      }
+    };
+    stack.push(detected);
+    return detected;
+  }
+  function endDetectDependencies() {
+    var stack = getDetectedStack();
+    return stack.pop();
+  }
+
   /*
@@ -94,3 +166,3 @@ Copyright (c) NAVER Corp.
   repository: https://github.com/naver/egjs-component
-  version: 3.0.2
+  version: 3.0.3
   */
@@ -113,4 +185,4 @@ /*! *****************************************************************************
     var s = typeof Symbol === "function" && Symbol.iterator,
-        m = s && o[s],
-        i = 0;
+      m = s && o[s],
+      i = 0;
     if (m) return m.call(o);
@@ -132,6 +204,5 @@ if (o && typeof o.length === "number") return {
     var i = m.call(o),
-        r,
-        ar = [],
-        e;
-
+      r,
+      ar = [],
+      e;
     try {
@@ -150,3 +221,2 @@ while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
     }
-
     return ar;
@@ -156,3 +226,2 @@ }
     for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
-
     return ar;
@@ -169,2 +238,3 @@ }
 
+  // This class name is not matched to file name intentionally
   /**
@@ -174,6 +244,3 @@ * Event class to provide additional properties
    */
-
-  var ComponentEvent =
-  /*#__PURE__*/
-  function () {
+  var ComponentEvent = /*#__PURE__*/function () {
     /**
@@ -187,10 +254,8 @@ * Create a new instance of ComponentEvent.
       var e_1, _a;
-
       this._canceled = false;
-
       if (props) {
         try {
           for (var _b = __values(Object.keys(props)), _c = _b.next(); !_c.done; _c = _b.next()) {
-            var key = _c.value; // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-
+            var key = _c.value;
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
             this[key] = props[key];
@@ -210,3 +275,2 @@ }
       }
-
       this.eventType = eventType;
@@ -218,6 +282,3 @@ }
      */
-
-
     var __proto = ComponentEvent.prototype;
-
     __proto.stop = function () {
@@ -231,8 +292,5 @@ this._canceled = true;
      */
-
-
     __proto.isCanceled = function () {
       return this._canceled;
     };
-
     return ComponentEvent;
@@ -245,6 +303,3 @@ }();
    */
-
-  var Component =
-  /*#__PURE__*/
-  function () {
+  var Component = /*#__PURE__*/function () {
     /**
@@ -297,21 +352,13 @@ * @support {"ie": "7+", "ch" : "latest", "ff" : "latest",  "sf" : "latest", "edge" : "latest", "ios" : "7+", "an" : "2.1+ (except 3.x)"}
      */
-
-
     var __proto = Component.prototype;
-
     __proto.trigger = function (event) {
       var params = [];
-
       for (var _i = 1; _i < arguments.length; _i++) {
         params[_i - 1] = arguments[_i];
       }
-
       var eventName = event instanceof ComponentEvent ? event.eventType : event;
-
       var handlers = __spread(this._eventHandler[eventName] || []);
-
       if (handlers.length <= 0) {
         return this;
       }
-
       if (event instanceof ComponentEvent) {
@@ -328,3 +375,2 @@ event.currentTarget = this;
       }
-
       return this;
@@ -361,14 +407,9 @@ };
      */
-
-
     __proto.once = function (eventName, handlerToAttach) {
       var _this = this;
-
       if (typeof eventName === "object" && isUndefined(handlerToAttach)) {
         var eventHash = eventName;
-
         for (var key in eventHash) {
           this.once(key, eventHash[key]);
         }
-
         return this;
@@ -378,16 +419,11 @@ } else if (typeof eventName === "string" && typeof handlerToAttach === "function") {
           var args = [];
-
           for (var _i = 0; _i < arguments.length; _i++) {
             args[_i] = arguments[_i];
-          } // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-
-
+          }
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-call
           handlerToAttach.apply(void 0, __spread(args));
-
           _this.off(eventName, listener_1);
         };
-
         this.on(eventName, listener_1);
       }
-
       return this;
@@ -413,4 +449,2 @@ };
      */
-
-
     __proto.hasOn = function (eventName) {
@@ -441,16 +475,11 @@ return !!this._eventHandler[eventName];
      */
-
-
     __proto.on = function (eventName, handlerToAttach) {
       if (typeof eventName === "object" && isUndefined(handlerToAttach)) {
         var eventHash = eventName;
-
         for (var name in eventHash) {
           this.on(name, eventHash[name]);
         }
-
         return this;
       } else if (typeof eventName === "string" && typeof handlerToAttach === "function") {
         var handlerList = this._eventHandler[eventName];
-
         if (isUndefined(handlerList)) {
@@ -460,6 +489,4 @@ this._eventHandler[eventName] = [];
         }
-
         handlerList.push(handlerToAttach);
       }
-
       return this;
@@ -489,14 +516,10 @@ };
      */
-
-
     __proto.off = function (eventName, handlerToDetach) {
-      var e_1, _a; // Detach all event handlers.
-
-
+      var e_1, _a;
+      // Detach all event handlers.
       if (isUndefined(eventName)) {
         this._eventHandler = {};
         return this;
-      } // Detach all handlers for eventname or detach event handlers by object.
-
-
+      }
+      // Detach all handlers for eventname or detach event handlers by object.
       if (isUndefined(handlerToDetach)) {
@@ -508,31 +531,22 @@ if (typeof eventName === "string") {
           var eventHash = eventName;
-
           for (var name in eventHash) {
             this.off(name, eventHash[name]);
           }
-
           return this;
         }
-      } // Detach single event handler
-
-
+      }
+      // Detach single event handler
       var handlerList = this._eventHandler[eventName];
-
       if (handlerList) {
         var idx = 0;
-
         try {
           for (var handlerList_1 = __values(handlerList), handlerList_1_1 = handlerList_1.next(); !handlerList_1_1.done; handlerList_1_1 = handlerList_1.next()) {
             var handlerFunction = handlerList_1_1.value;
-
             if (handlerFunction === handlerToDetach) {
               handlerList.splice(idx, 1);
-
               if (handlerList.length <= 0) {
                 delete this._eventHandler[eventName];
               }
-
               break;
             }
-
             idx++;
@@ -552,3 +566,2 @@ }
       }
-
       return this;
@@ -565,11 +578,16 @@ };
      */
-
-
-    Component.VERSION = "3.0.2";
+    Component.VERSION = "3.0.3";
     return Component;
   }();
 
+  /**
+   * @memberof Reactive
+   */
+
   var Observer =
   /*#__PURE__*/
   function () {
+    /**
+     *
+     */
     function Observer(value) {
@@ -583,11 +601,8 @@ this._emitter = new Component();
       get: function () {
+        var currentDetected = getCurrentDetected();
+        currentDetected === null || currentDetected === void 0 ? void 0 : currentDetected.push(this);
         return this._current;
       },
       set: function (value) {
-        var isUpdate = value !== this._current;
-        this._current = value;
-
-        if (isUpdate) {
-          this._emitter.trigger("update", value);
-        }
+        this._setCurrent(value);
       },
@@ -599,3 +614,7 @@ enumerable: false,
     __proto.subscribe = function (callback) {
+      this.current;
+
       this._emitter.on("update", callback);
+
+      return this;
     };
@@ -605,88 +624,137 @@
       this._emitter.off("update", callback);
+
+      return this;
     };
 
+    __proto._setCurrent = function (value) {
+      var isUpdate = value !== this._current;
+      this._current = value;
+
+      if (isUpdate) {
+        this._emitter.trigger("update", value);
+      }
+    };
+
+    __proto.toString = function () {
+      return "".concat(this.current);
+    };
+
+    __proto.valueOf = function () {
+      return this.current;
+    };
+
     return Observer;
   }();
 
-  function withReactiveMethods(ref, methods) {
-    var obj = {};
+  /**
+   * @memberof Reactive
+   * @extends Reactive.Observer
+   */
 
-    if (!methods) {
-      return obj;
-    }
+  var ComputedObserver =
+  /*#__PURE__*/
+  function (_super) {
+    __extends(ComputedObserver, _super);
+    /**
+     * Creates a new computed observer from the values of other observers.
+     * It is read-only and if you change the value of the observer used inside the callback, its value will be automatically updated.
+     * @param _computedCallback A function for observers to be computed.
+     */
 
-    methods.forEach(function (name) {
-      obj[name] = function () {
-        var args = [];
 
-        for (var _i = 0; _i < arguments.length; _i++) {
-          args[_i] = arguments[_i];
-        }
+    function ComputedObserver(_computedCallback) {
+      var _this = _super.call(this) || this;
 
-        var current = ref.current || ref.value;
-        return current[name].apply(current, args);
+      _this._computedCallback = _computedCallback;
+      _this._registered = [];
+
+      _this._onCheckUpdate = function () {
+        _this._setCurrent(_this.current);
       };
-    });
-    return obj;
-  }
-  function observe(defaultValue) {
-    return new Observer(defaultValue);
-  }
-  function defineObservers(instance) {
-    var observers = {};
-    Object.defineProperty(instance, OBSERVERS_PATH, {
+
+      _this._current = _this.current;
+      return _this;
+    }
+
+    var __proto = ComputedObserver.prototype;
+    Object.defineProperty(__proto, "current", {
       get: function () {
-        return observers;
-      }
+        var _this = this;
+
+        detectDependencies(this);
+
+        var value = this._computedCallback();
+
+        var results = endDetectDependencies();
+
+        this._registered.forEach(function (observer) {
+          observer.unsubscribe(_this._onCheckUpdate);
+        });
+
+        results.observers.forEach(function (observer) {
+          observer.subscribe(_this._onCheckUpdate);
+        });
+        this._registered = results.observers;
+        return value;
+      },
+      enumerable: false,
+      configurable: true
     });
-    return observers;
-  }
-  function getObservers(instance) {
-    if (!instance[OBSERVERS_PATH]) {
-      defineObservers(instance);
-    }
+    return ComputedObserver;
+  }(Observer);
 
-    return instance[OBSERVERS_PATH];
-  }
-  function getObserver(instance, name, defaultValue) {
-    var observers = getObservers(instance);
-
-    if (!observers[name]) {
-      observers[name] = observe(defaultValue);
+  function injectObserve(prototype, memberName, publicName) {
+    if (publicName === void 0) {
+      publicName = memberName;
     }
 
-    return observers[name];
-  }
-  function setObserver(instance, name, observer) {
-    var observers = getObservers(instance);
-    observers[name] = observer;
-  }
-  function isObserver(val) {
-    return val && isObject(val) && "current" in val && "subscribe" in val && "unsubscribe" in val;
-  }
+    var nextAttributes = {
+      configurable: true,
+      get: function () {
+        return getObserver(this, publicName).current;
+      },
+      set: function (value) {
+        getObserver(this, publicName, value).current = value;
+      }
+    };
+    Object.defineProperty(prototype, memberName, nextAttributes);
 
-  function Reactive(name) {
-    return function (prototype, memberName) {
-      var publicName = name || memberName;
-      Object.defineProperty(prototype, memberName, {
+    if (publicName !== memberName) {
+      Object.defineProperty(prototype, publicName, {
+        configurable: true,
         get: function () {
           return getObserver(this, publicName).current;
-        },
-        set: function (value) {
-          getObserver(this, publicName, value).current = value;
         }
       });
+    }
+  }
 
-      if (publicName !== memberName) {
-        Object.defineProperty(prototype, publicName, {
-          get: function () {
-            return getObserver(this, publicName).current;
-          }
-        });
-      }
+  function Observe() {
+    var args = [];
+
+    for (var _i = 0; _i < arguments.length; _i++) {
+      args[_i] = arguments[_i];
+    }
+
+    if (args.length > 1) {
+      return injectObserve(args[0], args[1]);
+    }
+
+    return function (prototype, memberName) {
+      return injectObserve(prototype, memberName, args[0]);
     };
   }
+  function Reactive() {
+    var args = [];
 
+    for (var _i = 0; _i < arguments.length; _i++) {
+      args[_i] = arguments[_i];
+    }
+
+    return Observe.apply(void 0, args);
+  }
+
   function injectReactiveSubscribe(object) {
     object["subscribe"] = function (name, callback) {
+      this[name];
       getObserver(this, name).subscribe(callback);
@@ -734,3 +802,63 @@ };
   }
+  function computed(computedCallback) {
+    return new ComputedObserver(computedCallback);
+  }
+  function observe(defaultValue) {
+    return new Observer(defaultValue);
+  }
 
+  function withReactiveMethods(ref, methods) {
+    var obj = {};
+
+    if (!methods) {
+      return obj;
+    }
+
+    methods.forEach(function (name) {
+      obj[name] = function () {
+        var args = [];
+
+        for (var _i = 0; _i < arguments.length; _i++) {
+          args[_i] = arguments[_i];
+        }
+
+        var current = ref.current || ref.value;
+        return current[name].apply(current, args);
+      };
+    });
+    return obj;
+  }
+  function defineObservers(instance) {
+    var observers = {};
+    Object.defineProperty(instance, OBSERVERS_PATH, {
+      get: function () {
+        return observers;
+      }
+    });
+    return observers;
+  }
+  function getObservers(instance) {
+    if (!instance[OBSERVERS_PATH]) {
+      defineObservers(instance);
+    }
+
+    return instance[OBSERVERS_PATH];
+  }
+  function getObserver(instance, name, defaultValue) {
+    var observers = getObservers(instance);
+
+    if (!observers[name]) {
+      observers[name] = observe(defaultValue);
+    }
+
+    return observers[name];
+  }
+  function setObserver(instance, name, observer) {
+    var observers = getObservers(instance);
+    observers[name] = observer;
+  }
+  function isObserver(val) {
+    return val && isObject(val) && "current" in val && "subscribe" in val && "unsubscribe" in val;
+  }
+
   function adaptReactive(adapter) {
@@ -803,2 +931,23 @@ var _a;
 
+  function Computed(prototype, memberName, attributes) {
+    var get = attributes.get;
+
+    function getComputed() {
+      var observers = getObservers(this);
+
+      if (!(memberName in observers)) {
+        observers[memberName] = computed(get.bind(this));
+      }
+
+      return getObserver(this, memberName).current;
+    }
+
+    var nextAttributes = {
+      configurable: true,
+      get: getComputed
+    };
+    Object.defineProperty(prototype, memberName, nextAttributes);
+    return nextAttributes;
+  }
+
   var modules = {
@@ -814,3 +963,2 @@ __proto__: null,
     withReactiveMethods: withReactiveMethods,
-    observe: observe,
     defineObservers: defineObservers,
@@ -822,7 +970,12 @@ getObservers: getObservers,
     Observer: Observer,
+    ComputedObserver: ComputedObserver,
     reactive: reactive,
+    computed: computed,
+    observe: observe,
+    adaptReactive: adaptReactive,
+    Observe: Observe,
     Reactive: Reactive,
+    Computed: Computed,
     injectReactiveSubscribe: injectReactiveSubscribe,
-    ReactiveSubscribe: ReactiveSubscribe,
-    adaptReactive: adaptReactive
+    ReactiveSubscribe: ReactiveSubscribe
   };
@@ -829,0 +982,0 @@

dist/cfcs.min.js

@@ -7,5 +7,5 @@ /*
 repository: https://github.com/naver/cfcs
-version: 0.0.6
+version: 0.0.7
 */
-!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(n="undefined"!=typeof globalThis?globalThis:n||self).cfcs=t()}(this,function(){"use strict";function u(n){return Object.keys(n)}function e(n){return"string"==typeof n}function t(n){return"object"==typeof n}function i(n){return"function"==typeof n}var r="__observers__";function s(n){var t="function"==typeof Symbol&&Symbol.iterator,e=t&&n[t],r=0;if(e)return e.call(n);if(n&&"number"==typeof n.length)return{next:function(){return{value:(n=n&&r>=n.length?void 0:n)&&n[r++],done:!n}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function c(){for(var n=[],t=0;t<arguments.length;t++)n=n.concat(function(n,t){var e="function"==typeof Symbol&&n[Symbol.iterator];if(!e)return n;var r,i,o=e.call(n),u=[];try{for(;(void 0===t||0<t--)&&!(r=o.next()).done;)u.push(r.value)}catch(n){i={error:n}}finally{try{r&&!r.done&&(e=o.return)&&e.call(o)}finally{if(i)throw i.error}}return u}(arguments[t]));return n}function l(n){return void 0===n}var o=function(){function n(n,t){var e,r;if(this._canceled=!1,t)try{for(var i=s(Object.keys(t)),o=i.next();!o.done;o=i.next()){var u=o.value;this[u]=t[u]}}catch(n){e={error:n}}finally{try{o&&!o.done&&(r=i.return)&&r.call(i)}finally{if(e)throw e.error}}this.eventType=n}var t=n.prototype;return t.stop=function(){this._canceled=!0},t.isCanceled=function(){return this._canceled},n}(),f=function(){function n(){this._eventHandler={}}var t=n.prototype;return t.trigger=function(t){for(var e=[],n=1;n<arguments.length;n++)e[n-1]=arguments[n];var r=t instanceof o?t.eventType:t,r=c(this._eventHandler[r]||[]);return r.length<=0||(t instanceof o?(t.currentTarget=this,r.forEach(function(n){n(t)})):r.forEach(function(n){n.apply(void 0,c(e))})),this},t.once=function(e,r){var i,o=this;if("object"==typeof e&&l(r)){var n,t=e;for(n in t)this.once(n,t[n])}else"string"==typeof e&&"function"==typeof r&&(i=function(){for(var n=[],t=0;t<arguments.length;t++)n[t]=arguments[t];r.apply(void 0,c(n)),o.off(e,i)},this.on(e,i));return this},t.hasOn=function(n){return!!this._eventHandler[n]},t.on=function(n,t){if("object"==typeof n&&l(t)){var e,r=n;for(e in r)this.on(e,r[e])}else{var i;"string"==typeof n&&"function"==typeof t&&(i=this._eventHandler[n],l(i)&&(this._eventHandler[n]=[],i=this._eventHandler[n]),i.push(t))}return this},t.off=function(n,t){var e,r;if(l(n))return this._eventHandler={},this;if(l(t)){if("string"==typeof n)return delete this._eventHandler[n],this;var i,o=n;for(i in o)this.off(i,o[i])}else{var u=this._eventHandler[n];if(u){var c=0;try{for(var f=s(u),a=f.next();!a.done;a=f.next()){if(a.value===t){u.splice(c,1),u.length<=0&&delete this._eventHandler[n];break}c++}}catch(n){e={error:n}}finally{try{a&&!a.done&&(r=f.return)&&r.call(f)}finally{if(e)throw e.error}}}}return this},n.VERSION="3.0.2",n}(),a=function(){function n(n){this._emitter=new f,this._current=n}var t=n.prototype;return Object.defineProperty(t,"current",{get:function(){return this._current},set:function(n){var t=n!==this._current;this._current=n,t&&this._emitter.trigger("update",n)},enumerable:!1,configurable:!0}),t.subscribe=function(n){this._emitter.on("update",n)},t.unsubscribe=function(n){this._emitter.off("update",n)},n}();function v(i,n){var t={};return n&&n.forEach(function(r){t[r]=function(){for(var n=[],t=0;t<arguments.length;t++)n[t]=arguments[t];var e=i.current||i.value;return e[r].apply(e,n)}}),t}function h(n){return new a(n)}function d(n){var t={};return Object.defineProperty(n,r,{get:function(){return t}}),t}function y(n){return n[r]||d(n),n[r]}function b(n,t,e){n=y(n);return n[t]||(n[t]=h(e)),n[t]}function p(n,t,e){y(n)[t]=e}function g(n){return n&&t(n)&&"current"in n&&"subscribe"in n&&"unsubscribe"in n}function _(r){return function(n,t){var e=r||t;Object.defineProperty(n,t,{get:function(){return b(this,e).current},set:function(n){b(this,e,n).current=n}}),e!==t&&Object.defineProperty(n,e,{get:function(){return b(this,e).current}})}}function m(n){n.subscribe=function(n,t){b(this,n).subscribe(t)},n.unsubscribe=function(n,t){var e=this;n?n in this&&b(this,n).unsubscribe(t):u(y(this)).forEach(function(n){e.unsubscribe(n)})}}return{__proto__:null,keys:u,camelize:function(n){return n.replace(/[\s-_]([a-z])/g,function(n,t){return t.toUpperCase()})},isString:e,isObject:t,isFunction:i,findTarget:function(n){var t;return n?(e(n)?t=document.querySelector(n):n instanceof Element?t=n:("value"in n||"current"in n)&&(t=n.value||n.current),t):null},withClassMethods:function(t){return function(n,i){t.forEach(function(r){r in n||(n[r]=function(){for(var n=[],t=0;t<arguments.length;t++)n[t]=arguments[t];var e=(e=this[i])[r].apply(e,n);return e===this[i]?this:e})})}},withReactiveMethods:v,observe:h,defineObservers:d,getObservers:y,getObserver:b,setObserver:p,isObserver:g,Observer:a,reactive:function(n){var e=i(n)?n():n,r={};return d(r),u(e).forEach(function(n){var t=e[n];g(t)?(p(r,n,t),_(n)(r,n)):r[n]=t}),m(r),r},Reactive:_,injectReactiveSubscribe:m,ReactiveSubscribe:function(n){m(n.prototype)},adaptReactive:function(r){var n;function t(){var n;return null!=(n=null==(n=r.data)?void 0:n.call(r))?n:{}}var i={current:(null==(n=r.created)?void 0:n.call(r,t()))||null},o=null;return{state:function(){var e,n=i.current;return o||(r.state?o=r.state:n&&(e=y(n),o=u(e).reduce(function(n,t){return n[t]=e[t].current,n},{})),o||{})},instance:function(){return i.current},mounted:function(){var n;i.current=(null==(n=r.mounted)?void 0:n.call(r,t()))||i.current},init:function(){var n;null!=(n=r.init)&&n.call(r,i.current,t())},destroy:function(){var n;null!=(n=r.destroy)&&n.call(r,i.current,t())},methods:function(){return v(i,r.methods)},on:function(n,t){var e;null!=(e=r.on)&&e.call(r,i.current,n,t)},off:function(n,t){var e;null!=(e=r.off)&&e.call(r,i.current,n,t)}}}}});
+!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(t="undefined"!=typeof globalThis?globalThis:t||self).cfcs=n()}(this,function(){"use strict";function u(t){return Object.keys(t)}function e(t){return"string"==typeof t}function n(t){return"object"==typeof t}function i(t){return"function"==typeof t}var r="__observers__",o=1,c="__CFCS_DETECTED_DEPENDENCIES__",f=function(t,n){return(f=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,n){t.__proto__=n}||function(t,n){for(var e in n)Object.prototype.hasOwnProperty.call(n,e)&&(t[e]=n[e])})(t,n)};function s(){Object[c]=Object[c]||{};var t=Object[c];return t[o]=t[o]||[],t[o]}function a(t){var n="function"==typeof Symbol&&Symbol.iterator,e=n&&t[n],r=0;if(e)return e.call(t);if(t&&"number"==typeof t.length)return{next:function(){return{value:(t=t&&r>=t.length?void 0:t)&&t[r++],done:!t}}};throw new TypeError(n?"Object is not iterable.":"Symbol.iterator is not defined.")}function l(){for(var t=[],n=0;n<arguments.length;n++)t=t.concat(function(t,n){var e="function"==typeof Symbol&&t[Symbol.iterator];if(!e)return t;var r,i,o=e.call(t),u=[];try{for(;(void 0===n||0<n--)&&!(r=o.next()).done;)u.push(r.value)}catch(t){i={error:t}}finally{try{r&&!r.done&&(e=o.return)&&e.call(o)}finally{if(i)throw i.error}}return u}(arguments[n]));return t}function h(t){return void 0===t}var v=function(){function t(t,n){var e,r;if(this._canceled=!1,n)try{for(var i=a(Object.keys(n)),o=i.next();!o.done;o=i.next()){var u=o.value;this[u]=n[u]}}catch(t){e={error:t}}finally{try{o&&!o.done&&(r=i.return)&&r.call(i)}finally{if(e)throw e.error}}this.eventType=t}var n=t.prototype;return n.stop=function(){this._canceled=!0},n.isCanceled=function(){return this._canceled},t}(),p=function(){function t(){this._eventHandler={}}var n=t.prototype;return n.trigger=function(n){for(var e=[],t=1;t<arguments.length;t++)e[t-1]=arguments[t];var r=n instanceof v?n.eventType:n,r=l(this._eventHandler[r]||[]);return r.length<=0||(n instanceof v?(n.currentTarget=this,r.forEach(function(t){t(n)})):r.forEach(function(t){t.apply(void 0,l(e))})),this},n.once=function(e,r){var i,o=this;if("object"==typeof e&&h(r)){var t,n=e;for(t in n)this.once(t,n[t])}else"string"==typeof e&&"function"==typeof r&&(i=function(){for(var t=[],n=0;n<arguments.length;n++)t[n]=arguments[n];r.apply(void 0,l(t)),o.off(e,i)},this.on(e,i));return this},n.hasOn=function(t){return!!this._eventHandler[t]},n.on=function(t,n){if("object"==typeof t&&h(n)){var e,r=t;for(e in r)this.on(e,r[e])}else{var i;"string"==typeof t&&"function"==typeof n&&(i=this._eventHandler[t],h(i)&&(this._eventHandler[t]=[],i=this._eventHandler[t]),i.push(n))}return this},n.off=function(t,n){var e,r;if(h(t))return this._eventHandler={},this;if(h(n)){if("string"==typeof t)return delete this._eventHandler[t],this;var i,o=t;for(i in o)this.off(i,o[i])}else{var u=this._eventHandler[t];if(u){var c=0;try{for(var f=a(u),s=f.next();!s.done;s=f.next()){if(s.value===n){u.splice(c,1),u.length<=0&&delete this._eventHandler[t];break}c++}}catch(t){e={error:t}}finally{try{s&&!s.done&&(r=f.return)&&r.call(f)}finally{if(e)throw e.error}}}}return this},t.VERSION="3.0.3",t}(),d=function(){function t(t){this._emitter=new p,this._current=t}var n=t.prototype;return Object.defineProperty(n,"current",{get:function(){var t=(t=s())[t.length-1];return null!=t&&t.push(this),this._current},set:function(t){this._setCurrent(t)},enumerable:!1,configurable:!0}),n.subscribe=function(t){return this.current,this._emitter.on("update",t),this},n.unsubscribe=function(t){return this._emitter.off("update",t),this},n._setCurrent=function(t){var n=t!==this._current;this._current=t,n&&this._emitter.trigger("update",t)},n.toString=function(){return"".concat(this.current)},n.valueOf=function(){return this.current},t}(),b=function(e){var t=i,n=e;if("function"!=typeof n&&null!==n)throw new TypeError("Class extends value "+String(n)+" is not a constructor or null");function r(){this.constructor=t}function i(t){var n=e.call(this)||this;return n._computedCallback=t,n._registered=[],n._onCheckUpdate=function(){n._setCurrent(n.current)},n._current=n.current,n}return f(t,n),t.prototype=null===n?Object.create(n):(r.prototype=n.prototype,new r),Object.defineProperty(i.prototype,"current",{get:function(){var n,e,r=this,t=(n=this,t=s(),i={host:n,observers:e=[],push:function(t){n!==t&&-1===e.indexOf(t)&&e.push(t)}},t.push(i),this._computedCallback()),i=s().pop();return this._registered.forEach(function(t){t.unsubscribe(r._onCheckUpdate)}),i.observers.forEach(function(t){t.subscribe(r._onCheckUpdate)}),this._registered=i.observers,t},enumerable:!1,configurable:!0}),i}(d);function y(t,n,e){void 0===e&&(e=n),Object.defineProperty(t,n,{configurable:!0,get:function(){return S(this,e).current},set:function(t){S(this,e,t).current=t}}),e!==n&&Object.defineProperty(t,e,{configurable:!0,get:function(){return S(this,e).current}})}function _(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];return 1<e.length?y(e[0],e[1]):function(t,n){return y(t,n,e[0])}}function g(){for(var t=[],n=0;n<arguments.length;n++)t[n]=arguments[n];return _.apply(void 0,t)}function O(t){t.subscribe=function(t,n){this[t],S(this,t).subscribe(n)},t.unsubscribe=function(t,n){var e=this;t?t in this&&S(this,t).unsubscribe(n):u(w(this)).forEach(function(t){e.unsubscribe(t)})}}function m(t){return new b(t)}function j(t){return new d(t)}function E(i,t){var n={};return t&&t.forEach(function(r){n[r]=function(){for(var t=[],n=0;n<arguments.length;n++)t[n]=arguments[n];var e=i.current||i.value;return e[r].apply(e,t)}}),n}function C(t){var n={};return Object.defineProperty(t,r,{get:function(){return n}}),n}function w(t){return t[r]||C(t),t[r]}function S(t,n,e){t=w(t);return t[n]||(t[n]=j(e)),t[n]}function x(t,n,e){w(t)[n]=e}function H(t){return t&&n(t)&&"current"in t&&"subscribe"in t&&"unsubscribe"in t}return{__proto__:null,keys:u,camelize:function(t){return t.replace(/[\s-_]([a-z])/g,function(t,n){return n.toUpperCase()})},isString:e,isObject:n,isFunction:i,findTarget:function(t){var n;return t?(e(t)?n=document.querySelector(t):t instanceof Element?n=t:("value"in t||"current"in t)&&(n=t.value||t.current),n):null},withClassMethods:function(n){return function(t,i){n.forEach(function(r){r in t||(t[r]=function(){for(var t=[],n=0;n<arguments.length;n++)t[n]=arguments[n];var e=(e=this[i])[r].apply(e,t);return e===this[i]?this:e})})}},withReactiveMethods:E,defineObservers:C,getObservers:w,getObserver:S,setObserver:x,isObserver:H,Observer:d,ComputedObserver:b,reactive:function(t){var e=i(t)?t():t,r={};return C(r),u(e).forEach(function(t){var n=e[t];H(n)?(x(r,t,n),g(t)(r,t)):r[t]=n}),O(r),r},computed:m,observe:j,adaptReactive:function(r){var t;function n(){var t;return null!=(t=null==(t=r.data)?void 0:t.call(r))?t:{}}var i={current:(null==(t=r.created)?void 0:t.call(r,n()))||null},o=null;return{state:function(){var e,t=i.current;return o||(r.state?o=r.state:t&&(e=w(t),o=u(e).reduce(function(t,n){return t[n]=e[n].current,t},{})),o||{})},instance:function(){return i.current},mounted:function(){var t;i.current=(null==(t=r.mounted)?void 0:t.call(r,n()))||i.current},init:function(){var t;null!=(t=r.init)&&t.call(r,i.current,n())},destroy:function(){var t;null!=(t=r.destroy)&&t.call(r,i.current,n())},methods:function(){return E(i,r.methods)},on:function(t,n){var e;null!=(e=r.on)&&e.call(r,i.current,t,n)},off:function(t,n){var e;null!=(e=r.off)&&e.call(r,i.current,t,n)}}},Observe:_,Reactive:g,Computed:function(t,n,e){var r=e.get;return e={configurable:!0,get:function(){var t=w(this);return n in t||(t[n]=m(r.bind(this))),S(this,n).current}},Object.defineProperty(t,n,e),e},injectReactiveSubscribe:O,ReactiveSubscribe:function(t){O(t.prototype)}}});
 //# sourceMappingURL=cfcs.min.js.map

package.json

 {
   "name": "@cfcs/core",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "",
@@ -9,12 +9,13 @@ "main": "dist/cfcs.cjs.js",
   "scripts": {
-		"start": "rollup -c -w",
-		"build": "rm -rf ./dist ./declaration && rollup -c && npm run declaration",
-		"declaration": "rm -rf declaration && tsc -p tsconfig.declaration.json",
-		"lint": "eslint ./src/ --ext .ts"
-	},
+    "start": "rollup -c -w",
+    "build": "rm -rf ./dist ./declaration && rollup -c && npm run declaration",
+    "declaration": "rm -rf declaration && tsc -p tsconfig.declaration.json",
+    "test": "jest --watchAll",
+    "lint": "eslint ./src/ --ext .ts"
+  },
   "repository": {
-		"type": "git",
-		"url": "https://github.com/naver/cfcs"
-	},
-	"author": "NAVER Crop.",
+    "type": "git",
+    "url": "https://github.com/naver/cfcs"
+  },
+  "author": "NAVER Crop.",
   "license": "MIT",
@@ -35,8 +36,12 @@ "keywords": [
   "dependencies": {
-    "@egjs/component": "^3.0.2"
+    "@egjs/component": "^3.0.3"
   },
   "devDependencies": {
     "@egjs/build-helper": "^0.1.2",
+    "@types/sinon": "^10.0.13",
+    "jest": "^29.3.1",
+    "sinon": "^15.0.0",
+    "ts-jest": "^29.0.3",
     "typescript": "^4.7.4"
   }
 }

src/reactive/adaptReactive.ts

@@ -1,5 +0,5 @@
-import { keys } from "src/core";
-import { Ref } from "src/core/types";
+import { keys } from "../core";
+import { Ref } from "../core/types";
 import { ReactiveAdapter } from "./ReactiveAdapter";
-import { ReactiveSubscribe } from "./ReactiveSubscribe";
+import { ReactiveSubscribe } from "./decorators/ReactiveSubscribe";
 import { ReactiveEventCallback } from "./types";
@@ -6,0 +6,0 @@ import { getObservers, withReactiveMethods } from "./utils";

src/reactive/const.ts

 export const OBSERVERS_PATH = "__observers__";
 export const REACTIVE_PATH = "__reactive__";
+export const CFCS_DETECTED_DEPENDENCIES_VERSION = 1;
+export const CFCS_DETECTED_DEPENDENCIES = "__CFCS_DETECTED_DEPENDENCIES__";

src/reactive/index.ts

@@ -0,1 +1,3 @@
+import { Computed } from "./decorators/Computed";
+import { ReactiveSubscribe } from "./decorators/ReactiveSubscribe";
 
@@ -5,6 +7,9 @@ export * from "./utils";
 export * from "./Observer";
-export * from "./inlineReactive";
-export * from "./Reactive";
+export * from "./ComputedObserver";
+export * from "./inline";
 export * from "./ReactiveAdapter";
-export * from "./ReactiveSubscribe";
-export * from "./adaptReactive";
+export * from "./adaptReactive";
+
+export * from "./decorators/Observe";
+export * from "./decorators/Computed";
+export * from "./decorators/ReactiveSubscribe";

src/reactive/Observer.ts

 import Component from "@egjs/component";
+import { getCurrentDetected } from "./detectDependencies";
 
@@ -7,6 +8,12 @@ interface EmitterEvents<Value> {
 
+/**
+ * @memberof Reactive
+ */
 export class Observer<Value = any> {
-  private _current: Value;
-  private _emitter = new Component<EmitterEvents<Value>>();
+  protected _current: Value;
+  protected _emitter = new Component<EmitterEvents<Value>>();
 
+  /**
+   *
+   */
   constructor(value?: Value) {
@@ -16,6 +23,22 @@ this._current = value as any;
   public get current() {
+    const currentDetected = getCurrentDetected();
+
+    currentDetected?.push(this);
     return this._current as Value;
   }
   public set current(value: Value) {
+    this._setCurrent(value);
+  }
+  public subscribe(callback: (value: Value) => void) {
+    this.current;
+    this._emitter.on("update", callback);
+    return this;
+  }
+  public unsubscribe(callback?: (value: Value) => void) {
+    this._emitter.off("update", callback);
+    return this;
+  }
+  protected _setCurrent(value: Value) {
     const isUpdate = value !== this._current;
+
     this._current = value;
@@ -27,8 +50,8 @@
   }
-  public subscribe(callback: (value: Value) => void) {
-    this._emitter.on("update", callback);
+  public toString() {
+    return `${this.current}`;
   }
-  public unsubscribe(callback?: (value: Value) => void) {
-    this._emitter.off("update", callback);
+  public valueOf() {
+    return this.current;
   }
 }

src/reactive/ReactiveAdapter.ts

 import { EventKey } from "@egjs/component/declaration/types";
 import { ReactiveEventCallback } from "./types";
-import { ReactiveSubscribe } from "./ReactiveSubscribe";
+import { ReactiveSubscribe } from "./decorators/ReactiveSubscribe";
 
@@ -5,0 +5,0 @@ export interface ReactiveAdapter<

src/reactive/README.md

@@ -14,6 +14,6 @@ * CFCs Reactive
 3. Use the `@ReactiveSubscribe` class decorator to use the `subscribe` method.
-4. Use the `@Reactive` property decorator to use as reactive state.
+4. Use the `@Observe` property decorator to use as reactive state.
 
 ```ts
-import { Reactive, ReactiveSubscribe, ReactiveSubscribe } from "@cfcs/reactive";
+import { Observe, Computed, ReactiveSubscribe, ReactiveSubscribe } from "@cfcs/reactive";
 
@@ -23,2 +23,3 @@ export interface ComponentReactiveState {
   state2: number;
+  state3: number
 }
@@ -28,8 +29,16 @@
 class Component {
-  @Reactive() state1!: boolean;
-  @Reactive() state2!: number;
+  @Observe() state1!: boolean;
+  @Observe() state2!: number;
+  @Computed()
+  get state3() {
+    return this.state1 ? this.state2 : 0;
+  }
 
   // If you want to use it privately and export only public getters, use it as follows.
-  @Reactive("state1") private _state1!: boolean;
-  @Reactive("state2") private _state2!: number;
+  @Observe("state1") private _state1!: boolean;
+  @Observe("state2") private _state2!: number;
+  @Computed("state3")
+  get _state3() {
+    return this._state1 + this._state2;
+  }
 }
@@ -54,2 +63,10 @@
 });
+
+component.subscribe("state2", nextValue => {
+  console.log("subscribe state2 value", nextValue);
+});
+
+component.subscribe("state3", nextValue => {
+  console.log("subscribe state3 value", nextValue);
+});
 ```
@@ -56,0 +73,0 @@

src/reactive/types.ts

 import { ComponentEvent } from "@egjs/component";
 import { Observer } from "./Observer";
-import { ReactiveSubscribe } from "./ReactiveSubscribe";
+import { ReactiveSubscribe } from "./decorators/ReactiveSubscribe";
 
@@ -5,0 +5,0 @@ type AnyFunction = (...args: any[]) => any;

src/reactive/utils.ts

 import { OBSERVERS_PATH } from "./const";
 import { Observer } from "./Observer";
-import { GetReactiveValue, ReactiveMethods } from "./types";
+import { ReactiveMethods } from "./types";
 import { isObject, Ref } from "../core";
+import { observe } from "./inline";
 
@@ -29,6 +30,2 @@
 
-export function observe<Type>(defaultValue?: Type): Observer<Type> {
-  return new Observer<Type>(defaultValue);
-}
-
 export function defineObservers(instance: any) {
@@ -71,1 +68,2 @@ const observers: Record<string, Observer<any>> = {};
 }
+

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

230606

increased by56.03%

Number of package files

59

increased by22.92%

Lines of code

2824

increased by46.4%

Number of lines in readme file

104

increased by19.54%

Worsened metrics

Dev dependency count

6

increased by200%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@egjs/component@^3.0.3