ivue 1.2.4 → 1.3.0

package/docs/docs/.vitepress/dist/assets/{pages_introduction.md.MtnX0UvH.lean.js → pages_introduction.md.B6foeVXQ.lean.js}

@@ -1 +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 r}from"./chunks/framework.CvEKxEoK.js";const c=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, extensible slots, etc. and much more possible.</p><p><code>ivue</code> aims to be opaque, by giving the developer the Class API reactivity system.</p><p><code>ivue</code> omits custom implementations of IOC Container, Decorators, Mixins, etc. by design.</p><p><code>ivue</code> enforces a sane default standard of operation to contain the ever flexible Class API.</p><p><code>ivue</code> uses Powerful Cutting Edge TypeScript to transform Vue 3 Refs to their base types, infer Class constructor arguments, infer Composable return types and function arguments and much more, making Object Oriented DX Experience with Vue 3 a breeze.</p><h2 id="oop-and-typescript-class-api-in-the-ecosystem" tabindex="-1">OOP and TypeScript Class API in the Ecosystem <a class="header-anchor" href="#oop-and-typescript-class-api-in-the-ecosystem" aria-label="Permalink to &quot;OOP and TypeScript Class API 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><h2 id="ivue-is-different" tabindex="-1"><code>ivue</code> is different <a class="header-anchor" href="#ivue-is-different" aria-label="Permalink to &quot;`ivue` is different&quot;">​</a></h2><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, but rather relies on it.<br> —  <code>ivue</code> is NOT Class Components (though you can build components with it).<br></p><div class="tip custom-block"><p class="custom-block-title">IVUE IMPLEMENTS MINIMAL API ARCHITECTURE</p><p>Things like IOC Container, Decorators, Traits, Mixins, etc. were omitted by design to slim down the surface area and scope of <code>ivue</code> core purpose, which was JavaScript / TypeScript Class API based reactivity. Any Traits, Decorators &amp; IOC Container can be built around it using third-party libraries or roll your own systems. You are more than welcome to contribute in this area!</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>',28),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),p=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),y=JSON.parse('{"title":"What is ivue ∞ Infinite Vue?","description":"","frontmatter":{},"headers":[],"relativePath":"pages/introduction.md","filePath":"pages/introduction.md"}'),u={name:"pages/introduction.md"},g=o({...u,setup(h){return(m,f)=>(r(),a("div",null,[c,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,p]))}});export{y as __pageData,g as default};
+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 r}from"./chunks/framework.CvEKxEoK.js";const c=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, extensible slots, etc. and much more possible.</p><p><code>ivue</code> aims to be opaque, by giving the developer the Class API reactivity system.</p><p><code>ivue</code> omits custom implementations of IOC Container, Decorators, Mixins, etc. by design.</p><p><code>ivue</code> enforces a sane default standard of operation to contain the ever flexible Class API.</p><p><code>ivue</code> uses Powerful Cutting Edge TypeScript to transform Vue 3 Refs to their base types, infer Class constructor arguments, infer Composable return types and function arguments and much more, making Object Oriented DX Experience with Vue 3 a breeze.</p><h2 id="oop-and-typescript-class-api-in-the-ecosystem" tabindex="-1">OOP and TypeScript Class API in the Ecosystem <a class="header-anchor" href="#oop-and-typescript-class-api-in-the-ecosystem" aria-label="Permalink to &quot;OOP and TypeScript Class API 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><h2 id="ivue-is-different" tabindex="-1"><code>ivue</code> is different <a class="header-anchor" href="#ivue-is-different" aria-label="Permalink to &quot;`ivue` is different&quot;">​</a></h2><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, but rather relies on it.<br> —  <code>ivue</code> is NOT Class Components (though you can build components with it).<br></p><div class="tip custom-block"><p class="custom-block-title">IVUE IMPLEMENTS MINIMAL API ARCHITECTURE</p><p>Things like IOC Container, Decorators, Traits, Mixins, etc. were omitted by design to slim down the surface area and scope of <code>ivue</code> core purpose, which was JavaScript / TypeScript Class API based reactivity. Any Traits, Decorators &amp; IOC Container can be built around it using third-party libraries or roll your own systems. You are more than welcome to contribute in this area!</p></div><h2 id="infinite-vue-class-architecture" tabindex="-1">Infinite Vue Class Architecture <a class="header-anchor" href="#infinite-vue-class-architecture" aria-label="Permalink to &quot;Infinite Vue Class Architecture&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>',28),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),p=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),y=JSON.parse('{"title":"What is ivue ∞ Infinite Vue?","description":"","frontmatter":{},"headers":[],"relativePath":"pages/introduction.md","filePath":"pages/introduction.md"}'),u={name:"pages/introduction.md"},g=o({...u,setup(h){return(m,f)=>(r(),a("div",null,[c,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,p]))}});export{y as __pageData,g as default};