ivue 0.0.32 → 0.1.0

package/demo/tests/TField.ts

@@ -0,0 +1,84 @@
+import { watch, onMounted, onUnmounted } from "vue";
+import { IVUE } from "@/index";
+import { use, init } from "@/index";
+import { App } from "@/App/App";
+import { TRouter } from "./TRouter";
+import { TApp } from "./TApp";
+
+export class Mouse {
+
+  x = 0
+  y = 0
+
+  init () {
+    const update = (e) => this.update(e)
+    onMounted(() => window.addEventListener('mousemove', update))
+    onUnmounted(() => window.removeEventListener('mousemove', update))
+    return this
+  }
+
+  update (event) {
+    this.x = event.pageX
+    this.y = event.pageY
+  }
+}
+
+export class TField {
+
+  get app () { return  use(TApp) }
+
+  get router () { return  use(TRouter) }
+
+  _prop = 0
+  // static behavior: any = {
+  //   init: IVUE.SCOPED_INTERCEPT,
+  //   runWithIntercept: IVUE.INTERCEPT
+  // }
+
+  // constructor (private _prop: number, private buildMouse = true) {}
+
+
+  get prop () {
+    return this._prop
+  }
+
+  set prop (v) {
+    this._prop = v
+  }
+
+  get email () {
+    return this.app.user.email
+  }
+
+  x: number = 0
+
+  y: number = 0
+
+  update: (event) => {}
+
+
+  init() {
+    watch(() => this.x, n => {
+      console.log('n', n)
+    })
+  }
+
+  interceptableValue = 'testing'
+  runWithInterceptResult = ''
+
+  runWithIntercept (variable = '') {
+    return this.interceptableValue
+  }
+
+  interceptable () {
+    console.log('interceptable')
+  }
+
+  increase () {
+    this._prop++
+  }
+
+  private privateFunc () {
+    alert('hey')
+  }
+}

package/demo/tests/TMessage.ts

@@ -0,0 +1,52 @@
+import { use } from '@/index'
+import type { Null } from '@/types/core'
+
+export class $TMessage {
+
+  appMessages: Null<any[]> = null
+
+  clientMessages: Null<any[]> = null
+
+  constructor () {
+    this.reset()
+  }
+
+  reset () {
+    this.appMessages = []
+    this.clientMessages = []
+  }
+
+  unpack (dto: any) {
+    return { 
+      success: dto.success, 
+      serverMessage: dto.result.message 
+    }
+  }
+}
+
+export class TMessage {
+
+  get $ () { return use($TMessage) }
+
+  showWarning: Null<boolean> = null
+
+  init () {
+    this.showWarning = false
+    this.reset()
+  }
+
+  reset () {}
+
+  get appMessages () {
+    return this.$.appMessages
+  }
+
+  get clientMessages () {
+    return this.$.clientMessages
+  }
+
+  unpack (pm: any, userMessage: any) {
+    this.showWarning = !pm.success
+    this.$.appMessages = pm.success ? [userMessage] : [pm.serverMessage]
+  }
+}

package/demo/tests/TRouter.ts

@@ -0,0 +1,18 @@
+import { TMessage } from './TMessage'
+import { TUser } from './TUser'
+import { use } from '@/index'
+
+export class $TRouter {
+
+  get user () { return use(TUser) }
+
+  get message () { return use(TMessage) }
+
+}
+
+export class TRouter {
+
+  get $ () { return use($TRouter) }
+
+  test = 1
+}

package/demo/tests/TUser.ts

@@ -0,0 +1,19 @@
+import { use } from '@/kernel'
+import { TApp } from "./TApp";
+
+export class TUser {
+
+  get app () { return use(TApp) }
+
+  email = 'a'
+  token = ''
+
+  get upperCaseEmail () {
+    return String(this.email).toUpperCase()
+  }
+
+  get dashedUppercaseEmail () {
+    return this.upperCaseEmail.split('')
+  }
+
+}

package/demo/tests/Test.ts

@@ -0,0 +1,86 @@
+
+import { onActivated, onDeactivated, onMounted, onUnmounted, onUpdated, watch } from 'vue';
+import { init, use, Traits } from '@/index';
+import { UseApp } from '@/App/Traits/UseApp';
+import { UseCapsule } from '@/traits/UseCapsule';
+import { UseQuasar } from '@/App/Traits/UseQuasar';
+import { UseEmit } from '@/traits/UseEmit';
+import { UseMounting } from '@/traits/UseMounting';
+import { UseVue } from '@/traits/UseVue';
+import { UseRouting } from '@/traits/UseRouting';
+import { UseRouter } from '@/traits/UseRouter';
+import { Mouse } from './Mouse'
+
+
+export class $Test {
+
+  constructor (public self: Test) {}
+
+  mouse!: Mouse
+  init () {
+
+    // const { x, y } = useMouse()
+
+    ({ x: this.x, y: this.y } = use(Mouse).toRefs())
+    // ({ x: this.x, y: this.y } = refs(use(Mouse)))
+    this.mouse = use(Mouse)
+
+    // this.mouse = use(Mouse)
+  }
+
+  words = 'saying some words...'
+
+  say (i: number) {
+    console.log(this.words)
+  }
+
+
+  // get x () { return this.mouse.x }
+
+  // get y () { return this.mouse.y }
+
+  x = 0
+  y = 0
+}
+Traits($Test, [UseApp])
+export interface $Test extends UseApp {}
+
+
+export class Test {
+
+  capsule = $Test // detached
+  constructor (emit: any, private n: number) {
+    this.useCapsule(arguments)
+    this.$emit = emit
+  }
+
+  async init () {
+    watch(this, newValue => {
+      console.log('newValue', newValue)
+    })
+  }
+
+  get x () {
+    console.log('this.$.x', this.$.x)
+    return this.$.mouse.x
+  }
+
+  get y () {
+    console.log('this.$.y', this.$.y)
+    return this.$.mouse.y
+  }
+
+  get email () {
+    return this.$.app.router.$.user.email
+  }
+
+  beforeMount () {
+    console.log('# ' + this.n + ' before mounting...')
+  }
+
+  mounted () {
+    console.log('mounted!!!')
+  }
+}
+Traits(Test, [UseCapsule, UseMounting, UseEmit])
+export interface Test extends UseCapsule, UseMounting, UseEmit {}

package/demo/tests/useField.ts

@@ -0,0 +1,82 @@
+import { watch, onMounted, onUnmounted, ref, computed } from "vue";
+import { App } from "@/App/App";
+import { TRouter } from "./TRouter";
+
+import { use, init } from "@/index";
+import { TApp } from "./TApp";
+
+export const useField = ()  => {
+
+  const app = computed(() => {
+    return use(TApp)
+  })
+
+  const router = computed(() => {
+    return use(TRouter)
+  })
+
+  const _prop = ref(0)
+
+  const x = ref(0)
+  const y = ref(1)
+
+  const interceptableValue = ref('testing')
+  const runWithInterceptResult = ref('')
+
+  function runWithIntercept (variable = '') {
+    return interceptableValue.value
+  }
+
+  function interceptable () {
+    console.log('interceptable')
+  }
+
+  function increase () {
+    _prop.value++
+  }
+
+  const email = computed(() => {
+    return app.value.user.email
+  })
+
+  const prop = computed({
+    get () {
+      _prop.value
+    },
+    set (v) {
+      _prop.value = v
+    }
+  })
+
+  const update  = function (event)  {
+
+  }
+
+  function init () {}
+
+
+  function privateFunc () {
+    alert(prop.value)
+  }
+
+  watch(() => x.value, n => {
+    console.log('n', n)
+  })
+
+  return {
+    app,
+    router,
+    _prop,
+    prop,
+    x,
+    y,
+    interceptable,
+    runWithInterceptResult,
+    runWithIntercept,
+    increase,
+    privateFunc,
+    update,
+    init,
+    email
+  }
+}

package/demo/tests/useIVueTests.ts

@@ -0,0 +1,57 @@
+
+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, computed, ref } from "vue";
+import { generateHugeArray } from "@/App/Generators/generators";
+import { TField } from "./TField";
+import { use, init, IVUE, unraw, before } from "@/index";
+import { useField } from './useField'
+import { App } from '@/App/App';
+
+
+export function useIVueTests () {
+
+  const app = use(TApp)
+  const transientFields = ref([])
+
+  const timeTaken = ref(0)
+
+  timeTaken.value = 0
+
+  const start = Date.now();
+  
+  // setTimeout(() => {
+
+    for (let i = 0; i < 50_000; i++) {
+      transientFields.value.push(useField())
+    }
+
+    timeTaken.value = Date.now() - start;
+
+    setInterval(() => {
+      transientFields.value[10].x++
+    }, 1000)
+  // })
+
+  function 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"
+  }
+
+  return {
+    app,
+    transientFields,
+    timeTaken,
+    msToTime
+  }
+}

package/demo/vite.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+
+
+export default defineConfig({
+  root: "./",
+  // keep the same name as your github repos
+  mode: "production",
+  plugins: [vue()],
+  build: {
+    outDir: "./dist-demo",
+  },
+});