ivue 1.2.0 → 1.2.2

package/docs/docs/components/usage/CounterComposables.vue

@@ -7,8 +7,8 @@ class Counter {
   increment() {
     this.count++;
   }
-  mouse = iuse(useMouse());
-  pointer = iuse(usePointer());
+  mouse = iuse(useMouse);
+  pointer = iuse(usePointer);
 }
 
 const counter = ivue(Counter);

package/docs/docs/components/usage/CounterComposablesDestructuring.vue

@@ -34,7 +34,7 @@ class Counter {
       y: this.y,
       sum: this.sum,
       total: this.total
-    } = iuse(useCustomMouse(5)));
+    } = iuse(useCustomMouse, 5));
   }
 }
 

package/docs/docs/components/usage/CounterComposablesIvue.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { CustomMouse } from './classes/CustomMouse';
+
+import { ivue, iref } from 'ivue';
+
+class Counter {
+  count = iref(0);
+
+  increment() {
+    this.count++;
+  }
+
+  mouse = ivue(CustomMouse, 5)
+}
+
+const counter = ivue(Counter);
+</script>
+<template>
+  <a href="javascript:void(0)" @click="() => counter.increment()">Increment</a>
+  Count: {{ counter.count }} <br />
+  Mouse X: {{ counter.mouse.x }}, Y: {{ counter.mouse.y }}
+  <br />
+  Total (computed): {{ counter.mouse.total }}
+  <br />
+  <button class="button" @click="() => counter.mouse.sum()">Click This Big Sum Button To Total X + Y</button>
+</template>

package/docs/docs/components/usage/CounterComposablesIvueDestructuring.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { CustomMouse } from './classes/CustomMouse';
 
-import { ivue, iref, iuse } from 'ivue';
+import { ivue, iref } from '../../../../src/ivue';
 
 class Counter {
   count = iref(0);
@@ -10,11 +10,10 @@ class Counter {
     this.count++;
   }
 
-
   /**
    * 'x', 'y', 'total' are Refs that will be unwrapped to their bare raw types and destructured into the class.
-   * Even though unwrapped (de-Refed), they will maintain their behavior as Refs and thus will maintain reactivity 
-   * and at the same time get destructured into this class root level scope because 
+   * Even though unwrapped (de-Refed), they will maintain their behavior as Refs and thus will maintain reactivity
+   * and at the same time get destructured into this class root level scope because
    * Vue 3's `reactive()` Proxy will be able to resolve those Refs internally.
    */
   x: CustomMouse['x']; // Unwrapped Ref<number> becomes -> number
@@ -28,7 +27,7 @@ class Counter {
       y: this.y,
       sum: this.sum,
       total: this.total,
-    } = iuse(CustomMouse, 5));
+    } = ivue(CustomMouse, 5).toRefs(true));
   }
 }
 
@@ -41,5 +40,7 @@ const counter = ivue(Counter);
   <br />
   Total (computed): {{ counter.total }}
   <br />
-  <button class="button" @click="() => counter.sum()">Click This Big Sum Button To Total X + Y</button>
+  <button class="button" @click="() => counter.sum()">
+    Click This Big Sum Button To Total X + Y
+  </button>
 </template>

package/docs/docs/components/usage/classes/CustomMouse.ts

@@ -1,5 +1,5 @@
 import { useMouse } from '@vueuse/core';
-import { iref, iuse, type UseComposable } from '../../../../../src/ivue';
+import { iref, iuse, type UseComposable } from 'ivue';
 
 type UseMouse = UseComposable<typeof useMouse>;
 
@@ -10,7 +10,7 @@ export class CustomMouse {
   _sum = iref(0);
 
   constructor(public requiredProp: number) {
-    ({ x: this.x, y: this.y } = iuse(useMouse()));
+    ({ x: this.x, y: this.y } = iuse(useMouse));
   }
 
   sum() {

package/docs/docs/pages/usage.md

@@ -11,6 +11,7 @@ import CounterInternalRefs from '../components/usage/CounterInternalRefs.vue'
 import CounterComposables from '../components/usage/CounterComposables.vue'
 import CounterComposablesDestructuring from '../components/usage/CounterComposablesDestructuring.vue'
 import CounterComposablesIvueDestructuring from '../components/usage/CounterComposablesIvueDestructuring.vue'
+import CounterComposablesIvue from '../components/usage/CounterComposablesIvue.vue'
 import CounterInsideComposables from '../components/usage/CounterInsideComposables.vue'
 import CounterComputeds from '../components/usage/CounterComputeds.vue'
 import CounterComputedsDisabled from '../components/usage/CounterComputedsDisabled.vue'
@@ -69,7 +70,7 @@ Classic Counter example built with `ivue`
 
 See the highlighted sections related to props.
 ::: code-group
-<<< @/components/usage/CounterWithProps.vue{5-8,11-12,24 vue:line-numbers}
+<<< @/components/usage/CounterWithProps.vue{vue:line-numbers}
 :::
 
 :::details For this example we initialize the component like this:
@@ -91,7 +92,7 @@ See the highlighted sections related to props.
 See the highlighted sections related to using emits.
 
 ::: code-group
-<<< @/components/usage/CounterWithPropsAndEmits.vue{9-11,14,17,23,31 vue:line-numbers}
+<<< @/components/usage/CounterWithPropsAndEmits.vue{vue:line-numbers}
 :::
 
 :::details For this example we initialize the component like this:
@@ -118,7 +119,7 @@ function onIncrement(value: number) {
 ### Refs defined externally in the component outside of the class.
 
 ::: code-group
-<<< @/components/usage/CounterExternalRefs.vue{5,8,12,16,24 vue:line-numbers}
+<<< @/components/usage/CounterExternalRefs.vue{vue:line-numbers}
 :::
 :::details For this example we initialize the component like this:
 
@@ -137,7 +138,7 @@ function onIncrement(value: number) {
 ### Refs defined internally inside of the class.
 
 ::: code-group
-<<< @/components/usage/CounterInternalRefs.vue{7,15,25 vue:line-numbers}
+<<< @/components/usage/CounterInternalRefs.vue{vue:line-numbers}
 :::
 
 :::details For this example we initialize the component like this:
@@ -160,7 +161,7 @@ function onIncrement(value: number) {
 See the highlighted sections related to `defineExpose`.
 
 ::: code-group
-<<< @/components/usage/CounterDefineExpose.vue{8 vue:line-numbers}
+<<< @/components/usage/CounterDefineExpose.vue{vue:line-numbers}
 <<< @/components/usage/CounterDefineExposeClass.ts{ts:line-numbers}
 :::
 
@@ -200,7 +201,7 @@ function decrement() {
 ### Pick allowed interface properties for `defineExpose()`
 
 ::: code-group
-<<< @/components/usage/CounterDefineExposeAdvanced.vue{9,23 vue:line-numbers}
+<<< @/components/usage/CounterDefineExposeAdvanced.vue{vue:line-numbers}
 :::
 
 ## Using Composables
@@ -209,7 +210,7 @@ function decrement() {
 
 See the highlighted sections related to composable usage.
 ::: code-group
-<<< @/components/usage/CounterComposables.vue{4,11,19 vue:line-numbers}
+<<< @/components/usage/CounterComposables.vue{vue:line-numbers}
 :::
 
 :::details For this example we initialize the component like this:
@@ -231,7 +232,7 @@ See the highlighted sections related to composable usage.
 See the highlighted sections related to destructuring composable usage.
 
 ::: code-group
-<<< @/components/usage/CounterComposablesDestructuring.vue{4,10,20-21,23-24,27-32 vue:line-numbers}
+<<< @/components/usage/CounterComposablesDestructuring.vue{vue:line-numbers}
 <<< @/components/usage/functions/useCustomMouse.ts{ts:line-numbers} [functions/useCustomMouse.ts]
 :::
 
@@ -249,12 +250,36 @@ See the highlighted sections related to destructuring composable usage.
 
 <CounterComposablesDestructuring />
 
+
+### Using `ivue` Composables Directly
+
+Using `ivue` based composables assigned to a class property:
+
+::: code-group
+<<< @/components/usage/CounterComposablesIvue.vue{vue:line-numbers}
+<<< @/components/usage/classes/CustomMouse.ts{ts:line-numbers} [classes/CustomMouse.ts]
+:::
+
+:::details For this example we initialize the component like this:
+
+```vue
+<template>
+  <CounterComposablesIvue />
+</template>
+```
+
+:::
+
+<div style="font-size: 18px; font-weight: 500;">Result</div>
+
+<CounterComposablesIvue />
+
 ### Using `ivue` Composables With Destructuring
 
-See the highlighted sections related to using `ivue` based composables.
+See the sections related to using `ivue` based composables initialized through class destructuring assignment.
 
 ::: code-group
-<<< @/components/usage/CounterComposablesIvueDestructuring.vue{14 vue:line-numbers}
+<<< @/components/usage/CounterComposablesIvueDestructuring.vue{vue:line-numbers}
 <<< @/components/usage/classes/CustomMouse.ts{ts:line-numbers} [classes/CustomMouse.ts]
 :::
 
@@ -278,7 +303,7 @@ See the highlighted sections related to using `ivue` based composables.
 See the highlighted sections related to using `ivue` inside a composable.
 
 ::: code-group
-<<< @/components/usage/CounterInsideComposables.vue{14 vue:line-numbers}
+<<< @/components/usage/CounterInsideComposables.vue{vue:line-numbers}
 :::
 
 :::details For this example we initialize the component like this:
@@ -301,7 +326,7 @@ See the highlighted sections related to using `ivue` inside a composable.
 See the highlighted sections related to getters.
 
 ::: code-group
-<<< @/components/usage/CounterComputeds.vue{10,13,23,24 vue:line-numbers}
+<<< @/components/usage/CounterComputeds.vue{vue:line-numbers}
 :::
 
 :::details For this example we initialize the component like this:
@@ -319,7 +344,7 @@ See the highlighted sections related to getters.
 You can disable computed getters via `static ivue = { getter: false }`, see below:
 
 ::: code-group
-<<< @/components/usage/CounterComputedsDisabled.vue{10-12 vue:line-numbers}
+<<< @/components/usage/CounterComputedsDisabled.vue{vue:line-numbers}
 :::
 
 The result of this example is identical to the above.

package/docs/package.json

@@ -18,7 +18,7 @@
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-vue": "^9.14.1",
     "execa": "^8.0.0",
-    "ivue": "^1.1.21",
+    "ivue": "^1.2.1",
     "typescript": "^4.5.4",
     "vite-plugin-dynamic-import": "^1.5.0",
     "vite-tsconfig-paths": "^4.3.2",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ivue",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "Infinite Vue – Class Based Architecture for Vue 3",
   "type": "module",
   "exports": {

package/src/ivue.ts

@@ -18,11 +18,20 @@ export interface ExtendWithToRefs<T extends AnyClass> {
 }
 
 /**
- * .toRefs() method type definition converts reactive class properties to composable .value properties.
- */
-export type IVueToRefsFn<T extends AnyClass> = (
-  props?: (keyof InstanceType<T>)[]
-) => IVueRefs<InstanceType<T>>;
+ * Type definition for `.toRefs()` method converts reactive class properties to composable .value properties.
+ * But if unwrap = true is specified, the refs will be unwrapped refs available to be merged with the the root class properties.
+ */
+export interface IVueToRefsFn<T extends AnyClass> {
+  <P extends keyof InstanceType<T>, B extends boolean>(
+    props: P[],
+    unwrap?: B
+  ): B extends true
+    ? Pick<InstanceType<T>, P>
+    : Pick<IVueRefs<InstanceType<T>>, P>;
+  (props: true): InstanceType<T>;
+  (props: false): IVueRefs<InstanceType<T>>;
+  (): IVueRefs<InstanceType<T>>;
+}
 
 /**
  * Converts a class properties to a composable .value Refs using ToRef vue type,
@@ -57,8 +66,9 @@ export type UnwrapComposableReturn<T> = T extends Ref | DemiRef
 /**
  * Fully unwraps to bare value types any Vue 3 composable return definition type.
  */
-export type UseComposable<T extends AnyFn> =
-  UnwrapComposableReturn<ReturnType<T>>;
+export type UseComposable<T extends AnyFn> = UnwrapComposableReturn<
+  ReturnType<T>
+>;
 
 /**
  * Extracts object defined emit types by converting them to a plain interface
@@ -139,10 +149,7 @@ export type IFnParameter<
 /**
  * Get function arguments Parmeters<F> parameter by key K
  */
-export type FnParameter<
-  F extends AnyFn,
-  K extends number
-> = Parameters<F>[K];
+export type FnParameter<F extends AnyFn, K extends number> = Parameters<F>[K];
 
 /**
  * Convert Union Type to Intersection Type.
@@ -317,33 +324,50 @@ export function getAllClassProperties(obj: object): Set<string> {
 }
 
 /**
- * `iref()` is an alias for Vue ref() function but returns an unwrapped type without the .value
- * `iref()` does not alter the behavior of ref(), but simply transforms the type to an unwrapped raw value.
+ * `iref()` is an alias for Vue ref() function but returns an unwrap type without the .value
+ * `iref()` does not alter the behavior of ref(), but simply transforms the type to an unwrap raw value.
  * @param val T
  * @returns {UnwrapRef<T>}
  */
-export const iref = ref as <T = any>(value: T) => T;
+export const iref = ref as <T = any>(value?: T) => T;
 
 /**
- * Two modes of operation:
+ * Three modes of operation:
  * 1. `iuse(useComposable(arg, arg2, arg3, ...))` converts the return types of a Composable / Ref to pure raw type definition.
- * Returns for all properties of an object an unwrapped raw type definition,
+ * Returns for all properties of an object an unwrap raw type definition,
  * unwraps direct Refs & ComputedRefs as well down to their raw types.
  *
- * 2. `iuse(AnyClass, ...args)` If AnyClass is supplied and that class's arguments like so `iuse(AnyClass, ...args)`,
- * it returns an 'ivue(AnyClass, ...args).toRefs()` ivue object in Vee 3 Composable standard form for all properties but casts
- * their types as raw (non-Ref) types to fit with reactive() structure of the ivue class context.
- */
-export function iuse<T extends AnyClass | Object>(
-  val?: T,
-  ...args: InferredArgs<T>
-): T extends AnyClass ? InstanceType<T> : UnwrapComposableReturn<T> {
-  return isClass(val)
-    ? ivue(
-        val as T extends AnyClass ? T : any,
-        ...(args as InferredArgs<T>)
-      ).toRefs()
-    : (val as unknown as UnwrapComposableReturn<T>);
+ * 2. `iuse(useComposable, arg, arg2, arg3, ...)` for cleaner syntax for #1, it does exactly the same thing but
+ * here the TypeScript inference works for composable function arguments to assist you with intellisence,
+ * like they work for constructor arguments in the cause of `ivue()` core function,
+ * making the API cleaner to look at and make it compatible with how this function operates with classes, see #3.
+ *
+ * 3. `iuse(AnyClass, ...args)` If AnyClass is supplied and that class's arguments into `iuse(AnyClass, ...args)`,
+ * it returns an 'ivue(AnyClass, ...args).toRefs()` object for all properties but casts
+ * their types as raw (no-Ref) types to fit with reactive() structure of the ivue class context.
+ */
+export function iuse<T extends AnyClass | AnyFn | Object | any>(
+  classFunctionObject?: T,
+  ...args: T extends AnyClass
+    ? InferredArgs<T>
+    : T extends AnyFn
+    ? Parameters<T extends (...args: any[]) => any ? T : any>
+    : any
+): T extends AnyClass
+  ? InstanceType<T>
+  : T extends AnyFn
+  ? UseComposable<T>
+  : UnwrapComposableReturn<T> {
+  return typeof classFunctionObject === 'function'
+    ? isClass(classFunctionObject)
+      ? ivue(
+          classFunctionObject as T extends AnyClass ? T : any,
+          ...(args as InferredArgs<T extends AnyClass ? T : any>)
+        ).toRefs()
+      : (classFunctionObject as AnyFn)(
+          ...(args as Parameters<T extends AnyFn ? AnyFn : any>)
+        )
+    : (classFunctionObject as unknown as UnwrapComposableReturn<T>);
 }
 
 /**
@@ -360,13 +384,14 @@ function ivueToRefs<T extends AnyClass>(
   computeds: Computeds
 ): ExtendWithToRefs<T>['toRefs'] {
   return function (
-    props?: (keyof InstanceType<T>)[]
-  ): IVueRefs<InstanceType<T>> {
+    props?: (keyof InstanceType<T>)[] | boolean,
+    unwrap?: boolean
+  ): any /** @see {ReturnType<IVueToRefsFn<T>>} */ {
     /** Resulting refs store. */
     const result: Record<string | number | symbol, any> = {};
 
     /** Output specific props only, if props are specified. */
-    if (Array.isArray(props) && props.length) {
+    if (Array.isArray(props)) {
       for (let i = 0; i < props.length; i++) {
         const prop = props[i] as any;
         /** Handle descriptors. */
@@ -427,7 +452,7 @@ function ivueToRefs<T extends AnyClass>(
       allProps = null;
     }
 
-    return result as IVueRefs<InstanceType<T>>;
+    return result as any;
   };
 }