close #71, auto generate index.d.ts for apis (#72)

* feat(cli): #71, auto generate index.d.ts for apis

* docs(cli): remove platform description

* chore(mp): no need to build precommit

* chore: add some publish scripts

* perf(cli): fix global vars, add new config alias

* perf(cli): fix ts declaration

* perf(cli): add ReqFn ts declaration

* feat(cli): close #71, release v0.4.0

Author: BuptStEve

packages/tua-mp-cli/README.md

@@ -108,6 +108,31 @@ $ tuamp eject
 $ tuamp e
 ```
 
+### 生成接口声明命令 `declare` <Badge text="0.4.0+"/>
+这个命令将读取导出的 apis 然后自动生成 `index.d.ts`。
+
+```bash
+$ tuamp declare [apisPath]
+# OR
+$ tuamp d [apisPath]
+```
+
+* `apisPath` 默认值为 `src/apis/index.js`
+* `index.d.ts` 将生成在 `apisPath` 同级目录下
+
+由于使用 `require` 读取导出 apis 对象的文件，所以可能会碰到 `alias` 问题。例如项目中设置了 `@` 作为 `./src/` 的别名。虽然 `@tua-mp/cli` 已内置了一些 `alias`，但你仍然可以自由配置。
+
+在 `tua.config.js` 中的 `alias` 选项会透传给 [babel-plugin-module-resolver](https://github.com/tleunen/babel-plugin-module-resolver)，例如将 `foobar` 指向 './src/foobar' 可以这么配置：
+
+```js
+// tua.config.js
+module.exports = {
+    alias: {
+        'foobar': './src/foobar',
+    },
+}
+```
+
 ## 配置
 配置文件和 `@tua-mp/service` 一样，都是使用 `tua.config.js`。
 
@@ -117,6 +142,12 @@ $ tuamp e
 
 自定义模板的路径。
 
+### alias <Badge text="0.4.0+"/>
+* 类型：`Object`
+* 默认值：[请点击这里查看源码](https://github.com/tuateam/tua-mp/blob/master/packages/tua-mp-cli/lib/constants.js)
+
+设置路径别名对象。
+
 **读取模板的优先级逻辑是：**
 
 1. 首先尝试使用 `tua.config.js` 中的 `templateDir` 字段

packages/tua-mp-cli/bin/commands/declare.js

@@ -0,0 +1,13 @@
+const { readConfigFile } = require('../../lib/utils/')
+
+exports.desc = 'generate api declaration file by [apisPath]'
+exports.aliases = 'd'
+exports.command = 'declare [apisPath]'
+
+exports.builder = {}
+
+exports.handler = (argv) => {
+    argv.tuaConfig = readConfigFile()
+
+    return require('../../lib/declare')(argv)
+}

packages/tua-mp-cli/lib/addApi.js

@@ -34,7 +34,7 @@ module.exports = (options = {}) => {
 
     // 小驼峰的名称
     const ccName = hyphenCaseToCamelCase(name)
-    const outputStr = `小程序 api -> ${name}`
+    const outputStr = ` api -> ${name}`
     const relativePath = 'src/apis'
     const treeLog = treeify.asTree({
         [relativePath]: {

packages/tua-mp-cli/lib/addPage.js

@@ -38,7 +38,7 @@ module.exports = (options = {}) => {
     const hcName = camelCaseToHyphenCase(name)
     // 大驼峰的名称
     const uccName = hyphenCaseToUpperCamelCase(name)
-    const outputStr = `小程序页面 -> ${hcName}`
+    const outputStr = `页面 -> ${hcName}`
 
     const pagesPath = 'src/pages'
     const appJsonPath = 'src/app/app.json'

packages/tua-mp-cli/lib/constants.js

@@ -1,5 +1,12 @@
 const defaultTuaConfig = {
     templateDir: '.templates',
+    alias: {
+        '@': './src',
+        '@comps': './src/components',
+        '@const': './src/scripts/constants',
+        '@utils': './src/scripts/utils',
+        '@styles': './src/styles',
+    },
 }
 
 module.exports = {

packages/tua-mp-cli/lib/declare.js

@@ -0,0 +1,180 @@
+const fs = require('fs')
+const path = require('path')
+
+const {
+    log,
+    error,
+    writeFile,
+    promptAndRun,
+    catchAndThrow,
+} = require('./utils')
+const { defaultTuaConfig } = require('./constants')
+
+const cwd = process.cwd()
+
+/**
+ * 根据导出的 apis，生成相应的 index.d.ts 声明
+ * @param {Object} options
+ * @param {String} options.apisPath 导出 apis 对象的文件地址
+ * @param {Object} options.tuaConfig 项目自定义配置
+ */
+module.exports = (options = {}) => {
+    /* istanbul ignore next */
+    const {
+        apisPath = 'src/apis/index.js',
+        tuaConfig: {
+            alias = defaultTuaConfig.alias,
+        } = defaultTuaConfig,
+    } = options
+
+    const sourcePath = process.env.TUA_CLI_TEST_SRC ||
+        /* istanbul ignore next */
+        path.resolve(cwd, apisPath)
+
+    try {
+        mockGlobalVars()
+
+        const isDir = fs.lstatSync(sourcePath).isDirectory()
+
+        const dir = isDir ? apisPath : path.dirname(apisPath)
+        const name = isDir ? `index` : path.basename(apisPath, path.extname(apisPath))
+        const dist = `${dir}/${name}.d.ts`
+        const relativePath = path.relative(cwd, dist)
+        const targetPath = process.env.TUA_CLI_TEST_DIST ||
+            /* istanbul ignore next */
+            path.resolve(cwd, dist)
+
+        require('@babel/register')({
+            plugins: [
+                [require('babel-plugin-module-resolver'), { root: cwd, alias }],
+            ],
+        })
+
+        // get apis
+        const apis = require(sourcePath)
+        const code = genApiDeclarationCode(apis)
+        const run = (isCover = false) => writeFile(targetPath, code)
+            .then(() => {
+                log(`成功${isCover ? '覆盖' : '生成'} api 声明 -> ${relativePath}\n`)
+            })
+        const message = 'Target file exists. Continue?'
+
+        return promptAndRun({ run, message, targetPath })
+    } catch (e) {
+        error(`Error loading ${sourcePath}:`)
+
+        return catchAndThrow(e)
+    }
+}
+
+// mock global vars
+function mockGlobalVars () {
+    const location = {
+        hash: '',
+        host: '',
+        href: '',
+        port: '',
+        origin: '',
+        search: '',
+        hostname: '',
+        protocol: '',
+        pathname: '',
+    }
+    const navigator = {
+        appName: '',
+        platform: '',
+        userAgent: '',
+        appCodeName: '',
+    }
+
+    global.wx = global.wx || {}
+    global.window = global.window || { location, navigator }
+    global.location = global.location || location
+    global.navigator = global.navigator || navigator
+}
+
+/**
+ * 根据 api config 生成 api 函数声明代码
+ * @param {object} apis 属性为 tua-api 生成的请求对象
+ */
+function genApiDeclarationCode (apis) {
+    // 类型声明
+    const headCode = genCodeByLevel(`
+        // default response result
+        interface Result { code: number, data: any, msg?: string }
+        interface ReqFn {
+            key: string
+            mock: any
+            params: object | string[]
+        }
+        interface RuntimeOptions {
+            // for jsonp
+            callbackName?: string
+            [key: string]: any
+        }
+        // request function without params
+        interface NoParamsReqFn extends ReqFn {
+            <T = Result>(params?: void, options?: RuntimeOptions): Promise<T>
+        }`, 2)
+
+    // 各个 api 生成的声明代码
+    const apisCode = Object.keys(apis)
+        .map((key) => genCodeByLevel(`
+            export const ${key}: {
+                ${genApiFnsCode(apis[key])}
+            }`, 3)
+        )
+        .join(`\n\n`)
+
+    return headCode + `\n\n` + apisCode
+}
+
+function genCodeByLevel (rawCode, level) {
+    const sep = RegExp(`\\n\\s{${4 * level}}`)
+
+    return rawCode
+        .split(sep)
+        .filter(x => x)
+        .join(`\n`)
+        .replace(/ {4}/g, `\t`)
+}
+
+/**
+ * 生成单个 api 下各个函数的声明代码
+ * @param {Object} api tua-api 生成的请求对象
+ */
+function genApiFnsCode (api) {
+    return Object.keys(api)
+        .map((fnKey) => {
+            const attrsCode = genAttrsCode(api[fnKey].params)
+            if (!attrsCode) return `${fnKey}: NoParamsReqFn`
+
+            return genCodeByLevel(
+                `${fnKey}: ReqFn & {
+                    <T = Result>(
+                        params: { ${attrsCode} },
+                        options?: RuntimeOptions
+                    ): Promise<T>
+                }`, 3)
+        })
+        // 短的排前面
+        .sort((x, y) => x.length - y.length)
+        .join(`\n\t`)
+}
+
+/**
+ * 生成参数声明代码
+ * @param {Object|Array} params 接口参数配置
+ */
+function genAttrsCode (params = []) {
+    const attrsCodeArr = Array.isArray(params)
+        // 数组形式的参数都认为是可选的
+        ? params.map(key => `${key}?: any`)
+        : Object.keys(params).map((key) => {
+            const param = params[key]
+            const isRequired = param.required || param.isRequired
+            return `${key}${isRequired ? '' : '?'}: any`
+        })
+
+    return attrsCodeArr.join(`, `)
+}

packages/tua-mp-cli/lib/utils/logFns.js

@@ -17,7 +17,7 @@ const error = out => logByType('error')(logSymbols.error + ' ' + chalk.red(out))
 const catchAndThrow = (err) => {
     err instanceof Error ? logByType('error')(logSymbols.error, err) : error(err)
 
-    return process.env.NODE_ENV === 'test' && Promise.reject(Error())
+    return process.env.NODE_ENV === 'test' && Promise.reject(Error(err))
 }
 
 module.exports = {

packages/tua-mp-cli/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@tua-mp/cli",
-    "version": "0.3.0",
+    "version": "0.4.0",
     "description": "tua-mp 命令行工具",
     "bin": {
         "tuamp": "bin/tuamp.js"
@@ -13,7 +13,10 @@
         "lint": "eslint --fix lib/ bin/ test/",
         "clean": "rimraf .temp && mkdir .temp/ .temp/src/ .temp/src/app/ .temp/src/apis/ .temp/src/pages/ .temp/src/comps/ && echo {} > .temp/src/app/app.json && echo \"module.exports = {\n\ttemplateDir: '.templates',\n}\" > .temp/tua.config.js",
         "precommit": "lint-staged",
-        "pub": "npm test && npm publish"
+        "next:pm": "npm --no-git-tag-version version preminor",
+        "next:pr": "npm --no-git-tag-version version prerelease",
+        "pub": "npm test && npm publish",
+        "pub:n": "npm test && npm publish --tag next"
     },
     "lint-staged": {
         "bin/*": [
@@ -37,7 +40,10 @@
         "package.json"
     ],
     "dependencies": {
+        "@babel/core": "^7.4.3",
+        "@babel/register": "^7.4.0",
         "@vue/cli-init": "^3.5.1",
+        "babel-plugin-module-resolver": "^3.2.0",
         "babel-preset-env": "^1.7.0",
         "chalk": "^2.4.2",
         "fs-extra": "^7.0.1",