ivue 0.0.32 → 0.1.0

package/package.json

@@ -1,16 +1,95 @@
 {
   "name": "ivue",
-  "version": "0.0.32",
-  "description": "",
-  "main": "src/index.js",
+  "version": "0.1.0",
+  "description": "ivue – Infinite Vue. Advanced State Management & Class Architecture for Vue 3+.",
+  "exports": {
+    ".": {
+      "require": "./dist/index.umd.js",
+      "import": "./dist/index.es.js",
+      "types": "./dist/src/index.d.ts",
+      "style": "./dist/style.css"
+    }
+  },
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/src/index.d.ts",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "dev": "vite",
+    "build": "run-p type-check build-only",
+    "preview": "vite preview",
+    "test": "vitest --reporter=verbose",
+    "build-only": "rm -rf ./dist/* && vite build",
+    "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0",
+    "vue-router": "^4.0.0"
   },
-  "author": "",
-  "license": "ISC",
   "devDependencies": {
-    "gulp": "^3.9.1",
-    "laravel-elixir": "^6.0.0-10",
-    "laravel-elixir-webpack-official": "^1.0.4"
-  }
+    "@rushstack/eslint-patch": "^1.2.0",
+    "@tsconfig/node18": "^2.0.1",
+    "@types/inversify": "^2.0.33",
+    "@types/jsdom": "^21.1.1",
+    "@types/node": "^18.16.8",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@vitejs/plugin-vue-jsx": "^3.0.1",
+    "@vue/eslint-config-typescript": "^11.0.3",
+    "@vue/test-utils": "^2.3.2",
+    "@vue/tsconfig": "^0.4.0",
+    "@vueuse/core": "^10.1.2",
+    "babel-jest": "^29.5.0",
+    "eslint": "^8.39.0",
+    "eslint-plugin-vue": "^9.11.0",
+    "infinite-vue": "^1.4.5",
+    "inversify": "^6.0.1",
+    "inversify-inject-decorators": "^3.1.0",
+    "ivue": "npm:infinite-vue",
+    "jsdom": "^22.0.0",
+    "lodash": "^4.17.21",
+    "npm-run-all": "^4.1.5",
+    "pinia": "^2.0.36",
+    "reflect-metadata": "^0.1.13",
+    "rollup-plugin-terser": "^7.0.2",
+    "transform-class-properties": "^1.0.0-beta",
+    "tree-model": "^1.0.7",
+    "typescript": "~5.0.4",
+    "vite": "^4.3.5",
+    "vite-plugin-dts": "^2.3.0",
+    "vitest": "^0.31.0",
+    "vue": "^3.3.4",
+    "vue-dd": "^1.6.4",
+    "vue-router": "^4.2.4",
+    "vue-tsc": "^1.6.4",
+    "vue-use": "^0.2.0",
+    "wait-for-expect": "^3.0.2"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/infinite-system/infinite-vue"
+  },
+  "homepage": "https://github.com/infinite-system/infinite-vue",
+  "bugs": {
+    "url": "https://github.com/infinite-system/infinite-vue/issues",
+    "email": "ekalashnikov@gmail.com"
+  },
+  "keywords": [
+    "ivue",
+    "vuex",
+    "mobx",
+    "redux",
+    "vue",
+    "react",
+    "vuejs",
+    "vuex",
+    "pinia",
+    "state management",
+    "reactive"
+  ],
+  "author": {
+    "name": "Evgeny Kalashnikov",
+    "email": "ekalashnikov@gmail.com"
+  },
+  "license": "MIT",
+  "dependencies": {}
 }

package/src/App/App.ts

@@ -0,0 +1,27 @@
+import { use } from '@/index'
+
+import { Message } from './Services/Message/Message'
+import { Router } from './Services/Routing/Router'
+
+import routes from './Services/Routing/Routes'
+import { Auth } from './Auth/Auth'
+import { User } from './Auth/User'
+
+
+export class App {
+
+  get router () { return use(Router) }
+  
+  get user () { return use(User) }
+
+  get auth () { return use(Auth) }
+
+  get message () { return use(Message) }
+
+  load () {
+    this.router.$.register(routes)
+    return this
+  }
+}
+
+// 

package/src/App/Auth/Auth.ts

@@ -0,0 +1,105 @@
+import { use } from '@/index'
+import { Traits } from '@/index'
+import { User } from './User'
+import { Http } from '@/App/Services/Http/Http';
+import { $Message, Message } from '@/App/Services/Message/Message';
+import { Router } from '@/App/Services/Routing/Router'
+import type { Null } from '@/types/core'
+import { UseCapsule } from '@/traits/UseCapsule';
+
+export class $Auth {
+
+  get http () { return use(Http) }
+  get user () { return use(User) }
+  get $message () { return use($Message) }
+
+  async login (email: Null<string>, password: Null<string>) {
+
+    const login = await this.http.post(
+      '/login', { email, password }
+    )
+
+    if (login.success) {
+      this.user.email = email
+      this.user.token = login.result.token
+    }
+
+    return this.$message.unpack(login)
+  }
+
+  async register (email: Null<string>, password: Null<string>) {
+
+    const registerDto = await this.http.post(
+      '/register', { email, password }
+    )
+
+    return this.$message.unpack(registerDto)
+  }
+
+  async logout () {
+    this.user.email = ''
+    this.user.token = ''
+  }
+}
+
+
+export class Auth  {
+
+  capsule = $Auth
+  constructor() {
+    this.useCapsule()
+  }
+
+  get router () { return use(Router) }
+  get message () { return use(Message) }
+
+  email: Null<string> = null
+  password: Null<string> = null
+  option: Null<string> = null
+
+  init(){
+    this.option = 'login'
+    this.email = 'ekalashnikov@gmail.com'
+    this.password = 'test1234'
+  }
+
+  reset () {
+    this.email = ''
+    this.password = ''
+    this.option = 'login'
+  }
+
+  formValid () {
+    const message = []
+
+    if (this.email === '') message.push('No email')
+    if (this.password === '') message.push('No password')
+
+    this.message.$.clientMessages = message
+
+    return message.length === 0
+  }
+
+  async login () {
+    const login = await this.$.login(this.email, this.password)
+
+    this.message.show(login, 'User logged in')
+
+    if (login.success) {
+      this.router.push({ name: 'home' })
+    }
+  }
+
+  async register () {
+    const register = await this.$.register(this.email, this.password)
+    this.message.show(register, 'User registered')
+  }
+
+  async logout () {
+    this.$.logout()
+    this.router.push({ name: 'login' })
+  }
+}
+
+Traits(Auth, [UseCapsule])
+export interface Auth extends UseCapsule {}

package/src/App/Auth/Auth.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { use } from '@/index'
+import { Auth } from '@/App/Auth/Auth'
+
+import Message from '@/App/Services/Message/Message.vue'
+
+const v = use(Auth);
+</script>
+<template>
+
+  <div class="container">
+    <div class="login-register">
+      <div class="w3-row">
+        <div class="w3-col s4 w3-center">
+          <br />
+        </div>
+        <div class="w3-col s4 w3-center logo">
+          <img alt="logo"
+               src="https://kajabi-storefronts-production.kajabi-cdn.com/kajabi-storefronts-production/themes/2147767979/settings_images/iE7LayVvSHeoYcZWO4Dq_web-logo-pink-light-bg3x.png"
+               style="width: 160px; filter: grayscale(100%);">
+        </div>
+
+        <div class="w3-col s4 w3-center">
+
+        </div>
+      </div>
+    </div>
+
+    <div>
+      <div class="w3-row">
+        <div class="w3-col s4 w3-center">
+          <br />
+        </div>
+        <div class="w3-col s4 w3-center option">
+          <input
+            class="lr-submit"
+            :style="{ backgroundColor: '#e4257d' }"
+            type="submit"
+            value="login"
+            @click.prevent="() => v.option = 'login'"
+          />
+          <input
+            class="lr-submit"
+            :style="{ backgroundColor: '#2E91FC' }"
+            type="submit"
+            value="register"
+            @click.prevent="() => {
+              v.option = 'register'
+            }"
+          />
+        </div>
+        <div class="w3-col s4 w3-center">
+          <br />
+        </div>
+      </div>
+      <div
+        class="w3-row"
+        :style="{
+        backgroundColor: v.option === 'login' ? '#E4257D' : '#2E91FC',
+        height: '100px',
+        paddingTop: '20px',
+      }"
+      >
+        <form
+          class="login"
+          @submit.prevent="(event) => {
+          // event.preventDefault()
+          if (v.formValid()) {
+            if (v.option === 'login') v.login()
+            if (v.option === 'register') v.register()
+          }
+        }"
+        >
+          <div class="w3-col s4 w3-center">
+            <input
+              type="text"
+              v-model="v.email"
+              placeholder="Email"
+            />
+          </div>
+          <div class="w3-col s4 w3-center">
+            <input
+              type="text"
+              v-model="v.password"
+              placeholder="Password"
+            />
+          </div>
+          <div class="w3-col s4 w3-center">
+            <input type="submit" class="lr-submit" :value="v.option" />
+          </div>
+
+          <br />
+        </form>
+      </div>
+      <Message />
+    </div>
+  </div>
+</template>

package/src/App/Auth/Logout.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { use } from '@/index'
+import { Auth } from './Auth'
+
+const v = use(Auth)
+</script>
+<template>
+    <div @click="() => v.logout()"
+      class="navigation-item"
+      :style="{ backgroundColor: '#5BCA06' }"
+    >
+      <span>☯ Logout</span>
+    </div>
+</template>

package/src/App/Auth/User.ts

@@ -0,0 +1,6 @@
+import type { Null } from "@/types/core"
+
+export class User {
+  email: Null<string> = ''
+  token: Null<string> = ''
+}

package/src/App/BlackBox.ts

@@ -0,0 +1,75 @@
+import { createApp } from "vue";
+import { vi } from 'vitest'
+import { setup, bind, use } from '@/index'
+import AppComponent from "../../demo/App.vue";
+import { FakeRouter } from './Services/Routing/FakeRouter'
+import { FakeHttp } from './Services/Http/FakeHttp'
+
+import { App } from './App'
+import { Http } from '@/App/Services/Http/Http';
+import { Router } from './Services/Routing/Router'
+import { Auth } from './Auth/Auth.js'
+
+import { SingleBooksResultStub } from './Stubs/SingleBooksResultStub'
+
+export class BlackBox {
+
+  app!: App
+
+  http!: Http
+
+  auth!: Auth
+
+  router!: Router
+
+  vue!: ReturnType<typeof createApp>
+
+  init() {
+
+    // bind(Http).to(FakeHttp).singleton().ivue()
+    // bind(Router).to(FakeRouter).singleton().ivue()
+
+    this.app = use(App).load()
+    setup({ router: this.app.router })
+    
+    // this.vue = createApp(AppComponent);
+    
+    // console.log('router', this.app.router)
+    // this.vue.use(this.app.router)
+    
+    // this.vue.mount("#app");
+
+
+    // Object.defineProperty(Router.prototype, 'push', {
+    //   value: vi.fn().mockImplementation(to => {
+    //     // pivot
+    //     this.router.$.beforeRoute(to)
+    //   })
+    // })
+
+    return this
+  }
+
+  // 2. bootstrap the app
+  bootStrap() {
+    this.app.load()
+  }
+
+  // 3. login or register to the app
+  setupLogin = async (loginStub, type) => {
+
+    this.http.get = vi.fn().mockImplementation((path) => {
+      // return Promise.resolve(SingleBooksResultStub())
+    })
+
+    this.http.post = vi.fn().mockImplementation((path) => {
+      return Promise.resolve(loginStub())
+    })
+    //
+    // this.loginRegisterPresenter = this.container.get(TestPresenter)
+    // this.loginRegisterPresenter.email = 'a@b.com'
+    // this.loginRegisterPresenter.password = '123'
+    // await this.loginRegisterPresenter.login()
+    // return this.loginRegisterPresenter
+  }
+}

package/src/App/Config.ts

@@ -0,0 +1,6 @@
+export class Config {
+  apiUrl: string
+  constructor() {
+    this.apiUrl = 'https://api.logicroom.co/secure-api/ekalashnikov@gmail.com'
+  }
+}

package/src/App/Generators/generators.ts

@@ -0,0 +1,47 @@
+export function generateHugeArray(obj, size = 20) {
+  for (let i = 0; i < size; i++) {
+    obj.hugeArray.push({
+      struct: {
+        id: i,
+        user: 'username',
+        text: 'hello world',
+        struct: {
+          id: i,
+          user: 'username',
+          text: 'hello world',
+          struct: {
+            id: i,
+            user: 'username',
+            text: 'hello world',
+            struct: {
+              id: i,
+              user: 'username',
+              text: 'hello world',
+              struct: {
+                id: i,
+                user: 'username',
+                text: 'hello world',
+                struct: {
+                  id: i,
+                  user: 'username',
+                  text: 'hello world',
+                  struct: {
+                    id: i,
+                    user: 'username',
+                    text: 'hello world',
+                    struct: {
+                      id: i,
+                      user: 'username',
+                      text: 'hello world',
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    })
+  }
+
+}

package/src/App/Home/Home.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import Navigation from '@/App/Services/Navigation/Navigation.vue'
+</script>
+<template>
+  <!-- <vue-dd v-model="app" get-all-properties /> -->
+  <br />
+  
+  <div class="w3-row">
+    <div class="w3-col s4 w3-center">
+      <Navigation />
+    </div>
+    <div class="w3-col s8 w3-left">
+      <router-view />
+    </div>
+  </div>
+</template>

package/src/App/Services/Http/FakeHttp.ts

@@ -0,0 +1,8 @@
+
+export class FakeHttp {
+  get = async (path) => {}
+
+  post = async (path, requestDto) => {}
+
+  delete = async (path) => {}
+}

package/src/App/Services/Http/Http.ts

@@ -0,0 +1,51 @@
+import { Config } from '../../Config'
+import { User } from '../../Auth/User'
+import { use } from '@/index'
+
+export class Http {
+
+  get config () { return use(Config) }
+
+  get user () { return use(User) }
+
+  setHeaders () {
+    return {
+      'Content-Type': 'application/json',
+      Authorization: this.user.token as string,
+    }
+  }
+
+  async get (path: string) {
+
+    const response = await fetch(
+      this.config.apiUrl + path, {
+      method: 'GET',
+      headers: this.setHeaders()
+    })
+
+    return response.json()
+  }
+
+  async post (path: string, req: {}) {
+
+    const response = await fetch(
+      this.config.apiUrl + path, {
+      method: 'POST',
+      body: JSON.stringify(req),
+      headers: this.setHeaders()
+    })
+
+    return response.json()
+  }
+
+  async delete (path: string) {
+
+    const response = await fetch(
+      this.config.apiUrl + path, {
+      method: 'DELETE',
+      headers: this.setHeaders()
+    })
+
+    return response.json()
+  }
+}

package/src/App/Services/Message/Message.ts

@@ -0,0 +1,49 @@
+import { use } from '@/index'
+import type { Null } from '@/types/core'
+
+export class $Message {
+
+  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 Message {
+
+  get $ () { return use($Message) }
+
+  showWarning: Null<boolean> = null
+
+  init () {
+    this.showWarning = false
+    this.$.reset()
+  }
+
+  get appMessages () {
+    return this.$.appMessages
+  }
+
+  get clientMessages () {
+    return this.$.clientMessages
+  }
+
+  show (pm: any, userMessage: any) {
+    this.showWarning = !pm.success
+    this.$.appMessages = pm.success ? [userMessage] : [pm.serverMessage]
+  }
+}

package/src/App/Services/Message/Message.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { use } from '@/index'
+import { Message } from './Message'
+
+const v = use(Message);
+</script>
+<template>
+  <div v-for="message in v.appMessages" :style="{ backgroundColor: 'red' }">
+    - {{ message }}
+  </div>
+
+  <div v-for="message in v.clientMessages" :style="{ backgroundColor: 'orange' }">
+    - {{ message }}
+  </div>
+</template>