diff --git a/.fatherrc.ts b/.fatherrc.ts index 33c05fd0..c84d0d5c 100644 --- a/.fatherrc.ts +++ b/.fatherrc.ts @@ -1,8 +1,33 @@ import { defineConfig } from 'father'; +import { IFatherBundlessConfig } from 'father/dist/types'; + +const less2CssConfig: IFatherBundlessConfig = { + transformer: 'babel', // 使用 babel 编译 + extraBabelPlugins: [ + [ + './scripts/babel-less-to-css.js', // 把文件中的 '.less' 字符转为 '.css' + { test: '\\.less' }, + ], + ], +}; export default defineConfig({ - esm: { output: 'es' }, - cjs: { output: 'lib' }, + esm: { + output: 'es', + ...less2CssConfig, + }, + cjs: { + output: 'lib', + ...less2CssConfig, + alias: { + // lodash-es 不支持 cjs 产物，将打包产物修改为从 lodash 引入 + 'lodash-es': 'lodash', + }, + }, + plugins: [ + // less 编译为 css + './scripts/father-plugin-less.js', + ], // https://github.com/umijs/father/blob/master/docs/config.md#umd umd: { name: 'LarkMap', diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index 0b1bf030..56936935 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -1,21 +1,26 @@ name: lint -on: [push, pull_request] +on: + push: + branches: [master] + pull_request: + branches: + - '**' jobs: lint: runs-on: ubuntu-latest strategy: matrix: - node-version: [16.x] + node-version: [18.x] steps: - - uses: actions/checkout@v2 - - name: Use Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v2 - with: - node-version: ${{ matrix.node-version }} - - run: npm install - - run: npm run ci + - uses: actions/checkout@v2 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v2 + with: + node-version: ${{ matrix.node-version }} + - run: npm install + - run: npm run ci # - name: coverall # if: success() # uses: coverallsapp/github-action@master diff --git a/.github/workflows/preview.yml b/.github/workflows/preview.yml index ca7ad44e..bc355f39 100644 --- a/.github/workflows/preview.yml +++ b/.github/workflows/preview.yml @@ -7,18 +7,18 @@ jobs: runs-on: ubuntu-latest strategy: matrix: - node-version: [16.x] + node-version: [18.x] steps: - - uses: actions/checkout@v2 - - name: Use Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v2 - with: - node-version: ${{ matrix.node-version }} - - uses: afc163/surge-preview@v1 - with: - surge_token: ${{ secrets.SURGE_TOKEN }} - github_token: ${{ secrets.GITHUB_TOKEN }} - dist: docs-dist - build: | - npm install - npm run docs:build + - uses: actions/checkout@v2 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v2 + with: + node-version: ${{ matrix.node-version }} + - uses: afc163/surge-preview@v1 + with: + surge_token: ${{ secrets.SURGE_TOKEN }} + github_token: ${{ secrets.GITHUB_TOKEN }} + dist: docs-dist + build: | + npm install + npm run docs:build diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 62bbab7e..1e532e17 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -1,6 +1,7 @@ name: release on: + workflow_dispatch: release: types: [created, edited] @@ -11,7 +12,7 @@ jobs: - uses: actions/checkout@v2 - uses: actions/setup-node@v2 with: - node-version: 16 + node-version: 18 - run: npm install - run: npm run ci @@ -22,7 +23,7 @@ jobs: - uses: actions/checkout@v2 - uses: actions/setup-node@v2 with: - node-version: 16 + node-version: 18 - run: npm install - run: npm run docs:build - run: | @@ -38,4 +39,3 @@ jobs: directory: docs-dist branch: gh-pages force: true - diff --git a/scripts/babel-less-to-css.js b/scripts/babel-less-to-css.js new file mode 100644 index 00000000..9c993052 --- /dev/null +++ b/scripts/babel-less-to-css.js @@ -0,0 +1,17 @@ +// https://github.com/umijs/father/blob/father-build%401.22.5/packages/father-build/src/getBabelConfig.ts#L25 + +const transformImportLess2Css = () => { + return { + name: 'transform-import-less-to-css', + visitor: { + ImportDeclaration(path) { + const re = /\.less$/; + if (re.test(path.node.source.value)) { + path.node.source.value = path.node.source.value.replace(re, '.css'); + } + }, + }, + }; +}; + +module.exports = transformImportLess2Css; diff --git a/scripts/father-plugin-less.js b/scripts/father-plugin-less.js new file mode 100644 index 00000000..9729358b --- /dev/null +++ b/scripts/father-plugin-less.js @@ -0,0 +1,17 @@ +// https://github.com/hexh250786313/blog/issues/30 +const { addLoader } = require('father/dist/builder/bundless'); + +module.exports = async (api) => { + const loaders = await api.applyPlugins({ + key: 'addPostcssLoader', + initialValue: [ + { + key: 'less-to-css', + test: /\.less$/, + loader: require.resolve('./loader-less-to-css'), // less 文件转 css 文件 + }, + ], + }); + + loaders.forEach((loader) => addLoader(loader)); +}; diff --git a/scripts/loader-less-to-css.js b/scripts/loader-less-to-css.js new file mode 100644 index 00000000..68396b94 --- /dev/null +++ b/scripts/loader-less-to-css.js @@ -0,0 +1,29 @@ +const path = require('path'); +const less = require('less'); +const postcss = require('postcss'); +const syntax = require('postcss-less'); +const autoprefixer = require('autoprefixer'); + +const loader = function (lessContent) { + const cb = this.async(); + this.setOutputOptions({ + ext: '.css', + }); + postcss([autoprefixer({})]) + .process(lessContent, { syntax }) + .then((result) => { + // less 转 css + less.render(result.content, (err, css) => { + if (err) { + console.error(err); + return; + } + cb(null, css.css); + }); + }) + .catch((err) => { + console.error(err); + }); +}; + +module.exports = loader; diff --git a/src/components/LarkMap/helper.ts b/src/components/LarkMap/helper.ts index 5739ac75..58fbf533 100644 --- a/src/components/LarkMap/helper.ts +++ b/src/components/LarkMap/helper.ts @@ -1,5 +1,5 @@ import type { IMapConfig } from '@antv/l7'; -import { GaodeMap, GaodeMapV1, GaodeMapV2, Map } from '@antv/l7'; +import { BaiduMap, GaodeMap, GaodeMapV1, GaodeMapV2, Map, TencentMap } from '@antv/l7'; import type { LarkMapProps } from './types'; export const createMap = async (mapType: LarkMapProps['mapType'], mapOptions: Partial) => { @@ -16,14 +16,11 @@ export const createMap = async (mapType: LarkMapProps['mapType'], mapOptions: Pa } if (mapType === 'Tencent') { - return Promise.resolve(import('@antv/l7')).then(({ TencentMap }) => { - return new TencentMap(mapOptions); - }); + return new TencentMap(mapOptions); } + if (mapType === 'Baidu') { - return Promise.resolve(import('@antv/l7')).then(({ BaiduMap }) => { - return new BaiduMap(mapOptions); - }); + return new BaiduMap(mapOptions); } return Promise.resolve(import('@antv/l7')).then(({ Mapbox }) => { diff --git a/src/components/Marker/index.tsx b/src/components/Marker/index.tsx index 5dee2a25..76e83512 100644 --- a/src/components/Marker/index.tsx +++ b/src/components/Marker/index.tsx @@ -3,7 +3,7 @@ import { useDeepCompareEffect } from 'ahooks'; import React, { memo, useEffect, useMemo, useRef } from 'react'; import { createPortal } from 'react-dom'; import { useScene } from '../LarkMap/hooks'; -import type { MarkerProps } from './types'; +import type { MarkerEventType, MarkerProps } from './types'; export const Marker = memo(function Marker(props): React.ReactPortal { const scene = useScene(); @@ -24,7 +24,7 @@ export const Marker = memo(function Marker(props): React.ReactPorta // @ts-ignore const l7marker = new L7Marker(options); - l7marker.on('click', (e: MouseEvent) => { + l7marker.on('click', (e: MarkerEventType) => { thisRef.current.props.onClick?.(e); });