made compatible with vue-use via vue-demi, made UseComposable recursi…

…ve to resolve all nested refs down to the raw value, made documentation improvements

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

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

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);

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++;
   }

docs/docs/components/usage/CounterComposables.vue

@@ -1,19 +1,27 @@
 <script setup lang="ts">
-import { useMouse } from '@vueuse/core';
-import { ivue, iref, iuse } from '../../../../src/ivue';
+import { useMouse, usePointer } from '@vueuse/core';
+import { ivue, iref, iuse } from 'ivue';
 
 class Counter {
   count = iref(0);
   increment() {
     this.count++;
   }
   mouse = iuse(useMouse());
+  pointer = iuse(usePointer());
 }
 
 const counter = ivue(Counter);
 </script>
 <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>

docs/docs/components/usage/CounterComposablesDestructuring.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { ref } from 'vue';
-import { useMouse } from './functions/useMouse';
-import { ivue, type UseComposable } from '@/ivue';
+import { useCustomMouse } from './functions/useCustomMouse';
+
+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 = ref(0) as unknown as number;
+  count = iref(0);
 
   increment() {
     this.count++;
@@ -29,7 +29,7 @@ class Counter {
       y: this.y,
       sum: this.sum,
       total: this.total
-    } = useMouse() as unknown as UseMouse);
+    } = iuse(useCustomMouse()));
   }
 }
 
@@ -38,7 +38,7 @@ const counter = ivue(Counter);
 <template>
   <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 />

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++;
   }

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++;
   }

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++;
   }

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++;
   }

docs/docs/components/usage/CounterExternalRefs.vue

@@ -1,20 +1,20 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import { ivue } from 'ivue';
+import { ivue, iref, iuse } 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);
   }
 }
 
-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>

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++;
   }

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>

docs/docs/components/usage/CounterLifecycleHooks.vue

@@ -1,14 +1,14 @@
 <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() {
     onMounted(() => {
       this.count = 100;
     });
   }
-  count = ref(0) as unknown as number;
+  count = iref(0);
   increment() {
     this.count++;
   }

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++;
   }

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++;
   }

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,15 +16,15 @@ 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);
   }
 }
 
 /**
- * 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);

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

@@ -0,0 +1,26 @@
+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 total2 = computed(() => {
+    return _sum; // Returning with .value
+  });
+
+  const total = computed(() => {
+    return total2; // Returning with .value
+  });
+
+  return {
+    x,
+    y,
+    sum,
+    total,
+  };
+}