@cfcs/react - npm Package Compare versions

Comparing version 0.0.22 to 0.0.23

declaration/reactive/types.d.ts

@@ -1,11 +0,11 @@
-import { ReactiveAdapter, ReactiveEventParameters } from "@cfcs/core";
+import { ReactiveAdapterParam, ReactiveEventParameters, ReactiveState, ReactiveSubscribe } from "@cfcs/core";
 export declare type ReactiveEvents<Events extends Record<string, any>> = {
     [key in keyof Events as `on${Capitalize<string & key>}`]: (effect: ((...args: ReactiveEventParameters<Events, key & string>) => void), deps?: readonly any[]) => void;
 };
-export declare type ReactiveResult<Instance, State extends Record<string, any> = {}, Methods extends keyof Partial<Instance> = any, Events extends Record<string, any> = {}> = State & {
+export declare type ReactiveResult<Instance extends ReactiveSubscribe<Record<string, any>>, State extends Record<string, any> = ReactiveState<Instance>, Methods extends keyof Partial<Instance> = any, Events extends Record<string, any> = {}> = State & {
     [key in Methods]: Instance[key];
 } & ReactiveEvents<Events>;
-export declare type ReactiveAdapterResult<Adapter extends ReactiveAdapter<any, any, any, any, any>> = Adapter extends ReactiveAdapter<infer Instance, infer State, infer Methods, any, infer Events> ? ReactiveResult<Instance, State, Methods, Events> : {};
+export declare type ReactiveAdapterResult<Adapter extends ReactiveAdapterParam<any, any, any, any, any>> = Adapter extends ReactiveAdapterParam<infer Instance, infer State, infer Methods, any, infer Events> ? ReactiveResult<Instance, State, Methods, Events> : {};
 export declare type ReactReactiveEvents<Events extends Record<string, any>> = ReactiveEvents<Events>;
-export declare type ReactReactiveResult<Instance, State extends Record<string, any> = {}, Methods extends keyof Partial<Instance> = any, Events extends Record<string, any> = {}> = ReactiveResult<Instance, State, Methods, Events>;
-export declare type ReactReactiveAdapterResult<Adapter extends ReactiveAdapter<any, any, any, any, any>> = ReactiveAdapterResult<Adapter>;
+export declare type ReactReactiveResult<Instance extends ReactiveSubscribe<Record<string, any>>, State extends Record<string, any> = ReactiveState<Instance>, Methods extends keyof Partial<Instance> = any, Events extends Record<string, any> = {}> = ReactiveResult<Instance, State, Methods, Events>;
+export declare type ReactReactiveAdapterResult<Adapter extends ReactiveAdapterParam<any, any, any, any, any>> = ReactiveAdapterResult<Adapter>;

declaration/reactive/useReactive.d.ts

@@ -1,3 +0,3 @@
-import { ReactiveSubscribe, ReactiveAdapterParam } from "@cfcs/core";
+import { ReactiveSubscribe, ReactiveAdapterParam, ReactiveState } from "@cfcs/core";
 import { ReactiveResult } from "./types";
-export declare function useReactive<Instance extends ReactiveSubscribe<Record<string, any>>, State extends Record<string, any> = {}, Methods extends keyof Partial<Instance> = any, Props = any, Events extends Record<string, any> = {}>(reactiveAdapter: ReactiveAdapterParam<Instance, State, Methods, Props, Events>, props?: () => Props): ReactiveResult<Instance, State, Methods, Events>;
+export declare function useReactive<Instance extends ReactiveSubscribe<Record<string, any>>, State extends Record<string, any> = ReactiveState<Instance>, Methods extends keyof Partial<Instance> = any, Props = any, Events extends Record<string, any> = {}>(reactiveAdapter: ReactiveAdapterParam<Instance, State, Methods, Props, Events>, props?: () => Props): ReactiveResult<Instance, State, Methods, Events>;

dist/cfcs.cjs.js

@@ -7,3 +7,3 @@ /*
 repository: https://github.com/naver/cfcs
-version: 0.0.22
+version: 0.0.23
 */
@@ -15,3 +15,17 @@ 'use strict';
 
+/**
+ * @description In React, you can create reactive components through adapters.
+ * @category Reactive
+ * @example
+ * ```ts
+ * import { useReactive } from "@cfcs/react";
+ *
+ * export function useReactiveComponent() {
+ *   return useReactive(REACTIVE_ADAPTER);
+ * }
+ * ```
+ */
+
 function useReactive(reactiveAdapter, props) {
+  var readRef = react.useRef(true);
   var adaptResult = react.useMemo(function () {
@@ -40,2 +54,3 @@ return core.adaptReactive(reactiveAdapter, props);
 
+  readRef.current = true;
   var methods = react.useMemo(function () {
@@ -45,2 +60,5 @@ return adaptResult.methods();
   react.useEffect(function () {
+    readRef.current = false;
+  });
+  react.useEffect(function () {
     adaptResult.mounted();
@@ -50,2 +68,4 @@ var inst = adaptResult.instance();
       inst.subscribe(name, function (value) {
+        states[name].value = value;
+
         if (states[name].getter) {
@@ -62,9 +82,15 @@ states[name].set(value);
   var result = names.reduce(function (result, name) {
-    Object.defineProperty(result, name, {
-      enumerable: true,
-      get: function () {
-        states[name].getter = true;
-        return states[name].value;
-      }
-    });
+    if (!methods[name]) {
+      Object.defineProperty(result, name, {
+        enumerable: true,
+        get: function () {
+          if (readRef.current) {
+            states[name].getter = true;
+          }
+
+          return states[name].value;
+        }
+      });
+    }
+
     return result;
@@ -71,0 +97,0 @@ }, {});

dist/cfcs.esm.js

@@ -7,8 +7,22 @@ /*
 repository: https://github.com/naver/cfcs
-version: 0.0.22
+version: 0.0.23
 */
 import { adaptReactive, keys, camelize } from '@cfcs/core';
-import { useMemo, useState, useEffect } from 'react';
+import { useRef, useMemo, useState, useEffect } from 'react';
 
+/**
+ * @description In React, you can create reactive components through adapters.
+ * @category Reactive
+ * @example
+ * ```ts
+ * import { useReactive } from "@cfcs/react";
+ *
+ * export function useReactiveComponent() {
+ *   return useReactive(REACTIVE_ADAPTER);
+ * }
+ * ```
+ */
+
 function useReactive(reactiveAdapter, props) {
+  var readRef = useRef(true);
   var adaptResult = useMemo(function () {
@@ -37,2 +51,3 @@ return adaptReactive(reactiveAdapter, props);
 
+  readRef.current = true;
   var methods = useMemo(function () {
@@ -42,2 +57,5 @@ return adaptResult.methods();
   useEffect(function () {
+    readRef.current = false;
+  });
+  useEffect(function () {
     adaptResult.mounted();
@@ -47,2 +65,4 @@ var inst = adaptResult.instance();
       inst.subscribe(name, function (value) {
+        states[name].value = value;
+
         if (states[name].getter) {
@@ -59,9 +79,15 @@ states[name].set(value);
   var result = names.reduce(function (result, name) {
-    Object.defineProperty(result, name, {
-      enumerable: true,
-      get: function () {
-        states[name].getter = true;
-        return states[name].value;
-      }
-    });
+    if (!methods[name]) {
+      Object.defineProperty(result, name, {
+        enumerable: true,
+        get: function () {
+          if (readRef.current) {
+            states[name].getter = true;
+          }
+
+          return states[name].value;
+        }
+      });
+    }
+
     return result;
@@ -68,0 +94,0 @@ }, {});

package.json

 {
   "name": "@cfcs/react",
-  "version": "0.0.22",
-  "description": "Cross Framework Components",
+  "version": "0.0.23",
+  "description": "CFCs(Cross Framework Components) are modules that convert components into framework usage for React",
   "main": "dist/cfcs.cjs.js",
@@ -23,2 +23,4 @@ "module": "dist/cfcs.esm.js",
   "keywords": [
+    "cfcs",
+    "cfc",
     "react",
@@ -36,3 +38,3 @@ "react-hook",
   "dependencies": {
-    "@cfcs/core": "~0.0.22"
+    "@cfcs/core": "~0.0.23"
   },
@@ -39,0 +41,0 @@ "devDependencies": {

src/reactive/types.ts

@@ -1,3 +0,6 @@
-import { ReactiveAdapter, ReactiveEventParameters } from "@cfcs/core";
+import { ReactiveAdapterParam, ReactiveEventParameters, ReactiveState, ReactiveSubscribe } from "@cfcs/core";
 
+/**
+ * @category Reactive
+ */
 export type ReactiveEvents<
@@ -9,5 +12,8 @@ Events extends Record<string, any>
 
+/**
+ * @category Reactive
+ */
 export type ReactiveResult<
-  Instance,
-  State extends Record<string, any> = {},
+  Instance extends ReactiveSubscribe<Record<string, any>>,
+  State extends Record<string, any> = ReactiveState<Instance>,
   Methods extends keyof Partial<Instance> = any,
@@ -17,6 +23,17 @@ Events extends Record<string, any> = {},
 
+/**
+ * Get the result type of reactive component through adapter.
+ * @category Reactive
+ * @see useReactive
+ * @example
+ * ```ts
+ * import { ReactiveAdapterResult } from "@cfcs/react";
+ *
+ * type ReactiveComponentResult = ReactiveAdapterResult<typeof REACTIVE_ADAPTER>;
+ * ```
+ */
 export type ReactiveAdapterResult<
-  Adapter extends ReactiveAdapter<any, any, any, any, any>,
+  Adapter extends ReactiveAdapterParam<any, any, any, any, any>,
 >
-  = Adapter extends ReactiveAdapter<infer Instance, infer State, infer Methods, any, infer Events>
+  = Adapter extends ReactiveAdapterParam<infer Instance, infer State, infer Methods, any, infer Events>
   ? ReactiveResult<Instance, State, Methods, Events> : {};
@@ -27,5 +44,14 @@
 // Names using framework prefix
+/**
+ * @category Reactive
+ * @hidden
+ */
 export type ReactReactiveEvents<Events extends Record<string, any>> = ReactiveEvents<Events>;
-export type ReactReactiveResult<Instance,
-  State extends Record<string, any> = {},
+/**
+ * @category Reactive
+ * @hidden
+ */
+export type ReactReactiveResult<
+  Instance extends ReactiveSubscribe<Record<string, any>>,
+  State extends Record<string, any> = ReactiveState<Instance>,
   Methods extends keyof Partial<Instance> = any,
@@ -39,4 +65,8 @@ Events extends Record<string, any> = {},
 >;
+/**
+ * @category Reactive
+ * @hidden
+ */
 export type ReactReactiveAdapterResult<
-  Adapter extends ReactiveAdapter<any, any, any, any, any>
+  Adapter extends ReactiveAdapterParam<any, any, any, any, any>
 > = ReactiveAdapterResult<Adapter>;

src/reactive/useReactive.ts

@@ -1,9 +0,20 @@
-import { ReactiveSubscribe, ReactiveAdapterParam, keys, camelize, adaptReactive } from "@cfcs/core";
-import { useEffect, useState, useMemo } from "react";
+import { ReactiveSubscribe, ReactiveAdapterParam, keys, camelize, adaptReactive, ReactiveState } from "@cfcs/core";
+import { useEffect, useState, useMemo, useRef } from "react";
 import { ReactiveResult } from "./types";
 
-
+/**
+ * @description In React, you can create reactive components through adapters.
+ * @category Reactive
+ * @example
+ * ```ts
+ * import { useReactive } from "@cfcs/react";
+ *
+ * export function useReactiveComponent() {
+ *   return useReactive(REACTIVE_ADAPTER);
+ * }
+ * ```
+ */
 export function useReactive<
   Instance extends ReactiveSubscribe<Record<string, any>>,
-  State extends Record<string, any> = {},
+  State extends Record<string, any> = ReactiveState<Instance>,
   Methods extends keyof Partial<Instance> = any,
@@ -16,2 +27,3 @@ Props = any,
 ): ReactiveResult<Instance, State, Methods, Events> {
+  const readRef = useRef(true);
   const adaptResult = useMemo(() => adaptReactive(reactiveAdapter, props), []);
@@ -35,5 +47,11 @@ const reactiveState = adaptResult.state();
 
+
+  readRef.current = true;
+
   const methods = useMemo(() => adaptResult.methods(), []);
 
   useEffect(() => {
+    readRef.current = false;
+  });
+  useEffect(() => {
     adaptResult.mounted();
@@ -45,2 +63,4 @@
       (inst as any).subscribe(name, (value: any) => {
+        states[name].value = value;
+
         if (states[name].getter) {
@@ -62,9 +82,13 @@ states[name].set(value);
   const result = names.reduce<any>((result, name) => {
-    Object.defineProperty(result, name, {
-      enumerable: true,
-      get() {
-        states[name].getter = true;
-        return states[name].value;
-      },
-    });
+    if (!methods[name]) {
+      Object.defineProperty(result, name, {
+        enumerable: true,
+        get() {
+          if (readRef.current) {
+            states[name].getter = true;
+          }
+          return states[name].value;
+        },
+      });
+    }
     return result;
@@ -71,0 +95,0 @@ }, {});

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

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

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

33204

increased by32.95%

Number of package files

17

increased by6.25%

Lines of code

452

increased by27.32%

Number of medium quality alerts

0

decreased by-100%

Number of lines in readme file

130

increased byInfinity%

Dependency changes

• Updated@cfcs/core@~0.0.23