ivue 1.0.3 → 1.0.4

package/docs/docs/pages/guidelines.md

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+  import CounterExternalRefsDetailed from '../components/guidelines/CounterExternalRefsDetailed.vue';
+</script>
+
+# Guidelines
+
+## 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().
+   */
+  count = ref(0) as unknown as number; // ✅
+
+  /**
+   * Use ref() for the property and cast it to number
+   * because refs auto-unwrap inside reactive().
+   */
+  timesClicked = ref(0) as unknown as number; // ✅
+
+  /** ✅ Properly declared function (not arrow function). */
+  increment() {
+    this.count++;
+  }
+
+  /** ✅ Properly declared function (not arrow function). */
+  click() {
+    this.increment();
+    this.timesClicked++;
+  }
+
+  /**
+   * Do NOT use arrow functions, arrow functions are not extensible.
+   */
+  increment = () => this.count++ ❌
+
+  /** ✅ Properly declared computed getter. */
+  get doubleCount() {
+    return this.count * 2;
+  }
+}
+```
+
+### Use ref() for properties
+
+`ivue` recommends all class properties to be defined as `ref()` to be able to interoperate with `defineExpose()`, if you simply pass reactive props which are not Refs through `defineExpose()`, they will lose reactivity. `ref()` refs just like computed refs get flattened into the `reactive()` object, so there is no need to worry about using `.value`. The `ref()` refs are necessary just internally for Vue 3 to know which refs to keep reactive.
+
+### Unwrap (de-Ref) the types
+
+Next, we convert the types back to their normal types as if they have no reactivity at all, so `Ref<number>` is `number` in `ivue`, so rather than going in the direction of complexifying the types, we are going in the opposite direction towards simplification.
+
+### Use standard declaration syntax for functions
+
+`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
+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`.
+
+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:**
+
+::: code-group
+<<< @/components/guidelines/CounterExternalRefsDetailed.vue{5,9-13,16-20,29,32,40 vue:line-numbers}
+:::
+:::details For this example we initialize the component like this:
+
+```vue
+<template>
+  <CounterExternalRefsDetailed />
+</template>
+```
+
+:::
+
+<div style="font-size: 18px; font-weight: 500;">Result</div>
+
+<CounterExternalRefsDetailed />
+
+## Unwrapping Refs
+
+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.
+
+## 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`.

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

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import CounterBasic from '../components/usage/CounterBasic.vue'
+</script>
+# 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)
+:::
+
+## How it works?
+```ts
+export function ivue<T extends AnyClass>(
+  className: T,
+  ...args: InferredArgs<T>
+): IVue<T> 
+```
+The main `ivue()` initializer function uses TypeScript to be able to infer and validate the constrcutor argument types of `AnyClass` and passes those arguments to the constructor of `AnyClass`.
+
+`ivue` allows you to pass any number of arguments into the class `constructor(arg1, arg2, arg3, ...etc)`
+
+`ivue()` initializer function returns an extended Vue 3 `reactive()` object in which getters and setters are internally converted to computeds and adds `.toRefs()` method to the created object. Computeds auto-unwrap themselves when they are accessed as a reactive object property, so the `.value` properties and computeds get flattened in the resulting object and do not require `.value` to be accessed.
+
+`ivue` replicates native JavaScript / TypeScript class implementation by extending descriptors (getters and setters) up the whole prototype chain thus supporting classical inheritance.
+
+`ivue` aims to be opaque and minimal, just doing the minimum to convert a class to a reactive object, leaving the rest to be implemented using Vue 3 Composition API inside an initializer function called `.init()` 
+
+## Usage Recommendation
+`ivue` recommends all class properties to be defined as `ref()` to be able to interoperate with `defineExpose()`, if you simply pass reactive props which are not Refs through `defineExpose()`, they will lose reactivity. `ref()` refs just like computed refs get flattened into the `reactive()` object, so there is no need to worry about using `.value`. The `ref()` refs are necessary just internally for Vue 3 to know which refs to keep reactive, and we just convert the types back to their normal types as if they have no reactivity at all, so `Ref<number>` is `number` in `ivue`, so rather than going in the direction of complexifying the types, we are going in the opposite direction towards simplification.
+
+`ivue` recommends all class functions, getters and setters 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, getters and setters allows for any getter, setter, function or property to be overriden by extending this class. Arrow functions break full extensibility of classes, so avoid using them inside of classes.
+
+See: [More Guidelines](/pages/guidelines.html)
+
+## Minimal API Surface Area
+
+`ivue()` initializer function is the main API<br />
+`.init()` method helps initialize the reactive state like `watch`, `onMount`, etc.<br />
+`.toRefs()` method allows to interoperate with Vue 3 Composables<br />
+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]
+:::
+Or [See on GitHub](https://github.com/infinite-system/ivue/blob/main/src/index.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.
+
+## 100% TypeScript Support
+
+`ivue` is on the cutting edge of TypeScript and owes its capabilities to the latest developments in TypeScript. 
+
+`ivue` provides a set of utility types to make working with `Vue 3` even easier and more scalable.
+
+## 100% Unit Tested Architecture
+
+At the current stage all of the code that is used to build `ivue` is 100% tested with 100% coverage, and aims to keep being at 100% always.
+
+You can clone the project and run `yarn test` yourself and examine the tests.
+
+## Zero Dependencies
+
+`ivue` has zero dependencies except Vue 3.

package/docs/docs/pages/how-its-made.md

@@ -0,0 +1,32 @@
+
+# How it's made
+
+## Original Inspiration
+
+The original inspiration for `ivue` comes from `MobX` React state management library, where something similar is attempted to create a class based reactive observable architecture.
+
+##  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. 
+
+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).
+
+`ivue` relies on this very simple discovery of how to elegantly convert getters into Vue 3 computeds.
+
+## Simplicity
+
+After many iterations where I created a whole inversion of control library for `ivue`, using lots of different decorators and event Traits, I realized that simplicity is paramount to good architecture.
+
+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.
+

package/docs/docs/pages/introduction.md

@@ -1,53 +1,62 @@
 <script setup lang="ts">
 import Button from '../components/Button.vue'
 </script>
-# What is Infinite Vue (ivue) ?
+# What is Infinite Vue?
 
-## The Problem `ivue` Aims to Solve
+## The Problem
 
 With the development of React hooks and Vue following in its footsteps with introduction of Vue 3 Composition API, the ecosystem has moved away from Options API. 
 
 While providing greater flexibility and composability the Composition API has its own downsides, one of them is having to use `.value` to refer to the reactive variables which makes the development process more clunky when the App reaches a certain size. 
 
-As some of you may know, `reactvity-transform` macros were an attempt to mitigate those issues, which turned out to create even more issues, and was discontinued. 
+As you may know, `reactvity-transform` macros were an attempt to mitigate those issues, which turned out to create even more issues, and was discontinued. 
 
-See: https://vuejs.org/guide/extras/reactivity-transform.html
+See: [VueJs.org &ndash; Reactivity Transform](https://vuejs.org/guide/extras/reactivity-transform.html)
 
+## `ivue` is
+<div style="padding-left:20px; font-size: 1.2rem; line-height: 2rem;">
+&ndash;&nbsp; Simple like Options API<br />
+&ndash;&nbsp; Flexible like Composition API<br />
+&ndash;&nbsp; Extensible like TypeScript Classes API<br />
+</div>
 
-::: info IVUE UNIFIES COMPOSITION & OPTIONS API VIA CLASS BASED ARCHITECTURE
-&mdash;&nbsp; `ivue` mitigates the downsides of both Composition API and Options API, uses only their strengths and brings back Object Oriented Programming to allow the development of complex and scallable apps.
+`ivue` is a powerful tool because it fully aligns itself with JavaScript / TypeScript Class API.
 
-&mdash;&nbsp; `ivue` is fully interoperable with Composition API and does not work against it but rather with it, so you can use all of ecosystems composables seamlessly.
+`ivue` gives you a class based Composable capabilities with Inheritance and all the power of TypeScript Classes.
+
+`ivue` mitigates the downsides of both Composition API and Options API, uses only their strengths and brings back Object Oriented Programming to allow the development of complex and scalable apps.
+
+`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.
 
-&mdash;&nbsp; `ivue` also offers a set of functions and utility types to make extensible & exportable props defaults, extensible emits and extensible slots possible.
-:::
 
-## Classes are Back with Full Vue 3 Compatibility & Beyond
+## Classes 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 and true composition.
+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
-&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<br />
-&mdash; &nbsp;`ivue` is NOT the same as class components (though you can build components with it)<br />
+&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 />
 :::
 
-## Infinite Vue Achitecture
+## Infinite Vue Class Achitecture
 
-`ivue` mimicks native JavaScript / TypeScript class implementation by extending descriptors (getters and setters) up the whole prototype chain thus supporting classical inheritance.
+`ivue` replicates native JavaScript / TypeScript class implementation by extending descriptors (getters and setters) up the whole prototype chain thus supporting classical inheritance.
 
-By using TypeScript we are able to infer the arguments of the main `ivue` initializer function and pass the arguments to the constructor.
+By using TypeScript we are able to infer the arguments of the main `ivue()` initializer function and pass the arguments to the constructor.
 
-`ivue` initializer function returns a reactive object with getters converted to computeds and adds `.toRefs()` method to the object, `.toRefs()` allows the object to be converted to native composable structure, so it can interoperate as a composable if needed.
+`ivue()` initializer function returns a reactive object with getters converted to computeds and adds `.toRefs()` method to the object, `.toRefs()` allows the object to be converted to native composable structure, so it can interoperate as a composable if needed.
 
-`ivue` aims to be opaque and minimal, just doing the minimum to convert a class to a reactive object, leaving the rest to be implemented using Vue 3 composition api inside an initializer function called `.init()` 
+`ivue` aims to be opaque and minimal, just doing the minimum to convert a class to a reactive object, leaving the rest to be implemented using Vue 3 Composition API inside an initializer function called `.init()` 
 
 You can read more about `ivue` internal architecture in <Button href="/pages/how-it-works" label="How it works?" /> page.
 
 ## When to use Infinite Vue?
 
-When complexity of your app or components becomes very high using `ivue` can become a natural choice to deal with that complexity. Because `.value` is abstracted away in `ivue`, everything is simply a reactive object of unwrapped Refs.
+When the complexity of your app or components becomes very high using `ivue` can become a natural choice to deal with that complexity. Because `.value` is abstracted away in `ivue`, everything is simply a reactive object of Refs.
 

package/docs/docs/pages/usage.md

@@ -1,32 +1,20 @@
-<style>
-  .button { 
-    padding: 5px 10px; 
-    border-color: var(--vp-custom-block-details-border);
-    color: var(--vp-custom-block-details-text);
-    background-color: var(--vp-custom-block-details-bg);
-    border-radius: 5px;  
-    margin-bottom: 2px;
-    transition: 0.5s;
-  }
-  .button:hover { 
-    opacity: 0.8;
-  }
-  .button:active { 
-    opacity:0.9;
-  }
-</style>
-<script lang="ts" setup>
+<script setup lang="ts">
 import { ref } from 'vue';
 
-import CounterBasic from '../components/examples/CounterBasic.vue'
-import CounterWithProps from '../components/examples/CounterWithProps.vue'
-import CounterWithPropsAndEmits from '../components/examples/CounterWithPropsAndEmits.vue'
-import CounterDefineExpose from '../components/examples/CounterDefineExpose.vue'
-import CounterDefineExposeClass from '../components/examples/CounterDefineExposeClass'
-import CounterExternalRefs from '../components/examples/CounterExternalRefs.vue'
-import CounterInternalRefs from '../components/examples/CounterInternalRefs.vue'
-import CounterComposables from '../components/examples/CounterComposables.vue'
-import CounterComposablesDestructuring from '../components/examples/CounterComposablesDestructuring.vue'
+import CounterBasic from '../components/usage/CounterBasic.vue'
+import CounterWithProps from '../components/usage/CounterWithProps.vue'
+import CounterWithPropsAndEmits from '../components/usage/CounterWithPropsAndEmits.vue'
+import CounterDefineExpose from '../components/usage/CounterDefineExpose.vue'
+import CounterDefineExposeClass from '../components/usage/CounterDefineExposeClass'
+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 CounterInsideComposables from '../components/usage/CounterInsideComposables.vue'
+import CounterComputeds from '../components/usage/CounterComputeds.vue'
+import CounterComputedsDisabled from '../components/usage/CounterComputedsDisabled.vue'
+import CounterWatch from '../components/usage/CounterWatch.vue'
+import CounterLifecycleHooks from '../components/usage/CounterLifecycleHooks.vue'
 
 // <For CounterWithPropsAndEmits example start>
 function onIncrement(value: number) {
@@ -56,44 +44,55 @@ Using ivue is very simple, but you need to understand a few principles. See the
 
 Classic Counter example built with `ivue`
 ::: code-group
-<<< @/components/examples/CounterBasic.vue{15 vue:line-numbers}
+<<< @/components/usage/CounterBasic.vue{15 vue:line-numbers}
 :::
+
 :::details For this example we initialize the component like this:
+
+```vue
 <template>
-<CounterBasic />
+  <CounterBasic />
 </template>
+```
+
 :::
 
-### Result:
+<div style="font-size: 18px; font-weight: 500;">Result</div>
 
 <CounterBasic />
 ::: warning NOTICE: JavaScript Class Caveat
- See `() => counter.increment()`. You cannot simply use `counter.increment` to refer to the method when it was defined as a object of a class, because that method would not know that it has to be bound to `counter`. You have to either use `() => counter.increment()` or `counter.increment.bind(counter)`, but the latter example is too verbose, so the preferred more readable way is to use an arrow function.
+ See `() => counter.increment()`. You cannot simply use `counter.increment` to refer to the method when it was defined as an object of a class, because that method would not know that it has to be bound to `counter`. You have to either use `() => counter.increment()` or `counter.increment.bind(counter)`, but the latter example is too verbose, so the preferred more readable way is to use an arrow function.
 :::
 
 ## Using Props
 
 See the highlighted sections related to props.
 ::: code-group
-<<< @/components/examples/CounterWithProps.vue{5-8,15-16,24 vue:line-numbers}
+<<< @/components/usage/CounterWithProps.vue{5-8,11-12,24 vue:line-numbers}
 :::
+
 :::details For this example we initialize the component like this:
+
+```vue
 <template>
-<CounterWithProps :initial-count="5" />
+  <CounterWithProps :initial-count="5" />
 </template>
+```
+
 :::
 
-### Result:
+<div style="font-size: 18px; font-weight: 500;">Result</div>
 
 <CounterWithProps :initial-count="5" />
 
 ## Using Emits
 
-See the highlighted sections related to `defineExpose`
+See the highlighted sections related to using emits.
 
 ::: code-group
-<<< @/components/examples/CounterWithPropsAndEmits.vue{9-11,14,20,22,31 vue:line-numbers}
+<<< @/components/usage/CounterWithPropsAndEmits.vue{9-11,14,17,23,31 vue:line-numbers}
 :::
+
 :::details For this example we initialize the component like this:
 
 ```vue
@@ -109,16 +108,16 @@ function onIncrement(value: number) {
 
 :::
 
-### Result:
+<div style="font-size: 18px; font-weight: 500;">Result</div>
 
 <CounterWithPropsAndEmits :initial-count="5" @increment="onIncrement" />
 
 ## Using Refs
 
-### Refs Defined Outside of ivue
+### Refs defined externally in the component outside of the class.
 
 ::: code-group
-<<< @/components/examples/CounterExternalRefs.vue{vue:line-numbers}
+<<< @/components/usage/CounterExternalRefs.vue{5,8,12,16,24 vue:line-numbers}
 :::
 :::details For this example we initialize the component like this:
 
@@ -130,15 +129,16 @@ function onIncrement(value: number) {
 
 :::
 
-### Result:
+<div style="font-size: 18px; font-weight: 500;">Result</div>
 
 <CounterExternalRefs />
 
-### Refs Defined Inside of ivue class
+### Refs defined internally inside of the class.
 
 ::: code-group
-<<< @/components/examples/CounterInternalRefs.vue{vue:line-numbers}
+<<< @/components/usage/CounterInternalRefs.vue{7,15,25 vue:line-numbers}
 :::
+
 :::details For this example we initialize the component like this:
 
 ```vue
@@ -149,18 +149,22 @@ function onIncrement(value: number) {
 
 :::
 
-### Result:
+<div style="font-size: 18px; font-weight: 500;">Result</div>
 
 <CounterInternalRefs />
 
 ## Using Define Expose
 
+### Use class as interface for `defineExpose()`
 See the highlighted sections related to `defineExpose`.
+
 ::: code-group
-<<< @/components/examples/CounterDefineExpose.vue{8 vue:line-numbers}
-<<< @/components/examples/CounterDefineExposeClass.ts{ts:line-numbers}
+<<< @/components/usage/CounterDefineExpose.vue{8 vue:line-numbers}
+<<< @/components/usage/CounterDefineExposeClass.ts{ts:line-numbers}
 :::
+
 :::details For this example we initialize the component like this:
+
 ```vue
 <script setup lang="ts">
 const defineExposeRef = ref<CounterDefineExposeClass | null>(null);
@@ -183,43 +187,167 @@ function decrement() {
   <CounterDefineExpose />
 </template>
 ```
+
 :::
 
-### Result:
+<div style="font-size: 18px; font-weight: 500;">Result</div>
 
 <button class="button" @click="increment">Increment via Component Ref from Parent Component</button><br />
 <button class="button" @click="decrement">Decrement via Component Ref from Parent Component</button>
 <CounterDefineExpose ref="defineExposeRef" />
 
+### Pick allowed interface properties for `defineExpose()`
+
+::: code-group
+<<< @/components/usage/CounterDefineExposeAdvanced.vue{9,23 vue:line-numbers}
+:::
+
 ## Using Composables
 
+### Assign a composable to a class property
+
 See the highlighted sections related to composable usage.
 ::: code-group
-<<< @/components/examples/CounterComposables.vue{4,11,19 vue:line-numbers}
+<<< @/components/usage/CounterComposables.vue{4,11,19 vue:line-numbers}
 :::
+
 :::details For this example we initialize the component like this:
+
 ```vue
 <template>
   <CounterComposables />
 </template>
 ```
+
 :::
 
-### Result:
+<div style="font-size: 18px; font-weight: 500;">Result</div>
+
 <CounterComposables />
 
 ### Destructuring composable into the class
+
 See the highlighted sections related to destructuring composable usage.
+
 ::: code-group
-<<< @/components/examples/CounterComposablesDestructuring.vue{4,11,19 vue:line-numbers}
+<<< @/components/usage/CounterComposablesDestructuring.vue{4,10,20-21,23-24,27-32 vue:line-numbers}
+<<< @/components/usage/functions/useMouse.ts{ts:line-numbers} [functions/useMouse.ts]
 :::
+
 :::details For this example we initialize the component like this:
+
 ```vue
 <template>
   <CounterComposablesDestructuring />
 </template>
 ```
+
 :::
 
-### Result:
+<div style="font-size: 18px; font-weight: 500;">Result</div>
+
 <CounterComposablesDestructuring />
+
+## Using Inside Composables
+
+See the highlighted sections related to using `ivue` inside a composable.
+
+::: code-group
+<<< @/components/usage/CounterInsideComposables.vue{14 vue:line-numbers}
+:::
+
+:::details For this example we initialize the component like this:
+
+```vue
+<template>
+  <CounterInsideComposables />
+</template>
+```
+
+:::
+
+<div style="font-size: 18px; font-weight: 500;">Result</div>
+
+<CounterInsideComposables />
+
+
+## Using Computeds
+
+### Getters are computeds in `ivue` unless disabled.<br />
+See the highlighted sections related to getters.
+
+::: code-group
+<<< @/components/usage/CounterComputeds.vue{10,13,23,24 vue:line-numbers}
+:::
+
+:::details For this example we initialize the component like this:
+```vue
+<template>
+  <CounterComputeds />
+</template>
+```
+:::
+
+<div style="font-size: 18px; font-weight: 500;">Result</div>
+<CounterComputeds />
+
+### Disable computed behavior for certain getters in `ivue`.<br />
+You can disable computed getters via `static ivue = { getter: false }`, see below:
+
+::: code-group
+<<< @/components/usage/CounterComputedsDisabled.vue{10-12 vue:line-numbers}
+:::
+
+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:
+
+::: code-group
+<<< @/components/usage/CounterWatch.vue{6-13 vue:line-numbers}
+:::
+
+:::details For this example we initialize the component like this:
+
+```vue
+<template>
+  <CounterWatch />
+</template>
+```
+
+:::
+
+<div style="font-size: 18px; font-weight: 500;">Result</div>
+
+<CounterWatch />
+
+
+
+## Using Lifecycle Hooks
+
+To use `onMounted`, `onBeforeMount` and other lifecycle, declare `.init()` method in the class.
+See the highlighted sections related to using `init()` below:
+
+::: tip NOTICE:
+`init()` method can be declared as `async` if needed.
+:::
+
+::: code-group
+<<< @/components/usage/CounterLifecycleHooks.vue{7-9 vue:line-numbers}
+:::
+
+:::details For this example we initialize the component like this:
+
+```vue
+<template>
+  <CounterLifecycleHooks />
+</template>
+```
+:::
+
+<div style="font-size: 18px; font-weight: 500;">Result</div>
+<CounterLifecycleHooks />