ivue 1.0.3 → 1.0.4

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 (101) hide show
  1. package/README.md +23 -7
  2. package/coverage/clover.xml +156 -156
  3. package/coverage/coverage-final.json +1 -1
  4. package/coverage/index.html +17 -17
  5. package/coverage/index.ts.html +70 -85
  6. package/dist/index.es.js +74 -90
  7. package/dist/index.umd.js +1 -1
  8. package/dist/src/index.d.ts +1 -199
  9. package/dist/src/ivue.d.ts +218 -0
  10. package/docs/docs/.vitepress/config.ts +94 -29
  11. package/docs/docs/.vitepress/dist/404.html +4 -4
  12. package/docs/docs/.vitepress/dist/api/ivue.html +6 -6
  13. package/docs/docs/.vitepress/dist/api/propsWithDefaults.html +6 -6
  14. package/docs/docs/.vitepress/dist/assets/{app.CbDr3eFe.js → app.ConZRsN0.js} +1 -1
  15. package/docs/docs/.vitepress/dist/assets/chunks/@localSearchIndexroot.CGLWArGd.js +1 -0
  16. package/docs/docs/.vitepress/dist/assets/chunks/{VPLocalSearchBox.C1TPvqwb.js → VPLocalSearchBox.C7VDyivS.js} +1 -1
  17. package/docs/docs/.vitepress/dist/assets/chunks/index.es.DnWLDAUc.js +1 -0
  18. package/docs/docs/.vitepress/dist/assets/chunks/{theme.DSY3Mj9W.js → theme.B7n-r1TY.js} +2 -2
  19. package/docs/docs/.vitepress/dist/assets/index.md.wPLoTLBY.js +1 -0
  20. package/docs/docs/.vitepress/dist/assets/index.md.wPLoTLBY.lean.js +1 -0
  21. package/docs/docs/.vitepress/dist/assets/pages_advanced-usage.md.BZgX-VP7.js +1 -0
  22. package/docs/docs/.vitepress/dist/assets/pages_advanced-usage.md.BZgX-VP7.lean.js +1 -0
  23. package/docs/docs/.vitepress/dist/assets/pages_api.md.C_PvCZns.js +7 -0
  24. package/docs/docs/.vitepress/dist/assets/pages_api.md.C_PvCZns.lean.js +7 -0
  25. package/docs/docs/.vitepress/dist/assets/pages_browse-code.md.CPluoaap.js +1 -0
  26. package/docs/docs/.vitepress/dist/assets/pages_browse-code.md.CPluoaap.lean.js +1 -0
  27. package/docs/docs/.vitepress/dist/assets/pages_getting-started.md.knQcOZyP.js +8 -0
  28. package/docs/docs/.vitepress/dist/assets/pages_getting-started.md.knQcOZyP.lean.js +1 -0
  29. package/docs/docs/.vitepress/dist/assets/pages_guidelines.md.DddPdPom.js +101 -0
  30. package/docs/docs/.vitepress/dist/assets/pages_guidelines.md.DddPdPom.lean.js +101 -0
  31. package/docs/docs/.vitepress/dist/assets/pages_how-it-works.md.OJGcGEXF.js +4 -0
  32. package/docs/docs/.vitepress/dist/assets/pages_how-it-works.md.OJGcGEXF.lean.js +4 -0
  33. package/docs/docs/.vitepress/dist/assets/pages_how-its-made.md.Vv9Z9TEi.js +1 -0
  34. package/docs/docs/.vitepress/dist/assets/pages_how-its-made.md.Vv9Z9TEi.lean.js +1 -0
  35. package/docs/docs/.vitepress/dist/assets/pages_introduction.md.DrDm-R8F.js +1 -0
  36. package/docs/docs/.vitepress/dist/assets/pages_introduction.md.DrDm-R8F.lean.js +1 -0
  37. package/docs/docs/.vitepress/dist/assets/pages_usage.md.zSOVjtFF.js +430 -0
  38. package/docs/docs/.vitepress/dist/assets/pages_usage.md.zSOVjtFF.lean.js +430 -0
  39. package/docs/docs/.vitepress/dist/assets/style.Fgx7OB_D.css +1 -0
  40. package/docs/docs/.vitepress/dist/hashmap.json +1 -1
  41. package/docs/docs/.vitepress/dist/index.html +7 -7
  42. package/docs/docs/.vitepress/dist/pages/advanced-usage.html +24 -0
  43. package/docs/docs/.vitepress/dist/pages/api.html +30 -0
  44. package/docs/docs/.vitepress/dist/pages/browse-code.html +24 -0
  45. package/docs/docs/.vitepress/dist/pages/getting-started.html +8 -8
  46. package/docs/docs/.vitepress/dist/pages/guidelines.html +125 -0
  47. package/docs/docs/.vitepress/dist/pages/how-it-works.html +10 -7
  48. package/docs/docs/.vitepress/dist/pages/how-its-made.html +24 -0
  49. package/docs/docs/.vitepress/dist/pages/introduction.html +7 -7
  50. package/docs/docs/.vitepress/dist/pages/usage.html +230 -74
  51. package/docs/docs/.vitepress/theme/index.js +5 -0
  52. package/docs/docs/.vitepress/theme/main.css +29 -0
  53. package/docs/docs/components/Button.vue +1 -1
  54. package/docs/docs/components/guidelines/CounterExternalRefsDetailed.vue +41 -0
  55. package/docs/docs/components/{examples → usage}/CounterBasic.vue +1 -1
  56. package/docs/docs/components/{examples → usage}/CounterComposables.vue +4 -5
  57. package/docs/docs/components/usage/CounterComposablesDestructuring.vue +46 -0
  58. package/docs/docs/components/usage/CounterComputeds.vue +25 -0
  59. package/docs/docs/components/usage/CounterComputedsDisabled.vue +32 -0
  60. package/docs/docs/components/{examples → usage}/CounterDefineExpose.vue +1 -1
  61. package/docs/docs/components/usage/CounterDefineExposeAdvanced.vue +25 -0
  62. package/docs/docs/components/{examples → usage}/CounterExternalRefs.vue +2 -2
  63. package/docs/docs/components/usage/CounterInsideComposables.vue +27 -0
  64. package/docs/docs/components/{examples → usage}/CounterInternalRefs.vue +1 -1
  65. package/docs/docs/components/usage/CounterLifecycleHooks.vue +22 -0
  66. package/docs/docs/components/usage/CounterWatch.vue +25 -0
  67. package/docs/docs/components/{examples → usage}/CounterWithProps.vue +1 -1
  68. package/docs/docs/components/{examples → usage}/CounterWithPropsAndEmits.vue +1 -1
  69. package/docs/docs/components/usage/functions/useMouse.ts +22 -0
  70. package/docs/docs/index.md +7 -6
  71. package/docs/docs/pages/advanced-usage.md +11 -0
  72. package/docs/docs/pages/api.md +106 -0
  73. package/docs/docs/pages/browse-code.md +18 -0
  74. package/docs/docs/pages/getting-started.md +14 -0
  75. package/docs/docs/pages/guidelines.md +128 -0
  76. package/docs/docs/pages/how-it-works.md +71 -0
  77. package/docs/docs/pages/how-its-made.md +32 -0
  78. package/docs/docs/pages/introduction.md +30 -21
  79. package/docs/docs/pages/usage.md +178 -50
  80. package/docs/package.json +2 -2
  81. package/package.json +4 -2
  82. package/src/__tests__/ivue.vitest.spec.ts +228 -132
  83. package/src/index.ts +1 -461
  84. package/src/ivue.ts +495 -0
  85. package/vite.config.ts +4 -0
  86. package/docs/.env +0 -1
  87. package/docs/docs/.vitepress/dist/assets/chunks/@localSearchIndexroot.xSEJiuF6.js +0 -1
  88. package/docs/docs/.vitepress/dist/assets/index.md.CktQD561.js +0 -1
  89. package/docs/docs/.vitepress/dist/assets/index.md.CktQD561.lean.js +0 -1
  90. package/docs/docs/.vitepress/dist/assets/pages_getting-started.md.COGFS1PH.js +0 -8
  91. package/docs/docs/.vitepress/dist/assets/pages_getting-started.md.COGFS1PH.lean.js +0 -1
  92. package/docs/docs/.vitepress/dist/assets/pages_how-it-works.md.DEn1nBQc.js +0 -1
  93. package/docs/docs/.vitepress/dist/assets/pages_how-it-works.md.DEn1nBQc.lean.js +0 -1
  94. package/docs/docs/.vitepress/dist/assets/pages_introduction.md.UHEKhynF.js +0 -1
  95. package/docs/docs/.vitepress/dist/assets/pages_introduction.md.UHEKhynF.lean.js +0 -1
  96. package/docs/docs/.vitepress/dist/assets/pages_usage.md.B75xObUi.js +0 -275
  97. package/docs/docs/.vitepress/dist/assets/pages_usage.md.B75xObUi.lean.js +0 -275
  98. package/docs/docs/.vitepress/dist/assets/style.DamVQLpl.css +0 -1
  99. package/docs/docs/components/examples/CounterComposablesDestructuring.vue +0 -66
  100. package/vitest.config.ts.timestamp-1723424289354-74cf8d2d72cb7.mjs +0 -162
  101. /package/docs/docs/components/{examples → usage}/CounterDefineExposeClass.ts +0 -0
package/docs/docs/.vitepress/dist/pages/how-it-works.html CHANGED
@@ -3,22 +3,25 @@
3
3
  <head>
4
4
  <meta charset="utf-8">
5
5
  <meta name="viewport" content="width=device-width,initial-scale=1">
6
- <title>VitePress</title>
6
+ <title>How it works? | Infinite Vue ∞ ivue</title>
7
7
  <meta name="description" content="A VitePress site">
8
8
  <meta name="generator" content="VitePress v1.3.2">
9
- <link rel="preload stylesheet" href="/ivue/assets/style.DamVQLpl.css" as="style">
9
+ <link rel="preload stylesheet" href="/ivue/assets/style.Fgx7OB_D.css" as="style">
10
10
 
11
- <script type="module" src="/ivue/assets/app.CbDr3eFe.js"></script>
11
+ <script type="module" src="/ivue/assets/app.ConZRsN0.js"></script>
12
12
  <link rel="preload" href="/ivue/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
13
- <link rel="modulepreload" href="/ivue/assets/chunks/theme.DSY3Mj9W.js">
13
+ <link rel="modulepreload" href="/ivue/assets/chunks/theme.B7n-r1TY.js">
14
14
  <link rel="modulepreload" href="/ivue/assets/chunks/framework.CNtPHGsN.js">
15
- <link rel="modulepreload" href="/ivue/assets/pages_how-it-works.md.DEn1nBQc.lean.js">
15
+ <link rel="modulepreload" href="/ivue/assets/pages_how-it-works.md.OJGcGEXF.lean.js">
16
16
  <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
17
17
  <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
18
18
  </head>
19
19
  <body>
20
- <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar top" data-v-ae24b3ad data-v-6aa21345><div class="wrapper" data-v-6aa21345><div class="container" data-v-6aa21345><div class="title" data-v-6aa21345><div class="VPNavBarTitle has-sidebar" data-v-6aa21345 data-v-ab179fa1><a class="title" href="/ivue/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>ivue ∞ Infinite Vue</span><!--[--><!--]--></a></div></div><div class="content" data-v-6aa21345><div class="content-body" data-v-6aa21345><!--[--><!--]--><div class="VPNavBarSearch search" data-v-6aa21345><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><!----><!----><div class="VPNavBarAppearance appearance" data-v-6aa21345 data-v-6c893767><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-6c893767 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-6aa21345 data-v-bb2aa2f0 data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-b98bc113><!----><!--[--><!--[--><!----><div class="group" data-v-bb2aa2f0><div class="item appearance" data-v-bb2aa2f0><p class="label" data-v-bb2aa2f0>Appearance</p><div class="appearance-action" data-v-bb2aa2f0><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-bb2aa2f0 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-6aa21345 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-6aa21345><div class="divider-line" data-v-6aa21345></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-17a5e62e><button data-v-17a5e62e>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-319d5ca6><div class="curtain" data-v-319d5ca6></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-319d5ca6><span class="visually-hidden" id="sidebar-aria-label" data-v-319d5ca6> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible has-active" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Guide</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/introduction.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>What is ivue?</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/how-it-works.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>How it works?</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/getting-started.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Getting Started</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Usage</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Basic Usage</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Props</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Emits</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Refs</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Define Expose</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Composables</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Advanced Usage</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Extensible Classes</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Extensible Props</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Extensible Emits</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Extensible Slots</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Extensible Components</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Core Functions</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/api/init.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>ivue</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/api/init.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>.init()</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/api/init.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>.toRefs()</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Utility Functions</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/api/propsWithDefaults.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>propsWithDefaults</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Utility Types</h2><!----></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/types/ExtractPropDefaultTypes.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>ExtractPropDefaultTypes</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/types/ExtractEmitTypes.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>ExtractEmitTypes</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/types/ExtendSlots.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>ExtendSlots</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/types/UnwrapComposable.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>UnwrapComposable</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-3f215769 data-v-a5bbad30><div class="content" data-v-a5bbad30><div class="outline-marker" data-v-a5bbad30></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-a5bbad30>On this page</div><ul class="VPDocOutlineItem root" data-v-a5bbad30 data-v-b933a997><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _ivue_pages_how-it-works" data-v-39a288b8><div></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-e257564d><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-e257564d><span class="visually-hidden" id="doc-footer-aria-label" data-v-e257564d>Pager</span><div class="pager" data-v-e257564d><a class="VPLink link pager-link prev" href="/ivue/pages/introduction.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Previous page</span><span class="title" data-v-e257564d>What is ivue?</span><!--]--></a></div><div class="pager" data-v-e257564d><a class="VPLink link pager-link next" href="/ivue/pages/getting-started.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Next page</span><span class="title" data-v-e257564d>Getting Started</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
21
- <script>window.__VP_HASH_MAP__=JSON.parse("{\"api_ivue.md\":\"MRwb9Lcb\",\"api_propswithdefaults.md\":\"CeE4IC-K\",\"index.md\":\"CktQD561\",\"pages_getting-started.md\":\"COGFS1PH\",\"pages_how-it-works.md\":\"DEn1nBQc\",\"pages_introduction.md\":\"UHEKhynF\",\"pages_usage.md\":\"B75xObUi\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"VitePress\",\"description\":\"A VitePress site\",\"base\":\"/ivue/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"ivue ∞ Infinite Vue\",\"search\":{\"provider\":\"local\"},\"sidebar\":[{\"collapsed\":false,\"text\":\"Guide\",\"items\":[{\"text\":\"What is ivue?\",\"link\":\"/pages/introduction\"},{\"text\":\"How it works?\",\"link\":\"/pages/how-it-works\"},{\"text\":\"Getting Started\",\"link\":\"/pages/getting-started\"}]},{\"collapsed\":false,\"text\":\"Usage\",\"items\":[{\"text\":\"Basic Usage\",\"link\":\"/pages/usage\"},{\"text\":\"Using Props\",\"link\":\"/pages/usage\"},{\"text\":\"Using Emits\",\"link\":\"/pages/usage\"},{\"text\":\"Using Refs\",\"link\":\"/pages/usage\"},{\"text\":\"Using Define Expose\",\"link\":\"/pages/usage\"},{\"text\":\"Using Composables\",\"link\":\"/pages/usage\"}]},{\"collapsed\":false,\"text\":\"Advanced Usage\",\"items\":[{\"text\":\"Extensible Classes\",\"link\":\"/pages/usage\"},{\"text\":\"Extensible Props\",\"link\":\"/pages/usage\"},{\"text\":\"Extensible Emits\",\"link\":\"/pages/usage\"},{\"text\":\"Extensible Slots\",\"link\":\"/pages/usage\"},{\"text\":\"Extensible Components\",\"link\":\"/pages/usage\"}]},{\"collapsed\":false,\"text\":\"Core Functions\",\"items\":[{\"text\":\"ivue\",\"link\":\"/api/init\"},{\"text\":\".init()\",\"link\":\"/api/init\"},{\"text\":\".toRefs()\",\"link\":\"/api/init\"}]},{\"collapsed\":false,\"text\":\"Utility Functions\",\"items\":[{\"text\":\"propsWithDefaults\",\"link\":\"/api/propsWithDefaults\"}]},{\"text\":\"Utility Types\",\"items\":[{\"text\":\"ExtractPropDefaultTypes\",\"link\":\"/types/ExtractPropDefaultTypes\"},{\"text\":\"ExtractEmitTypes\",\"link\":\"/types/ExtractEmitTypes\"},{\"text\":\"ExtendSlots\",\"link\":\"/types/ExtendSlots\"},{\"text\":\"UnwrapComposable\",\"link\":\"/types/UnwrapComposable\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
20
+ <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar top" data-v-ae24b3ad data-v-6aa21345><div class="wrapper" data-v-6aa21345><div class="container" data-v-6aa21345><div class="title" data-v-6aa21345><div class="VPNavBarTitle has-sidebar" data-v-6aa21345 data-v-ab179fa1><a class="title" href="/ivue/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>ivue ∞ Infinite Vue</span><!--[--><!--]--></a></div></div><div class="content" data-v-6aa21345><div class="content-body" data-v-6aa21345><!--[--><!--]--><div class="VPNavBarSearch search" data-v-6aa21345><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><!----><!----><div class="VPNavBarAppearance appearance" data-v-6aa21345 data-v-6c893767><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-6c893767 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-6aa21345 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/infinite-system/ivue" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-eee4e7cb><span class="vpi-social-github" /></a><a class="VPSocialLink no-icon" href="https://x.com/evgenykalash" aria-label="twitter" target="_blank" rel="noopener" data-v-7bc22406 data-v-eee4e7cb><span class="vpi-social-twitter" /></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-6aa21345 data-v-bb2aa2f0 data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-b98bc113><!----><!--[--><!--[--><!----><div class="group" data-v-bb2aa2f0><div class="item appearance" data-v-bb2aa2f0><p class="label" data-v-bb2aa2f0>Appearance</p><div class="appearance-action" data-v-bb2aa2f0><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-bb2aa2f0 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div></div></div><div class="group" data-v-bb2aa2f0><div class="item social-links" data-v-bb2aa2f0><div class="VPSocialLinks social-links-list" data-v-bb2aa2f0 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/infinite-system/ivue" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-eee4e7cb><span class="vpi-social-github" /></a><a class="VPSocialLink no-icon" href="https://x.com/evgenykalash" aria-label="twitter" target="_blank" rel="noopener" data-v-7bc22406 data-v-eee4e7cb><span class="vpi-social-twitter" /></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-6aa21345 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-6aa21345><div class="divider-line" data-v-6aa21345></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-17a5e62e><button data-v-17a5e62e>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-319d5ca6><div class="curtain" data-v-319d5ca6></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-319d5ca6><span class="visually-hidden" id="sidebar-aria-label" data-v-319d5ca6> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible has-active" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Guide</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/introduction.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>What is ivue?</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/how-it-works.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>How it works?</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/getting-started.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Getting Started</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Usage</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#basic-usage" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Basic Usage</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#using-props" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Props</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#using-emits" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Emits</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#using-refs" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Refs</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#using-define-expose" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Define Expose</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#using-composables" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Composables</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#using-inside-composables" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Inside Composables</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#using-computeds" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Computeds</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#using-watch" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Watch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#using-lifecycle-hooks" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Lifecycle Hooks</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Guidelines</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/guidelines.html#dos-and-don-ts" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Dos and Don'ts</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/guidelines.html#constructor-vs-init" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>constructor() vs .init()</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/guidelines.html#unwrapping-refs" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Unwrapping Refs</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/guidelines.html#naming-conventions" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Naming Conventions</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Advanced Usage</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/advanced-usage.html#extend-props-defaults" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Extend Props Defaults</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/advanced-usage.html#extend-props" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Extend Props</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/advanced-usage.html#extend-emits" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Extend Emits</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/advanced-usage.html#extend-slots" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Extend Slots</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/advanced-usage.html#extend-classes" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Extend Classes</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/advanced-usage.html#extend-components" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Extend Components</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b7550ba0><!----><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1" data-v-b7550ba0 data-v-b7550ba0><div class="item" role="button" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><p class="text" data-v-b7550ba0>API</p><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Core Functions</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/api.html#ivue" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>ivue()</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/api.html#init" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>.init()</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/api.html#torefs" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>.toRefs()</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Utility Functions</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/api.html#propswithdefaults" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>propsWithDefaults()</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Utility Types</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/api.html#extractpropdefaulttypes" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>ExtractPropDefaultTypes</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/api.html#extractemittypes" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>ExtractEmitTypes</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/api.html#extendslots" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>ExtendSlots</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/api.html#UseComposable" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>UseComposable</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Source Code</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/browse-code.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Browse Code</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-3f215769 data-v-a5bbad30><div class="content" data-v-a5bbad30><div class="outline-marker" data-v-a5bbad30></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-a5bbad30>On this page</div><ul class="VPDocOutlineItem root" data-v-a5bbad30 data-v-b933a997><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _ivue_pages_how-it-works" data-v-39a288b8><div><h1 id="how-it-works" tabindex="-1">How it works? <a class="header-anchor" href="#how-it-works" aria-label="Permalink to &quot;How it works?&quot;">​</a></h1><h2 id="what-ivue-is-not" tabindex="-1">What ivue is NOT? <a class="header-anchor" href="#what-ivue-is-not" aria-label="Permalink to &quot;What ivue is NOT?&quot;">​</a></h2><p>To understand how ivue works and how it does it, it is important to understand what it does not do.</p><div class="info custom-block"><p class="custom-block-title"><code>ivue</code> is different from other class based libraries</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, but rather relies on it<br> —  <code>ivue</code> is NOT the same as class components (though you can build components with it)</p></div><h2 id="how-it-works-1" tabindex="-1">How it works? <a class="header-anchor" href="#how-it-works-1" aria-label="Permalink to &quot;How it works?&quot;">​</a></h2><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>
21
+ <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>
22
+ <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>
23
+ <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>The main <code>ivue()</code> initializer function uses TypeScript to be able to infer and validate the constrcutor argument types of <code>AnyClass</code> and passes those arguments to the constructor of <code>AnyClass</code>.</p><p><code>ivue</code> allows you to pass any number of arguments into the class <code>constructor(arg1, arg2, arg3, ...etc)</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 chain thus supporting classical inheritance.</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><h2 id="usage-recommendation" tabindex="-1">Usage Recommendation <a class="header-anchor" href="#usage-recommendation" aria-label="Permalink to &quot;Usage Recommendation&quot;">​</a></h2><p><code>ivue</code> recommends all class properties to be defined as <code>ref()</code> to be able to interoperate with <code>defineExpose()</code>, if you simply pass reactive props which are not Refs through <code>defineExpose()</code>, they will lose reactivity. <code>ref()</code> refs just like computed refs get flattened into the <code>reactive()</code> object, so there is no need to worry about using <code>.value</code>. The <code>ref()</code> refs are necessary just internally for Vue 3 to know which refs to keep reactive, and we just convert the types back to their normal types as if they have no reactivity at all, so <code>Ref&lt;number&gt;</code> is <code>number</code> in <code>ivue</code>, so rather than going in the direction of complexifying the types, we are going in the opposite direction towards simplification.</p><p><code>ivue</code> recommends all class functions, getters and setters to be defined in plain full function style (not arrow functions), this allows all <code>ivue</code> classes to be extensible at any point. By using plain standard functions, getters and setters allows for any getter, setter, function or property to be overriden by extending this class. Arrow functions break full extensibility of classes, so avoid using them inside of classes.</p><p>See: <a href="/ivue/pages/guidelines.html">More Guidelines</a></p><h2 id="minimal-api-surface-area" tabindex="-1">Minimal API Surface Area <a class="header-anchor" href="#minimal-api-surface-area" aria-label="Permalink to &quot;Minimal API Surface Area&quot;">​</a></h2><p><code>ivue()</code> initializer function is the main API<br><code>.init()</code> method helps initialize the reactive state like <code>watch</code>, <code>onMount</code>, etc.<br><code>.toRefs()</code> method allows to interoperate with Vue 3 Composables<br> Utility Types help to achieve the rest of <code>ivue</code> capabilities</p><details class="details custom-block"><summary>Click to see the whole latest <code>ivue</code> source code from github main branch below:</summary><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-vjsvp" id="tab-SbEpbcc" checked><label for="tab-SbEpbcc">ivue.ts</label></div><div class="blocks"><div class="language-ts vp-adaptive-theme active line-numbers-mode"><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:#005CC5;--shiki-dark:#79B8FF;"> *</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./ivue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div></details><p>Or <a href="https://github.com/infinite-system/ivue/blob/main/src/index.ts" target="_blank" rel="noreferrer">See on GitHub</a></p><h2 id="_100-vue-3-compatible" tabindex="-1">100% Vue 3 Compatible <a class="header-anchor" href="#_100-vue-3-compatible" aria-label="Permalink to &quot;100% Vue 3 Compatible&quot;">​</a></h2><p><code>.toRefs()</code> allows the object to be converted to Vue 3 native composable structure with full <code>.value</code>s, so it can interoperate with native composables if needed. <code>.toRefs()</code> is also often used to get refs for <code>v-bind()</code> in css styles.</p><h2 id="_100-typescript-support" tabindex="-1">100% TypeScript Support <a class="header-anchor" href="#_100-typescript-support" aria-label="Permalink to &quot;100% TypeScript Support&quot;">​</a></h2><p><code>ivue</code> is on the cutting edge of TypeScript and owes its capabilities to the latest developments in TypeScript.</p><p><code>ivue</code> provides a set of utility types to make working with <code>Vue 3</code> even easier and more scalable.</p><h2 id="_100-unit-tested-architecture" tabindex="-1">100% Unit Tested Architecture <a class="header-anchor" href="#_100-unit-tested-architecture" aria-label="Permalink to &quot;100% Unit Tested Architecture&quot;">​</a></h2><p>At the current stage all of the code that is used to build <code>ivue</code> is 100% tested with 100% coverage, and aims to keep being at 100% always.</p><p>You can clone the project and run <code>yarn test</code> yourself and examine the tests.</p><h2 id="zero-dependencies" tabindex="-1">Zero Dependencies <a class="header-anchor" href="#zero-dependencies" aria-label="Permalink to &quot;Zero Dependencies&quot;">​</a></h2><p><code>ivue</code> has zero dependencies except Vue 3.</p></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-e257564d><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-e257564d><span class="visually-hidden" id="doc-footer-aria-label" data-v-e257564d>Pager</span><div class="pager" data-v-e257564d><a class="VPLink link pager-link prev" href="/ivue/pages/introduction.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Previous page</span><span class="title" data-v-e257564d>What is ivue?</span><!--]--></a></div><div class="pager" data-v-e257564d><a class="VPLink link pager-link next" href="/ivue/pages/getting-started.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Next page</span><span class="title" data-v-e257564d>Getting Started</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
24
+ <script>window.__VP_HASH_MAP__=JSON.parse("{\"api_ivue.md\":\"MRwb9Lcb\",\"api_propswithdefaults.md\":\"CeE4IC-K\",\"index.md\":\"wPLoTLBY\",\"pages_advanced-usage.md\":\"BZgX-VP7\",\"pages_api.md\":\"C_PvCZns\",\"pages_browse-code.md\":\"CPluoaap\",\"pages_getting-started.md\":\"knQcOZyP\",\"pages_guidelines.md\":\"DddPdPom\",\"pages_how-it-works.md\":\"OJGcGEXF\",\"pages_how-its-made.md\":\"Vv9Z9TEi\",\"pages_introduction.md\":\"DrDm-R8F\",\"pages_usage.md\":\"zSOVjtFF\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"VitePress\",\"titleTemplate\":\":title | Infinite Vue ∞ ivue\",\"description\":\"A VitePress site\",\"base\":\"/ivue/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"outline\":\"deep\",\"siteTitle\":\"ivue ∞ Infinite Vue\",\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/infinite-system/ivue\"},{\"icon\":\"twitter\",\"link\":\"https://x.com/evgenykalash\"}],\"search\":{\"provider\":\"local\"},\"sidebar\":[{\"collapsed\":false,\"text\":\"Guide\",\"items\":[{\"text\":\"What is ivue?\",\"link\":\"/pages/introduction\"},{\"text\":\"How it works?\",\"link\":\"/pages/how-it-works\"},{\"text\":\"Getting Started\",\"link\":\"/pages/getting-started\"}]},{\"collapsed\":false,\"text\":\"Usage\",\"items\":[{\"text\":\"Basic Usage\",\"link\":\"/pages/usage#basic-usage\"},{\"text\":\"Using Props\",\"link\":\"/pages/usage#using-props\"},{\"text\":\"Using Emits\",\"link\":\"/pages/usage#using-emits\"},{\"text\":\"Using Refs\",\"link\":\"/pages/usage#using-refs\"},{\"text\":\"Using Define Expose\",\"link\":\"/pages/usage#using-define-expose\"},{\"text\":\"Using Composables\",\"link\":\"/pages/usage#using-composables\"},{\"text\":\"Using Inside Composables\",\"link\":\"/pages/usage#using-inside-composables\"},{\"text\":\"Using Computeds\",\"link\":\"/pages/usage#using-computeds\"},{\"text\":\"Using Watch\",\"link\":\"/pages/usage#using-watch\"},{\"text\":\"Using Lifecycle Hooks\",\"link\":\"/pages/usage#using-lifecycle-hooks\"}]},{\"collapsed\":false,\"text\":\"Guidelines\",\"items\":[{\"text\":\"Dos and Don'ts\",\"link\":\"/pages/guidelines#dos-and-don-ts\"},{\"text\":\"constructor() vs .init()\",\"link\":\"/pages/guidelines#constructor-vs-init\"},{\"text\":\"Unwrapping Refs\",\"link\":\"/pages/guidelines#unwrapping-refs\"},{\"text\":\"Naming Conventions\",\"link\":\"/pages/guidelines#naming-conventions\"}]},{\"collapsed\":false,\"text\":\"Advanced Usage\",\"items\":[{\"text\":\"Extend Props Defaults\",\"link\":\"/pages/advanced-usage#extend-props-defaults\"},{\"text\":\"Extend Props\",\"link\":\"/pages/advanced-usage#extend-props\"},{\"text\":\"Extend Emits\",\"link\":\"/pages/advanced-usage#extend-emits\"},{\"text\":\"Extend Slots\",\"link\":\"/pages/advanced-usage#extend-slots\"},{\"text\":\"Extend Classes\",\"link\":\"/pages/advanced-usage#extend-classes\"},{\"text\":\"Extend Components\",\"link\":\"/pages/advanced-usage#extend-components\"}]},{\"text\":\"API\"},{\"collapsed\":false,\"text\":\"Core Functions\",\"items\":[{\"text\":\"ivue()\",\"link\":\"/pages/api#ivue\"},{\"text\":\".init()\",\"link\":\"/pages/api#init\"},{\"text\":\".toRefs()\",\"link\":\"/pages/api#torefs\"}]},{\"collapsed\":false,\"text\":\"Utility Functions\",\"items\":[{\"text\":\"propsWithDefaults()\",\"link\":\"/pages/api#propswithdefaults\"}]},{\"collapsed\":false,\"text\":\"Utility Types\",\"items\":[{\"text\":\"ExtractPropDefaultTypes\",\"link\":\"/pages/api#extractpropdefaulttypes\"},{\"text\":\"ExtractEmitTypes\",\"link\":\"/pages/api#extractemittypes\"},{\"text\":\"ExtendSlots\",\"link\":\"/pages/api#extendslots\"},{\"text\":\"UseComposable\",\"link\":\"/pages/api#UseComposable\"}]},{\"collapsed\":false,\"text\":\"Source Code\",\"items\":[{\"text\":\"Browse Code\",\"link\":\"/pages/browse-code\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
22
25
 
23
26
  </body>
24
27
  </html>
package/docs/docs/.vitepress/dist/pages/how-its-made.html ADDED
@@ -0,0 +1,24 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en-US" dir="ltr">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width,initial-scale=1">
6
+ <title>How it's made | Infinite Vue ∞ ivue</title>
7
+ <meta name="description" content="A VitePress site">
8
+ <meta name="generator" content="VitePress v1.3.2">
9
+ <link rel="preload stylesheet" href="/ivue/assets/style.Fgx7OB_D.css" as="style">
10
+
11
+ <script type="module" src="/ivue/assets/app.ConZRsN0.js"></script>
12
+ <link rel="preload" href="/ivue/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
13
+ <link rel="modulepreload" href="/ivue/assets/chunks/theme.B7n-r1TY.js">
14
+ <link rel="modulepreload" href="/ivue/assets/chunks/framework.CNtPHGsN.js">
15
+ <link rel="modulepreload" href="/ivue/assets/pages_how-its-made.md.Vv9Z9TEi.lean.js">
16
+ <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
17
+ <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
18
+ </head>
19
+ <body>
20
+ <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar top" data-v-ae24b3ad data-v-6aa21345><div class="wrapper" data-v-6aa21345><div class="container" data-v-6aa21345><div class="title" data-v-6aa21345><div class="VPNavBarTitle has-sidebar" data-v-6aa21345 data-v-ab179fa1><a class="title" href="/ivue/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>ivue ∞ Infinite Vue</span><!--[--><!--]--></a></div></div><div class="content" data-v-6aa21345><div class="content-body" data-v-6aa21345><!--[--><!--]--><div class="VPNavBarSearch search" data-v-6aa21345><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><!----><!----><div class="VPNavBarAppearance appearance" data-v-6aa21345 data-v-6c893767><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-6c893767 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-6aa21345 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/infinite-system/ivue" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-eee4e7cb><span class="vpi-social-github" /></a><a class="VPSocialLink no-icon" href="https://x.com/evgenykalash" aria-label="twitter" target="_blank" rel="noopener" data-v-7bc22406 data-v-eee4e7cb><span class="vpi-social-twitter" /></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-6aa21345 data-v-bb2aa2f0 data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-b98bc113><!----><!--[--><!--[--><!----><div class="group" data-v-bb2aa2f0><div class="item appearance" data-v-bb2aa2f0><p class="label" data-v-bb2aa2f0>Appearance</p><div class="appearance-action" data-v-bb2aa2f0><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-bb2aa2f0 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div></div></div><div class="group" data-v-bb2aa2f0><div class="item social-links" data-v-bb2aa2f0><div class="VPSocialLinks social-links-list" data-v-bb2aa2f0 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/infinite-system/ivue" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-eee4e7cb><span class="vpi-social-github" /></a><a class="VPSocialLink no-icon" href="https://x.com/evgenykalash" aria-label="twitter" target="_blank" rel="noopener" data-v-7bc22406 data-v-eee4e7cb><span class="vpi-social-twitter" /></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-6aa21345 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-6aa21345><div class="divider-line" data-v-6aa21345></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-17a5e62e><button data-v-17a5e62e>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-319d5ca6><div class="curtain" data-v-319d5ca6></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-319d5ca6><span class="visually-hidden" id="sidebar-aria-label" data-v-319d5ca6> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Guide</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/introduction.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>What is ivue?</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/how-it-works.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>How it works?</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/getting-started.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Getting Started</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Usage</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#basic-usage" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Basic Usage</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#using-props" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Props</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#using-emits" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Emits</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#using-refs" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Refs</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#using-define-expose" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Define Expose</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#using-composables" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Composables</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#using-inside-composables" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Inside Composables</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#using-computeds" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Computeds</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#using-watch" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Watch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#using-lifecycle-hooks" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Lifecycle Hooks</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Guidelines</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/guidelines.html#dos-and-don-ts" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Dos and Don'ts</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/guidelines.html#constructor-vs-init" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>constructor() vs .init()</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/guidelines.html#unwrapping-refs" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Unwrapping Refs</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/guidelines.html#naming-conventions" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Naming Conventions</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Advanced Usage</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/advanced-usage.html#extend-props-defaults" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Extend Props Defaults</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/advanced-usage.html#extend-props" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Extend Props</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/advanced-usage.html#extend-emits" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Extend Emits</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/advanced-usage.html#extend-slots" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Extend Slots</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/advanced-usage.html#extend-classes" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Extend Classes</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/advanced-usage.html#extend-components" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Extend Components</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b7550ba0><!----><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1" data-v-b7550ba0 data-v-b7550ba0><div class="item" role="button" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><p class="text" data-v-b7550ba0>API</p><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Core Functions</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/api.html#ivue" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>ivue()</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/api.html#init" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>.init()</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/api.html#torefs" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>.toRefs()</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Utility Functions</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/api.html#propswithdefaults" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>propsWithDefaults()</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Utility Types</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/api.html#extractpropdefaulttypes" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>ExtractPropDefaultTypes</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/api.html#extractemittypes" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>ExtractEmitTypes</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/api.html#extendslots" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>ExtendSlots</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/api.html#UseComposable" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>UseComposable</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Source Code</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/browse-code.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Browse Code</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-3f215769 data-v-a5bbad30><div class="content" data-v-a5bbad30><div class="outline-marker" data-v-a5bbad30></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-a5bbad30>On this page</div><ul class="VPDocOutlineItem root" data-v-a5bbad30 data-v-b933a997><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _ivue_pages_how-its-made" data-v-39a288b8><div><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></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-e257564d><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-e257564d><span class="visually-hidden" id="doc-footer-aria-label" data-v-e257564d>Pager</span><div class="pager" data-v-e257564d><!----></div><div class="pager" data-v-e257564d><a class="VPLink link pager-link next" href="/ivue/pages/introduction.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Next page</span><span class="title" data-v-e257564d>What is ivue?</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
21
+ <script>window.__VP_HASH_MAP__=JSON.parse("{\"api_ivue.md\":\"MRwb9Lcb\",\"api_propswithdefaults.md\":\"CeE4IC-K\",\"index.md\":\"wPLoTLBY\",\"pages_advanced-usage.md\":\"BZgX-VP7\",\"pages_api.md\":\"C_PvCZns\",\"pages_browse-code.md\":\"CPluoaap\",\"pages_getting-started.md\":\"knQcOZyP\",\"pages_guidelines.md\":\"DddPdPom\",\"pages_how-it-works.md\":\"OJGcGEXF\",\"pages_how-its-made.md\":\"Vv9Z9TEi\",\"pages_introduction.md\":\"DrDm-R8F\",\"pages_usage.md\":\"zSOVjtFF\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"VitePress\",\"titleTemplate\":\":title | Infinite Vue ∞ ivue\",\"description\":\"A VitePress site\",\"base\":\"/ivue/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"outline\":\"deep\",\"siteTitle\":\"ivue ∞ Infinite Vue\",\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/infinite-system/ivue\"},{\"icon\":\"twitter\",\"link\":\"https://x.com/evgenykalash\"}],\"search\":{\"provider\":\"local\"},\"sidebar\":[{\"collapsed\":false,\"text\":\"Guide\",\"items\":[{\"text\":\"What is ivue?\",\"link\":\"/pages/introduction\"},{\"text\":\"How it works?\",\"link\":\"/pages/how-it-works\"},{\"text\":\"Getting Started\",\"link\":\"/pages/getting-started\"}]},{\"collapsed\":false,\"text\":\"Usage\",\"items\":[{\"text\":\"Basic Usage\",\"link\":\"/pages/usage#basic-usage\"},{\"text\":\"Using Props\",\"link\":\"/pages/usage#using-props\"},{\"text\":\"Using Emits\",\"link\":\"/pages/usage#using-emits\"},{\"text\":\"Using Refs\",\"link\":\"/pages/usage#using-refs\"},{\"text\":\"Using Define Expose\",\"link\":\"/pages/usage#using-define-expose\"},{\"text\":\"Using Composables\",\"link\":\"/pages/usage#using-composables\"},{\"text\":\"Using Inside Composables\",\"link\":\"/pages/usage#using-inside-composables\"},{\"text\":\"Using Computeds\",\"link\":\"/pages/usage#using-computeds\"},{\"text\":\"Using Watch\",\"link\":\"/pages/usage#using-watch\"},{\"text\":\"Using Lifecycle Hooks\",\"link\":\"/pages/usage#using-lifecycle-hooks\"}]},{\"collapsed\":false,\"text\":\"Guidelines\",\"items\":[{\"text\":\"Dos and Don'ts\",\"link\":\"/pages/guidelines#dos-and-don-ts\"},{\"text\":\"constructor() vs .init()\",\"link\":\"/pages/guidelines#constructor-vs-init\"},{\"text\":\"Unwrapping Refs\",\"link\":\"/pages/guidelines#unwrapping-refs\"},{\"text\":\"Naming Conventions\",\"link\":\"/pages/guidelines#naming-conventions\"}]},{\"collapsed\":false,\"text\":\"Advanced Usage\",\"items\":[{\"text\":\"Extend Props Defaults\",\"link\":\"/pages/advanced-usage#extend-props-defaults\"},{\"text\":\"Extend Props\",\"link\":\"/pages/advanced-usage#extend-props\"},{\"text\":\"Extend Emits\",\"link\":\"/pages/advanced-usage#extend-emits\"},{\"text\":\"Extend Slots\",\"link\":\"/pages/advanced-usage#extend-slots\"},{\"text\":\"Extend Classes\",\"link\":\"/pages/advanced-usage#extend-classes\"},{\"text\":\"Extend Components\",\"link\":\"/pages/advanced-usage#extend-components\"}]},{\"text\":\"API\"},{\"collapsed\":false,\"text\":\"Core Functions\",\"items\":[{\"text\":\"ivue()\",\"link\":\"/pages/api#ivue\"},{\"text\":\".init()\",\"link\":\"/pages/api#init\"},{\"text\":\".toRefs()\",\"link\":\"/pages/api#torefs\"}]},{\"collapsed\":false,\"text\":\"Utility Functions\",\"items\":[{\"text\":\"propsWithDefaults()\",\"link\":\"/pages/api#propswithdefaults\"}]},{\"collapsed\":false,\"text\":\"Utility Types\",\"items\":[{\"text\":\"ExtractPropDefaultTypes\",\"link\":\"/pages/api#extractpropdefaulttypes\"},{\"text\":\"ExtractEmitTypes\",\"link\":\"/pages/api#extractemittypes\"},{\"text\":\"ExtendSlots\",\"link\":\"/pages/api#extendslots\"},{\"text\":\"UseComposable\",\"link\":\"/pages/api#UseComposable\"}]},{\"collapsed\":false,\"text\":\"Source Code\",\"items\":[{\"text\":\"Browse Code\",\"link\":\"/pages/browse-code\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
22
+
23
+ </body>
24
+ </html>
package/docs/docs/.vitepress/dist/pages/introduction.html CHANGED
@@ -3,23 +3,23 @@
3
3
  <head>
4
4
  <meta charset="utf-8">
5
5
  <meta name="viewport" content="width=device-width,initial-scale=1">
6
- <title>What is Infinite Vue (ivue) ? | VitePress</title>
6
+ <title>What is Infinite Vue? | Infinite Vue ∞ ivue</title>
7
7
  <meta name="description" content="A VitePress site">
8
8
  <meta name="generator" content="VitePress v1.3.2">
9
- <link rel="preload stylesheet" href="/ivue/assets/style.DamVQLpl.css" as="style">
9
+ <link rel="preload stylesheet" href="/ivue/assets/style.Fgx7OB_D.css" as="style">
10
10
 
11
- <script type="module" src="/ivue/assets/app.CbDr3eFe.js"></script>
11
+ <script type="module" src="/ivue/assets/app.ConZRsN0.js"></script>
12
12
  <link rel="preload" href="/ivue/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
13
- <link rel="modulepreload" href="/ivue/assets/chunks/theme.DSY3Mj9W.js">
13
+ <link rel="modulepreload" href="/ivue/assets/chunks/theme.B7n-r1TY.js">
14
14
  <link rel="modulepreload" href="/ivue/assets/chunks/framework.CNtPHGsN.js">
15
15
  <link rel="modulepreload" href="/ivue/assets/chunks/Button.vue_vue_type_script_setup_true_lang.P7niV-n8.js">
16
- <link rel="modulepreload" href="/ivue/assets/pages_introduction.md.UHEKhynF.lean.js">
16
+ <link rel="modulepreload" href="/ivue/assets/pages_introduction.md.DrDm-R8F.lean.js">
17
17
  <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
18
18
  <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
19
19
  </head>
20
20
  <body>
21
- <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar top" data-v-ae24b3ad data-v-6aa21345><div class="wrapper" data-v-6aa21345><div class="container" data-v-6aa21345><div class="title" data-v-6aa21345><div class="VPNavBarTitle has-sidebar" data-v-6aa21345 data-v-ab179fa1><a class="title" href="/ivue/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>ivue ∞ Infinite Vue</span><!--[--><!--]--></a></div></div><div class="content" data-v-6aa21345><div class="content-body" data-v-6aa21345><!--[--><!--]--><div class="VPNavBarSearch search" data-v-6aa21345><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><!----><!----><div class="VPNavBarAppearance appearance" data-v-6aa21345 data-v-6c893767><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-6c893767 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-6aa21345 data-v-bb2aa2f0 data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-b98bc113><!----><!--[--><!--[--><!----><div class="group" data-v-bb2aa2f0><div class="item appearance" data-v-bb2aa2f0><p class="label" data-v-bb2aa2f0>Appearance</p><div class="appearance-action" data-v-bb2aa2f0><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-bb2aa2f0 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-6aa21345 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-6aa21345><div class="divider-line" data-v-6aa21345></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-17a5e62e><button data-v-17a5e62e>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-319d5ca6><div class="curtain" data-v-319d5ca6></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-319d5ca6><span class="visually-hidden" id="sidebar-aria-label" data-v-319d5ca6> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible has-active" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Guide</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/introduction.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>What is ivue?</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/how-it-works.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>How it works?</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/getting-started.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Getting Started</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Usage</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Basic Usage</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Props</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Emits</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Refs</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Define Expose</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Composables</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Advanced Usage</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Extensible Classes</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Extensible Props</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Extensible Emits</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Extensible Slots</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Extensible Components</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Core Functions</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/api/init.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>ivue</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/api/init.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>.init()</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/api/init.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>.toRefs()</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Utility Functions</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/api/propsWithDefaults.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>propsWithDefaults</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Utility Types</h2><!----></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/types/ExtractPropDefaultTypes.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>ExtractPropDefaultTypes</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/types/ExtractEmitTypes.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>ExtractEmitTypes</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/types/ExtendSlots.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>ExtendSlots</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/types/UnwrapComposable.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>UnwrapComposable</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-3f215769 data-v-a5bbad30><div class="content" data-v-a5bbad30><div class="outline-marker" data-v-a5bbad30></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-a5bbad30>On this page</div><ul class="VPDocOutlineItem root" data-v-a5bbad30 data-v-b933a997><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _ivue_pages_introduction" data-v-39a288b8><div><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><p>You can read more about <code>ivue</code> internal architecture in <a href="/ivue/pages/how-it-works" style="inline:true;">How it works?</a> page.</p><h2 id="when-to-use-infinite-vue" tabindex="-1">When to use Infinite Vue? <a class="header-anchor" href="#when-to-use-infinite-vue" aria-label="Permalink to &quot;When to use Infinite Vue?&quot;">​</a></h2><p>When complexity of your app or components becomes very high using <code>ivue</code> can become a natural choice to deal with that complexity. Because <code>.value</code> is abstracted away in <code>ivue</code>, everything is simply a reactive object of unwrapped Refs.</p></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-e257564d><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-e257564d><span class="visually-hidden" id="doc-footer-aria-label" data-v-e257564d>Pager</span><div class="pager" data-v-e257564d><!----></div><div class="pager" data-v-e257564d><a class="VPLink link pager-link next" href="/ivue/pages/how-it-works.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Next page</span><span class="title" data-v-e257564d>How it works?</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
22
- <script>window.__VP_HASH_MAP__=JSON.parse("{\"api_ivue.md\":\"MRwb9Lcb\",\"api_propswithdefaults.md\":\"CeE4IC-K\",\"index.md\":\"CktQD561\",\"pages_getting-started.md\":\"COGFS1PH\",\"pages_how-it-works.md\":\"DEn1nBQc\",\"pages_introduction.md\":\"UHEKhynF\",\"pages_usage.md\":\"B75xObUi\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"VitePress\",\"description\":\"A VitePress site\",\"base\":\"/ivue/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"ivue ∞ Infinite Vue\",\"search\":{\"provider\":\"local\"},\"sidebar\":[{\"collapsed\":false,\"text\":\"Guide\",\"items\":[{\"text\":\"What is ivue?\",\"link\":\"/pages/introduction\"},{\"text\":\"How it works?\",\"link\":\"/pages/how-it-works\"},{\"text\":\"Getting Started\",\"link\":\"/pages/getting-started\"}]},{\"collapsed\":false,\"text\":\"Usage\",\"items\":[{\"text\":\"Basic Usage\",\"link\":\"/pages/usage\"},{\"text\":\"Using Props\",\"link\":\"/pages/usage\"},{\"text\":\"Using Emits\",\"link\":\"/pages/usage\"},{\"text\":\"Using Refs\",\"link\":\"/pages/usage\"},{\"text\":\"Using Define Expose\",\"link\":\"/pages/usage\"},{\"text\":\"Using Composables\",\"link\":\"/pages/usage\"}]},{\"collapsed\":false,\"text\":\"Advanced Usage\",\"items\":[{\"text\":\"Extensible Classes\",\"link\":\"/pages/usage\"},{\"text\":\"Extensible Props\",\"link\":\"/pages/usage\"},{\"text\":\"Extensible Emits\",\"link\":\"/pages/usage\"},{\"text\":\"Extensible Slots\",\"link\":\"/pages/usage\"},{\"text\":\"Extensible Components\",\"link\":\"/pages/usage\"}]},{\"collapsed\":false,\"text\":\"Core Functions\",\"items\":[{\"text\":\"ivue\",\"link\":\"/api/init\"},{\"text\":\".init()\",\"link\":\"/api/init\"},{\"text\":\".toRefs()\",\"link\":\"/api/init\"}]},{\"collapsed\":false,\"text\":\"Utility Functions\",\"items\":[{\"text\":\"propsWithDefaults\",\"link\":\"/api/propsWithDefaults\"}]},{\"text\":\"Utility Types\",\"items\":[{\"text\":\"ExtractPropDefaultTypes\",\"link\":\"/types/ExtractPropDefaultTypes\"},{\"text\":\"ExtractEmitTypes\",\"link\":\"/types/ExtractEmitTypes\"},{\"text\":\"ExtendSlots\",\"link\":\"/types/ExtendSlots\"},{\"text\":\"UnwrapComposable\",\"link\":\"/types/UnwrapComposable\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
21
+ <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar top" data-v-ae24b3ad data-v-6aa21345><div class="wrapper" data-v-6aa21345><div class="container" data-v-6aa21345><div class="title" data-v-6aa21345><div class="VPNavBarTitle has-sidebar" data-v-6aa21345 data-v-ab179fa1><a class="title" href="/ivue/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>ivue ∞ Infinite Vue</span><!--[--><!--]--></a></div></div><div class="content" data-v-6aa21345><div class="content-body" data-v-6aa21345><!--[--><!--]--><div class="VPNavBarSearch search" data-v-6aa21345><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><!----><!----><div class="VPNavBarAppearance appearance" data-v-6aa21345 data-v-6c893767><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-6c893767 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-6aa21345 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/infinite-system/ivue" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-eee4e7cb><span class="vpi-social-github" /></a><a class="VPSocialLink no-icon" href="https://x.com/evgenykalash" aria-label="twitter" target="_blank" rel="noopener" data-v-7bc22406 data-v-eee4e7cb><span class="vpi-social-twitter" /></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-6aa21345 data-v-bb2aa2f0 data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-b98bc113><!----><!--[--><!--[--><!----><div class="group" data-v-bb2aa2f0><div class="item appearance" data-v-bb2aa2f0><p class="label" data-v-bb2aa2f0>Appearance</p><div class="appearance-action" data-v-bb2aa2f0><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-bb2aa2f0 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div></div></div><div class="group" data-v-bb2aa2f0><div class="item social-links" data-v-bb2aa2f0><div class="VPSocialLinks social-links-list" data-v-bb2aa2f0 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/infinite-system/ivue" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-eee4e7cb><span class="vpi-social-github" /></a><a class="VPSocialLink no-icon" href="https://x.com/evgenykalash" aria-label="twitter" target="_blank" rel="noopener" data-v-7bc22406 data-v-eee4e7cb><span class="vpi-social-twitter" /></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-6aa21345 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-6aa21345><div class="divider-line" data-v-6aa21345></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-17a5e62e><button data-v-17a5e62e>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-319d5ca6><div class="curtain" data-v-319d5ca6></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-319d5ca6><span class="visually-hidden" id="sidebar-aria-label" data-v-319d5ca6> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible has-active" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Guide</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/introduction.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>What is ivue?</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/how-it-works.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>How it works?</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/getting-started.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Getting Started</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Usage</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#basic-usage" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Basic Usage</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#using-props" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Props</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#using-emits" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Emits</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#using-refs" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Refs</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#using-define-expose" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Define Expose</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#using-composables" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Composables</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#using-inside-composables" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Inside Composables</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#using-computeds" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Computeds</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#using-watch" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Watch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html#using-lifecycle-hooks" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Lifecycle Hooks</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Guidelines</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/guidelines.html#dos-and-don-ts" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Dos and Don'ts</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/guidelines.html#constructor-vs-init" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>constructor() vs .init()</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/guidelines.html#unwrapping-refs" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Unwrapping Refs</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/guidelines.html#naming-conventions" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Naming Conventions</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Advanced Usage</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/advanced-usage.html#extend-props-defaults" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Extend Props Defaults</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/advanced-usage.html#extend-props" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Extend Props</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/advanced-usage.html#extend-emits" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Extend Emits</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/advanced-usage.html#extend-slots" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Extend Slots</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/advanced-usage.html#extend-classes" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Extend Classes</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/advanced-usage.html#extend-components" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Extend Components</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b7550ba0><!----><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1" data-v-b7550ba0 data-v-b7550ba0><div class="item" role="button" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><p class="text" data-v-b7550ba0>API</p><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Core Functions</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/api.html#ivue" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>ivue()</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/api.html#init" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>.init()</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/api.html#torefs" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>.toRefs()</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Utility Functions</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/api.html#propswithdefaults" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>propsWithDefaults()</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Utility Types</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/api.html#extractpropdefaulttypes" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>ExtractPropDefaultTypes</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/api.html#extractemittypes" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>ExtractEmitTypes</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/api.html#extendslots" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>ExtendSlots</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/api.html#UseComposable" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>UseComposable</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Source Code</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/browse-code.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Browse Code</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-3f215769 data-v-a5bbad30><div class="content" data-v-a5bbad30><div class="outline-marker" data-v-a5bbad30></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-a5bbad30>On this page</div><ul class="VPDocOutlineItem root" data-v-a5bbad30 data-v-b933a997><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _ivue_pages_introduction" data-v-39a288b8><div><h1 id="what-is-infinite-vue" tabindex="-1">What is Infinite Vue? <a class="header-anchor" href="#what-is-infinite-vue" aria-label="Permalink to &quot;What is Infinite Vue?&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 Classes API<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 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><p>You can read more about <code>ivue</code> internal architecture in <a href="/ivue/pages/how-it-works" style="inline:true;">How it works?</a> page.</p><h2 id="when-to-use-infinite-vue" tabindex="-1">When to use Infinite Vue? <a class="header-anchor" href="#when-to-use-infinite-vue" aria-label="Permalink to &quot;When to use Infinite Vue?&quot;">​</a></h2><p>When the complexity of your app or components becomes very high using <code>ivue</code> can become a natural choice to deal with that complexity. Because <code>.value</code> is abstracted away in <code>ivue</code>, everything is simply a reactive object of Refs.</p></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-e257564d><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-e257564d><span class="visually-hidden" id="doc-footer-aria-label" data-v-e257564d>Pager</span><div class="pager" data-v-e257564d><!----></div><div class="pager" data-v-e257564d><a class="VPLink link pager-link next" href="/ivue/pages/how-it-works.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Next page</span><span class="title" data-v-e257564d>How it works?</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
22
+ <script>window.__VP_HASH_MAP__=JSON.parse("{\"api_ivue.md\":\"MRwb9Lcb\",\"api_propswithdefaults.md\":\"CeE4IC-K\",\"index.md\":\"wPLoTLBY\",\"pages_advanced-usage.md\":\"BZgX-VP7\",\"pages_api.md\":\"C_PvCZns\",\"pages_browse-code.md\":\"CPluoaap\",\"pages_getting-started.md\":\"knQcOZyP\",\"pages_guidelines.md\":\"DddPdPom\",\"pages_how-it-works.md\":\"OJGcGEXF\",\"pages_how-its-made.md\":\"Vv9Z9TEi\",\"pages_introduction.md\":\"DrDm-R8F\",\"pages_usage.md\":\"zSOVjtFF\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"VitePress\",\"titleTemplate\":\":title | Infinite Vue ∞ ivue\",\"description\":\"A VitePress site\",\"base\":\"/ivue/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"outline\":\"deep\",\"siteTitle\":\"ivue ∞ Infinite Vue\",\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/infinite-system/ivue\"},{\"icon\":\"twitter\",\"link\":\"https://x.com/evgenykalash\"}],\"search\":{\"provider\":\"local\"},\"sidebar\":[{\"collapsed\":false,\"text\":\"Guide\",\"items\":[{\"text\":\"What is ivue?\",\"link\":\"/pages/introduction\"},{\"text\":\"How it works?\",\"link\":\"/pages/how-it-works\"},{\"text\":\"Getting Started\",\"link\":\"/pages/getting-started\"}]},{\"collapsed\":false,\"text\":\"Usage\",\"items\":[{\"text\":\"Basic Usage\",\"link\":\"/pages/usage#basic-usage\"},{\"text\":\"Using Props\",\"link\":\"/pages/usage#using-props\"},{\"text\":\"Using Emits\",\"link\":\"/pages/usage#using-emits\"},{\"text\":\"Using Refs\",\"link\":\"/pages/usage#using-refs\"},{\"text\":\"Using Define Expose\",\"link\":\"/pages/usage#using-define-expose\"},{\"text\":\"Using Composables\",\"link\":\"/pages/usage#using-composables\"},{\"text\":\"Using Inside Composables\",\"link\":\"/pages/usage#using-inside-composables\"},{\"text\":\"Using Computeds\",\"link\":\"/pages/usage#using-computeds\"},{\"text\":\"Using Watch\",\"link\":\"/pages/usage#using-watch\"},{\"text\":\"Using Lifecycle Hooks\",\"link\":\"/pages/usage#using-lifecycle-hooks\"}]},{\"collapsed\":false,\"text\":\"Guidelines\",\"items\":[{\"text\":\"Dos and Don'ts\",\"link\":\"/pages/guidelines#dos-and-don-ts\"},{\"text\":\"constructor() vs .init()\",\"link\":\"/pages/guidelines#constructor-vs-init\"},{\"text\":\"Unwrapping Refs\",\"link\":\"/pages/guidelines#unwrapping-refs\"},{\"text\":\"Naming Conventions\",\"link\":\"/pages/guidelines#naming-conventions\"}]},{\"collapsed\":false,\"text\":\"Advanced Usage\",\"items\":[{\"text\":\"Extend Props Defaults\",\"link\":\"/pages/advanced-usage#extend-props-defaults\"},{\"text\":\"Extend Props\",\"link\":\"/pages/advanced-usage#extend-props\"},{\"text\":\"Extend Emits\",\"link\":\"/pages/advanced-usage#extend-emits\"},{\"text\":\"Extend Slots\",\"link\":\"/pages/advanced-usage#extend-slots\"},{\"text\":\"Extend Classes\",\"link\":\"/pages/advanced-usage#extend-classes\"},{\"text\":\"Extend Components\",\"link\":\"/pages/advanced-usage#extend-components\"}]},{\"text\":\"API\"},{\"collapsed\":false,\"text\":\"Core Functions\",\"items\":[{\"text\":\"ivue()\",\"link\":\"/pages/api#ivue\"},{\"text\":\".init()\",\"link\":\"/pages/api#init\"},{\"text\":\".toRefs()\",\"link\":\"/pages/api#torefs\"}]},{\"collapsed\":false,\"text\":\"Utility Functions\",\"items\":[{\"text\":\"propsWithDefaults()\",\"link\":\"/pages/api#propswithdefaults\"}]},{\"collapsed\":false,\"text\":\"Utility Types\",\"items\":[{\"text\":\"ExtractPropDefaultTypes\",\"link\":\"/pages/api#extractpropdefaulttypes\"},{\"text\":\"ExtractEmitTypes\",\"link\":\"/pages/api#extractemittypes\"},{\"text\":\"ExtendSlots\",\"link\":\"/pages/api#extendslots\"},{\"text\":\"UseComposable\",\"link\":\"/pages/api#UseComposable\"}]},{\"collapsed\":false,\"text\":\"Source Code\",\"items\":[{\"text\":\"Browse Code\",\"link\":\"/pages/browse-code\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
23
23
 
24
24
  </body>
25
25
  </html>