ivue 1.2.3 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (79) hide show
  1. package/coverage/clover.xml +177 -176
  2. package/coverage/coverage-final.json +1 -1
  3. package/coverage/index.html +18 -18
  4. package/coverage/index.ts.html +1 -1
  5. package/coverage/ivue.ts.html +176 -146
  6. package/dist/index.es.js +47 -46
  7. package/dist/index.umd.js +1 -1
  8. package/dist/src/ivue.d.ts +20 -11
  9. package/docs/docs/.vitepress/config.ts +24 -4
  10. package/docs/docs/.vitepress/dist/404.html +2 -2
  11. package/docs/docs/.vitepress/dist/api/ivue.html +4 -4
  12. package/docs/docs/.vitepress/dist/api/propsWithDefaults.html +4 -4
  13. package/docs/docs/.vitepress/dist/assets/{app.DQ9wCVNL.js → app.C_6IW306.js} +1 -1
  14. package/docs/docs/.vitepress/dist/assets/chunks/@localSearchIndexroot.Cfu1MyIk.js +1 -0
  15. package/docs/docs/.vitepress/dist/assets/chunks/{VPLocalSearchBox.EJpZrMkj.js → VPLocalSearchBox.BEJZ5WJL.js} +1 -1
  16. package/docs/docs/.vitepress/dist/assets/chunks/index.es.B1_StH0Z.js +1 -0
  17. package/docs/docs/.vitepress/dist/assets/chunks/{theme.BCqH7Ey3.js → theme.COJ5Yu8m.js} +2 -2
  18. package/docs/docs/.vitepress/dist/assets/{pages_advanced-usage.md.DsU0E8Oi.js → pages_advanced-usage.md.Xwq8hk_w.js} +1 -1
  19. package/docs/docs/.vitepress/dist/assets/{pages_advanced-usage.md.DsU0E8Oi.lean.js → pages_advanced-usage.md.Xwq8hk_w.lean.js} +1 -1
  20. package/docs/docs/.vitepress/dist/assets/pages_api.md.Bo9Kusmf.js +1 -0
  21. package/docs/docs/.vitepress/dist/assets/pages_api.md.Bo9Kusmf.lean.js +1 -0
  22. package/docs/docs/.vitepress/dist/assets/{pages_browse-code.md.d01mQ5OL.js → pages_browse-code.md.BS0BRUx_.js} +39 -29
  23. package/docs/docs/.vitepress/dist/assets/{pages_getting-started.md.g77_aCnX.js → pages_getting-started.md.BbVqm1ey.js} +39 -29
  24. package/docs/docs/.vitepress/dist/assets/{pages_guidelines.md.DufOHb7U.lean.js → pages_guidelines.md.fL8xf0Gx.js} +19 -19
  25. package/docs/docs/.vitepress/dist/assets/{pages_guidelines.md.DufOHb7U.js → pages_guidelines.md.fL8xf0Gx.lean.js} +19 -19
  26. package/docs/docs/.vitepress/dist/assets/{pages_how-it-works.md.BaYaFawX.js → pages_how-it-works.md.CP31gYQw.js} +40 -30
  27. package/docs/docs/.vitepress/dist/assets/{pages_how-it-works.md.BaYaFawX.lean.js → pages_how-it-works.md.CP31gYQw.lean.js} +40 -30
  28. package/docs/docs/.vitepress/dist/assets/pages_how-its-made.md.C02KZK0J.js +1 -0
  29. package/docs/docs/.vitepress/dist/assets/pages_introduction.md.B6foeVXQ.js +1 -0
  30. package/docs/docs/.vitepress/dist/assets/pages_introduction.md.B6foeVXQ.lean.js +1 -0
  31. package/docs/docs/.vitepress/dist/assets/{pages_usage.md.Fo9SdFjd.js → pages_usage.md.5C8BnzAi.js} +100 -68
  32. package/docs/docs/.vitepress/dist/assets/{pages_usage.md.Fo9SdFjd.lean.js → pages_usage.md.5C8BnzAi.lean.js} +100 -68
  33. package/docs/docs/.vitepress/dist/hashmap.json +1 -1
  34. package/docs/docs/.vitepress/dist/index.html +4 -4
  35. package/docs/docs/.vitepress/dist/pages/advanced-usage.html +5 -5
  36. package/docs/docs/.vitepress/dist/pages/api.html +7 -7
  37. package/docs/docs/.vitepress/dist/pages/browse-code.html +43 -33
  38. package/docs/docs/.vitepress/dist/pages/getting-started.html +44 -34
  39. package/docs/docs/.vitepress/dist/pages/guidelines.html +24 -24
  40. package/docs/docs/.vitepress/dist/pages/how-it-works.html +44 -34
  41. package/docs/docs/.vitepress/dist/pages/how-its-made.html +5 -5
  42. package/docs/docs/.vitepress/dist/pages/introduction.html +5 -5
  43. package/docs/docs/.vitepress/dist/pages/usage.html +105 -73
  44. package/docs/docs/components/advanced-usage/ConvertLegacy.vue +58 -0
  45. package/docs/docs/components/usage/CounterBasic.vue +3 -1
  46. package/docs/docs/components/usage/CounterComposables.vue +5 -3
  47. package/docs/docs/components/usage/CounterComposablesDestructuring.vue +15 -11
  48. package/docs/docs/components/usage/CounterComposablesIvue.vue +7 -3
  49. package/docs/docs/components/usage/CounterComposablesIvueDestructuring.vue +4 -2
  50. package/docs/docs/components/usage/CounterComputeds.vue +3 -1
  51. package/docs/docs/components/usage/CounterComputedsDisabled.vue +6 -4
  52. package/docs/docs/components/usage/CounterExternalRefs.vue +4 -2
  53. package/docs/docs/components/usage/CounterInsideComposables.vue +3 -1
  54. package/docs/docs/components/usage/CounterInternalRefs.vue +3 -1
  55. package/docs/docs/components/usage/CounterLifecycleHooks.vue +3 -1
  56. package/docs/docs/components/usage/CounterWatch.vue +3 -1
  57. package/docs/docs/components/usage/CounterWithProps.vue +4 -2
  58. package/docs/docs/components/usage/CounterWithPropsAndEmits.vue +3 -1
  59. package/docs/docs/components/usage/classes/CustomMouse.ts +2 -2
  60. package/docs/docs/pages/advanced-usage.md +2 -1
  61. package/docs/docs/pages/api.md +22 -7
  62. package/docs/docs/pages/guidelines.md +9 -9
  63. package/docs/docs/pages/how-it-works.md +0 -20
  64. package/docs/docs/pages/how-its-made.md +3 -3
  65. package/docs/docs/pages/introduction.md +22 -8
  66. package/docs/package.json +1 -1
  67. package/package.json +6 -1
  68. package/src/__tests__/ivue.vitest.spec.ts +61 -7
  69. package/src/ivue.ts +37 -27
  70. package/docs/docs/.vitepress/dist/assets/chunks/@localSearchIndexroot.HQhVwKCx.js +0 -1
  71. package/docs/docs/.vitepress/dist/assets/chunks/index.es.CUL6WvM-.js +0 -1
  72. package/docs/docs/.vitepress/dist/assets/pages_api.md.CElVfYwg.js +0 -1
  73. package/docs/docs/.vitepress/dist/assets/pages_api.md.CElVfYwg.lean.js +0 -1
  74. package/docs/docs/.vitepress/dist/assets/pages_how-its-made.md.CCol99CD.js +0 -1
  75. package/docs/docs/.vitepress/dist/assets/pages_introduction.md.CCkiQtfX.js +0 -1
  76. package/docs/docs/.vitepress/dist/assets/pages_introduction.md.CCkiQtfX.lean.js +0 -1
  77. /package/docs/docs/.vitepress/dist/assets/{pages_browse-code.md.d01mQ5OL.lean.js → pages_browse-code.md.BS0BRUx_.lean.js} +0 -0
  78. /package/docs/docs/.vitepress/dist/assets/{pages_getting-started.md.g77_aCnX.lean.js → pages_getting-started.md.BbVqm1ey.lean.js} +0 -0
  79. /package/docs/docs/.vitepress/dist/assets/{pages_how-its-made.md.CCol99CD.lean.js → pages_how-its-made.md.C02KZK0J.lean.js} +0 -0
@@ -1 +0,0 @@
1
- import{_ as s,c as i,o as e,a5 as a}from"./chunks/framework.CvEKxEoK.js";const g=JSON.parse('{"title":"API","description":"","frontmatter":{},"headers":[],"relativePath":"pages/api.md","filePath":"pages/api.md"}'),t={name:"pages/api.md"},n=a('<h1 id="api" tabindex="-1">API <a class="header-anchor" href="#api" aria-label="Permalink to &quot;API&quot;">​</a></h1><h2 id="core-functions" tabindex="-1">Core Functions <a class="header-anchor" href="#core-functions" aria-label="Permalink to &quot;Core Functions&quot;">​</a></h2><h3 id="ivue" tabindex="-1"><code>ivue()</code> <a class="header-anchor" href="#ivue" aria-label="Permalink to &quot;`ivue()`&quot;">​</a></h3><hr><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ivue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">T</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> extends</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> AnyClass</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;(</span></span>\n<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> className</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> T</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>\n<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ...</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">args</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> InferredArgs</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">T</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>\n<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> IVue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">T</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;;</span></span></code></pre></div><p>Core <code>ivue(className, ...args)</code> initializer is able to infer and validate the constrcutor argument types of AnyClass and passes those arguments to the constructor of <code>AnyClass</code> internally.</p><p><code>ivue(className, arg1, arg2, arg3...)</code> allows you to pass any number of arguments into the class <code>constructor(arg1, arg2, arg3...)</code></p><p><code>ivue()</code> initializer function returns an extended Vue 3 <code>reactive()</code> object in which getters and setters are internally converted to computeds and adds <code>.toRefs()</code> method to the created object. Computeds auto-unwrap themselves when they are accessed as a reactive object property, so the <code>.value</code> properties and computeds get flattened in the resulting object and do not require <code>.value</code> to be accessed.</p><p><code>ivue()</code> replicates native JavaScript / TypeScript class implementation by extending descriptors (getters and setters) up the whole prototype ancestors chain thus supporting classical inheritance.</p><p><strong>Returns:</strong> <code>&lt;IVue&lt;T&gt;&gt;</code> or <code>ivue</code> <code>reactive()</code> object of an <code>AnyClass</code> class with flattened (de-Refed) <code>Refs</code> and <code>ComputedRefs</code> as properties.</p><h3 id="iref" tabindex="-1"><code>iref()</code> <a class="header-anchor" href="#iref" aria-label="Permalink to &quot;`iref()`&quot;">​</a></h3><p>Create a regular <code>vue</code> Ref but cast the type to the internal unreactive type, because properties auto-unwrap in <code>reactive()</code> object that is being created by <code>ivue</code> upon initialization.</p><h3 id="iuse" tabindex="-1"><code>iuse()</code> <a class="header-anchor" href="#iuse" aria-label="Permalink to &quot;`iuse()`&quot;">​</a></h3><p>This function unwraps the type of any composable return to the bare values without <code>.value</code>, because properties auto-unwrap in <code>reactive()</code> object that is being created by <code>ivue</code> upon initialization.</p><h3 id="init" tabindex="-1"><code>.init()</code> <a class="header-anchor" href="#init" aria-label="Permalink to &quot;`.init()`&quot;">​</a></h3><hr><p><code>.init()</code> method is auto-run on <code>ivue()</code> initialization after <code>constructor()</code> is run. <code>.init()</code> has access to the reactive state of the object via <code>this</code>.</p><div class="warning custom-block"><p class="custom-block-title">NOTICE</p><p><code>.init()</code> method has no arguments and you should never need to run this method manually.</p></div><div class="tip custom-block"><p class="custom-block-title">NEED ASYNC/AWAIT?</p><p>Use <code>async init()</code> if you need <code>await</code> functionality.</p></div><p><strong>Returns:</strong> <code>void | Promise&lt;void&gt;</code></p><h3 id="torefs" tabindex="-1"><code>.toRefs()</code> <a class="header-anchor" href="#torefs" aria-label="Permalink to &quot;`.toRefs()`&quot;">​</a></h3><hr><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> toRefs</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">props</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">keyof</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> InstanceType</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">T</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;)[])</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> IVueRefs</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">InstanceType</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">T</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&gt;;</span></span></code></pre></div><p>Converts an <code>ivue</code> object to a Vue 3 Composable with nested refs.</p><div class="tip custom-block"><p class="custom-block-title">You can pass the name of the properties to <code>.toRefs(properties)</code></p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ivue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(Box).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">toRefs</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;width&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;height&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]);</span></span></code></pre></div><p>This improves performance if <code>box</code> has many other properties that we do not need.</p></div><p><strong>Returns:</strong> <code>IVueRefs&lt;InstanceType&lt;T&gt;&gt;</code></p><h2 id="utility-functions" tabindex="-1">Utility Functions <a class="header-anchor" href="#utility-functions" aria-label="Permalink to &quot;Utility Functions&quot;">​</a></h2><h3 id="propswithdefaults" tabindex="-1"><code>propsWithDefaults()</code> <a class="header-anchor" href="#propswithdefaults" aria-label="Permalink to &quot;`propsWithDefaults()`&quot;">​</a></h3><hr><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> propsWithDefaults</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">T</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> extends</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> VuePropsObject</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;(</span></span>\n<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> defaults</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Record</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;,</span></span>\n<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> typedProps</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> T</span></span>\n<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> VuePropsWithDefaults</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">T</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;;</span></span></code></pre></div><p>Combines statically written defaults object with the runtime type definition of Vue 3 props.</p><p><strong>Returns:</strong> <code>VuePropsWithDefaults&lt;T&gt;</code></p><h2 id="utility-types" tabindex="-1">Utility Types <a class="header-anchor" href="#utility-types" aria-label="Permalink to &quot;Utility Types&quot;">​</a></h2><h3 id="extractpropdefaulttypes" tabindex="-1"><code>ExtractPropDefaultTypes</code> <a class="header-anchor" href="#extractpropdefaulttypes" aria-label="Permalink to &quot;`ExtractPropDefaultTypes`&quot;">​</a></h3><p>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.</p><hr><h3 id="extractemittypes" tabindex="-1"><code>ExtractEmitTypes</code> <a class="header-anchor" href="#extractemittypes" aria-label="Permalink to &quot;`ExtractEmitTypes`&quot;">​</a></h3><hr><p>Extracts types of a runtime emits declaration.</p><h3 id="extendslots" tabindex="-1"><code>ExtendSlots</code> <a class="header-anchor" href="#extendslots" aria-label="Permalink to &quot;`ExtendSlots`&quot;">​</a></h3><hr><p>Allows you to extend slots of a given slot interface.</p><h3 id="usecomposable" tabindex="-1"><code>UseComposable</code> <a class="header-anchor" href="#usecomposable" aria-label="Permalink to &quot;`UseComposable`&quot;">​</a></h3><hr><p>Extracts and unwraps (de-Refs) the real types of Vue 3 composable definition to make it compatible with <code>ivue</code>.</p>',45),h=[n];function o(l,p,r,d,c,k){return e(),i("div",null,h)}const y=s(t,[["render",o]]);export{g as __pageData,y as default};
@@ -1 +0,0 @@
1
- import{_ as s,c as i,o as e,a5 as a}from"./chunks/framework.CvEKxEoK.js";const g=JSON.parse('{"title":"API","description":"","frontmatter":{},"headers":[],"relativePath":"pages/api.md","filePath":"pages/api.md"}'),t={name:"pages/api.md"},n=a('<h1 id="api" tabindex="-1">API <a class="header-anchor" href="#api" aria-label="Permalink to &quot;API&quot;">​</a></h1><h2 id="core-functions" tabindex="-1">Core Functions <a class="header-anchor" href="#core-functions" aria-label="Permalink to &quot;Core Functions&quot;">​</a></h2><h3 id="ivue" tabindex="-1"><code>ivue()</code> <a class="header-anchor" href="#ivue" aria-label="Permalink to &quot;`ivue()`&quot;">​</a></h3><hr><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ivue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">T</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> extends</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> AnyClass</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;(</span></span>\n<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> className</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> T</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>\n<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ...</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">args</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> InferredArgs</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">T</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>\n<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> IVue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">T</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;;</span></span></code></pre></div><p>Core <code>ivue(className, ...args)</code> initializer is able to infer and validate the constrcutor argument types of AnyClass and passes those arguments to the constructor of <code>AnyClass</code> internally.</p><p><code>ivue(className, arg1, arg2, arg3...)</code> allows you to pass any number of arguments into the class <code>constructor(arg1, arg2, arg3...)</code></p><p><code>ivue()</code> initializer function returns an extended Vue 3 <code>reactive()</code> object in which getters and setters are internally converted to computeds and adds <code>.toRefs()</code> method to the created object. Computeds auto-unwrap themselves when they are accessed as a reactive object property, so the <code>.value</code> properties and computeds get flattened in the resulting object and do not require <code>.value</code> to be accessed.</p><p><code>ivue()</code> replicates native JavaScript / TypeScript class implementation by extending descriptors (getters and setters) up the whole prototype ancestors chain thus supporting classical inheritance.</p><p><strong>Returns:</strong> <code>&lt;IVue&lt;T&gt;&gt;</code> or <code>ivue</code> <code>reactive()</code> object of an <code>AnyClass</code> class with flattened (de-Refed) <code>Refs</code> and <code>ComputedRefs</code> as properties.</p><h3 id="iref" tabindex="-1"><code>iref()</code> <a class="header-anchor" href="#iref" aria-label="Permalink to &quot;`iref()`&quot;">​</a></h3><p>Create a regular <code>vue</code> Ref but cast the type to the internal unreactive type, because properties auto-unwrap in <code>reactive()</code> object that is being created by <code>ivue</code> upon initialization.</p><h3 id="iuse" tabindex="-1"><code>iuse()</code> <a class="header-anchor" href="#iuse" aria-label="Permalink to &quot;`iuse()`&quot;">​</a></h3><p>This function unwraps the type of any composable return to the bare values without <code>.value</code>, because properties auto-unwrap in <code>reactive()</code> object that is being created by <code>ivue</code> upon initialization.</p><h3 id="init" tabindex="-1"><code>.init()</code> <a class="header-anchor" href="#init" aria-label="Permalink to &quot;`.init()`&quot;">​</a></h3><hr><p><code>.init()</code> method is auto-run on <code>ivue()</code> initialization after <code>constructor()</code> is run. <code>.init()</code> has access to the reactive state of the object via <code>this</code>.</p><div class="warning custom-block"><p class="custom-block-title">NOTICE</p><p><code>.init()</code> method has no arguments and you should never need to run this method manually.</p></div><div class="tip custom-block"><p class="custom-block-title">NEED ASYNC/AWAIT?</p><p>Use <code>async init()</code> if you need <code>await</code> functionality.</p></div><p><strong>Returns:</strong> <code>void | Promise&lt;void&gt;</code></p><h3 id="torefs" tabindex="-1"><code>.toRefs()</code> <a class="header-anchor" href="#torefs" aria-label="Permalink to &quot;`.toRefs()`&quot;">​</a></h3><hr><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> toRefs</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">props</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">keyof</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> InstanceType</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">T</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;)[])</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> IVueRefs</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">InstanceType</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">T</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&gt;;</span></span></code></pre></div><p>Converts an <code>ivue</code> object to a Vue 3 Composable with nested refs.</p><div class="tip custom-block"><p class="custom-block-title">You can pass the name of the properties to <code>.toRefs(properties)</code></p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ivue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(Box).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">toRefs</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;width&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;height&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]);</span></span></code></pre></div><p>This improves performance if <code>box</code> has many other properties that we do not need.</p></div><p><strong>Returns:</strong> <code>IVueRefs&lt;InstanceType&lt;T&gt;&gt;</code></p><h2 id="utility-functions" tabindex="-1">Utility Functions <a class="header-anchor" href="#utility-functions" aria-label="Permalink to &quot;Utility Functions&quot;">​</a></h2><h3 id="propswithdefaults" tabindex="-1"><code>propsWithDefaults()</code> <a class="header-anchor" href="#propswithdefaults" aria-label="Permalink to &quot;`propsWithDefaults()`&quot;">​</a></h3><hr><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> propsWithDefaults</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">T</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> extends</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> VuePropsObject</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;(</span></span>\n<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> defaults</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Record</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;,</span></span>\n<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> typedProps</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> T</span></span>\n<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> VuePropsWithDefaults</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">T</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;;</span></span></code></pre></div><p>Combines statically written defaults object with the runtime type definition of Vue 3 props.</p><p><strong>Returns:</strong> <code>VuePropsWithDefaults&lt;T&gt;</code></p><h2 id="utility-types" tabindex="-1">Utility Types <a class="header-anchor" href="#utility-types" aria-label="Permalink to &quot;Utility Types&quot;">​</a></h2><h3 id="extractpropdefaulttypes" tabindex="-1"><code>ExtractPropDefaultTypes</code> <a class="header-anchor" href="#extractpropdefaulttypes" aria-label="Permalink to &quot;`ExtractPropDefaultTypes`&quot;">​</a></h3><p>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.</p><hr><h3 id="extractemittypes" tabindex="-1"><code>ExtractEmitTypes</code> <a class="header-anchor" href="#extractemittypes" aria-label="Permalink to &quot;`ExtractEmitTypes`&quot;">​</a></h3><hr><p>Extracts types of a runtime emits declaration.</p><h3 id="extendslots" tabindex="-1"><code>ExtendSlots</code> <a class="header-anchor" href="#extendslots" aria-label="Permalink to &quot;`ExtendSlots`&quot;">​</a></h3><hr><p>Allows you to extend slots of a given slot interface.</p><h3 id="usecomposable" tabindex="-1"><code>UseComposable</code> <a class="header-anchor" href="#usecomposable" aria-label="Permalink to &quot;`UseComposable`&quot;">​</a></h3><hr><p>Extracts and unwraps (de-Refs) the real types of Vue 3 composable definition to make it compatible with <code>ivue</code>.</p>',45),h=[n];function o(l,p,r,d,c,k){return e(),i("div",null,h)}const y=s(t,[["render",o]]);export{g as __pageData,y as default};
@@ -1 +0,0 @@
1
- import{_ as e,c as o,o as t,a5 as a}from"./chunks/framework.CvEKxEoK.js";const f=JSON.parse(`{"title":"How it's made","description":"","frontmatter":{},"headers":[],"relativePath":"pages/how-its-made.md","filePath":"pages/how-its-made.md"}`),i={name:"pages/how-its-made.md"},s=a('<h1 id="how-it-s-made" tabindex="-1">How it&#39;s made <a class="header-anchor" href="#how-it-s-made" aria-label="Permalink to &quot;How it&#39;s made&quot;">​</a></h1><h2 id="original-inspiration" tabindex="-1">Original Inspiration <a class="header-anchor" href="#original-inspiration" aria-label="Permalink to &quot;Original Inspiration&quot;">​</a></h2><p>The original inspiration for <code>ivue</code> comes from <code>MobX</code> React state management library, where something similar is attempted to create a class based reactive observable architecture.</p><h2 id="epiphany" tabindex="-1">Epiphany <a class="header-anchor" href="#epiphany" aria-label="Permalink to &quot;Epiphany&quot;">​</a></h2><p>After building several ports from <code>MobX</code> state management library to <code>VueJS</code> 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.</p><p>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).</p><p><code>ivue</code> relies on this very simple discovery of how to elegantly convert getters into Vue 3 computeds.</p><h2 id="simplicity" tabindex="-1">Simplicity <a class="header-anchor" href="#simplicity" aria-label="Permalink to &quot;Simplicity&quot;">​</a></h2><p>After many iterations where I created a whole inversion of control library for <code>ivue</code>, using lots of different decorators and event Traits, I realized that simplicity is paramount to good architecture.</p><p>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 <code>3</code> core functions: <code>ivue()</code>, <code>.init()</code>, <code>.toRefs()</code> only which are necessary to do everything <code>ivue</code> is set out to do.</p><p>Use Composition API composables inside <code>.init()</code> function.</p><h2 id="minimalism" tabindex="-1">Minimalism <a class="header-anchor" href="#minimalism" aria-label="Permalink to &quot;Minimalism&quot;">​</a></h2><p>Thus <code>ivue</code> has minimal surface area of the API making it very robust and easy to test. By default <code>ivue</code> does not rely on decorators, though you can use decorators if you wish to.</p><h2 id="the-rest-is-up-to-you" tabindex="-1">The Rest is Up To You <a class="header-anchor" href="#the-rest-is-up-to-you" aria-label="Permalink to &quot;The Rest is Up To You&quot;">​</a></h2><p><code>ivue</code> is like a small mustard seed core for the big tree trunk of Class Based Reactive applications to be built around it, that&#39;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 <code>ivue</code> 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 <code>ivue</code> better.</p>',15),r=[s];function n(c,d,l,h,u,p){return t(),o("div",null,r)}const y=e(i,[["render",n]]);export{f as __pageData,y as default};
@@ -1 +0,0 @@
1
- import{_ as i}from"./chunks/Button.vue_vue_type_script_setup_true_lang.Bynntqk6.js";import{d as o,c as a,j as e,a as t,I as s,a5 as n,o as c}from"./chunks/framework.CvEKxEoK.js";const r=n('<h1 id="what-is-ivue-∞-infinite-vue" tabindex="-1">What is <span style="font-family:&#39;Public Sans&#39;;">ivue ∞ Infinite Vue</span>? <a class="header-anchor" href="#what-is-ivue-∞-infinite-vue" aria-label="Permalink to &quot;What is &lt;span style=&quot;font-family: &#39;Public Sans&#39;; &quot;&gt;ivue ∞ Infinite Vue&lt;/span&gt;?&quot;">​</a></h1><h2 id="the-problem" tabindex="-1">The Problem <a class="header-anchor" href="#the-problem" aria-label="Permalink to &quot;The Problem&quot;">​</a></h2><p>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.</p><p>While providing greater flexibility and composability the Composition API has its own downsides, one of them is having to use <code>.value</code> to refer to the reactive variables which makes the development process more clunky when the App reaches a certain size.</p><p>As you may know, <code>reactvity-transform</code> macros were an attempt to mitigate those issues, which turned out to create even more issues, and was discontinued.</p><p>See: <a href="https://vuejs.org/guide/extras/reactivity-transform.html" target="_blank" rel="noreferrer">VueJs.org – Reactivity Transform</a></p><h2 id="ivue-is" tabindex="-1"><code>ivue</code> is <a class="header-anchor" href="#ivue-is" aria-label="Permalink to &quot;`ivue` is&quot;">​</a></h2><div style="padding-left:20px;font-size:1.2rem;line-height:2rem;"> –  Simple like Options API<br> –  Flexible like Composition API<br> –  Extensible like TypeScript Class API<br> –  Robust, Minimal, Opaque &amp; Unobtrusive<br> –  100% Vue 3 Compatible<br> –  100% Test Covered<br> –  100% Type Safe<br> –  Production Ready<br> –  Just <code>1.1kb</code> gzipped!<br> –  100% VSCode / Intellij IDE Auto-complete Intellisence<br></div><p><code>ivue</code> is a powerful tool because it fully aligns itself with JavaScript / TypeScript Class API.</p><p><code>ivue</code> gives you a class based Composable capabilities with Inheritance and all the power of TypeScript Classes.</p><p><code>ivue</code> 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.</p><p><code>ivue</code> is fully interoperable with Composition API and does not work against, but rather with it, so you can use all of ecosystems composables seamlessly.</p><p><code>ivue</code> also offers a set of functions and utility types to make extensible &amp; exportable props defaults, extensible emits and extensible slots possible.</p><h2 id="classes-in-the-ecosystem" tabindex="-1">Classes in the Ecosystem <a class="header-anchor" href="#classes-in-the-ecosystem" aria-label="Permalink to &quot;Classes in the Ecosystem&quot;">​</a></h2><p>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.</p><p>While procedural programming has its strength, it also comes with its own weaknesses, like lack of inheritance, lack of <code>this</code> context, and thus lack of true composition.</p><div class="info custom-block"><p class="custom-block-title">IVUE IS DIFFERENT</p><p>–  <code>ivue</code> does NOT inherit from a base class<br> –  <code>ivue</code> does NOT use decorators to achieve its objectives<br> –  <code>ivue</code> does NOT alter Vue 3 underlying behavior<br> –  <code>ivue</code> is NOT the same as class components (though you can build components with it)<br></p></div><h2 id="infinite-vue-class-achitecture" tabindex="-1">Infinite Vue Class Achitecture <a class="header-anchor" href="#infinite-vue-class-achitecture" aria-label="Permalink to &quot;Infinite Vue Class Achitecture&quot;">​</a></h2><p><code>ivue</code> replicates native JavaScript / TypeScript class implementation by extending descriptors (getters and setters) up the whole prototype ancestors chain thus supporting classical inheritance.</p><p>By using TypeScript we are able to infer the arguments of the main <code>ivue()</code> initializer function and pass the arguments to the constructor.</p><p><code>ivue()</code> initializer function returns a reactive object with getters converted to computeds and adds <code>.toRefs()</code> method to the object, <code>.toRefs()</code> allows the object to be converted to native composable structure, so it can interoperate as a composable if needed.</p><p><code>ivue</code> 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 <code>.init()</code></p>',22),l=e("code",null,"ivue",-1),d=e("h2",{id:"when-to-use-infinite-vue",tabindex:"-1"},[t("When to use Infinite Vue? "),e("a",{class:"header-anchor",href:"#when-to-use-infinite-vue","aria-label":'Permalink to "When to use Infinite Vue?"'},"​")],-1),u=e("p",null,[t("When the complexity of your app or components becomes very high using "),e("code",null,"ivue"),t(" can become a natural choice to deal with that complexity. Because "),e("code",null,".value"),t(" is abstracted away in "),e("code",null,"ivue"),t(", everything is simply a reactive object of Refs.")],-1),g=JSON.parse('{"title":"What is ivue ∞ Infinite Vue?","description":"","frontmatter":{},"headers":[],"relativePath":"pages/introduction.md","filePath":"pages/introduction.md"}'),p={name:"pages/introduction.md"},y=o({...p,setup(h){return(m,b)=>(c(),a("div",null,[r,e("p",null,[t("You can read more about "),l,t(" internal architecture in "),s(i,{href:"/pages/how-it-works",label:"How it works?"}),t(" page.")]),d,u]))}});export{g as __pageData,y as default};
@@ -1 +0,0 @@
1
- import{_ as i}from"./chunks/Button.vue_vue_type_script_setup_true_lang.Bynntqk6.js";import{d as o,c as a,j as e,a as t,I as s,a5 as n,o as c}from"./chunks/framework.CvEKxEoK.js";const r=n('<h1 id="what-is-ivue-∞-infinite-vue" tabindex="-1">What is <span style="font-family:&#39;Public Sans&#39;;">ivue ∞ Infinite Vue</span>? <a class="header-anchor" href="#what-is-ivue-∞-infinite-vue" aria-label="Permalink to &quot;What is &lt;span style=&quot;font-family: &#39;Public Sans&#39;; &quot;&gt;ivue ∞ Infinite Vue&lt;/span&gt;?&quot;">​</a></h1><h2 id="the-problem" tabindex="-1">The Problem <a class="header-anchor" href="#the-problem" aria-label="Permalink to &quot;The Problem&quot;">​</a></h2><p>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.</p><p>While providing greater flexibility and composability the Composition API has its own downsides, one of them is having to use <code>.value</code> to refer to the reactive variables which makes the development process more clunky when the App reaches a certain size.</p><p>As you may know, <code>reactvity-transform</code> macros were an attempt to mitigate those issues, which turned out to create even more issues, and was discontinued.</p><p>See: <a href="https://vuejs.org/guide/extras/reactivity-transform.html" target="_blank" rel="noreferrer">VueJs.org – Reactivity Transform</a></p><h2 id="ivue-is" tabindex="-1"><code>ivue</code> is <a class="header-anchor" href="#ivue-is" aria-label="Permalink to &quot;`ivue` is&quot;">​</a></h2><div style="padding-left:20px;font-size:1.2rem;line-height:2rem;"> –  Simple like Options API<br> –  Flexible like Composition API<br> –  Extensible like TypeScript Class API<br> –  Robust, Minimal, Opaque &amp; Unobtrusive<br> –  100% Vue 3 Compatible<br> –  100% Test Covered<br> –  100% Type Safe<br> –  Production Ready<br> –  Just <code>1.1kb</code> gzipped!<br> –  100% VSCode / Intellij IDE Auto-complete Intellisence<br></div><p><code>ivue</code> is a powerful tool because it fully aligns itself with JavaScript / TypeScript Class API.</p><p><code>ivue</code> gives you a class based Composable capabilities with Inheritance and all the power of TypeScript Classes.</p><p><code>ivue</code> 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.</p><p><code>ivue</code> is fully interoperable with Composition API and does not work against, but rather with it, so you can use all of ecosystems composables seamlessly.</p><p><code>ivue</code> also offers a set of functions and utility types to make extensible &amp; exportable props defaults, extensible emits and extensible slots possible.</p><h2 id="classes-in-the-ecosystem" tabindex="-1">Classes in the Ecosystem <a class="header-anchor" href="#classes-in-the-ecosystem" aria-label="Permalink to &quot;Classes in the Ecosystem&quot;">​</a></h2><p>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.</p><p>While procedural programming has its strength, it also comes with its own weaknesses, like lack of inheritance, lack of <code>this</code> context, and thus lack of true composition.</p><div class="info custom-block"><p class="custom-block-title">IVUE IS DIFFERENT</p><p>–  <code>ivue</code> does NOT inherit from a base class<br> –  <code>ivue</code> does NOT use decorators to achieve its objectives<br> –  <code>ivue</code> does NOT alter Vue 3 underlying behavior<br> –  <code>ivue</code> is NOT the same as class components (though you can build components with it)<br></p></div><h2 id="infinite-vue-class-achitecture" tabindex="-1">Infinite Vue Class Achitecture <a class="header-anchor" href="#infinite-vue-class-achitecture" aria-label="Permalink to &quot;Infinite Vue Class Achitecture&quot;">​</a></h2><p><code>ivue</code> replicates native JavaScript / TypeScript class implementation by extending descriptors (getters and setters) up the whole prototype ancestors chain thus supporting classical inheritance.</p><p>By using TypeScript we are able to infer the arguments of the main <code>ivue()</code> initializer function and pass the arguments to the constructor.</p><p><code>ivue()</code> initializer function returns a reactive object with getters converted to computeds and adds <code>.toRefs()</code> method to the object, <code>.toRefs()</code> allows the object to be converted to native composable structure, so it can interoperate as a composable if needed.</p><p><code>ivue</code> 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 <code>.init()</code></p>',22),l=e("code",null,"ivue",-1),d=e("h2",{id:"when-to-use-infinite-vue",tabindex:"-1"},[t("When to use Infinite Vue? "),e("a",{class:"header-anchor",href:"#when-to-use-infinite-vue","aria-label":'Permalink to "When to use Infinite Vue?"'},"​")],-1),u=e("p",null,[t("When the complexity of your app or components becomes very high using "),e("code",null,"ivue"),t(" can become a natural choice to deal with that complexity. Because "),e("code",null,".value"),t(" is abstracted away in "),e("code",null,"ivue"),t(", everything is simply a reactive object of Refs.")],-1),g=JSON.parse('{"title":"What is ivue ∞ Infinite Vue?","description":"","frontmatter":{},"headers":[],"relativePath":"pages/introduction.md","filePath":"pages/introduction.md"}'),p={name:"pages/introduction.md"},y=o({...p,setup(h){return(m,b)=>(c(),a("div",null,[r,e("p",null,[t("You can read more about "),l,t(" internal architecture in "),s(i,{href:"/pages/how-it-works",label:"How it works?"}),t(" page.")]),d,u]))}});export{g as __pageData,y as default};