ivue 1.0.2 → 1.0.4

package/docs/docs/.vitepress/theme/index.js

@@ -0,0 +1,5 @@
+// .vitepress/theme/index.js
+import DefaultTheme from 'vitepress/theme'
+import './main.css'
+
+export default DefaultTheme

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

@@ -0,0 +1,29 @@
+@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap');
+
+.VPNavBarTitle {
+  font-family: 'Public Sans';
+}
+
+.VPNavBarTitle a span {
+  font-size: 22px !important;
+}
+
+body {
+  font-family: 'Public Sans'; 
+}
+
+.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;
+}

package/docs/docs/components/Button.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 defineProps({
   href: String,
   label: String,

package/docs/docs/components/guidelines/CounterExternalRefsDetailed.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { ivue } from 'ivue';
+
+type SpanRef = HTMLElement | null;
+
+class Counter {
+  constructor(public span: SpanRef) {
+    // Do not do this in the constructor() because this.span 
+    // still refers to this.span.value here:
+    // onMounted(() => { 
+    //   (this.span as HTMLElement /*❌*/).innerHTML = 'Initial span text!';
+    // });
+  }
+  init() {
+    // Do this inside init() because this.span (.value) is now
+    // flattened & (this) is now reactive():
+    onMounted(() => {
+      (this.span as HTMLElement/*✅*/).innerHTML = 'Initial span text!';
+    });
+  }
+  count = ref(0) as unknown as number;
+  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 */
+);
+
+defineExpose<Counter>(counter);
+</script>
+<template>
+  <a href="javascript:void(0)" @click="() => counter.increment()">Increment</a>
+  Count: {{ counter.count }} <br />
+  <span ref="span"></span>
+</template>

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

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ivue } from 'ivue';
+
+class Counter {
+  count = ref(0) as unknown as number;
+  increment() {
+    this.count++;
+  }
+}
+
+const counter = ivue(Counter);
+</script>
+<template>
+  <a href="javascript:void(0)" @click="() => counter.increment()">Increment</a>
+  Count: {{ counter.count }}
+</template>

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

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

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

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useMouse } from './functions/useMouse';
+import { ivue, 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>;
+
+class Counter {
+  count = ref(0) as unknown as number;
+
+  increment() {
+    this.count++;
+  }
+
+  // x, y are Refs that will be unwrapped and destructured into this class
+  x: UseMouse['x']; // Unwrapped Ref<number> becomes -> number
+  y: UseMouse['y']; // Unwrapped Ref<number> becomes -> number
+  
+  sum: UseMouse['sum']; // 'sum' method that will be destructured into this class on construct()
+  total: UseMouse['total'];  // 'total' computed Ref that will also be destructured into this class on construct()
+
+  constructor() {
+    ({
+      x: this.x,
+      y: this.y,
+      sum: this.sum,
+      total: this.total
+    } = useMouse() as unknown as UseMouse);
+  }
+}
+
+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 />
+  <button class="button" @click="() => counter.sum()">Click This Big Sum Button To Total X + Y</button>
+</template>

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

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ivue } from 'ivue';
+
+class Counter {
+  count = ref(0) as unknown as number;
+  increment() {
+    this.count++;
+  }
+  get doubleCount() {
+    return this.count * 2;
+  }
+  get quadCount() {
+    return this.doubleCount * 2;
+  }
+}
+
+const counter = ivue(Counter);
+</script>
+<template>
+  <a href="javascript:void(0)" @click="() => counter.increment()">Increment</a>
+  Count: {{ counter.count }} <br />
+  Double Count: {{ counter.doubleCount }} <br />
+  Quad Count: {{ counter.quadCount }} <br />
+</template>

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

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ivue } from 'ivue';
+
+class Counter {
+  /**
+   * Use static ivue property to disable computed 
+   * behavior for certain getters.
+   */
+  static ivue = {
+    doubleCount: false // doubleCount is a regular getter now
+  }
+  count = ref(0) as unknown as number;
+  increment() {
+    this.count++;
+  }
+  get doubleCount() {
+    return this.count * 2;
+  }
+  get quadCount() {
+    return this.doubleCount * 2;
+  }
+}
+
+const counter = ivue(Counter);
+</script>
+<template>
+  <a href="javascript:void(0)" @click="() => counter.increment()">Increment</a>
+  Count: {{ counter.count }} <br />
+  Double Count: {{ counter.doubleCount }} <br />
+  Quad Count: {{ counter.quadCount }} <br />
+</template>

package/docs/docs/components/usage/CounterDefineExpose.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { ivue } from 'ivue';
+
+import Counter from './CounterDefineExposeClass'
+
+const counter = ivue(Counter);
+
+defineExpose<Counter>(counter);
+</script>
+<template>
+  Count: {{ counter.count }}
+</template>

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

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { ivue } from 'ivue';
+import { ref } from 'vue';
+
+/** 
+ * See that only 'count', 'increment' properties are picked 
+ * for the define expose interface. 
+ */
+export type CounterExposed = Pick<Counter, 'count' | 'increment'>;
+
+class Counter {
+  count = ref(0) as unknown as number;
+  increment() {
+    this.count++;
+  }
+  decrement() {
+    this.count--;
+  }
+}
+
+const counter = ivue(Counter);
+
+defineExpose<CounterExposed>(counter);
+</script>
+<template>Count: {{ counter.count }}</template>

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

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

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

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ivue } from 'ivue';
+
+type SpanRef = HTMLElement | null;
+
+class Counter {
+  constructor(public span: SpanRef) {}
+  count = ref(0) as unknown as number;
+  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 */);
+
+defineExpose<Counter>(counter);
+</script>
+<template>
+  <a href="javascript:void(0)" @click="() => counter.increment()">Increment</a>
+  Count: {{ counter.count }} 
+  <span ref="span"></span>
+</template>

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

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ivue } from 'ivue';
+
+class Counter {
+  count = ref(0) as unknown as number;
+  increment() {
+    this.count++;
+  }
+}
+
+function useCounter() {
+  /** Convert ivue Counter to a composable with .toRefs() */
+  const { count, increment } = ivue(Counter).toRefs();
+
+  return {
+    count,
+    increment,
+  };
+}
+
+const { count, increment } = useCounter();
+</script>
+<template>
+  <a href="javascript:void(0)" @click="increment">Increment</a>
+  Count: {{ count }} <br />
+</template>

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

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ivue } from 'ivue';
+
+class Counter {
+  count = ref(0) as unknown as number;
+  span = ref(null) as unknown as HTMLElement | null;
+  increment() {
+    this.count++;
+    (this.span as HTMLElement).innerHTML = String(this.count + 1);
+  }
+}
+
+const counter = ivue(Counter);
+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>
+  Count: {{ counter.count }}
+  <span ref="span"></span>
+</template>

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

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { ivue } from 'ivue';
+
+class Counter {
+  init() {
+    onMounted(() => {
+      this.count = 100;
+    });
+  }
+  count = ref(0) as unknown as number;
+  increment() {
+    this.count++;
+  }
+}
+
+const counter = ivue(Counter);
+</script>
+<template>
+  <a href="javascript:void(0)" @click="() => counter.increment()">Increment</a>
+  Count: {{ counter.count }} (onMounted we set it to 100)
+</template>

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

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { ivue } 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!');
+      }
+    });
+  }
+  count = ref(0) as unknown as number;
+  increment() {
+    this.count++;
+  }
+}
+
+const counter = ivue(Counter);
+</script>
+<template>
+  <a href="javascript:void(0)" @click="() => counter.increment()">Increment</a>
+  Count: {{ counter.count }} (Click 5 times to get an alert)
+</template>

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

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ivue } from 'ivue';
+
+interface CounterProps {
+  initialCount: number;
+}
+const props = defineProps<CounterProps>();
+
+class Counter {
+  constructor(public props: CounterProps) {
+    this.count = this.props.initialCount;
+  }
+  count = ref(0) as unknown as number;
+  increment() {
+    this.count++;
+  }
+}
+
+/**
+ * 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);
+</script>
+<template>
+  <a href="javascript:void(0)" @click="() => counter.increment()">Increment</a>
+  Count: {{ counter.count }}
+</template>

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

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ivue } from 'ivue';
+
+interface CounterProps {
+  initialCount: number;
+}
+
+interface CounterEmits {
+  (e: 'increment', count: number): void;
+}
+
+const props = defineProps<CounterProps>();
+const emit = defineEmits<CounterEmits>();
+
+class Counter {
+  constructor(public props: CounterProps, public emit: CounterEmits) {
+    this.count = this.props.initialCount;
+  }
+  count = ref(0) as unknown as number;
+  increment() {
+    this.count++;
+    this.emit('increment', this.count);
+  }
+}
+
+/**
+ * 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);
+</script>
+<template>
+  <a href="javascript:void(0)" @click="() => counter.increment()">Increment</a>
+  Count: {{ counter.count }}
+</template>

package/docs/docs/components/usage/functions/useMouse.ts

@@ -0,0 +1,22 @@
+import { computed, ref } from 'vue';
+import { useMouse as _useMouse } from '@vueuse/core';
+
+export function useMouse() {
+  const { x, y } = _useMouse();
+  const _sum = ref(0);
+
+  function sum() {
+    _sum.value = x.value + y.value;
+  }
+
+  const total = computed(() => {
+    return _sum;
+  });
+
+  return {
+    x,
+    y,
+    sum,
+    total,
+  };
+}

package/docs/docs/index.md

@@ -1,8 +1,8 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import Button from './components/Button.vue'
 
 </script>
-# Documentation
+# Infinite Vue Documentation
 
 
 ## About
@@ -12,14 +12,15 @@ import Button from './components/Button.vue'
 ## Features
 <div style="padding-left:20px;">
 &ndash; Simple & Elegant Architecture<br />
-&ndash; Extendible Classes aligned with TypeScript Class design<br />
-&ndash; Extendible Props Defaults<br />
-&ndash; Extendible Emits<br />
-&ndash; Extendible Slots<br />
-&ndash; Extendible Components<br />
-&ndash; Improves DX by elegantly dealing with .value in the background<br />
-&ndash; Can be used both as a Store and a View Model for Components<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 />

package/docs/docs/pages/advanced-usage.md

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+</script>
+## Extend Props
+### Typed Props
+### Runtime Props
+## Extend Props Defaults
+### Runtime Props
+## Extend Emits
+## Extend Slots
+## Extend Classes
+## Extend Components

package/docs/docs/pages/api.md

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+</script>
+
+# API
+
+## Core Functions
+
+### ivue()
+
+---
+
+```ts
+export function ivue<T extends AnyClass>(
+  className: T,
+  ...args: InferredArgs<T>
+): IVue<T>;
+```
+
+Core `ivue(className, ...args)` initializer is able to infer and validate the constrcutor argument types of AnyClass and passes those arguments to the constructor of `AnyClass` internally.
+
+`ivue(className, arg1, arg2, arg3...)` allows you to pass any number of arguments into the class `constructor(arg1, arg2, arg3...)`
+
+`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.
+
+**Returns:** `<IVue<T>>` or `ivue` `reactive()` object of an `AnyClass` class with flattened (de-Refed) `Refs` and `ComputedRefs` as properties.
+
+### .init()
+
+---
+
+`.init()` method is auto-run on `ivue()` initialization after `constructor()` is run.
+`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.
+:::
+
+:::tip NEED ASYNC/AWAIT?
+You can make `init()` method `async` if you need `await` functionality.
+:::
+
+**Returns:** `void | Promise<void>`
+
+### .toRefs()
+
+---
+
+```ts
+function toRefs(props?: (keyof InstanceType<T>)[]): IVueRefs<InstanceType<T>>;
+```
+
+Converts an `ivue` object to a Vue 3 Composable with nested refs.
+
+:::tip You can pass the name of the properties to `toRefs(properties)`
+```ts
+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>>`
+
+## Utility Functions
+
+### propsWithDefaults()
+
+---
+
+```ts
+export function propsWithDefaults<T extends VuePropsObject>(
+  defaults: Record<string, any>,
+  typedProps: T
+): VuePropsWithDefaults<T>;
+```
+
+Combines statically written defaults object with the runtime type definition of Vue 3 props.
+
+**Returns:** `VuePropsWithDefaults<T>`
+
+## Utility Types
+
+### 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
+
+---
+
+Extracts types of a runtime emits declaration.
+
+### ExtendSlots
+
+---
+
+Allows you to extend slots of a given slot interface.
+
+### UseComposable
+
+---
+
+Extracts and unwraps (de-Refs) the real types of Vue 3 composable definition to make it compatible with `ivue`.

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

@@ -0,0 +1,18 @@
+---
+aside: false
+---
+# Source code
+Or [Browse the source code on GitHub](https://github.com/infinite-system/ivue/blob/main/src/index.ts)
+
+## Install by Copying
+
+`ivue` is designed to be easily shareable and installable so if you are running TypeScript, you can just copy the
+`ivue.ts` into your repo and you are done:
+
+::: 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`.
+:::
+
+:::code-group
+<<< ../../../src/index.ts{ts:line-numbers} [ivue.ts]
+:::