From 83d4d78e6fa3aa39ca291239ea1e53ba76b2b4c6 Mon Sep 17 00:00:00 2001
From: Evgeny <ekalashnikov@gmail.com>
Date: Sun, 18 Aug 2024 03:56:46 -0400
Subject: [PATCH] types improvements & new methods

---
 docs/docs/.vitepress/config.ts                |   2 +-
 .../components/usage/CounterComposables.vue   |   7 +-
 .../usage/CounterComposablesDestructuring.vue |   6 +-
 docs/docs/pages/api.md                        |  10 +-
 docs/docs/pages/guidelines.md                 |  30 +-
 docs/docs/pages/how-its-made.md               |   5 +-
 docs/package.json                             |   2 +-
 src/__tests__/ivue.vitest.spec.ts             |  20 +-
 src/index.ts                                  | 457 +---------------
 src/ivue.ts                                   | 495 ++++++++++++++++++
 10 files changed, 549 insertions(+), 485 deletions(-)
 create mode 100644 src/ivue.ts

diff --git a/docs/docs/.vitepress/config.ts b/docs/docs/.vitepress/config.ts
index eba0cce..d7c76e1 100644
--- a/docs/docs/.vitepress/config.ts
+++ b/docs/docs/.vitepress/config.ts
@@ -121,7 +121,7 @@ export default defineConfig({
           },
           { text: 'ExtractEmitTypes', link: '/pages/api#extractemittypes' },
           { text: 'ExtendSlots', link: '/pages/api#extendslots' },
-          { text: 'UnwrapComposable', link: '/pages/api#unwrapcomposable' },
+          { text: 'UseComposable', link: '/pages/api#UseComposable' },
         ],
       },
       
diff --git a/docs/docs/components/usage/CounterComposables.vue b/docs/docs/components/usage/CounterComposables.vue
index 4e40d72..9f02dac 100644
--- a/docs/docs/components/usage/CounterComposables.vue
+++ b/docs/docs/components/usage/CounterComposables.vue
@@ -1,14 +1,13 @@
 <script setup lang="ts">
-import { ref } from 'vue';
-import { ivue, UnwrapComposable } from 'ivue';
 import { useMouse } from '@vueuse/core';
+import { ivue, iref, iuse } from '../../../../src/index';
 
 class Counter {
-  count = ref(0) as unknown as number;
+  count = iref(0);
   increment() {
     this.count++;
   }
-  mouse = useMouse() as unknown as UnwrapComposable<typeof useMouse>
+  mouse = iuse(useMouse());
 }
 
 const counter = ivue(Counter);
diff --git a/docs/docs/components/usage/CounterComposablesDestructuring.vue b/docs/docs/components/usage/CounterComposablesDestructuring.vue
index 3dda2b7..5c566b1 100644
--- a/docs/docs/components/usage/CounterComposablesDestructuring.vue
+++ b/docs/docs/components/usage/CounterComposablesDestructuring.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import { ivue, type UnwrapComposable } from 'ivue';
 import { useMouse } from './functions/useMouse';
+import { ivue, type UseComposable } from '@/ivue';
 
 /**
- * Use the ivue Utility Type: UnwrapComposable<typeof YourComposableFunctionName>
+ * Use the ivue Utility Type: UseComposable<typeof YourComposableFunctionName>
  * to get he resulting unwrapped composable properties and functions.
  */
-type UseMouse = UnwrapComposable<typeof useMouse>;
+type UseMouse = UseComposable<typeof useMouse>;
 
 class Counter {
   count = ref(0) as unknown as number;
diff --git a/docs/docs/pages/api.md b/docs/docs/pages/api.md
index e63768d..7ca9001 100644
--- a/docs/docs/pages/api.md
+++ b/docs/docs/pages/api.md
@@ -24,7 +24,7 @@ Core `ivue(className, ...args)` initializer is able to infer and validate the co
 
 `ivue()` replicates native JavaScript / TypeScript class implementation by extending descriptors (getters and setters) up the whole prototype 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.
+**Returns:** `<IVue<T>>` or `ivue` `reactive()` object of an `AnyClass` class with flattened (de-Refed) `Refs` and `ComputedRefs` as properties.
 
 ### .init()
 
@@ -41,7 +41,7 @@ Returns: `<IVue<T>>` or `ivue` `reactive()` object of an `AnyClass` class with f
 You can make `init()` method `async` if you need `await` functionality.
 :::
 
-Returns: `void | Promise<void>`
+**Returns:** `void | Promise<void>`
 
 ### .toRefs()
 
@@ -60,7 +60,7 @@ const { width, height } = ivue(Box).toRefs(['width', 'height']);
 This improves performance if `box` has many other properties that we do not need.
 :::
 
-Returns: `IVueRefs<InstanceType<T>>`
+**Returns:** `IVueRefs<InstanceType<T>>`
 
 ## Utility Functions
 
@@ -77,7 +77,7 @@ export function propsWithDefaults<T extends VuePropsObject>(
 
 Combines statically written defaults object with the runtime type definition of Vue 3 props.
 
-Returns: `VuePropsWithDefaults<T>`
+**Returns:** `VuePropsWithDefaults<T>`
 
 ## Utility Types
 
@@ -99,7 +99,7 @@ Extracts types of a runtime emits declaration.
 
 Allows you to extend slots of a given slot interface.
 
-### UnwrapComposable
+### UseComposable
 
 ---
 
diff --git a/docs/docs/pages/guidelines.md b/docs/docs/pages/guidelines.md
index fdf65ad..8f8e171 100644
--- a/docs/docs/pages/guidelines.md
+++ b/docs/docs/pages/guidelines.md
@@ -7,10 +7,32 @@
 ## Dos and Don'ts
 
 ```ts
+type UseMouse = UseComposable<typeof useMouse>;
 /**
  * Example of a properly defined ivue class.
  */
 class Counter {
+  /** ✅ Properly declared unwrapped composable. */
+  mouse: UseMouse;
+
+  constructor(public props: CounterProps, public emit: CounterEmit) {
+    this.mouse = useMouse() as unknown as UseMouse // ✅ Properly declared unwrapped composable.
+  }
+
+  /** ✅ Properly declared init function. */
+  init() {
+    /** ✅ Properly set lifecycle hook. */
+    onMounted(() => {
+      this.count = 4;
+    });
+
+    /** ✅ Properly set watch function */
+    watch(() => this.count, (newCount) => {
+      if (newCount === 5) {
+        alert('You reached the count of ' + newCount + '!');
+      }
+    })
+  }
   /**
    * Use ref() for the property and cast it to number
    * because refs auto-unwrap inside reactive().
@@ -59,19 +81,20 @@ Next, we convert the types back to their normal types as if they have no reactiv
 `ivue` recommends all class functions 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, it allows the developer to be able to override them at any time by simply extending the class.
 
 ### Do not use arrow functions in class declarations
-:::warning 
+
+:::warning
 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()
 
-
 #### 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.
 
@@ -103,4 +126,3 @@ To match that unwrapping behavior, our class needs to Unwrap (or de-Ref) the typ
 ## Naming Conventions
 
 To benefit from the full power of `ivue`, it is recommended to extract the classes into separate files. What has been an effective pattern is to name the classes and put them right beside components in the same folder that these classes are being used with. So if you have `CounterComponent.vue` component, it can have a class inside `CounterComponentClass.ts`, and you can store props, emits, and other runtime definitions inside `CounterComponentProps.ts`.
-
diff --git a/docs/docs/pages/how-its-made.md b/docs/docs/pages/how-its-made.md
index 45a9474..236178f 100644
--- a/docs/docs/pages/how-its-made.md
+++ b/docs/docs/pages/how-its-made.md
@@ -19,11 +19,14 @@ 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.
+
 ## Minimalism
 
 Thus `ivue` has minimal surface area of the API making it very robust and easy to test.
 By default `ivue` does not rely on decorators, though you can use decorators if you wish to.
 
 ## 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.
 
-Everythign 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. 
diff --git a/docs/package.json b/docs/package.json
index f0b4083..edcffb4 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -7,7 +7,7 @@
     "build": "vitepress build docs",
     "serve": "vitepress serve docs",
     "preview": "vitepress build docs && vitepress serve docs",
-    "deploy": "node scripts/gh-pages-deploy.js"
+    "deploy": "node scripts/gh-pages-deploy.js",
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^5.10.0",
diff --git a/src/__tests__/ivue.vitest.spec.ts b/src/__tests__/ivue.vitest.spec.ts
index 324eaa2..09de5f2 100644
--- a/src/__tests__/ivue.vitest.spec.ts
+++ b/src/__tests__/ivue.vitest.spec.ts
@@ -468,20 +468,19 @@ describe('ivue', () => {
         },
       };
 
-      /** Params Defaults */
+      /** Example Params Defaults */
       const defaults: ExtractPropDefaultTypes<typeof defaultTypes> = {
-        updatePath: '',
-        updateEntity: false, // { updateEntity: true } will enable updating of entity if { fetchEntity: 'entity_name' } is set; { updateEntity: 'another_entity' } can enable updating an entity with another fields template
-        updateFieldsTemplate: [],
-        updateFieldsParams: {
+        updatePath: '', // String
+        updateEntity: false, // Boolean
+        updateFieldsTemplate: [], // Array
+        updateFieldsParams: { // Object
           active: true,
         },
-        updateLabel: '',
-        /** Drag and Drop */
-        draggable: true,
+        updateLabel: 'Update Item', // String
+        draggable: true, // Boolean
         /** Runtime Class Runner */
-        runner: SampleClass,
-        fn: () => {},
+        runner: SampleClass, // Class
+        fn: () => {}, // Function
       };
 
       const _propsWithDefaults = propsWithDefaults(defaults, defaultTypes);
@@ -512,6 +511,7 @@ describe('ivue', () => {
       expect(isClass((_propsWithDefaults.runner.default as () => any)())).toBe(
         true
       );
+      
       // Function
       expect(_propsWithDefaults.fn.default).toBeTypeOf('function');
       expect(isClass((_propsWithDefaults.fn.default as () => any)())).toBe(
diff --git a/src/index.ts b/src/index.ts
index 30cea4b..6d70f93 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,456 +1 @@
-/* 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, toRef } from 'vue';
-
-/** Types */
-/**
- * IVue core reactive instance type with an extended .toRefs() method added.
- */
-export type IVue<T extends AnyClass> = InstanceType<T> & ExtendWithToRefs<T>;
-
-/**
- * Extend with .toRefs() method, so that a reactive class can be converted to a composable definition.
- */
-export interface ExtendWithToRefs<T extends AnyClass> {
-  toRefs: IVueToRefsFn<T>;
-}
-
-/**
- * .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>>;
-
-/**
- * Converts a class properties to a composable .value Refs using ToRef vue type,
- * also knows NOT to convert functions to .value Refs but to leave them as is.
- */
-export type IVueRefs<T = any> = {
-  [K in keyof T]: T[K] extends Function ? T[K] : ToRef<T[K]>;
-};
-
-/**
- * Unwraps the returned Refs of composable method T to a reactive type definition.
- */
-export type UnwrapComposable<T extends (...args: any[]) => any> = {
-  [K in keyof ReturnType<T>]: UnwrapRef<ReturnType<T>>[K] extends Function
-    ? UnwrapRef<ReturnType<T>>[K] // Handle function
-    : UnwrapRef<ReturnType<T>>[K] extends Ref
-    ? UnwrapRef<ReturnType<T>>[K]['value']
-    : UnwrapRef<ReturnType<T>>[K]; // Handle property
-};
-
-/**
- * Extracts object defined emit types by converting them to a plain interface
- */
-export type ExtractEmitTypes<T extends Record<string, any>> =
-  UnionToIntersection<
-    RecordToUnion<{
-      [K in keyof T]: (evt: K, ...args: Parameters<T[K]>) => void;
-    }>
-  >;
-
-/**
- * Extract properties as all assigned properties because they have defaults.
- */
-export type ExtractPropDefaultTypes<O> = {
-  [K in keyof O]: ValueOf<ExtractPropTypes<O>, K>;
-};
-
-/**
- * Extend slots interface T with prefixed 'before--' & 'after--' slots to create fully extensible flexible slots.
- */
-export type ExtendSlots<T> = PrefixKeys<T, 'before--'> &
-  T &
-  PrefixKeys<T, 'after--'>;
-
-/** Helper Types. */
-export type AnyClass = abstract new (...args: any[]) => any;
-
-/**
- * Descriptors map.
- */
-export type Descriptors = Map<string, PropertyDescriptor>;
-
-/**
- * Computeds hash map.
- */
-export type Computeds = Record<string, ComputedRef>;
-
-/**
- * Infer paramaters of a constructor function of a Class.
- */
-export type InferredArgs<T> = T extends { new (...args: infer P): any }
-  ? P
-  : never[];
-
-/**
- * Prefix keys of an interface T with a prefix P.
- */
-export type PrefixKeys<T, P extends string | undefined = undefined> = {
-  [K in Extract<keyof T, string> as P extends string ? `${P}${K}` : K]: T[K];
-};
-
-/**
- * Get Interface's property's function arguments Parmeters<F> parameter by key K
- */
-export type IFnParameter<
-  T extends Record<any, any>,
-  P extends keyof T,
-  K extends number
-> = FnParameter<ValueOf<T, P>, K>;
-
-/**
- * Get function arguments Parmeters<F> parameter by key K
- */
-export type FnParameter<
-  F extends (...args: any[]) => any,
-  K extends number
-> = Parameters<F>[K];
-
-/**
- * Convert Union Type to Intersection Type.
- */
-export type UnionToIntersection<U> = (
-  U extends any ? (k: U) => void : never
-) extends (k: infer I) => void
-  ? I
-  : never;
-
-/**
- * Convert Record to Union Type.
- */
-export type RecordToUnion<T extends Record<string, any>> = T[keyof T];
-
-/**
- * Gets object T property by key [K].
- */
-export type ValueOf<T extends Record<any, any>, K> = T[K];
-/** Types End. */
-
-/**
- * Store all descriptors for each class prototype processed by
- * @see {getAllClassDescriptors}
- */
-export const descriptorsMap = new Map();
-
-/**
- * Get descriptors of an entire class prototype chain as a Map.
- * Completely emulates JavaScript class inheritance chain for getters and setters.
- *
- * @param className
- * @return {Descriptors}
- */
-export function getAllClassDescriptors(className: AnyClass): Descriptors {
-  /* Retrieve descriptors from cache */
-  if (descriptorsMap.has(className)) {
-    return descriptorsMap.get(className);
-  }
-
-  const savedDescriptors: Descriptors = new Map();
-
-  let prototype = className.prototype;
-  while (prototype.constructor !== Object) {
-    Object.entries(Object.getOwnPropertyDescriptors(prototype)).forEach(
-      ([propertyName, currentDescriptor]) => {
-        const savedDescriptor = savedDescriptors.get(propertyName);
-        /** Emulate inheritance chain of getters and setters. */
-        if (
-          savedDescriptor !== currentDescriptor &&
-          (currentDescriptor?.get || currentDescriptor?.set)
-        ) {
-          /** Overwrite descriptors if they were already set. */
-          if (savedDescriptor?.get)
-            currentDescriptor.get = savedDescriptor?.get;
-          if (savedDescriptor?.set)
-            currentDescriptor.set = savedDescriptor?.set;
-
-          /** Store descriptors. */
-          savedDescriptors.set(propertyName, currentDescriptor);
-        }
-      }
-    );
-    /** Walk up the prototype chain. */
-    prototype = Object.getPrototypeOf(prototype);
-  }
-
-  /** Save descriptors in the descriptors map for each class. */
-  descriptorsMap.set(className, savedDescriptors);
-
-  return savedDescriptors;
-}
-
-/**
- * Infinite Vue (ivue) class reactive initializer.
- *
- * Converts class instance to a reactive object,
- * where descriptors are converted to computeds.
- *
- * You can turn off computed behaviour by adding static
- * ivue object and setting the getter props to false.
- * class ClassName {
- *    static ivue = {
- *      getter: false
- *    }
- *    // .getter -> will be a standard JS non-computed getter
- *    get getter () { return 'hello world'; }
- * }
- *
- * @param className Any Class
- * @param args Class constructor arguments that you would pass to a `new AnyClass(args...)`
- * @returns {IVue<T>}
- */
-export function ivue<T extends AnyClass>(
-  className: T,
-  ...args: InferredArgs<T>
-): IVue<T> {
-  const descriptors: Descriptors = getAllClassDescriptors(className);
-  const computeds: Computeds | any = descriptors?.size ? {} : null;
-
-  // @ts-expect-error Abstract class initialization
-  const vue = reactive(new className(...args));
-
-  /** Setup descriptors as computeds. */
-  for (const [prop, descriptor] of descriptors) {
-    /* If prop exists on static getter className.ivue[prop]
-     * We do not convert it to computed. Because sometimes
-     * we want a normal getter. */
-    if ((className as any)?.ivue?.[prop] === false) continue;
-    /** Convert descriptor to computed. */
-    Object.defineProperty(vue, prop, {
-      get: descriptor.get
-        ? () =>
-            prop in computeds
-              ? /** Get the existing computed, because we are in reactive scope, .value will auto unwrap itself. */
-                computeds[prop]
-              : /** Create the computed and return it, because we are in reactive scope, .value will auto unwrap itself. */
-                (computeds[prop] = computed({
-                  get: descriptor.get?.bind(vue) as any,
-                  set: descriptor.set?.bind(vue),
-                } as any))
-        : undefined,
-      set: descriptor.set?.bind(vue),
-      enumerable: false,
-    });
-  }
-
-  Object.defineProperty(vue, 'toRefs', {
-    get: () => ivueToRefs(vue, descriptors as Descriptors, computeds),
-    enumerable: false,
-  });
-
-  /** Run ivue .init() initializer method, if it exists in the class. */
-  if ('init' in vue) vue.init();
-
-  return vue;
-}
-
-/**
- * Store all props for each class prototype processed by:
- * @see {getAllClassProperties}
- */
-export const propsMap: Map<object, Set<string> | any> = new Map();
-
-/**
- * Get properties of an entire class prototype chain as a Map.
- */
-export function getAllClassProperties(obj: object): Set<string> {
-  /* Retrieve props from cache */
-  if (propsMap.has(obj.constructor)) {
-    return propsMap.get(obj.constructor);
-  }
-
-  const originalConstructor = obj.constructor;
-
-  const allProps: Set<string> = new Set();
-  do {
-    Object.getOwnPropertyNames(obj).forEach((prop) => {
-      /* 'caller', 'callee', 'arguments', 'constructor' are
-       * special object properties, so should be skipped. */
-      if (!['caller', 'callee', 'arguments', 'constructor'].includes(prop)) {
-        allProps.add(prop);
-      }
-    });
-    obj = Object.getPrototypeOf(obj);
-  } while (obj.constructor !== Object);
-
-  /** Save props in the props map. */
-  propsMap.set(originalConstructor, allProps);
-
-  return allProps;
-}
-
-/**
- * Convert reactive ivue class to Vue 3 refs.
- *
- * @param vue @see IVue
- * @param descriptors @see Descriptors
- * @param computeds @see Computeds
- * @returns {ExtendWithToRefs<T>['toRefs']}
- */
-export function ivueToRefs<T extends AnyClass>(
-  vue: IVue<T>,
-  descriptors: Descriptors,
-  computeds: Computeds
-): ExtendWithToRefs<T>['toRefs'] {
-  return function (
-    props?: (keyof InstanceType<T>)[]
-  ): IVueRefs<InstanceType<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) {
-      for (let i = 0; i < props.length; i++) {
-        const prop = props[i] as any;
-        /** Handle descriptors. */
-        if (descriptors.has(prop)) {
-          if (prop in computeds) {
-            /** Return vue computed with .value from computeds store. */
-            result[prop] = computeds[prop];
-          } else {
-            /** Initialize & store vue computed. */
-            const descriptor = descriptors.get(prop);
-            result[prop] = computeds[prop] = computed({
-              get: descriptor?.get?.bind(vue) as any,
-              set: descriptor?.set?.bind(vue),
-            } as any);
-          }
-        } else {
-          /** Handle methods. */
-          if (typeof vue[prop] === 'function') {
-            /** Bind method to vue, makes method destructuring point to right instance. */
-            result[prop] = vue[prop].bind(vue);
-          } else {
-            /** Convert simple reactive prop to a Ref. */
-            result[prop] = toRef(vue, prop);
-          }
-        }
-      }
-    } else {
-      /** Convert all props to refs and leave functions as is. */
-      let allProps: null | Set<string> = new Set(getAllClassProperties(vue));
-
-      /** Convert descriptors (non enumerable by default in JS). */
-      descriptors.forEach((descriptor, prop) => {
-        if (prop in computeds) {
-          /** Return vue computed with .value from computeds store. */
-          result[prop] = computeds[prop];
-        } else {
-          /** Initialize vue computed ref & store it in result. */
-          result[prop] = computeds[prop] = computed({
-            get: descriptor.get?.bind(vue) as any,
-            set: descriptor.set?.bind(vue),
-          } as any);
-        }
-        /** Delete descriptor from props as it was already processed. */
-        allProps?.delete(prop as string);
-      });
-
-      allProps.forEach((prop) => {
-        if (typeof vue[prop] === 'function') {
-          /** Bind method to vue, makes method destructuring point to right instance. */
-          result[prop] = vue[prop].bind(vue);
-        } else {
-          /** Convert simple reactive prop to a Ref. */
-          result[prop] = toRef(vue, prop);
-        }
-        /** Delete prop from props as it was already processed. */
-        allProps?.delete(prop as string);
-      });
-
-      /** Memory optimization. */
-      allProps = null;
-    }
-
-    return result as IVueRefs<InstanceType<T>>;
-  };
-}
-
-/**
- * Vue props interface in defineComponent() style.
- */
-export type VuePropsObject = Record<
-  string,
-  { type: any; default?: any; required?: boolean }
->;
-
-/**
- * Vue Props with default properties declared as existing and having values.
- */
-export type VuePropsWithDefaults<T extends VuePropsObject> = {
-  [K in keyof T]: {
-    type: T[K]['type'];
-    default: T[K]['default'];
-    required?: boolean;
-  };
-};
-
-/**
- * Determines if the value is a JavaScript Class.
- * Note that class is a class function in JavaScript.
- *
- * @param val Any value
- * @returns boolean If it's a JavaScript Class returns true
- */
-export function isClass(val: any): boolean {
-  if (typeof val !== 'function') return false; // Not a function, so not a class function either
-
-  if (!val.prototype) return false; // Arrow function, so not a class
-
-  // Finally -> distinguish between a normal function and a class function
-  if (Object.getOwnPropertyDescriptor(val, 'prototype')?.writable) {
-    // Has writable prototype
-    return false; // Normal function
-  } else {
-    return true; // Class -> Not a function
-  }
-}
-
-/**
- * Creates props with defaults in defineComponent() style.
- *
- * Merge defaults regular object with Vue types object
- * declared in defineComponent() style.
- *
- * This is made so that the defaults can be declared "as they are"
- * without requiring objects to be function callbacks returning an object.
- *
- * // You don't need to wrap objects in () => ({ nest: { nest :{} } })
- * // You can just delcare them normally.
- * const defaults = {
- *    nest: {
- *      nest
- *    }
- * }
- *
- * This function will create the Vue expected callbacks for Objects, Arrays & Classes
- * but leave primitive properties and functions intact so that
- * the final object is fully defineComponent() style compatible.
- *
- * @param defaults Regular object of default key -> values
- * @param typedProps Props declared in defineComponent() style with type and possibly required declared, but without default
- * @returns Props declared in defineComponent() style with all properties having default property declared.
- */
-export function propsWithDefaults<T extends VuePropsObject>(
-  defaults: Record<string, any>,
-  typedProps: T
-): VuePropsWithDefaults<T> {
-  for (const prop in typedProps) {
-    if (typeof defaults?.[prop] === 'object' && defaults?.[prop] !== null) {
-      /** Handle Arrays & Objects -> wrap them with an arrow function. */
-      typedProps[prop].default = () => defaults?.[prop];
-    } else {
-      if (isClass(defaults?.[prop])) {
-        /** Handle JavaScript Classes -> wrap them with an arrow function */
-        typedProps[prop].default = () => defaults?.[prop];
-      } else {
-        /** Handle JavaScript Function And All primitive properties -> output directly */
-        typedProps[prop].default = defaults?.[prop];
-      }
-    }
-  }
-  return typedProps as VuePropsWithDefaults<T>;
-}
+export * from './ivue';
diff --git a/src/ivue.ts b/src/ivue.ts
new file mode 100644
index 0000000..fa6eebd
--- /dev/null
+++ b/src/ivue.ts
@@ -0,0 +1,495 @@
+/* eslint-disable @typescript-eslint/ban-types */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type {
+  ComputedRef,
+  ExtractPropTypes,
+  ToRef,
+  UnwrapNestedRefs,
+} from 'vue';
+import { UnwrapRef, computed, reactive, ref, toRef } from 'vue';
+
+/** Types */
+/**
+ * IVue core reactive instance type with an extended .toRefs() method added.
+ */
+export type IVue<T extends AnyClass> = InstanceType<T> & ExtendWithToRefs<T>;
+
+/**
+ * Extend with .toRefs() method, so that a reactive class can be converted to a composable definition.
+ */
+export interface ExtendWithToRefs<T extends AnyClass> {
+  toRefs: IVueToRefsFn<T>;
+}
+
+/**
+ * .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>>;
+
+/**
+ * Converts a class properties to a composable .value Refs using ToRef vue type,
+ * also knows NOT to convert functions to .value Refs but to leave them as is.
+ */
+export type IVueRefs<T = any> = {
+  [K in keyof T]: T[K] extends Function ? T[K] : ToRef<T[K]>;
+};
+
+/**
+ * Unwraps the returned Refs of composable method T to a reactive type definition.
+ */
+export type UseComposableReturn<T extends Object> = {
+  [K in keyof T]: T[K] extends { value: any }
+    ? T[K]['value'] // Handle Ref
+    : T[K]; // Handle property
+};
+
+export type UseComposable<T extends (...args: any[]) => any> =
+  UseComposableReturn<ReturnType<T>>;
+
+/**
+ * Extracts object defined emit types by converting them to a plain interface
+ */
+export type ExtractEmitTypes<T extends Record<string, any>> =
+  UnionToIntersection<
+    RecordToUnion<{
+      [K in keyof T]: (evt: K, ...args: Parameters<T[K]>) => void;
+    }>
+  >;
+
+/**
+ * Extract properties as all assigned properties because they have defaults.
+ */
+export type ExtractPropDefaultTypes<O> = {
+  [K in keyof O]: ValueOf<ExtractPropTypes<O>, K>;
+};
+
+/**
+ * Extend slots interface T with prefixed 'before--' & 'after--' slots to create fully extensible flexible slots.
+ */
+export type ExtendSlots<T> = PrefixKeys<T, 'before--'> &
+  T &
+  PrefixKeys<T, 'after--'>;
+
+/** Helper Types. */
+/**
+ * Any JavaScript class of any type.
+ */
+export type AnyClass = abstract new (...args: any[]) => any;
+
+/**
+ * Descriptors map.
+ */
+export type Descriptors = Map<string, PropertyDescriptor>;
+
+/**
+ * Computeds hash map.
+ */
+export type Computeds = Record<string, ComputedRef>;
+
+/**
+ * Infer paramaters of a constructor function of a Class.
+ */
+export type InferredArgs<T> = T extends { new (...args: infer P): any }
+  ? P
+  : never[];
+
+/**
+ * Prefix keys of an interface T with a prefix P.
+ */
+export type PrefixKeys<T, P extends string | undefined = undefined> = {
+  [K in Extract<keyof T, string> as P extends string ? `${P}${K}` : K]: T[K];
+};
+
+/**
+ * Get Interface's property's function arguments Parmeters<F>
+ */
+export type IFnParameters<
+  T extends Record<any, any>,
+  K extends string
+> = Parameters<Required<Pick<T, K>>[K]>;
+
+/**
+ * Get Interface's [T] property's [P] function arguments Parmeters<F> parameter by key [K]
+ */
+export type IFnParameter<
+  T extends Record<any, any>,
+  P extends keyof T,
+  K extends number
+> = FnParameter<ValueOf<T, P>, K>;
+
+/**
+ * Get function arguments Parmeters<F> parameter by key K
+ */
+export type FnParameter<
+  F extends (...args: any[]) => any,
+  K extends number
+> = Parameters<F>[K];
+
+/**
+ * Convert Union Type to Intersection Type.
+ */
+export type UnionToIntersection<U> = (
+  U extends any ? (k: U) => void : never
+) extends (k: infer I) => void
+  ? I
+  : never;
+
+/**
+ * Convert Record to Union Type.
+ */
+export type RecordToUnion<T extends Record<string, any>> = T[keyof T];
+
+/**
+ * Gets object T property by key [K].
+ */
+export type ValueOf<T extends Record<any, any>, K> = T[K];
+/** Types End. */
+
+/**
+ * Store all descriptors for each class prototype processed by
+ * @see {getAllClassDescriptors}
+ */
+export const descriptorsMap = new Map();
+
+/**
+ * Get descriptors of an entire class prototype chain as a Map.
+ * Completely emulates JavaScript class inheritance chain for getters and setters.
+ *
+ * @param className
+ * @return {Descriptors}
+ */
+export function getAllClassDescriptors(className: AnyClass): Descriptors {
+  /* Retrieve descriptors from cache */
+  if (descriptorsMap.has(className)) {
+    return descriptorsMap.get(className);
+  }
+
+  const savedDescriptors: Descriptors = new Map();
+
+  let prototype = className.prototype;
+  while (prototype.constructor !== Object) {
+    Object.entries(Object.getOwnPropertyDescriptors(prototype)).forEach(
+      ([propertyName, currentDescriptor]) => {
+        const savedDescriptor = savedDescriptors.get(propertyName);
+        /** Emulate inheritance chain of getters and setters. */
+        if (
+          savedDescriptor !== currentDescriptor &&
+          (currentDescriptor?.get || currentDescriptor?.set)
+        ) {
+          /** Overwrite descriptors if they were already set. */
+          if (savedDescriptor?.get)
+            currentDescriptor.get = savedDescriptor?.get;
+          if (savedDescriptor?.set)
+            currentDescriptor.set = savedDescriptor?.set;
+
+          /** Store descriptors. */
+          savedDescriptors.set(propertyName, currentDescriptor);
+        }
+      }
+    );
+    /** Walk up the prototype chain. */
+    prototype = Object.getPrototypeOf(prototype);
+  }
+
+  /** Save descriptors in the descriptors map for each class. */
+  descriptorsMap.set(className, savedDescriptors);
+
+  return savedDescriptors;
+}
+
+/**
+ * Infinite Vue (ivue) class reactive initializer.
+ *
+ * Converts class instance to a reactive object,
+ * where descriptors are converted to computeds.
+ *
+ * You can turn off computed behaviour by adding static
+ * ivue object and setting the getter props to false.
+ * class ClassName {
+ *    static ivue = {
+ *      getter: false
+ *    }
+ *    // .getter -> will be a standard JS non-computed getter
+ *    get getter () { return 'hello world'; }
+ * }
+ *
+ * @param className Any Class
+ * @param args Class constructor arguments that you would pass to a `new AnyClass(args...)`
+ * @returns {IVue<T>}
+ */
+export function ivue<T extends AnyClass>(
+  className: T,
+  ...args: InferredArgs<T>
+): IVue<T> {
+  const descriptors: Descriptors = getAllClassDescriptors(className);
+  const computeds: Computeds | any = descriptors?.size ? {} : null;
+
+  // @ts-expect-error Abstract class initialization
+  const vue = reactive(new className(...args));
+
+  /** Setup descriptors as computeds. */
+  for (const [prop, descriptor] of descriptors) {
+    /* If prop exists on static getter className.ivue[prop]
+     * We do not convert it to computed. Because sometimes
+     * we want a normal getter. */
+    if ((className as any)?.ivue?.[prop] === false) continue;
+    /** Convert descriptor to computed. */
+    Object.defineProperty(vue, prop, {
+      get: descriptor.get
+        ? () =>
+            prop in computeds
+              ? /** Get the existing computed, because we are in reactive scope, .value will auto unwrap itself. */
+                computeds[prop]
+              : /** Create the computed and return it, because we are in reactive scope, .value will auto unwrap itself. */
+                (computeds[prop] = computed({
+                  get: descriptor.get?.bind(vue) as any,
+                  set: descriptor.set?.bind(vue),
+                } as any))
+        : undefined,
+      set: descriptor.set?.bind(vue),
+      enumerable: false,
+    });
+  }
+
+  Object.defineProperty(vue, 'toRefs', {
+    get: () => ivueToRefs(vue, descriptors as Descriptors, computeds),
+    enumerable: false,
+  });
+
+  /** Run ivue .init() initializer method, if it exists in the class. */
+  if ('init' in vue) vue.init();
+
+  return vue;
+}
+
+/**
+ * Store all props for each class prototype processed by:
+ * @see {getAllClassProperties}
+ */
+export const propsMap: Map<object, Set<string> | any> = new Map();
+
+/**
+ * Get properties of an entire class prototype chain as a Map.
+ */
+export function getAllClassProperties(obj: object): Set<string> {
+  /* Retrieve props from cache */
+  if (propsMap.has(obj.constructor)) {
+    return propsMap.get(obj.constructor);
+  }
+
+  const originalConstructor = obj.constructor;
+
+  const allProps: Set<string> = new Set();
+  do {
+    Object.getOwnPropertyNames(obj).forEach((prop) => {
+      /* 'caller', 'callee', 'arguments', 'constructor' are
+       * special object properties, so should be skipped. */
+      if (!['caller', 'callee', 'arguments', 'constructor'].includes(prop)) {
+        allProps.add(prop);
+      }
+    });
+    obj = Object.getPrototypeOf(obj);
+  } while (obj.constructor !== Object);
+
+  /** Save props in the props map. */
+  propsMap.set(originalConstructor, allProps);
+
+  return allProps;
+}
+
+/**
+ * `iref` is an unwrapped type alias for Vue ref() function.
+ * `iref` does not alter the behavior of ref(), but simply
+ * transforms the type to an unwrapped ref value.
+ * @param val
+ * @returns
+ */
+export function iref<T>(val?: T): UnwrapRef<T> {
+  return ref(val) as unknown as UnwrapRef<T>;
+}
+
+/**
+ * `iuse` stands for composable.
+ * Returns unwrapped composable type definition without the Refs.
+ */
+export function iuse<T extends Object>(
+  val?: T
+): UseComposableReturn<UnwrapNestedRefs<T>> {
+  return val as unknown as UseComposableReturn<UnwrapNestedRefs<T>>;
+}
+
+/**
+ * Convert reactive ivue class to Vue 3 refs.
+ *
+ * @param vue @see IVue
+ * @param descriptors @see Descriptors
+ * @param computeds @see Computeds
+ * @returns {ExtendWithToRefs<T>['toRefs']}
+ */
+export function ivueToRefs<T extends AnyClass>(
+  vue: IVue<T>,
+  descriptors: Descriptors,
+  computeds: Computeds
+): ExtendWithToRefs<T>['toRefs'] {
+  return function (
+    props?: (keyof InstanceType<T>)[]
+  ): IVueRefs<InstanceType<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) {
+      for (let i = 0; i < props.length; i++) {
+        const prop = props[i] as any;
+        /** Handle descriptors. */
+        if (descriptors.has(prop)) {
+          if (prop in computeds) {
+            /** Return vue computed with .value from computeds store. */
+            result[prop] = computeds[prop];
+          } else {
+            /** Initialize & store vue computed. */
+            const descriptor = descriptors.get(prop);
+            result[prop] = computeds[prop] = computed({
+              get: descriptor?.get?.bind(vue) as any,
+              set: descriptor?.set?.bind(vue),
+            } as any);
+          }
+        } else {
+          /** Handle methods. */
+          if (typeof vue[prop] === 'function') {
+            /** Bind method to vue, makes method destructuring point to right instance. */
+            result[prop] = vue[prop].bind(vue);
+          } else {
+            /** Convert simple reactive prop to a Ref. */
+            result[prop] = toRef(vue, prop);
+          }
+        }
+      }
+    } else {
+      /** Convert all props to refs and leave functions as is. */
+      let allProps: null | Set<string> = new Set(getAllClassProperties(vue));
+
+      /** Convert descriptors (non enumerable by default in JS). */
+      descriptors.forEach((descriptor, prop) => {
+        if (prop in computeds) {
+          /** Return vue computed with .value from computeds store. */
+          result[prop] = computeds[prop];
+        } else {
+          /** Initialize vue computed ref & store it in result. */
+          result[prop] = computeds[prop] = computed({
+            get: descriptor.get?.bind(vue) as any,
+            set: descriptor.set?.bind(vue),
+          } as any);
+        }
+        /** Delete descriptor from props as it was already processed. */
+        allProps?.delete(prop as string);
+      });
+
+      allProps.forEach((prop) => {
+        if (typeof vue[prop] === 'function') {
+          /** Bind method to vue, makes method destructuring point to right instance. */
+          result[prop] = vue[prop].bind(vue);
+        } else {
+          /** Convert simple reactive prop to a Ref. */
+          result[prop] = toRef(vue, prop);
+        }
+      });
+
+      /** Memory optimization. */
+      allProps = null;
+    }
+
+    return result as IVueRefs<InstanceType<T>>;
+  };
+}
+
+/**
+ * Vue props interface in defineComponent() style.
+ */
+export type VuePropsObject = Record<
+  string,
+  { type: any; default?: any; required?: boolean }
+>;
+
+/**
+ * Vue Props with default properties declared as existing and having values.
+ */
+export type VuePropsWithDefaults<T extends VuePropsObject> = {
+  [K in keyof T]: {
+    type: T[K]['type'];
+    default: T[K]['default'];
+    required?: boolean;
+  };
+};
+
+/**
+ * Determines if the value is a JavaScript Class.
+ * Note that class is a class function in JavaScript.
+ *
+ * @param val Any value
+ * @returns boolean If it's a JavaScript Class returns true
+ */
+export function isClass(val: any): boolean {
+  if (typeof val !== 'function') return false; // Not a function, so not a class function either
+
+  if (!val.prototype) return false; // Arrow function, so not a class
+
+  // Finally -> distinguish between a normal function and a class function
+  if (Object.getOwnPropertyDescriptor(val, 'prototype')?.writable) {
+    // Has writable prototype
+    return false; // Normal function
+  } else {
+    return true; // Class -> Not a function
+  }
+}
+
+/**
+ * Creates props with defaults in defineComponent() style.
+ *
+ * Merge defaults regular object with Vue types object
+ * declared in defineComponent() style.
+ *
+ * This is made so that the defaults can be declared "as they are"
+ * without requiring objects to be function callbacks returning an object.
+ *
+ * // You don't need to wrap objects in () => ({ nest: { nest :{} } })
+ * // You can just delcare them normally.
+ * const defaults = {
+ *    nest: {
+ *      nest
+ *    }
+ * }
+ *
+ * This function will create the Vue expected callbacks for Objects, Arrays & Classes
+ * but leave primitive properties and functions intact so that
+ * the final object is fully defineComponent() style compatible.
+ *
+ * @param defaults Regular object of default key -> values
+ * @param typedProps Props declared in defineComponent() style with type and possibly required declared, but without default
+ * @returns Props declared in defineComponent() style with all properties having default property declared.
+ */
+export function propsWithDefaults<T extends VuePropsObject>(
+  defaults: Record<string, any>,
+  typedProps: T
+): VuePropsWithDefaults<T> {
+  for (const prop in typedProps) {
+    if (typeof defaults?.[prop] === 'object' && defaults?.[prop] !== null) {
+      /** Handle Arrays & Objects -> wrap them with an arrow function. */
+      typedProps[prop].default = () => defaults?.[prop];
+    } else {
+      if (isClass(defaults?.[prop])) {
+        /** Handle JavaScript Classes -> wrap them with an arrow function */
+        typedProps[prop].default = () => defaults?.[prop];
+      } else {
+        /** Handle JavaScript Function And All primitive properties -> output directly */
+        typedProps[prop].default = defaults?.[prop];
+      }
+    }
+  }
+  return typedProps as VuePropsWithDefaults<T>;
+}
+
+/** Necessary ivue.ts to be treated as a module. */
+export {};