chore(组件): utils 初始使用与基本vue component等常用方法

package.json

@@ -18,6 +18,9 @@
     "changeset": "changeset",
     "version-packages": "changeset version"
   },
+  "peerDependencies": {
+    "vue": "^3.2.0"
+  },
   "devDependencies": {
     "@changesets/cli": "^2.24.4",
     "@commitlint/cli": "^17.1.2",

packages/components/audio/src/index.vue

@@ -3,7 +3,7 @@
     <audio @play="rotation" ref="audio" autoplay loop>
       <source :src="src" />
     </audio>
-    <span v-for="random in randoms" :style="{ '--percent': random }"></span>
+    <span v-for="random in randoms" :style="{ '--percent': random }" :key="random"></span>
   </div>
 </template>
 
@@ -52,5 +52,5 @@
 </script>
 
 <script>
-  export default { name: 'ui-audio' };
+  export default { name: 'UiAudio' };
 </script>

packages/utils/package.json

@@ -1,37 +1,17 @@
 {
   "name": "@kankan/utils",
   "version": "1.0.0",
-  "main": "dist/index",
-  "types": "dist/index",
-  "files": [
-    "dist"
-  ],
-  "author": {
-    "name": "gemercheung",
-    "email": "gemercheung@gmail.com",
-    "url": "http://gemer.xyz/"
-  },
-  "scripts": {
-    "build": "pnpm run clean && pnpm run compile",
-    "clean": "rimraf -rf ./dist",
-    "compile": "rollup -c",
-    "prepublishOnly": "pnpm run build"
-  },
-  "dependencies": {},
+  "main": "index.ts",
+  "private": true,
   "peerDependencies": {
     "vue": "^3.2.0"
   },
-  "devDependencies": {
-    "@rollup/plugin-typescript": "~8.3.4",
-    "rimraf": "~3.0.2",
-    "rollup": "~2.77.3",
-    "rollup-plugin-terser": "^7.0.2",
-    "tslib": "^2.4.0",
-    "typescript": "~4.7.4"
-  },
   "typedoc": {
     "entryPoint": "./src/index.ts",
     "readmeFile": "./README.md",
     "displayName": "@kankan/utils"
+  },
+  "devDependencies": {
+    "@vue/shared": "^3.2.39"
   }
 }

packages/utils/rollup.config.js

@@ -1,21 +0,0 @@
-import typescript from '@rollup/plugin-typescript';
-import { terser } from 'rollup-plugin-terser';
-import pkg from './package.json';
-
-export default [
-  {
-    input: 'src/index.ts',
-    external: Object.keys(pkg.dependencies),
-    plugins: [
-      typescript({
-        tsconfig: './tsconfig.build.json',
-      }),
-      terser({
-        compress: {
-          drop_console: false,
-        },
-      }),
-    ],
-    output: [{ dir: './dist', format: 'esm', sourcemap: true }],
-  },
-];

packages/utils/src/index.ts

@@ -0,0 +1 @@
+export * from './vue';

packages/utils/src/vue/index.ts

@@ -0,0 +1 @@
+export * from './install';

packages/utils/src/vue/install.ts

@@ -0,0 +1,42 @@
+import { NOOP } from '@vue/shared';
+
+import type { App } from 'vue';
+import type { SFCInstallWithContext, SFCWithInstall } from './typescript';
+
+export const withInstall = <T, E extends Record<string, any>>(main: T, extra?: E) => {
+  (main as SFCWithInstall<T>).install = (app): void => {
+    for (const comp of [main, ...Object.values(extra ?? {})]) {
+      app.component(comp.name, comp);
+    }
+  };
+
+  if (extra) {
+    for (const [key, comp] of Object.entries(extra)) {
+      (main as any)[key] = comp;
+    }
+  }
+  return main as SFCWithInstall<T> & E;
+};
+
+export const withInstallFunction = <T>(fn: T, name: string) => {
+  (fn as SFCWithInstall<T>).install = (app: App) => {
+    (fn as SFCInstallWithContext<T>)._context = app._context;
+    app.config.globalProperties[name] = fn;
+  };
+
+  return fn as SFCInstallWithContext<T>;
+};
+
+export const withInstallDirective = <T>(directive: T, name: string) => {
+  (directive as SFCWithInstall<T>).install = (app: App): void => {
+    app.directive(name, directive);
+  };
+
+  return directive as SFCWithInstall<T>;
+};
+
+export const withNoopInstall = <T>(component: T) => {
+  (component as SFCWithInstall<T>).install = NOOP;
+
+  return component as SFCWithInstall<T>;
+};

packages/utils/src/vue/typescript.ts

@@ -0,0 +1,7 @@
+import type { AppContext, Plugin } from 'vue';
+
+export type SFCWithInstall<T> = T & Plugin;
+
+export type SFCInstallWithContext<T> = SFCWithInstall<T> & {
+  _context: AppContext | null;
+};

packages/utils/tsconfig.build.json

@@ -1,11 +0,0 @@
-{
-  "extends": "../../tsconfig.build.json",
-
-  "compilerOptions": {
-    "outDir": "./dist"
-  },
-
-  "include": [
-    "src/**/*"
-  ]
-}

packages/utils/tsconfig.json

@@ -1,3 +0,0 @@
-{
-  "extends": "../../tsconfig.json"
-}

pnpm-lock.yaml

@@ -28,6 +28,9 @@ importers:
       typescript: ~4.7.4
       unplugin-vue-macros: ^0.11.2
       vitest: ^0.23.4
+      vue: ^3.2.0
+    dependencies:
+      vue: 3.2.39
     devDependencies:
       '@changesets/cli': 2.24.4
       '@commitlint/cli': 17.1.2
@@ -73,7 +76,7 @@ importers:
       tslib: 2.4.0
       typescript: 4.7.4
 
-  packages/utils:
+  packages/directives:
     specifiers:
       '@rollup/plugin-typescript': ~8.3.4
       rimraf: ~3.0.2
@@ -81,6 +84,9 @@ importers:
       rollup-plugin-terser: ^7.0.2
       tslib: ^2.4.0
       typescript: ~4.7.4
+      vue: ^3.2.0
+    dependencies:
+      vue: 3.2.39
     devDependencies:
       '@rollup/plugin-typescript': 8.3.4_z6zeof5eklcd4ck5cj6ien7gzy
       rimraf: 3.0.2
@@ -89,6 +95,15 @@ importers:
       tslib: 2.4.0
       typescript: 4.7.4
 
+  packages/utils:
+    specifiers:
+      '@vue/shared': ^3.2.39
+      vue: ^3.2.0
+    dependencies:
+      vue: 3.2.39
+    devDependencies:
+      '@vue/shared': 3.2.39
+
 packages:
 
   /@ampproject/remapping/2.2.0:

tsconfig.build.json

@@ -1,19 +1,20 @@
 {
   "compilerOptions": {
-    "module": "commonjs",
-    "target": "es5",
+    "module": "esnext",
+    "target": "es2018",
     "sourceMap": true,
+    "moduleResolution": "node",
     "declaration": true,
     "declarationMap": true,
     "noEmitOnError": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
     "types": [],
-    "jsx": "react",
+    "rootDir": ".",
     "noEmit": false
   },
-  "exclude": [
-    "node_modules",
-    "dist"
-  ]
+  "exclude": ["node_modules", "dist"],
+  "paths": {
+    "@kankan/*": ["packages/*"]
+  }
 }