@cfcs/vue3 - npm Package Compare versions

Comparing version 0.0.22 to 0.0.23

README.md

+
+<p align="center"></p>
+
+<h2 align="center" style="max-width: 100%;">
+  <img src="../../logo.png" /><br/>
+  <a href="#">Cross Framework Components for Vue 3</a>
+</h2>
+
+<p align="middle">
+<a href="https://www.npmjs.com/package/@cfcs/vue3" target="_blank"><img src="https://img.shields.io/npm/v/@cfcs/vue3.svg?style=flat-square&color=00d8ff&label=version&logo=NPM"></a>&nbsp;
+<img src="https://img.shields.io/badge/language-typescript-blue.svg?style=flat-square" />&nbsp;
+<a href="https://github.com/naver/cfcs/blob/main/LICENSE" target="_blank"><img alt="GitHub" src="https://img.shields.io/github/license/naver/cfcs.svg?style=flat-square&label=%F0%9F%93%9C%20license&color=08CE5D" /></a>&nbsp;
+</p>
+<p align="center">CFCs(Cross Framework Components) are modules that convert components into framework usage for Vue 3.</p>
+
+
+## ⚙️ Installation
+```sh
+# >= 2.7
+$ npm install @cfcs/vue3
+# < 2.7
+$ npm install @cfcs/vue3
+```
+
+## 🏃 How to use
+
+Vue 3 Component can be written by using `useReactive` through `REACTIVE_ADAPTER`([made with @cfcs/core](https://github.com/naver/cfcs/blob/main/reactive.md)) constant.
+
+### Adapter
+```js
+import { reactive } from "@cfcs/core";
+
+const REACTIVE_ADAPTER = ({
+  emit,
+  onInit,
+  setEvents,
+  setMethods,
+}) => {
+  setEvents(["event1"]);
+  setEvents(["method1"]);
+
+  const obj = reactive({
+    value1: 1,
+    method1() {
+      console.log("method1");
+    },
+  });
+
+  const inst = new YourModule();
+
+  onInit(() => {
+    requestAnimationFrame(() => {
+      value1.current = 2;
+
+      // emit `event1` event externally
+      emit("event1", e);
+    });
+  });
+
+  // Returns a reactive value.
+  return obj;
+};
+```
+### Component
+```ts
+import { REACTIVE_ADAPTER } from "your-module";
+import { useReactive, ReactiveAdapterResult } from "@cfcs/vue3";
+
+// The result value of useReactive can be exposed as a type.
+export type ReactiveComponentResult = ReactiveAdapterResult<typeof REACTIVE_ADAPTER>;
+
+// Reactive Component can be created through useReactive.
+export function useReactiveComponent(props) {
+  return useReactive(REACTIVE_ADAPTER, () => props);
+}
+```
+
+### App
+
+```html
+<script>
+export default {
+  setup() {
+    const {
+      // state
+      value1,
+      // events
+      onEvent1,
+      // methods
+      method1,
+    } = useReactiveComponent({});
+
+    // use state
+    console.log(value1.value);
+
+    // use event
+    onEvent1(e => {
+      console.log(e);
+    };
+
+    // use method
+    method1();
+  },
+};
+</script>
+```
+
+
+
+## 📝 Feedback
+Please file an [Issue](https://github.com/naver/cfcs/issues).
+
+## 📜 License
+`cfcs` is released under the [MIT license](https://github.com/naver/cfcs/blob/main/LICENSE).
+
+```
+CFCs
+Copyright (c) 2023-present NAVER Corp.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.  IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+```

declaration/reactive/types.d.ts

@@ -1,2 +0,2 @@
-import { ReactiveAdapter, ReactiveEventParameters } from "@cfcs/core";
+import { ReactiveAdapterParam, ReactiveEventParameters, ReactiveState, ReactiveSubscribe } from "@cfcs/core";
 import { Ref } from "vue";
@@ -6,3 +6,3 @@ export declare type ReactiveEvents<Events extends Record<string, any>> = {
 };
-export declare type ReactiveResult<Instance, State extends Record<string, any> = {}, Methods extends keyof Partial<Instance> = any, Events extends Record<string, any> = {}> = {
+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> = {}> = {
     [key in keyof State]: Ref<State[key]>;
@@ -12,8 +12,8 @@ } & {
 } & ReactiveEvents<Events>;
-export declare type ReactiveLegacyResult<Instance, State extends Record<string, any> = {}, Methods extends keyof Partial<Instance> = any, Events extends Record<string, any> = {}> = State & {
+export declare type ReactiveLegacyResult<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> ? VueReactiveResult<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> ? VueReactiveResult<Instance, State, Methods, Events> : {};
 export declare type VueReactiveEvents<Events extends Record<string, any>> = ReactiveEvents<Events>;
-export declare type VueReactiveResult<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 VueReactiveAdapterResult<Adapter extends ReactiveAdapter<any, any, any, any, any>> = ReactiveAdapterResult<Adapter>;
+export declare type VueReactiveResult<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 VueReactiveAdapterResult<Adapter extends ReactiveAdapterParam<any, any, any, any, any>> = ReactiveAdapterResult<Adapter>;

declaration/reactive/useReactive.d.ts

@@ -1,4 +0,4 @@
-import { ReactiveAdapterParam, ReactiveSubscribe } from "@cfcs/core";
+import { ReactiveAdapterParam, ReactiveSubscribe, ReactiveState } from "@cfcs/core";
 import { ReactiveLegacyResult, 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 useLegacyReactive<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>): ReactiveLegacyResult<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>;
+export declare function useLegacyReactive<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): ReactiveLegacyResult<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
 */
@@ -43,2 +43,15 @@ 'use strict';
 
+/**
+ * @description In Vue 3, you can create reactive components through adapters.
+ * @category Reactive
+ * @example
+ * ```ts
+ * import { useReactive } from "@cfcs/vue3";
+ *
+ * export function useReactiveComponent() {
+ *   return useReactive(REACTIVE_ADAPTER);
+ * }
+ * ```
+ */
+
 function useReactive(reactiveAdapter, props) {
@@ -81,4 +94,9 @@ var adaptResult = core.adaptReactive(reactiveAdapter, props);
 }
-function useLegacyReactive(reactiveAdapter) {
-  var adaptResult = core.adaptReactive(reactiveAdapter);
+/**
+ * @category Reactive
+ * @hidden
+ */
+
+function useLegacyReactive(reactiveAdapter, props) {
+  var adaptResult = core.adaptReactive(reactiveAdapter, props);
   var reactiveState = adaptResult.state();
@@ -85,0 +103,0 @@ var names = Object.keys(reactiveState);

dist/cfcs.cjs.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"cfcs.cjs.js","sources":["../src/reactive/useReactive.ts"],"sourcesContent":["import {\n  ReactiveAdapterParam,\n  ReactiveSubscribe,\n  camelize,\n  adaptReactive,\n} from \"@cfcs/core\";\nimport { onMounted, onUnmounted, reactive, Ref, ref } from \"vue\";\nimport { ReactiveLegacyResult, ReactiveResult } from \"./types\";\n\nexport function useReactive<\n  Instance extends ReactiveSubscribe<Record<string, any>>,\n  State extends Record<string, any> = {},\n  Methods extends keyof Partial<Instance> = any,\n  Props = any,\n  Events extends Record<string, any> = {},\n>(\n  reactiveAdapter: ReactiveAdapterParam<Instance, State, Methods, Props, Events>,\n  props?: () => Props,\n): ReactiveResult<Instance, State, Methods, Events> {\n  const adaptResult = adaptReactive(reactiveAdapter, props);\n  const reactiveState = adaptResult.state();\n  const names = Object.keys(reactiveState);\n  const refs: Record<string, Ref<any>> = {};\n  for (const name in reactiveState) {\n    refs[name] = ref(reactiveState[name]);\n  }\n  const methods = adaptResult.methods();\n\n  onMounted(() => {\n    adaptResult.mounted();\n\n    const inst = adaptResult.instance();\n\n    names.forEach(name => {\n      inst.subscribe(name as any, (value: any) => {\n        refs[name].value = value;\n      });\n    });\n\n    adaptResult.init();\n  });\n\n  onUnmounted(() => {\n    adaptResult.destroy();\n  });\n\n  const reactiveEvents = adaptResult.events();\n  const events = reactiveEvents.reduce((eventResult, name) => {\n    eventResult[camelize(`on ${name as any}`)] = (callback: (...args: any[]) => void) => {\n      adaptResult.on(name as any, callback as any);\n\n      onUnmounted(() => {\n        adaptResult.off(name as any, callback as any);\n      });\n    };\n\n    return eventResult;\n  }, {} as Record<string, any>);\n\n  return {\n    ...refs,\n    ...methods,\n    ...events,\n  } as any;\n}\n\nexport function useLegacyReactive<\n  Instance extends ReactiveSubscribe<Record<string, any>>,\n  State extends Record<string, any> = {},\n  Methods extends keyof Partial<Instance> = any,\n  Props = any,\n  Events extends Record<string, any> = {},\n>(\n  reactiveAdapter: ReactiveAdapterParam<Instance, State, Methods, Props, Events>,\n): ReactiveLegacyResult<Instance, State, Methods, Events> {\n  const adaptResult = adaptReactive(reactiveAdapter);\n  const reactiveState = adaptResult.state();\n  const names = Object.keys(reactiveState);\n  let result!: Record<string, any>;\n\n  const methods = adaptResult.methods();\n\n  onMounted(() => {\n    adaptResult.mounted();\n\n    const inst = adaptResult.instance();\n\n    names.forEach(name => {\n      inst.subscribe(name as any, (value: any) => {\n        result[name] = value;\n      });\n    });\n\n    adaptResult.init();\n  });\n\n  onUnmounted(() => {\n    adaptResult.destroy();\n  });\n\n  const reactiveEvents = adaptResult.events();\n  const events = reactiveEvents.reduce((eventResult, name) => {\n    eventResult[camelize(`on ${name as any}`)] = (callback: (...args: any[]) => void) => {\n      adaptResult.on(name as any, callback as any);\n\n      onUnmounted(() => {\n        adaptResult.off(name as any, callback as any);\n      });\n    };\n\n    return eventResult;\n  }, {} as Record<string, any>);\n\n  result = reactive({\n    ...reactiveState,\n    ...methods,\n    ...events,\n  });\n\n\n  return result as any;\n}\n"],"names":["useReactive","reactiveAdapter","props","adaptResult","adaptReactive","reactiveState","state","names","Object","keys","refs","name","ref","methods","onMounted","mounted","inst","instance","forEach","subscribe","value","init","onUnmounted","destroy","reactiveEvents","events","reduce","eventResult","camelize","concat","callback","on","off","__assign","useLegacyReactive","result","reactive"],"mappings":"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"}
+{"version":3,"file":"cfcs.cjs.js","sources":["../src/reactive/useReactive.ts"],"sourcesContent":["import {\n  ReactiveAdapterParam,\n  ReactiveSubscribe,\n  camelize,\n  adaptReactive,\n  ReactiveState,\n} from \"@cfcs/core\";\nimport { onMounted, onUnmounted, reactive, Ref, ref } from \"vue\";\nimport { ReactiveLegacyResult, ReactiveResult } from \"./types\";\n\n\n/**\n * @description In Vue 3, you can create reactive components through adapters.\n * @category Reactive\n * @example\n * ```ts\n * import { useReactive } from \"@cfcs/vue3\";\n *\n * export function useReactiveComponent() {\n *   return useReactive(REACTIVE_ADAPTER);\n * }\n * ```\n */\nexport function useReactive<\n  Instance extends ReactiveSubscribe<Record<string, any>>,\n  State extends Record<string, any> = ReactiveState<Instance>,\n  Methods extends keyof Partial<Instance> = any,\n  Props = any,\n  Events extends Record<string, any> = {},\n>(\n  reactiveAdapter: ReactiveAdapterParam<Instance, State, Methods, Props, Events>,\n  props?: () => Props,\n): ReactiveResult<Instance, State, Methods, Events> {\n  const adaptResult = adaptReactive(reactiveAdapter, props);\n  const reactiveState = adaptResult.state();\n  const names = Object.keys(reactiveState);\n  const refs: Record<string, Ref<any>> = {};\n  for (const name in reactiveState) {\n    refs[name] = ref(reactiveState[name]);\n  }\n  const methods = adaptResult.methods();\n\n  onMounted(() => {\n    adaptResult.mounted();\n\n    const inst = adaptResult.instance();\n\n    names.forEach(name => {\n      inst.subscribe(name as any, (value: any) => {\n        refs[name].value = value;\n      });\n    });\n\n    adaptResult.init();\n  });\n\n  onUnmounted(() => {\n    adaptResult.destroy();\n  });\n\n  const reactiveEvents = adaptResult.events();\n  const events = reactiveEvents.reduce((eventResult, name) => {\n    eventResult[camelize(`on ${name as any}`)] = (callback: (...args: any[]) => void) => {\n      adaptResult.on(name as any, callback as any);\n\n      onUnmounted(() => {\n        adaptResult.off(name as any, callback as any);\n      });\n    };\n\n    return eventResult;\n  }, {} as Record<string, any>);\n\n  return {\n    ...refs,\n    ...methods,\n    ...events,\n  } as any;\n}\n\n\n/**\n * @category Reactive\n * @hidden\n */\nexport function useLegacyReactive<\n  Instance extends ReactiveSubscribe<Record<string, any>>,\n  State extends Record<string, any> = ReactiveState<Instance>,\n  Methods extends keyof Partial<Instance> = any,\n  Props = any,\n  Events extends Record<string, any> = {},\n>(\n  reactiveAdapter: ReactiveAdapterParam<Instance, State, Methods, Props, Events>,\n  props?: () => Props,\n): ReactiveLegacyResult<Instance, State, Methods, Events> {\n  const adaptResult = adaptReactive(reactiveAdapter, props);\n  const reactiveState = adaptResult.state();\n  const names = Object.keys(reactiveState);\n  let result!: Record<string, any>;\n\n  const methods = adaptResult.methods();\n\n  onMounted(() => {\n    adaptResult.mounted();\n\n    const inst = adaptResult.instance();\n\n    names.forEach(name => {\n      inst.subscribe(name as any, (value: any) => {\n        result[name] = value;\n      });\n    });\n\n    adaptResult.init();\n  });\n\n  onUnmounted(() => {\n    adaptResult.destroy();\n  });\n\n  const reactiveEvents = adaptResult.events();\n  const events = reactiveEvents.reduce((eventResult, name) => {\n    eventResult[camelize(`on ${name as any}`)] = (callback: (...args: any[]) => void) => {\n      adaptResult.on(name as any, callback as any);\n\n      onUnmounted(() => {\n        adaptResult.off(name as any, callback as any);\n      });\n    };\n\n    return eventResult;\n  }, {} as Record<string, any>);\n\n  result = reactive({\n    ...reactiveState,\n    ...methods,\n    ...events,\n  });\n\n\n  return result as any;\n}\n"],"names":["useReactive","reactiveAdapter","props","adaptResult","adaptReactive","reactiveState","state","names","Object","keys","refs","name","ref","methods","onMounted","mounted","inst","instance","forEach","subscribe","value","init","onUnmounted","destroy","reactiveEvents","events","reduce","eventResult","camelize","concat","callback","on","off","__assign","useLegacyReactive","result","reactive"],"mappings":"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"}

dist/cfcs.esm.js

@@ -7,3 +7,3 @@ /*
 repository: https://github.com/naver/cfcs
-version: 0.0.22
+version: 0.0.23
 */
@@ -41,2 +41,15 @@ import { adaptReactive, camelize } from '@cfcs/core';
 
+/**
+ * @description In Vue 3, you can create reactive components through adapters.
+ * @category Reactive
+ * @example
+ * ```ts
+ * import { useReactive } from "@cfcs/vue3";
+ *
+ * export function useReactiveComponent() {
+ *   return useReactive(REACTIVE_ADAPTER);
+ * }
+ * ```
+ */
+
 function useReactive(reactiveAdapter, props) {
@@ -79,4 +92,9 @@ var adaptResult = adaptReactive(reactiveAdapter, props);
 }
-function useLegacyReactive(reactiveAdapter) {
-  var adaptResult = adaptReactive(reactiveAdapter);
+/**
+ * @category Reactive
+ * @hidden
+ */
+
+function useLegacyReactive(reactiveAdapter, props) {
+  var adaptResult = adaptReactive(reactiveAdapter, props);
   var reactiveState = adaptResult.state();
@@ -83,0 +101,0 @@ var names = Object.keys(reactiveState);

dist/cfcs.esm.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"cfcs.esm.js","sources":["../src/reactive/useReactive.ts"],"sourcesContent":["import {\n  ReactiveAdapterParam,\n  ReactiveSubscribe,\n  camelize,\n  adaptReactive,\n} from \"@cfcs/core\";\nimport { onMounted, onUnmounted, reactive, Ref, ref } from \"vue\";\nimport { ReactiveLegacyResult, ReactiveResult } from \"./types\";\n\nexport function useReactive<\n  Instance extends ReactiveSubscribe<Record<string, any>>,\n  State extends Record<string, any> = {},\n  Methods extends keyof Partial<Instance> = any,\n  Props = any,\n  Events extends Record<string, any> = {},\n>(\n  reactiveAdapter: ReactiveAdapterParam<Instance, State, Methods, Props, Events>,\n  props?: () => Props,\n): ReactiveResult<Instance, State, Methods, Events> {\n  const adaptResult = adaptReactive(reactiveAdapter, props);\n  const reactiveState = adaptResult.state();\n  const names = Object.keys(reactiveState);\n  const refs: Record<string, Ref<any>> = {};\n  for (const name in reactiveState) {\n    refs[name] = ref(reactiveState[name]);\n  }\n  const methods = adaptResult.methods();\n\n  onMounted(() => {\n    adaptResult.mounted();\n\n    const inst = adaptResult.instance();\n\n    names.forEach(name => {\n      inst.subscribe(name as any, (value: any) => {\n        refs[name].value = value;\n      });\n    });\n\n    adaptResult.init();\n  });\n\n  onUnmounted(() => {\n    adaptResult.destroy();\n  });\n\n  const reactiveEvents = adaptResult.events();\n  const events = reactiveEvents.reduce((eventResult, name) => {\n    eventResult[camelize(`on ${name as any}`)] = (callback: (...args: any[]) => void) => {\n      adaptResult.on(name as any, callback as any);\n\n      onUnmounted(() => {\n        adaptResult.off(name as any, callback as any);\n      });\n    };\n\n    return eventResult;\n  }, {} as Record<string, any>);\n\n  return {\n    ...refs,\n    ...methods,\n    ...events,\n  } as any;\n}\n\nexport function useLegacyReactive<\n  Instance extends ReactiveSubscribe<Record<string, any>>,\n  State extends Record<string, any> = {},\n  Methods extends keyof Partial<Instance> = any,\n  Props = any,\n  Events extends Record<string, any> = {},\n>(\n  reactiveAdapter: ReactiveAdapterParam<Instance, State, Methods, Props, Events>,\n): ReactiveLegacyResult<Instance, State, Methods, Events> {\n  const adaptResult = adaptReactive(reactiveAdapter);\n  const reactiveState = adaptResult.state();\n  const names = Object.keys(reactiveState);\n  let result!: Record<string, any>;\n\n  const methods = adaptResult.methods();\n\n  onMounted(() => {\n    adaptResult.mounted();\n\n    const inst = adaptResult.instance();\n\n    names.forEach(name => {\n      inst.subscribe(name as any, (value: any) => {\n        result[name] = value;\n      });\n    });\n\n    adaptResult.init();\n  });\n\n  onUnmounted(() => {\n    adaptResult.destroy();\n  });\n\n  const reactiveEvents = adaptResult.events();\n  const events = reactiveEvents.reduce((eventResult, name) => {\n    eventResult[camelize(`on ${name as any}`)] = (callback: (...args: any[]) => void) => {\n      adaptResult.on(name as any, callback as any);\n\n      onUnmounted(() => {\n        adaptResult.off(name as any, callback as any);\n      });\n    };\n\n    return eventResult;\n  }, {} as Record<string, any>);\n\n  result = reactive({\n    ...reactiveState,\n    ...methods,\n    ...events,\n  });\n\n\n  return result as any;\n}\n"],"names":["useReactive","reactiveAdapter","props","adaptResult","adaptReactive","reactiveState","state","names","Object","keys","refs","name","ref","methods","onMounted","mounted","inst","instance","forEach","subscribe","value","init","onUnmounted","destroy","reactiveEvents","events","reduce","eventResult","camelize","concat","callback","on","off","__assign","useLegacyReactive","result","reactive"],"mappings":"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"}
+{"version":3,"file":"cfcs.esm.js","sources":["../src/reactive/useReactive.ts"],"sourcesContent":["import {\n  ReactiveAdapterParam,\n  ReactiveSubscribe,\n  camelize,\n  adaptReactive,\n  ReactiveState,\n} from \"@cfcs/core\";\nimport { onMounted, onUnmounted, reactive, Ref, ref } from \"vue\";\nimport { ReactiveLegacyResult, ReactiveResult } from \"./types\";\n\n\n/**\n * @description In Vue 3, you can create reactive components through adapters.\n * @category Reactive\n * @example\n * ```ts\n * import { useReactive } from \"@cfcs/vue3\";\n *\n * export function useReactiveComponent() {\n *   return useReactive(REACTIVE_ADAPTER);\n * }\n * ```\n */\nexport function useReactive<\n  Instance extends ReactiveSubscribe<Record<string, any>>,\n  State extends Record<string, any> = ReactiveState<Instance>,\n  Methods extends keyof Partial<Instance> = any,\n  Props = any,\n  Events extends Record<string, any> = {},\n>(\n  reactiveAdapter: ReactiveAdapterParam<Instance, State, Methods, Props, Events>,\n  props?: () => Props,\n): ReactiveResult<Instance, State, Methods, Events> {\n  const adaptResult = adaptReactive(reactiveAdapter, props);\n  const reactiveState = adaptResult.state();\n  const names = Object.keys(reactiveState);\n  const refs: Record<string, Ref<any>> = {};\n  for (const name in reactiveState) {\n    refs[name] = ref(reactiveState[name]);\n  }\n  const methods = adaptResult.methods();\n\n  onMounted(() => {\n    adaptResult.mounted();\n\n    const inst = adaptResult.instance();\n\n    names.forEach(name => {\n      inst.subscribe(name as any, (value: any) => {\n        refs[name].value = value;\n      });\n    });\n\n    adaptResult.init();\n  });\n\n  onUnmounted(() => {\n    adaptResult.destroy();\n  });\n\n  const reactiveEvents = adaptResult.events();\n  const events = reactiveEvents.reduce((eventResult, name) => {\n    eventResult[camelize(`on ${name as any}`)] = (callback: (...args: any[]) => void) => {\n      adaptResult.on(name as any, callback as any);\n\n      onUnmounted(() => {\n        adaptResult.off(name as any, callback as any);\n      });\n    };\n\n    return eventResult;\n  }, {} as Record<string, any>);\n\n  return {\n    ...refs,\n    ...methods,\n    ...events,\n  } as any;\n}\n\n\n/**\n * @category Reactive\n * @hidden\n */\nexport function useLegacyReactive<\n  Instance extends ReactiveSubscribe<Record<string, any>>,\n  State extends Record<string, any> = ReactiveState<Instance>,\n  Methods extends keyof Partial<Instance> = any,\n  Props = any,\n  Events extends Record<string, any> = {},\n>(\n  reactiveAdapter: ReactiveAdapterParam<Instance, State, Methods, Props, Events>,\n  props?: () => Props,\n): ReactiveLegacyResult<Instance, State, Methods, Events> {\n  const adaptResult = adaptReactive(reactiveAdapter, props);\n  const reactiveState = adaptResult.state();\n  const names = Object.keys(reactiveState);\n  let result!: Record<string, any>;\n\n  const methods = adaptResult.methods();\n\n  onMounted(() => {\n    adaptResult.mounted();\n\n    const inst = adaptResult.instance();\n\n    names.forEach(name => {\n      inst.subscribe(name as any, (value: any) => {\n        result[name] = value;\n      });\n    });\n\n    adaptResult.init();\n  });\n\n  onUnmounted(() => {\n    adaptResult.destroy();\n  });\n\n  const reactiveEvents = adaptResult.events();\n  const events = reactiveEvents.reduce((eventResult, name) => {\n    eventResult[camelize(`on ${name as any}`)] = (callback: (...args: any[]) => void) => {\n      adaptResult.on(name as any, callback as any);\n\n      onUnmounted(() => {\n        adaptResult.off(name as any, callback as any);\n      });\n    };\n\n    return eventResult;\n  }, {} as Record<string, any>);\n\n  result = reactive({\n    ...reactiveState,\n    ...methods,\n    ...events,\n  });\n\n\n  return result as any;\n}\n"],"names":["useReactive","reactiveAdapter","props","adaptResult","adaptReactive","reactiveState","state","names","Object","keys","refs","name","ref","methods","onMounted","mounted","inst","instance","forEach","subscribe","value","init","onUnmounted","destroy","reactiveEvents","events","reduce","eventResult","camelize","concat","callback","on","off","__assign","useLegacyReactive","result","reactive"],"mappings":"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"}

package.json

 {
   "name": "@cfcs/vue3",
-  "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 Vue 3",
   "main": "dist/cfcs.cjs.js",
@@ -24,2 +24,5 @@ "module": "dist/cfcs.esm.js",
   "keywords": [
+    "cfcs",
+    "cfc",
+    "vue3",
     "vue",
@@ -39,3 +42,3 @@ "vue-hook",
   "dependencies": {
-    "@cfcs/core": "~0.0.22"
+    "@cfcs/core": "~0.0.23"
   },
@@ -42,0 +45,0 @@ "devDependencies": {

src/reactive/types.ts

@@ -1,5 +0,8 @@
-import { ReactiveAdapter, ReactiveEventParameters } from "@cfcs/core";
+import { ReactiveAdapterParam, ReactiveEventParameters, ReactiveState, ReactiveSubscribe } from "@cfcs/core";
 import { Ref } from "vue";
 
 
+/**
+ * @category Reactive
+ */
 export type ReactiveEvents<
@@ -11,5 +14,9 @@ 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,
@@ -24,5 +31,10 @@ Events extends Record<string, any> = {},
 
+
+/**
+ * @category Reactive
+ * @hidden
+ */
 export type ReactiveLegacyResult<
-  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,
@@ -34,12 +46,36 @@ 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>
   ? VueReactiveResult<Instance, State, Methods, Events> : {};
 
 // Names using framework prefix
+
+/**
+ * @category Reactive
+ * @hidden
+ */
 export type VueReactiveEvents<Events extends Record<string, any>> = ReactiveEvents<Events>;
-export type VueReactiveResult<Instance,
-  State extends Record<string, any> = {},
+
+
+/**
+ * @category Reactive
+ * @hidden
+ */
+export type VueReactiveResult<
+  Instance extends ReactiveSubscribe<Record<string, any>>,
+  State extends Record<string, any> = ReactiveState<Instance>,
   Methods extends keyof Partial<Instance> = any,
@@ -53,4 +89,9 @@ Events extends Record<string, any> = {},
 >;
+
+/**
+ * @category Reactive
+ * @hidden
+ */
 export type VueReactiveAdapterResult<
-  Adapter extends ReactiveAdapter<any, any, any, any, any>
+  Adapter extends ReactiveAdapterParam<any, any, any, any, any>
 > = ReactiveAdapterResult<Adapter>;

src/reactive/useReactive.ts

@@ -6,2 +6,3 @@ import {
   adaptReactive,
+  ReactiveState,
 } from "@cfcs/core";
@@ -11,5 +12,18 @@ import { onMounted, onUnmounted, reactive, Ref, ref } from "vue";
 
+
+/**
+ * @description In Vue 3, you can create reactive components through adapters.
+ * @category Reactive
+ * @example
+ * ```ts
+ * import { useReactive } from "@cfcs/vue3";
+ *
+ * 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,
@@ -69,5 +83,10 @@ Props = any,
 
+
+/**
+ * @category Reactive
+ * @hidden
+ */
 export function useLegacyReactive<
   Instance extends ReactiveSubscribe<Record<string, any>>,
-  State extends Record<string, any> = {},
+  State extends Record<string, any> = ReactiveState<Instance>,
   Methods extends keyof Partial<Instance> = any,
@@ -78,4 +97,5 @@ Props = any,
   reactiveAdapter: ReactiveAdapterParam<Instance, State, Methods, Props, Events>,
+  props?: () => Props,
 ): ReactiveLegacyResult<Instance, State, Methods, Events> {
-  const adaptResult = adaptReactive(reactiveAdapter);
+  const adaptResult = adaptReactive(reactiveAdapter, props);
   const reactiveState = adaptResult.state();
@@ -82,0 +102,0 @@ const names = Object.keys(reactiveState);

Fixed alerts

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

37704

22.79%

Number of package files

17

6.25%

Lines of code

522

19.45%

Number of medium quality alerts

0

-100%

Number of lines in readme file

138

Infinity%

Dependency changes

• Updated

  @cfcs/core@~0.0.23