ivue 0.1.11 → 1.0.0

package/docs/.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/docs/.prettierrc

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

package/docs/docs/.vitepress/config.ts

@@ -0,0 +1,56 @@
+import { defineConfig } from 'vitepress'
+
+// https://vitepress.vuejs.org/config/app-configs
+export default defineConfig({
+  themeConfig: {
+    siteTitle: 'ivue ∞ Infinite Vue',
+    sidebar: [
+      {
+        collapsed: false,
+        text: 'Guide',
+        items: [
+          { text: 'What is ivue?', link: '/pages/introduction' },
+          { text: 'How it works?', link: '/pages/how-it-works' },
+          { text: 'Getting Started', link: '/pages/getting-started' },
+        ],
+      },
+      {
+        collapsed: false,
+        text: 'Usage',
+        items: [
+          { text: 'Basic Usage', link: '/pages/usage' },
+          { text: 'Class Inheritance', link: '/pages/usage' },
+          { text: 'Using Props', link: '/pages/usage' },
+          { text: 'Using Emits', link: '/pages/usage' },
+          { text: 'Using Composables', link: '/pages/usage' },
+          { text: 'Define Expose', link: '/pages/usage' },
+          { text: 'Extend Slots', link: '/pages/usage' },
+        ],
+      },
+      {
+        collapsed: false,
+        text: 'Functions',
+        items: [
+          { text: 'ivue', link: '/api/init' },
+          { text: '.toRefs()', link: '/api/init' },
+          { text: 'propsWithDefaults', link: '/api/propsWithDefaults' },
+        ],
+      },
+      {
+        text: 'Utility Types',
+        items: [
+          { text: 'UnwrapComposable', link: '/types/UnwrapComposable' },
+          { text: 'ExtractEmitTypes', link: '/types/ExtractEmitTypes' },
+          { text: 'ExtractPropDefaultTypes', link: '/types/ExtractPropDefaultTypes' },
+          { text: 'ExtendSlots', link: '/types/ExtendSlots' },
+        ],
+      },
+    ]
+  },
+  base: '/ivue/',
+  vite: { // To make vue-dd work, see https://github.com/vuetifyjs/vuetify/discussions/15735
+    ssr: {
+      noExternal: ["vue-dd"]
+    }
+  }
+})

package/docs/docs/components/Button.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+defineProps({
+  href: String,
+  label: String,
+  inline: {
+    type: Boolean,
+    default: true
+  }
+});
+</script>
+<template>
+<a :href="'/ivue' + href" :style="`inline: ${inline};`">{{ label }}</a>
+</template>

package/docs/docs/components/Component.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { ivue } from "../../../src/index";
+import { VueDd } from "vue-dd";
+import { ref } from 'vue';
+
+class Test2 {
+  prop = ref(1);
+  prop2 = ref(2);
+}
+const test = ivue(Test2);
+const a = "Coming soon";
+</script>
+<template>
+  
+
+  
+  <ClientOnly>
+    <vue-dd get-all-properties :save-focus="false" :open-level="1" :inline="false" v-model="test" name="class Test" />
+  </ClientOnly>
+</template>

package/docs/docs/components/examples/Counter.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { ivue } from '../../../../src/index';
+
+class ToDo {
+  count = ref(0) as unknown as number;
+  increment() {
+    this.count++;
+  }
+}
+
+const todo = ivue(ToDo);
+</script>
+<template>
+  <a href="javascript:void" @click="() => todo.increment()">Increment</a>
+  Count: {{ todo.count }}
+</template>

package/docs/docs/index.md

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import Button from './components/Button.vue'
+
+</script>
+# Documentation
+
+
+## About
+
+**Infinite Vue &ndash; ivue** is a class 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.
+
+## Features
+<div style="padding-left:20px;">
+&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(gzipped) in size!<br />
+&ndash; Production Ready<br />
+</div>
+
+## Next Step
+
+<Button href="/pages/getting-started.html" label="Geting Started" />  &nbsp; or &nbsp; <Button href="/pages/introduction.html" label="Read Introduction" />
+

package/docs/docs/pages/getting-started.md

@@ -0,0 +1,14 @@
+# Installation
+
+In your terminal install ivue:
+```bash
+# via yarn
+yarn add ivue
+
+# via npm
+npm i ivue
+
+# via pnpm
+pnpm i ivue
+```
+

package/docs/docs/pages/introduction.md

@@ -0,0 +1,45 @@
+# What is Infinite Vue (ivue) ?
+
+## The Purpose of Infinite Vue
+
+With the development of React hooks and Vue following in its footsteps with introduction of Vue 3 Composition API, the ecosystem has moved away from Options API. 
+
+While providing greater flexibility and composability the Composition API has its own downsides, one of them is having to use `.value` to refer to the reactive variables which makes the development process more clunky when the App reaches a certain size. 
+
+As some of you may know, `reactvity-transform` macros were an attempt to mitigate those issues, which turned out to create even more issues, and was discontinued. 
+
+See: https://vuejs.org/guide/extras/reactivity-transform.html
+
+
+::: info IVUE UNIFIES COMPOSITION & OPTIONS API VIA CLASS BASED ARCHITECTURE
+—  ivue mitigates the downsides of both Composition API and Options API, uses only their strengths and brings back Object Oriented Programming to allow the development of complex and scallable apps.
+
+—  ivue is fully interoperable with Composition API and does not work against it but rather with it, so you can use all of ecosystems composables seamlessly.
+
+—  ivue also offers a set of functions and utility types to make extensible & exportable props defaults, extensible emits and extensible slots possible.
+:::
+
+## Classes are Back with Full Vue 3 Compatibility & Beyond
+
+With failed implementations of classes in React and also failed implementations using class components in Vue 2 / 3, the ecosystem decided that classes are bad and moved to pure procedural designs, while procedural programming has its strength, it also comes with its own weaknesses, like lack of inheritance and true composition.
+
+::: info IVUE IS DIFFERENT
+&mdash; &nbsp;ivue does NOT inherit from a base class<br />
+&mdash; &nbsp;ivue does NOT use decorators to achieve its objectives<br />
+&mdash; &nbsp;ivue does NOT alter Vue 3 underlying behavior<br />
+&mdash; &nbsp;ivue is NOT class components (though you can build components with it)<br />
+:::
+
+## Infinite Vue Achitecture
+
+ivue mimicks native JavaScript / TypeScript class implementation by extending descriptors up the whole prototype chain thus supporting classical inheritance.
+
+By using TypeScript we are able to infer the arguments of the main `ivue` initializer function and pass the arguments to the constructor.
+
+`ivue` initializer function returns a reactive object with getters converted to computeds and adds `.toRefs()` method to the object, `.toRefs()` allows the object to be converted to native composable structure, so it can interoperate as a composable if needed.
+
+
+## When to use Infinite Vue?
+
+When complexity of your app or components becomes very high using **ivue** can become a natural choice to deal with that complexity. Because there is no `.value` in ivue, everything is simply a reactive object of unwrapped Refs.
+

package/docs/docs/pages/usage.md

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import { createContentLoader } from 'vitepress'
+import Counter from '../components/examples/Counter.vue'
+
+</script>
+
+# Basic Usage
+
+Classic Counter example built with `ivue`:
+
+<<< @/components/examples/Counter.vue{vue}
+```ts
+{{counterContent}}
+```
+Result:
+<Counter />

package/docs/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "vitepress-project",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vitepress dev docs",
+    "build": "vitepress build docs",
+    "serve": "vitepress serve docs",
+    "preview": "vitepress build docs && vitepress serve docs",
+    "deploy": "node scripts/gh-pages-deploy.js"
+  },
+  "devDependencies": {
+    "cpy-cli": "^4.2.0",
+    "execa": "^8.0.0",
+    "vitepress": "^1.0.0",
+    "vue": "3.2.44",
+    "vue-dd": "1.6.7",
+    "eslint": "^8.10.0",
+    "eslint-config-prettier": "^8.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-vue": "^9.14.1",
+    "@typescript-eslint/eslint-plugin": "^5.10.0",
+    "@typescript-eslint/parser": "^5.10.0",
+    "typescript": "^4.5.4",
+    "vite-plugin-dynamic-import": "^1.5.0",
+    "vite-tsconfig-paths": "^4.3.2"
+  },
+  "pnpm": {
+    "peerDependencyRules": {
+      "ignoreMissing": [
+        "@algolia/client-search"
+      ]
+    }
+  }
+}

package/docs/scripts/gh-pages-deploy.js

@@ -0,0 +1,34 @@
+import { execa } from 'execa'
+// import fs from "fs"
+
+(async () => {
+  try {
+    var datetime = new Date();
+
+    // this will save potential changes that might get lost if you didn't commit them
+    await execa("git", ["stash", "push", "-m", "before deploy on " + datetime]);
+    await execa("git", ["checkout", "--orphan", "gh-pages"]);
+
+    console.log("Building...")
+
+    await execa("yarn", ["run", "build"])
+    // Understand if it's dist or build folder
+    const folderName = "docs/.vitepress/dist"
+    await execa("git", ["--work-tree", folderName, "add", "--all"])
+    await execa("git", ["--work-tree", folderName, "commit", "-m", "gh-pages"])
+
+    console.log("Pushing to gh-pages...")
+
+    await execa("git", ["push", "origin", "HEAD:gh-pages", "--force"])
+    await execa("rm", ["-r", folderName])
+    await execa("git", ["fetch"])
+    await execa("git", ["checkout", "-f", "main"])
+    await execa("git", ["branch", "-D", "gh-pages"])
+
+    console.log("Successfully deployed")
+  } catch (e) {
+
+    console.log(e.message)
+    process.exit(1)
+  }
+})();

package/docs/vite-env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

package/docs/vite.config.ts

@@ -0,0 +1,20 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+
+
+// https://vitejs.dev/config/
+export default defineConfig({
+
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  },
+  server: {
+    fs: {
+      allow: ['..']
+    }
+  },
+
+})

package/index.html

@@ -1,11 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>MyComponent</title>
   </head>
+
   <body>
     <div id="app"></div>
     <script type="module" src="./demo/main.ts"></script>

package/package.json

@@ -1,68 +1,57 @@
 {
   "name": "ivue",
-  "version": "0.1.11",
-  "description": "ivue – Infinite Vue. Advanced State Management & Class Architecture for Vue 3+.",
+  "version": "1.0.0",
+  "description": "Infinite Vue – Class Based Architecture for Vue 3",
+  "type": "module",
   "exports": {
     ".": {
       "require": "./dist/index.umd.js",
       "import": "./dist/index.es.js",
-      "types": "./dist/src/index.d.ts",
-      "style": "./dist/style.css"
+      "types": "./dist/src/index.d.ts"
     }
   },
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
   "types": "./dist/src/index.d.ts",
   "scripts": {
-    "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"
+    "dev": "vite dev --host",
+    "test": "vitest --coverage.enabled=true --reporter=verbose --ui",
+    "coverage": "vitest run --coverage",
+    "cypress": "cypress run --component",
+    "cypress:headed": "cypress run --component --browser chrome --headed --no-exit",
+    "build": "vite build"
   },
   "peerDependencies": {
-    "vue": "^3.0.0",
-    "vue-router": "^4.0.0"
+    "vue": "^3.0.0"
   },
   "devDependencies": {
-    "@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"
+    "@cypress/vite-dev-server": "^5.0.2",
+    "@cypress/vue": "^5.0.3",
+    "@typescript-eslint/eslint-plugin": "^5.10.0",
+    "@typescript-eslint/parser": "^5.10.0",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@vitest/coverage-c8": "^0.26.2",
+    "@vitest/coverage-v8": "^2.0.5",
+    "@vitest/ui": "^2.0.5",
+    "@vue/test-utils": "^2.2.7",
+    "cpy-cli": "^4.2.0",
+    "cypress": "^12.3.0",
+    "eslint": "^8.10.0",
+    "eslint-config-prettier": "^8.1.0",
+    "eslint-plugin-cypress": "^2.15.1",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-storybook": "^0.6.12",
+    "eslint-plugin-vue": "^9.14.1",
+    "jsdom": "^21.0.0",
+    "typescript": "^4.5.4",
+    "vite": "^4.0.4",
+    "vite-plugin-dts": "^1.7.1",
+    "vite-plugin-dynamic-import": "^1.5.0",
+    "vite-plugin-libcss": "^1.0.5",
+    "vite-tsconfig-paths": "^4.3.2",
+    "vitest": "^2.0.5",
+    "vue": "^3.2.45",
+    "vue-router": "^4.1.6"
   },
   "repository": {
     "type": "git",
@@ -74,22 +63,18 @@
     "email": "ekalashnikov@gmail.com"
   },
   "keywords": [
+    "Vue",
+    "Vue 3",
+    "VueJs",
     "ivue",
-    "vuex",
-    "mobx",
-    "redux",
-    "vue",
-    "react",
-    "vuejs",
-    "vuex",
-    "pinia",
-    "state management",
-    "reactive"
+    "class",
+    "reactive class",
+    "class composable",
+    "vue class based architecture"
   ],
   "author": {
     "name": "Evgeny Kalashnikov",
     "email": "ekalashnikov@gmail.com"
   },
-  "license": "MIT",
-  "dependencies": {}
+  "license": "MIT"
 }