ivue 1.2.2 → 1.2.4

package/docs/docs/components/usage/CounterBasic.vue

@@ -11,6 +11,8 @@ class Counter {
 const counter = ivue(Counter);
 </script>
 <template>
-  <a href="javascript:void(0)" @click="() => counter.increment()">Increment</a>
+  <a href="javascript:void(0)" @click="() => counter.increment()">
+    Increment
+  </a>
   Count: {{ counter.count }}
 </template>

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

@@ -14,13 +14,15 @@ class Counter {
 const counter = ivue(Counter);
 </script>
 <template>
-  <a href="javascript:void(0)" @click="() => counter.increment()">Increment</a>
+  <a href="javascript:void(0)" @click="() => counter.increment()">
+    Increment
+  </a>
   Count: {{ counter.count }} <br />
   <br />
   Mouse: <br />
   X: {{ counter.mouse.x }} <br />
-  Y: {{ counter.mouse.y }} <br />  
-<br />
+  Y: {{ counter.mouse.y }} <br />
+  <br />
   Pointer: <br />
   X: {{ counter.pointer.x }} <br />
   Y: {{ counter.pointer.y }} <br />

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

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { useCustomMouse } from './functions/useCustomMouse';
 
-import { ivue, iuse, iref, type UseComposable } from 'ivue';
+import { ivue, iuse, iref, type Use } from 'ivue';
 
 /**
- * Use the ivue Utility Type: UseComposable<typeof YourComposableFunctionName>
+ * Use the ivue Utility Type: Use<typeof YourComposableFunctionName>
  * to get he resulting unwrapped composable properties and functions.
  */
-type UseCustomMouse = UseComposable<typeof useCustomMouse>;
+type UseCustomMouse = Use<typeof useCustomMouse>;
 
 class Counter {
   count = iref(0);
@@ -18,22 +18,22 @@ class Counter {
 
   /**
    * 'x', 'y', 'sum', '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: UseCustomMouse['x']; // Unwrapped Ref<number> becomes -> number
   y: UseCustomMouse['y']; // Unwrapped Ref<number> becomes -> number
-  
+
   sum: UseCustomMouse['sum']; // 'sum' method that will be destructured into this class on construct()
-  total: UseCustomMouse['total'];  // 'total' computed Ref that will also be destructured into this class on construct()
+  total: UseCustomMouse['total']; // 'total' computed Ref that will also be destructured into this class on construct()
 
   constructor() {
     ({
       x: this.x,
       y: this.y,
       sum: this.sum,
-      total: this.total
+      total: this.total,
     } = iuse(useCustomMouse, 5));
   }
 }
@@ -41,11 +41,15 @@ class Counter {
 const counter = ivue(Counter);
 </script>
 <template>
-  <a href="javascript:void(0)" @click="() => counter.increment()">Increment</a>
+  <a href="javascript:void(0)" @click="() => counter.increment()">
+    Increment
+  </a>
   Count: {{ counter.count }} <br />
-  Mouse X: {{ counter.x }}, Y: {{ counter.y }} 
+  Mouse X: {{ counter.x }}, Y: {{ counter.y }}
   <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/CounterComposablesIvue.vue

@@ -10,17 +10,21 @@ class Counter {
     this.count++;
   }
 
-  mouse = ivue(CustomMouse, 5)
+  mouse = ivue(CustomMouse, 5);
 }
 
 const counter = ivue(Counter);
 </script>
 <template>
-  <a href="javascript:void(0)" @click="() => counter.increment()">Increment</a>
+  <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>
+  <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 } from '../../../../src/ivue';
+import { ivue, iref } from 'ivue';
 
 class Counter {
   count = iref(0);
@@ -34,7 +34,9 @@ class Counter {
 const counter = ivue(Counter);
 </script>
 <template>
-  <a href="javascript:void(0)" @click="() => counter.increment()">Increment</a>
+  <a href="javascript:void(0)" @click="() => counter.increment()">
+    Increment
+  </a>
   Count: {{ counter.count }} <br />
   Mouse X: {{ counter.x }}, Y: {{ counter.y }}
   <br />

package/docs/docs/components/usage/CounterComputeds.vue

@@ -17,7 +17,9 @@ class Counter {
 const counter = ivue(Counter);
 </script>
 <template>
-  <a href="javascript:void(0)" @click="() => counter.increment()">Increment</a>
+  <a href="javascript:void(0)" @click="() => counter.increment()">
+    Increment
+  </a>
   Count: {{ counter.count }} <br />
   Double Count: {{ counter.doubleCount }} <br />
   Quad Count: {{ counter.quadCount }} <br />

package/docs/docs/components/usage/CounterComputedsDisabled.vue

@@ -3,12 +3,12 @@ import { ivue, iref } from 'ivue';
 
 class Counter {
   /**
-   * Use static ivue property to disable computed 
+   * Use static ivue property to disable computed
    * behavior for certain getters.
    */
   static ivue = {
-    doubleCount: false // doubleCount is a regular getter now
-  }
+    doubleCount: false, // doubleCount is a regular getter now
+  };
   count = iref(0);
   increment() {
     this.count++;
@@ -24,7 +24,9 @@ class Counter {
 const counter = ivue(Counter);
 </script>
 <template>
-  <a href="javascript:void(0)" @click="() => counter.increment()">Increment</a>
+  <a href="javascript:void(0)" @click="() => counter.increment()">
+    Increment
+  </a>
   Count: {{ counter.count }} <br />
   Double Count: {{ counter.doubleCount }} <br />
   Quad Count: {{ counter.quadCount }} <br />

package/docs/docs/components/usage/CounterExternalRefs.vue

@@ -19,7 +19,9 @@ const counter = ivue(Counter, iuse(span));
 defineExpose<Counter>(counter);
 </script>
 <template>
-  <a href="javascript:void(0)" @click="() => counter.increment()">Increment</a>
-  Count: {{ counter.count }} 
+  <a href="javascript:void(0)" @click="() => counter.increment()">
+    Increment
+  </a>
+  Count: {{ counter.count }}
   <span ref="span"></span>
 </template>

package/docs/docs/components/usage/CounterInsideComposables.vue

@@ -21,6 +21,8 @@ function useCounter() {
 const { count, increment } = useCounter();
 </script>
 <template>
-  <a href="javascript:void(0)" @click="increment">Increment</a>
+  <a href="javascript:void(0)" @click="increment">
+    Increment
+  </a>
   Count: {{ count }} <br />
 </template>

package/docs/docs/components/usage/CounterInternalRefs.vue

@@ -19,7 +19,9 @@ const { span } = counter.toRefs(['span']);
  */
 </script>
 <template>
-  <a href="javascript:void(0)" @click="() => counter.increment()">Increment</a>
+  <a href="javascript:void(0)" @click="() => counter.increment()">
+    Increment
+  </a>
   Count: {{ counter.count }}
   <span ref="span"></span>
 </template>

package/docs/docs/components/usage/CounterLifecycleHooks.vue

@@ -17,6 +17,8 @@ class Counter {
 const counter = ivue(Counter);
 </script>
 <template>
-  <a href="javascript:void(0)" @click="() => counter.increment()">Increment</a>
+  <a href="javascript:void(0)" @click="() => counter.increment()">
+    Increment
+  </a>
   Count: {{ counter.count }} (onMounted we set it to 100)
 </template>

package/docs/docs/components/usage/CounterWatch.vue

@@ -23,6 +23,8 @@ class Counter {
 const counter = ivue(Counter);
 </script>
 <template>
-  <a href="javascript:void(0)" @click="() => counter.increment()">Increment</a>
+  <a href="javascript:void(0)" @click="() => counter.increment()">
+    Increment
+  </a>
   Count: {{ counter.count }} (Click 5 times to get an alert)
 </template>

package/docs/docs/components/usage/CounterWithProps.vue

@@ -17,12 +17,14 @@ class Counter {
 }
 
 /**
- * NOTICE that: ivue(ClassName, ...args) uses TypeScript to infer 
+ * NOTICE that: ivue(ClassName, ...args) uses TypeScript to infer
  * the correct argument types that you need to pass to the constructor.
  */
 const counter = ivue(Counter, props);
 </script>
 <template>
-  <a href="javascript:void(0)" @click="() => counter.increment()">Increment</a>
+  <a href="javascript:void(0)" @click="() => counter.increment()">
+    Increment
+  </a>
   Count: {{ counter.count }}
 </template>

package/docs/docs/components/usage/CounterWithPropsAndEmits.vue

@@ -30,6 +30,8 @@ class Counter {
 const counter = ivue(Counter, props, emit);
 </script>
 <template>
-  <a href="javascript:void(0)" @click="() => counter.increment()">Increment</a>
+  <a href="javascript:void(0)" @click="() => counter.increment()">
+    Increment
+  </a>
   Count: {{ counter.count }}
 </template>

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

@@ -1,7 +1,7 @@
 import { useMouse } from '@vueuse/core';
-import { iref, iuse, type UseComposable } from 'ivue';
+import { iref, iuse, type Use } from 'ivue';
 
-type UseMouse = UseComposable<typeof useMouse>;
+type UseMouse = Use<typeof useMouse>;
 
 export class CustomMouse {
   x: UseMouse['x'];

package/docs/docs/pages/api.md

@@ -32,13 +32,18 @@ Create a regular `vue` Ref but cast the type to the internal unreactive type, be
 
 ### `iuse()`
 
+
 This function unwraps the type of any composable return to the bare values without `.value`, because properties auto-unwrap in `reactive()` object that is being created by `ivue` upon initialization.
 
+## Core Methods
+### `.constructor()`
+Native Class API `.constructor()` is mainly used to assign and cast Vue 3 Refs back to their original types. `.constructor()` should not be used to work with reactive state. Use `.init()` for reactive purposes.
+
 ### `.init()`
 
 ---
 
-`.init()` method is auto-run on `ivue()` initialization after `constructor()` is run.
+`.init()` method is auto-run on `ivue()` initialization after `.constructor()` is run.
 `.init()` has access to the reactive state of the object via `this`.
 
 :::warning NOTICE
@@ -70,6 +75,13 @@ This improves performance if `box` has many other properties that we do not need
 
 **Returns:** `IVueRefs<InstanceType<T>>`
 
+## Core Types
+
+### `IVue`
+
+### `Use`
+
+
 ## Utility Functions
 
 ### `propsWithDefaults()`
@@ -89,6 +101,10 @@ Combines statically written defaults object with the runtime type definition of
 
 ## Utility Types
 
+---
+
+Extracts and unwraps (de-Refs) the real types of Vue 3 composable definition to make it compatible with `ivue`.
+
 ### `ExtractPropDefaultTypes`
 
 Extracts types of the default types definition. This type can be used to validate against the actual defaults definition to make sure both definitions are in sync.
@@ -107,8 +123,3 @@ Extracts types of a runtime emits declaration.
 
 Allows you to extend slots of a given slot interface.
 
-### `UseComposable`
-
----
-
-Extracts and unwraps (de-Refs) the real types of Vue 3 composable definition to make it compatible with `ivue`.

package/docs/docs/pages/guidelines.md

@@ -7,7 +7,7 @@
 ## Dos and Don'ts
 
 ```ts
-type UseMouse = UseComposable<typeof useMouse>;
+type UseMouse = Use<typeof useMouse>;
 /**
  * Example of a properly defined ivue class.
  */
@@ -23,7 +23,7 @@ class Counter {
 
   constructor(public props: CounterProps, public emit: CounterEmit) {
     /** ✓ Properly declared auto-unwrapped composable. */ 
-    this.mouse = iuse(useMouse()); 
+    this.mouse = iuse(useMouse); 
   }
 
   /** ✓ Properly declared init function. */
@@ -97,22 +97,22 @@ Next, we convert the types back to their normal types as if they have no reactiv
 Arrow functions break full extensibility of classes because they carry their own context at the point of declaration, so avoid using them inside of `ivue` classes.
 :::
 
-## constructor() vs .init()
+## `.constructor()` vs `.init()`
 
-#### Use `constructor()` to assign properties of the class and cast Refs to Unwrapped bare types. <br />
+#### Use `.constructor()` to assign properties of the class and cast Refs to Unwrapped bare types. <br />
 
 #### Use `.init()` to declare reactive state functions like `watch`, `watchEffect`, and lifecycle hooks like `onMounted`, `onBeforeMount` etc, do assignments of reactive properties, since `.init()` already has access to `reactive()` state through `this`.<br />
 
 <hr />
 
-Inside the `constructor()` method you still have access to non-reactive state, because when `constructor()` is initialized, it does NOT yet have access to the reactive properties of the class, since it was not yet converted to `reactive()` by `ivue`, so if you use the properties like Refs or ComputedRefs inside `constructor()` you would have to use them with the `.value`.
+Inside the `.constructor()` method you still have access to non-reactive state, because when `.constructor()` is initialized, it does NOT yet have access to the reactive properties of the class, since it was not yet converted to `reactive()` by `ivue`, so if you use the properties like Refs or ComputedRefs inside `.constructor()` you would have to use them with the `.value`.
 
-As a general rule, there is no need to manipulate the values in the `constructor()`, use constructor only for assigning the properties and casting the types of those assigned properties to the unwrapped (de-Refed) final state of the resulting `reactive()` object.
+As a general rule, there is no need to manipulate the values in the `.constructor()`, use constructor only for assigning the properties and casting the types of those assigned properties to the unwrapped (de-Refed) final state of the resulting `reactive()` object.
 
-**Let's look at a `constructor()` vs `.init()` example:**
+**Let's look at a `.constructor()` vs `.init()` example:**
 
 ::: code-group
-<<< @/components/guidelines/CounterExternalRefsDetailed.vue{5,9-13,16-20,29,32,40 vue:line-numbers}
+<<< @/components/guidelines/CounterExternalRefsDetailed.vue{vue:line-numbers}
 :::
 :::details For this example we initialize the component like this:
 
@@ -132,7 +132,7 @@ As a general rule, there is no need to manipulate the values in the `constructor
 
 The key to working with `ivue` is understanding correctly the way Vue 3 does automatic Unwrapping of Refs when they are passed into the `reactive()` object. In that regard we are not relying on some magic `ivue` behavior but rather the default behavior of `reactive()` Vue 3 function.
 
-To match that unwrapping behavior, our class needs to Unwrap (or de-Ref) the types of Composables, Refs, ComputedRefs, if they are being passed into the constructor, to get their raw basic types those Refs are pointing to, so that you can start operating in the `ivue` environment, where there is no need to worry about `.value`. This unwrapping should be mainly done inside the `constructor()` method.
+To match that unwrapping behavior, our class needs to Unwrap (or de-Ref) the types of Composables, Refs, ComputedRefs, if they are being passed into the constructor, to get their raw basic types those Refs are pointing to, so that you can start operating in the `ivue` environment, where there is no need to worry about `.value`. This unwrapping should be mainly done inside the `.constructor()` method.
 
 ## Naming Conventions
 

package/docs/docs/pages/how-it-works.md

@@ -4,26 +4,6 @@ import CounterBasic from '../components/usage/CounterBasic.vue'
 
 # How it works?
 
-## What ivue is NOT?
-
-To understand how ivue works and how it does it, it is important to understand what it does not do.
-
-::: info `ivue` is different from other class based libraries
-&mdash; &nbsp;`ivue` does NOT inherit from a base Class.<br />
-&mdash; &nbsp;`ivue` does NOT use Decorators to achieve its objectives.<br />
-&mdash; &nbsp;`ivue` does NOT alter Vue 3 underlying behavior, but rather relies on it.<br />
-&mdash; &nbsp;`ivue` is NOT the same as Class Components (though you can build components with it).<br />
-&mdash; &nbsp;`ivue` aims to be opaque, by giving the developer the Class API reactivity system.<br />
-&mdash; &nbsp;`ivue` omits custom implementations of IOC Container, Decorators & Mixins, etc. by design.<br />
-&mdash; &nbsp;`ivue` enforces a sane default standard of operation to contain the ever flexible Class API.<br />
-:::
-
-::: tip IVUE IMPLEMENTS MINIMAL API ARCHITECTURE
-Things like IOC Container, Decorators, Traits, Mixins, etc. were omitted by design to slim down the surface area and scope of `ivue` core purpose, which was JavaScript / TypeScript Class API based reactivity. Any Traits, Decorators & IOC Container can be built around it using third-party libraries or roll your own systems. You are more than welcome to contribute in this area!
-:::
-
-## How it works?
-
 ```ts
 export function ivue<T extends AnyClass>(
   className: T,

package/docs/docs/pages/introduction.md

@@ -35,22 +35,36 @@ See: [VueJs.org – Reactivity Transform](https://vuejs.org/guide/extras/rea
 
 `ivue` is fully interoperable with Composition API and does not work against, but rather with it, so you can use all of ecosystems composables seamlessly.
 
-`ivue` also offers a set of functions and utility types to make extensible & exportable props defaults, extensible emits and extensible slots possible.
+`ivue` also offers a set of functions and utility types to make extensible & exportable props defaults, extensible emits, extensible slots, etc. and much more possible.
 
+`ivue` aims to be opaque, by giving the developer the Class API reactivity system.
 
-## Classes in the Ecosystem
+`ivue` omits custom implementations of IOC Container, Decorators, Mixins, etc. by design.
+
+`ivue` enforces a sane default standard of operation to contain the ever flexible Class API.
+
+`ivue` uses Powerful Cutting Edge TypeScript to transform Vue 3 Refs to their base types, infer Class constructor arguments, infer Composable return types and function arguments and much more, making Object Oriented DX Experience with Vue 3 a breeze.
+
+## OOP and TypeScript Class API in the Ecosystem
 
 With failed implementations of classes in React and also failed implementations using class components in Vue 2 / 3, the ecosystem decided that classes are bad and moved to pure procedural designs. 
 
 While procedural programming has its strength, it also comes with its own weaknesses, like lack of inheritance, lack of `this` context, and thus lack of true composition.
 
-::: info IVUE IS DIFFERENT
-&ndash; &nbsp;`ivue` does NOT inherit from a base class<br />
-&ndash; &nbsp;`ivue` does NOT use decorators to achieve its objectives<br />
-&ndash; &nbsp;`ivue` does NOT alter Vue 3 underlying behavior<br />
-&ndash; &nbsp;`ivue` is NOT the same as class components (though you can build components with it)<br />
+## `ivue` is different
+
+&mdash; &nbsp;`ivue` does NOT inherit from a base Class.<br />
+&mdash; &nbsp;`ivue` does NOT use Decorators to achieve its objectives.<br />
+&mdash; &nbsp;`ivue` does NOT alter Vue 3 underlying behavior, but rather relies on it.<br />
+&mdash; &nbsp;`ivue` is NOT Class Components (though you can build components with it).<br />
+
+
+::: tip IVUE IMPLEMENTS MINIMAL API ARCHITECTURE
+Things like IOC Container, Decorators, Traits, Mixins, etc. were omitted by design to slim down the surface area and scope of `ivue` core purpose, which was JavaScript / TypeScript Class API based reactivity. Any Traits, Decorators & IOC Container can be built around it using third-party libraries or roll your own systems. You are more than welcome to contribute in this area!
 :::
 
+
+
 ## Infinite Vue Class Achitecture
 
 `ivue` replicates native JavaScript / TypeScript class implementation by extending descriptors (getters and setters) up the whole prototype ancestors chain thus supporting classical inheritance.

package/docs/docs/pages/usage.md

@@ -46,7 +46,7 @@ Using ivue is very simple, but you need to understand a few principles. See the
 
 Classic Counter example built with `ivue`
 ::: code-group
-<<< @/components/usage/CounterBasic.vue{15 vue:line-numbers}
+<<< @/components/usage/CounterBasic.vue{vue:line-numbers}
 :::
 
 :::details For this example we initialize the component like this:
@@ -206,7 +206,7 @@ function decrement() {
 
 ## Using Composables
 
-### Assign a composable to a class property
+### Assign Vue 3 Composable to a class property
 
 See the highlighted sections related to composable usage.
 ::: code-group
@@ -227,7 +227,7 @@ See the highlighted sections related to composable usage.
 
 <CounterComposables />
 
-### Destructuring composable into the class
+### Destructure Vue 3 Composable into the class
 
 See the highlighted sections related to destructuring composable usage.
 
@@ -251,7 +251,7 @@ See the highlighted sections related to destructuring composable usage.
 <CounterComposablesDestructuring />
 
 
-### Using `ivue` Composables Directly
+### Assign `ivue` Composables to a class property
 
 Using `ivue` based composables assigned to a class property:
 
@@ -274,7 +274,7 @@ Using `ivue` based composables assigned to a class property:
 
 <CounterComposablesIvue />
 
-### Using `ivue` Composables With Destructuring
+### Destructure `ivue` Composables Into Class Scope
 
 See the sections related to using `ivue` based composables initialized through class destructuring assignment.
 
@@ -357,7 +357,7 @@ To use `watch`, `watchEffect`, and other reactive functions, declare `.init()` m
 See the highlighted sections related to using `init()` below:
 
 ::: code-group
-<<< @/components/usage/CounterWatch.vue{6-13 vue:line-numbers}
+<<< @/components/usage/CounterWatch.vue{vue:line-numbers}
 :::
 
 :::details For this example we initialize the component like this:
@@ -386,7 +386,7 @@ See the highlighted sections related to using `init()` below:
 :::
 
 ::: code-group
-<<< @/components/usage/CounterLifecycleHooks.vue{7-9 vue:line-numbers}
+<<< @/components/usage/CounterLifecycleHooks.vue{vue:line-numbers}
 :::
 
 :::details For this example we initialize the component like this:

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.2.1",
+    "ivue": "^1.2.3",
     "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.2",
+  "version": "1.2.4",
   "description": "Infinite Vue – Class Based Architecture for Vue 3",
   "type": "module",
   "exports": {

package/src/ivue.ts

@@ -53,9 +53,9 @@ export type UnwrapRefRecursively<T = any> = T extends Ref | DemiRef
   : T;
 
 /**
- * Helper type for UseComposable, unwraps any type of Vue 3 composable down to its bare types.
+ * Helper type for Use type, unwraps any type of Vue 3 composable down to its bare types.
  */
-export type UnwrapComposableReturn<T> = T extends Ref | DemiRef
+export type Unwrap<T> = T extends Ref | DemiRef
   ? UnwrapRefRecursively<T>
   : {
       [K in keyof T]: T[K] extends Ref | DemiRef
@@ -66,8 +66,8 @@ 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 Use<T = any> = Unwrap<
+  T extends AnyFn ? ReturnType<T> : T
 >;
 
 /**
@@ -356,18 +356,18 @@ export function iuse<T extends AnyClass | AnyFn | Object | any>(
 ): T extends AnyClass
   ? InstanceType<T>
   : T extends AnyFn
-  ? UseComposable<T>
-  : UnwrapComposableReturn<T> {
+  ? Use<T>
+  : Unwrap<T> {
   return typeof classFunctionObject === 'function'
     ? isClass(classFunctionObject)
       ? ivue(
           classFunctionObject as T extends AnyClass ? T : any,
           ...(args as InferredArgs<T extends AnyClass ? T : any>)
-        ).toRefs()
+        ).toRefs(true)
       : (classFunctionObject as AnyFn)(
           ...(args as Parameters<T extends AnyFn ? AnyFn : any>)
         )
-    : (classFunctionObject as unknown as UnwrapComposableReturn<T>);
+    : (classFunctionObject as unknown as Unwrap<T>);
 }
 
 /**