ivue 0.0.32 → 0.1.0

package/demo/components/TraitsComponent.vue

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

package/demo/components/useIVueTest.vue

@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import { useIVueTests } from '../tests/useIVueTests';
+import { pre } from '@/utils';
+let vm = useIVueTests()
+const hugeId = 200
+
+</script>
+<template>
+  <div style="width:900px; margin:0 auto;">
+
+    <h1>Composable test</h1>
+    <!--  <vue-dd v-model="vm" get-all-properties/>-->
+{{ vm.msToTime(vm.timeTaken.value) }}
+<br />
+{{ vm.app.router }}
+{{ pre(vm.transientFields.value[0].app.router) }}
+<br />
+{{ vm.transientFields.value[10].x }}
+<input type="text" v-model="vm.app.user.email" />
+    <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/main.ts

@@ -0,0 +1,21 @@
+import { createApp } from "vue";
+import { VueDd } from 'vue-dd'
+
+import { setup, use } from '@/index'
+
+import AppComponent from "./App.vue";
+import { App } from '@/App/App';
+import { Auth } from '@/App/Auth/Auth';
+
+const app = use(App).load()
+setup({ router: app.router, debug: true })
+
+use(Auth)
+
+const vue = createApp(AppComponent);
+
+vue.use(app.router)
+
+vue.component('VueDd', VueDd)
+
+vue.mount("#app");

package/demo/router/index.ts

@@ -0,0 +1,14 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: () => import('../App.vue'),
+    }
+  ]
+})
+
+export default router

package/demo/tests/IVueTests.ts

@@ -0,0 +1,255 @@
+
+import { TAuth } from './TAuth'
+import { TApp } from "./TApp";
+import { TMessage } from './TMessage'
+import { TRouter } from './TRouter'
+import { ParentIVueTests } from "./ParentIVueTests";
+import { onUnmounted, toRaw, watch, onBeforeUnmount } from "vue";
+import { generateHugeArray } from "@/App/Generators/generators";
+import { TField } from "./TField";
+import { use, init, IVUE, unraw, before, ivue } from "@/index";
+
+export class IVueTests extends ParentIVueTests {
+
+  static behavior = {
+    init: IVUE.SCOPED_INTERCEPT,
+    nonReactiveProp: IVUE.OFF
+  }
+
+  get auth () { return use(TAuth) }
+
+  get app () { return use(TApp) }
+
+  get router () { return use(TRouter) }
+
+  private _x = 1
+
+  get x () {
+    return this._x
+  }
+
+  set x (v) {
+    this._x = v
+  }
+
+  array = [1, 2, 3]
+
+  object = {
+    prop: {
+      prop: {
+        prop: 1
+      }
+    }
+  }
+
+  constructor (public primitive = 100) {
+    super()
+  }
+
+  transientField1!: TField
+
+  transientField2!: TField
+
+  transientField3!: TField
+
+  transientFields: TField[] | null = []
+
+  init () {
+
+    watch(() => this.primitive, newValue => {
+      if (newValue === 10) {
+        console.log('watch matched value: 10 =', newValue)
+      }
+    })
+
+    // before(Field.prototype.init, (intercept, self) => {
+    //   console.log('before init of prototype of Field', 'this', self)
+    //   // return false
+    // })
+
+    // TField.behavior = {
+    // ...Field.behavior,
+    // interceptable: IVUE.INTERCEPT
+    // }
+
+    this.transientField3 = ivue(TField, 11)
+    console.log('this.transientField3', this.transientField3)
+
+    this.transientField1 = ivue(TField, 23)
+    this.transientField2 = ivue(TField, 5)
+
+    this.timeTaken = 0
+
+    const start = Date.now();
+
+
+    for (let i = 0; i < 50_000; i++) {
+      // this.transientFields.push(ivueMake(new Field(i)))
+      this.transientFields.push(init(TField))
+    }
+
+    console.log('this.transientFields.length', this.transientFields.length)
+    this.timeTaken = Date.now() - start;
+
+
+    const interval = setInterval(() => {
+      this.transientFields[10].x++
+    }, 1000)
+    onBeforeUnmount(() => {
+      console.log('unload the fields')
+
+      clearInterval(interval)
+
+      // if ('transientFields' in this) this.transientFields = null
+      // this.transientFields = null
+    })
+
+    console.log('this.transientField1', this.transientField1)
+    console.log('this.transientField2', this.transientField2)
+
+    before(this.transientField1.init, (intercept, self) => {
+      console.log('before init of Field', self)
+    })
+
+    // before(Field.prototype.interceptable, (intercept, self) => {
+    //   console.log('before interceptable of Field', self)
+    // })
+
+    this.transientField1.interceptable()
+
+    // this.transientField1.init()
+    // this.transientField2.init()
+
+
+    // watch(this, (state) => {
+    // console.log('changed', state)
+    // })
+
+    //
+    // before(Field.prototype.runWithIntercept, (intercept, self, ...[var1]) => {
+    //
+    //   intercept.return = 'Prototype intercept'
+    //
+    //   self.prop++
+    //   console.log('var1', var1)
+    //   return false
+    // })
+
+    // before(this.transientField2.runWithIntercept, (intercept, self: Field) => {
+    //   intercept.return = 'Awesome'
+    //   return false
+    // })
+    //
+    // after(this.transientField2.runWithIntercept, (intercept, self: Field) => {
+    //
+    //   intercept.return = intercept.return + 'Awesome!!'
+    //   // return false
+    // })
+    //
+    // after(this.transientField2.runWithIntercept, (intercept, self: Field) => {
+    //   // console.log('running...')
+    //   intercept.return = 'Awesome2'
+    // })
+
+  }
+
+  get propTransient () {
+    return this.transientField1.prop
+  }
+
+  get computedVariable () {
+    console.log('computedVariable')
+    return this.auth.originalVariable.map(el => ({
+      test: el.test + ' computed 1', test2: el.test2 + ' computed 1'
+    }))
+  }
+
+  get computedUponComputedVariable () {
+    console.log('computedUponComputedVariable')
+    return this.computedVariable.map(el => ({
+      test: el.test + ' computed 2', test2: el.test2 + ' computed 2'
+    }))
+  }
+
+  set computedVariable (value) {
+    this.auth.originalVariable = value
+  }
+
+  get getComputedButMakeReactiveAgain () {
+    unraw(this.computedVariable[0])
+    return this.computedVariable[0]
+  }
+
+  get computedPrimitive () {
+    // console.log('compute3', this.primitive)
+    return this.primitive
+  }
+
+  /**
+   * Circular computed store connectivity test.
+   */
+  get deepEmail () {
+    //console.log('app', this.app)
+    return String(this.app.router.$.user.app.router.$.user.email).split('').join('+')
+  }
+
+  pushToOriginalVariableInAuthRepo () {
+    this.auth.originalVariable.push({
+      test: 'push-1',
+      test2: 'push-2'
+    })
+  }
+
+  loading = false
+  result: unknown = ''
+
+  async asyncFunction () {
+    return new Promise((resolve) => {
+      this.loading = true
+      setTimeout(() => {
+        resolve('hey! how do you do?')
+        this.loading = false
+      }, 2000)
+    })
+  }
+
+  async runAsyncFunction () {
+    this.result = ''
+    this.result = await this.asyncFunction()
+  }
+
+  /**
+   * Implement abstract parent function.
+   */
+  reset () {
+  }
+
+  numberOfRecords = 5000000
+  hugeArray = []
+  loadingHugeData = false
+  timeTaken = 0
+
+  loadHugeData (numberOfRecords: number) {
+    this.timeTaken = 0
+    this.loadingHugeData = true
+    const start = Date.now();
+
+    setTimeout(() => {
+      generateHugeArray(this, numberOfRecords)
+      this.loadingHugeData = false
+      this.timeTaken = Date.now() - start;
+    })
+  }
+
+  msToTime (ms: number) {
+    const seconds = (ms / 1000)
+    const minutes = (ms / (1000 * 60));
+    const hours = (ms / (1000 * 60 * 60));
+    const days = (ms / (1000 * 60 * 60 * 24));
+
+    if (seconds < 60) return seconds.toFixed(3) + " Seconds";
+    else if (minutes < 60) return minutes.toFixed(1) + " Minutes";
+    else if (hours < 24) return hours.toFixed(1) + " Hrs";
+    else return days.toFixed(1) + " Days"
+  }
+}

package/demo/tests/Mouse.ts

@@ -0,0 +1,79 @@
+import { onActivated, onBeforeUpdate, onDeactivated, onMounted, onUnmounted, onUpdated, watch } from 'vue';
+import { init, Traits } from '@/index';
+import { UseCapsule } from '@/traits/UseCapsule';
+import { UseMounting } from '@/traits/UseMounting';
+import { Auth } from '@/App/Auth/Auth';
+import { onBeforeRouteUpdate } from 'vue-router';
+
+const boundMap = new WeakMap()
+
+function bound(method: Function, obj: any){
+  let bounds = boundMap.get(obj) || new WeakMap()
+  if (bounds.has(method)){
+    return method
+  } else {
+    bounds.set(method, true)
+    boundMap.set(obj, bounds)
+    return method = method.bind(obj)
+  }
+}
+
+export class $Mouse {
+
+  x = 0
+  
+  y = 0
+  
+  async init () {
+    // const update = (event: MouseEvent) => {
+    //   this.x = event.pageX
+    //   this.y = event.pageY
+    //   // console.log('x', this.x, 'y', this.y)
+    // }
+    // // console.log('mouse inited')
+    
+    // onMounted(() => {
+    //   console.log('---mounted')
+    //   window.addEventListener('mousemove', update)
+    // })
+    // onUnmounted(() => {
+    //   console.log('unmounted', update.bind(this) === update.bind(this))
+    //   window.removeEventListener('mousemove', update)
+    // })
+
+    // watch(() => this.x, n => {
+    //   console.log('this.x new', n)
+    // })
+  }
+  
+  update (event: MouseEvent) {
+    this.x = event.pageX
+    this.y = event.pageY
+  }
+
+  mounted () {
+    // console.log('mounted---')
+    window.addEventListener('mousemove', bound(this.update, this))
+  }
+  
+  unmounted () {
+    // console.log('unmounted---', this.update.bind(this) === this.update.bind(this))
+    window.removeEventListener('mousemove', bound(this.update, this))
+  }
+}
+Traits($Mouse, [UseMounting])
+export interface $Mouse extends UseMounting {}
+
+export class Mouse {
+
+  capsule = $Mouse // detached
+  constructor () {
+    this.initCapsule(arguments)
+  }
+
+  get x () { return this.$.x }
+
+  get y () { return this.$.y }
+}
+Traits(Mouse, [UseCapsule])
+export interface Mouse extends UseCapsule {}

package/demo/tests/ParentIVueTests.ts

@@ -0,0 +1,36 @@
+import { Message } from "@/App/Services/Message/Message";
+import { use } from '@/index'
+
+
+export abstract class ParentIVueTests {
+
+  get message() { return use(Message) }
+
+  private parentPrivate = 111
+
+  prop = 'test'
+
+  nonReactiveProp = {
+    test: {
+      test: true
+    }
+  }
+
+  showWarning = null
+
+  // constructor() {}
+
+  init () {
+    this.showWarning = false
+    this.reset()
+  }
+
+
+  parentValue = 'Text from parent class'
+  
+  parentValueAlert () {
+    alert(this.parentValue)
+  }
+
+  abstract reset (): void
+}

package/demo/tests/TApp.ts

@@ -0,0 +1,15 @@
+import { TMessage } from './TMessage'
+import { TRouter } from './TRouter'
+import { use } from '@/index'
+import { TUser } from './TUser'
+
+export class TApp {
+
+  get router () { return use(TRouter) }
+  
+  get message () { return use(TMessage) }
+
+  get user () { return use(TUser) }
+
+}
+

package/demo/tests/TAuth.ts

@@ -0,0 +1,23 @@
+import { use } from '@/index'
+import { TUser } from './TUser'
+import { TMessage } from './TMessage'
+
+
+export class TAuth {
+
+  user = use(TUser)
+
+  message = use(TMessage)
+
+  originalVariable = [
+    { test: 'val-1', test2: 'val-2' }
+  ]
+
+  testVariable = [{ test1: 'test1!', test2: 'test1!', sub: { test: 'yes' } }]
+  testVariable2 = {
+    awesome: {
+      super: 'yes'
+    }
+  }
+
+}