ivue 1.0.2 → 1.0.3

package/docs/docs/.vitepress/dist/assets/pages_getting-started.md.COGFS1PH.js

@@ -0,0 +1,8 @@
+import{_ as s,c as a,o as i,a5 as t}from"./chunks/framework.CNtPHGsN.js";const _=JSON.parse('{"title":"Getting Started","description":"","frontmatter":{},"headers":[],"relativePath":"pages/getting-started.md","filePath":"pages/getting-started.md"}'),e={name:"pages/getting-started.md"},n=t(`<h1 id="getting-started" tabindex="-1">Getting Started <a class="header-anchor" href="#getting-started" aria-label="Permalink to &quot;Getting Started&quot;">​</a></h1><h2 id="install" tabindex="-1">Install <a class="header-anchor" href="#install" aria-label="Permalink to &quot;Install&quot;">​</a></h2><p>The only dependency for <code>ivue</code> is Vue 3, so it is easy to get started.</p><p>In your terminal install <code>ivue</code> using:</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># yarn</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> ivue</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># npm</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> i</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> ivue</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># pnpm</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> i</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> ivue</span></span></code></pre></div>`,5),l=[n];function p(h,r,d,o,c,k){return i(),a("div",null,l)}const F=s(e,[["render",p]]);export{_ as __pageData,F as default};

package/docs/docs/.vitepress/dist/assets/pages_getting-started.md.COGFS1PH.lean.js

@@ -0,0 +1 @@
+import{_ as s,c as a,o as i,a5 as t}from"./chunks/framework.CNtPHGsN.js";const _=JSON.parse('{"title":"Getting Started","description":"","frontmatter":{},"headers":[],"relativePath":"pages/getting-started.md","filePath":"pages/getting-started.md"}'),e={name:"pages/getting-started.md"},n=t("",5),l=[n];function p(h,r,d,o,c,k){return i(),a("div",null,l)}const F=s(e,[["render",p]]);export{_ as __pageData,F as default};

package/docs/docs/.vitepress/dist/assets/{pages_how-it-works.md.DKizt6Ny.js → pages_how-it-works.md.DEn1nBQc.js}

@@ -1 +1 @@
-import{_ as e,c as t,o}from"./chunks/framework.CEhE-9HF.js";const m=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"pages/how-it-works.md","filePath":"pages/how-it-works.md"}'),a={name:"pages/how-it-works.md"};function s(r,c,n,p,i,_){return o(),t("div")}const f=e(a,[["render",s]]);export{m as __pageData,f as default};
+import{_ as e,c as t,o}from"./chunks/framework.CNtPHGsN.js";const m=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"pages/how-it-works.md","filePath":"pages/how-it-works.md"}'),a={name:"pages/how-it-works.md"};function s(r,c,n,p,i,_){return o(),t("div")}const f=e(a,[["render",s]]);export{m as __pageData,f as default};

package/docs/docs/.vitepress/dist/assets/{pages_how-it-works.md.DKizt6Ny.lean.js → pages_how-it-works.md.DEn1nBQc.lean.js}

@@ -1 +1 @@
-import{_ as e,c as t,o}from"./chunks/framework.CEhE-9HF.js";const m=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"pages/how-it-works.md","filePath":"pages/how-it-works.md"}'),a={name:"pages/how-it-works.md"};function s(r,c,n,p,i,_){return o(),t("div")}const f=e(a,[["render",s]]);export{m as __pageData,f as default};
+import{_ as e,c as t,o}from"./chunks/framework.CNtPHGsN.js";const m=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"pages/how-it-works.md","filePath":"pages/how-it-works.md"}'),a={name:"pages/how-it-works.md"};function s(r,c,n,p,i,_){return o(),t("div")}const f=e(a,[["render",s]]);export{m as __pageData,f as default};

package/docs/docs/.vitepress/dist/assets/pages_introduction.md.UHEKhynF.js

@@ -0,0 +1 @@
+import{_ as i}from"./chunks/Button.vue_vue_type_script_setup_true_lang.P7niV-n8.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.CNtPHGsN.js";const r=n('<h1 id="what-is-infinite-vue-ivue" tabindex="-1">What is Infinite Vue (ivue) ? <a class="header-anchor" href="#what-is-infinite-vue-ivue" aria-label="Permalink to &quot;What is Infinite Vue (ivue) ?&quot;">​</a></h1><h2 id="the-problem-ivue-aims-to-solve" tabindex="-1">The Problem <code>ivue</code> Aims to Solve <a class="header-anchor" href="#the-problem-ivue-aims-to-solve" aria-label="Permalink to &quot;The Problem `ivue` Aims to Solve&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 some of 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">https://vuejs.org/guide/extras/reactivity-transform.html</a></p><div class="info custom-block"><p class="custom-block-title">IVUE UNIFIES COMPOSITION &amp; OPTIONS API VIA CLASS BASED ARCHITECTURE</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 scallable apps.</p><p>—  <code>ivue</code> 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.</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></div><h2 id="classes-are-back-with-full-vue-3-compatibility-beyond" tabindex="-1">Classes are Back with Full Vue 3 Compatibility &amp; Beyond <a class="header-anchor" href="#classes-are-back-with-full-vue-3-compatibility-beyond" aria-label="Permalink to &quot;Classes are Back with Full Vue 3 Compatibility &amp; Beyond&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 and 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-achitecture" tabindex="-1">Infinite Vue Achitecture <a class="header-anchor" href="#infinite-vue-achitecture" aria-label="Permalink to &quot;Infinite Vue Achitecture&quot;">​</a></h2><p><code>ivue</code> mimicks native JavaScript / TypeScript class implementation by extending descriptors (getters and setters) up the whole prototype 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>',16),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 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 unwrapped Refs.")],-1),g=JSON.parse('{"title":"What is Infinite Vue (ivue) ?","description":"","frontmatter":{},"headers":[],"relativePath":"pages/introduction.md","filePath":"pages/introduction.md"}'),h={name:"pages/introduction.md"},y=o({...h,setup(p){return(m,v)=>(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};

package/docs/docs/.vitepress/dist/assets/pages_introduction.md.UHEKhynF.lean.js

@@ -0,0 +1 @@
+import{_ as i}from"./chunks/Button.vue_vue_type_script_setup_true_lang.P7niV-n8.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.CNtPHGsN.js";const r=n('<h1 id="what-is-infinite-vue-ivue" tabindex="-1">What is Infinite Vue (ivue) ? <a class="header-anchor" href="#what-is-infinite-vue-ivue" aria-label="Permalink to &quot;What is Infinite Vue (ivue) ?&quot;">​</a></h1><h2 id="the-problem-ivue-aims-to-solve" tabindex="-1">The Problem <code>ivue</code> Aims to Solve <a class="header-anchor" href="#the-problem-ivue-aims-to-solve" aria-label="Permalink to &quot;The Problem `ivue` Aims to Solve&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 some of 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">https://vuejs.org/guide/extras/reactivity-transform.html</a></p><div class="info custom-block"><p class="custom-block-title">IVUE UNIFIES COMPOSITION &amp; OPTIONS API VIA CLASS BASED ARCHITECTURE</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 scallable apps.</p><p>—  <code>ivue</code> 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.</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></div><h2 id="classes-are-back-with-full-vue-3-compatibility-beyond" tabindex="-1">Classes are Back with Full Vue 3 Compatibility &amp; Beyond <a class="header-anchor" href="#classes-are-back-with-full-vue-3-compatibility-beyond" aria-label="Permalink to &quot;Classes are Back with Full Vue 3 Compatibility &amp; Beyond&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 and 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-achitecture" tabindex="-1">Infinite Vue Achitecture <a class="header-anchor" href="#infinite-vue-achitecture" aria-label="Permalink to &quot;Infinite Vue Achitecture&quot;">​</a></h2><p><code>ivue</code> mimicks native JavaScript / TypeScript class implementation by extending descriptors (getters and setters) up the whole prototype 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>',16),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 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 unwrapped Refs.")],-1),g=JSON.parse('{"title":"What is Infinite Vue (ivue) ?","description":"","frontmatter":{},"headers":[],"relativePath":"pages/introduction.md","filePath":"pages/introduction.md"}'),h={name:"pages/introduction.md"},y=o({...h,setup(p){return(m,v)=>(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};