ivue 1.1.19 → 1.1.21

package/docs/docs/.vitepress/theme/main.css

@@ -9,7 +9,7 @@
 }
 
 body {
-  font-family: 'Public Sans'; 
+  /* font-family: 'Public Sans';  */
 }
 
 .button { 

package/docs/docs/components/guidelines/CounterExternalRefsDetailed.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
-import { ivue } from 'ivue';
+import { ivue, iref, iuse } from 'ivue';
 
 type SpanRef = HTMLElement | null;
 
 class Counter {
-  constructor(public span: SpanRef) {
+  constructor(public span?: SpanRef) {
     // Do not do this in the constructor() because this.span 
     // still refers to this.span.value here:
     // onMounted(() => { 
@@ -19,17 +19,17 @@ class Counter {
       (this.span as HTMLElement/*✅*/).innerHTML = 'Initial span text!';
     });
   }
-  count = ref(0) as unknown as number;
+  count = iref(0);
   increment() {
     this.count++;
     (this.span as HTMLElement).innerHTML = String(this.count + 1);
   }
 }
 
-const span = ref<SpanRef>();
+const span = ref<SpanRef>(null);
 const counter = ivue(
   Counter,
-  span as unknown as SpanRef /** Unwrap Ref Manually */
+  iuse(span)
 );
 
 defineExpose<Counter>(counter);

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useMouse } from '@vueuse/core';
+import { useMouse, usePointer } from '@vueuse/core';
 import { ivue, iref, iuse } from 'ivue';
 
 class Counter {
@@ -8,6 +8,7 @@ class Counter {
     this.count++;
   }
   mouse = iuse(useMouse());
+  pointer = iuse(usePointer());
 }
 
 const counter = ivue(Counter);
@@ -15,5 +16,12 @@ const counter = ivue(Counter);
 <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 />
+  Mouse: <br />
+  X: {{ counter.mouse.x }} <br />
+  Y: {{ counter.mouse.y }} <br />  
+<br />
+  Pointer: <br />
+  X: {{ counter.pointer.x }} <br />
+  Y: {{ counter.pointer.y }} <br />
 </template>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useMouse } from './functions/useMouse';
+import { useCustomMouse } from './functions/useCustomMouse';
 
 import { ivue, iuse, iref, type UseComposable } from 'ivue';
 
@@ -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 useMouse>;
+type UseMouse = UseComposable<typeof useCustomMouse>;
 
 class Counter {
   count = iref(0);
@@ -29,7 +29,7 @@ class Counter {
       y: this.y,
       sum: this.sum,
       total: this.total
-    } = iuse(useMouse()));
+    } = iuse(useCustomMouse()));
   }
 }
 

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

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { CustomMouse } from './classes/CustomMouse';
+
+import { ivue, iref, iuse } from 'ivue';
+
+class Counter {
+  count = iref(0);
+
+  increment() {
+    this.count++;
+  }
+
+  // x, y are Refs that will be unwrapped and destructured into this class
+  x: CustomMouse['x']; // Unwrapped Ref<number> becomes -> number
+  y: CustomMouse['y']; // Unwrapped Ref<number> becomes -> number
+  total: CustomMouse['total']; // Unwrapped Ref<number> becomes -> number
+
+  constructor() {
+    ({
+      x: this.x,
+      y: this.y,
+      total: this.total,
+    } = iuse(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.x }}, Y: {{ counter.y }}
+  <br />
+  Total (computed): {{ counter.total }}
+  <br />
+</template>

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import { ivue, iref } from 'ivue';
+import { ivue, iref, iuse } from 'ivue';
 
 type SpanRef = HTMLElement | null;
 
@@ -13,8 +13,8 @@ class Counter {
   }
 }
 
-const span = ref<SpanRef>();
-const counter = ivue(Counter, span as unknown as SpanRef /** Unwrap Ref Manually */);
+const span = ref<SpanRef>(null);
+const counter = ivue(Counter, iuse(span));
 
 defineExpose<Counter>(counter);
 </script>

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

@@ -0,0 +1,18 @@
+import { useMouse } from '@vueuse/core';
+import { iuse,  type UseComposable } from 'ivue';
+
+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()))
+  }
+  
+  get total() {
+    return this.x + this.y;
+  }
+}

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

@@ -0,0 +1,31 @@
+import { computed, ref } from 'vue';
+import { useMouse } from '@vueuse/core';
+
+export function useCustomMouse() {
+  const { x, y } = useMouse();
+
+  const _sum = ref(0);
+
+  function sum() {
+    _sum.value = x.value + y.value;
+  }
+
+  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 {
+    x,
+    y,
+    sum,
+    total,
+  };
+}

package/docs/docs/index.md

@@ -2,31 +2,51 @@
 import Button from './components/Button.vue'
 
 </script>
-# Infinite Vue Documentation
+# <span style="font-family: 'Public Sans'; ">ivue ∞ Infinite Vue</span> Documentation
 
 
 ## About
 
-**Infinite Vue &ndash; ivue** is a class based composable architecture for Vue 3, that unlocks infinite scalability for Vue 3 based apps. It allows you to extend the regular Vue 3 in a simple and elegant way.
+**<span style="font-family: 'Public Sans'; font-size: 125%;">ivue ∞ Infinite Vue</span>** is a class based composable architecture for Vue 3, that unlocks infinite scalability for Vue 3 based apps. It allows you to extend the regular Vue 3 in a simple and elegant Object Oriented way.
+
+## `ivue` is
+
+
+<div style="padding-left:20px; font-size: 20px; line-height: 32px;">
+∞&nbsp; Simple like Options API<br />
+∞&nbsp; Flexible like Composition API<br />
+∞&nbsp; Extensible like TypeScript Class API<br />
+∞&nbsp; Robust, Minimal, Opaque & Unobtrusive<br />
+∞&nbsp; 100% VSCode / Intellij IDE Autocomplete Intellisence<br />
+∞&nbsp; 100% Vue 3 Compatible<br />
+∞&nbsp; 100% Test Covered<br />
+∞&nbsp; 100% Type Safe<br />
+∞&nbsp; Production Ready<br />
+∞&nbsp; Just <code>1.1kb</code> gzipped!<br />
+</div>
+
 
 ## Features
-<div style="padding-left:20px;">
-&ndash; Simple & Elegant Architecture<br />
-&ndash; Extensible Classes using JavaScript / TypeScript native Class API<br />
-&ndash; Extensible Props And Props Defaults<br />
-&ndash; Extensible Emits<br />
-&ndash; Extensible Slots<br />
-&ndash; Extensible Components<br />
-&ndash; Improves DX by elegantly dealing with `.value` in the background<br />
-&ndash; Can be used both as a Store and a ViewModel for Components<br />
-&ndash; Provides Full TypeScript Support<br />
-&ndash; Extends Vue 3 TypeScript Capability<br />
-&ndash; 100% Tested<br />
-&ndash; Zero dependencies except Vue 3<br />
-&ndash; Only 1kb(gzipped) in size!<br />
-&ndash; Production Ready<br />
+<div style="padding-left:20px; font-size: 18px;line-height: 28px; ">
+&mdash;&nbsp; Extensible Classes using JavaScript / TypeScript native Class API<br />
+&mdash;&nbsp; Can be used as a Global Store and a ViewModel for Components<br />
+&mdash;&nbsp; Enhances Extensibility of Props Defaults, Props, Slots<br />
+&mdash;&nbsp; Improves DX by elegantly dealing with <code>.value</code><br />
+&mdash;&nbsp; Allows for Fully Extensible Component Architecture<br />
+&mdash;&nbsp; Extends Vue 3 TypeScript Capability<br />
+&mdash;&nbsp; Zero dependencies except Vue 3<br />
 </div>
 
+
+
+## Philosophy
+<center>
+Perfection is achieved, not when there is nothing more to add, <br />
+but when there is nothing left to take away.  
+
+<div style="padding-top: 5px; color:#888; font-size: 90%;">― Antoine de Saint-Exupéry</div>
+</center>
+
 ## Next Step
 
 <Button href="/pages/getting-started.html" label="Geting Started" />  &nbsp; or &nbsp; <Button href="/pages/introduction.html" label="Read Introduction" />

package/docs/docs/pages/api.md

@@ -5,7 +5,7 @@
 
 ## Core Functions
 
-### ivue()
+### `ivue()`
 
 ---
 
@@ -22,24 +22,24 @@ Core `ivue(className, ...args)` initializer is able to infer and validate the co
 
 `ivue()` initializer function returns an extended Vue 3 `reactive()` object in which getters and setters are internally converted to computeds and adds `.toRefs()` method to the created object. Computeds auto-unwrap themselves when they are accessed as a reactive object property, so the `.value` properties and computeds get flattened in the resulting object and do not require `.value` to be accessed.
 
-`ivue()` replicates native JavaScript / TypeScript class implementation by extending descriptors (getters and setters) up the whole prototype chain thus supporting classical inheritance.
+`ivue()` replicates native JavaScript / TypeScript class implementation by extending descriptors (getters and setters) up the whole prototype ancestors chain thus supporting classical inheritance.
 
 **Returns:** `<IVue<T>>` or `ivue` `reactive()` object of an `AnyClass` class with flattened (de-Refed) `Refs` and `ComputedRefs` as properties.
 
-### iref()
+### `iref()`
 
 Create a regular `vue` Ref but cast the type to the internal unreactive type, because properties auto-unwrap in `reactive()` object that is being created by `ivue` upon initialization.
 
-### iuse()
+### `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.
 
-### .init()
+### `.init()`
 
 ---
 
 `.init()` method is auto-run on `ivue()` initialization after `constructor()` is run.
-`init()` has access to the reactive state of the object via `this`.
+`.init()` has access to the reactive state of the object via `this`.
 
 :::warning NOTICE
 `.init()` method has no arguments and you should never need to run this method manually.
@@ -51,7 +51,7 @@ Use `async init()` if you need `await` functionality.
 
 **Returns:** `void | Promise<void>`
 
-### .toRefs()
+### `.toRefs()`
 
 ---
 
@@ -61,7 +61,7 @@ function toRefs(props?: (keyof InstanceType<T>)[]): IVueRefs<InstanceType<T>>;
 
 Converts an `ivue` object to a Vue 3 Composable with nested refs.
 
-:::tip You can pass the name of the properties to `toRefs(properties)`
+:::tip You can pass the name of the properties to `.toRefs(properties)`
 ```ts
 const { width, height } = ivue(Box).toRefs(['width', 'height']);
 ```
@@ -72,7 +72,7 @@ This improves performance if `box` has many other properties that we do not need
 
 ## Utility Functions
 
-### propsWithDefaults()
+### `propsWithDefaults()`
 
 ---
 
@@ -89,25 +89,25 @@ Combines statically written defaults object with the runtime type definition of
 
 ## Utility Types
 
-### ExtractPropDefaultTypes
+### `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.
 
 ---
 
-### ExtractEmitTypes
+### `ExtractEmitTypes`
 
 ---
 
 Extracts types of a runtime emits declaration.
 
-### ExtendSlots
+### `ExtendSlots`
 
 ---
 
 Allows you to extend slots of a given slot interface.
 
-### UseComposable
+### `UseComposable`
 
 ---
 

package/docs/docs/pages/guidelines.md

@@ -15,11 +15,15 @@ class Counter {
   /** ✓ Properly declared unwrapped composable. */
   mouse: UseMouse;
 
-  /** ✓ Properly declared DOM Ref. */
-  spanElementRef = iref<HTMLElement | null>(null); // ✓ Custom declared type of HTMLElement or null
+  /** 
+   * ✓ Properly declared DOM Ref. 
+   * ✓ Custom declared type of HTMLElement or null
+  */
+  spanElementRef = iref<HTMLElement | null>(null); 
 
   constructor(public props: CounterProps, public emit: CounterEmit) {
-    this.mouse = iuse(useMouse()); // ✓ Properly declared auto-unwrapped composable.
+    /** ✓ Properly declared auto-unwrapped composable. */ 
+    this.mouse = iuse(useMouse()); 
   }
 
   /** ✓ Properly declared init function. */
@@ -36,17 +40,18 @@ class Counter {
       }
     })
   }
+
   /**
    * Use iref() for the property to be auto cast to number
    * because refs auto-unwrap inside reactive().
    */
-  count = iref(0); // ✓ inferred type -> number
+  count = iref(0); // ✓ Properly inferred type -> number
 
   /**
    * Use iref() for the property to be auto cast to number
    * because refs auto-unwrap inside reactive().
    */
-  timesClicked = iref(0); // ✓ inferred type -> number
+  timesClicked = iref(0); // ✓ Properly inferred type -> number
 
   /** ✓ Properly declared function (not arrow function). */
   increment() {
@@ -70,6 +75,7 @@ class Counter {
   }
 }
 
+/** ✓ Properly intilized IVUE class runner. */
 const counter = ivue(Counter, props, emit);
 ```
 
@@ -95,7 +101,7 @@ Arrow functions break full extensibility of classes because they carry their own
 
 #### 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 />
+#### 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 />
 

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import CounterBasic from '../components/usage/CounterBasic.vue'
 </script>
+
 # How it works?
 
 ## What ivue is NOT?
@@ -8,30 +9,40 @@ import CounterBasic from '../components/usage/CounterBasic.vue'
 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)
+&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,
   ...args: InferredArgs<T>
-): IVue<T> 
+): IVue<T>;
 ```
+
 The main `ivue()` initializer function uses TypeScript to be able to infer and validate the constrcutor argument types of `AnyClass` and passes those arguments to the constructor of `AnyClass`.
 
 `ivue` allows you to pass any number of arguments into the class `constructor(arg1, arg2, arg3, ...etc)`
 
 `ivue()` initializer function returns an extended Vue 3 `reactive()` object in which getters and setters are internally converted to computeds and adds `.toRefs()` method to the created object. Computeds auto-unwrap themselves when they are accessed as a reactive object property, so the `.value` properties and computeds get flattened in the resulting object and do not require `.value` to be accessed.
 
-`ivue` replicates native JavaScript / TypeScript class implementation by extending descriptors (getters and setters) up the whole prototype chain thus supporting classical inheritance.
+`ivue` replicates native JavaScript / TypeScript class implementation by extending descriptors (getters and setters) up the whole prototype ancestors chain thus supporting classical inheritance.
 
-`ivue` aims to be opaque and minimal, just doing the minimum to convert a class to a reactive object, leaving the rest to be implemented using Vue 3 Composition API inside an initializer function called `.init()` 
+`ivue` aims to be opaque and minimal, just doing the minimum to convert a class to a reactive object, leaving the rest to be implemented using Vue 3 Composition API inside an initializer function called `.init()`
 
 ## Usage Recommendation
+
 `ivue` recommends all class properties to be defined as `ref()` to be able to interoperate with `defineExpose()`, if you simply pass reactive props which are not Refs through `defineExpose()`, they will lose reactivity. `ref()` refs just like computed refs get flattened into the `reactive()` object, so there is no need to worry about using `.value`. The `ref()` refs are necessary just internally for Vue 3 to know which refs to keep reactive, and we just convert the types back to their normal types as if they have no reactivity at all, so `Ref<number>` is `number` in `ivue`, so rather than going in the direction of complexifying the types, we are going in the opposite direction towards simplification.
 
 `ivue` recommends all class functions, getters and setters to be defined in plain full function style (not arrow functions), this allows all `ivue` classes to be extensible at any point. By using plain standard functions, getters and setters allows for any getter, setter, function or property to be overriden by extending this class. Arrow functions break full extensibility of classes, so avoid using them inside of classes.
@@ -40,7 +51,9 @@ See: [More Guidelines](/pages/guidelines.html)
 
 ## Minimal API Surface Area
 
-`ivue()` initializer function is the main API<br />
+`ivue()` initializer function is the main core function to initialize the `ivue` reactive object<br />
+`iref()` ref initializer instantiates the Ref but Unwraps its type as the raw type of the Ref<br />
+`iuse()` function converts the type of composables to they Unwraped raw types<br />
 `.init()` method helps initialize the reactive state like `watch`, `onMount`, etc.<br />
 `.toRefs()` method allows to interoperate with Vue 3 Composables<br />
 Utility Types help to achieve the rest of `ivue` capabilities
@@ -52,11 +65,12 @@ Utility Types help to achieve the rest of `ivue` capabilities
 Or [See on GitHub](https://github.com/infinite-system/ivue/blob/main/src/ivue.ts)
 
 ## 100% Vue 3 Compatible
+
 `.toRefs()` allows the object to be converted to Vue 3 native composable structure with full `.value`s, so it can interoperate with native composables if needed. `.toRefs()` is also often used to get refs for `v-bind()` in css styles.
 
 ## 100% TypeScript Support
 
-`ivue` is on the cutting edge of TypeScript and owes its capabilities to the latest developments in TypeScript. 
+`ivue` is on the cutting edge of TypeScript and owes its capabilities to the latest developments in TypeScript.
 
 `ivue` provides a set of utility types to make working with `Vue 3` even easier and more scalable.
 
@@ -68,4 +82,4 @@ You can clone the project and run `yarn test` yourself and examine the tests.
 
 ## Zero Dependencies
 
-`ivue` has zero dependencies except Vue 3.
+`ivue` has zero dependencies except Vue 3.

package/docs/docs/pages/how-its-made.md

@@ -19,7 +19,7 @@ After many iterations where I created a whole inversion of control library for `
 
 In that sweep of clarity, I got rid of 95% of the code that was just extra stuff and not the essence and left only `3` core functions: `ivue()`, `.init()`, `.toRefs()` only which are necessary to do everything `ivue` is set out to do.
 
-Use Composition API composables inside `init()` function.
+Use Composition API composables inside `.init()` function.
 
 ## Minimalism
 

package/docs/docs/pages/introduction.md

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import Button from '../components/Button.vue'
 </script>
-# What is Infinite Vue?
+# What is <span style="font-family: 'Public Sans'; ">ivue ∞ Infinite Vue</span>?
 
 ## The Problem
 
@@ -17,7 +17,14 @@ See: [VueJs.org &ndash; Reactivity Transform](https://vuejs.org/guide/extras/rea
 <div style="padding-left:20px; font-size: 1.2rem; line-height: 2rem;">
 &ndash;&nbsp; Simple like Options API<br />
 &ndash;&nbsp; Flexible like Composition API<br />
-&ndash;&nbsp; Extensible like TypeScript Classes API<br />
+&ndash;&nbsp; Extensible like TypeScript Class API<br />
+&ndash;&nbsp; Robust, Minimal, Opaque & Unobtrusive<br />
+&ndash;&nbsp; 100% Vue 3 Compatible<br />
+&ndash;&nbsp; 100% Test Covered<br />
+&ndash;&nbsp; 100% Type Safe<br />
+&ndash;&nbsp; Production Ready<br />
+&ndash;&nbsp; Just <code>1.1kb</code> gzipped!<br />
+&ndash;&nbsp; 100% VSCode / Intellij IDE Auto-complete Intellisence<br />
 </div>
 
 `ivue` is a powerful tool because it fully aligns itself with JavaScript / TypeScript Class API.
@@ -46,7 +53,7 @@ While procedural programming has its strength, it also comes with its own weakne
 
 ## Infinite Vue Class Achitecture
 
-`ivue` replicates native JavaScript / TypeScript class implementation by extending descriptors (getters and setters) up the whole prototype chain thus supporting classical inheritance.
+`ivue` replicates native JavaScript / TypeScript class implementation by extending descriptors (getters and setters) up the whole prototype ancestors chain thus supporting classical inheritance.
 
 By using TypeScript we are able to infer the arguments of the main `ivue()` initializer function and pass the arguments to the constructor.
 

package/docs/docs/pages/usage.md

@@ -10,6 +10,7 @@ import CounterExternalRefs from '../components/usage/CounterExternalRefs.vue'
 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 CounterInsideComposables from '../components/usage/CounterInsideComposables.vue'
 import CounterComputeds from '../components/usage/CounterComputeds.vue'
 import CounterComputedsDisabled from '../components/usage/CounterComputedsDisabled.vue'
@@ -231,7 +232,7 @@ 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/functions/useMouse.ts{ts:line-numbers} [functions/useMouse.ts]
+<<< @/components/usage/functions/useCustomMouse.ts{ts:line-numbers} [functions/useCustomMouse.ts]
 :::
 
 :::details For this example we initialize the component like this:
@@ -270,6 +271,27 @@ See the highlighted sections related to using `ivue` inside a composable.
 
 <CounterInsideComposables />
 
+## Using `ivue` Composables
+
+See the highlighted sections related to using `ivue` based composables.
+
+::: code-group
+<<< @/components/usage/CounterComposablesIvueDestructuring.vue{14 vue:line-numbers}
+:::
+
+:::details For this example we initialize the component like this:
+
+```vue
+<template>
+  <CounterComposablesIvueDestructuring />
+</template>
+```
+
+:::
+
+<div style="font-size: 18px; font-weight: 500;">Result</div>
+
+<CounterComposablesIvueDestructuring />
 
 ## Using Computeds
 
@@ -329,7 +351,7 @@ See the highlighted sections related to using `init()` below:
 
 ## Using Lifecycle Hooks
 
-To use `onMounted`, `onBeforeMount` and other lifecycle, declare `.init()` method in the class.
+To use `onMounted`, `onBeforeMount` and other lifecycle hooks, declare `.init()` method in the class.
 See the highlighted sections related to using `init()` below:
 
 ::: tip NOTICE:

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