diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml index 6242e217a01..835dc0f4b0d 100644 --- a/.github/workflows/nodejs.yml +++ b/.github/workflows/nodejs.yml @@ -113,11 +113,6 @@ jobs: run: pnpm test env: CI: true - - name: Upload coverage reports to Codecov - uses: codecov/codecov-action@v3 - env: - CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }} - # 以下 coverage 流程通过 artifact 拆分文件作为单独 job 上传时间损耗过长，因此在在 node test 后直接继续执行 - name: Upload [taro-cli] coverage to Codecov uses: codecov/codecov-action@v4 diff --git a/crates/native_binding/package.json b/crates/native_binding/package.json index fbf098e7821..9e43f42970b 100644 --- a/crates/native_binding/package.json +++ b/crates/native_binding/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/binding", - "version": "4.0.4", + "version": "4.0.5", "description": "Node binding for taro", "main": "binding.js", "typings": "binding.d.ts", diff --git a/examples/mini-program-example/src/pages/index/index.tsx b/examples/mini-program-example/src/pages/index/index.tsx index 135869ac3e7..e19348e697b 100644 --- a/examples/mini-program-example/src/pages/index/index.tsx +++ b/examples/mini-program-example/src/pages/index/index.tsx @@ -49,21 +49,20 @@ export default function Index() { ) diff --git a/examples/mini-program-example/src/util/nativeApi.ts b/examples/mini-program-example/src/util/nativeApi.ts index f9d8ed5af7c..36f7576fa80 100644 --- a/examples/mini-program-example/src/util/nativeApi.ts +++ b/examples/mini-program-example/src/util/nativeApi.ts @@ -1,13 +1,14 @@ // @ts-ignore -const decorator = window.MethodChannel && window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true }) || (target => target) +const sync = window.MethodChannel && window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true }) || (target => target) // @proxyClassSign('') class NativeApi { - // @ts-ignore - @decorator - harmonyNavigateTo(options: any) { - return options - } + @sync + navigateToTaroHybrid(_options: any) {} + + + @sync + navigateToNative(_options: any){} } const nativeApi = new NativeApi() diff --git a/npm/darwin-arm64/package.json b/npm/darwin-arm64/package.json index e873267f6a0..bb2f619226b 100644 --- a/npm/darwin-arm64/package.json +++ b/npm/darwin-arm64/package.json @@ -1,7 +1,7 @@ { "name": "@tarojs/binding-darwin-arm64", "description": "Native binding for taro", - "version": "4.0.4", + "version": "4.0.5", "os": [ "darwin" ], diff --git a/npm/darwin-x64/package.json b/npm/darwin-x64/package.json index b01032048c4..d530b07467d 100644 --- a/npm/darwin-x64/package.json +++ b/npm/darwin-x64/package.json @@ -1,7 +1,7 @@ { "name": "@tarojs/binding-darwin-x64", "description": "Native binding for taro", - "version": "4.0.4", + "version": "4.0.5", "os": [ "darwin" ], diff --git a/npm/linux-x64-gnu/package.json b/npm/linux-x64-gnu/package.json index 029597af918..8138b9a626e 100644 --- a/npm/linux-x64-gnu/package.json +++ b/npm/linux-x64-gnu/package.json @@ -1,7 +1,7 @@ { "name": "@tarojs/binding-linux-x64-gnu", "description": "Native binding for taro", - "version": "4.0.4", + "version": "4.0.5", "os": [ "linux" ], diff --git a/npm/linux-x64-musl/package.json b/npm/linux-x64-musl/package.json index ccdbb8514c2..513a39b1ffa 100644 --- a/npm/linux-x64-musl/package.json +++ b/npm/linux-x64-musl/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/binding-linux-x64-musl", - "version": "4.0.4", + "version": "4.0.5", "os": [ "linux" ], diff --git a/npm/win32-x64-msvc/package.json b/npm/win32-x64-msvc/package.json index 9e40748a144..38233bd308e 100644 --- a/npm/win32-x64-msvc/package.json +++ b/npm/win32-x64-msvc/package.json @@ -1,7 +1,7 @@ { "name": "@tarojs/binding-win32-x64-msvc", "description": "Native binding for taro", - "version": "4.0.4", + "version": "4.0.5", "os": [ "win32" ], diff --git a/package.json b/package.json index c5ecc9c5b7c..af46677b6e0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "taro", - "version": "4.0.4", + "version": "4.0.5", "description": "开放式跨端跨框架开发解决方案", "homepage": "https://github.com/NervJS/taro#readme", "author": "O2Team", @@ -29,7 +29,7 @@ "lint:style": "stylelint ./packages/**/*.{css,scss}", "format": "prettier --write --cache .", "format:check": "prettier --check --cache .", - "test": "pnpm --if-present -r --aggregate-output --filter=./packages/* test:ci", + "test": "pnpm --if-present -r --aggregate-output --filter=./packages/* --filter=./tests test:ci", "test:binding": "pnpm --filter @tarojs/binding run test", "updateSnapshot": "pnpm --if-present -r --aggregate-output --filter=./tests --filter=./packages/* updateSnapshot", "version": "run-s version:*", diff --git a/packages/babel-plugin-transform-react-jsx-to-rn-stylesheet/package.json b/packages/babel-plugin-transform-react-jsx-to-rn-stylesheet/package.json index 3285f2f2ab1..52822a4286e 100644 --- a/packages/babel-plugin-transform-react-jsx-to-rn-stylesheet/package.json +++ b/packages/babel-plugin-transform-react-jsx-to-rn-stylesheet/package.json @@ -1,6 +1,6 @@ { "name": "babel-plugin-transform-react-jsx-to-rn-stylesheet", - "version": "4.0.4", + "version": "4.0.5", "description": "Transform stylesheet selector to style in JSX Elements.", "author": "O2Team", "license": "MIT", diff --git a/packages/babel-plugin-transform-solid-jsx/package.json b/packages/babel-plugin-transform-solid-jsx/package.json index c812d706f3a..27622998802 100644 --- a/packages/babel-plugin-transform-solid-jsx/package.json +++ b/packages/babel-plugin-transform-solid-jsx/package.json @@ -1,7 +1,7 @@ { "name": "babel-plugin-transform-solid-jsx", "description": "A JSX to DOM plugin that wraps expressions for fine grained change detection", - "version": "4.0.4", + "version": "4.0.5", "license": "MIT", "repository": { "type": "git", diff --git a/packages/babel-plugin-transform-taroapi/package.json b/packages/babel-plugin-transform-taroapi/package.json index 9a0b05c8989..a3f8f4f58fc 100644 --- a/packages/babel-plugin-transform-taroapi/package.json +++ b/packages/babel-plugin-transform-taroapi/package.json @@ -1,6 +1,6 @@ { "name": "babel-plugin-transform-taroapi", - "version": "4.0.4", + "version": "4.0.5", "author": "O2Team", "license": "MIT", "main": "dist/index.js", diff --git a/packages/babel-preset-taro/package.json b/packages/babel-preset-taro/package.json index 8f5972dee07..84e3b42bec7 100644 --- a/packages/babel-preset-taro/package.json +++ b/packages/babel-preset-taro/package.json @@ -1,6 +1,6 @@ { "name": "babel-preset-taro", - "version": "4.0.4", + "version": "4.0.5", "description": "Taro babel preset", "author": "O2Team", "license": "MIT", diff --git a/packages/create-app/package.json b/packages/create-app/package.json index 8919b7b31a8..af8c0778cb9 100644 --- a/packages/create-app/package.json +++ b/packages/create-app/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/create-app", - "version": "4.0.4", + "version": "4.0.5", "description": "create taro app with one command", "author": "O2Team", "license": "MIT", diff --git a/packages/css-to-react-native/package.json b/packages/css-to-react-native/package.json index 360035e1f55..5ee2c790797 100644 --- a/packages/css-to-react-native/package.json +++ b/packages/css-to-react-native/package.json @@ -1,7 +1,7 @@ { "name": "taro-css-to-react-native", "description": "Convert CSS text to a React Native stylesheet object", - "version": "4.0.4", + "version": "4.0.5", "author": "O2Team", "license": "MIT", "main": "dist/index.js", diff --git a/packages/eslint-config-taro/package.json b/packages/eslint-config-taro/package.json index cc2abd7de9f..26f8999d847 100644 --- a/packages/eslint-config-taro/package.json +++ b/packages/eslint-config-taro/package.json @@ -1,6 +1,6 @@ { "name": "eslint-config-taro", - "version": "4.0.4", + "version": "4.0.5", "description": "Taro specific linting rules for ESLint", "author": "O2Team", "license": "MIT", diff --git a/packages/jest-helper/package.json b/packages/jest-helper/package.json index c4e3e8257eb..3cd22caf21d 100644 --- a/packages/jest-helper/package.json +++ b/packages/jest-helper/package.json @@ -1,6 +1,6 @@ { "name": "jest-taro-helper", - "version": "4.0.4", + "version": "4.0.5", "description": "jest helper for taro", "private": true, "author": "O2Team", diff --git a/packages/postcss-html-transform/package.json b/packages/postcss-html-transform/package.json index 20b0e98f1a9..290b61d3eb7 100644 --- a/packages/postcss-html-transform/package.json +++ b/packages/postcss-html-transform/package.json @@ -1,6 +1,6 @@ { "name": "postcss-html-transform", - "version": "4.0.4", + "version": "4.0.5", "description": "transform html tag name selector", "author": "O2Team", "license": "MIT", diff --git a/packages/postcss-plugin-constparse/package.json b/packages/postcss-plugin-constparse/package.json index 36c602aa1e5..2f623b612b9 100644 --- a/packages/postcss-plugin-constparse/package.json +++ b/packages/postcss-plugin-constparse/package.json @@ -1,6 +1,6 @@ { "name": "postcss-plugin-constparse", - "version": "4.0.4", + "version": "4.0.5", "description": "parse constants defined in config", "author": "O2Team", "license": "MIT", diff --git a/packages/postcss-pxtransform/package.json b/packages/postcss-pxtransform/package.json index d68f16ae992..21ff9b201b3 100644 --- a/packages/postcss-pxtransform/package.json +++ b/packages/postcss-pxtransform/package.json @@ -1,6 +1,6 @@ { "name": "postcss-pxtransform", - "version": "4.0.4", + "version": "4.0.5", "description": "PostCSS plugin px 转小程序 rpx及h5 rem 单位", "author": "O2Team", "license": "MIT", diff --git a/packages/postcss-unit-transform/package.json b/packages/postcss-unit-transform/package.json index 07ab8bb1236..42364ac249c 100644 --- a/packages/postcss-unit-transform/package.json +++ b/packages/postcss-unit-transform/package.json @@ -1,6 +1,6 @@ { "name": "postcss-taro-unit-transform", - "version": "4.0.4", + "version": "4.0.5", "description": "小程序单位转换", "author": "O2Team", "license": "MIT", diff --git a/packages/rollup-plugin-copy/package.json b/packages/rollup-plugin-copy/package.json index e6cd44cfdd9..4801db207b7 100644 --- a/packages/rollup-plugin-copy/package.json +++ b/packages/rollup-plugin-copy/package.json @@ -1,6 +1,6 @@ { "name": "rollup-plugin-copy", - "version": "4.0.4", + "version": "4.0.5", "description": "rollup-plugin-copy for taro", "private": true, "author": "O2Team", diff --git a/packages/shared/package.json b/packages/shared/package.json index bda29860dd8..72f5a4ebd92 100644 --- a/packages/shared/package.json +++ b/packages/shared/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/shared", - "version": "4.0.4", + "version": "4.0.5", "description": "Taro utils internal use.", "author": "O2Team", "license": "MIT", diff --git a/packages/stylelint-config-taro-rn/package.json b/packages/stylelint-config-taro-rn/package.json index 663c6b8450a..770eee3a50a 100644 --- a/packages/stylelint-config-taro-rn/package.json +++ b/packages/stylelint-config-taro-rn/package.json @@ -1,6 +1,6 @@ { "name": "stylelint-config-taro-rn", - "version": "4.0.4", + "version": "4.0.5", "description": "Shareable stylelint config for React Native CSS modules", "author": "O2Team", "license": "MIT", diff --git a/packages/stylelint-taro-rn/package.json b/packages/stylelint-taro-rn/package.json index 7925942a9ba..de56662ca23 100644 --- a/packages/stylelint-taro-rn/package.json +++ b/packages/stylelint-taro-rn/package.json @@ -1,6 +1,6 @@ { "name": "stylelint-taro-rn", - "version": "4.0.4", + "version": "4.0.5", "description": "A collection of React Native specific rules for stylelint", "author": "O2Team", "license": "MIT", diff --git a/packages/stylelint-taro/package.json b/packages/stylelint-taro/package.json index f949644d1b5..8cb0e58521c 100644 --- a/packages/stylelint-taro/package.json +++ b/packages/stylelint-taro/package.json @@ -1,6 +1,6 @@ { "name": "stylelint-taro", - "version": "4.0.4", + "version": "4.0.5", "description": "Taro stylelint 规则集合", "author": "O2Team", "license": "MIT", diff --git a/packages/taro-api/package.json b/packages/taro-api/package.json index aaf6ad225c5..ce4609f0dd6 100644 --- a/packages/taro-api/package.json +++ b/packages/taro-api/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/api", - "version": "4.0.4", + "version": "4.0.5", "description": "Taro common API", "author": "O2Team", "license": "MIT", diff --git a/packages/taro-cli-convertor/package.json b/packages/taro-cli-convertor/package.json index b3c15b9b446..bb4c6631a04 100644 --- a/packages/taro-cli-convertor/package.json +++ b/packages/taro-cli-convertor/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/cli-convertor", - "version": "4.0.4", + "version": "4.0.5", "description": "cli tool for taro-convert", "author": "O2Team", "license": "MIT", diff --git a/packages/taro-cli/package.json b/packages/taro-cli/package.json index 3d40bdf6533..e0e19b15ece 100644 --- a/packages/taro-cli/package.json +++ b/packages/taro-cli/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/cli", - "version": "4.0.4", + "version": "4.0.5", "description": "cli tool for taro", "author": "O2Team", "license": "MIT", diff --git a/packages/taro-cli/templates/default/_gitignore b/packages/taro-cli/templates/default/_gitignore index 331e8f6f4da..bc6455742b0 100644 --- a/packages/taro-cli/templates/default/_gitignore +++ b/packages/taro-cli/templates/default/_gitignore @@ -4,4 +4,5 @@ deploy_versions/ .rn_temp/ node_modules/ .DS_Store -.swc \ No newline at end of file +.swc +*.local diff --git a/packages/taro-cli/templates/default/template_creator.js b/packages/taro-cli/templates/default/template_creator.js index 05cb76be44f..8655df42bdb 100644 --- a/packages/taro-cli/templates/default/template_creator.js +++ b/packages/taro-cli/templates/default/template_creator.js @@ -17,6 +17,9 @@ const handler = { '/types/vue.d.ts' (err, { framework, typescript }) { return ['Vue3'].includes(framework) && !!typescript }, + '/types/solid.d.ts' (err, { framework, typescript }) { + return ['Solid'].includes(framework) && !!typescript + }, '/src/pages/index/index.jsx' (err, { pageDir = '', pageName = '', subPkg = '' }) { return { setPageName: normalizePath(path.join(PAGES_ENTRY, pageDir, pageName, 'index.jsx')), diff --git a/packages/taro-cli/templates/default/tsconfig.json b/packages/taro-cli/templates/default/tsconfig.json index 4e7bf42205a..c60781f7588 100644 --- a/packages/taro-cli/templates/default/tsconfig.json +++ b/packages/taro-cli/templates/default/tsconfig.json @@ -14,9 +14,10 @@ "strictNullChecks": true, "sourceMap": true, "rootDir": ".", - "jsx": "{{#if (includes "Vue3" s=framework)}}preserve{{else}}react-jsx{{/if}}",{{#if (eq framework "Preact") }} + "jsx": "{{#if (includes "Vue3" s=framework)}}preserve{{else if (eq framework 'Solid')}}preserve{{else}}react-jsx{{/if}}",{{#if (eq framework "Preact") }} "skipLibCheck": true,{{/if}} - "allowJs": true, + "allowJs": true,{{#if (eq framework "Solid")}} + "jsxImportSource": "solid-js",{{/if}} "resolveJsonModule": true, "typeRoots": [ "node_modules/@types" diff --git a/packages/taro-cli/templates/default/types/global.d.ts b/packages/taro-cli/templates/default/types/global.d.ts index 898f75812e3..57a1021c06c 100644 --- a/packages/taro-cli/templates/default/types/global.d.ts +++ b/packages/taro-cli/templates/default/types/global.d.ts @@ -29,4 +29,7 @@ declare namespace NodeJS { {{#if (includes "Vue3" s=framework)}} declare module '@tarojs/components' { export * from '@tarojs/components/types/index.vue3' +}{{else if (includes "Solid" s=framework)}} +declare module '@tarojs/components' { + export * from '@tarojs/components/types/index.solid' }{{/if}} diff --git a/packages/taro-cli/templates/default/types/solid.d.ts b/packages/taro-cli/templates/default/types/solid.d.ts new file mode 100644 index 00000000000..0bfc80fcd5b --- /dev/null +++ b/packages/taro-cli/templates/default/types/solid.d.ts @@ -0,0 +1,12 @@ +export { } + +declare module 'solid-js' { + namespace JSX { + interface Directives { + /** Note:如果需要定义自定义指令的类型，可以在这里做 + * 参考官网文档https://docs.solidjs.com/reference/jsx-attributes/use + * model: [() => any, (v: any) => any] + */ + } + } +} diff --git a/packages/taro-components-advanced/package.json b/packages/taro-components-advanced/package.json index 0d2cc02f975..c5cde19c2f4 100644 --- a/packages/taro-components-advanced/package.json +++ b/packages/taro-components-advanced/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/components-advanced", - "version": "4.0.4", + "version": "4.0.5", "description": "", "author": "O2Team", "license": "MIT", diff --git a/packages/taro-components-library-react/package.json b/packages/taro-components-library-react/package.json index fdfea4b90d5..6c606426f41 100644 --- a/packages/taro-components-library-react/package.json +++ b/packages/taro-components-library-react/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/components-library-react", - "version": "4.0.4", + "version": "4.0.5", "description": "Taro 组件库 React 版本库", "private": true, "author": "O2Team", diff --git a/packages/taro-components-library-solid/package.json b/packages/taro-components-library-solid/package.json index 5f60776872d..b35cfa740ad 100644 --- a/packages/taro-components-library-solid/package.json +++ b/packages/taro-components-library-solid/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/components-library-solid", - "version": "4.0.4", + "version": "4.0.5", "description": "Taro 组件库 Solid 版本库", "private": true, "main": "index.js", diff --git a/packages/taro-components-library-vue3/package.json b/packages/taro-components-library-vue3/package.json index 942fe565b1c..71c114e57f1 100644 --- a/packages/taro-components-library-vue3/package.json +++ b/packages/taro-components-library-vue3/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/components-library-vue3", - "version": "4.0.4", + "version": "4.0.5", "description": "Taro 组件库 Vue3 版本库", "private": true, "author": "O2Team", diff --git a/packages/taro-components-react/package.json b/packages/taro-components-react/package.json index fe97fde2ca8..a4db2c267eb 100644 --- a/packages/taro-components-react/package.json +++ b/packages/taro-components-react/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/components-react", - "version": "4.0.4", + "version": "4.0.5", "description": "", "main:h5": "dist/index.js", "main": "dist/index.js", @@ -37,7 +37,7 @@ "@tarojs/components": "workspace:*", "@babel/runtime": "^7.24.4", "classnames": "^2.2.5", - "swiper": "6.8.0", + "swiper": "11.1.0", "tslib": "^2.6.2" }, "devDependencies": { diff --git a/packages/taro-components-react/rollup.config.mjs b/packages/taro-components-react/rollup.config.mjs index e710e173f91..28f441c370d 100644 --- a/packages/taro-components-react/rollup.config.mjs +++ b/packages/taro-components-react/rollup.config.mjs @@ -42,7 +42,6 @@ function getAliasPlugin (framework) { } const base = { - input: 'src/index.ts', treeshake: false, output: { chunkFileNames: '[name].js', @@ -51,7 +50,7 @@ const base = { format: 'es', preserveModules: true, preserveModulesRoot: 'src', - sourcemap: true + sourcemap: true, } } @@ -62,6 +61,9 @@ const babelConfig = { const react = () => { const config = recursiveMerge({}, base, { + input: { + index: 'src/index.react.ts' + }, plugins: getPlugins( [ getAliasPlugin('react'), @@ -89,6 +91,9 @@ const react = () => { const solid = () => { const config = recursiveMerge({}, base, { + input: { + index: 'src/index.solid.ts' + }, output: { dir: 'dist/solid', }, diff --git a/packages/taro-components-react/src/components/button/style/index.scss b/packages/taro-components-react/src/components/button/style/index.scss index fdb07fc412e..277c3b7fc47 100644 --- a/packages/taro-components-react/src/components/button/style/index.scss +++ b/packages/taro-components-react/src/components/button/style/index.scss @@ -119,9 +119,9 @@ $weuiBtnPlainWarnActiveBorderColor: rgba(230 67 64 / 60%); font-size: $weuiBtnMiniFontSize; } - &[plain], - &[plain][type="default"], - &[plain][type="primary"] { + &[plain="true"], + &[plain="true"][type="default"], + &[plain="true"][type="primary"] { border-width: 1px; background-color: transparent; } @@ -162,7 +162,7 @@ $weuiBtnPlainWarnActiveBorderColor: rgba(230 67 64 / 60%); } } - &[plain][type="primary"] { + &[plain="true"][type="primary"] { border: 1px solid $weuiBtnPlainPrimaryBorderColor; color: $weuiBtnPlainPrimaryColor; @@ -177,7 +177,7 @@ $weuiBtnPlainWarnActiveBorderColor: rgba(230 67 64 / 60%); } } - &[plain][type="warn"] { + &[plain="true"][type="warn"] { border: 1px solid $weuiBtnPlainWarnBorderColor; color: $weuiBtnPlainWarnColor; @@ -192,8 +192,8 @@ $weuiBtnPlainWarnActiveBorderColor: rgba(230 67 64 / 60%); } } - &[plain], - &[plain][type="default"] { + &[plain="true"], + &[plain="true"][type="default"] { border: 1px solid $weuiBtnPlainDefaultBorderColor; color: $weuiBtnPlainDefaultColor; @@ -236,13 +236,13 @@ $weuiBtnPlainWarnActiveBorderColor: rgba(230 67 64 / 60%); } } - &[plain][disabled] { + &[plain="true"][disabled] { border: 1px solid rgb(0 0 0 / 20%); background-color: #f7f7f7; color: rgb(0 0 0 / 30%); } - &[plain][disabled][type="primary"] { + &[plain="true"][disabled][type="primary"] { border: 1px solid rgb(0 0 0 / 20%); background-color: #f7f7f7; color: rgb(0 0 0 / 30%); diff --git a/packages/taro-components-react/src/components/image/style/index.css b/packages/taro-components-react/src/components/image/style/index.css index 71ead6395b1..e72ab99f0cb 100644 --- a/packages/taro-components-react/src/components/image/style/index.css +++ b/packages/taro-components-react/src/components/image/style/index.css @@ -16,7 +16,6 @@ img[src=""] { } .taro-img__mode-scaletofill { - object-fit: contain; width: 100%; height: 100%; } diff --git a/packages/taro-components-react/src/components/swiper/index.tsx b/packages/taro-components-react/src/components/swiper/index.tsx index f0484f3f727..48eed57f7b7 100644 --- a/packages/taro-components-react/src/components/swiper/index.tsx +++ b/packages/taro-components-react/src/components/swiper/index.tsx @@ -1,15 +1,17 @@ -import 'swiper/swiper-bundle.min.css' +import 'swiper/swiper-bundle.css' import './style/index.css' import classNames from 'classnames' import React from 'react' -import Swipers from 'swiper/swiper-bundle.esm.js' +import Swipers from 'swiper/bundle' import { createForwardRefComponent, debounce } from '../../utils' import type ISwiper from 'swiper' let INSTANCE_ID = 0 +const ONE_ADDITIONAL_SLIDES_THRESHOLD = 5 +const TWO_ADDITIONAL_SLIDES_THRESHOLD = 7 interface SwiperItemProps extends React.HTMLAttributes { itemId: string @@ -30,8 +32,11 @@ interface SwiperProps extends React.HTMLAttributes { indicatorColor?: string indicatorActiveColor?: string indicatorDots?: boolean + currentItemId?: string forwardedRef?: React.MutableRefObject + full?: boolean onAnimationFinish?: (e: TouchEvent) => void + effectsProps?: Record } const createEvent = (type: string) => { @@ -67,18 +72,77 @@ class SwiperItemInner extends React.Component> { +interface SwiperState { + swiperWrapper: HTMLElement | null +} + +class SwiperInner extends React.Component { _id = 1 + INSTANCE_ID++ - _$current = 0 - _$width = 0 - _$height = 0 + #source = 'autoplay' + #swiperResetting: boolean = false + #lastSwiperActiveIndex: number = 0 + // dom 变化是否由外部引起，因为 swiper 的循环模式也会引起 dom 的变化。如果不是由外部引起的 dom 变化，就不需要重新初始化 swiper + #domChangeByOutSide: boolean = false $el: HTMLDivElement | null - mySwiper: ISwiper + swiper: ISwiper| null observer: MutationObserver - observerFirst: MutationObserver - observerLast: MutationObserver + + constructor(props) { + super(props) + this.state = { + swiperWrapper: null + } + } componentDidMount () { + this.handleInit() + } + + hackSwiperWrapDomAction () { + if (!this.state.swiperWrapper || !this.swiper) return + const appendChild = this.state.swiperWrapper.appendChild.bind(this.state.swiperWrapper) + const removeChild = this.state.swiperWrapper.removeChild.bind(this.state.swiperWrapper) + const replaceChild = this.state.swiperWrapper.replaceChild.bind(this.state.swiperWrapper) + const insertBefore = this.state.swiperWrapper.insertBefore.bind(this.state.swiperWrapper) + + const beforeAction = () => { + if (!this.state.swiperWrapper || !this.swiper) return + this.#swiperResetting = true + if (!this.#domChangeByOutSide && this.props.circular) { + // 如果是由于外部子节点的变化引起的 dom 变化，需要重新初始化 swiper。 + // 在初dom操作之前，需要调用 loopDestroy，把子节点的顺序恢复 + this.#domChangeByOutSide = true + this.swiper.loopDestroy() + this.swiper.params.loop = false + } + } + + // eslint-disable-next-line react/no-direct-mutation-state + this.state.swiperWrapper.appendChild = (...args) => { + beforeAction() + return appendChild(...args) + } + + // eslint-disable-next-line react/no-direct-mutation-state + this.state.swiperWrapper.removeChild = (...args) => { + beforeAction() + return removeChild(...args) + } + + // eslint-disable-next-line react/no-direct-mutation-state + this.state.swiperWrapper.replaceChild = (...args) => { + beforeAction() + return replaceChild(...args) + } + + // eslint-disable-next-line react/no-direct-mutation-state + this.state.swiperWrapper.insertBefore = (...args) => { + beforeAction() + return insertBefore(...args) + } + } + + handleInit = (reset = false) => { const { autoplay = false, circular = true, @@ -86,10 +150,30 @@ class SwiperInner extends React.Component> displayMultipleItems = 1, duration = 500, interval = 5000, - spaceBetween, + currentItemId, + effectsProps = {}, vertical } = this.props + let initialSlide = parseInt(String(current), 10) + if (reset) { + initialSlide = this.#lastSwiperActiveIndex + } else { + if (currentItemId) { + let itemIdIndex = 0 + this.getSlidersList().forEach((swiperItem, index) => { + // @ts-ignore + if (swiperItem.itemId && swiperItem.itemId === currentItemId) { + itemIdIndex = index + } + }) + initialSlide = itemIdIndex + } + } + + const loopAdditionalSlides = this.getLoopAdditionalSlides() + const centeredSlides = parseFloat(String(displayMultipleItems)) === 1 + const slidesPerView = parseFloat(String(displayMultipleItems)) === 1 ? 'auto' : displayMultipleItems // eslint-disable-next-line @typescript-eslint/no-this-alias const that = this const opt: Record = { @@ -97,54 +181,70 @@ class SwiperInner extends React.Component> pagination: { el: `.taro-swiper-${this._id} > .swiper-container > .swiper-pagination` }, direction: vertical ? 'vertical' : 'horizontal', loop: circular, - slidesPerView: parseFloat(String(displayMultipleItems)), - initialSlide: parseInt(String(current), 10), + slidesPerView: slidesPerView, + initialSlide, speed: parseInt(String(duration), 10), observer: true, observeParents: true, + loopAdditionalSlides, + centeredSlides, + ...effectsProps, on: { - slideChange () { + init (_swiper) { + that.getNeedFixLoop() && _swiper.loopFix() + that.props.autoplay && _swiper.autoplay.start() + }, + transitionEnd (_swiper) { + if (that.#swiperResetting || that.#lastSwiperActiveIndex === _swiper.realIndex) return + that.#lastSwiperActiveIndex = _swiper.realIndex + that.getNeedFixLoop() && _swiper.loopFix() + that.props.autoplay && _swiper.autoplay.start() const e = createEvent('touchend') try { + const currentId = that.getCurrentId(_swiper) Object.defineProperty(e, 'detail', { enumerable: true, value: { - current: this.realIndex + source: that.#source, + current: this.realIndex, + currentId: currentId } }) } catch (err) {} // eslint-disable-line no-empty - that._$current = this.realIndex - that.handleOnChange(e) + that.handleOnAnimationFinish(e) + that.#source = 'autoplay' + }, + touchMove () { + that.#source = 'touch' }, - transitionEnd () { + touchEnd: (_swiper) => { + that.#source = 'touch' + that.props.autoplay && _swiper.autoplay.start() + }, + touchStart: (_swiper) => { + that.#source = 'touch' + that.props.autoplay && _swiper.autoplay.pause() + }, + slideChange (_swiper) { + if (that.#swiperResetting || that.#lastSwiperActiveIndex === _swiper.realIndex) return const e = createEvent('touchend') try { + const currentId = that.getCurrentId(_swiper) Object.defineProperty(e, 'detail', { enumerable: true, value: { - current: this.mySwiper.realIndex + current: this.realIndex, + source: that.#source, + currentId, } }) - if (this.mySwiper.isBeginning) { - this.mySwiper.slideToLoop((this.props.children as any).length - 1, 0) - } else if (this.mySwiper.isEnd) { - this.mySwiper.slideToLoop(0, 0) - } } catch (err) {} // eslint-disable-line no-empty - that.handleOnAnimationFinish(e) + that.handleOnChange(e) }, - observerUpdate (_swiper: ISwiper, e) { - const target = e.target - const className = target && typeof target.className === 'string' ? target.className : '' - if (className.includes('taro_page') && target.style.display !== 'none') { - if (that.props.autoplay && target.contains(_swiper.$el[0])) { - if (that.props.circular) { - _swiper.slideToLoop(this.realIndex, 0) // 更新下标 - } else { - _swiper.slideTo(this.realIndex) - } - } - } + autoplay (_swiper) { + // Note: 修复 autoplay 时，切换到其他页面再切回来，autoplay 会停止的问题 + _swiper.animating = false + that.#source = 'autoplay' } } } @@ -157,79 +257,128 @@ class SwiperInner extends React.Component> } } - // 两端距离 - if (spaceBetween) { - opt.spaceBetween = spaceBetween + this.swiper = new Swipers(this.$el!, opt) + + // Note: 这里是拦截了 swiper 的 minTranslate 和 maxTranslate 方法，手动修复了 loop 模式下的 margin 问题 + // 因为这两个属性会影响滑动到哪个位置进行 fixloop + // 可参考源码：https://github.com/nolimits4web/swiper/blob/v11.1.0/src/core/events/onTouchMove.mjs + // https://github.com/nolimits4web/swiper/blob/v11.1.0/src/core/loop/loopFix.mjs + if (this.getNeedFixLoop()) { + // @ts-ignore + const minTranslate = this.swiper.minTranslate.bind(this.swiper) + // @ts-ignore + const maxTranslate = this.swiper.maxTranslate.bind(this.swiper) + if (centeredSlides && this.getSlidersList().length < 4) { + // @ts-ignore + this.swiper.minTranslate = () => minTranslate() + this.parseMargin()[1] + // @ts-ignore + this.swiper.maxTranslate = () => maxTranslate() - this.parseMargin()[0] + } else { + // @ts-ignore + this.swiper.minTranslate = () => minTranslate() - this.parseMargin()[0] + // @ts-ignore + this.swiper.maxTranslate = () => maxTranslate() + this.parseMargin()[1] + } } - this.mySwiper = new Swipers(this.$el!, opt) - setTimeout(() => { - this.mySwiper.update() - }, 500) + this.setState({ + swiperWrapper: this.swiper.wrapperEl + }) + } - if (!this.mySwiper || !this.props.circular) return + componentDidUpdate (prevProps, pervState) { + if (!this.swiper || !this.state.swiperWrapper) return + if (pervState.swiperWrapper !== this.state.swiperWrapper && this.state.swiperWrapper) { + this.observer && this.observer.disconnect() + this.observer = new MutationObserver(this.handleSwiperSizeDebounce) + this.observer.observe(this.state.swiperWrapper as Node, { + childList: true + }) + this.hackSwiperWrapDomAction() + } - const wrapper = this.mySwiper.$wrapperEl[0] - this.observer = new MutationObserver(this.handleSwiperLoopListen) + if (prevProps.circular !== this.props.circular || prevProps.displayMultipleItems !== this.props.displayMultipleItems) { + this.reset() + } - this.observer.observe(wrapper, { - childList: true - }) - } + if (prevProps.interval !== this.props.interval) { + if (typeof this.swiper.params.autoplay === 'object') { + this.swiper.params.autoplay.delay = this.props.interval + } + } - UNSAFE_componentWillReceiveProps (nextProps) { - if (this.mySwiper) { - const nextCurrent = typeof nextProps.current === 'number' ? nextProps.current : this._$current || 0 + if (prevProps.duration !== this.props.duration) { + this.swiper.params.speed = this.props.duration + } - this.handleSwiperLoop() - // 是否衔接滚动模式 - if (nextProps.circular) { - if (!this.mySwiper.isBeginning && !this.mySwiper.isEnd) { - this.mySwiper.slideToLoop(parseInt(nextCurrent, 10)) // 更新下标 - } + if (prevProps.current !== this.props.current && !this.props.currentItemId) { + const n = parseInt(String(this.props.current), 10) + if (isNaN(n) || n === this.swiper.realIndex) return + this.#source = '' + if (this.props.circular) { + this.swiper.slideToLoop(n) // 更新下标 + this.props.autoplay && this.swiper.autoplay.pause() + // @ts-ignore + this.swiper.loopFix() + this.props.autoplay && this.swiper.autoplay.start() } else { - this.mySwiper.slideTo(parseInt(nextCurrent, 10) + 1) // 更新下标 + this.swiper.slideTo(n) // 更新下标 } + } + + if (prevProps.autoplay !== this.props.autoplay) { + const swiperAutoplay = this.swiper.autoplay + if (swiperAutoplay) { + if (swiperAutoplay.running === this.props.autoplay) return - const autoplay = this.mySwiper.autoplay - // 判断是否需要停止或开始自动轮播 - if (autoplay.running !== nextProps.autoplay) { - if (nextProps.autoplay) { - if (typeof this.mySwiper.params.autoplay === 'object') { - this.mySwiper.params.autoplay.disableOnInteraction = false - this.mySwiper.params.autoplay.delay = parseInt(String(this.props.interval) || '3000', 10) + if (this.props.autoplay) { + if (this.swiper.params && typeof this.swiper.params.autoplay === 'object') { + if (this.swiper.params.autoplay.disableOnInteraction === true) { + this.swiper.params.autoplay.disableOnInteraction = false + } + this.swiper.params.autoplay.delay = this.props.interval } - autoplay.start() + swiperAutoplay.start() } else { - autoplay.stop() + swiperAutoplay.stop() } } - - this.mySwiper.update() // 更新子元素 } - } - componentDidUpdate (preProps) { - if (preProps.children.length === 0 && (this.props.children as any).length > 0) { - (this.mySwiper as any).loopDestroy() - ;(this.mySwiper as any).loopCreate() - } - if (!this.mySwiper) return - if (this.props.autoplay) { - if (this._$width !== this.mySwiper.width || this._$height !== this.mySwiper.height) { - this.mySwiper.autoplay.start() + if (prevProps.currentItemId !== this.props.currentItemId) { + let itemIdIndex = 0 + this.getSlidersList().forEach((swiperItem, index) => { + const itemId = swiperItem.getAttribute('item-id') + // @ts-ignore + if (itemId === this.props.currentItemId) { + if (this.props.circular) { + itemIdIndex = Number(swiperItem.getAttribute('data-swiper-slide-index')) + } else { + itemIdIndex = index + } + } + }) + if (isNaN(itemIdIndex) || itemIdIndex === this.swiper.realIndex) return + this.#source = '' + if (this.props.circular) { + this.swiper.slideToLoop(itemIdIndex) // 更新下标 + this.props.autoplay && this.swiper.autoplay.pause() + // @ts-ignore + this.swiper.loopFix() + this.props.autoplay && this.swiper.autoplay.start() + } else { + this.swiper.slideTo(itemIdIndex) // 更新下标 } } - this._$width = this.mySwiper.width - this._$height = this.mySwiper.height } componentWillUnmount () { this.$el = null - if (this.mySwiper) this.mySwiper.destroy() + this.swiper?.destroy?.() this.observer?.disconnect?.() - this.observerFirst?.disconnect?.() - this.observerLast?.disconnect?.() + this.setState({ + swiperWrapper: null + }) } handleOnChange (e: React.FormEvent) { @@ -242,65 +391,94 @@ class SwiperInner extends React.Component> typeof func === 'function' && func(e) } - parsePX (s = '0px') { - return parseFloat(s.replace(/r*px/i, '')) + handleSwiperSizeDebounce = debounce(() => { + if (!this.swiper) return + if (this.props.circular) { + if (this.#domChangeByOutSide) { + this.reset() + this.#domChangeByOutSide = false + } + } else { + this.swiper.update() + this.#swiperResetting = false + } + }, 50) + + + reset = () => { + if (!this.swiper) return + this.#swiperResetting = true + this.#lastSwiperActiveIndex = this.swiper.realIndex + this.swiper.destroy() + this.handleInit(true) + this.#swiperResetting = false + } + + // 以下为方法函数 + getSlidersList = () => this.$el?.querySelectorAll?.('.swiper-slide') || [] + + // 获取是否需要手动修复 loop 的条件 + getNeedFixLoop = () => { + const margins = this.parseMargin() + const hasMargin = margins.filter(Boolean).length > 0 + return this.props.circular && hasMargin } - handleSwiperLoopListen = () => { - this.observerFirst?.disconnect?.() - this.observerLast?.disconnect?.() - this.observerFirst = new MutationObserver(this.handleSwiperLoop) - this.observerLast = new MutationObserver(this.handleSwiperLoop) - const wrapper = this.mySwiper.$wrapperEl[0] - const list = wrapper.querySelectorAll('taro-swiper-item-core:not(.swiper-slide-duplicate)') - if (list.length >= 1) { - this.observerFirst.observe(list[0], { - characterData: true - }) - } else if (list.length >= 2) { - this.observerLast.observe(list[list.length - 1], { - characterData: true - }) - } + // Note: loop 的时候添加 additionalSlides 可以避免循环的时候由于 loopFix 不及时，出现空白的问题。但是并不是 additionalSlides 越多越好，因为 additionalSlides 越多，如果 swiper-item 的数量不够，会导致出现 bug。 + // 目前的策略是 swiper-item 的数量小于等于 5 时，不添加 additionalSlides，大于 5 小于等于 7 时，添加 1 个 additionalSlides，大于 7 时，添加 2 个 additionalSlides。 + getLoopAdditionalSlides():number { + const slidersLength = (this.getSlidersList()).length + if (!this.$el || !this.getNeedFixLoop() || slidersLength < ONE_ADDITIONAL_SLIDES_THRESHOLD) return 0 + if (slidersLength <= TWO_ADDITIONAL_SLIDES_THRESHOLD) return 1 + return 2 } - handleSwiperLoop = debounce(() => { - if (this.mySwiper && this.mySwiper.$wrapperEl && this.props.circular) { - // @ts-ignore - this.mySwiper.loopDestroy() - // @ts-ignore - this.mySwiper.loopCreate() - } - }, 500) + parseMargin = () => { + const { previousMargin = '0px', nextMargin = '0px' } = this.props + const [, pM] = /^(\d+)px/.exec(previousMargin) || [] + const [, nN] = /^(\d+)px/.exec(nextMargin as string) || [] + return [parseInt(pM) || 0, parseInt(nN) || 0] + } + + getCurrentId (swiper: ISwiper) { + const slides = swiper.slides + const activeIndex = swiper.activeIndex + const currentSlide = slides[activeIndex] + return currentSlide.getAttribute('item-id') + } render () { const { className, style, vertical, - previousMargin, - nextMargin, indicatorColor, indicatorActiveColor, forwardedRef } = this.props const defaultIndicatorColor = indicatorColor || 'rgba(0, 0, 0, .3)' const defaultIndicatorActiveColor = indicatorActiveColor || '#000' + const [pM, nM] = this.parseMargin() const cls = classNames(`taro-swiper-${this._id}`, className) - const sty = Object.assign({ - paddingTop: vertical ? this.parsePX(previousMargin) : 0, - paddingRight: vertical ? 0 : this.parsePX(nextMargin), - paddingBottom: vertical ? this.parsePX(nextMargin) : 0, - paddingLeft: vertical ? 0 : this.parsePX(previousMargin), - overflow: 'hidden' - }, style) - const paginationCls = classNames( - 'swiper-pagination', - { - 'swiper-pagination-hidden': !this.props.indicatorDots, - 'swiper-pagination-bullets': this.props.indicatorDots - } - ) + const sty = Object.assign({}, style) + const hasMargin = pM || nM + if (hasMargin) { + sty.overflow = 'hidden' + } + if (this.props.full) { + sty.height = '100%' + } + const swiperContainerStyleList:string [] = [ + 'overflow: visible;', + vertical ? `margin-top: ${pM}px; margin-bottom: ${nM}px;` : `margin-right: ${nM}px; margin-left: ${pM}px;`, + this.props.full ? 'height: 100%;' : '' + ] + + + const swiperPaginationStyleList:string [] = [ + this.props.indicatorDots ? 'opacity: 1;' : 'display: none;', + 'font-size: 0;' + ] return (
{ if (forwardedRef && e) { @@ -313,11 +491,13 @@ class SwiperInner extends React.Component> __html: `` }} /> -
{this.props.children}
-
+
{this.props.children}
+
) diff --git a/packages/taro-components-react/src/components/swiper/style/index.css b/packages/taro-components-react/src/components/swiper/style/index.css index 26265858c9b..b46cd2db880 100644 --- a/packages/taro-components-react/src/components/swiper/style/index.css +++ b/packages/taro-components-react/src/components/swiper/style/index.css @@ -4,12 +4,6 @@ .swiper-container { height: 100%; -} - -.swiper-pagination { - font-size: 0; -} - -.swiper-pagination-bullet { - opacity: 1 + position: relative; + overflow: visible; } diff --git a/packages/taro-components-react/src/index.ts b/packages/taro-components-react/src/index.react.ts similarity index 94% rename from packages/taro-components-react/src/index.ts rename to packages/taro-components-react/src/index.react.ts index d6db68d7fd2..6c965b3b651 100644 --- a/packages/taro-components-react/src/index.ts +++ b/packages/taro-components-react/src/index.react.ts @@ -43,7 +43,7 @@ export { OfficialAccount } from '@tarojs/components/lib/react' export { OpenData } from '@tarojs/components/lib/react' export { PageContainer } from '@tarojs/components/lib/react' export { PageMeta } from '@tarojs/components/lib/react' -export { Picker, PickerGroup } from '@tarojs/components/lib/react' +export { Picker } from '@tarojs/components/lib/react' export { PickerView, PickerViewColumn } from '@tarojs/components/lib/react' export { Progress } from '@tarojs/components/lib/react' export { default as PullDownRefresh } from './components/pull-down-refresh' @@ -58,11 +58,10 @@ export { Slider } from '@tarojs/components/lib/react' export { NativeSlot, Slot } from '@tarojs/components/lib/react' export { Swiper, SwiperItem } from './components/swiper' export { Switch } from '@tarojs/components/lib/react' -export { Tabbar, TabItem } from '@tarojs/components/lib/react' export { Tabs } from '@tarojs/components/lib/react' export { default as Text } from './components/text' export { Textarea } from '@tarojs/components/lib/react' -export { Video, VideoControl, VideoDanmu } from '@tarojs/components/lib/react' +export { Video } from '@tarojs/components/lib/react' export { default as View } from './components/view' export { VoipRoom } from '@tarojs/components/lib/react' export { WebView } from '@tarojs/components/lib/react' diff --git a/packages/taro-components-react/src/index.solid.ts b/packages/taro-components-react/src/index.solid.ts new file mode 100644 index 00000000000..f1e61168418 --- /dev/null +++ b/packages/taro-components-react/src/index.solid.ts @@ -0,0 +1,67 @@ +/* eslint-disable simple-import-sort/exports */ +export { Ad } from '@tarojs/components/lib/solid' +export { AdCustom } from '@tarojs/components/lib/solid' +export { AnimationVideo } from '@tarojs/components/lib/solid' +export { AnimationView } from '@tarojs/components/lib/solid' +export { ArCamera } from '@tarojs/components/lib/solid' +export { Audio } from '@tarojs/components/lib/solid' +export { AwemeData } from '@tarojs/components/lib/solid' +export { Block } from '@tarojs/components/lib/solid' +export { default as Button } from './components/button' +export { Camera } from '@tarojs/components/lib/solid' +export { Canvas } from '@tarojs/components/lib/solid' +export { ChannelLive } from '@tarojs/components/lib/solid' +export { ChannelVideo } from '@tarojs/components/lib/solid' +export { Checkbox, CheckboxGroup } from '@tarojs/components/lib/solid' +export { CommentDetail, CommentList } from '@tarojs/components/lib/solid' +export { ContactButton } from '@tarojs/components/lib/solid' +export { CoverImage } from '@tarojs/components/lib/solid' +export { CoverView } from '@tarojs/components/lib/solid' +export { CustomWrapper } from '@tarojs/components/lib/solid' +export { Editor } from '@tarojs/components/lib/solid' +export { FollowSwan } from '@tarojs/components/lib/solid' +export { Form } from '@tarojs/components/lib/solid' +export { FunctionalPageNavigator } from '@tarojs/components/lib/solid' +export { default as Icon } from './components/icon' +export { default as Image } from './components/image' +export { InlinePaymentPanel } from '@tarojs/components/lib/solid' +export { Input } from '@tarojs/components/lib/solid' +export { KeyboardAccessory } from '@tarojs/components/lib/solid' +export { Label } from '@tarojs/components/lib/solid' +export { Lifestyle } from '@tarojs/components/lib/solid' +export { Like } from '@tarojs/components/lib/solid' +export { LivePlayer } from '@tarojs/components/lib/solid' +export { LivePusher } from '@tarojs/components/lib/solid' +export { Login } from '@tarojs/components/lib/solid' +export { Lottie } from '@tarojs/components/lib/solid' +export { Map } from '@tarojs/components/lib/solid' +export { MatchMedia } from '@tarojs/components/lib/solid' +export { MovableArea, MovableView } from '@tarojs/components/lib/solid' +export { NavigationBar } from '@tarojs/components/lib/solid' +export { Navigator } from '@tarojs/components/lib/solid' +export { OfficialAccount } from '@tarojs/components/lib/solid' +export { OpenData } from '@tarojs/components/lib/solid' +export { PageContainer } from '@tarojs/components/lib/solid' +export { PageMeta } from '@tarojs/components/lib/solid' +export { Picker } from '@tarojs/components/lib/solid' +export { PickerView, PickerViewColumn } from '@tarojs/components/lib/solid' +export { Progress } from '@tarojs/components/lib/solid' +// export { default as PullDownRefresh } from './components/pull-down-refresh' +export { PullToRefresh } from '@tarojs/components/lib/solid' +export { Radio, RadioGroup } from '@tarojs/components/lib/solid' +export { RichText } from '@tarojs/components/lib/solid' +export { RootPortal } from '@tarojs/components/lib/solid' +export { RtcRoom, RtcRoomItem } from '@tarojs/components/lib/solid' +export { default as ScrollView } from './components/scroll-view' +export { ShareElement } from '@tarojs/components/lib/solid' +export { Slider } from '@tarojs/components/lib/solid' +export { NativeSlot, Slot } from '@tarojs/components/lib/solid' +export { Swiper, SwiperItem } from '@tarojs/components/lib/solid' +export { Switch } from '@tarojs/components/lib/solid' +export { Tabs } from '@tarojs/components/lib/solid' +export { default as Text } from './components/text' +export { Textarea } from '@tarojs/components/lib/solid' +export { Video } from '@tarojs/components/lib/solid' +export { default as View } from './components/view' +export { VoipRoom } from '@tarojs/components/lib/solid' +export { WebView } from '@tarojs/components/lib/solid' diff --git a/packages/taro-components-react/types/global.d.ts b/packages/taro-components-react/types/global.d.ts index c39c2cf76d0..32807413f3a 100644 --- a/packages/taro-components-react/types/global.d.ts +++ b/packages/taro-components-react/types/global.d.ts @@ -3,3 +3,11 @@ declare namespace JSX { [elemName: string]: any; } } + +declare module '@tarojs/components/lib/solid' { + export * from '@tarojs/components' +} + +declare module '@tarojs/components/lib/react' { + export * from '@tarojs/components' +} diff --git a/packages/taro-components-react/types/index.d.ts b/packages/taro-components-react/types/index.d.ts index 79a5e651a00..17e035bc9c4 100644 --- a/packages/taro-components-react/types/index.d.ts +++ b/packages/taro-components-react/types/index.d.ts @@ -1,3 +1,9 @@ + +declare module 'swiper/bundle' { + import Swiper from 'swiper'; + export = Swiper +} + declare module '@tarojs/components-react' { export * from '@tarojs/components' } @@ -14,4 +20,4 @@ declare module '*/hooks' { export const memo: typeof React.memo export const forwardRef: typeof React.forwardRef export const useImperativeHandle: typeof React.useImperativeHandle -} \ No newline at end of file +} diff --git a/packages/taro-components-rn/package.json b/packages/taro-components-rn/package.json index e4b17ec812c..d3e8375bb0c 100644 --- a/packages/taro-components-rn/package.json +++ b/packages/taro-components-rn/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/components-rn", - "version": "4.0.4", + "version": "4.0.5", "description": "React Native 基础组件", "author": "O2Team", "license": "MIT", diff --git a/packages/taro-components/__mocks__/swiper/swiper-bundle.esm.js.ts b/packages/taro-components/__mocks__/swiper/bundle.ts similarity index 63% rename from packages/taro-components/__mocks__/swiper/swiper-bundle.esm.js.ts rename to packages/taro-components/__mocks__/swiper/bundle.ts index b5824eba07c..62640385c7c 100644 --- a/packages/taro-components/__mocks__/swiper/swiper-bundle.esm.js.ts +++ b/packages/taro-components/__mocks__/swiper/bundle.ts @@ -1,33 +1,62 @@ /* eslint-disable @typescript-eslint/no-unused-vars */ -import { SwiperOptions } from 'swiper' -import { A11yMethods } from 'swiper/types/components/a11y' -import { AutoplayMethods } from 'swiper/types/components/autoplay' -import { ControllerMethods } from 'swiper/types/components/controller' -import { CoverflowEffectMethods } from 'swiper/types/components/effect-coverflow' -import { CubeEffectMethods } from 'swiper/types/components/effect-cube' -import { FadeEffectMethods } from 'swiper/types/components/effect-fade' -import { FlipEffectMethods } from 'swiper/types/components/effect-flip' -import { HashNavigationMethods } from 'swiper/types/components/hash-navigation' -import { HistoryMethods } from 'swiper/types/components/history' -import { KeyboardMethods } from 'swiper/types/components/keyboard' -import { LazyMethods } from 'swiper/types/components/lazy' -import { MousewheelMethods } from 'swiper/types/components/mousewheel' -import { NavigationMethods } from 'swiper/types/components/navigation' -import { PaginationMethods } from 'swiper/types/components/pagination' -import { ParallaxMethods } from 'swiper/types/components/parallax' -import { ScrollbarMethods } from 'swiper/types/components/scrollbar' -import { ThumbsMethods } from 'swiper/types/components/thumbs' -import { VirtualMethods } from 'swiper/types/components/virtual' -import { ZoomMethods } from 'swiper/types/components/zoom' +import { A11yMethods } from 'swiper/types/modules/a11y' +import { AutoplayMethods } from 'swiper/types/modules/autoplay' +import { ControllerMethods } from 'swiper/types/modules/controller' +import { CardsEffectMethods } from 'swiper/types/modules/effect-cards' +import { CoverflowEffectMethods } from 'swiper/types/modules/effect-coverflow' +import { CreativeEffectMethods } from 'swiper/types/modules/effect-creative' +import { CubeEffectMethods } from 'swiper/types/modules/effect-cube' +import { FadeEffectMethods } from 'swiper/types/modules/effect-fade' +import { FlipEffectMethods } from 'swiper/types/modules/effect-flip' +import { FreeModeMethods } from 'swiper/types/modules/free-mode' +import { HashNavigationMethods } from 'swiper/types/modules/hash-navigation' +import { HistoryMethods } from 'swiper/types/modules/history' +import { KeyboardMethods } from 'swiper/types/modules/keyboard' +import { MousewheelMethods } from 'swiper/types/modules/mousewheel' +import { NavigationMethods } from 'swiper/types/modules/navigation' +import { PaginationMethods } from 'swiper/types/modules/pagination' +import { ParallaxMethods } from 'swiper/types/modules/parallax' +import { ScrollbarMethods } from 'swiper/types/modules/scrollbar' +import { ThumbsMethods } from 'swiper/types/modules/thumbs' +import { VirtualMethods } from 'swiper/types/modules/virtual' +import { ZoomMethods } from 'swiper/types/modules/zoom' import { SwiperEvents } from 'swiper/types/swiper-events' +import { SwiperOptions } from 'swiper/types/swiper-options' -import type ISwiper from 'swiper' +import type ISwiper from 'swiper/types/swiper-class' export default class Swiper implements ISwiper { + originalParams: SwiperOptions + loopedSlides: number | null + snapIndex: number + snapGrid: number[] + isLocked: boolean + swipeDirection: 'next' | 'prev' + slidesPerViewDynamic (): number { + throw new Error('Method not implemented.') + } + + changeLanguageDirection (direction: 'rtl' | 'ltr'): void { + throw new Error('Method not implemented.') + } + + loopCreate (): void { + throw new Error('Method not implemented.') + } + + loopDestroy (): void { + throw new Error('Method not implemented.') + } + + init (el?: HTMLElement | undefined): ISwiper { + throw new Error('Method not implemented.') + } + + creativeEffect: CreativeEffectMethods + cardsEffect: CardsEffectMethods + freeMode: FreeModeMethods params: SwiperOptions - $el el: HTMLElement - $wrapperEl wrapperEl: HTMLElement slides width: number @@ -83,8 +112,6 @@ export default class Swiper implements ISwiper { attachEvents (): void {} - init (): void {} - destroy (deleteInstance?: boolean | undefined, cleanStyles?: boolean | undefined): void {} appendSlide (slides: string | HTMLElement | string[] | HTMLElement[]): void {} @@ -134,7 +161,6 @@ export default class Swiper implements ISwiper { hashNavigation: HashNavigationMethods history: HistoryMethods keyboard: KeyboardMethods - lazy: LazyMethods mousewheel: MousewheelMethods navigation: NavigationMethods pagination: PaginationMethods diff --git a/packages/taro-components/__tests__/__snapshots__/swiper.spec.tsx.snap b/packages/taro-components/__tests__/__snapshots__/swiper.spec.tsx.snap index 1cb8e956c7c..36334ca7ec3 100644 --- a/packages/taro-components/__tests__/__snapshots__/swiper.spec.tsx.snap +++ b/packages/taro-components/__tests__/__snapshots__/swiper.spec.tsx.snap @@ -1,145 +1,175 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Swiper events 1`] = ` - + -
+
+
+
+
-
+
`; exports[`Swiper props 1`] = ` - + -
+
+
+
+
-
+
`; exports[`Swiper should autoplay 1`] = ` - + -
+
+
+
+
-
+
`; exports[`Swiper should be circular 1`] = ` - + -
+
+
+
+
-
+
`; exports[`Swiper should be vertical 1`] = ` - + -
+
+
+
+
-
+
`; exports[`Swiper should display multi items within screen width 1`] = ` - + -
+
+
+
+
-
+
`; @@ -147,23 +177,28 @@ exports[`Swiper should display multi items within screen width 1`] = ` exports[`Swiper should has previous margin 1`] = ` -
+
+
+
+
-
+
`; diff --git a/packages/taro-components/package.json b/packages/taro-components/package.json index c237993c07e..a81a4acfa85 100644 --- a/packages/taro-components/package.json +++ b/packages/taro-components/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/components", - "version": "4.0.4", + "version": "4.0.5", "description": "Taro 组件库", "browser": "dist/index.js", "main:h5": "dist/index.js", @@ -64,7 +64,7 @@ "classnames": "^2.2.5", "hls.js": "^1.1.5", "resolve-pathname": "^3.0.0", - "swiper": "6.8.0", + "swiper": "11.1.0", "tslib": "^2.6.2" }, "devDependencies": { diff --git a/packages/taro-components/src/components/map/readme.md b/packages/taro-components/src/components/map/readme.md index 3a480d89c60..1fb9805745c 100644 --- a/packages/taro-components/src/components/map/readme.md +++ b/packages/taro-components/src/components/map/readme.md @@ -5,6 +5,45 @@ +## Properties + +| Property | Attribute | Description | Type | Default | +| -------------------------- | ----------------------------- | ---------------- | ------------ | ----------- | +| `circles` | -- | 圆(问题) | `circle[]` | `undefined` | +| `enable3D` | `enable-3-d` | 3D楼块 | `boolean` | `undefined` | +| `enableAutoMaxOverlooking` | `enable-auto-max-overlooking` | 是否开启最大俯视角 | `boolean` | `undefined` | +| `enableBuilding` | `enable-building` | 是否展示建筑 | `boolean` | `undefined` | +| `enableOverlooking` | `enable-overlooking` | 是否开启俯视 | `boolean` | `undefined` | +| `enableRotate` | `enable-rotate` | 是否支持旋转 | `boolean` | `undefined` | +| `enableSatellite` | `enable-satellite` | 是否开启卫星图 | `boolean` | `undefined` | +| `enableScroll` | `enable-scroll` | 是否支持拖动 | `boolean` | `undefined` | +| `enableTraffic` | `enable-traffic` | 是否开启实时路况 | `boolean` | `undefined` | +| `enableZoom` | `enable-zoom` | 是否支持缩放 | `boolean` | `undefined` | +| `height` | `height` | 添加高度属性 | `string` | `'100%'` | +| `latitude` | `latitude` | 纬度 | `number` | `undefined` | +| `layerStyle` | `layer-style` | 【个性化地图】配置的 style | `number` | `undefined` | +| `longitude` | `longitude` | 经度 | `number` | `undefined` | +| `markers` | -- | 标记点 | `marker[]` | `undefined` | +| `maxScale` | `max-scale` | 最大缩放级别 | `number` | `undefined` | +| `minScale` | `min-scale` | 最小缩放级别 | `number` | `undefined` | +| `polygons` | -- | 多边形（参数问题） | `polygon[]` | `undefined` | +| `polyline` | -- | 路线(问题) | `polyline[]` | `undefined` | +| `rotate` | `rotate` | 旋转 | `number` | `undefined` | +| `scale` | `scale` | 缩放级别 | `number` | `undefined` | +| `showCompass` | `show-compass` | 指南针 | `boolean` | `undefined` | +| `showScale` | `show-scale` | 比例尺 | `boolean` | `undefined` | +| `skew` | `skew` | 倾斜 | `number` | `undefined` | +| `subkey` | `subkey` | 个性化地图】使用的key | `string` | `undefined` | +| `width` | `width` | 添加宽度属性 | `string` | `'100%'` | + + +## Events + +| Event | Description | Type | +| ----- | ----------- | ------------------ | +| `tap` | | `CustomEvent` | + + ---------------------------------------------- *Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/taro-components/src/components/swiper/readme.md b/packages/taro-components/src/components/swiper/readme.md index 575104af95c..71ce279e6ec 100644 --- a/packages/taro-components/src/components/swiper/readme.md +++ b/packages/taro-components/src/components/swiper/readme.md @@ -22,10 +22,9 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| -------- | --------- | ----------- | --------- | ----------- | -| `deep` | `deep` | | `boolean` | `false` | -| `itemId` | `item-id` | | `string` | `undefined` | +| Property | Attribute | Description | Type | Default | +| -------- | --------- | ----------- | -------- | ----------- | +| `itemId` | `item-id` | | `string` | `undefined` | ---------------------------------------------- diff --git a/packages/taro-components/src/components/swiper/style/index.scss b/packages/taro-components/src/components/swiper/style/index.scss index b0c5b217995..62f92378582 100644 --- a/packages/taro-components/src/components/swiper/style/index.scss +++ b/packages/taro-components/src/components/swiper/style/index.scss @@ -1,4 +1,3 @@ -@import "~swiper/swiper.min.css"; @import "~swiper/swiper-bundle.min.css"; taro-swiper-core { @@ -8,18 +7,8 @@ taro-swiper-core { .swiper { &-container { height: 100%; - } - - &-pagination { - font-size: 0; - - &.swiper-pagination-bullet { - opacity: 1; - } - - &.swiper-pagination-hidden { - display: none; - } + position: relative; + overflow: visible; } } } diff --git a/packages/taro-components/src/components/swiper/swiper-item.tsx b/packages/taro-components/src/components/swiper/swiper-item.tsx index 10b2dcfe526..edf1bcdb538 100644 --- a/packages/taro-components/src/components/swiper/swiper-item.tsx +++ b/packages/taro-components/src/components/swiper/swiper-item.tsx @@ -1,70 +1,29 @@ -import { Component, ComponentInterface, Element, Host, h, Prop } from '@stencil/core' +import { Component, ComponentInterface, Host, h, Element, Prop } from '@stencil/core' -const nativeCloneNode = Node.prototype.cloneNode +import { handleStencilNodes } from '../../utils' +import classNames from 'classnames' @Component({ tag: 'taro-swiper-item-core' }) export class SwiperItem implements ComponentInterface { @Element() el: HTMLElement - @Prop() itemId: string - @Prop() deep: boolean = false - - handleCloneNode (node: Node, deep: boolean) { - const clonedNode = nativeCloneNode.call(node, false) - const srcChildNodes = this.handleChildNodes(node) - - if (deep) { - for (let i = 0; i < srcChildNodes.length; i++) { - const srcNode: Node = srcChildNodes[i] - if (!srcNode) break - let srcDeep: boolean = deep - if (srcNode.nodeType !== 2 && srcNode.nodeType !== 8) { - // Note: 没有引用节点（s-cr[reference comment]）的情况下，不复制子节点避免冗余（例如：Image 组件） - if (this.deep !== true && !srcNode['s-cr']) { - srcDeep = false - } - const childClone = this.handleCloneNode(srcNode, srcDeep) - clonedNode.appendChild(childClone) - } - } - } - - return clonedNode - } - - handleChildNodes (node: Node) { - const childNodes = node.childNodes - - // check if element is stencil element without shadow dom - // and then detect elements that were slotted into the element - if (node['s-sc']) { - const result: any[] = [] - - for (let i = 0; i < childNodes.length; i++) { - const slot = childNodes[i]['s-nr'] - - if (slot) { - result.push(slot) - } - } - - return result - } - return Array.from(childNodes) + //Note: 由于 swiper.js 会通过子元素中的 class 来判断是否为 swiper-slide，所以这里需要在 connectedCallback 中添加 swiper-slide 类名 + connectedCallback() { + this.el.className = classNames(this.el.className, 'swiper-slide') } componentDidRender () { - this.el.cloneNode = (deep = false) => { - return this.handleCloneNode(this.el, deep) - } + handleStencilNodes(this.el) } render () { return ( - + + + ) } } diff --git a/packages/taro-components/src/components/swiper/swiper.tsx b/packages/taro-components/src/components/swiper/swiper.tsx index 9655162ae9e..0da251e53d4 100644 --- a/packages/taro-components/src/components/swiper/swiper.tsx +++ b/packages/taro-components/src/components/swiper/swiper.tsx @@ -1,12 +1,12 @@ -import { Component, h, ComponentInterface, Prop, Event, EventEmitter, Watch, Host, Element, State } from '@stencil/core' -import classNames from 'classnames' -import type ISwiper from 'swiper' -import SwiperJS from 'swiper/swiper-bundle.esm.js' +import { Component, h, ComponentInterface, Prop, Event, EventEmitter, Host, Element, State, Watch } from '@stencil/core' +import SwiperJS from 'swiper/bundle' import { debounce } from '../../utils' +import type ISwiper from 'swiper' let INSTANCE_ID = 0 - +const ONE_ADDITIONAL_SLIDES_THRESHOLD = 5 +const TWO_ADDITIONAL_SLIDES_THRESHOLD = 7 @Component({ tag: 'taro-swiper-core', styleUrls: [ @@ -16,6 +16,10 @@ let INSTANCE_ID = 0 export class Swiper implements ComponentInterface { #id = INSTANCE_ID++ #source = '' + #swiperResetting = false + // dom 变化是否由外部引起，因为 swiper 的循环模式也会引起 dom 的变化。如果不是由外部引起的 dom 变化，就不需要重新初始化 swiper + #domChangeByOutSide = false + #lastSwiperActiveIndex = 0 @Element() el: HTMLElement @State() swiperWrapper: HTMLElement | null @@ -96,6 +100,11 @@ export class Swiper implements ComponentInterface { */ @Prop() zoom = false + /** + * swiper11 相关的动效参数，具体见文档 https://swiperjs.com/swiper-api#parameters + */ + @Prop() effectsProps: Record = {} + @Event({ eventName: 'change' }) onChange: EventEmitter @@ -106,15 +115,16 @@ export class Swiper implements ComponentInterface { @Watch('current') watchCurrent (newVal) { - if (this.currentItemId || !this.isWillLoadCalled) return - + if (this.currentItemId || !this.isWillLoadCalled || !this.swiper) return const n = parseInt(newVal, 10) - if (isNaN(n)) return - + if (isNaN(n) || n === this.swiper.realIndex) return + this.#source = '' if (this.circular) { - if (!this.swiper.isBeginning && !this.swiper.isEnd) { - this.swiper.slideToLoop(n) // 更新下标 - } + this.swiper.slideToLoop(n) // 更新下标 + this.autoplay && this.swiper.autoplay.pause() + // @ts-ignore + this.swiper.loopFix() + this.autoplay && this.swiper.autoplay.start() } else { this.swiper.slideTo(n) // 更新下标 } @@ -122,18 +132,26 @@ export class Swiper implements ComponentInterface { @Watch('currentItemId') watchCurrentItemId (newVal) { - const wrapper = this.swiper.$wrapperEl?.[0] + if (!this.swiperWrapper || !this.isWillLoadCalled) return + let itemIdIndex = 0 - wrapper.querySelectorAll('taro-swiper-item-core:not(.swiper-slide-duplicate)').forEach((swiperItem, index) => { - // @ts-ignore - if (swiperItem.itemId && swiperItem.itemId === newVal) { - itemIdIndex = index + this.getSlidersList().forEach((swiperItem, index) => { + const itemId = swiperItem.getAttribute('item-id') + if (itemId === newVal) { + if (this.circular) { + itemIdIndex = Number(swiperItem.getAttribute('data-swiper-slide-index')) + } else { + itemIdIndex = index + } } }) + if(itemIdIndex === this.swiper.realIndex) return // 无需更新 + this.#source = '' if (this.circular) { - if (!this.swiper.isBeginning && !this.swiper.isEnd) { - this.swiper.slideToLoop(itemIdIndex) // 更新下标 - } + this.swiper.slideToLoop(itemIdIndex) // 更新下标 + // @ts-ignore + this.swiper.loopFix() + this.autoplay && this.swiper.autoplay.start() } else { this.swiper.slideTo(itemIdIndex) // 更新下标 } @@ -163,13 +181,13 @@ export class Swiper implements ComponentInterface { @Watch('duration') watchDuration (newVal) { - if (!this.isWillLoadCalled) return + if (!this.swiper || !this.isWillLoadCalled) return this.swiper.params.speed = newVal } @Watch('interval') watchInterval (newVal) { - if (!this.isWillLoadCalled) return + if (!this.swiper || !this.isWillLoadCalled) return if (typeof this.swiper.params.autoplay === 'object') { this.swiper.params.autoplay.delay = newVal @@ -178,44 +196,72 @@ export class Swiper implements ComponentInterface { @Watch('swiperWrapper') watchSwiperWrapper (newVal?: HTMLElement) { - if (!this.isWillLoadCalled) return + if (!this.isWillLoadCalled || !this.swiper) return if (!newVal) return + const beforeDomOperation = () => { + this.#domChangeByOutSide = true + // 如果是由于外部子节点的变化引起的 dom 变化，需要重新初始化 swiper。 + // 在初dom操作之前，需要调用 loopDestroy，把子节点的顺序恢复 + this.swiper.loopDestroy() + this.swiper.params.loop = false + } this.el.appendChild = (newChild: T): T => { + this.#swiperResetting = true + if(!this.#domChangeByOutSide && this.circular) { + beforeDomOperation() + } return newVal.appendChild(newChild) } this.el.insertBefore = (newChild: T, refChild: Node | null): T => { + this.#swiperResetting = true + if(!this.#domChangeByOutSide && this.circular) { + beforeDomOperation() + } return newVal.insertBefore(newChild, refChild) } this.el.replaceChild = (newChild: Node, oldChild: T): T => { + this.#swiperResetting = true + if(!this.#domChangeByOutSide && this.circular) { + beforeDomOperation() + } return newVal.replaceChild(newChild, oldChild) } this.el.removeChild = (oldChild: T): T => { + this.#swiperResetting = true + if(!this.#domChangeByOutSide && this.circular) { + beforeDomOperation() + } return newVal.removeChild(oldChild) } - this.el.addEventListener('DOMNodeInserted', this.handleSwiperSizeDebounce) - this.el.addEventListener('DOMNodeRemoved', this.handleSwiperSizeDebounce) - this.el.addEventListener('MutationObserver', this.handleSwiperSizeDebounce) } + handleSwiperSizeDebounce = debounce(() => { + if (!this.swiper || !this.isWillLoadCalled) return + if(this.circular) { + if(this.#domChangeByOutSide) { + this.reset() + this.#domChangeByOutSide = false + this.#swiperResetting = false + } + } else { + this.swiper.update() + this.#swiperResetting = false + } + }, 50) + @Watch("circular") watchCircular () { - if (this.swiper) { - this.swiper.destroy() - this.handleInit() - } + if (!this.swiper || !this.isWillLoadCalled) return + this.reset() } @Watch("displayMultipleItems") watchDisplayMultipleItems () { - if (this.swiper) { - this.swiper.destroy() - this.handleInit() - } + if (!this.swiper || !this.isWillLoadCalled) return + this.reset() } @State() observer: MutationObserver - @State() observerFirst: MutationObserver - @State() observerLast: MutationObserver componentWillLoad () { this.isWillLoadCalled = true @@ -223,79 +269,18 @@ export class Swiper implements ComponentInterface { componentDidLoad () { this.handleInit() - if (!this.swiper || !this.circular) return - - const wrapper = this.swiper.$wrapperEl?.[0] - this.observer = new MutationObserver(this.handleSwiperLoopListen) - - this.observer.observe(wrapper, { + if (!this.swiper || !this.swiperWrapper) return + this.observer = new MutationObserver(this.handleSwiperSizeDebounce) + this.observer.observe(this.swiperWrapper as Node, { childList: true }) } - componentWillUpdate () { - if (!this.swiper) return - if (this.autoplay && !this.swiper.autoplay?.running) { - this.swiper.autoplay?.start() - } - if (this.swiper.$el) { - this.swiper.update() // 更新子元素 - } - } - - componentDidRender () { - this.handleSwiperLoop() - } - disconnectedCallback () { - this.el.removeEventListener('DOMNodeInserted', this.handleSwiperSizeDebounce) - this.el.removeEventListener('DOMNodeRemoved', this.handleSwiperSizeDebounce) - this.el.removeEventListener('MutationObserver', this.handleSwiperSizeDebounce) - this.observer?.disconnect?.() - this.observerFirst?.disconnect?.() - this.observerLast?.disconnect?.() + this.observer?.disconnect() } - handleSwiperLoopListen = () => { - this.observerFirst?.disconnect && this.observerFirst.disconnect() - this.observerLast?.disconnect && this.observerLast.disconnect() - this.observerFirst = new MutationObserver(this.handleSwiperLoopDebounce) - this.observerLast = new MutationObserver(this.handleSwiperLoopDebounce) - const wrapper = this.swiper.$wrapperEl?.[0] - const list = wrapper.querySelectorAll('taro-swiper-item-core:not(.swiper-slide-duplicate)') - if (list.length >= 1) { - this.observerFirst.observe(list[0], { - characterData: true - }) - } else if (list.length >= 2) { - this.observerLast.observe(list[list.length - 1], { - characterData: true - }) - } - } - - handleSwiperLoop = () => { - if (!this.swiper || !this.circular) return - const swiper = this.swiper as any // Note: loop 相关的方法 swiper 未声明 - const duplicates = this.swiperWrapper?.querySelectorAll('.swiper-slide-duplicate') || [] - if (duplicates.length < 2) { - // Note: 循环模式下，但是前后垫片未注入 - swiper.loopDestroy?.() - swiper.loopCreate?.() - } else { - swiper.loopFix?.() - } - } - - handleSwiperLoopDebounce = debounce(this.handleSwiperLoop, 50) - - handleSwiperSizeDebounce = debounce(() => { - if (this.swiper && this.swiper.$wrapperEl && !this.circular) { - this.swiper.updateSlides() - } - }, 50) - - handleInit () { + handleInit (reset = false) { const { autoplay, circular, @@ -304,81 +289,87 @@ export class Swiper implements ComponentInterface { displayMultipleItems, duration, interval, + effectsProps, vertical } = this - let initialSlide = circular ? current + 1 : current - if (currentItemId) { - let itemIdIndex = 0 - this.el.querySelectorAll('taro-swiper-item-core:not(.swiper-slide-duplicate)').forEach((swiperItem, index) => { - // @ts-ignore - if (swiperItem.itemId && swiperItem.itemId === currentItemId) { - itemIdIndex = index - } - }) - initialSlide = circular ? itemIdIndex + 1 : itemIdIndex + let initialSlide = current + if (reset) { + initialSlide = this.#lastSwiperActiveIndex + } else { + if (currentItemId) { + let itemIdIndex = 0 + this.getSlidersList().forEach((swiperItem, index) => { + // @ts-ignore + if (swiperItem.itemId && swiperItem.itemId === currentItemId) { + itemIdIndex = index + } + }) + initialSlide = itemIdIndex + } } + const loopAdditionalSlides = this.getLoopAdditionalSlides() + const centeredSlides = displayMultipleItems === 1 + const slidesPerView = displayMultipleItems === 1 ? 'auto' : displayMultipleItems // eslint-disable-next-line @typescript-eslint/no-this-alias const that = this - const options: any = { pagination: { el: `.taro-swiper-${this.#id} > .swiper-container > .swiper-pagination` }, direction: vertical ? 'vertical' : 'horizontal', loop: circular, - slidesPerView: displayMultipleItems, + slidesPerView: slidesPerView, initialSlide: initialSlide, + loopAdditionalSlides: loopAdditionalSlides, speed: duration, - observer: true, observeParents: true, + observer: true, + centeredSlides: centeredSlides, zoom: this.zoom, + ...effectsProps, on: { - slideTo () { - that.current = this.realIndex - }, - // Note: slideChange 事件在 swiper.slideTo 改写 current 时不触发，因此用 slideChangeTransitionEnd 事件代替 - slideChangeTransitionEnd () { - /** Note: 此处不能使用 slideChangeTransitionStart 事件 - * - 因为在它触发时 swiper 各个参数并未准备好，将会导致错误的事件抛出； - * - 同时抛出 change 事件会导致 current 监听被打乱 swiper 的生命周期； - * - 模式与 slideTo 结合时，会导致动画会被中断、slider 展示不完整或衔接模式错误等问题。 - */ - if (circular) { - if (this.isBeginning || this.isEnd) { - this.slideToLoop(this.realIndex, 0) // 更新下标 - return - } - } - that.onChange.emit({ + changeTransitionEnd(e) { + if(that.#swiperResetting || that.#lastSwiperActiveIndex === this.realIndex) return + that.#lastSwiperActiveIndex = this.realIndex + that.getNeedFixLoop() && e.loopFix() + that.autoplay && e.autoplay.start() + const currentItemId = that.getCurrentItemId(e) + that.onAnimationFinish.emit({ current: this.realIndex, source: that.#source, + currentItemId, }) + that.#source = 'autoplay' }, - touchEnd: () => { + touchMove () { that.#source = 'touch' }, - autoplay() { - that.#source = 'autoplay' - }, - transitionEnd () { - setTimeout(() => { - that.#source = '' - }) - that.onAnimationFinish.emit({ + slideChange(e) { + if(that.#swiperResetting || that.#lastSwiperActiveIndex === this.realIndex) return + const currentItemId = that.getCurrentItemId(e) + that.onChange.emit({ current: this.realIndex, source: that.#source, + currentItemId, }) }, - observerUpdate (_swiper: ISwiper, e) { - const target = e.target - const className = target && typeof target.className === 'string' ? target.className : '' - if (className.includes('taro_page') && target.style.display !== 'none') { - if (that.autoplay && target.contains(_swiper.$el[0])) { - if (that.circular) { - _swiper.slideToLoop(this.realIndex, 0) // 更新下标 - } else { - _swiper.slideTo(this.realIndex) - } - } - } + init: (e) => { + that.getNeedFixLoop() && e.loopFix(); + that.autoplay && e.autoplay.start() + }, + touchEnd: (e) => { + that.#source = 'touch' + that.autoplay && e.autoplay.start() + }, + touchStart: (e) => { + that.#source = 'touch' + that.autoplay && e.autoplay.pause() + }, + autoplay(e) { + // Note: 修复 autoplay 时，切换到其他页面再切回来，autoplay 会停止的问题 + // autoplay 会调用 slideTo 方法，里面会判断是否 animating，如果 animating 为 true，就会被 return + // 参考源码：https://github.com/nolimits4web/swiper/blob/v11.1.0/src/core/slide/slideTo.mjs#27 27行 + // https://github.com/nolimits4web/swiper/blob/v11.1.0/src/modules/autoplay/autoplay.mjs + e.animating = false; + that.#source = 'autoplay' } } } @@ -390,9 +381,72 @@ export class Swiper implements ComponentInterface { disableOnInteraction: false } } - this.swiper = new SwiperJS(`.taro-swiper-${this.#id} > .swiper-container`, options) - this.swiperWrapper = this.el.querySelector(`.taro-swiper-${this.#id} > .swiper-container > .swiper-wrapper`) + + // Note: 这里是拦截了 swiper 的 minTranslate 和 maxTranslate 方法，手动修复了 loop 模式下的 margin 问题 + // 因为这两个属性会影响滑动到哪个位置进行 fixloop + // 可参考源码：https://github.com/nolimits4web/swiper/blob/v11.1.0/src/core/events/onTouchMove.mjs + // https://github.com/nolimits4web/swiper/blob/v11.1.0/src/core/loop/loopFix.mjs + if(this.getNeedFixLoop()) { + // @ts-ignore + const minTranslate = this.swiper.minTranslate.bind(this.swiper); + //@ts-ignore + const maxTranslate = this.swiper.maxTranslate.bind(this.swiper); + if(centeredSlides && this.getSlidersList().length < 4) { + //@ts-ignore + this.swiper.minTranslate = ()=> minTranslate() + this.parseMargin()[1]; + //@ts-ignore + this.swiper.maxTranslate = ()=> maxTranslate() - this.parseMargin()[0]; + } else { + //@ts-ignore + this.swiper.minTranslate = ()=> minTranslate() - this.parseMargin()[0]; + //@ts-ignore + this.swiper.maxTranslate = ()=> maxTranslate() + this.parseMargin()[1]; + } + } + + this.swiperWrapper = this.swiper.wrapperEl + } + + reset = () => { + this.#swiperResetting = true + this.#lastSwiperActiveIndex = this.swiper.realIndex + this.swiper.destroy() + this.handleInit(true) + this.#swiperResetting = false + } + + // 下面为方法函数 + + getSlidersList = () => this.el.querySelectorAll('taro-swiper-item-core:not(.swiper-slide-duplicate)') || [] + + // 获取是否需要手动修复 loop 的条件 + getNeedFixLoop = () => { + const margins = this.parseMargin() + const hasMargin = margins.filter(Boolean).length > 0 + return this.circular && hasMargin + } + + // Note: loop 的时候添加 additionalSlides 可以避免循环的时候由于 loopFix 不及时，出现空白的问题。但是并不是 additionalSlides 越多越好，因为 additionalSlides 越多，如果 swiper-item 的数量不够，会导致出现 bug。 + // 目前的策略是 swiper-item 的数量小于等于 5 时，不添加 additionalSlides，大于 5 小于等于 7 时，添加 1 个 additionalSlides，大于 7 时，添加 2 个 additionalSlides。 + getLoopAdditionalSlides():number{ + const slidersLength = (this.getSlidersList()).length + if(!this.el || !this.getNeedFixLoop() || slidersLength < ONE_ADDITIONAL_SLIDES_THRESHOLD) return 0 + if(slidersLength <= TWO_ADDITIONAL_SLIDES_THRESHOLD) return 1 + return 2 + } + + parseMargin = () => { + const [, previousMargin] = /^(\d+)px/.exec(this.previousMargin) || [] + const [, nextMargin] = /^(\d+)px/.exec(this.nextMargin) || [] + return [parseInt(previousMargin) || 0, parseInt(nextMargin) || 0] + } + + getCurrentItemId (swiper: ISwiper) { + const slides = swiper.slides + const activeIndex = swiper.activeIndex + const currentSlide = slides[activeIndex] + return currentSlide.getAttribute('item-id') } render () { @@ -403,45 +457,44 @@ export class Swiper implements ComponentInterface { indicatorActiveColor } = this - const hostStyle: Record = { overflow: 'hidden' } - const style: Record = { overflow: 'visible' } + const [pM, nM] = this.parseMargin() + const hasMargin = pM || nM + const hostStyle: Record = {} + if(hasMargin) { + hostStyle.overflow = 'hidden' + } if (this.full) { hostStyle.height = '100%' - style.height = '100%' - } - - const [, previousMargin] = /^(\d+)px/.exec(this.previousMargin) || [] - const [, nextMargin] = /^(\d+)px/.exec(this.nextMargin) || [] - const pM = parseInt(previousMargin) || 0 - const nM = parseInt(nextMargin) || 0 - if (vertical) { - style.marginTop = `${pM}px` - style.marginBottom = `${nM}px` - } else { - style.marginRight = `${nM}px` - style.marginLeft = `${pM}px` } + + const swiperContainerStyleList: string [] = [ + 'overflow: visible;', + vertical ? `margin-top: ${pM}px; margin-bottom: ${nM}px;` : `margin-right: ${nM}px; margin-left: ${pM}px;`, + this.full ? 'height: 100%;' : '', + ] + + const swiperPaginationStyleList: string [] = [ + indicatorDots ? 'opacity: 1;' : 'display: none;', + 'font-size: 0;' + ] return ( -
+
-
+
) } -} +} \ No newline at end of file diff --git a/packages/taro-components/types/Picker.d.ts b/packages/taro-components/types/Picker.d.ts index 3bcecd0a1ad..59642506509 100644 --- a/packages/taro-components/types/Picker.d.ts +++ b/packages/taro-components/types/Picker.d.ts @@ -25,6 +25,11 @@ interface PickerStandardProps extends StandardProps, FormItemProps { * @supported weapp, h5, rn, harmony, harmony_hybrid */ onCancel?: CommonEventFunction + /** + * 用于替换组件内部文本 + * @supported h5, harmony, harmony_hybrid + */ + textProps?: PickerStandardProps.PickerText } declare namespace PickerStandardProps { /** 选择器类型 */ @@ -87,11 +92,6 @@ interface PickerSelectorProps extends PickerStandardProps { * @supported weapp, h5, rn, harmony, harmony_hybrid */ onChange?: CommonEventFunction - /** - * 用于替换组件内部文本 - * @supported h5, harmony, harmony_hybrid - */ - textProps?: PickerStandardProps.PickerText } declare namespace PickerSelectorProps { interface ChangeEventDetail { @@ -289,6 +289,7 @@ declare namespace PickerRegionProps { value: string code: string postcode?: string + children?: RegionData[] } interface Level { /** 省级选择器 */ diff --git a/packages/taro-components/types/Swiper.d.ts b/packages/taro-components/types/Swiper.d.ts index d3a19e585f3..d4783a93c1e 100644 --- a/packages/taro-components/types/Swiper.d.ts +++ b/packages/taro-components/types/Swiper.d.ts @@ -151,6 +151,10 @@ interface SwiperProps extends StandardProps { * @default 0 */ cacheExtent?: number + /** swiper11 相关的动效参数，具体见文档 https://swiperjs.com/swiper-api#parameters + * @supported h5 + */ + effectsProps?: Record /** current 改变时会触发 change 事件 * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid */ diff --git a/packages/taro-components/types/global.d.ts b/packages/taro-components/types/global.d.ts new file mode 100644 index 00000000000..2760158fb40 --- /dev/null +++ b/packages/taro-components/types/global.d.ts @@ -0,0 +1,4 @@ +declare module 'swiper/bundle' { + import Swiper from 'swiper'; + export = Swiper +} \ No newline at end of file diff --git a/packages/taro-components/types/index.d.ts b/packages/taro-components/types/index.d.ts index ac618d98119..b9e401cbe09 100644 --- a/packages/taro-components/types/index.d.ts +++ b/packages/taro-components/types/index.d.ts @@ -15,6 +15,7 @@ export { ScrollView } from './ScrollView' export { Swiper } from './Swiper' export { SwiperItem } from './SwiperItem' export { View } from './View' +export { AnimationView } from './AnimationView' /** 基础内容 */ export { Icon } from './Icon' @@ -59,20 +60,25 @@ export { NestedScrollBody } from './NestedScrollBody' export { FunctionalPageNavigator } from './FunctionalPageNavigator' export { Navigator } from './Navigator' export { NavigationBar } from './NavigationBar' +export { Tabs } from './Tabs' // export { Tabbar } from './Tabbar' // export { TabbarItem } from './TabbarItem' /** 媒体组件 */ export { Audio } from './Audio' export { Camera } from './Camera' +export { ArCamera } from './ArCamera' export { ChannelLive } from './ChannelLive' export { ChannelVideo } from './ChannelVideo' export { Image } from './Image' export { LivePlayer } from './LivePlayer' export { LivePusher } from './LivePusher' export { Video } from './Video' +export { AnimationVideo } from './AnimationVideo' export { VoipRoom } from './VoipRoom' export { Lottie } from './Lottie' +export { RtcRoom } from './RtcRoom' +export { RtcRoomItem } from './RtcRoomItem' /** 地图 */ export { Map } from './Map' @@ -82,15 +88,29 @@ export { Canvas } from './Canvas' /** 开放能力 */ export { Ad } from './Ad' +export { AwemeData } from './AwemeData' export { AdCustom } from './AdCustom' export { OfficialAccount } from './OfficialAccount' export { OpenData } from './OpenData' export { WebView } from './WebView' +export { FollowSwan } from './FollowSwan' +export { InlinePaymentPanel } from './InlinePaymentPanel' +export { Lifestyle } from './Lifestyle' +export { Login } from './Login' /** 配置节点 */ export { PageMeta } from './PageMeta' +/** 内容服务组件 **/ +export { CommentDetail } from './CommentDetail' +export { CommentList } from './CommentList' +export { Like } from './Like' + +/** 客服能力 **/ +export { ContactButton } from './ContactButton' + export { CustomWrapper } from './CustomWrapper' export { Slot } from './Slot' export { NativeSlot } from './NativeSlot' export { Script } from './Script' +export { PullToRefresh } from './PullToRefresh' \ No newline at end of file diff --git a/packages/taro-components/types/index.solid.d.ts b/packages/taro-components/types/index.solid.d.ts new file mode 100644 index 00000000000..0243ba04f55 --- /dev/null +++ b/packages/taro-components/types/index.solid.d.ts @@ -0,0 +1,297 @@ +import { JSX, JSXElement } from 'solid-js' +import { TaroElement } from '@tarojs/runtime' +import { AdProps } from '@tarojs/components/types/Ad' +import { AdCustomProps } from '@tarojs/components/types/AdCustom' +import { AudioProps } from '@tarojs/components/types/Audio' +import { ButtonProps } from '@tarojs/components/types/Button' +import { CameraProps } from '@tarojs/components/types/Camera' +import { CanvasProps } from '@tarojs/components/types/Canvas' +import { ChannelLiveProps } from '@tarojs/components/types/ChannelLive' +import { ChannelVideoProps } from '@tarojs/components/types/ChannelVideo' +import { CheckboxProps } from '@tarojs/components/types/Checkbox' +import { CheckboxGroupProps } from '@tarojs/components/types/CheckboxGroup' +import { StandardProps } from '@tarojs/components/types/common' +import { CoverImageProps } from '@tarojs/components/types/CoverImage' +import { CoverViewProps } from '@tarojs/components/types/CoverView' +import { CustomWrapperProps } from '@tarojs/components/types/CustomWrapper' +import { EditorProps } from '@tarojs/components/types/Editor' +import { FormProps } from '@tarojs/components/types/Form' +import { FunctionalPageNavigatorProps } from '@tarojs/components/types/FunctionalPageNavigator' +import { GridViewProps } from '@tarojs/components/types/GridView' +import { IconProps } from '@tarojs/components/types/Icon' +import { ImageProps } from '@tarojs/components/types/Image' +import { InputProps } from '@tarojs/components/types/Input' +import { KeyboardAccessoryProps } from '@tarojs/components/types/KeyboardAccessory' +import { LabelProps } from '@tarojs/components/types/Label' +import { ListViewProps } from '@tarojs/components/types/ListView' +import { LivePlayerProps } from '@tarojs/components/types/LivePlayer' +import { LivePusherProps } from '@tarojs/components/types/LivePusher' +import { MapProps } from '@tarojs/components/types/Map' +import { MatchMediaProps } from '@tarojs/components/types/MatchMedia' +import { MovableAreaProps } from '@tarojs/components/types/MovableArea' +import { MovableViewProps } from '@tarojs/components/types/MovableView' +import { NativeSlotProps } from '@tarojs/components/types/NativeSlot' +import { NavigationBarProps } from '@tarojs/components/types/NavigationBar' +import { NavigatorProps } from '@tarojs/components/types/Navigator' +import { OfficialAccountProps } from '@tarojs/components/types/OfficialAccount' +import { OpenDataProps } from '@tarojs/components/types/OpenData' +import { PageContainerProps } from '@tarojs/components/types/PageContainer' +import { PageMetaProps } from '@tarojs/components/types/PageMeta' +import { + PickerDateProps, PickerMultiSelectorProps, + PickerRegionProps, PickerSelectorProps, PickerTimeProps +} from '@tarojs/components/types/Picker' +import { PickerViewProps } from '@tarojs/components/types/PickerView' +import { PickerViewColumnProps } from '@tarojs/components/types/PickerViewColumn' +import { ProgressProps } from '@tarojs/components/types/Progress' +import { RadioProps } from '@tarojs/components/types/Radio' +import { RadioGroupProps } from '@tarojs/components/types/RadioGroup' +import { RichTextProps } from '@tarojs/components/types/RichText' +import { RootPortalProps } from '@tarojs/components/types/RootPortal' +import { ScrollViewProps } from '@tarojs/components/types/ScrollView' +import { ShareElementProps } from '@tarojs/components/types/ShareElement' +import { SliderProps } from '@tarojs/components/types/Slider' +import { SlotProps } from '@tarojs/components/types/Slot' +import { SnapshotProps } from '@tarojs/components/types/SnapShot' +import { StickyHeaderProps } from '@tarojs/components/types/StickyHeader' +import { StickySectionProps } from '@tarojs/components/types/StickySection' +import { SwiperProps } from '@tarojs/components/types/Swiper' +import { SwiperItemProps } from '@tarojs/components/types/SwiperItem' +import { SwitchProps } from '@tarojs/components/types/Switch' +import { TextProps } from '@tarojs/components/types/Text' +import { TextareaProps } from '@tarojs/components/types/Textarea' +import { VideoProps } from '@tarojs/components/types/Video' +import { ViewProps } from '@tarojs/components/types/View' +import { VoipRoomProps } from '@tarojs/components/types/VoipRoom' +import { WebViewProps } from '@tarojs/components/types/WebView' + +// 重置react的类型 +interface SlimProps { + children?: JSXElement + class?: string + style?: string | JSX.CSSProperties | undefined + innerHTML?: string +} +/** 联合类型不能用omit（比如picker） */ +type DistributiveOmit = T extends unknown ? Omit : never + +export type RemoveReactAttribute = 'children' | 'className' | 'style' | 'key' | 'ref' | 'dangerouslySetInnerHTML' + +export type TransformReact2SolidType

> = DistributiveOmit & SlimProps & JSX.DirectiveAttributes & JSX.CustomAttributes + +type Components = (props: TransformReact2SolidType) => JSXElement; + + +/** 视图容器 */ +export declare const Block: Components +export declare const CoverImage: Components +export declare const CoverView: Components +export declare const GridView: Components +export declare const ListView: Components +export declare const MatchMedia: Components +export declare const MovableArea: Components +export declare const MovableView: Components +export declare const PageContainer: Components +export declare const RootPortal: Components +export declare const ScrollView: Components +export declare const ShareElement: Components +export declare const StickyHeader: Components +export declare const StickySection: Components +export declare const Swiper: Components +export declare const SwiperItem: Components +export declare const View: Components +/** 基础内容 */ +export declare const Icon: Components +export declare const Progress: Components +export declare const RichText: Components +export declare const Text: Components +/** 表单组件 */ +export declare const Button: Components +export declare const Checkbox: Components +export declare const CheckboxGroup: Components +export declare const Editor: Components +export declare const Form: Components +export declare const Input: Components +export declare const KeyboardAccessory: Components +export declare const Label: Components +export declare const Picker: Components +export declare const PickerView: Components +export declare const PickerViewColumn: Components +export declare const Radio: Components +export declare const RadioGroup: Components +export declare const Slider: Components +export declare const Switch: Components +export declare const Textarea: Components +/** 导航 */ +export declare const FunctionalPageNavigator: Components +export declare const Navigator: Components +export declare const NavigationBar: Components +/** 媒体组件 */ +export declare const Audio: Components +export declare const Camera: Components +export declare const ChannelLive: Components +export declare const ChannelVideo: Components +export declare const Image: Components +export declare const LivePlayer: Components +export declare const LivePusher: Components +export declare const Video: Components +export declare const VoipRoom: Components +/** 地图 */ +export declare const Map: Components +/** 画布 */ +export declare const Canvas: Components +/** 开放能力 */ +export declare const Ad: Components +export declare const AdCustom: Components +export declare const OfficialAccount: Components +export declare const OpenData: Components +export declare const WebView: Components +/** 配置节点 */ +export declare const PageMeta: Components + +export declare const CustomWrapper: Components +export declare const Slot: Components +export declare const NativeSlot: Components + +declare global { + namespace JSX { + interface IntrinsicElements { + /** 视图容器 */ + block: TransformReact2SolidType + 'taro-block-core': TransformReact2SolidType + 'cover-image': TransformReact2SolidType + 'taro-cover-image-core': TransformReact2SolidType + 'cover-view': TransformReact2SolidType + 'taro-cover-view-core': TransformReact2SolidType + 'match-media': TransformReact2SolidType + 'taro-match-media-core': TransformReact2SolidType + 'movable-area': TransformReact2SolidType + 'taro-movable-area-core': TransformReact2SolidType + 'movable-view': TransformReact2SolidType + 'taro-movable-view-core': TransformReact2SolidType + 'page-container': TransformReact2SolidType + 'taro-page-container-core': TransformReact2SolidType + 'root-portal': TransformReact2SolidType + 'taro-root-portal-core': TransformReact2SolidType + 'scroll-view': TransformReact2SolidType + 'taro-scroll-view-core': TransformReact2SolidType + swiper: TransformReact2SolidType + 'taro-swiper-core': TransformReact2SolidType + 'swiper-item': TransformReact2SolidType + 'taro-swiper-item-core': TransformReact2SolidType + view: TransformReact2SolidType + 'taro-view-core': TransformReact2SolidType + /** 基础内容 */ + icon: TransformReact2SolidType + 'taro-icon-core': TransformReact2SolidType + progress: TransformReact2SolidType + 'taro-progress-core': TransformReact2SolidType + 'rich-text': TransformReact2SolidType + 'taro-rich-text-core': TransformReact2SolidType + text: TransformReact2SolidType + 'taro-text-core': TransformReact2SolidType + /** 表单组件 */ + button: TransformReact2SolidType + 'taro-button-core': TransformReact2SolidType + checkbox: TransformReact2SolidType + 'taro-checkbox-core': TransformReact2SolidType + 'checkbox-group': TransformReact2SolidType + 'taro-checkbox-group-core': TransformReact2SolidType + editor: TransformReact2SolidType + 'taro-editor-core': TransformReact2SolidType + form: TransformReact2SolidType + 'taro-form-core': TransformReact2SolidType + input: TransformReact2SolidType + 'taro-input-core': TransformReact2SolidType + 'keyboard-accessory': TransformReact2SolidType + 'taro-keyboard-accessory-core': TransformReact2SolidType + label: TransformReact2SolidType + 'taro-label-core': TransformReact2SolidType + picker: TransformReact2SolidType + 'taro-picker-core': TransformReact2SolidType + 'picker-view': TransformReact2SolidType + 'taro-picker-view-core': TransformReact2SolidType + 'picker-view-column': TransformReact2SolidType + 'taro-picker-view-column-core': TransformReact2SolidType + radio: TransformReact2SolidType + 'taro-radio-core': TransformReact2SolidType + 'radio-group': TransformReact2SolidType + 'taro-radio-group-core': TransformReact2SolidType + slider: TransformReact2SolidType + 'taro-slider-core': TransformReact2SolidType + switch: TransformReact2SolidType + 'taro-switch-core': TransformReact2SolidType + textarea: TransformReact2SolidType + 'taro-textarea-core': TransformReact2SolidType + /** Skyline */ + 'grid-view': TransformReact2SolidType + 'taro-grid-view-core': TransformReact2SolidType + 'list-view': TransformReact2SolidType + 'taro-list-view-core': TransformReact2SolidType + 'share-element': TransformReact2SolidType + 'taro-share-element-core': TransformReact2SolidType + 'snapshot': TransformReact2SolidType + 'taro-snapshot-core': TransformReact2SolidType + 'sticky-header': TransformReact2SolidType + 'taro-sticky-header-core': TransformReact2SolidType + 'sticky-section': TransformReact2SolidType + 'taro-sticky-section-core': TransformReact2SolidType + /** 导航 */ + 'functional-page-navigator': TransformReact2SolidType + 'taro-functional-page-navigator-core': TransformReact2SolidType + navigator: TransformReact2SolidType + 'taro-navigator-core': TransformReact2SolidType + 'navigation-bar': TransformReact2SolidType + 'taro-navigation-bar-core': TransformReact2SolidType + /** 媒体组件 */ + audio: TransformReact2SolidType + 'taro-audio-core': TransformReact2SolidType + camera: TransformReact2SolidType + 'taro-camera-core': TransformReact2SolidType + 'channel-live': TransformReact2SolidType + 'taro-channel-live-core': TransformReact2SolidType + 'channel-video': TransformReact2SolidType + 'taro-channel-video-core': TransformReact2SolidType + image: TransformReact2SolidType + 'taro-image-core': TransformReact2SolidType + 'live-player': TransformReact2SolidType + 'taro-live-player-core': TransformReact2SolidType + 'live-pusher': TransformReact2SolidType + 'taro-live-pusher-core': TransformReact2SolidType + video: TransformReact2SolidType + 'taro-video-core': TransformReact2SolidType + 'voip-room': TransformReact2SolidType + 'taro-voip-room-core': TransformReact2SolidType + /** 地图 */ + map: TransformReact2SolidType + 'taro-map-core': TransformReact2SolidType + /** 画布 */ + canvas: TransformReact2SolidType + 'taro-canvas-core': TransformReact2SolidType + /** 开放能力 */ + ad: TransformReact2SolidType + 'taro-ad-core': TransformReact2SolidType + 'ad-custom': TransformReact2SolidType + 'taro-ad-custom-core': TransformReact2SolidType + 'official-account': TransformReact2SolidType + 'taro-official-account-core': TransformReact2SolidType + 'open-data': TransformReact2SolidType + 'taro-open-data-core': TransformReact2SolidType + 'web-view': TransformReact2SolidType + 'taro-web-view-core': TransformReact2SolidType + /** 配置节点 */ + 'page-meta': TransformReact2SolidType + 'taro-page-meta-core': TransformReact2SolidType + + 'custom-wrapper': TransformReact2SolidType + 'taro-custom-wrapper-core': TransformReact2SolidType + /** 为了不与vue3模板默认的slot冲突，增加 Record */ + 'slot': TransformReact2SolidType & Record + 'taro-slot-core': TransformReact2SolidType + 'native-slot': TransformReact2SolidType + 'taro-native-slot-core': TransformReact2SolidType + } + } +} + + diff --git a/packages/taro-extend/package.json b/packages/taro-extend/package.json index 9dc355cfa8a..7147870e67d 100644 --- a/packages/taro-extend/package.json +++ b/packages/taro-extend/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/extend", - "version": "4.0.4", + "version": "4.0.5", "description": "Taro extend functionality", "author": "O2Team", "license": "MIT", diff --git a/packages/taro-framework-react/package.json b/packages/taro-framework-react/package.json index a3ef57a6a1d..01b0a410722 100644 --- a/packages/taro-framework-react/package.json +++ b/packages/taro-framework-react/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/plugin-framework-react", - "version": "4.0.4", + "version": "4.0.5", "description": "React/Preact 框架插件", "author": "O2Team", "homepage": "https://github.com/nervjs/taro", diff --git a/packages/taro-framework-solid/package.json b/packages/taro-framework-solid/package.json index 6ce7f5146dd..cc774f16e23 100644 --- a/packages/taro-framework-solid/package.json +++ b/packages/taro-framework-solid/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/plugin-framework-solid", - "version": "4.0.4", + "version": "4.0.5", "description": "Solid 框架插件", "author": "drchan", "homepage": "https://github.com/nervjs/taro", diff --git a/packages/taro-framework-solid/src/webpack.mini.ts b/packages/taro-framework-solid/src/webpack.mini.ts index c720bab9274..7202bb1b74e 100644 --- a/packages/taro-framework-solid/src/webpack.mini.ts +++ b/packages/taro-framework-solid/src/webpack.mini.ts @@ -1,5 +1,3 @@ -import { defaultMainFields, resolveSync } from '@tarojs/helper' - import { RECONCILER_NAME } from './constant' import { getLoaderMeta } from './loader-meta' @@ -10,14 +8,7 @@ export function modifyMiniWebpackChain (chain) { function setAlias (chain) { const alias = chain.resolve.alias - const mainFields = ['unpkg', ...defaultMainFields] - const resolveOptions = { - basedir: process.cwd(), - mainFields, - } alias.set('solid-js/web$', RECONCILER_NAME) - // Note: 本地 link 调试时，避免 solid 重复打包 - alias.set('solid-js$', resolveSync('solid-js', resolveOptions)) } function setLoader (chain) { diff --git a/packages/taro-framework-vue3/package.json b/packages/taro-framework-vue3/package.json index e217afe5cff..a737b18f937 100644 --- a/packages/taro-framework-vue3/package.json +++ b/packages/taro-framework-vue3/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/plugin-framework-vue3", - "version": "4.0.4", + "version": "4.0.5", "description": "Vue3 框架插件", "author": "O2Team", "homepage": "https://github.com/nervjs/taro", diff --git a/packages/taro-h5/__mocks__/swiper/bundle.ts b/packages/taro-h5/__mocks__/swiper/bundle.ts new file mode 100644 index 00000000000..62640385c7c --- /dev/null +++ b/packages/taro-h5/__mocks__/swiper/bundle.ts @@ -0,0 +1,181 @@ +/* eslint-disable @typescript-eslint/no-unused-vars */ +import { A11yMethods } from 'swiper/types/modules/a11y' +import { AutoplayMethods } from 'swiper/types/modules/autoplay' +import { ControllerMethods } from 'swiper/types/modules/controller' +import { CardsEffectMethods } from 'swiper/types/modules/effect-cards' +import { CoverflowEffectMethods } from 'swiper/types/modules/effect-coverflow' +import { CreativeEffectMethods } from 'swiper/types/modules/effect-creative' +import { CubeEffectMethods } from 'swiper/types/modules/effect-cube' +import { FadeEffectMethods } from 'swiper/types/modules/effect-fade' +import { FlipEffectMethods } from 'swiper/types/modules/effect-flip' +import { FreeModeMethods } from 'swiper/types/modules/free-mode' +import { HashNavigationMethods } from 'swiper/types/modules/hash-navigation' +import { HistoryMethods } from 'swiper/types/modules/history' +import { KeyboardMethods } from 'swiper/types/modules/keyboard' +import { MousewheelMethods } from 'swiper/types/modules/mousewheel' +import { NavigationMethods } from 'swiper/types/modules/navigation' +import { PaginationMethods } from 'swiper/types/modules/pagination' +import { ParallaxMethods } from 'swiper/types/modules/parallax' +import { ScrollbarMethods } from 'swiper/types/modules/scrollbar' +import { ThumbsMethods } from 'swiper/types/modules/thumbs' +import { VirtualMethods } from 'swiper/types/modules/virtual' +import { ZoomMethods } from 'swiper/types/modules/zoom' +import { SwiperEvents } from 'swiper/types/swiper-events' +import { SwiperOptions } from 'swiper/types/swiper-options' + +import type ISwiper from 'swiper/types/swiper-class' + +export default class Swiper implements ISwiper { + originalParams: SwiperOptions + loopedSlides: number | null + snapIndex: number + snapGrid: number[] + isLocked: boolean + swipeDirection: 'next' | 'prev' + slidesPerViewDynamic (): number { + throw new Error('Method not implemented.') + } + + changeLanguageDirection (direction: 'rtl' | 'ltr'): void { + throw new Error('Method not implemented.') + } + + loopCreate (): void { + throw new Error('Method not implemented.') + } + + loopDestroy (): void { + throw new Error('Method not implemented.') + } + + init (el?: HTMLElement | undefined): ISwiper { + throw new Error('Method not implemented.') + } + + creativeEffect: CreativeEffectMethods + cardsEffect: CardsEffectMethods + freeMode: FreeModeMethods + params: SwiperOptions + el: HTMLElement + wrapperEl: HTMLElement + slides + width: number + height: number + translate: number + progress: number + activeIndex: number + realIndex: number + previousIndex: number + isBeginning: boolean + isEnd: boolean + animating: boolean + touches: { startX: number, startY: number, currentX: number, currentY: number, diff: number } + clickedIndex: number + clickedSlide: HTMLElement + allowSlideNext: boolean + allowSlidePrev: boolean + allowTouchMove: boolean + rtlTranslate: boolean + disable (): void {} + + enable (): void {} + + setProgress (progress: number, speed?: number | undefined): void {} + + slideNext (speed?: number | undefined, runCallbacks?: boolean | undefined): void {} + + slidePrev (speed?: number | undefined, runCallbacks?: boolean | undefined): void {} + + slideTo (index: number, speed?: number | undefined, runCallbacks?: boolean | undefined): void {} + + slideToLoop (index: number, speed?: number | undefined, runCallbacks?: boolean | undefined): void {} + + slideReset (speed?: number | undefined, runCallbacks?: boolean | undefined): void {} + + slideToClosest (speed?: number | undefined, runCallbacks?: boolean | undefined): void {} + + updateAutoHeight (speed?: number | undefined): void {} + + update (): void {} + + updateSize (): void {} + + updateSlides (): void {} + + updateProgress (): void {} + + updateSlidesClasses (): void {} + + changeDirection (direction?: 'horizontal' | 'vertical' | undefined, needUpdate?: boolean | undefined): void {} + + detachEvents (): void {} + + attachEvents (): void {} + + destroy (deleteInstance?: boolean | undefined, cleanStyles?: boolean | undefined): void {} + + appendSlide (slides: string | HTMLElement | string[] | HTMLElement[]): void {} + + prependSlide (slides: string | HTMLElement | string[] | HTMLElement[]): void {} + + addSlide (index: number, slides: string | HTMLElement | string[] | HTMLElement[]): void {} + + removeSlide (slideIndex: number | number[]): void {} + + removeAllSlides (): void {} + + setTranslate (translate: any): void {} + + getTranslate () {} + + translateTo (translate: number, speed: number, runCallbacks?: boolean | undefined, translateBounds?: boolean | undefined) {} + + unsetGrabCursor (): void {} + + setGrabCursor (): void {} + + onAny (handler: (eventName: string, ...args: any[]) => void): void {} + + offAny (handler: (eventName: string, ...args: any[]) => void): void {} + + isHorizontal (): boolean { + return false + } + + getBreakpoint (breakpoints: { [width: number]: SwiperOptions, [ratio: string]: SwiperOptions } | undefined): string { + return '' + } + + setBreakpoint (): void {} + + currentBreakpoint: any + destroyed: boolean + modules: any[] + a11y: A11yMethods + autoplay: AutoplayMethods + controller: ControllerMethods + coverflowEffect: CoverflowEffectMethods + cubeEffect: CubeEffectMethods + fadeEffect: FadeEffectMethods + flipEffect: FlipEffectMethods + hashNavigation: HashNavigationMethods + history: HistoryMethods + keyboard: KeyboardMethods + mousewheel: MousewheelMethods + navigation: NavigationMethods + pagination: PaginationMethods + parallax: ParallaxMethods + scrollbar: ScrollbarMethods + thumbs: ThumbsMethods + virtual: VirtualMethods + zoom: ZoomMethods + on (event: E, handler: SwiperEvents[E]): void {} + + once (event: E, handler: SwiperEvents[E]): void {} + + off (event: E, handler: SwiperEvents[E]): void; + off (event: E): void; + off (event: unknown, handler?: unknown): void {} + + emit (event: E, ...args: any[]): void {} +} diff --git a/packages/taro-h5/package.json b/packages/taro-h5/package.json index 8ef42baff9b..5b7694647c5 100644 --- a/packages/taro-h5/package.json +++ b/packages/taro-h5/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/taro-h5", - "version": "4.0.4", + "version": "4.0.5", "description": "Taro h5 framework", "browser": "dist/index.js", "main:h5": "dist/index.esm.js", @@ -66,6 +66,7 @@ "jest-transform-css": "^6.0.1", "mock-socket": "^7.1.0", "react": "^18.2.0", + "swiper": "11.1.0", "react-test-renderer": "^18.2.0", "rollup": "^3.29.4", "rollup-plugin-node-externals": "^5.0.0", diff --git a/packages/taro-helper/package.json b/packages/taro-helper/package.json index 485725c176e..63460f93e58 100644 --- a/packages/taro-helper/package.json +++ b/packages/taro-helper/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/helper", - "version": "4.0.4", + "version": "4.0.5", "description": "Taro Helper", "author": "O2Team", "license": "MIT", diff --git a/packages/taro-loader/package.json b/packages/taro-loader/package.json index 6081182cf05..3a0277f46f8 100644 --- a/packages/taro-loader/package.json +++ b/packages/taro-loader/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/taro-loader", - "version": "4.0.4", + "version": "4.0.5", "description": "Taro runner use webpack loader", "author": "O2Team", "license": "MIT", diff --git a/packages/taro-platform-alipay/package.json b/packages/taro-platform-alipay/package.json index 3658db9fb08..8aaeb41f539 100644 --- a/packages/taro-platform-alipay/package.json +++ b/packages/taro-platform-alipay/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/plugin-platform-alipay", - "version": "4.0.4", + "version": "4.0.5", "description": "支付宝小程序平台插件", "author": "O2Team", "license": "MIT", diff --git a/packages/taro-platform-h5/package.json b/packages/taro-platform-h5/package.json index 78c631cce27..d7513195ca7 100644 --- a/packages/taro-platform-h5/package.json +++ b/packages/taro-platform-h5/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/plugin-platform-h5", - "version": "4.0.4", + "version": "4.0.5", "description": "Web 端平台插件", "author": "O2Team", "license": "MIT", diff --git a/packages/taro-platform-harmony-hybrid/package.json b/packages/taro-platform-harmony-hybrid/package.json index f6ce980a2a0..35ad1426c4e 100644 --- a/packages/taro-platform-harmony-hybrid/package.json +++ b/packages/taro-platform-harmony-hybrid/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/plugin-platform-harmony-hybrid", - "version": "4.0.4", + "version": "4.0.5", "description": "Harmony 端平台插件", "author": "O2Team", "license": "MIT", diff --git a/packages/taro-platform-harmony-hybrid/src/api/apis/NativeApi.ts b/packages/taro-platform-harmony-hybrid/src/api/apis/NativeApi.ts index e1ed2f0cc34..28e7a4f8ee1 100644 --- a/packages/taro-platform-harmony-hybrid/src/api/apis/NativeApi.ts +++ b/packages/taro-platform-harmony-hybrid/src/api/apis/NativeApi.ts @@ -1,6 +1,6 @@ // import {timeLog} from "./NativeApiLog"; import { syncApiCache } from './harmony-native/ApiCache' -import { asyncAndNotRelease, asyncAndRelease, syncAndRelease } from './harmony-native/ApiDecorator' +import { asyncAndNotRelease, asyncAndRelease, syncAndNotRelease, syncAndRelease } from './harmony-native/ApiDecorator' import { storageCacheAndSyncProxy } from './harmony-native/StorageCacheAndSyncProxy' import { NativeDataChangeListener, SyncCacheProxyHandler } from './NativeApiSyncCacheProxy' @@ -627,6 +627,12 @@ export class NativeApi { exitMiniProgram (option?: any): any { return option } + + @(syncAndNotRelease) + onStorageStatusChange (_options: any): void {} + + @(syncAndNotRelease) + offStorageStatusChange (_options: any): void {} } export interface Status { diff --git a/packages/taro-platform-harmony-hybrid/src/api/apis/harmony-native/ApiDecorator.ts b/packages/taro-platform-harmony-hybrid/src/api/apis/harmony-native/ApiDecorator.ts index f343d931691..8d427ed28ad 100644 --- a/packages/taro-platform-harmony-hybrid/src/api/apis/harmony-native/ApiDecorator.ts +++ b/packages/taro-platform-harmony-hybrid/src/api/apis/harmony-native/ApiDecorator.ts @@ -2,7 +2,7 @@ export const syncAndRelease = window.MethodChannel && window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true }) || (target => target) // @ts-ignore -// const syncAndNotRelease = window.MethodChannel && window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: false }) || (target => target) +export const syncAndNotRelease = window.MethodChannel && window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: false }) || (target => target) // @ts-ignore export const asyncAndRelease = window.MethodChannel && window.MethodChannel.jsBridgeMode({ isAsync: true, autoRelease: true }) || (target => target) diff --git a/packages/taro-platform-harmony-hybrid/src/api/apis/harmony-native/StorageCacheAndSyncProxy.ts b/packages/taro-platform-harmony-hybrid/src/api/apis/harmony-native/StorageCacheAndSyncProxy.ts index c2edd9ae56c..93f0d9e06b0 100644 --- a/packages/taro-platform-harmony-hybrid/src/api/apis/harmony-native/StorageCacheAndSyncProxy.ts +++ b/packages/taro-platform-harmony-hybrid/src/api/apis/harmony-native/StorageCacheAndSyncProxy.ts @@ -1,3 +1,4 @@ +const TYPE_STORAGE_UPDATE_EVENT_CLEAR = 'TYPE_STORAGE_UPDATE_EVENT_CLEAR' class ProxyHandler { private cacheMap: Map private pageHasShowed: boolean = false @@ -28,6 +29,14 @@ class ProxyHandler { }) }, 2000) }) + + native.onStorageStatusChange((type: string, key: string) => { + if (type === TYPE_STORAGE_UPDATE_EVENT_CLEAR) { + this.cacheMap.clear() + } else { + this.cacheMap.delete(key) + } + }) } get (target, propKey, receiver) { diff --git a/packages/taro-platform-harmony-hybrid/src/components/react/index.ts b/packages/taro-platform-harmony-hybrid/src/components/react/index.ts index 7e0723d1de6..9cccfd478a0 100644 --- a/packages/taro-platform-harmony-hybrid/src/components/react/index.ts +++ b/packages/taro-platform-harmony-hybrid/src/components/react/index.ts @@ -43,7 +43,7 @@ export { Navigator } from '@tarojs/components/lib/react' export { OfficialAccount } from '@tarojs/components/lib/react' export { OpenData } from '@tarojs/components/lib/react' export { PageMeta } from '@tarojs/components/lib/react' -export { Picker, PickerGroup } from '@tarojs/components/lib/react' +export { Picker } from '@tarojs/components/lib/react' export { PickerView, PickerViewColumn } from '@tarojs/components/lib/react' export { Progress } from '@tarojs/components/lib/react' export { PullToRefresh } from '@tarojs/components/lib/react' @@ -56,11 +56,10 @@ export { Slider } from '@tarojs/components/lib/react' export { NativeSlot, Slot } from '@tarojs/components/lib/react' export { Swiper, SwiperItem } from '@tarojs/components/lib/react' export { Switch } from '@tarojs/components/lib/react' -export { Tabbar, TabItem } from '@tarojs/components/lib/react' export { Tabs } from '@tarojs/components/lib/react' export { Text } from '@tarojs/components/lib/react' export { Textarea } from '@tarojs/components/lib/react' -export { Video, VideoControl, VideoDanmu } from '@tarojs/components/lib/react' +export { Video } from '@tarojs/components/lib/react' export { View } from '@tarojs/components/lib/react' export { VoipRoom } from '@tarojs/components/lib/react' export { WebView } from '@tarojs/components/lib/react' diff --git a/packages/taro-platform-harmony-hybrid/src/components/vue3/index.ts b/packages/taro-platform-harmony-hybrid/src/components/vue3/index.ts index d46811a5b4a..2c59f0f9b40 100644 --- a/packages/taro-platform-harmony-hybrid/src/components/vue3/index.ts +++ b/packages/taro-platform-harmony-hybrid/src/components/vue3/index.ts @@ -42,7 +42,7 @@ export { Navigator } from '@tarojs/components/lib/vue3' export { OfficialAccount } from '@tarojs/components/lib/vue3' export { OpenData } from '@tarojs/components/lib/vue3' export { PageMeta } from '@tarojs/components/lib/vue3' -export { Picker, PickerGroup } from '@tarojs/components/lib/vue3' +export { Picker } from '@tarojs/components/lib/vue3' export { PickerView, PickerViewColumn } from '@tarojs/components/lib/vue3' export { Progress } from '@tarojs/components/lib/vue3' export { PullToRefresh } from '@tarojs/components/lib/vue3' @@ -55,11 +55,11 @@ export { Slider } from '@tarojs/components/lib/vue3' export { NativeSlot, Slot } from '@tarojs/components/lib/vue3' export { Swiper, SwiperItem } from '@tarojs/components/lib/vue3' export { Switch } from '@tarojs/components/lib/vue3' -export { Tabbar, TabItem } from '@tarojs/components/lib/vue3' +// export { Tabbar, TabItem } from '@tarojs/components/lib/vue3' export { Tabs } from '@tarojs/components/lib/vue3' export { Text } from '@tarojs/components/lib/vue3' export { Textarea } from '@tarojs/components/lib/vue3' -export { Video, VideoControl, VideoDanmu } from '@tarojs/components/lib/vue3' +export { Video } from '@tarojs/components/lib/vue3' export { View } from '@tarojs/components/lib/vue3' export { VoipRoom } from '@tarojs/components/lib/vue3' export { WebView } from '@tarojs/components/lib/vue3' diff --git a/packages/taro-platform-harmony-hybrid/types/component.d.ts b/packages/taro-platform-harmony-hybrid/types/component.d.ts index 71b07c3852c..08adf62ca2f 100644 --- a/packages/taro-platform-harmony-hybrid/types/component.d.ts +++ b/packages/taro-platform-harmony-hybrid/types/component.d.ts @@ -4,3 +4,11 @@ declare module '@tarojs/components/dist/components' { export * from '@tarojs/components/dist/components' } + +declare module '@tarojs/components/lib/vue3' { + export * from '@tarojs/components' +} + +declare module '@tarojs/components/lib/react' { + export * from '@tarojs/components' +} \ No newline at end of file diff --git a/packages/taro-platform-harmony/package.json b/packages/taro-platform-harmony/package.json index 0a7a8e1aec1..d0e58c130de 100644 --- a/packages/taro-platform-harmony/package.json +++ b/packages/taro-platform-harmony/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/plugin-platform-harmony-ets", - "version": "4.0.4", + "version": "4.0.5", "description": "OpenHarmony & 鸿蒙系统插件", "author": "O2Team", "homepage": "https://gitee.com/openharmony-sig/taro", diff --git a/packages/taro-platform-jd/package.json b/packages/taro-platform-jd/package.json index 4fa11631682..46a48bb1fa0 100644 --- a/packages/taro-platform-jd/package.json +++ b/packages/taro-platform-jd/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/plugin-platform-jd", - "version": "4.0.4", + "version": "4.0.5", "description": "京东小程序平台插件", "author": "O2Team", "license": "MIT", diff --git a/packages/taro-platform-jd/rollup.config.mjs b/packages/taro-platform-jd/rollup.config.mjs index 8531851d8f9..f2de662ed82 100644 --- a/packages/taro-platform-jd/rollup.config.mjs +++ b/packages/taro-platform-jd/rollup.config.mjs @@ -1,6 +1,7 @@ import * as path from 'node:path' import { fileURLToPath } from 'node:url' +import { nodeResolve } from '@rollup/plugin-node-resolve' import typescript from '@rollup/plugin-typescript' import externals from 'rollup-plugin-node-externals' @@ -9,6 +10,7 @@ const cwd = path.dirname(__filename) const base = { plugins: [ + nodeResolve(), externals({ peerDeps: true, }), diff --git a/packages/taro-platform-jd/src/components-react.ts b/packages/taro-platform-jd/src/components-react.ts index c9bc9c15782..9fd382a64b8 100644 --- a/packages/taro-platform-jd/src/components-react.ts +++ b/packages/taro-platform-jd/src/components-react.ts @@ -1,4 +1,5 @@ // For React.createElement's type export * from '@tarojs/components/mini' export const Editor = 'editor' - +export const PageContainer = 'page-container' +export const RootPortal = 'root-portal' diff --git a/packages/taro-platform-jd/src/components.ts b/packages/taro-platform-jd/src/components.ts index 5bc9da815be..fe021ea580f 100644 --- a/packages/taro-platform-jd/src/components.ts +++ b/packages/taro-platform-jd/src/components.ts @@ -25,4 +25,39 @@ export const components = { 'adjust-position': 'true', 'disable-default-padding': 'false', }, + RootPortal: { + enable: 'true' + }, + Editor: { + 'read-only': 'false', + placeholder: '', + 'show-img-size': 'false', + 'show-img-toolbar': 'false', + 'show-img-resize': 'false', + focus: 'false', + bindReady: '', + bindFocus: '', + bindBlur: '', + bindInput: '', + bindStatusChange: '', + name: '' + }, + PageContainer: { + show: 'false', + duration: '300', + 'z-index': '100', + overlay: 'true', + position: "'bottom'", + round: 'false', + 'close-on-slide-down': 'false', + 'overlay-style': '', + 'custom-style': '', + bindBeforeEnter: '', + bindEnter: '', + bindAfterEnter: '', + bindBeforeLeave: '', + bindLeave: '', + bindAfterLeave: '', + bindClickOverlay: '' + }, } diff --git a/packages/taro-platform-qq/package.json b/packages/taro-platform-qq/package.json index 230de48696e..c60e8659447 100644 --- a/packages/taro-platform-qq/package.json +++ b/packages/taro-platform-qq/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/plugin-platform-qq", - "version": "4.0.4", + "version": "4.0.5", "description": "QQ 小程序平台插件", "author": "O2Team", "license": "MIT", diff --git a/packages/taro-platform-swan/package.json b/packages/taro-platform-swan/package.json index 81b6c978a74..70830285052 100644 --- a/packages/taro-platform-swan/package.json +++ b/packages/taro-platform-swan/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/plugin-platform-swan", - "version": "4.0.4", + "version": "4.0.5", "description": "百度小程序平台插件", "author": "O2Team", "license": "MIT", diff --git a/packages/taro-platform-tt/package.json b/packages/taro-platform-tt/package.json index 3006d6d0419..078d9038e04 100644 --- a/packages/taro-platform-tt/package.json +++ b/packages/taro-platform-tt/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/plugin-platform-tt", - "version": "4.0.4", + "version": "4.0.5", "description": "头条小程序平台插件", "author": "O2Team", "license": "MIT", diff --git a/packages/taro-platform-weapp/package.json b/packages/taro-platform-weapp/package.json index 5ca14768ba8..14edcf80c12 100644 --- a/packages/taro-platform-weapp/package.json +++ b/packages/taro-platform-weapp/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/plugin-platform-weapp", - "version": "4.0.4", + "version": "4.0.5", "description": "微信小程序平台插件", "author": "O2Team", "license": "MIT", diff --git a/packages/taro-plugin-html/package.json b/packages/taro-plugin-html/package.json index d36172cfe7a..d5094866188 100644 --- a/packages/taro-plugin-html/package.json +++ b/packages/taro-plugin-html/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/plugin-html", - "version": "4.0.4", + "version": "4.0.5", "description": "Taro 小程序端支持使用 HTML 标签的插件", "author": "O2Team", "license": "MIT", diff --git a/packages/taro-plugin-http/package.json b/packages/taro-plugin-http/package.json index ea4b3c2ce2d..74d697d7198 100644 --- a/packages/taro-plugin-http/package.json +++ b/packages/taro-plugin-http/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/plugin-http", - "version": "4.0.4", + "version": "4.0.5", "description": "Taro 小程序端支持使用 web 请求 的插件", "author": "O2Team", "license": "MIT", diff --git a/packages/taro-plugin-inject/package.json b/packages/taro-plugin-inject/package.json index bebffa0d039..a1ebdfe7805 100644 --- a/packages/taro-plugin-inject/package.json +++ b/packages/taro-plugin-inject/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/plugin-inject", - "version": "4.0.4", + "version": "4.0.5", "description": "Taro 小程序端平台中间层插件", "author": "O2Team", "homepage": "https://github.com/nervjs/taro", diff --git a/packages/taro-plugin-mini-ci/package.json b/packages/taro-plugin-mini-ci/package.json index e15f8022c20..6e8a49e76db 100644 --- a/packages/taro-plugin-mini-ci/package.json +++ b/packages/taro-plugin-mini-ci/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/plugin-mini-ci", - "version": "4.0.4", + "version": "4.0.5", "description": "Taro 小程序端构建后支持CI（持续集成）的插件", "keywords": [ "Taro", diff --git a/packages/taro-plugin-react-devtools/package.json b/packages/taro-plugin-react-devtools/package.json index 2258b4f6655..5e09b9274c3 100644 --- a/packages/taro-plugin-react-devtools/package.json +++ b/packages/taro-plugin-react-devtools/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/plugin-react-devtools", - "version": "4.0.4", + "version": "4.0.5", "description": "Taro 小程序端支持使用 React DevTools 的插件", "author": "O2Team", "license": "MIT", diff --git a/packages/taro-plugin-vue-devtools/package.json b/packages/taro-plugin-vue-devtools/package.json index a29f2d41535..5b4566600fb 100644 --- a/packages/taro-plugin-vue-devtools/package.json +++ b/packages/taro-plugin-vue-devtools/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/plugin-vue-devtools", - "version": "4.0.4", + "version": "4.0.5", "description": "Taro 小程序端支持使用 Vue DevTools 的插件", "author": "O2Team", "license": "MIT", diff --git a/packages/taro-react/package.json b/packages/taro-react/package.json index 0305bb0c522..2b97ade8528 100644 --- a/packages/taro-react/package.json +++ b/packages/taro-react/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/react", - "version": "4.0.4", + "version": "4.0.5", "description": "like react-dom, but for mini apps.", "author": "O2Team", "license": "MIT", diff --git a/packages/taro-rn-runner/package.json b/packages/taro-rn-runner/package.json index 727de8f93b9..fdcb61a617c 100644 --- a/packages/taro-rn-runner/package.json +++ b/packages/taro-rn-runner/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/rn-runner", - "version": "4.0.4", + "version": "4.0.5", "description": "ReactNative build tool for taro", "author": "O2Team", "license": "MIT", diff --git a/packages/taro-rn-style-transformer/package.json b/packages/taro-rn-style-transformer/package.json index d4ac34fe2e3..658e87ea280 100644 --- a/packages/taro-rn-style-transformer/package.json +++ b/packages/taro-rn-style-transformer/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/rn-style-transformer", - "version": "4.0.4", + "version": "4.0.5", "description": "提供 Taro RN 统一处理样式文件能力", "author": "O2Team", "license": "MIT", diff --git a/packages/taro-rn-style-transformer/src/transforms/StyleSheet/ImageStylePropTypes.ts b/packages/taro-rn-style-transformer/src/transforms/StyleSheet/ImageStylePropTypes.ts index 6fdc6b07a27..a4aa8e4b3d5 100644 --- a/packages/taro-rn-style-transformer/src/transforms/StyleSheet/ImageStylePropTypes.ts +++ b/packages/taro-rn-style-transformer/src/transforms/StyleSheet/ImageStylePropTypes.ts @@ -27,7 +27,9 @@ const ImageStylePropTypes = { borderColor: ColorPropType, borderWidth: ReactPropTypes.number, borderRadius: ReactPropTypes.number, + cursor: ReactPropTypes.oneOf(['auto', 'pointer']), overflow: ReactPropTypes.oneOf(['visible', 'hidden']), + objectFit: ReactPropTypes.oneOf(['cover', 'contain', 'fill', 'scale-down']), /** * Changes the color of all the non-transparent pixels to the tintColor. diff --git a/packages/taro-rn-style-transformer/src/transforms/StyleSheet/LayoutPropTypes.ts b/packages/taro-rn-style-transformer/src/transforms/StyleSheet/LayoutPropTypes.ts index 17a25237c26..76c444e4ff5 100644 --- a/packages/taro-rn-style-transformer/src/transforms/StyleSheet/LayoutPropTypes.ts +++ b/packages/taro-rn-style-transformer/src/transforms/StyleSheet/LayoutPropTypes.ts @@ -395,7 +395,7 @@ const LayoutPropTypes = { * for more details on how `position` differs between React Native * and CSS. */ - position: ReactPropTypes.oneOf(['absolute', 'relative']), + position: ReactPropTypes.oneOf(['absolute', 'relative', 'static']), /** `flexDirection` controls which directions children of a container go. * `row` goes left to right, `column` goes top to bottom, and you may @@ -476,7 +476,8 @@ const LayoutPropTypes = { 'center', 'stretch', 'space-between', - 'space-around' + 'space-around', + 'space-evenly' ]), /** `overflow` controls how children are measured and displayed. @@ -553,7 +554,29 @@ const LayoutPropTypes = { * for more details. * @platform ios */ - direction: ReactPropTypes.oneOf(['inherit', 'ltr', 'rtl']) + direction: ReactPropTypes.oneOf(['inherit', 'ltr', 'rtl']), + + /** + * In React Native, gap works the same way it does in CSS. + * If there are two or more children in a container, they will be separated from each other + * by the value of the gap - but the children will not be separated from the edges of their parent container. + * For horizontal gaps, use columnGap, for vertical gaps, use rowGap, and to apply both at the same time, it's gap. + * When align-content or justify-content are set to space-between or space-around, the separation + * between children may be larger than the gap value. + * See https://developer.mozilla.org/en-US/docs/Web/CSS/gap for more details. + */ + rowGap: ReactPropTypes.oneOfType([ + ReactPropTypes.number, + ReactPropTypes.string + ]), + columnGap: ReactPropTypes.oneOfType([ + ReactPropTypes.number, + ReactPropTypes.string + ]), + gap: ReactPropTypes.oneOfType([ + ReactPropTypes.number, + ReactPropTypes.string + ]), } export default LayoutPropTypes diff --git a/packages/taro-rn-style-transformer/src/transforms/StyleSheet/TextStylePropTypes.ts b/packages/taro-rn-style-transformer/src/transforms/StyleSheet/TextStylePropTypes.ts index a162b368e86..3ac07e4f1f5 100644 --- a/packages/taro-rn-style-transformer/src/transforms/StyleSheet/TextStylePropTypes.ts +++ b/packages/taro-rn-style-transformer/src/transforms/StyleSheet/TextStylePropTypes.ts @@ -38,29 +38,24 @@ const TextStylePropTypes = { '600', '700', '800', - '900' + '900', + 'ultralight', + 'thin', + 'light', + 'medium', + 'regular', + 'semibold', + 'condensedBold', + 'condensed', + 'heavy', + 'black' ]), - /** - * @platform ios - */ - fontVariant: ReactPropTypes.arrayOf( - ReactPropTypes.oneOf([ - 'small-caps', - 'oldstyle-nums', - 'lining-nums', - 'tabular-nums', - 'proportional-nums' - ]) - ), textShadowOffset: ReactPropTypes.shape({ width: ReactPropTypes.number, height: ReactPropTypes.number }), textShadowRadius: ReactPropTypes.number, textShadowColor: ColorPropType, - /** - * @platform ios - */ letterSpacing: ReactPropTypes.number, lineHeight: ReactPropTypes.number, /** @@ -68,57 +63,54 @@ const TextStylePropTypes = { * fallbacks to `left` on Android. */ textAlign: ReactPropTypes.oneOf([ - 'auto' /* default */, + 'auto', 'left', 'right', 'center', 'justify' ]), - /** - * @platform android - */ - textAlignVertical: ReactPropTypes.oneOf([ - 'auto' /* default */, - 'top', - 'bottom', - 'center' - ]), - /** - * Set to `false` to remove extra font padding intended to make space for certain ascenders / descenders. - * With some fonts, this padding can make text look slightly misaligned when centered vertically. - * For best results also set `textAlignVertical` to `center`. Default is true. - * @platform android - */ - includeFontPadding: ReactPropTypes.bool, textDecorationLine: ReactPropTypes.oneOf([ - 'none' /* default */, + 'none', 'underline', 'line-through', 'underline line-through' ]), + textTransform: ReactPropTypes.oneOf(['none', 'capitalize', 'uppercase', 'lowercase']), + userSelect: ReactPropTypes.oneOf(['auto', 'none', 'text', 'contain', 'all']), + /** * @platform ios */ + fontVariant: ReactPropTypes.arrayOf( + ReactPropTypes.oneOf([ + 'small-caps', + 'oldstyle-nums', + 'lining-nums', + 'tabular-nums', + 'proportional-nums' + ]) + ), + textDecorationColor: ColorPropType, textDecorationStyle: ReactPropTypes.oneOf([ 'solid' /* default */, 'double', 'dotted', 'dashed' ]), + writingDirection: ReactPropTypes.oneOf(['auto' /* default */, 'ltr', 'rtl']), + /** - * @platform ios + * @platform android */ - textDecorationColor: ColorPropType, - textTransform: ReactPropTypes.oneOf([ - 'none' /* default */, - 'capitalize', - 'uppercase', - 'lowercase' - ]), + textAlignVertical: ReactPropTypes.oneOf(['auto', 'top', 'bottom', 'center']), + verticalAlign: ReactPropTypes.oneOf(['auto', 'top', 'bottom', 'middle']), /** - * @platform ios + * Set to `false` to remove extra font padding intended to make space for certain ascenders / descenders. + * With some fonts, this padding can make text look slightly misaligned when centered vertically. + * For best results also set `textAlignVertical` to `center`. Default is true. + * @platform android */ - writingDirection: ReactPropTypes.oneOf(['auto' /* default */, 'ltr', 'rtl']) + includeFontPadding: ReactPropTypes.bool, } export default TextStylePropTypes diff --git a/packages/taro-rn-style-transformer/src/transforms/StyleSheet/TransformPropTypes.ts b/packages/taro-rn-style-transformer/src/transforms/StyleSheet/TransformPropTypes.ts index f9277f6b51c..eecf88713ce 100644 --- a/packages/taro-rn-style-transformer/src/transforms/StyleSheet/TransformPropTypes.ts +++ b/packages/taro-rn-style-transformer/src/transforms/StyleSheet/TransformPropTypes.ts @@ -73,6 +73,15 @@ const TransformPropTypes = { ReactPropTypes.shape({ skewY: ReactPropTypes.string }) ]) ), + transformOrigin: ReactPropTypes.oneOfType([ + ReactPropTypes.arrayOf( + ReactPropTypes.oneOfType([ + ReactPropTypes.number, + ReactPropTypes.string + ]) + ), + ReactPropTypes.string + ]), /** * Deprecated. Use the transform prop instead. diff --git a/packages/taro-rn-style-transformer/src/transforms/StyleSheet/ViewStylePropTypes.ts b/packages/taro-rn-style-transformer/src/transforms/StyleSheet/ViewStylePropTypes.ts index 977835c8919..0452f908ebc 100644 --- a/packages/taro-rn-style-transformer/src/transforms/StyleSheet/ViewStylePropTypes.ts +++ b/packages/taro-rn-style-transformer/src/transforms/StyleSheet/ViewStylePropTypes.ts @@ -27,6 +27,9 @@ const ViewStylePropTypes = { backfaceVisibility: ReactPropTypes.oneOf(['visible', 'hidden']), backgroundColor: ColorPropType, borderColor: ColorPropType, + borderBlockColor: ColorPropType, + borderBlockStartColor: ColorPropType, + borderBlockEndColor: ColorPropType, borderTopColor: ColorPropType, borderRightColor: ColorPropType, borderBottomColor: ColorPropType, @@ -42,6 +45,10 @@ const ViewStylePropTypes = { borderBottomRightRadius: ReactPropTypes.number, borderBottomStartRadius: ReactPropTypes.number, borderBottomEndRadius: ReactPropTypes.number, + borderStartStartRadius: ReactPropTypes.number, + borderStartEndRadius: ReactPropTypes.number, + borderEndStartRadius: ReactPropTypes.number, + borderEndEndRadius: ReactPropTypes.number, borderStyle: ReactPropTypes.oneOf(['solid', 'dotted', 'dashed']), borderWidth: ReactPropTypes.number, borderTopWidth: ReactPropTypes.number, @@ -49,6 +56,9 @@ const ViewStylePropTypes = { borderBottomWidth: ReactPropTypes.number, borderLeftWidth: ReactPropTypes.number, opacity: ReactPropTypes.number, + pointerEvents: ReactPropTypes.oneOf(['box-none', 'none', 'box-only', 'auto']), + cursor: ReactPropTypes.oneOf(['auto', 'pointer']), + /** * (Android-only) Sets the elevation of a view, using Android's underlying * [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation). @@ -56,7 +66,13 @@ const ViewStylePropTypes = { * Only supported on Android 5.0+, has no effect on earlier versions. * @platform android */ - elevation: ReactPropTypes.number + elevation: ReactPropTypes.number, + + /** + * On iOS 13+, it is possible to change the corner curve of borders. + * @platform ios + */ + borderCurve: ReactPropTypes.oneOf(['circular', 'continuous']) } export default ViewStylePropTypes diff --git a/packages/taro-rn-supporter/package.json b/packages/taro-rn-supporter/package.json index c8fad2ee1a5..3467b2d7c7b 100644 --- a/packages/taro-rn-supporter/package.json +++ b/packages/taro-rn-supporter/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/rn-supporter", - "version": "4.0.4", + "version": "4.0.5", "description": "Taro rn supporter", "author": "O2Team", "license": "MIT", diff --git a/packages/taro-rn-transformer/package.json b/packages/taro-rn-transformer/package.json index 6832b8f3adc..cb92cf79247 100644 --- a/packages/taro-rn-transformer/package.json +++ b/packages/taro-rn-transformer/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/rn-transformer", - "version": "4.0.4", + "version": "4.0.5", "description": "Taro RN 入口文件处理", "author": "O2Team", "license": "MIT", diff --git a/packages/taro-rn/package.json b/packages/taro-rn/package.json index 529d12af4f6..fc5d51ab74e 100644 --- a/packages/taro-rn/package.json +++ b/packages/taro-rn/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/taro-rn", - "version": "4.0.4", + "version": "4.0.5", "description": "Taro RN framework", "author": "O2Team", "license": "MIT", diff --git a/packages/taro-router-rn/package.json b/packages/taro-router-rn/package.json index 8c58a50f45d..ee45bfc4c71 100644 --- a/packages/taro-router-rn/package.json +++ b/packages/taro-router-rn/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/router-rn", - "version": "4.0.4", + "version": "4.0.5", "description": "Taro-router-rn", "author": "O2Team", "license": "MIT", diff --git a/packages/taro-router/package.json b/packages/taro-router/package.json index 78d635346b3..dfb3788e045 100644 --- a/packages/taro-router/package.json +++ b/packages/taro-router/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/router", - "version": "4.0.4", + "version": "4.0.5", "description": "Taro-router", "author": "O2Team", "license": "MIT", diff --git a/packages/taro-runner-utils/package.json b/packages/taro-runner-utils/package.json index a6840623ea0..6f6c8cf7594 100644 --- a/packages/taro-runner-utils/package.json +++ b/packages/taro-runner-utils/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/runner-utils", - "version": "4.0.4", + "version": "4.0.5", "description": "Taro runner utilities.", "author": "O2Team", "license": "MIT", diff --git a/packages/taro-runtime-rn/package.json b/packages/taro-runtime-rn/package.json index 139ea92f697..c361413697e 100644 --- a/packages/taro-runtime-rn/package.json +++ b/packages/taro-runtime-rn/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/runtime-rn", - "version": "4.0.4", + "version": "4.0.5", "description": "taro-runtime-rn", "author": "O2Team", "license": "MIT", diff --git a/packages/taro-runtime/package.json b/packages/taro-runtime/package.json index f1820e721ba..51908a47f25 100644 --- a/packages/taro-runtime/package.json +++ b/packages/taro-runtime/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/runtime", - "version": "4.0.4", + "version": "4.0.5", "description": "taro runtime for mini apps.", "author": "O2Team", "license": "MIT", diff --git a/packages/taro-service/package.json b/packages/taro-service/package.json index 613fa8c50e4..b1e6345c187 100644 --- a/packages/taro-service/package.json +++ b/packages/taro-service/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/service", - "version": "4.0.4", + "version": "4.0.5", "description": "Taro Service", "author": "O2Team", "license": "MIT", diff --git a/packages/taro-transformer-wx/package.json b/packages/taro-transformer-wx/package.json index 1a771545216..6f5ce58eafa 100644 --- a/packages/taro-transformer-wx/package.json +++ b/packages/taro-transformer-wx/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/transformer-wx", - "version": "4.0.4", + "version": "4.0.5", "description": "Transfrom Nerv Component to Wechat mini program.", "author": "O2Team", "license": "MIT", diff --git a/packages/taro-vite-runner/package.json b/packages/taro-vite-runner/package.json index c57af035db2..6414ff5b7cd 100644 --- a/packages/taro-vite-runner/package.json +++ b/packages/taro-vite-runner/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/vite-runner", - "version": "4.0.4", + "version": "4.0.5", "main": "index.js", "license": "MIT", "files": [ diff --git a/packages/taro-webpack5-prebundle/package.json b/packages/taro-webpack5-prebundle/package.json index 2757b7f1228..32bf7968d74 100644 --- a/packages/taro-webpack5-prebundle/package.json +++ b/packages/taro-webpack5-prebundle/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/webpack5-prebundle", - "version": "4.0.4", + "version": "4.0.5", "description": "Taro app webpack5 prebundle", "author": "O2Team", "license": "MIT", diff --git a/packages/taro-webpack5-runner/package.json b/packages/taro-webpack5-runner/package.json index 033e4047b5f..dd92d5ddd77 100644 --- a/packages/taro-webpack5-runner/package.json +++ b/packages/taro-webpack5-runner/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/webpack5-runner", - "version": "4.0.4", + "version": "4.0.5", "description": "Taro app runner", "author": "O2Team", "license": "MIT", diff --git a/packages/taro-webpack5-runner/src/prerender/prerender.ts b/packages/taro-webpack5-runner/src/prerender/prerender.ts index aa163131ab7..49f5e71d3e4 100644 --- a/packages/taro-webpack5-runner/src/prerender/prerender.ts +++ b/packages/taro-webpack5-runner/src/prerender/prerender.ts @@ -75,7 +75,7 @@ export function validatePrerenderPages (pages: string[], config?: PrerenderConfi const picomatch = require('picomatch') const isMatch = picomatch(match) pageConfigs = pages - .filter(isMatch) + .filter((page) => isMatch(page)) // Note: 这里不能写成 .filter(isMatch)，因为 filter 会传入三个参数，会影响 picomatch 的匹配 .filter((p: string) => !p.includes('.config')) .map((p: string) => ({ path: p, params: {} })) } diff --git a/packages/taro-webpack5-runner/src/utils/webpack.ts b/packages/taro-webpack5-runner/src/utils/webpack.ts index 24e93a0ec36..4268a110169 100644 --- a/packages/taro-webpack5-runner/src/utils/webpack.ts +++ b/packages/taro-webpack5-runner/src/utils/webpack.ts @@ -1,6 +1,7 @@ import path from 'node:path' import { promoteRelativePath } from '@tarojs/helper' +import { isBoolean } from '@tarojs/shared' import { sources } from 'webpack' import type { Chunk, ChunkGraph, Compilation, Stats } from 'webpack' @@ -48,3 +49,15 @@ export function errorHandling (errorLevel?: number, stats?: Stats) { process.exit(1) } } + +export function getAssetsMaxSize (options, defaultValue): number { + // Note:limit 为 false 时，不限制大小 全部转为 base64 + const { limit } = options + let maxSize: number + if (isBoolean(limit)) { + maxSize = limit ? 0 : Number.MAX_SAFE_INTEGER + } else { + maxSize = limit || defaultValue + } + return maxSize +} diff --git a/packages/taro-webpack5-runner/src/webpack/WebpackModule.ts b/packages/taro-webpack5-runner/src/webpack/WebpackModule.ts index 6ebeacc7f40..a4d59878acd 100644 --- a/packages/taro-webpack5-runner/src/webpack/WebpackModule.ts +++ b/packages/taro-webpack5-runner/src/webpack/WebpackModule.ts @@ -10,7 +10,8 @@ import { } from '@tarojs/helper' import { FONT_LIMIT, IMAGE_LIMIT, MEDIA_LIMIT, } from '@tarojs/runner-utils' import { isFunction } from '@tarojs/shared' -import { isBoolean } from 'lodash' + +import { getAssetsMaxSize } from '../utils/webpack' import type { PostcssOption } from '@tarojs/taro/types/compile' @@ -170,13 +171,13 @@ export class WebpackModule { } static getMediaRule (sourceRoot: string, options) { + const maxSize = getAssetsMaxSize(options, MEDIA_LIMIT) return { test: REG_MEDIA, type: 'asset', parser: { - dataUrlCondition: (asset): boolean => { - if (isBoolean(options.limit)) return options.limit - return asset.size <= (options.limit || MEDIA_LIMIT) + dataUrlCondition: { + maxSize, } }, generator: { @@ -192,13 +193,13 @@ export class WebpackModule { } static getFontRule (sourceRoot: string, options) { + const maxSize = getAssetsMaxSize(options, FONT_LIMIT) return { test: REG_FONT, type: 'asset', parser: { - dataUrlCondition: (asset): boolean => { - if (isBoolean(options.limit)) return options.limit - return asset.size <= (options.limit || FONT_LIMIT) + dataUrlCondition: { + maxSize, } }, generator: { @@ -214,13 +215,13 @@ export class WebpackModule { } static getImageRule (sourceRoot: string, options) { + const maxSize = getAssetsMaxSize(options, IMAGE_LIMIT) return { test: REG_IMAGE, type: 'asset', parser: { - dataUrlCondition: (asset): boolean => { - if (isBoolean(options.limit)) return options.limit - return asset.size <= (options.limit || IMAGE_LIMIT) + dataUrlCondition: { + maxSize, } }, generator: { diff --git a/packages/taro-with-weapp/package.json b/packages/taro-with-weapp/package.json index 93133305dd8..085be6faa9d 100644 --- a/packages/taro-with-weapp/package.json +++ b/packages/taro-with-weapp/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/with-weapp", - "version": "4.0.4", + "version": "4.0.5", "description": "taroize 之后的运行时", "author": "O2Team", "license": "MIT", diff --git a/packages/taro/package.json b/packages/taro/package.json index 1feb532efc6..59ead17418c 100644 --- a/packages/taro/package.json +++ b/packages/taro/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/taro", - "version": "4.0.4", + "version": "4.0.5", "description": "Taro framework", "author": "O2Team", "license": "MIT", diff --git a/packages/taroize/package.json b/packages/taroize/package.json index 460eaa46423..215a1c08f2b 100644 --- a/packages/taroize/package.json +++ b/packages/taroize/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/taroize", - "version": "4.0.4", + "version": "4.0.5", "description": "转换原生微信小程序代码为 Taro 代码", "author": "O2Team", "license": "MIT", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4edcd64f12e..8baa64c5aa9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -733,8 +733,8 @@ importers: specifier: ^3.0.0 version: 3.0.0 swiper: - specifier: 6.8.0 - version: 6.8.0 + specifier: 11.1.0 + version: 11.1.0 tslib: specifier: ^2.6.2 version: 2.6.2 @@ -918,8 +918,8 @@ importers: specifier: ^2.2.5 version: 2.5.1 swiper: - specifier: 6.8.0 - version: 6.8.0 + specifier: 11.1.0 + version: 11.1.0 tslib: specifier: ^2.6.2 version: 2.6.2 @@ -1248,6 +1248,9 @@ importers: rollup-plugin-ts: specifier: ^3.0.2 version: 3.4.5(@babel/core@7.24.4)(@babel/preset-env@7.24.6)(@babel/runtime@7.24.6)(rollup@3.29.4)(typescript@5.4.5) + swiper: + specifier: 11.1.0 + version: 11.1.0 packages/taro-helper: dependencies: @@ -13350,12 +13353,6 @@ packages: resolution: {integrity: sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==, tarball: https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz} dev: false - /dom7@3.0.0: - resolution: {integrity: sha512-oNlcUdHsC4zb7Msx7JN3K0Nro1dzJ48knvBOnDPKJ2GV9wl1i5vydJZUSyOfrkKFDZEud/jBsTk92S/VGSAe/g==, tarball: https://registry.npmjs.org/dom7/-/dom7-3.0.0.tgz} - dependencies: - ssr-window: 3.0.0 - dev: false - /domelementtype@2.3.0: resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==, tarball: https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz} @@ -24454,10 +24451,6 @@ packages: dev: false optional: true - /ssr-window@3.0.0: - resolution: {integrity: sha512-q+8UfWDg9Itrg0yWK7oe5p/XRCJpJF9OBtXfOPgSJl+u3Xd5KI328RUEvUqSMVM9CiQUEf1QdBzJMkYGErj9QA==, tarball: https://registry.npmjs.org/ssr-window/-/ssr-window-3.0.0.tgz} - dev: false - /ssri@10.0.6: resolution: {integrity: sha512-MGrFH9Z4NP9Iyhqn16sDtBpRRNJ0Y2hNa6D65h736fVSaPCHr4DM4sWUNvVaSuC+0OBGhwsrydQwmgfg5LncqQ==, tarball: https://registry.npmjs.org/ssri/-/ssri-10.0.6.tgz} engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0} @@ -25055,14 +25048,9 @@ packages: picocolors: 1.0.1 dev: false - /swiper@6.8.0: - resolution: {integrity: sha512-6H3e7VOihasMp8sPXNhRDkc61UD0XeFlefbWfUHecBLBTtmA+9WxJiKDBMdzgetK1cny+5+mKfVcsmxYgnEDSw==, tarball: https://registry.npmjs.org/swiper/-/swiper-6.8.0.tgz} + /swiper@11.1.0: + resolution: {integrity: sha512-Pm78CgU7Wvg+w/MgIL/1NwMSLgx0XqFof25EnVyX8iZFCYJv5CppH7LHkBj43qW2k5Cp3Iz7FcdBxrox7XX2AQ==, tarball: https://registry.npmjs.org/swiper/-/swiper-11.1.0.tgz} engines: {node: '>= 4.7.0'} - requiresBuild: true - dependencies: - dom7: 3.0.0 - ssr-window: 3.0.0 - dev: false /symbol-tree@3.2.4: resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==, tarball: https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz} diff --git a/tests/__tests__/__snapshots__/mini-platform.spec.ts.snap b/tests/__tests__/__snapshots__/mini-platform.spec.ts.snap index 40826344911..3401ce8d66c 100644 --- a/tests/__tests__/__snapshots__/mini-platform.spec.ts.snap +++ b/tests/__tests__/__snapshots__/mini-platform.spec.ts.snap @@ -2865,6 +2865,41 @@ require("./runtime"); "show-confirm-bar": "true", "adjust-position": "true", "disable-default-padding": "false" + }, + RootPortal: { + enable: "true" + }, + Editor: { + "read-only": "false", + placeholder: "", + "show-img-size": "false", + "show-img-toolbar": "false", + "show-img-resize": "false", + focus: "false", + bindReady: "", + bindFocus: "", + bindBlur: "", + bindInput: "", + bindStatusChange: "", + name: "" + }, + PageContainer: { + show: "false", + duration: "300", + "z-index": "100", + overlay: "true", + position: "'bottom'", + round: "false", + "close-on-slide-down": "false", + "overlay-style": "", + "custom-style": "", + bindBeforeEnter: "", + bindEnter: "", + bindAfterEnter: "", + bindBeforeLeave: "", + bindLeave: "", + bindAfterLeave: "", + bindClickOverlay: "" } }; const hostConfig = { diff --git a/tests/__tests__/__snapshots__/prerender.spec.ts.snap b/tests/__tests__/__snapshots__/prerender.spec.ts.snap index 51dbfd53a0c..3fb20418c08 100644 --- a/tests/__tests__/__snapshots__/prerender.spec.ts.snap +++ b/tests/__tests__/__snapshots__/prerender.spec.ts.snap @@ -667,9 +667,6 @@ require("./runtime"); if (typeof PRERENDER !== 'undefined') { module.exports = wx._prerender } - if (typeof PRERENDER !== 'undefined') { - module.exports = wx._prerender - } /** filePath: dist/app.json **/ {"pages":["pages/index/index","others/detail/index","others/normal/index"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor":"#fff","navigationBarTitleText":"WeChat","navigationBarTextStyle":"black"}} @@ -1479,9 +1476,6 @@ require("./runtime"); })); var __webpack_exports__ = __webpack_require__.O(); } ]); - if (typeof PRERENDER !== 'undefined') { - module.exports = wx._prerender - } /** filePath: dist/comp.json **/ {"component":true,"usingComponents":{"comp":"./comp"}} @@ -1491,14 +1485,6 @@ require("./runtime");