ivue 0.1.11 → 1.0.0

package/vitest.config.ts

@@ -1,18 +1,19 @@
-import { fileURLToPath } from 'node:url'
-import { mergeConfig } from 'vite'
-import { configDefaults, defineConfig } from 'vitest/config'
-import viteConfig from './vite.config'
+import { fileURLToPath } from "node:url";
+import { mergeConfig } from "vite";
+import { configDefaults, defineConfig } from "vitest/config";
+import viteConfig from "./vite.config";
 
 export default mergeConfig(
   viteConfig,
   defineConfig({
     test: {
-      environment: 'jsdom',
-      exclude: [...configDefaults.exclude, 'e2e/*'],
-      root: fileURLToPath(new URL('./', import.meta.url)),
-      transformMode: {
-        web: [/\.[jt]sx$/],
-      },
-    }
+      environment: "jsdom",
+      exclude: [...configDefaults.exclude, "e2e/*", "**/demo/**"],
+      root: fileURLToPath(new URL("./", import.meta.url)),
+      reporters: ["default", "html", "verbose"],
+      coverage: {
+        include: ['src/**']
+      } 
+    },
   })
-)
+);

package/.babelrc.json

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

package/.eslintrc.cjs

@@ -1,24 +0,0 @@
-/* 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

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

package/.idea/compiler.xml

@@ -1,7 +0,0 @@
-<?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/inspectionProfiles/Project_Default.xml

@@ -1,11 +0,0 @@
-<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/ivue.iml

@@ -1,10 +0,0 @@
-<?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/modules.xml

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

package/.idea/php.xml

@@ -1,20 +0,0 @@
-<?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

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

package/.vscode/extensions.json

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

package/PLAN.md

@@ -1,39 +0,0 @@
-## Test ivue 
-
-### Test basic reactivity
-- make sure basic reactivity works
-- primitives, objects, arrays
-
-### Test nested component instantiation and unloading reactivity
-- ☑ tested now to 2 levels deep
-- test it to 3-4 levels deep
-  - if components using use(ClassName) function are mounted/unmounted properly
-
-### Test traits
-- convert existing inside component tests to real automated tests
-
-### Test getter computeds 
-- test getter computeds to at least 3 levels deep
-
-### Test getters with use() and init() inside
-- the variables instantiated within init() method should not cause a recompute
-
-### Test behaviors
-- class initialization before/after
-- method call before/after
-- test conditional before/after class/method substitution
-
-### Test Kernel
-- test bind() points to bound object
-- use() should instantiate a singleton
-- init() should instantiate a transient
-- get() should instantiate non-reactive js singleton
-- make() should instantiate non-reactive js transient
-
- ### Test ivue utils
-- test extend function as props assignment
-  - test extend with .props as a property
-  - or when extend, extends the base class properties
-  - which approach is better (the second one becomes closer to vue 2 options api)
-- extend function should have 'extendClasses' option
-  - so we can enable extension of class based objects as well, by default we only extend simple objects not class objects

package/demo/components/IVueTest.vue

@@ -1,301 +0,0 @@
-<script setup lang="ts">
-import { computed, provide, onUnmounted, onBeforeUnmount, getCurrentInstance, onMounted, markRaw } 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';
-
-console.log('loaded')
-let vm: IVueTests = use(IVueTests)
-provide('mouse', ivue(Mouse))
-const localComputedValue = computed(() => {
-  return vm.computedVariable?.[0]?.test + ' + local append'
-})
-
-vm.setTest('yes')
-console.log(vm.test)
-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

@@ -1,13 +0,0 @@
-<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

@@ -1,45 +0,0 @@
-<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>

package/demo/components/TraitsComponent.vue

@@ -1,120 +0,0 @@
-<script setup>
-import { Traits } from '@/index';
-
-class Trait1 {
-  get prop () { return 1 }
-}
-
-class Trait2 {
-  get prop () { return 2 }
-}
-
-class Trait3 {
-  get prop () { return 3 }
-}
-
-class TestTraits {
-  prop = 0
-}
-Traits(TestTraits, [Trait3, Trait2, Trait1])
-const t = new TestTraits()
-console.log('traits t.prop is 0', t.prop === 0)
-
-
-class TestTraits2 {}
-Traits(TestTraits2, [Trait3, Trait2, Trait1])
-const t2 = new TestTraits2()
-console.log('traits t2.prop is 3', t2.prop, t2.prop === 3)
-
-
-class TestTraits3 {
-  get prop () { return 0 }
-}
-Traits(TestTraits3, [Trait3, Trait2, Trait1])
-const t3 = new TestTraits3()
-console.log('traits t3.prop is 0', t3.prop, t3.prop === 0)
-
-
-class TestTraits4 {
-  set prop (v) { return v }
-}
-Traits(TestTraits4, [Trait3, Trait2, Trait1])
-const t4 = new TestTraits4()
-console.log('traits t4.prop is 3', t4.prop, t4.prop === 3)
-
-{
-  
-  class Trait1 {
-    _prop = 1
-    get prop () { return 1 }
-    set prop (v) { this._prop = v }
-  }
-
-  class Trait2 {
-    _prop = 2
-    get prop () { return this._prop }
-  }
-
-  class Trait3 {
-    _prop = 3
-    get prop () { return this._prop }
-  }
-  class TestTraits5 {}
-  Traits(TestTraits5, [Trait3, Trait2, Trait1])
-  const t5 = new TestTraits5()
-  t5.prop = 5
-  console.log('traits t5.prop is 5', t5.prop, t5.prop === 5)
-}
-
-{
-  class Trait1 {
-    _prop = 1
-    get prop () { return 1 }
-    set prop (v) { this._prop = v }
-  }
-
-  class Trait2 {
-    _prop = 2
-    get prop () { return this._prop }
-  }
-
-  class Trait3 {
-    _prop = 3
-    get prop () { return this._prop }
-  }
-  class TestTraits6 {
-    set prop (v) { this._prop = 6 }
-  }
-  Traits(TestTraits6, [Trait3, Trait2, Trait1])
-  const t6 = new TestTraits6()
-  t6.prop = 5 // should not set to 5 but 6
-  console.log('traits t6.prop is 6', t6.prop, t6.prop === 6)
-}
-
-{
-  class Trait1 {
-    _prop = 1
-    get prop () { return 1 }
-    set prop (v) { this._prop = v }
-  }
-
-  class Trait2 {
-    _prop = 2
-    get prop () { return this._prop }
-  }
-
-  class Trait3 {
-    _prop = 3
-    get prop () { return this._prop }
-    set prop (v) { this._prop = 7 }
-  }
-  class TestTraits {}
-  Traits(TestTraits, [Trait3, Trait2, Trait1])
-  const t = new TestTraits()
-  t.prop = 5 // should not set to 5 but 7
-  console.log('traits t7.prop is 6', t.prop, t.prop === 7)
-}
-</script>
-<template>
-
-</template>