ivue 1.2.3 → 1.3.0

package/docs/docs/components/advanced-usage/ConvertLegacy.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+class Chair {
+    // Defaults that will be common for all the instances
+    static backSupport: boolean = true;
+    static armRests: boolean = true;
+
+    // Instance properties
+    color: string;
+    seatHeight: number;
+    recliningAngle: number;
+    headSupport: boolean;
+    padding: string;
+    seatSize: string;
+    isHeightAdjustable: boolean;
+    isMovable: boolean;
+    type: string;
+
+    constructor(
+        color: string,
+        seatHeight: number,
+        recliningAngle: number,
+        headSupport: boolean,
+        padding: string,
+        seatSize: string,
+        isHeightAdjustable: boolean,
+        isMovable: boolean
+    ) {
+        // Defaults which can be changed by the subclass class.
+        this.color = color;
+        this.seatHeight = seatHeight;
+        this.recliningAngle = recliningAngle;
+        this.headSupport = headSupport || false;
+        this.padding = padding || "3 inch";
+        this.seatSize = seatSize || "16 inch";
+        this.isHeightAdjustable = isHeightAdjustable || false;
+        this.isMovable = isMovable || false;
+        this.type = "Chair";
+        console.log(Chair.printDefaultProps()); // Usage of static method inside constructor
+    } 
+
+    static logObjectProps(): void {
+        console.dir(this);
+    }
+
+    // Static within static usage
+    static printDefaultProps(): void {
+        console.log(`Chair Back Support = ${this.backSupport}`);
+        console.log(`Arm rests support = ${this.armRests}`);
+    }
+
+    adjustableHeight(): void {};
+    adjustAngle(): void {};
+    moveChair(): void {};    
+}
+</script>
+<template>
+  <div>Hello</div>
+</template>

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/advanced-usage.md

@@ -8,4 +8,5 @@
 ## Extend Emits
 ## Extend Slots
 ## Extend Classes
-## Extend Components
+## Extend Components
+## Convert Legacy Classes to Reactive Classes with `ivue` {#legacy-to-reactive}

package/docs/docs/pages/api.md

@@ -28,17 +28,26 @@ Core `ivue(className, ...args)` initializer is able to infer and validate the co
 
 ### `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.
+Is simply an alias to Vue 3 `ref()` function but casts the type to the internal unreactive type, because properties auto-unwrap in `reactive()` object that is being created by `ivue` upon initialization.
+
+### `ishallowRef()`
+
+Is simply an alias Vue 3 `shallowRef()` function but casts the type to the internal unreactive type, because properties auto-unwrap in `reactive()` object that is being created by `ivue` upon initialization.
 
 ### `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 +79,13 @@ This improves performance if `box` has many other properties that we do not need
 
 **Returns:** `IVueRefs<InstanceType<T>>`
 
+## Core Types
+
+### `IVue` {#IVue}
+
+### `Use` {#Use}
+
+
 ## Utility Functions
 
 ### `propsWithDefaults()`
@@ -89,6 +105,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 +127,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.
  */
@@ -75,7 +75,7 @@ class Counter {
   }
 }
 
-/** ✓ Properly intilized IVUE class runner. */
+/** ✓ Properly initialized IVUE class runner. */
 const counter = ivue(Counter, props, emit);
 ```
 
@@ -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/how-its-made.md

@@ -7,9 +7,9 @@ The original inspiration for `ivue` comes from `MobX` React state management lib
 
 ##  Epiphany
 
-After building several ports from `MobX` state management library to `VueJS` to reactivity system I realized that Vue itself is far superior in its design and perfomance and can solve the same problem without relying on second hand-library, but for that my evolution of understanding of how JavaScript getters and setters work needed to happen. 
+After building several ports from `MobX` state management library to `VueJS` to reactivity system I realized that Vue itself is far superior in its design and performance and can solve the same problem without relying on second hand-library, but for that my evolution of understanding of how JavaScript getters and setters work needed to happen. 
 
-And one lucky and sunny day driving back from work in an eureka moment of light it occured to me how to use Vue 3 computeds in place of getters in classes (Yes, apparently my brain does coding while driving a car).
+And one lucky and sunny day driving back from work in an eureka moment of light it occurred to me how to use Vue 3 computeds in place of getters in classes (Yes, apparently my brain does coding while driving a car).
 
 `ivue` relies on this very simple discovery of how to elegantly convert getters into Vue 3 computeds.
 
@@ -28,5 +28,5 @@ By default `ivue` does not rely on decorators, though you can use decorators if
 
 ## The Rest is Up To You
 `ivue` is like a small mustard seed core for the big tree trunk of Class Based Reactive applications to be built around it, that's why the path of utter simplicity was chosen.
-Everything else like an Inversion of Control (IOC) system, Traits, Mixins, Decorators can be built around the core `ivue` architecture and is upto the community of enthusiatic open source contributors, please share with us your vision of how you and all of can use `ivue` better.
+Everything else like an Inversion of Control (IOC) system, Traits, Mixins, Decorators can be built around the core `ivue` architecture and is up to the community of enthusiastic open source contributors, please share with us your vision of how you and all of can use `ivue` better.
 

package/docs/docs/pages/introduction.md

@@ -35,23 +35,37 @@ 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
+
+
+## Infinite Vue Class Architecture
 
 `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/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.4",
     "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.3",
+  "version": "1.3.0",
   "description": "Infinite Vue – Class Based Architecture for Vue 3",
   "type": "module",
   "exports": {
@@ -26,6 +26,11 @@
     "vue": "^3.0.0",
     "vue-demi": "^0.0.0"
   },
+  "peerDependenciesMeta": {
+    "vue-demi": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@cypress/vite-dev-server": "^5.0.2",
     "@cypress/vue": "^5.0.3",