ivue 0.1.11 → 1.0.0

package/.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

package/.eslintignore

@@ -0,0 +1,7 @@
+/dist
+/src-capacitor
+/src-cordova
+/.quasar
+/node_modules
+.eslintrc.js
+/src-ssr

package/.eslintrc copy.js

@@ -0,0 +1,120 @@
+module.exports = {
+  // https://eslint.org/docs/user-guide/configuring#configuration-cascading-and-hierarchy
+  // This option interrupts the configuration hierarchy at this file
+  // Remove this if you have an higher level ESLint config file (it usually happens into a monorepos)
+  root: true,
+  // https://eslint.vuejs.org/user-guide/#how-to-use-a-custom-parser
+  // Must use parserOptions instead of "parser" to allow vue-eslint-parser to keep working
+  // `parser: 'vue-eslint-parser'` is already included with any 'plugin:vue/**' config and should be omitted
+  parserOptions: {
+    parser: require.resolve('@typescript-eslint/parser'),
+    extraFileExtensions: ['.vue'],
+  },
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+    'vue/setup-compiler-macros': true,
+  },
+  // Rules order is important, please avoid shuffling them
+  extends: [
+    'plugin:@typescript-eslint/recommended',
+    'plugin:vue/vue3-recommended',
+    'prettier',
+    'plugin:storybook/recommended',
+  ],
+  plugins: [
+    // required to apply rules which need type information
+    '@typescript-eslint',
+    // https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-files
+    // required to lint *.vue files
+    'vue',
+
+    // https://github.com/typescript-eslint/typescript-eslint/issues/389#issuecomment-509292674
+    // Prettier has not been included as plugin to avoid performance impact
+    // add it as an extension for your IDE
+
+    'import',
+  ],
+
+  globals: {
+    ga: 'readonly',
+    // Google Analytics
+    cordova: 'readonly',
+    __statics: 'readonly',
+    __QUASAR_SSR__: 'readonly',
+    __QUASAR_SSR_SERVER__: 'readonly',
+    __QUASAR_SSR_CLIENT__: 'readonly',
+    __QUASAR_SSR_PWA__: 'readonly',
+    process: 'readonly',
+    Capacitor: 'readonly',
+    chrome: 'readonly',
+  },
+  // add your custom rules here
+  rules: {
+    'prefer-promise-reject-errors': 'off',
+    quotes: [
+      'warn',
+      'single',
+      {
+        avoidEscape: true,
+      },
+    ],
+    // this rule, if on, would require explicit return type on the `render` function
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    // in plain CommonJS modules, you can't use `import foo = require('foo')` to pass this rule, so it has to be disabled
+    '@typescript-eslint/no-var-requires': 'off',
+
+    '@typescript-eslint/no-empty-function': 'off',
+    // allow type any
+    '@typescript-eslint/no-explicit-any': 'off',
+    'vue/no-v-html': 'off',
+    // The core 'no-unused-vars' rules (in the eslint:recommended ruleset)
+    // does not work with type definitions
+    'no-unused-vars': 'off',
+    // allow debugger during development only
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'sort-imports': [
+      'warn',
+      {
+        ignoreCase: false,
+        // don"t want to sort import lines, use eslint-plugin-import instead
+        ignoreDeclarationSort: true,
+        ignoreMemberSort: false,
+        memberSyntaxSortOrder: ['none', 'all', 'multiple', 'single'],
+        allowSeparatedGroups: true,
+      },
+    ],
+    'import/no-duplicates': ['error'],
+    'import/order': [
+      'warn',
+      {
+        // https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/order.md
+        groups: [['builtin', 'external', 'internal']],
+        pathGroups: [
+          {
+            pattern: 'src/**',
+            group: 'internal',
+            position: 'after',
+          },
+        ],
+        pathGroupsExcludedImportTypes: ['builtin'],
+        'newlines-between': 'always',
+        alphabetize: {
+          order: 'asc',
+          caseInsensitive: true,
+        },
+      },
+    ],
+  },
+  overrides: [
+    {
+      files: ['test/cypress/**/*.{js,jsx,ts,tsx}', '**/*.cy.{js,jsx,ts,tsx}'],
+      extends: [
+        // Add Cypress-specific lint rules, globals and Cypress plugin
+        // See https://github.com/cypress-io/eslint-plugin-cypress#rules
+        'plugin:cypress/recommended',
+      ],
+    },
+  ],
+};

package/.eslintrc.js

@@ -0,0 +1,120 @@
+module.exports = {
+  // https://eslint.org/docs/user-guide/configuring#configuration-cascading-and-hierarchy
+  // This option interrupts the configuration hierarchy at this file
+  // Remove this if you have an higher level ESLint config file (it usually happens into a monorepos)
+  root: true,
+  // https://eslint.vuejs.org/user-guide/#how-to-use-a-custom-parser
+  // Must use parserOptions instead of "parser" to allow vue-eslint-parser to keep working
+  // `parser: 'vue-eslint-parser'` is already included with any 'plugin:vue/**' config and should be omitted
+  parserOptions: {
+    parser: require.resolve('@typescript-eslint/parser'),
+    extraFileExtensions: ['.vue'],
+  },
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+    'vue/setup-compiler-macros': true,
+  },
+  // Rules order is important, please avoid shuffling them
+  extends: [
+    'plugin:@typescript-eslint/recommended',
+    'plugin:vue/vue3-recommended',
+    'prettier',
+    'plugin:storybook/recommended',
+  ],
+  plugins: [
+    // required to apply rules which need type information
+    '@typescript-eslint',
+    // https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-files
+    // required to lint *.vue files
+    'vue',
+
+    // https://github.com/typescript-eslint/typescript-eslint/issues/389#issuecomment-509292674
+    // Prettier has not been included as plugin to avoid performance impact
+    // add it as an extension for your IDE
+
+    'import',
+  ],
+
+  globals: {
+    ga: 'readonly',
+    // Google Analytics
+    cordova: 'readonly',
+    __statics: 'readonly',
+    __QUASAR_SSR__: 'readonly',
+    __QUASAR_SSR_SERVER__: 'readonly',
+    __QUASAR_SSR_CLIENT__: 'readonly',
+    __QUASAR_SSR_PWA__: 'readonly',
+    process: 'readonly',
+    Capacitor: 'readonly',
+    chrome: 'readonly',
+  },
+  // add your custom rules here
+  rules: {
+    'prefer-promise-reject-errors': 'off',
+    quotes: [
+      'warn',
+      'single',
+      {
+        avoidEscape: true,
+      },
+    ],
+    // this rule, if on, would require explicit return type on the `render` function
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    // in plain CommonJS modules, you can't use `import foo = require('foo')` to pass this rule, so it has to be disabled
+    '@typescript-eslint/no-var-requires': 'off',
+
+    '@typescript-eslint/no-empty-function': 'off',
+    // allow type any
+    '@typescript-eslint/no-explicit-any': 'off',
+    'vue/no-v-html': 'off',
+    // The core 'no-unused-vars' rules (in the eslint:recommended ruleset)
+    // does not work with type definitions
+    'no-unused-vars': 'off',
+    // allow debugger during development only
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'sort-imports': [
+      'warn',
+      {
+        ignoreCase: false,
+        // don"t want to sort import lines, use eslint-plugin-import instead
+        ignoreDeclarationSort: true,
+        ignoreMemberSort: false,
+        memberSyntaxSortOrder: ['none', 'all', 'multiple', 'single'],
+        allowSeparatedGroups: true,
+      },
+    ],
+    'import/no-duplicates': ['error'],
+    'import/order': [
+      'warn',
+      {
+        // https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/order.md
+        groups: [['builtin', 'external', 'internal']],
+        pathGroups: [
+          {
+            pattern: 'src/**',
+            group: 'internal',
+            position: 'after',
+          },
+        ],
+        pathGroupsExcludedImportTypes: ['builtin'],
+        'newlines-between': 'always',
+        alphabetize: {
+          order: 'asc',
+          caseInsensitive: true,
+        },
+      },
+    ],
+  },
+  overrides: [
+    {
+      files: ['test/cypress/**/*.{js,jsx,ts,tsx}', '**/*.cy.{js,jsx,ts,tsx}'],
+      extends: [
+        // Add Cypress-specific lint rules, globals and Cypress plugin
+        // See https://github.com/cypress-io/eslint-plugin-cypress#rules
+        'plugin:cypress/recommended',
+      ],
+    },
+  ],
+};

package/.github/workflows/ci.yml

@@ -0,0 +1,68 @@
+name: ci
+on: [ push ]
+
+jobs:
+  build:
+    name: vitest
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Set Node.js 18.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+
+      - name: yarn install
+        uses: borales/actions-yarn@v4
+        with:
+          cmd: install # will run `yarn install` command
+          # dir: 'ivue'
+      - name: vitest ivue
+        uses: borales/actions-yarn@v4
+        with:
+          cmd: test # will run `yarn test` command
+          # dir: 'ivue'
+  docs-deploy:
+    name: deploy docs
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Set Node.js 18.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+
+      - name: Setup git
+        run: |
+          git config user.name "Evgeny Kalashnikov" && git config user.email "ekalashnikov@gmail.com"
+      - name: yarn install
+        uses: borales/actions-yarn@v4
+        with:
+          cmd: install # will run `yarn install` command
+          dir: 'docs'
+      - name: deploy docs
+        uses: borales/actions-yarn@v4
+        with:
+          cmd: deploy # will run `yarn deploy` command
+          dir: 'docs'
+#  docs-deploy:
+#    name: Deploying to gh-pages
+#    runs-on: ubuntu-latest
+#    steps:
+#      - name: Setup Node.js for use with actions
+#        uses: actions/setup-node@v2
+#        with:
+#          version: 12.x
+#      - name: Checkout branch
+#        uses: actions/checkout@v2
+#
+#      - name: Clean install dependencies
+#        run: npm ci
+#
+#      - name: Run deploy script
+#        run: |
+#          git config user.name "Evgeny Kalashnikov" && git config user.email "ekalashnikov@gmail.com"
+#
+#          cmd: deploy

package/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "printWidth": 80,
+  "singleQuote": true,
+  "semi": true
+}

package/LICENSE

@@ -1,4 +1,4 @@
-Copyright (c) 2023 - ∞ Evgeny Kalashnikov
+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
@@ -16,4 +16,4 @@ 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.
+SOFTWARE.

package/README.md

@@ -1,34 +1,26 @@
-# ivue – Infinite Vue
+## ivue – Infinite Vue     [![npm](https://img.shields.io/npm/v/ivue.svg)](https://www.npmjs.com/package/ivue) [![build status](https://github.com/infinite-system/ivue/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/infinite-system/ivue/actions/workflows/ci.yml)
 
-Advanced State Management & Class Architecture for Vue 3+.
+## About
 
-## Install
+**ivue** is a TypeScript classes based composable architecture for Vue 3, that unlocks infinite scalability for Vue 3 based apps. It allows you to extend the regular Vue 3 in a simple and elegant way.
 
-```sh
-# Using npm
-npm i ivue
-# or yarn
-yarn add ivue
-```
+## Features
+&ndash; Simple & Elegant Architecture<br />
+&ndash; Extendible Classes aligned with TypeScript Class design<br />
+&ndash; Extendible Props Defaults<br />
+&ndash; Extendible Emits<br />
+&ndash; Extendible Slots<br />
+&ndash; Extendible Components<br />
+&ndash; Improves DX by elegantly dealing with .value in the background<br />
+&ndash; Can be used both as a Store and a View Model for Components<br />
+&ndash; Provides Full TypeScript Support<br />
+&ndash; 100% Tested<br />
+&ndash; Zero dependencies except Vue 3<br />
+&ndash; Only 1kb in size!<br />
+&ndash; Production Ready<br />
 
-## Run Dev Server
-```
-yarn dev
-```
+## How Does it Work
 
-### Files to look at:
+## Examples
 
-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
+## Documentation

package/demo/App.vue

@@ -1,72 +1,129 @@
 <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';
+import { reactive, ref } from 'vue'
+import { action, computed, inject, makeObservable, observable } from "*";
 
+const w = window
+const test = reactive({ 'test': 'test' })
+const test2 = { 'test': ref({ test: 'test' }), 'array': ['test', 'test2'] }
 
+abstract class GrandParent {
+  grandParent = 'test'
 
-body {
-  font-family: 'Montserrat';
-  margin: 40px;
+  get grandParentGetter () {
+    return 'fun'
+  }
 }
 
-.navigation-container {
-  width: 150px;
-  float: left;
-}
+abstract class MessagesPresenter extends GrandParent {
 
-.navigation-item-header {
-  color: 'white';
-  padding: 10px;
-  margin-left: 3px;
-  margin-top: 3px;
-}
+  showValidationWarning = null
 
-.navigation-item {
-  color: 'white';
-  padding: 10px;
-  margin-left: 3px;
-  margin-top: 3px;
-  cursor: pointer;
-  text-align: left;
-}
+  static _name = 'hi'
 
-.validation-message {
-  padding: 13;
-  color: 'black';
-}
+  constructor () {
+    super()
 
-.logo {
-  padding-bottom: 20px;
-}
+  }
+
+  init = () => {}
+
+  abstract reset (): void
 
-.container input[type='text'] {
-  width: 140px;
+  get messages () {
+    return 'yes'
+  }
+
+  unpackRepositoryPmToVm = (pm, userMessage) => {}
+}
+class Auth {
+  test = 1
 }
+class LoginRegisterPresenter extends MessagesPresenter {
+
+  static test = 2
+  static test2 = 2
+
+  auth = new Auth()
+
+  static testF () {
+    return 1
+  }
+
+  email = null
+  password = null
+  option = null
+
+  constructor () {
+    super()
+    this.auth = new Auth()
+  }
+
+  //
+  get viewTest () {
+    this.auth.test = 2
+    console.log('yo')
+    return 'yes'
+  }
+
+  set viewTest (value) {
+
+  }
 
-.container {
-  width: 650px;
-  margin: auto;
+  setAuthRepoTest () {
+
+  }
+
+  reset () {
+
+  }
+
+  async login () {
+
+  }
+
+  register () {
+
+  }
+
+  logOut () {
+
+  }
 }
 
-.container .lr-submit {
-  padding-left: 20px;
-  padding-right: 20px;
-  padding-top: 7px;
-  padding-bottom: 7px;
-  border: none;
-  background-color: #5bca06;
-  color: #ffffff;
-  width: 100px;
+const presenter = new LoginRegisterPresenter()
+
+const proto = Object.getPrototypeOf(presenter)
+
+let val = ref({  })
+setTimeout(() => {
+  val.value = reactive({
+    test: 1
+  })
+}, 1000)
+
+</script>
+<template>
+  <h1>vue-dd integration tests</h1>
+  <vue-dd name="val" v-model="val" />
+  <br />
+  <vue-dd name="window" :save-focus="false" :get-all-properties="false" v-model="w" />
+  <br />
+  <vue-dd name="test" get-all-properties v-model="test" />
+  <br />
+  <vue-dd name="test2" get-all-properties v-model="test2" />
+  <br />
+  <vue-dd name="presenter" :get-all-properties="true" v-model="presenter" />
+  <vue-dd name="LoginRegisterPresenter" :get-all-properties="true" v-model="LoginRegisterPresenter" />
+
+
+
+</template>
+
+
+<style>
+.rendererParent {
+  width: 100%;
+  height: 580px;
+  border: 1px solid black;
 }
-</style>
+</style>

package/demo/main.ts

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

package/demo/vite.config.ts

@@ -1,12 +1,19 @@
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 
+export const vueDocsPlugin = () => ({
+  name: "vue-docs",
+  transform(code: any, id: any) {
+    if (!/vue&type=docs/.test(id)) return;
+    return `export default ''`;
+  },
+});
 
 export default defineConfig({
   root: "./",
   // keep the same name as your github repos
   mode: "production",
-  plugins: [vue()],
+  plugins: [vue(), vueDocsPlugin()],
   build: {
     outDir: "./dist-demo",
   },

package/docs/.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

package/docs/.env

@@ -0,0 +1 @@
+BASE="/ivue/"

package/docs/.eslintignore

@@ -0,0 +1,7 @@
+/dist
+/src-capacitor
+/src-cordova
+/.quasar
+/node_modules
+.eslintrc.js
+/src-ssr