ivue 1.5.2 → 1.5.3

package/docs/docs/pages/usage.md

@@ -1,402 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-
-import CounterBasic from '../components/usage/CounterBasic.vue'
-import CounterWithProps from '../components/usage/CounterWithProps.vue'
-import CounterWithPropsAndEmits from '../components/usage/CounterWithPropsAndEmits.vue'
-import CounterDefineExpose from '../components/usage/CounterDefineExpose.vue'
-import CounterDefineExposeClass from '../components/usage/CounterDefineExposeClass'
-import CounterExternalRefs from '../components/usage/CounterExternalRefs.vue'
-import CounterInternalRefs from '../components/usage/CounterInternalRefs.vue'
-import CounterComposables from '../components/usage/CounterComposables.vue'
-import CounterComposablesDestructuring from '../components/usage/CounterComposablesDestructuring.vue'
-import CounterComposablesIvueDestructuring from '../components/usage/CounterComposablesIvueDestructuring.vue'
-import CounterComposablesIvue from '../components/usage/CounterComposablesIvue.vue'
-import CounterInsideComposables from '../components/usage/CounterInsideComposables.vue'
-import CounterComputeds from '../components/usage/CounterComputeds.vue'
-import CounterComputedsDisabled from '../components/usage/CounterComputedsDisabled.vue'
-import CounterWatch from '../components/usage/CounterWatch.vue'
-import CounterLifecycleHooks from '../components/usage/CounterLifecycleHooks.vue'
-
-// <For CounterWithPropsAndEmits example start>
-function onIncrement(value: number) {
-  alert('Count is now: ' + value);
-}
-// </For CounterWithPropsAndEmits example end>
-
-// <For CounterDefineExpose example start>
-const defineExposeRef = ref<CounterDefineExposeClass | null>(null);
-
-function increment() {
-  defineExposeRef.value.increment();
-}
-
-function decrement() {
-  defineExposeRef.value.decrement();
-}
-// </For CounterDefineExpose example end>
-
-</script>
-
-# Example Usage
-
-Using ivue is very simple, but you need to understand a few principles. See the examples below expanding on each principle.
-
-## Basic Usage
-
-Classic Counter example built with `ivue`
-::: code-group
-<<< @/components/usage/CounterBasic.vue{vue:line-numbers}
-:::
-
-:::details For this example we initialize the component like this:
-
-```vue
-<template>
-  <CounterBasic />
-</template>
-```
-
-:::
-
-<div style="font-size: 18px; font-weight: 500;">Result</div>
-
-<CounterBasic />
-::: warning NOTICE: JavaScript Class Caveat
- See `() => counter.increment()`. You cannot simply use `counter.increment` to refer to the method when it was defined as an object of a class, because that method would not know that it has to be bound to `counter`. You have to either use `() => counter.increment()` or `counter.increment.bind(counter)`, but the latter example is too verbose, so the preferred more readable way is to use an arrow function.
-:::
-
-## Using Props
-
-See the highlighted sections related to props.
-::: code-group
-<<< @/components/usage/CounterWithProps.vue{vue:line-numbers}
-:::
-
-:::details For this example we initialize the component like this:
-
-```vue
-<template>
-  <CounterWithProps :initial-count="5" />
-</template>
-```
-
-:::
-
-<div style="font-size: 18px; font-weight: 500;">Result</div>
-
-<CounterWithProps :initial-count="5" />
-
-## Using Emits
-
-See the highlighted sections related to using emits.
-
-::: code-group
-<<< @/components/usage/CounterWithPropsAndEmits.vue{vue:line-numbers}
-:::
-
-:::details For this example we initialize the component like this:
-
-```vue
-<script setup lang="ts">
-function onIncrement(value: number) {
-  alert('Count is now: ' + value);
-}
-</script>
-<template>
-  <CounterWithPropsAndEmits :initial-count="5" @increment="onIncrement" />
-</template>
-```
-
-:::
-
-<div style="font-size: 18px; font-weight: 500;">Result</div>
-
-<CounterWithPropsAndEmits :initial-count="5" @increment="onIncrement" />
-
-## Using Refs
-
-### Refs defined externally in the component outside of the class.
-
-::: code-group
-<<< @/components/usage/CounterExternalRefs.vue{vue:line-numbers}
-:::
-:::details For this example we initialize the component like this:
-
-```vue
-<template>
-  <CounterExternalRefs />
-</template>
-```
-
-:::
-
-<div style="font-size: 18px; font-weight: 500;">Result</div>
-
-<CounterExternalRefs />
-
-### Refs defined internally inside of the class.
-
-::: code-group
-<<< @/components/usage/CounterInternalRefs.vue{vue:line-numbers}
-:::
-
-:::details For this example we initialize the component like this:
-
-```vue
-<template>
-  <CounterInternalRefs />
-</template>
-```
-
-:::
-
-<div style="font-size: 18px; font-weight: 500;">Result</div>
-
-<CounterInternalRefs />
-
-## Using Define Expose
-
-### Use class as interface for `defineExpose()`
-See the highlighted sections related to `defineExpose`.
-
-::: code-group
-<<< @/components/usage/CounterDefineExpose.vue{vue:line-numbers}
-<<< @/components/usage/CounterDefineExposeClass.ts{ts:line-numbers}
-:::
-
-:::details For this example we initialize the component like this:
-
-```vue
-<script setup lang="ts">
-const defineExposeRef = ref<CounterDefineExposeClass | null>(null);
-
-function increment() {
-  defineExposeRef.value.increment();
-}
-
-function decrement() {
-  defineExposeRef.value.decrement();
-}
-</script>
-<template>
-  <button @click="increment">
-    Increment via Component Ref from Parent Component</button
-  ><br />
-  <button @click="decrement">
-    Decrement via Component Ref from Parent Component
-  </button>
-  <CounterDefineExpose />
-</template>
-```
-
-:::
-
-<div style="font-size: 18px; font-weight: 500;">Result</div>
-
-<button class="button" @click="increment">Increment via Component Ref from Parent Component</button><br />
-<button class="button" @click="decrement">Decrement via Component Ref from Parent Component</button>
-<CounterDefineExpose ref="defineExposeRef" />
-
-### Pick allowed interface properties for `defineExpose()`
-
-::: code-group
-<<< @/components/usage/CounterDefineExposeAdvanced.vue{vue:line-numbers}
-:::
-
-## Using Composables
-
-### Assign Vue 3 Composable to a class property
-
-See the highlighted sections related to composable usage.
-::: code-group
-<<< @/components/usage/CounterComposables.vue{vue:line-numbers}
-:::
-
-:::details For this example we initialize the component like this:
-
-```vue
-<template>
-  <CounterComposables />
-</template>
-```
-
-:::
-
-<div style="font-size: 18px; font-weight: 500;">Result</div>
-
-<CounterComposables />
-
-### Destructure Vue 3 Composable into the class
-
-See the highlighted sections related to destructuring composable usage.
-
-::: code-group
-<<< @/components/usage/CounterComposablesDestructuring.vue{vue:line-numbers}
-<<< @/components/usage/functions/useCustomMouse.ts{ts:line-numbers} [functions/useCustomMouse.ts]
-:::
-
-:::details For this example we initialize the component like this:
-
-```vue
-<template>
-  <CounterComposablesDestructuring />
-</template>
-```
-
-:::
-
-<div style="font-size: 18px; font-weight: 500;">Result</div>
-
-<CounterComposablesDestructuring />
-
-
-### Assign `ivue` Composables to a class property
-
-Using `ivue` based composables assigned to a class property:
-
-::: code-group
-<<< @/components/usage/CounterComposablesIvue.vue{vue:line-numbers}
-<<< @/components/usage/classes/CustomMouse.ts{ts:line-numbers} [classes/CustomMouse.ts]
-:::
-
-:::details For this example we initialize the component like this:
-
-```vue
-<template>
-  <CounterComposablesIvue />
-</template>
-```
-
-:::
-
-<div style="font-size: 18px; font-weight: 500;">Result</div>
-
-<CounterComposablesIvue />
-
-### Destructure `ivue` Composables Into Class Scope
-
-See the sections related to using `ivue` based composables initialized through class destructuring assignment.
-
-::: code-group
-<<< @/components/usage/CounterComposablesIvueDestructuring.vue{vue:line-numbers}
-<<< @/components/usage/classes/CustomMouse.ts{ts:line-numbers} [classes/CustomMouse.ts]
-:::
-
-:::details For this example we initialize the component like this:
-
-```vue
-<template>
-  <CounterComposablesIvueDestructuring />
-</template>
-```
-
-:::
-
-<div style="font-size: 18px; font-weight: 500;">Result</div>
-
-<CounterComposablesIvueDestructuring />
-
-
-## Using Inside Composables
-
-See the highlighted sections related to using `ivue` inside a composable.
-
-::: code-group
-<<< @/components/usage/CounterInsideComposables.vue{vue:line-numbers}
-:::
-
-:::details For this example we initialize the component like this:
-
-```vue
-<template>
-  <CounterInsideComposables />
-</template>
-```
-
-:::
-
-<div style="font-size: 18px; font-weight: 500;">Result</div>
-
-<CounterInsideComposables />
-
-## Using Computeds
-
-### Getters are computeds in `ivue` unless disabled.<br />
-See the highlighted sections related to getters.
-
-::: code-group
-<<< @/components/usage/CounterComputeds.vue{vue:line-numbers}
-:::
-
-:::details For this example we initialize the component like this:
-```vue
-<template>
-  <CounterComputeds />
-</template>
-```
-:::
-
-<div style="font-size: 18px; font-weight: 500;">Result</div>
-<CounterComputeds />
-
-### Disable computed behavior for certain getters in `ivue`.<br />
-You can disable computed getters via `static ivue = { getter: false }`, see below:
-
-::: code-group
-<<< @/components/usage/CounterComputedsDisabled.vue{vue:line-numbers}
-:::
-
-The result of this example is identical to the above.
-
-
-
-## Using Watch
-
-To use `watch`, `watchEffect`, and other reactive functions, declare `.init()` method in the class.
-See the highlighted sections related to using `init()` below:
-
-::: code-group
-<<< @/components/usage/CounterWatch.vue{vue:line-numbers}
-:::
-
-:::details For this example we initialize the component like this:
-
-```vue
-<template>
-  <CounterWatch />
-</template>
-```
-
-:::
-
-<div style="font-size: 18px; font-weight: 500;">Result</div>
-
-<CounterWatch />
-
-
-
-## Using Lifecycle Hooks
-
-To use `onMounted`, `onBeforeMount` and other lifecycle hooks, declare `.init()` method in the class.
-See the highlighted sections related to using `init()` below:
-
-::: tip NOTICE:
-`init()` method can be declared as `async` if needed.
-:::
-
-::: code-group
-<<< @/components/usage/CounterLifecycleHooks.vue{vue:line-numbers}
-:::
-
-:::details For this example we initialize the component like this:
-
-```vue
-<template>
-  <CounterLifecycleHooks />
-</template>
-```
-:::
-
-<div style="font-size: 18px; font-weight: 500;">Result</div>
-<CounterLifecycleHooks />

package/docs/package.json

@@ -1,37 +0,0 @@
-{
-  "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": {
-    "@typescript-eslint/eslint-plugin": "^5.10.0",
-    "@typescript-eslint/parser": "^5.10.0",
-    "cpy-cli": "^4.2.0",
-    "eslint": "^8.10.0",
-    "eslint-config-prettier": "^8.1.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-vue": "^9.14.1",
-    "execa": "^8.0.0",
-    "ivue": "^1.5.1",
-    "typescript": "^4.5.4",
-    "vite-plugin-dynamic-import": "^1.5.0",
-    "vite-tsconfig-paths": "^4.3.2",
-    "vitepress": "^1.0.0",
-    "vue": "3.2.44",
-    "vue-dd": "1.6.7",
-    "vue-use": "^0.2.0"
-  },
-  "pnpm": {
-    "peerDependencyRules": {
-      "ignoreMissing": [
-        "@algolia/client-search"
-      ]
-    }
-  }
-}

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

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

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

package/docs/vite.config.ts

@@ -1,20 +0,0 @@
-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,14 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <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>
-  </body>
-</html>

package/tsconfig.json

@@ -1,25 +0,0 @@
-{
-  "compilerOptions": {
-    "baseUrl": ".",
-    "module": "ESNext",
-    "target": "es2016",
-    "lib": ["DOM", "ESNext"],
-    "strict": true,
-    "esModuleInterop": true,
-    "incremental": false,
-    "skipLibCheck": true,
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "noUnusedLocals": true,
-    "strictNullChecks": true,
-    "allowJs": true,
-    "noEmit": true,
-    "forceConsistentCasingInFileNames": true,
-    "types": ["vitest/globals"],
-    "paths": {
-      "@/*": ["lib/*"]
-    }
-  },
-  "include": ["lib"],
-  "exclude": ["dist", "node_modules"]
-}

package/vite-env.d.ts

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

package/vite.config.ts

@@ -1,50 +0,0 @@
-import { fileURLToPath, URL } from 'node:url'
-
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import dts from "vite-plugin-dts";
-import pkg from "./package.json";
-import libCss from 'vite-plugin-libcss';
-import { terser } from 'rollup-plugin-terser';
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
-    }
-  },
-  server: {
-    fs: {
-      allow: ['..']
-    }
-  },
-  plugins: [
-    vue(),
-    dts({
-      cleanVueFileName: true,
-    }),
-    libCss()
-  ],
-  build: {
-    cssCodeSplit: true,
-    lib: {
-      entry: "./lib/index.ts",
-      formats: ["es", "umd"],
-      // the name expose in umd mode
-      name: pkg.name,
-      fileName: (format) => `index.${format}.js`,
-    },
-    rollupOptions: {
-      external: ["vue"],
-      plugins:[
-        terser()
-      ],
-      output: {
-        globals: {
-          vue: "Vue"
-        },
-      },
-    },
-  },
-})

package/vitest.config.ts

@@ -1,19 +0,0 @@
-import { fileURLToPath } from "node:url";
-import { mergeConfig } from "vite";
-import { configDefaults, defineConfig } from "vitest/config";
-import viteConfig from "./vite.config";
-
-export default mergeConfig(
-  viteConfig,
-  defineConfig({
-    test: {
-      environment: "jsdom",
-      exclude: [...configDefaults.exclude, "e2e/*", "**/demo/**"],
-      root: fileURLToPath(new URL("./", import.meta.url)),
-      reporters: ["default", "html", "verbose"],
-      coverage: {
-        include: ['lib/**']
-      } 
-    },
-  })
-);