Merge pull request #11428 from LengJunT/feat/chooseLocation-api

feat(h5) h5的chooseLocation 新增api，支持腾讯地图选点组件的所有api

package.json

@@ -69,6 +69,7 @@
     "@rollup/plugin-commonjs": "^20.0.0",
     "@rollup/plugin-node-resolve": "^8.0.0",
     "@rollup/plugin-replace": "^2.2.0",
+    "@rollup/plugin-typescript": "^8.3.1",
     "@testing-library/jest-native": "^4.0.4",
     "@testing-library/react-native": "^9.0.0",
     "@types/autoprefixer": "9.7.0",
@@ -122,8 +123,8 @@
     "html-webpack-plugin": "^3.0.6",
     "husky": "^1.2.0",
     "jest": "26.4.2",
-    "jest-expo": "^42.0.0",
     "jest-dom": "^1.3.1",
+    "jest-expo": "^42.0.0",
     "jest-fetch-mock": "^3.0.3",
     "jest-localstorage-mock": "^2.4.0",
     "jest-mock-console": "^1.0.0",
@@ -146,6 +147,7 @@
     "rollup": "^2.56.2",
     "rollup-plugin-buble": "^0.19.8",
     "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-node-externals": "^4.0.0",
     "rollup-plugin-postcss": "^3.1.8",
     "rollup-plugin-typescript2": "^0.24.3",
     "shelljs": "^0.8.1",

packages/taro-h5/package.json

@@ -17,8 +17,10 @@
     "test:dev": "jest --watch",
     "test:coverage": "jest --coverage",
     "copy:assets": "copy src/**/*.css dist",
-    "build": "rollup -c && npm run copy:assets && tsc",
-    "dev": "tsc -w & npm run copy:assets"
+    "build": "rollup -c && tsc",
+    "dev": "tsc -w",
+    "prebuild": "npm run copy:assets",
+    "predev": "npm run copy:assets"
   },
   "repository": {
     "type": "git",
@@ -37,6 +39,7 @@
     "base64-js": "^1.3.0",
     "jsonp-retry": "^1.0.3",
     "mobile-detect": "^1.4.2",
+    "query-string": "^7.1.1",
     "whatwg-fetch": "^3.4.0"
   }
 }

packages/taro-h5/rollup.config.js

@@ -1,36 +1,35 @@
 import { mergeWith } from 'lodash'
-import babel from '@rollup/plugin-babel'
 import commonjs from '@rollup/plugin-commonjs'
 import resolve from '@rollup/plugin-node-resolve'
-import typescript from 'rollup-plugin-typescript2'
+import typescript from '@rollup/plugin-typescript'
+import externals from 'rollup-plugin-node-externals'
 import postcss from 'rollup-plugin-postcss'
 
 import exportNameOnly from './build/rollup-plugin-export-name-only'
 
 const baseConfig = {
-  external: d => {
-    return /^@tarojs\/(api|router|runtime|taro)$/.test(d) || d.includes('@babel/runtime')
-  },
   output: {
     format: 'cjs',
-    sourcemap: false,
-    exports: 'auto'
+    sourcemap: true,
+    exports: 'named'
   },
   treeshake: false,
   plugins: [
+    externals({
+      devDeps: false
+    }),
     resolve({
       preferBuiltins: false,
       mainFields: ['main:h5', 'browser', 'module', 'jsnext:main', 'main']
     }),
-    postcss({
-      inject: { insertAt: 'top' }
-    }),
-    babel({
-      babelHelpers: 'bundled'
+    typescript({
+      tsconfig: './tsconfig.json',
+      declaration: true,
+      sourceMap: true
     }),
     commonjs(),
-    typescript({
-      useTsconfigDeclarationDir: true
+    postcss({
+      inject: { insertAt: 'top' }
     })
   ]
 }

packages/taro-h5/src/api/location/chooseLocation.ts

@@ -1,16 +1,26 @@
 import Taro from '@tarojs/api'
+import { stringify } from 'query-string'
+
 import { MethodHandler } from '../utils/handler'
 import './style.css'
 
-function createLocationChooser (handler, key = LOCATION_APIKEY) {
+function createLocationChooser (handler, key = LOCATION_APIKEY, mapOpt: Taro.chooseLocation.Option['mapOpts'] = {}) {
+  const { latitude, longitude, ...opts } = mapOpt
+  const query = {
+    key,
+    type: 1,
+    coord: mapOpt.coord ?? [latitude, longitude].every(e => Number(e) >= 0) ? `${latitude},${longitude}` : undefined,
+    referer: 'myapp',
+    ...opts
+  }
   const html = `
 <div class='taro_choose_location'>
   <div class='taro_choose_location_bar'>
     <div class='taro_choose_location_back'></div>
     <p class='taro_choose_location_title'>位置</p>
     <button class='taro_choose_location_submit'>完成</button>
   </div>
-  <iframe class='taro_choose_location_frame' frameborder='0' src='https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=${key}&referer=myapp'></iframe>
+  <iframe class='taro_choose_location_frame' frameborder='0' src="https://apis.map.qq.com/tools/locpicker?${stringify(query, { arrayFormat: 'comma', skipNull: true })}" />
 </div>
 `
   const container = document.createElement('div')
@@ -57,7 +67,7 @@ function createLocationChooser (handler, key = LOCATION_APIKEY) {
 /**
  * 打开地图选择位置。
  */
-export const chooseLocation: typeof Taro.chooseLocation = ({ success, fail, complete } = {}) => {
+export const chooseLocation: typeof Taro.chooseLocation = ({ success, fail, complete, mapOpts } = {}) => {
   const key = LOCATION_APIKEY
   const handle = new MethodHandler({ name: 'chooseLocation', success, fail, complete })
   return new Promise((resolve, reject) => {
@@ -96,7 +106,7 @@ export const chooseLocation: typeof Taro.chooseLocation = ({ success, fail, comp
           return handle.fail({}, reject)
         }
       }
-    }, key)
+    }, key, mapOpts)
 
     document.body.appendChild(chooser.container)
 

packages/taro-router/package.json

@@ -30,8 +30,7 @@
     "@tarojs/runtime": "3.4.4",
     "@tarojs/taro": "3.4.4",
     "history": "^5.1.0",
-    "query-string": "^6.13.8",
-    "universal-router": "^8.3.0",
-    "url-parse": "^1.4.7"
+    "query-string": "^7.1.1",
+    "universal-router": "^8.3.0"
   }
 }

packages/taro-router/rollup.config.js

@@ -1,16 +1,13 @@
-import babel from '@rollup/plugin-babel'
 import commonjs from '@rollup/plugin-commonjs'
-import typescript from 'rollup-plugin-typescript2'
 import resolve from '@rollup/plugin-node-resolve'
+import typescript from '@rollup/plugin-typescript'
+import externals from 'rollup-plugin-node-externals'
 import * as path from 'path'
 
 const cwd = __dirname
 
 const baseConfig = {
   input: path.join(cwd, 'src/index.ts'),
-  external: d => {
-    return /^@tarojs\/(runtime|taro)$/.test(d) || d.includes('@babel/runtime')
-  },
   output: [
     {
       file: path.join(cwd, 'dist/index.js'),
@@ -20,16 +17,18 @@ const baseConfig = {
     }
   ],
   plugins: [
-    typescript(),
+    externals({
+      devDeps: false
+    }),
     resolve({
       preferBuiltins: false,
       mainFields: ['main:h5', 'browser', 'module', 'jsnext:main', 'main']
     }),
-    commonjs(),
-    babel({
-      extensions: ['.js', '.jsx', '.es6', '.es', '.mjs', 'ts', 'tsx'],
-      babelHelpers: 'runtime'
-    })
+    typescript({
+      tsconfig: './tsconfig.json',
+      sourceMap: true
+    }),
+    commonjs()
   ]
 }
 const esmConfig = Object.assign({}, baseConfig, {

packages/taro/types/api/location/index.d.ts

@@ -87,16 +87,22 @@ declare module '../../index' {
 
   namespace chooseLocation {
     interface Option {
-      /** 接口调用结束的回调函数（调用成功、失败都会执行） */
-      complete?: (res: TaroGeneral.CallbackResult) => void
-      /** 接口调用失败的回调函数 */
-      fail?: (res: TaroGeneral.CallbackResult) => void
       /** 目标地纬度 */
       latitude?: number
       /** 目标地经度 */
       longitude?: number
+      /** 地图选点组件参数
+       * @supported h5
+       * @h5 仅支持 H5 使用
+       * @see https://lbs.qq.com/webApi/component/componentGuide/componentPicker
+       */
+      mapOpts?: Record<string, unknown>
       /** 接口调用成功的回调函数 */
       success?: (result: SuccessCallbackResult) => void
+      /** 接口调用失败的回调函数 */
+      fail?: (res: TaroGeneral.CallbackResult) => void
+      /** 接口调用结束的回调函数（调用成功、失败都会执行） */
+      complete?: (res: TaroGeneral.CallbackResult) => void
     }
 
     interface SuccessCallbackResult extends TaroGeneral.CallbackResult {