ivue 1.0.4 → 1.1.1

package/docs/docs/components/Component.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ivue } from "../../../src/index";
+import { ivue } from "../../../src/ivue";
 import { VueDd } from "vue-dd";
 import { ref } from 'vue';
 

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

@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import { ref } from 'vue';
-import { ivue } from 'ivue';
+import { ivue, iref } from 'ivue';
 
 class Counter {
-  count = ref(0) as unknown as number;
+  count = iref(0);
   increment() {
     this.count++;
   }

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useMouse } from '@vueuse/core';
-import { ivue, iref, iuse } from '../../../../src/index';
+import { ivue, iref, iuse } from 'ivue';
 
 class Counter {
   count = iref(0);

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

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { ref } from 'vue';
 import { useMouse } from './functions/useMouse';
-import { ivue, type UseComposable } from '@/ivue';
+import { ivue, iuse, iref, type UseComposable } from '../../../../src/ivue';
 
 /**
  * Use the ivue Utility Type: UseComposable<typeof YourComposableFunctionName>
@@ -10,7 +9,7 @@ import { ivue, type UseComposable } from '@/ivue';
 type UseMouse = UseComposable<typeof useMouse>;
 
 class Counter {
-  count = ref(0) as unknown as number;
+  count = iref(0);
 
   increment() {
     this.count++;
@@ -29,7 +28,7 @@ class Counter {
       y: this.y,
       sum: this.sum,
       total: this.total
-    } = useMouse() as unknown as UseMouse);
+    } = iuse(useMouse()));
   }
 }
 

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

@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import { ref } from 'vue';
-import { ivue } from 'ivue';
+import { ivue, iref } from 'ivue';
 
 class Counter {
-  count = ref(0) as unknown as number;
+  count = iref(0);
   increment() {
     this.count++;
   }

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

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue';
-import { ivue } from 'ivue';
+import { ivue, iref } from 'ivue';
 
 class Counter {
   /**
@@ -10,7 +9,7 @@ class Counter {
   static ivue = {
     doubleCount: false // doubleCount is a regular getter now
   }
-  count = ref(0) as unknown as number;
+  count = iref(0);
   increment() {
     this.count++;
   }

package/docs/docs/components/usage/CounterDefineExposeAdvanced.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { ivue } from 'ivue';
-import { ref } from 'vue';
+import { ivue, iref } from 'ivue';
 
 /** 
  * See that only 'count', 'increment' properties are picked 
@@ -9,7 +8,7 @@ import { ref } from 'vue';
 export type CounterExposed = Pick<Counter, 'count' | 'increment'>;
 
 class Counter {
-  count = ref(0) as unknown as number;
+  count = iref(0);
   increment() {
     this.count++;
   }

package/docs/docs/components/usage/CounterDefineExposeClass.ts

@@ -1,7 +1,7 @@
-import { ref } from 'vue';
+import { iref } from 'ivue';
 
 export default class Counter {
-  count = ref(0) as unknown as number;
+  count = iref(0);
   increment() {
     this.count++;
   }

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

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import { ivue } from 'ivue';
+import { ivue, iref } from 'ivue';
 
 type SpanRef = HTMLElement | null;
 
 class Counter {
   constructor(public span: SpanRef) {}
-  count = ref(0) as unknown as number;
+  count = iref(0);
   increment() {
     this.count++;
     (this.span as HTMLElement).innerHTML = String(this.count + 1);

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

@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import { ref } from 'vue';
-import { ivue } from 'ivue';
+import { ivue, iref } from 'ivue';
 
 class Counter {
-  count = ref(0) as unknown as number;
+  count = iref(0);
   increment() {
     this.count++;
   }

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

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { ref } from 'vue';
-import { ivue } from 'ivue';
+import { ivue, iref } from 'ivue';
 
 class Counter {
-  count = ref(0) as unknown as number;
-  span = ref(null) as unknown as HTMLElement | null;
+  count = iref(0);
+  span = iref<HTMLElement | null>(null);
   increment() {
     this.count++;
     (this.span as HTMLElement).innerHTML = String(this.count + 1);
@@ -17,7 +16,7 @@ const { span } = counter.toRefs(['span']);
  * Or you can use `const { span } = counter.toRefs();`
  * but `const { span } = counter.toRefs(['span']);` is more performant
  * because we are only looping through 1 property instead of all of them.
- */ 
+ */
 </script>
 <template>
   <a href="javascript:void(0)" @click="() => counter.increment()">Increment</a>

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
-import { ivue } from 'ivue';
+import { onMounted } from 'vue';
+import { ivue, iref } from 'ivue';
 
 class Counter {
   init() {
@@ -8,7 +8,7 @@ class Counter {
       this.count = 100;
     });
   }
-  count = ref(0) as unknown as number;
+  count = iref(0);
   increment() {
     this.count++;
   }

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

@@ -1,17 +1,20 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue';
-import { ivue } from 'ivue';
+import { watch } from 'vue';
+import { ivue, iref } from 'ivue';
 
 class Counter {
   init() {
     /** Note that we use this.count as a reactive prop in the watch() function */
-    watch(() => this.count, (newCount) => {
-      if (newCount === 5) {
-        alert('You already clicked 5 times!');
+    watch(
+      () => this.count,
+      (newCount) => {
+        if (newCount === 5) {
+          alert('You already clicked 5 times!');
+        }
       }
-    });
+    );
   }
-  count = ref(0) as unknown as number;
+  count = iref(0);
   increment() {
     this.count++;
   }

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

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue';
-import { ivue } from 'ivue';
+import { ivue, iref } from 'ivue';
 
 interface CounterProps {
   initialCount: number;
@@ -11,7 +10,7 @@ class Counter {
   constructor(public props: CounterProps) {
     this.count = this.props.initialCount;
   }
-  count = ref(0) as unknown as number;
+  count = iref(0);
   increment() {
     this.count++;
   }

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

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue';
-import { ivue } from 'ivue';
+import { ivue, iref } from 'ivue';
 
 interface CounterProps {
   initialCount: number;
@@ -17,7 +16,7 @@ class Counter {
   constructor(public props: CounterProps, public emit: CounterEmits) {
     this.count = this.props.initialCount;
   }
-  count = ref(0) as unknown as number;
+  count = iref(0);
   increment() {
     this.count++;
     this.emit('increment', this.count);
@@ -25,7 +24,7 @@ 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, emit);

package/docs/docs/pages/api.md

@@ -26,6 +26,14 @@ Core `ivue(className, ...args)` initializer is able to infer and validate the co
 
 **Returns:** `<IVue<T>>` or `ivue` `reactive()` object of an `AnyClass` class with flattened (de-Refed) `Refs` and `ComputedRefs` as properties.
 
+### 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()
+
+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()
 
 ---
@@ -34,11 +42,11 @@ Core `ivue(className, ...args)` initializer is able to infer and validate the co
 `init()` has access to the reactive state of the object via `this`.
 
 :::warning NOTICE
-`.init()` method shoud not have any parameters. You should never need to run this method manually.
+`.init()` method has no arguments and you should never need to run this method manually.
 :::
 
 :::tip NEED ASYNC/AWAIT?
-You can make `init()` method `async` if you need `await` functionality.
+Use `async init()` if you need `await` functionality.
 :::
 
 **Returns:** `void | Promise<void>`

package/docs/docs/pages/browse-code.md

@@ -2,7 +2,7 @@
 aside: false
 ---
 # Source code
-Or [Browse the source code on GitHub](https://github.com/infinite-system/ivue/blob/main/src/index.ts)
+Or [Browse the source code on GitHub](https://github.com/infinite-system/ivue/blob/main/src/ivue.ts)
 
 ## Install by Copying
 
@@ -14,5 +14,5 @@ This installation path is recommended only if you quickly want to tinker with th
 :::
 
 :::code-group
-<<< ../../../src/index.ts{ts:line-numbers} [ivue.ts]
+<<< ../../../src/ivue.ts{ts:line-numbers} [ivue.ts]
 :::

package/docs/docs/pages/getting-started.md

@@ -23,9 +23,9 @@ pnpm i ivue
 :::details Click to expand the latest `ivue` source code to copy
 
 :::code-group
-<<< ../../../src/index.ts{ts:line-numbers} [ivue.ts]
+<<< ../../../src/ivue.ts{ts:line-numbers} [ivue.ts]
 :::
-Or [Copy from GitHub](https://github.com/infinite-system/ivue/blob/main/src/index.ts)
+Or [Copy from GitHub](https://github.com/infinite-system/ivue/blob/main/src/ivue.ts)
 
 ::: tip NOTE
 This installation path is recommended only if you quickly want to tinker with the internals of ivue, as you won't be getting the latest updates. Also note that this code comes from github `main` branch latest which might also be in beta and not fully published to `npm`.

package/docs/docs/pages/guidelines.md

@@ -15,8 +15,11 @@ class Counter {
   /** ✅ Properly declared unwrapped composable. */
   mouse: UseMouse;
 
+  /** ✅ Properly declared DOM Ref. */
+  spanElementRef = iref<HTMLElement | null>(null); // ✅ Custom declared type of HTMLElement or null
+
   constructor(public props: CounterProps, public emit: CounterEmit) {
-    this.mouse = useMouse() as unknown as UseMouse // ✅ Properly declared unwrapped composable.
+    this.mouse = iuse(useMouse()); // ✅ Properly declared auto-unwrapped composable.
   }
 
   /** ✅ Properly declared init function. */
@@ -34,16 +37,16 @@ class Counter {
     })
   }
   /**
-   * Use ref() for the property and cast it to number
+   * Use iref() for the property to be auto cast to number
    * because refs auto-unwrap inside reactive().
    */
-  count = ref(0) as unknown as number; // ✅
+  count = iref(0); // ✅ inferred type -> number
 
   /**
-   * Use ref() for the property and cast it to number
+   * Use iref() for the property to be auto cast to number
    * because refs auto-unwrap inside reactive().
    */
-  timesClicked = ref(0) as unknown as number; // ✅
+  timesClicked = iref(0); // ✅ inferred type -> number
 
   /** ✅ Properly declared function (not arrow function). */
   increment() {
@@ -66,6 +69,8 @@ class Counter {
     return this.count * 2;
   }
 }
+
+const counter = ivue(Counter, props, emit);
 ```
 
 ### Use ref() for properties

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

@@ -47,9 +47,9 @@ Utility Types help to achieve the rest of `ivue` capabilities
 
 :::details Click to see the whole latest `ivue` source code from github main branch below:
 :::code-group
-<<< ../../../src/index.ts{ts:line-numbers} [ivue.ts]
+<<< ../../../src/ivue.ts{ts:line-numbers} [ivue.ts]
 :::
-Or [See on GitHub](https://github.com/infinite-system/ivue/blob/main/src/index.ts)
+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.

package/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",
@@ -18,7 +18,7 @@
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-vue": "^9.14.1",
     "execa": "^8.0.0",
-    "ivue": "^1.0.3",
+    "ivue": "^1.1.0",
     "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.0.4",
+  "version": "1.1.1",
   "description": "Infinite Vue – Class Based Architecture for Vue 3",
   "type": "module",
   "exports": {

package/src/ivue.ts

@@ -40,9 +40,11 @@ export type IVueRefs<T = any> = {
  * 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
+  [K in keyof T]: T[K] extends { value: any } // Handle Ref
+    ? T[K]['value'] extends { value: any } // Handle Double Wrapped Ref: Most often a Ref that is inside a Computed Ref
+      ? T[K]['value']['value'] // Return doubly wrapped internal value
+      : T[K]['value'] // Handle Standard Ref or Computed Ref
+    : T[K]; // Handle non Ref property or method
 };
 
 export type UseComposable<T extends (...args: any[]) => any> =