chore: packages more friendly support typescript

jd/generate-types-taro.js

@@ -0,0 +1,27 @@
+const config = require('../src/config.json');
+const path = require('path');
+const fs = require('fs-extra');
+let importStr = ``;
+const packages = [];
+config.nav.map((item) => {
+  item.packages.forEach((element) => {
+    let { name } = element;
+    const filePath = path.join(`./src/packages/__VUE/${name.toLowerCase()}/index.taro.vue`);
+    importStr += `import ${name} from './__VUE/${name.toLowerCase()}/${
+      fs.existsSync(filePath) ? 'index.taro' : 'index'
+    }';\n`;
+
+    packages.push(name);
+  });
+});
+let installFunction = `
+export { ${packages.join(',')} };`;
+let fileStr = importStr + installFunction;
+fs.outputFileSync(path.resolve(__dirname, '../dist/types/nutui.d.ts'), fileStr, 'utf8');
+fs.outputFileSync(
+  path.resolve(__dirname, '../dist/types/index.d.ts'),
+  `import * as NutUI from './nutui';
+export default NutUI;
+export * from './nutui';`,
+  'utf8'
+);

jd/generate-types.js

@@ -1,45 +1,24 @@
 const config = require('../src/config.json');
 const path = require('path');
 const fs = require('fs-extra');
-let importStr = `import { App } from 'vue';
-declare class UIComponent {
-  static install(vue: App): void;
-  $props: any;
-}\n`;
+let importStr = ``;
 const packages = [];
 config.nav.map((item) => {
   item.packages.forEach((element) => {
-    let { name, show, exportEmpty, type } = element;
-    if (show || exportEmpty) {
-      importStr +=
-        type == 'methods' ? `declare const ${name}: any;\n` : `declare class ${name} extends UIComponent {}\n`;
-      packages.push(name);
-    }
+    let { name } = element;
+    importStr += `import ${name} from './__VUE/${name.toLowerCase()}';\n`;
+
+    packages.push(name);
   });
 });
 let installFunction = `
-export interface InstallationOptions {
-  locale?: any;
-  lang?: any;
-}
-declare function install(app: App, options?: InstallationOptions): void;
-export { ${packages.join(',')},install };
-declare const _default: {
-  install: typeof install;
-  version: string;
-};
-export default _default;`;
+export { ${packages.join(',')} };`;
 let fileStr = importStr + installFunction;
-fs.outputFile(path.resolve(__dirname, '../dist/nutui.d.ts'), fileStr, 'utf8', (error) => {
-  // logger.success(`${package_config_path} 文件写入成功`);
-});
-fs.outputFile(
-  path.resolve(__dirname, '../dist/index.d.ts'),
+fs.outputFileSync(path.resolve(__dirname, '../dist/types/nutui.d.ts'), fileStr, 'utf8');
+fs.outputFileSync(
+  path.resolve(__dirname, '../dist/types/index.d.ts'),
   `import * as NutUI from './nutui';
 export default NutUI;
 export * from './nutui';`,
-  'utf8',
-  (error) => {
-    // logger.success(`${package_config_path} 文件写入成功`);
-  }
+  'utf8'
 );

package.json

@@ -5,7 +5,13 @@
   "main": "dist/nutui.umd.js",
   "module": "dist/nutui.es.js",
   "style": "dist/style.css",
-  "typings": "dist/index.d.ts",
+  "typings": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/nutui.es.js",
+      "require": "./dist/nutui.umd.js"
+    }
+  },
   "keywords": [
     "nutui",
     "nutui2",
@@ -41,7 +47,7 @@
     "build:site": "npm run checked && vite build",
     "build:site:oss": "npm run checked && vite build --base=/nutui/3x/",
     "build": "npm run checked && vite build --config vite.config.build.ts && vite build --config vite.config.build.disperse.ts && npm run generate:types && npm run generate:themes && vite build --config vite.config.build.css.ts",
-    "build:taro:vue": "npm run checked:taro:vue && vite build --config vite.config.build.taro.vue.ts && vite build --config vite.config.build.taro.vue.disperse.ts && npm run generate:types && npm run generate:themes && vite build --config vite.config.build.css.ts",
+    "build:taro:vue": "npm run checked:taro:vue && vite build --config vite.config.build.taro.vue.ts && vite build --config vite.config.build.taro.vue.disperse.ts && npm run generate:types:taro && npm run generate:themes && vite build --config vite.config.build.css.ts",
     "serve": "vite preview",
     "upload": "yarn build:site:oss && node ./jd/upload.js",
     "add": "node jd/createComponentMode.js",
@@ -50,6 +56,7 @@
     "generate:file": "node jd/generate-nutui.js",
     "generate:file:taro:vue": "node jd/generate-nutui-taro-vue.js",
     "generate:types": "node jd/generate-types.js",
+    "generate:types:taro": "node jd/generate-types-taro.js",
     "generate:themes": "node jd/generate-themes.js",
     "prepare": "husky install",
     "test": "jest",
@@ -103,6 +110,7 @@
     "ts-jest": "^26.5.5",
     "typescript": "^4.1.5",
     "vite": "^2.7.13",
+    "vite-plugin-dts": "^1.0.5",
     "vite-plugin-md": "^0.11.8",
     "vue": "^3.2.30",
     "vue-jest": "^5.0.0-alpha.7"

src/config.json

@@ -1018,7 +1018,6 @@
         }
       ]
     },
-
     {
       "name": "特色组件",
       "enName": "business",

vite.config.build.disperse.ts

@@ -1,4 +1,5 @@
 import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
 import vue from '@vitejs/plugin-vue';
 import path from 'path';
 import config from './package.json';
@@ -23,7 +24,40 @@ export default defineConfig({
   resolve: {
     alias: [{ find: '@', replacement: path.resolve(__dirname, './src') }]
   },
-  plugins: [vue()],
+  plugins: [
+    vue(),
+    dts({
+      insertTypesEntry: true,
+      copyDtsFiles: false,
+      cleanVueFileName: true,
+      outputDir: path.resolve(__dirname, './dist/types'),
+      include: path.resolve(__dirname, './src/packages/__VUE'),
+      beforeWriteFile: (filePath: string, content: string) => {
+        const fileContent = `import { App } from 'vue';
+declare type Install<T> = T & {
+  install(app: App): void;
+};
+`;
+        const start = 'declare const _default:';
+        const end = ';\nexport default _default;\n';
+        const remain = `
+declare module 'vue' {
+  interface GlobalComponents {
+      Nut${Object.keys(input).find(
+        (item: string) => item.toLowerCase() === filePath.split('/').slice(-2)[0]
+      )}: typeof _default;
+  }
+}     
+      `;
+        const inputs = content.match(RegExp(`${start}([\\s\\S]*?)${end}`));
+        const changeContent = inputs && inputs.length ? `${start} Install<${inputs[1]}>${end}${remain}` : content;
+        return {
+          filePath,
+          content: fileContent + changeContent
+        };
+      }
+    })
+  ],
   build: {
     minify: false,
     terserOptions: {

vite.config.build.taro.vue.disperse.ts

@@ -1,4 +1,5 @@
 import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
 import vue from '@vitejs/plugin-vue';
 import path from 'path';
 const fs = require('fs-extra');
@@ -25,7 +26,40 @@ export default defineConfig({
   resolve: {
     alias: [{ find: '@', replacement: path.resolve(__dirname, './src') }]
   },
-  plugins: [vue()],
+  plugins: [
+    vue(),
+    dts({
+      insertTypesEntry: true,
+      copyDtsFiles: false,
+      cleanVueFileName: true,
+      outputDir: path.resolve(__dirname, './dist/types'),
+      include: path.resolve(__dirname, './src/packages/__VUE'),
+      beforeWriteFile: (filePath: string, content: string) => {
+        const fileContent = `import { App } from 'vue';
+declare type Install<T> = T & {
+  install(app: App): void;
+};
+`;
+        const start = 'declare const _default:';
+        const end = ';\nexport default _default;\n';
+        const remain = `
+declare module 'vue' {
+  interface GlobalComponents {
+      Nut${Object.keys(input).find(
+        (item: string) => item.toLowerCase() === filePath.split('/').slice(-2)[0]
+      )}: typeof _default;
+  }
+}     
+      `;
+        const inputs = content.match(RegExp(`${start}([\\s\\S]*?)${end}`));
+        const changeContent = inputs && inputs.length ? `${start} Install<${inputs[1]}>${end}${remain}` : content;
+        return {
+          filePath,
+          content: fileContent + changeContent
+        };
+      }
+    })
+  ],
   build: {
     minify: false,
     terserOptions: {

vite.config.build.ts

@@ -1,4 +1,5 @@
 import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
 import vue from '@vitejs/plugin-vue';
 import path from 'path';
 import config from './package.json';