docs and comments improvements

README.md

@@ -21,12 +21,13 @@
 &ndash;&nbsp; Simple like Options API<br />
 &ndash;&nbsp; Flexible like Composition API<br />
 &ndash;&nbsp; Extensible like TypeScript Class API<br />
-&ndash;&nbsp; Feature Complete, Minimal, Opaque & Elegant Architecture<br />
-&ndash;&nbsp; 100% TypeScript Support<br />
+&ndash;&nbsp; Robust, Minimal, Opaque & Unobtrusive<br />
 &ndash;&nbsp; 100% Vue 3 Compatible<br />
 &ndash;&nbsp; 100% Test Covered<br />
+&ndash;&nbsp; 100% Type Safe<br />
 &ndash;&nbsp; Production Ready<br />
 &ndash;&nbsp; Just <code>1.1kb</code> gzipped!<br />
+&ndash;&nbsp; 100% VSCode / Intellij IDE Auto-complete Intellisence<br />
 
 
 

docs/docs/.vitepress/config.ts

@@ -46,6 +46,14 @@ export default defineConfig({
             text: 'Using Lifecycle Hooks',
             link: '/pages/usage#using-lifecycle-hooks',
           },
+          {
+            text: 'Using Pinia Store',
+            link: '/pages/usage#using-pinia-store',
+          },
+          {
+            text: 'Using Quasar Framework',
+            link: '/pages/usage#using-quasar-framework',
+          },
         ],
       },
 
@@ -126,13 +134,11 @@ export default defineConfig({
           { text: 'UseComposable', link: '/pages/api#UseComposable' },
         ],
       },
-      
+
       {
         collapsed: false,
         text: 'Source Code',
-        items: [
-          { text: 'Browse Code', link: '/pages/browse-code' },
-        ],
+        items: [{ text: 'Browse Code', link: '/pages/browse-code' }],
       },
     ],
   },

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

@@ -5,7 +5,7 @@
 }
 
 .VPNavBarTitle a span {
-  font-size: 22px !important;
+  font-size: 24px !important;
 }
 
 body {

docs/docs/components/usage/CounterComposablesIvueDestructuring.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { CustomMouse } from './classes/CustomMouse';
+
+import { ivue, iref, iuse } from 'ivue';
+
+class Counter {
+  count = iref(0);
+
+  increment() {
+    this.count++;
+  }
+
+  // x, y are Refs that will be unwrapped and destructured into this class
+  x: CustomMouse['x']; // Unwrapped Ref<number> becomes -> number
+  y: CustomMouse['y']; // Unwrapped Ref<number> becomes -> number
+  total: CustomMouse['total']; // Unwrapped Ref<number> becomes -> number
+
+  constructor() {
+    ({
+      x: this.x,
+      y: this.y,
+      total: this.total,
+    } = iuse(CustomMouse, 5));
+  }
+}
+
+const counter = ivue(Counter);
+</script>
+<template>
+  <a href="javascript:void(0)" @click="() => counter.increment()">Increment</a>
+  Count: {{ counter.count }} <br />
+  Mouse X: {{ counter.x }}, Y: {{ counter.y }}
+  <br />
+  Total (computed): {{ counter.total }}
+  <br />
+</template>

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

@@ -0,0 +1,18 @@
+import { useMouse } from '@vueuse/core';
+import { iuse,  type UseComposable } from 'ivue';
+
+type UseMouse = UseComposable<typeof useMouse>
+
+export class CustomMouse {
+
+  x: UseMouse['x'];
+  y: UseMouse['y'];
+
+  constructor(public test: number) {
+    ({ x: this.x, y: this.y } = iuse(useMouse()))
+  }
+
+  get total() {
+    return this.x + this.y;
+  }
+}

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

@@ -3,18 +3,23 @@ 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(() => {
+    // Returning without .value, not entirely correctly, but will still work in Vue template.
+    // This is to test the impressive IVue unwrapping capabilities of deeply nested and confusing Refs
+    return _sum;
   });
 
   const total = computed(() => {
-    return total2; // Returning with .value
+    // Returning without .value, not entirely correctly, but will still work in Vue template.
+    // This is to test the impressive IVue unwrapping capabilities of deeply nested and confusing Refs
+    return _total;
   });
 
   return {

docs/docs/index.md

@@ -2,29 +2,42 @@
 import Button from './components/Button.vue'
 
 </script>
-# Infinite Vue Documentation
+# <span style="font-family: 'Public Sans'; ">ivue ∞ Infinite Vue</span> Documentation
 
 
 ## About
 
-**Infinite Vue &ndash; ivue** is a class based composable architecture for Vue 3, that unlocks infinite scalability for Vue 3 based apps. It allows you to extend the regular Vue 3 in a simple and elegant way.
+**<span style="font-family: 'Public Sans'; font-size: 125%;">ivue ∞ Infinite Vue</span>** is a class based composable architecture for Vue 3, that unlocks infinite scalability for Vue 3 based apps. It allows you to extend the regular Vue 3 in a simple and elegant Object Oriented way.
+
+## `ivue` is
+
+
+<div style="padding-left:20px; font-size: 20px; line-height: 32px;">
+∞&nbsp; Simple like Options API<br />
+∞&nbsp; Flexible like Composition API<br />
+∞&nbsp; Extensible like TypeScript Class API<br />
+∞&nbsp; Robust, Minimal, Opaque & Unobtrusive<br />
+∞&nbsp; 100% VSCode / Intellij IDE Autocomplete Intellisence<br />
+∞&nbsp; 100% Vue 3 Compatible<br />
+∞&nbsp; 100% Test Covered<br />
+∞&nbsp; 100% Type Safe<br />
+∞&nbsp; Production Ready<br />
+∞&nbsp; Just <code>1.1kb</code> gzipped!<br />
+</div>
+
 
 ## Features
-<div style="padding-left:20px;">
-&ndash; Simple & Elegant Architecture<br />
-&ndash; Extensible Classes using JavaScript / TypeScript native Class API<br />
-&ndash; Extensible Props And Props Defaults<br />
-&ndash; Extensible Emits<br />
-&ndash; Extensible Slots<br />
-&ndash; Extensible Components<br />
-&ndash; Improves DX by elegantly dealing with `.value` in the background<br />
-&ndash; Can be used both as a Store and a ViewModel for Components<br />
-&ndash; Provides Full TypeScript Support<br />
-&ndash; Extends Vue 3 TypeScript Capability<br />
-&ndash; 100% Tested<br />
-&ndash; Zero dependencies except Vue 3<br />
-&ndash; Only 1kb(gzipped) in size!<br />
-&ndash; Production Ready<br />
+<div style="padding-left:20px; font-size: 18px;line-height: 28px; ">
+&mdash;&nbsp; Extensible Classes using JavaScript / TypeScript native Class API<br />
+&mdash;&nbsp; Improves DX by elegantly dealing with `.value`<br />
+&mdash;&nbsp; Extensible Props Defaults<br />
+&mdash;&nbsp; Extensible Emits<br />
+&mdash;&nbsp; Extensible Slots<br />
+&mdash;&nbsp; Fully Extensible Components<br />
+&mdash;&nbsp; Can be used as a Global Store and a ViewModel for Components<br />
+&mdash;&nbsp; Provides Full TypeScript Support<br />
+&mdash;&nbsp; Extends Vue 3 TypeScript Capability<br />
+&mdash;&nbsp; Zero dependencies except Vue 3<br />
 </div>
 
 ## Next Step

docs/docs/pages/api.md

@@ -5,7 +5,7 @@
 
 ## Core Functions
 
-### ivue()
+### `ivue()`
 
 ---
 
@@ -26,15 +26,15 @@ 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()
+### `iref()`
 
 Create a regular `vue` Ref but cast the type to the internal unreactive type, because properties auto-unwrap in `reactive()` object that is being created by `ivue` upon initialization.
 
-### iuse()
+### `iuse()`
 
 This function unwraps the type of any composable return to the bare values without `.value`, because properties auto-unwrap in `reactive()` object that is being created by `ivue` upon initialization.
 
-### .init()
+### `.init()`
 
 ---
 
@@ -51,7 +51,7 @@ Use `async init()` if you need `await` functionality.
 
 **Returns:** `void | Promise<void>`
 
-### .toRefs()
+### `.toRefs()`
 
 ---
 
@@ -72,7 +72,7 @@ This improves performance if `box` has many other properties that we do not need
 
 ## Utility Functions
 
-### propsWithDefaults()
+### `propsWithDefaults()`
 
 ---
 
@@ -89,25 +89,25 @@ Combines statically written defaults object with the runtime type definition of
 
 ## Utility Types
 
-### ExtractPropDefaultTypes
+### `ExtractPropDefaultTypes`
 
 Extracts types of the default types definition. This type can be used to validate against the actual defaults definition to make sure both definitions are in sync.
 
 ---
 
-### ExtractEmitTypes
+### `ExtractEmitTypes`
 
 ---
 
 Extracts types of a runtime emits declaration.
 
-### ExtendSlots
+### `ExtendSlots`
 
 ---
 
 Allows you to extend slots of a given slot interface.
 
-### UseComposable
+### `UseComposable`
 
 ---
 

docs/docs/pages/introduction.md

@@ -18,12 +18,13 @@ See: [VueJs.org – Reactivity Transform](https://vuejs.org/guide/extras/rea
 &ndash;&nbsp; Simple like Options API<br />
 &ndash;&nbsp; Flexible like Composition API<br />
 &ndash;&nbsp; Extensible like TypeScript Class API<br />
-&ndash;&nbsp; Feature Complete, yet Minimal, Opaque & Unobtrusive<br />
+&ndash;&nbsp; Robust, Minimal, Opaque & Unobtrusive<br />
 &ndash;&nbsp; 100% Vue 3 Compatible<br />
 &ndash;&nbsp; 100% Test Covered<br />
 &ndash;&nbsp; 100% Type Safe<br />
 &ndash;&nbsp; Production Ready<br />
 &ndash;&nbsp; Just <code>1.1kb</code> gzipped!<br />
+&ndash;&nbsp; 100% VSCode / Intellij IDE Auto-complete Intellisence<br />
 </div>
 
 `ivue` is a powerful tool because it fully aligns itself with JavaScript / TypeScript Class API.

docs/docs/pages/usage.md

@@ -10,6 +10,7 @@ import CounterExternalRefs from '../components/usage/CounterExternalRefs.vue'
 import CounterInternalRefs from '../components/usage/CounterInternalRefs.vue'
 import CounterComposables from '../components/usage/CounterComposables.vue'
 import CounterComposablesDestructuring from '../components/usage/CounterComposablesDestructuring.vue'
+import CounterComposablesIvueDestructuring from '../components/usage/CounterComposablesIvueDestructuring.vue'
 import CounterInsideComposables from '../components/usage/CounterInsideComposables.vue'
 import CounterComputeds from '../components/usage/CounterComputeds.vue'
 import CounterComputedsDisabled from '../components/usage/CounterComputedsDisabled.vue'
@@ -270,6 +271,27 @@ See the highlighted sections related to using `ivue` inside a composable.
 
 <CounterInsideComposables />
 
+## Using `ivue` Composables
+
+See the highlighted sections related to using `ivue` based composables.
+
+::: code-group
+<<< @/components/usage/CounterComposablesIvueDestructuring.vue{14 vue:line-numbers}
+:::
+
+:::details For this example we initialize the component like this:
+
+```vue
+<template>
+  <CounterComposablesIvueDestructuring />
+</template>
+```
+
+:::
+
+<div style="font-size: 18px; font-weight: 500;">Result</div>
+
+<CounterComposablesIvueDestructuring />
 
 ## Using Computeds
 
@@ -305,7 +327,7 @@ The result of this example is identical to the above.
 ## Using Watch
 
 To use `watch`, `watchEffect`, and other reactive functions, declare `.init()` method in the class.
-See the highlighted sections related to using `.init()` below:
+See the highlighted sections related to using `init()` below:
 
 ::: code-group
 <<< @/components/usage/CounterWatch.vue{6-13 vue:line-numbers}
@@ -330,10 +352,10 @@ See the highlighted sections related to using `.init()` below:
 ## Using Lifecycle Hooks
 
 To use `onMounted`, `onBeforeMount` and other lifecycle hooks, declare `.init()` method in the class.
-See the highlighted sections related to using `.init()` below:
+See the highlighted sections related to using `init()` below:
 
 ::: tip NOTICE:
-`.init()` method can be declared as `async` if needed.
+`init()` method can be declared as `async` if needed.
 :::
 
 ::: code-group

docs/package.json

@@ -18,7 +18,7 @@
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-vue": "^9.14.1",
     "execa": "^8.0.0",
-    "ivue": "^1.1.19",
+    "ivue": "^1.1.20",
     "typescript": "^4.5.4",
     "vite-plugin-dynamic-import": "^1.5.0",
     "vite-tsconfig-paths": "^4.3.2",

docs/yarn.lock

@@ -2193,10 +2193,10 @@ isexe@^2.0.0:
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
   integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
 
-ivue@^1.1.19:
-  version "1.1.19"
-  resolved "https://registry.yarnpkg.com/ivue/-/ivue-1.1.19.tgz#f92e6663d0851295857f89a6505c46ec98cd1964"
-  integrity sha512-pTDco1yNL71qHSGPMrSsisCI00jR18vzFosrMcbGGXZMHm4hWYO1eV0vX3aRwmNXJMKw3GtS4cpOGcFMgOlMDA==
+ivue@^1.1.20:
+  version "1.1.20"
+  resolved "https://registry.yarnpkg.com/ivue/-/ivue-1.1.20.tgz#bd5f2c6ea2a07166c5807833e93c8a01928db31f"
+  integrity sha512-DOrpKNwuCtzJlB06ncDpNiePYoDhSiO9gPdWIhchGrJ8cbncl+rOpDJxwROL8+82mIbK0D57dGdnrZkEcp6wzw==
 
 js-tokens@^4.0.0:
   version "4.0.0"