ivue 0.0.33 → 0.1.1

package/.babelrc.json

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "node": "current"
+        }
+      }
+    ],
+    ["@babel/preset-react"]
+  ],
+  "plugins": ["@babel/plugin-proposal-class-properties" ]
+}

package/.eslintrc.cjs

@@ -0,0 +1,24 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+  'extends': [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript'
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest',
+    "ecmaFeatures": {
+      "jsx": true,
+    }
+  },
+  "env": {
+    "browser": true,
+    "node": true,
+    "jasmine": true,
+    "jest": true,
+    "es6": true
+  }
+}

package/.idea/codeStyles/codeStyleConfig.xml

@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
+  </state>
+</component>

package/.idea/compiler.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="TypeScriptCompiler">
+    <option name="showAllErrors" value="false" />
+    <option name="useService" value="false" />
+  </component>
+</project>

package/.idea/infinite-vue.iml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/node_modules" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

package/.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,11 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="DuplicatedCode" enabled="true" level="WEAK WARNING" enabled_by_default="true">
+      <Languages>
+        <language minSize="46" name="TypeScript" />
+      </Languages>
+    </inspection_tool>
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>

package/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/../infinite-vue/.idea/infinite-vue.iml" filepath="$PROJECT_DIR$/../infinite-vue/.idea/infinite-vue.iml" />
+    </modules>
+  </component>
+</project>

package/.idea/php.xml

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="MessDetectorOptionsConfiguration">
+    <option name="transferred" value="true" />
+  </component>
+  <component name="PHPCSFixerOptionsConfiguration">
+    <option name="transferred" value="true" />
+  </component>
+  <component name="PHPCodeSnifferOptionsConfiguration">
+    <option name="highlightLevel" value="WARNING" />
+    <option name="transferred" value="true" />
+  </component>
+  <component name="PhpProjectSharedConfiguration" php_language_level="8.2" />
+  <component name="PhpStanOptionsConfiguration">
+    <option name="transferred" value="true" />
+  </component>
+  <component name="PsalmOptionsConfiguration">
+    <option name="transferred" value="true" />
+  </component>
+</project>

package/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

package/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}

package/LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) 2023 - ∞ Evgeny Kalashnikov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,31 @@
+# ivue – Infinite Vue
+
+Advanced State Management & Class Architecture for Vue 3+.
+
+## Install
+
+```sh
+yarn add infinite-vue
+```
+
+## Run Dev Server
+```
+yarn dev
+```
+
+### Files to look at:
+
+Main logic for ivue:
+https://github.com/infinite-system/infinite-vue/blob/main/src/ivue.ts
+
+Utils:
+https://github.com/infinite-system/infinite-vue/blob/main/src/utils.ts
+
+Inversion of Control Container:
+https://github.com/infinite-system/infinite-vue/blob/main/src/kernel.ts
+
+App.vue:
+https://github.com/infinite-system/infinite-vue/blob/main/demo/App.vue
+
+Main class used for playground in App.vue:
+https://github.com/infinite-system/infinite-vue/blob/main/demo/tests/IVueTests.ts

package/demo/App.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { use } from '@/index'
+// import { Mouse } from './tests/Mouse';
+// import { IVueTests } from "./tests/IVueTests";
+import { TApp } from './tests/TApp';
+const app = use(TApp)
+</script>
+<template>
+  <vue-dd v-model="app" name="app" open-level="1" />
+  <router-view />
+</template>
+<style>
+@import 'https://fonts.googleapis.com/css?family=Montserrat:400,700,400italic,700italic';
+@import 'https://www.w3schools.com/w3css/4/w3.css';
+
+
+
+body {
+  font-family: 'Montserrat';
+  margin: 40px;
+}
+
+.navigation-container {
+  width: 150px;
+  float: left;
+}
+
+.navigation-item-header {
+  color: 'white';
+  padding: 10px;
+  margin-left: 3px;
+  margin-top: 3px;
+}
+
+.navigation-item {
+  color: 'white';
+  padding: 10px;
+  margin-left: 3px;
+  margin-top: 3px;
+  cursor: pointer;
+  text-align: left;
+}
+
+.validation-message {
+  padding: 13;
+  color: 'black';
+}
+
+.logo {
+  padding-bottom: 20px;
+}
+
+.container input[type='text'] {
+  width: 140px;
+}
+
+.container {
+  width: 650px;
+  margin: auto;
+}
+
+.container .lr-submit {
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-top: 7px;
+  padding-bottom: 7px;
+  border: none;
+  background-color: #5bca06;
+  color: #ffffff;
+  width: 100px;
+}
+</style>

package/demo/components/IVueTest.vue

@@ -0,0 +1,298 @@
+<script setup lang="ts">
+import { computed, provide, onUnmounted, onBeforeUnmount, getCurrentInstance, onMounted } from 'vue';
+import { IVueTests } from "../tests/IVueTests";
+import { bind, ivue, use, init, pre, kernel } from '@/index'
+import SubComponent2 from './SubComponent2.vue'
+import TraitsComponent from './TraitsComponent.vue'
+import { Mouse } from '../tests/Mouse';
+import { getPrototypeGetters } from '../../src/utils/getters';
+
+let vm: IVueTests = use(IVueTests)
+provide('mouse', ivue(Mouse))
+const localComputedValue = computed(() => {
+  return vm.computedVariable?.[0]?.test + ' + local append'
+})
+
+const hugeId = 2646049
+
+function hey () {
+  console.log('yo')
+}
+// onMounted(() => console.log('kernel.instances.get(IVueTests)', kernel.instances.get(IVueTests)))
+// onBeforeUnmount(() => {
+  
+  
+// })
+// onUnmounted(() => console.log('kernel.instances.get(IVueTests)', kernel.instances.get(IVueTests)))
+</script>
+<template>
+
+<h2>Sub Component Test</h2>
+    <router-view @testEmit="hey"></router-view>
+  <div style="width:900px; margin:0 auto;">
+
+    <h1>ivue - Infinite Vue - Implementation Tests</h1>
+<!-- <vue-dd v-model="vm" get-all-properties/> -->
+
+    <h2>Class Inheritance Tests</h2>
+
+    vm.parentValue: <input v-model="vm.parentValue" /><br />
+    <button @click="vm.parentValueAlert()">vm.parentValueAlert()</button>
+
+    <h2>Computed Resolution Tests</h2>
+    <hr />
+    <h3>Primitive Computed Tests</h3>
+    <table>
+      <tr>
+        <td class="label"><strong>vm.computedPrimitive</strong></td>
+        <td class="value">{{ vm.computedPrimitive }}
+          <button @click="vm.primitive++">Change Primitive</button>
+        </td>
+      </tr>
+      <tr>
+        <td class="label"><strong>localComputedValue</strong> (refers to vm.computedVariable.[0].test):</td>
+        <td class="value">{{ localComputedValue }}</td>
+      </tr>
+      <tr>
+        <td class="label"><strong>vm.auth.user.email:</strong></td>
+        <td class="value"><input
+            type="text"
+            style="width:250px;"
+            v-model="vm.auth.user.email"
+          /></td>
+      </tr>
+      <tr>
+        <td class="label"><strong>vm.auth.user.upperCaseEmail:</strong></td>
+        <td class="value">{{ vm.auth.user.upperCaseEmail }}</td>
+      </tr>
+      <tr>
+        <td class="label">vm.auth.user.dashedUppercaseEmail</td>
+        <td class="value">
+          <span v-for="i in vm.auth.user.dashedUppercaseEmail">
+            <span>{{ i }}</span>-
+          </span>
+        </td>
+      </tr>
+      <tr>
+        <td class="label">vm.auth.user.dashedUppercaseEmail (colored):</td>
+        <td class="value">
+          <span v-for="i in vm.auth.user.dashedUppercaseEmail">
+            <span style="color:green">{{ i }}</span>-
+          </span>
+        </td>
+      </tr>
+      <tr>
+        <td class="label">Deep circular resolution test of vm.deepEmail:</td>
+        <td class="value">{{ vm.deepEmail }}</td>
+      </tr>
+    </table>
+
+    <h3>Complex (Objects/Arrays from other stores) Computed Tests</h3>
+    <button @click="vm.pushToOriginalVariableInAuthRepo()">vm.pushToOriginalVariableInAuthRepo()</button>
+    <br />
+    <button @click="vm.computedVariable = [{
+      test: 'set 1', test2: 'set 2'
+    }]">Setter on a computed vm.computedVariable (resets vm.auth.originalVariable)
+    </button>
+    <br />
+    <strong>vm.auth.originalVariable:</strong><br />
+
+    <div v-for="el in vm.auth.originalVariable">
+      test:<input v-model="el.test" /> test2: <input v-model="el.test2" />
+    </div>
+
+    <br />
+    <strong>vm.computedVariable:</strong>
+    <div v-for="el in vm.computedVariable">
+      test:<input v-model="el.test" /> test2: <input v-model="el.test2" />
+    </div>
+    <br />
+    <strong>vm.computedUponComputedVariable:</strong>
+    <div v-for="el in vm.computedUponComputedVariable">
+      test:<input v-model="el.test" /> test2: <input v-model="el.test2" />
+    </div>
+    <br />
+    <h2>Async Function Test</h2>
+    <hr />
+    <span>Loader: <span v-if="vm.loading">loading...</span></span><br />
+    <span>Result: {{ vm.result }}</span><br />
+    <button @click="vm.runAsyncFunction">runAsyncFunction() (wait for 2 seconds)</button>
+    <h2>Huge Data Test</h2>
+    <hr />
+    <input v-model="vm.numberOfRecords" />
+    <button @click="vm.loadHugeData(vm.numberOfRecords)">Load Huge Data
+      ({{ vm.numberOfRecords.toLocaleString("en-US") }} records)
+    </button>
+    <br /> Loader: <strong>{{
+      vm.loadingHugeData ?
+      'loading ' + vm.numberOfRecords.toLocaleString("en-US") + ' records ...'
+      : ''
+    }}</strong>
+    <div
+      style="color:green"
+      v-if="vm.timeTaken"
+    >Loaded in {{ vm.msToTime(vm.timeTaken) }}.</div>
+
+    <div v-if="hugeId in vm.hugeArray">
+      <h3>Editing Record #{{ hugeId.toLocaleString("en-US") }}</h3>
+      user: <input v-model="vm.hugeArray[hugeId].struct.user" /><br />
+      text: <input v-model="vm.hugeArray[hugeId].struct.text" />
+      <pre style="font-size:10px; line-height:10px;">{{ vm.hugeArray[hugeId] }}</pre>
+    </div>
+    <h2>markRaw Tests</h2>
+    <div>nonReactiveProp is disabled:</div>
+    <vue-dd
+      name="nonReactiveProp"
+      v-model="vm.nonReactiveProp"
+      :preview="0"
+      :dark="false"
+      :open-level="2"
+    />
+    <div v-if="vm.transientFields?.[0]">
+Email: {{ vm.transientFields?.[0]?.email }}<br /> {{ vm.transientFields[10].x }}
+</div>
+    <input type="text" v-model="vm.app.user.email" />
+    <h2>Private prop test</h2>
+    <div>vm.x: {{ vm.x }}
+      <button @click="vm.x++">Increase</button>
+    </div>
+    <br />
+
+    <h2>Transients Test</h2>
+    <div>vm.transientField1.prop: {{ vm.transientField1.prop }}
+      <button @click="vm.transientField1.prop++">Increase++</button>
+    </div>
+    <div>vm.transientField2.prop: {{ vm.transientField2.prop }}
+      <button @click="vm.transientField2.prop++">Increase++</button>
+    </div>
+    <div>Computed vm.propTransient: {{ vm.propTransient }}</div>
+    <h2>Intercepts Test</h2>
+    <div>vm.transientField2.runWithIntercept(): {{ vm.transientField2.runWithInterceptResult }}
+      <button @click="vm.transientField2.runWithInterceptResult = vm.transientField2.runWithIntercept('test')">
+        vm.transientField2.runWithIntercept()
+      </button>
+    </div>
+    <br />
+    <br />
+    <br />
+    <TraitsComponent />
+    <br />
+    <br />
+    <br />
+    <br />
+  </div>
+</template>
+<style>
+.rendererParent {
+  width: 100%;
+  height: 580px;
+  border: 1px solid black;
+}
+
+h1,
+h2,
+h3,
+h4 {
+  font-family: Arial;
+  margin: 10px 0;
+  padding: 0;
+}
+
+h1 {
+  font-size: 24px;
+}
+
+h2 {
+  font-size: 18px;
+}
+
+h3 {
+  font-size: 16px;
+}
+
+h4 {
+  font-size: 14px;
+  margin: 0 5px;
+}
+
+body {
+  font-family: Arial;
+  font-size: 14px;
+  line-height: 200%;
+}
+
+.body {
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.section {
+  padding: 5px 0;
+}
+
+.section-alt {
+  padding: 15px;
+  background: #edf1f6;
+  border-radius: 10px;
+}
+
+button {
+  color: #eee;
+  border-radius: 5px;
+  border: 0;
+  font-size: 16px;
+  background: #0075d3;
+  margin: 1px 3px;
+  padding: 4px 7px;
+  display: inline-block;
+  cursor: pointer;
+}
+
+button:hover {
+  background: #08277a;
+}
+
+button.pass:hover {
+  background: green;
+}
+
+button.fail:hover {
+  background: red;
+}
+
+button:active {
+  background: #294dab;
+}
+
+input {
+  color: #333;
+  border-radius: 5px;
+  border: 0;
+  width: 250px;
+  font-size: 16px;
+  background: #eee;
+  border: 1px solid #0075d3;
+  margin: 1px 3px;
+  padding: 4px 7px;
+  display: inline-block;
+}
+
+.mr-10 {
+  margin-right: 10px;
+}
+
+.pass {
+  background: #00c200;
+}
+
+.fail {
+  background: #c00606
+}
+
+td.label {
+  text-align: right;
+}
+
+td.value {
+  padding-left: 20px;
+}</style>

package/demo/components/PreComponent.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { TUser } from '../tests/TUser';
+import { iobj, use, pre } from '@/index';
+
+const ctx = iobj({
+  test: 1,
+  get user () { return use(TUser) },
+})
+
+</script>
+<template>
+  <pre style="font-size:10px;line-height:12px;">{{ pre(ctx) }}</pre>
+</template>

package/demo/components/SubComponent2.vue

@@ -0,0 +1,45 @@
+<script lang="ts">
+// use normal <script> to declare options
+export default {
+  inheritAttrs: false,
+};
+</script>
+<script setup lang="ts">
+import { getCurrentScope } from 'vue'
+import { init } from '@/index';
+import { Test } from '../tests/Test'
+import { Mouse } from '../tests/Mouse';
+import { inject, reactive, toRaw } from 'vue'
+import { ivue } from '../../src/ivue';
+const emit = defineEmits<{
+  (event: 'testEmit'): void
+}>()
+// mouse.js
+
+const mouse: Mouse = inject('mouse') as Mouse
+
+console.log('getCurrentScope', getCurrentScope())
+const v = ivue(Test, emit, 1)
+const v2 = ivue(Test, emit, 2)
+const v3 = ivue(Test, emit, 3)
+const obj = { test: 1 }
+const react = reactive(obj)
+// setTimeout(() => {
+//   console.log('obj === react', obj === toRaw(react))
+// },100)
+</script>
+<template>
+  <!--  {{ t.app.i }}-->
+<div>
+  Injected mouse: {{ mouse }} <br />
+
+  <div>Sub Component: Hello:
+    Inner: {{ v.$.x }} {{ v.$.y }},<br />
+    Outer: {{ v.x }} {{ v.y }},
+    <br />
+    {{ v.email }}
+  </div>
+  <button @click="v.$emit('testEmit')">Emit</button>
+  <button @click="v.$.say(1)">Say</button>
+</div>
+</template>