ivue 1.1.21 → 1.2.0

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

@@ -7,7 +7,7 @@ import { ivue, iuse, iref, type UseComposable } from 'ivue';
  * Use the ivue Utility Type: UseComposable<typeof YourComposableFunctionName>
  * to get he resulting unwrapped composable properties and functions.
  */
-type UseMouse = UseComposable<typeof useCustomMouse>;
+type UseCustomMouse = UseComposable<typeof useCustomMouse>;
 
 class Counter {
   count = iref(0);
@@ -16,12 +16,17 @@ class Counter {
     this.count++;
   }
 
-  // x, y are Refs that will be unwrapped and destructured into this class
-  x: UseMouse['x']; // Unwrapped Ref<number> becomes -> number
-  y: UseMouse['y']; // Unwrapped Ref<number> becomes -> number
+  /**
+   * '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 
+   * 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: UseMouse['sum']; // 'sum' method that will be destructured into this class on construct()
-  total: UseMouse['total'];  // 'total' computed Ref that will also be destructured into this class on construct()
+  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()
 
   constructor() {
     ({
@@ -29,7 +34,7 @@ class Counter {
       y: this.y,
       sum: this.sum,
       total: this.total
-    } = iuse(useCustomMouse()));
+    } = iuse(useCustomMouse(5)));
   }
 }
 

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

@@ -10,15 +10,23 @@ class Counter {
     this.count++;
   }
 
-  // x, y are Refs that will be unwrapped and destructured into this class
+
+  /**
+   * '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 
+   * Vue 3's `reactive()` Proxy will be able to resolve those Refs internally.
+   */
   x: CustomMouse['x']; // Unwrapped Ref<number> becomes -> number
   y: CustomMouse['y']; // Unwrapped Ref<number> becomes -> number
-  total: CustomMouse['total']; // Unwrapped Ref<number> becomes -> number
+  total: CustomMouse['total']; // Unwrapped ComputedRef<number> becomes -> number
+  sum: CustomMouse['sum']; // Function remains a function
 
   constructor() {
     ({
       x: this.x,
       y: this.y,
+      sum: this.sum,
       total: this.total,
     } = iuse(CustomMouse, 5));
   }
@@ -33,4 +41,5 @@ 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>
 </template>

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

@@ -1,18 +1,23 @@
 import { useMouse } from '@vueuse/core';
-import { iuse,  type UseComposable } from 'ivue';
+import { iref, iuse, type UseComposable } from '../../../../../src/ivue';
 
-type UseMouse = UseComposable<typeof useMouse>
+type UseMouse = UseComposable<typeof useMouse>;
 
 export class CustomMouse {
-  
   x: UseMouse['x'];
   y: UseMouse['y'];
 
-  constructor(public test: number) {
-    ({ x: this.x, y: this.y } = iuse(useMouse()))
+  _sum = iref(0);
+
+  constructor(public requiredProp: number) {
+    ({ x: this.x, y: this.y } = iuse(useMouse()));
+  }
+
+  sum() {
+    this._sum = this.x + this.y + this.requiredProp;
   }
-  
+
   get total() {
-    return this.x + this.y;
+    return this._sum;
   }
-}
+}

package/docs/docs/components/usage/functions/useCustomMouse.ts

@@ -1,25 +1,19 @@
 import { computed, ref } from 'vue';
 import { useMouse } from '@vueuse/core';
 
-export function useCustomMouse() {
+export function useCustomMouse(requiredProp: number) {
   const { x, y } = useMouse();
 
   const _sum = ref(0);
 
   function sum() {
-    _sum.value = x.value + y.value;
+    _sum.value = x.value + y.value + requiredProp;
   }
 
-  const _total = computed(() => {
-    // Returning without .value, not entirely correctly, but will still work in Vue template.
-    // This is to test the impressive IVue unwrapping capabilities of deeply nested and confusing Refs
-    return _sum;
-  });
-
   const total = computed(() => {
     // Returning without .value, not entirely correctly, but will still work in Vue template.
     // This is to test the impressive IVue unwrapping capabilities of deeply nested and confusing Refs
-    return _total;
+    return _sum;
   });
 
   return {

package/docs/docs/pages/usage.md

@@ -249,19 +249,20 @@ See the highlighted sections related to destructuring composable usage.
 
 <CounterComposablesDestructuring />
 
-## Using Inside Composables
+### Using `ivue` Composables With Destructuring
 
-See the highlighted sections related to using `ivue` inside a composable.
+See the highlighted sections related to using `ivue` based composables.
 
 ::: code-group
-<<< @/components/usage/CounterInsideComposables.vue{14 vue:line-numbers}
+<<< @/components/usage/CounterComposablesIvueDestructuring.vue{14 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>
-  <CounterInsideComposables />
+  <CounterComposablesIvueDestructuring />
 </template>
 ```
 
@@ -269,21 +270,22 @@ See the highlighted sections related to using `ivue` inside a composable.
 
 <div style="font-size: 18px; font-weight: 500;">Result</div>
 
-<CounterInsideComposables />
+<CounterComposablesIvueDestructuring />
 
-## Using `ivue` Composables
 
-See the highlighted sections related to using `ivue` based composables.
+## Using Inside Composables
+
+See the highlighted sections related to using `ivue` inside a composable.
 
 ::: code-group
-<<< @/components/usage/CounterComposablesIvueDestructuring.vue{14 vue:line-numbers}
+<<< @/components/usage/CounterInsideComposables.vue{14 vue:line-numbers}
 :::
 
 :::details For this example we initialize the component like this:
 
 ```vue
 <template>
-  <CounterComposablesIvueDestructuring />
+  <CounterInsideComposables />
 </template>
 ```
 
@@ -291,7 +293,7 @@ See the highlighted sections related to using `ivue` based composables.
 
 <div style="font-size: 18px; font-weight: 500;">Result</div>
 
-<CounterComposablesIvueDestructuring />
+<CounterInsideComposables />
 
 ## Using Computeds
 

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.20",
+    "ivue": "^1.1.21",
     "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.1.21",
+  "version": "1.2.0",
   "description": "Infinite Vue – Class Based Architecture for Vue 3",
   "type": "module",
   "exports": {

package/src/ivue.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/ban-types */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type { ComputedRef, ExtractPropTypes, Ref, ToRef } from 'vue';
-import { UnwrapRef, computed, reactive, ref, toRef } from 'vue';
+import { computed, reactive, ref, toRef } from 'vue';
 import type { Ref as DemiRef } from 'vue-demi';
 
 /** Types */
@@ -44,7 +44,7 @@ export type UnwrapRefRecursively<T = any> = T extends Ref | DemiRef
   : T;
 
 /**
- * Helper type for UseComposable.
+ * Helper type for UseComposable, unwraps any type of Vue 3 composable down to its bare types.
  */
 export type UnwrapComposableReturn<T> = T extends Ref | DemiRef
   ? UnwrapRefRecursively<T>
@@ -57,7 +57,7 @@ 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 (...args: any[]) => any> =
+export type UseComposable<T extends AnyFn> =
   UnwrapComposableReturn<ReturnType<T>>;
 
 /**
@@ -85,18 +85,23 @@ export type ExtendSlots<T> = PrefixKeys<T, 'before--'> &
   PrefixKeys<T, 'after--'>;
 
 /** Helper Types. */
+/**
+ * Any JavaScript function of any type.
+ */
+export type AnyFn = (...args: any[]) => any;
+
 /**
  * Any JavaScript class of any type.
  */
 export type AnyClass = abstract new (...args: any[]) => any;
 
 /**
- * Descriptors map.
+ * Descriptors map type.
  */
 export type Descriptors = Map<string, PropertyDescriptor>;
 
 /**
- * Computeds hash map.
+ * Computeds hash map type.
  */
 export type Computeds = Record<string, ComputedRef>;
 
@@ -135,7 +140,7 @@ export type IFnParameter<
  * Get function arguments Parmeters<F> parameter by key K
  */
 export type FnParameter<
-  F extends (...args: any[]) => any,
+  F extends AnyFn,
   K extends number
 > = Parameters<F>[K];
 
@@ -317,20 +322,17 @@ export function getAllClassProperties(obj: object): Set<string> {
  * @param val T
  * @returns {UnwrapRef<T>}
  */
-export function iref<T>(val?: T): UnwrapRef<T> {
-  return ref(val) as unknown as UnwrapRef<T>;
-}
+export const iref = ref as <T = any>(value: T) => T;
 
 /**
- * Two modes of operation: 
- * 1. `iuse()` converts the types of a Composable / Ref to pure raw type definition.
- * Returns for all properties of an object an unwrapped raw type definition, 
- * unwraps direct Refs & ComputedRefs as well.
- * 
- * 2. If AnyClass is supplied into `iuse(AnyClass, ...args)` and that class's ...args,
- * it returns a '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 wrapper class context.
+ * Two 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,
+ * 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,
@@ -352,7 +354,7 @@ export function iuse<T extends AnyClass | Object>(
  * @param computeds @see Computeds
  * @returns {ExtendWithToRefs<T>['toRefs']}
  */
-export function ivueToRefs<T extends AnyClass>(
+function ivueToRefs<T extends AnyClass>(
   vue: IVue<T>,
   descriptors: Descriptors,
   computeds: Computeds