diff --git a/.eslintignore b/.eslintignore index a4a23f6ed035..e4948f0b14d9 100644 --- a/.eslintignore +++ b/.eslintignore @@ -3,6 +3,7 @@ dist-h5 lib node_modules *.d.ts +*.ets coverage examples @@ -14,14 +15,7 @@ packages/taro-components/loader packages/taro-components/src/components packages/taro-components-library-react/components.ts packages/taro-components-library-vue3/components.ts -packages/taro-components-library-vue3/components.ts - -packages/taro-webpack-runner/src/__tests__/__snapshots__ -packages/taro-webpack-runner/src/__tests__/fixtures -packages/taro-mini-runner/src/__tests__/__snapshots__ -packages/taro-mini-runner/src/__tests__/fixtures -packages/taro-mini-runner/src/quickapp packages/taro-webpack5-runner/src/__tests__/__snapshots__ packages/taro-webpack5-runner/src/__tests__/fixtures packages/taro-webpack5-runner/src/__tests__/bundled diff --git a/.eslintrc.js b/.eslintrc.js index 2adc439e07cf..7d30eb0d1601 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,27 +1,23 @@ module.exports = { parser: '@typescript-eslint/parser', - plugins: [ - '@typescript-eslint', - 'import', - 'jest', - 'react', - 'simple-import-sort', - 'prettier' - ], + plugins: ['@typescript-eslint', 'import', 'jest', 'react', 'simple-import-sort', 'prettier'], extends: [ 'eslint:recommended', 'standard', 'plugin:@typescript-eslint/recommended', 'plugin:react/jsx-runtime', 'plugin:react/recommended', - 'prettier' + 'prettier', ], rules: { '@typescript-eslint/ban-ts-comment': 0, '@typescript-eslint/explicit-function-return-type': 0, '@typescript-eslint/explicit-module-boundary-types': 0, '@typescript-eslint/indent': [2, 2], - '@typescript-eslint/member-delimiter-style': [1, { multiline: { delimiter: 'none' }, singleline: { delimiter: 'comma' } }], + '@typescript-eslint/member-delimiter-style': [ + 1, + { multiline: { delimiter: 'none' }, singleline: { delimiter: 'comma' } }, + ], '@typescript-eslint/no-empty-function': 0, '@typescript-eslint/no-explicit-any': 0, '@typescript-eslint/no-namespace': 0, @@ -31,17 +27,22 @@ module.exports = { '@typescript-eslint/no-use-before-define': [1, { functions: false, classes: false }], '@typescript-eslint/no-var-requires': 0, camelcase: 0, + 'comma-spacing': 2, + 'eol-last': 2, 'import/first': 2, 'import/newline-after-import': 2, 'import/no-duplicates': 2, - indent: 'off', + indent: 0, + 'keyword-spacing': 2, 'no-console': [2, { allow: ['warn', 'error'] }], + 'no-empty': 1, + 'no-multiple-empty-lines': 2, + 'no-multi-spaces': 2, 'no-prototype-builtins': 0, 'no-unused-expressions': 0, 'no-unused-vars': 'off', 'no-use-before-define': 0, 'object-curly-spacing': 2, - 'no-empty': 1, 'prefer-spread': 0, 'prefer-rest-params': 0, 'react/jsx-uses-vars': 1, @@ -51,34 +52,37 @@ module.exports = { 'import/no-named-default': 'off', quotes: [2, 'single', { avoidEscape: true, allowTemplateLiterals: true }], semi: [2, 'never'], - 'simple-import-sort/imports': [2, { - groups: [ - // Side effect imports. - ['^\\u0000'], - // Node.js builtins prefixed with `node:`. - ['^node:'], - // Packages. - // Things that start with a letter (or digit or underscore), or `@` followed by a letter. - ['^@?\\w'], - // Absolute imports and other imports such as Vue-style `@/foo`. - // Anything not matched in another group. - ['^'], - // Relative imports. - // Anything that starts with a dot. - ['^\\.'], - // Types Group - ['^node:.*\\u0000$', '^@?\\w.*\\u0000$', '(?<=\\u0000)$', '^\\..*\\u0000$'], - ] - }], + 'simple-import-sort/imports': [ + 2, + { + groups: [ + // Side effect imports. + ['^\\u0000'], + // Node.js builtins prefixed with `node:`. + ['^node:'], + // Packages. + // Things that start with a letter (or digit or underscore), or `@` followed by a letter. + ['^@?\\w'], + // Absolute imports and other imports such as Vue-style `@/foo`. + // Anything not matched in another group. + ['^'], + // Relative imports. + // Anything that starts with a dot. + ['^\\.'], + // Types Group + ['^node:.*\\u0000$', '^@?\\w.*\\u0000$', '(?<=\\u0000)$', '^\\..*\\u0000$'], + ], + }, + ], 'simple-import-sort/exports': 2, - 'space-before-function-paren': [2, 'always'], - 'standard/no-callback-literal': 0 + 'space-before-function-paren': 0, + 'standard/no-callback-literal': 0, }, env: { 'jest/globals': true, browser: true, node: true, - es6: true + es6: true, }, globals: { testRule: 'readonly', @@ -92,16 +96,16 @@ module.exports = { requirePlugin: 'readonly', jd: 'readonly', ks: 'readonly', - LOCATION_APIKEY: 'readonly' + LOCATION_APIKEY: 'readonly', }, parserOptions: { ecmaFeatures: { - jsx: true - } + jsx: true, + }, }, settings: { react: { - version: 'detect' - } - } + version: 'detect', + }, + }, } diff --git a/.github/workflows/build-rust-binding.yml b/.github/workflows/build-rust-binding.yml index 2e5b1e0f4374..c0b9b3269972 100644 --- a/.github/workflows/build-rust-binding.yml +++ b/.github/workflows/build-rust-binding.yml @@ -44,7 +44,7 @@ jobs: - name: Setup pnpm uses: pnpm/action-setup@v2.4.0 with: - version: 7 + version: 8 - name: Setup Node.js ${{ matrix.node-version }} uses: actions/setup-node@v4 if: ${{ !matrix.settings.docker }} diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml index 30c44bb0ec92..e2d6f8402581 100644 --- a/.github/workflows/nodejs.yml +++ b/.github/workflows/nodejs.yml @@ -5,6 +5,13 @@ env: on: push: branches: + - 'chore/**' + - 'feat/**' + - 'fix/**' + - '1.x' + - '2.x' + - '3.x' + - '4.x' - main pull_request: branches: @@ -22,29 +29,40 @@ jobs: uses: ./.github/workflows/build-rust-wasm.yml nodejs-tesing: - name: Testing on Node.js ${{ matrix.node-version }} (${{ matrix.settings.host }}) + name: Testing on Node.js ${{ matrix.node-version }} (${{ matrix.host }}) needs: - build-rust-binding - build-rust-wasm strategy: fail-fast: false matrix: - node-version: [16.x] - settings: + node-version: [16.x, 18.x, 20.x] + host: [macos-11, windows-latest, ubuntu-latest] + include: - host: macos-11 target: x86_64-apple-darwin - host: windows-latest target: x86_64-pc-windows-msvc - host: ubuntu-latest target: x86_64-unknown-linux-gnu - runs-on: ${{ matrix.settings.host }} + exclude: + - node-version: 16.x + host: macos-11 + - node-version: 16.x + host: windows-latest + - node-version: 18.x + host: macos-11 + - node-version: 18.x + host: windows-latest + + runs-on: ${{ matrix.host }} steps: - name: Checkout uses: actions/checkout@v4 - name: Setup pnpm uses: pnpm/action-setup@v2.4.0 with: - version: 7 + version: 8 - name: Setup Node.js ${{ matrix.node-version }} uses: actions/setup-node@v4 with: @@ -65,22 +83,21 @@ jobs: run: pnpm -r install --frozen-lockfile - name: Lint run: pnpm lint - - name: Download artifact bindings-${{ matrix.settings.target }} + - name: Download artifact bindings-${{ matrix.target }} uses: actions/download-artifact@v4 with: - name: bindings-${{ matrix.settings.target }} + name: bindings-${{ matrix.target }} path: crates/native_binding - name: Test bindings run: pnpm test:binding - if: ${{ matrix.settings.target != 'x86_64-unknown-linux-gnu' }} + if: ${{ matrix.target != 'x86_64-unknown-linux-gnu' }} - name: Test bindings with docker - if: ${{ matrix.settings.target == 'x86_64-unknown-linux-gnu' }} + if: ${{ matrix.target == 'x86_64-unknown-linux-gnu' }} # 暂时使用了一个第三方的 docker 镜像 run: docker run --rm -v $(pwd):/build -w /build chf007/pnpm pnpm test:binding # 以下的测试流程应该在所有平台都执行，但 windows 好像还有些问题，因此目前只在 ubuntu-latest 执行 - name: Download all artifacts uses: actions/download-artifact@v4 - if: ${{ matrix.settings.host == 'ubuntu-latest' }} with: path: crates/native_binding/artifacts - name: List Package crates/native_binding @@ -88,20 +105,21 @@ jobs: shell: bash - name: Move artifacts run: pnpm artifacts - if: ${{ matrix.settings.host == 'ubuntu-latest' }} - name: build run: pnpm build - if: ${{ matrix.settings.host == 'ubuntu-latest' }} - name: test run: pnpm test - if: ${{ matrix.settings.host == 'ubuntu-latest' }} 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@v3 - if: ${{ matrix.settings.host == 'ubuntu-latest' }} + if: ${{ matrix.host == 'ubuntu-latest' }} with: move_coverage_to_trash: true flags: taro-cli @@ -109,15 +127,15 @@ jobs: token: ${{ secrets.CODECOV_TOKEN }} - name: Upload runner coverage to Codecov uses: codecov/codecov-action@v3 - if: ${{ matrix.settings.host == 'ubuntu-latest' }} + if: ${{ matrix.host == 'ubuntu-latest' }} with: move_coverage_to_trash: true flags: taro-runner - files: ./packages/taro-webpack5-runner/coverage/clover.xml,./packages/taro-webpack-runner/coverage/clover.xml,./packages/taro-mini-runner/coverage/clover.xml + files: ./packages/taro-webpack5-runner/coverage/clover.xml token: ${{ secrets.CODECOV_TOKEN }} - name: Upload [taro-runtime] coverage to Codecov uses: codecov/codecov-action@v3 - if: ${{ matrix.settings.host == 'ubuntu-latest' }} + if: ${{ matrix.host == 'ubuntu-latest' }} with: move_coverage_to_trash: true flags: taro-runtime @@ -125,7 +143,7 @@ jobs: token: ${{ secrets.CODECOV_TOKEN }} - name: Upload [taro-web] coverage to Codecov uses: codecov/codecov-action@v3 - if: ${{ matrix.settings.host == 'ubuntu-latest' }} + if: ${{ matrix.host == 'ubuntu-latest' }} with: move_coverage_to_trash: true flags: taro-web @@ -133,7 +151,7 @@ jobs: token: ${{ secrets.CODECOV_TOKEN }} - name: Upload rest coverage to Codecov uses: codecov/codecov-action@v3 - if: ${{ matrix.settings.host == 'ubuntu-latest' }} + if: ${{ matrix.host == 'ubuntu-latest' }} with: token: ${{ secrets.CODECOV_TOKEN }} diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index 14525ba1a4d0..a52272e9f4df 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -4,7 +4,11 @@ on: branches: - 'chore/**' - 'feat/**' - # When Release Pull Request is merged + - 'fix/**' + - '1.x' + - '2.x' + - '3.x' + - '4.x' pull_request: branches: - main @@ -83,7 +87,7 @@ jobs: - name: Setup pnpm uses: pnpm/action-setup@v2.4.0 with: - version: 7 + version: 8 - name: Setup Node 16 uses: actions/setup-node@v4 with: diff --git a/.github/workflows/sync-components-types.yml b/.github/workflows/sync-components-types.yml index b437f3c9ab0c..e480cd9a2859 100644 --- a/.github/workflows/sync-components-types.yml +++ b/.github/workflows/sync-components-types.yml @@ -36,7 +36,7 @@ jobs: - name: install uses: pnpm/action-setup@v2.4.0 with: - version: 7 + version: 8 run_install: | - recursive: true args: [--frozen-lockfile, --strict-peer-dependencies] diff --git a/.husky/commit-msg b/.husky/commit-msg old mode 100755 new mode 100644 diff --git a/.husky/pre-commit b/.husky/pre-commit old mode 100755 new mode 100644 diff --git a/.vscode/launch.json b/.vscode/launch.json index 7abf2978c8d0..467ea8397f89 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -5,7 +5,7 @@ "version": "0.2.0", "configurations": [ { - "type": "lldb", + "type": "node", "request": "launch", "name": "debug-init", "sourceLanguages": ["rust"], diff --git a/.vscode/settings.json b/.vscode/settings.json index 40629da47a9c..ebd73d16e806 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,16 +1,5 @@ { - "eslint.validate": [ - "javascript", - "javascriptreact", - { - "language": "typescript", - "autoFix": true - }, - { - "language": "typescriptreact", - "autoFix": true - } - ], + "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"], "search.exclude": { "**/.git": true, "**/node_modules": true, @@ -22,7 +11,8 @@ "javascript.format.insertSpaceBeforeFunctionParenthesis": true, "typescript.format.insertSpaceBeforeFunctionParenthesis": true, "files.associations": { - "*.json": "jsonc" + "*.json": "jsonc", + "*.ets": "typescript" }, "rust-analyzer.linkedProjects": [ "./crates/taro_init/Cargo.toml", diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6ca77940c05a..67574c6f0615 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -114,7 +114,7 @@ $ npm run clear-all **注意：** -`@tarojs/mini-runner`、`@tarojs/webpack-runner`、`@tarojs/webpack5-runner` 使用了 `snapshot`（测试结果快照）。在修改这两个包或其它一些包时，有可能导致这些快照失效，从而通过不了测试。当你修改了这两个包、或 Github CI 提示这些包的测试用例出错时，请运行 `pnpm --filter [package-name] runupdateSnapshot` 更新 snapshot 后重新提交。 +`@tarojs/webpack5-runner` 使用了 `snapshot`（测试结果快照）。在修改这两个包或其它一些包时，有可能导致这些快照失效，从而通过不了测试。当你修改了这两个包、或 Github CI 提示这些包的测试用例出错时，请运行 `pnpm --filter [package-name] runupdateSnapshot` 更新 snapshot 后重新提交。 ### 5. 代码风格 diff --git a/Cargo.lock b/Cargo.lock index 20bebf63fe9b..2e0db62b1c32 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -71,7 +71,7 @@ dependencies = [ "proc-macro2", "quote", "swc_macros_common", - "syn 2.0.39", + "syn 2.0.43", ] [[package]] @@ -302,12 +302,12 @@ dependencies = [ [[package]] name = "ctor" -version = "0.2.5" +version = "0.2.6" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "37e366bff8cd32dd8754b0991fb66b279dc48f598c3a18914852a6673deef583" +checksum = "30d2b3721e861707777e3195b0158f950ae6dc4a27e4d02ff9f67e3eb3de199e" dependencies = [ "quote", - "syn 2.0.39", + "syn 2.0.43", ] [[package]] @@ -328,9 +328,9 @@ dependencies = [ [[package]] name = "deunicode" -version = "1.4.1" +version = "1.4.2" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "6a1abaf4d861455be59f64fd2b55606cb151fce304ede7165f410243ce96bde6" +checksum = "3ae2a35373c5c74340b79ae6780b498b2b183915ec5dacf263aac5a099bf485a" [[package]] name = "diff" @@ -430,7 +430,7 @@ checksum = "3a0b11eeb173ce52f84ebd943d42e58813a2ebb78a6a3ff0a243b71c5199cd7b" dependencies = [ "proc-macro2", "swc_macros_common", - "syn 2.0.39", + "syn 2.0.43", ] [[package]] @@ -441,9 +441,9 @@ checksum = "e6d5a32815ae3f33302d95fdcb2ce17862f8c65363dcfd29360480ba1001fc9c" [[package]] name = "futures" -version = "0.3.29" +version = "0.3.30" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "da0290714b38af9b4a7b094b8a37086d1b4e61f2df9122c3cad2577669145335" +checksum = "645c6916888f6cb6350d2550b80fb63e734897a8498abe35cfb732b6487804b0" dependencies = [ "futures-channel", "futures-core", @@ -456,9 +456,9 @@ dependencies = [ [[package]] name = "futures-channel" -version = "0.3.29" +version = "0.3.30" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "ff4dd66668b557604244583e3e1e1eada8c5c2e96a6d0d6653ede395b78bbacb" +checksum = "eac8f7d7865dcb88bd4373ab671c8cf4508703796caa2b1985a9ca867b3fcb78" dependencies = [ "futures-core", "futures-sink", @@ -466,15 +466,15 @@ dependencies = [ [[package]] name = "futures-core" -version = "0.3.29" +version = "0.3.30" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "eb1d22c66e66d9d72e1758f0bd7d4fd0bee04cad842ee34587d68c07e45d088c" +checksum = "dfc6580bb841c5a68e9ef15c77ccc837b40a7504914d52e47b8b0e9bbda25a1d" [[package]] name = "futures-executor" -version = "0.3.29" +version = "0.3.30" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "0f4fb8693db0cf099eadcca0efe2a5a22e4550f98ed16aba6c48700da29597bc" +checksum = "a576fc72ae164fca6b9db127eaa9a9dda0d61316034f33a0a0d4eda41f02b01d" dependencies = [ "futures-core", "futures-task", @@ -483,38 +483,38 @@ dependencies = [ [[package]] name = "futures-io" -version = "0.3.29" +version = "0.3.30" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "8bf34a163b5c4c52d0478a4d757da8fb65cabef42ba90515efee0f6f9fa45aaa" +checksum = "a44623e20b9681a318efdd71c299b6b222ed6f231972bfe2f224ebad6311f0c1" [[package]] name = "futures-macro" -version = "0.3.29" +version = "0.3.30" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "53b153fd91e4b0147f4aced87be237c98248656bb01050b96bf3ee89220a8ddb" +checksum = "87750cf4b7a4c0625b1529e4c543c2182106e4dedc60a2a6455e00d212c489ac" dependencies = [ "proc-macro2", "quote", - "syn 2.0.39", + "syn 2.0.43", ] [[package]] name = "futures-sink" -version = "0.3.29" +version = "0.3.30" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "e36d3378ee38c2a36ad710c5d30c2911d752cb941c00c72dbabfb786a7970817" +checksum = "9fb8e00e87438d937621c1c6269e53f536c14d3fbd6a042bb24879e57d474fb5" [[package]] name = "futures-task" -version = "0.3.29" +version = "0.3.30" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "efd193069b0ddadc69c46389b740bbccdd97203899b48d09c5f7969591d6bae2" +checksum = "38d84fa142264698cdce1a9f9172cf383a0c82de1bddcf3092901442c4097004" [[package]] name = "futures-util" -version = "0.3.29" +version = "0.3.30" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "a19526d624e703a3179b3d322efec918b6246ea0fa51d41124525f00f1cc8104" +checksum = "3d6401deb83407ab3da39eba7e33987a73c3df0c82b4bb5813ee871c19c41d48" dependencies = [ "futures-channel", "futures-core", @@ -697,7 +697,7 @@ dependencies = [ "Inflector", "proc-macro2", "quote", - "syn 2.0.39", + "syn 2.0.43", ] [[package]] @@ -708,9 +708,9 @@ checksum = "616cde7c720bb2bb5824a224687d8f77bfd38922027f01d825cd7453be5099fb" [[package]] name = "itoa" -version = "1.0.9" +version = "1.0.10" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "af150ab688ff2122fcef229be89cb50dd66af9e01a4ff320cc137eecc9bacc38" +checksum = "b1a46d1a171d865aa5f83f92695765caa047a9b4cbae2cbf37dbd613a793fd4c" [[package]] name = "jmespath" @@ -761,9 +761,9 @@ checksum = "e2abad23fbc42b3700f2f279844dc832adb2b2eb069b2df918f455c4e18cc646" [[package]] name = "libc" -version = "0.2.150" +version = "0.2.151" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "89d92a4743f9a61002fae18374ed11e7973f530cb3a3255fb354818118b2203c" +checksum = "302d7ab3130588088d277783b1e2d2e10c9e9e4a16dd9050e6ec93fb3e7048f4" [[package]] name = "libloading" @@ -891,23 +891,23 @@ checksum = "d4b4532cf86bfef556348ac65e561e3123879f0e7566cca6d43a6ff5326f13df" [[package]] name = "napi-derive" -version = "2.14.2" +version = "2.14.4" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "a0cca5738c6e81eb5ffd2c8ff2b4f05ece9c4c60c7e2b36cec6524492cf7f330" +checksum = "9b5af262f1d8e660742eb722abc7113a5b3c3de4144d0ef23ede2518672ceff1" dependencies = [ "cfg-if", "convert_case", "napi-derive-backend", "proc-macro2", "quote", - "syn 1.0.109", + "syn 2.0.43", ] [[package]] name = "napi-derive-backend" -version = "1.0.55" +version = "1.0.58" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "35960e5f33228192a9b661447d0dfe8f5a3790ff5b4058c4d67680ded4f65b91" +checksum = "2314f777bc9cde51705d991c44466cee4de4a3f41c6d3d019fcbbebb5cdd47c4" dependencies = [ "convert_case", "once_cell", @@ -915,7 +915,7 @@ dependencies = [ "quote", "regex", "semver 1.0.20", - "syn 1.0.109", + "syn 2.0.43", ] [[package]] @@ -986,9 +986,9 @@ dependencies = [ [[package]] name = "object" -version = "0.32.1" +version = "0.32.2" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "9cf5f9dd3933bd50a9e1f149ec995f39ae2c496d31fd772c1fd45ebc27e902b0" +checksum = "a6a622008b6e321afc04970976f62ee297fdbaa6f95318ca343e3eebb9648441" dependencies = [ "memchr", ] @@ -1071,7 +1071,7 @@ dependencies = [ "pest_meta", "proc-macro2", "quote", - "syn 2.0.39", + "syn 2.0.43", ] [[package]] @@ -1115,7 +1115,7 @@ dependencies = [ "phf_shared", "proc-macro2", "quote", - "syn 2.0.39", + "syn 2.0.43", ] [[package]] @@ -1147,7 +1147,7 @@ checksum = "52a40bc70c2c58040d2d8b167ba9a5ff59fc9dab7ad44771cfde3dcfde7a09c6" dependencies = [ "proc-macro2", "quote", - "syn 2.0.39", + "syn 2.0.43", ] [[package]] @@ -1162,9 +1162,9 @@ dependencies = [ [[package]] name = "proc-macro2" -version = "1.0.70" +version = "1.0.71" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "39278fbbf5fb4f646ce651690877f89d1c5811a3d4acb27700c1cb3cdb78fd3b" +checksum = "75cb1540fadbd5b8fbccc4dddad2734eba435053f725621c070711a14bb5f4b8" dependencies = [ "unicode-ident", ] @@ -1283,9 +1283,9 @@ checksum = "c08c74e62047bb2de4ff487b251e4a92e24f48745648451635cec7d591162d9f" [[package]] name = "relative-path" -version = "1.9.0" +version = "1.9.2" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "c707298afce11da2efef2f600116fa93ffa7a032b5d7b628aa17711ec81383ca" +checksum = "e898588f33fdd5b9420719948f9f2a32c922a246964576f71ba7f24f80610fbc" [[package]] name = "rend" @@ -1407,9 +1407,9 @@ checksum = "7ffc183a10b4478d04cbbbfc96d0873219d962dd5accaff2ffbd4ceb7df837f4" [[package]] name = "ryu" -version = "1.0.15" +version = "1.0.16" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "1ad4cc8da4ef723ed60bced201181d83791ad433213d8c24efffda1eec85d741" +checksum = "f98d2aa92eebf49b69786be48e4477826b256916e84a57ff2a4f21923b48eb4c" [[package]] name = "scoped-tls" @@ -1480,7 +1480,7 @@ checksum = "43576ca501357b9b071ac53cdc7da8ef0cbd9493d8df094cd821777ea6e894d3" dependencies = [ "proc-macro2", "quote", - "syn 2.0.39", + "syn 2.0.43", ] [[package]] @@ -1496,18 +1496,18 @@ dependencies = [ [[package]] name = "serde_spanned" -version = "0.6.4" +version = "0.6.5" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "12022b835073e5b11e90a14f86838ceb1c8fb0325b72416845c487ac0fa95e80" +checksum = "eb3622f419d1296904700073ea6cc23ad690adbd66f13ea683df73298736f0c1" dependencies = [ "serde", ] [[package]] name = "serde_yaml" -version = "0.9.27" +version = "0.9.29" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "3cc7a1570e38322cfe4154732e5110f887ea57e22b76f4bfd32b5bdd3368666c" +checksum = "a15e0ef66bf939a7c890a0bf6d5a733c70202225f9888a89ed5c62298b019129" dependencies = [ "indexmap", "itoa", @@ -1666,7 +1666,7 @@ dependencies = [ "proc-macro2", "quote", "swc_macros_common", - "syn 2.0.39", + "syn 2.0.43", ] [[package]] @@ -1767,9 +1767,9 @@ dependencies = [ [[package]] name = "swc_core" -version = "0.87.2" +version = "0.87.7" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "8d258de92df3ac19f6d49a9a6a18750e3cc4fcd483bb08b254db955a75baff71" +checksum = "1b815a0f6e8a5f77aa6c3863e3d4e73864f8c62f6e07adcbac72ce26fec59798" dependencies = [ "once_cell", "swc_atoms", @@ -1808,9 +1808,9 @@ dependencies = [ [[package]] name = "swc_ecma_codegen" -version = "0.146.45" +version = "0.146.47" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "be75490c5a5cad616587cb8600ce387bb5925c8a9a3e44de674b67bf962fb439" +checksum = "a7d39a90607035cd7d3dca3bcdf1c086a9453ec32e1c9c91c59ea4a9b702cd2b" dependencies = [ "memchr", "num-bigint", @@ -1834,7 +1834,7 @@ dependencies = [ "proc-macro2", "quote", "swc_macros_common", - "syn 2.0.39", + "syn 2.0.43", ] [[package]] @@ -1874,9 +1874,9 @@ dependencies = [ [[package]] name = "swc_ecma_transforms_base" -version = "0.135.1" +version = "0.135.3" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "4e0b068341f5a479875415e0eed6aeb0eb63e09e300cb9b0caef117e98c65200" +checksum = "81d3f06d8da75e01249631d788211aad2a028640c3a4e222cfda7930235f3ea4" dependencies = [ "better_scoped_tls", "bitflags 2.4.1", @@ -1897,9 +1897,9 @@ dependencies = [ [[package]] name = "swc_ecma_transforms_testing" -version = "0.138.1" +version = "0.138.3" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "f96a473c64e7f777b594d180114500caa917ee3585c3b28b87884876f72a2098" +checksum = "6ebc487d155be02aff745fa8ca356c4df993482a12b58a024565b705d8a4a5c5" dependencies = [ "ansi_term", "anyhow", @@ -1961,7 +1961,7 @@ checksum = "695a1d8b461033d32429b5befbf0ad4d7a2c4d6ba9cd5ba4e0645c615839e8e4" dependencies = [ "proc-macro2", "quote", - "syn 2.0.39", + "syn 2.0.43", ] [[package]] @@ -1985,7 +1985,7 @@ checksum = "50176cfc1cbc8bb22f41c6fe9d1ec53fbe057001219b5954961b8ad0f336fce9" dependencies = [ "proc-macro2", "quote", - "syn 2.0.39", + "syn 2.0.43", ] [[package]] @@ -2022,7 +2022,7 @@ checksum = "785309d342a69df4c929ee59e14e36889ca832f1d2a3c1d03c47c93126c72dbc" dependencies = [ "proc-macro2", "quote", - "syn 2.0.39", + "syn 2.0.43", ] [[package]] @@ -2047,7 +2047,7 @@ checksum = "ff9719b6085dd2824fd61938a881937be14b08f95e2d27c64c825a9f65e052ba" dependencies = [ "proc-macro2", "quote", - "syn 2.0.39", + "syn 2.0.43", ] [[package]] @@ -2071,7 +2071,7 @@ dependencies = [ "proc-macro2", "quote", "swc_macros_common", - "syn 2.0.39", + "syn 2.0.43", ] [[package]] @@ -2087,9 +2087,9 @@ dependencies = [ [[package]] name = "syn" -version = "2.0.39" +version = "2.0.43" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "23e78b90f2fcf45d3e842032ce32e3f2d1545ba6636271dcbf24fa306d87be7a" +checksum = "ee659fb5f3d355364e1f3e5bc10fb82068efbf824a1e9d1c9504244a6469ad53" dependencies = [ "proc-macro2", "quote", @@ -2202,7 +2202,7 @@ dependencies = [ "quote", "regex", "relative-path", - "syn 2.0.39", + "syn 2.0.43", ] [[package]] @@ -2218,22 +2218,22 @@ dependencies = [ [[package]] name = "thiserror" -version = "1.0.50" +version = "1.0.52" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "f9a7210f5c9a7156bb50aa36aed4c95afb51df0df00713949448cf9e97d382d2" +checksum = "83a48fd946b02c0a526b2e9481c8e2a17755e47039164a86c4070446e3a4614d" dependencies = [ "thiserror-impl", ] [[package]] name = "thiserror-impl" -version = "1.0.50" +version = "1.0.52" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "266b2e40bc00e5a6c09c3584011e08b06f123c00362c92b975ba9843aaaa14b8" +checksum = "e7fbe9b594d6568a6a1443250a7e67d80b74e1e96f6d1715e1e21cc1888291d3" dependencies = [ "proc-macro2", "quote", - "syn 2.0.39", + "syn 2.0.43", ] [[package]] @@ -2286,7 +2286,7 @@ checksum = "5b8a1e28f2deaa14e508979454cb3a223b10b938b45af148bc0986de36f1923b" dependencies = [ "proc-macro2", "quote", - "syn 2.0.39", + "syn 2.0.43", ] [[package]] @@ -2356,7 +2356,7 @@ checksum = "34704c8d6ebcbc939824180af020566b01a7c01f80641264eba0999f6c2b6be7" dependencies = [ "proc-macro2", "quote", - "syn 2.0.39", + "syn 2.0.43", ] [[package]] @@ -2463,9 +2463,9 @@ checksum = "e51733f11c9c4f72aa0c160008246859e340b00807569a0da0e7a1079b27ba85" [[package]] name = "unsafe-libyaml" -version = "0.2.9" +version = "0.2.10" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "f28467d3e1d3c6586d8f25fa243f544f5800fec42d97032474e17222c2b75cfa" +checksum = "ab4c90930b95a82d00dc9e9ac071b4991924390d46cbd0dfe566148667605e4b" [[package]] name = "untrusted" @@ -2545,7 +2545,7 @@ dependencies = [ "once_cell", "proc-macro2", "quote", - "syn 2.0.39", + "syn 2.0.43", "wasm-bindgen-shared", ] @@ -2567,7 +2567,7 @@ checksum = "f0eb82fcb7930ae6219a7ecfd55b217f5f0893484b7a13022ebb2b2bf20b5283" dependencies = [ "proc-macro2", "quote", - "syn 2.0.39", + "syn 2.0.43", "wasm-bindgen-backend", "wasm-bindgen-shared", ] @@ -2838,9 +2838,9 @@ checksum = "dff9641d1cd4be8d1a070daf9e3773c5f67e78b4d9d42263020c057706765c04" [[package]] name = "winnow" -version = "0.5.25" +version = "0.5.30" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "b7e87b8dfbe3baffbe687eef2e164e32286eff31a5ee16463ce03d991643ec94" +checksum = "9b5c3db89721d50d0e2a673f5043fc4722f76dcc352d7b1ab8b8288bed4ed2c5" dependencies = [ "memchr", ] diff --git a/Cargo.toml b/Cargo.toml index 753b04f6a8e4..db523b70a55d 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -5,12 +5,12 @@ resolver = "2" [workspace.dependencies] napi = { version = "=2.14.1", features = ["napi4", "tokio_rt"] } napi-build = { version = "=2.1.0" } -napi-derive = { version = "=2.14.2" } +napi-derive = { version = "=2.14.4" } napi-sys = { version = "=2.3.0" } once_cell = { version = "=1.19.0" } tokio = { version = "=1.34.0" } tokio-util = { version = "=0.7.10" } -futures = { version = "=0.3.29" } +futures = { version = "=0.3.30" } handlebars = { version = "=4.5.0" } handlebars_misc_helpers = { version = "=0.13.0" } serde_json = { version = "=1.0.108" } diff --git a/LICENSE b/LICENSE index d8572bc88d6f..e35a8840acfa 100644 --- a/LICENSE +++ b/LICENSE @@ -154,15 +154,8 @@ See `/LICENSE` for details of the license. ================== -MIT (stencil-vue2-output-target): -The following files embed [stencil-vue2-output-target](https://github.com/diondree/stencil-vue2-output-target) MIT: -`/packages/taro-components-library-vue2/src/vue-component-lib/utils.ts` -See `/LICENSE` for details of the license. - -================== - MIT (weui): -The following files embed [stencil-vue2-output-target](https://github.com/Tencent/weui) MIT: +The following files embed [weui](https://github.com/Tencent/weui) MIT: `/packages/taro-components/src/components/*.scss` See `/LICENSE.txt` for details of the license. diff --git a/codecov.yml b/codecov.yml index 5e0e45b7ea60..05d1fcb37246 100644 --- a/codecov.yml +++ b/codecov.yml @@ -35,8 +35,6 @@ flag_management: - name: taro-runner paths: - packages/taro-webpack5-runner/ - - packages/taro-webpack-runner/ - - packages/taro-mini-runner/ - name: taro-runtime paths: - packages/taro-runtime/ diff --git a/crates/native_binding/binding.d.ts b/crates/native_binding/binding.d.ts index 6b8363e85114..da622f055257 100644 --- a/crates/native_binding/binding.d.ts +++ b/crates/native_binding/binding.d.ts @@ -27,6 +27,9 @@ export interface CreateOptions { pageName?: string compiler?: CompilerType setPageName?: string + subPkg?: string + pageDir?: string + setSubPkgPageName?: string changeExt?: boolean isCustomTemplate?: boolean pluginType?: string @@ -48,7 +51,6 @@ export const enum CSSType { export const enum FrameworkType { React = 'React', Preact = 'Preact', - Vue = 'Vue', Vue3 = 'Vue3' } @@ -76,6 +78,8 @@ export interface Page { customTemplatePath?: string basePageFiles: Array period: PeriodType + subPkg?: string + pageDir?: string } export const enum PeriodType { diff --git a/crates/native_binding/package.json b/crates/native_binding/package.json index 6d0598cb0140..3d5e5a04d206 100644 --- a/crates/native_binding/package.json +++ b/crates/native_binding/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/binding", - "version": "3.6.23", + "version": "4.0.0-beta.33", "description": "Node binding for taro", "main": "binding.js", "typings": "binding.d.ts", diff --git a/crates/native_binding/src/lib.rs b/crates/native_binding/src/lib.rs index fd1f56a287b0..5100146bb1da 100644 --- a/crates/native_binding/src/lib.rs +++ b/crates/native_binding/src/lib.rs @@ -62,6 +62,8 @@ pub async fn create_page( conf.custom_template_path, conf.base_page_files, conf.period, + conf.sub_pkg, + conf.page_dir, ); let mut thread_safe_functions = HashMap::new(); for (key, callback) in handlers { diff --git a/crates/swc_plugin_compile_mode/src/tests/harmony/children.rs b/crates/swc_plugin_compile_mode/src/tests/harmony/children.rs new file mode 100644 index 000000000000..341731a2aace --- /dev/null +++ b/crates/swc_plugin_compile_mode/src/tests/harmony/children.rs @@ -0,0 +1,96 @@ +use swc_core::ecma::transforms::testing::test; +use super::{tr, get_syntax_config}; + +test!( + get_syntax_config(), + |_| tr(), + should_support_render_fn, + r#" + function Index () { + return ( + + {renderHeader()} + + {renderHeader()} + {normalFunc()} + + {this.methods.renderFooter()} + {normalFunc()} + + ) + } + "# +); + +test!( + get_syntax_config(), + |_| tr(), + should_support_fragment, + r#" + function Index () { + return ( + + {content0} + <> + {content1} + hello + + <> + {content2} + hello! + + + {content3} + + {content4} + <> + {content5} + + <> + hello!! + + hello!!! + {content6} + + ) + } + "# +); + +test!( + get_syntax_config(), + |_| tr(), + should_render_react_component, + r#" + function Index () { + return ( + + + {}} /> + + ) + } + "# +); + +test!( + get_syntax_config(), + |_| tr(), + should_render_complex_children, + r#" + function Index () { + return ( + + {showModal && + + + + {haveIcon && } + + + } + + ) + } + "# +); diff --git a/crates/swc_plugin_compile_mode/src/tests/harmony/condition.rs b/crates/swc_plugin_compile_mode/src/tests/harmony/condition.rs index 3fe623fc4324..97c264e49478 100644 --- a/crates/swc_plugin_compile_mode/src/tests/harmony/condition.rs +++ b/crates/swc_plugin_compile_mode/src/tests/harmony/condition.rs @@ -41,4 +41,39 @@ test!( ) } "# -); \ No newline at end of file +); + +test!( + get_syntax_config(), + |_| tr(), + should_support_conditional_and_unkonw_component, + r#" + function Index () { + return ( + + {condition ? hello : hello} + + ) + } + "# +); + +test!( + get_syntax_config(), + |_| tr(), + should_support_complex_condition, + r#" + function Index () { + return ( + + {condition1 && condition2 && doSth()} />} + {condition1 && ident} + {condition1 && obj.property} + {condition1 && fn()} + {condition1 ? : } + {condition1 ? {condition2 ? : } : } + + ) + } + "# +); diff --git a/crates/swc_plugin_compile_mode/src/tests/harmony/mod.rs b/crates/swc_plugin_compile_mode/src/tests/harmony/mod.rs index 48fb71ad865a..858212721f97 100644 --- a/crates/swc_plugin_compile_mode/src/tests/harmony/mod.rs +++ b/crates/swc_plugin_compile_mode/src/tests/harmony/mod.rs @@ -9,6 +9,7 @@ mod entry; mod attributes; mod condition; mod looping; +mod children; pub fn tr () -> impl Fold + VisitMut { let config = serde_json::from_str::( diff --git a/crates/swc_plugin_compile_mode/src/transform_harmony.rs b/crates/swc_plugin_compile_mode/src/transform_harmony.rs index 7725bd381dbc..14c68cae217e 100644 --- a/crates/swc_plugin_compile_mode/src/transform_harmony.rs +++ b/crates/swc_plugin_compile_mode/src/transform_harmony.rs @@ -8,110 +8,105 @@ use swc_core::{ self, ast::*, atoms::Atom, - visit::{VisitMut, VisitMutWith}, + visit::{swc_ecma_ast, VisitMut, VisitMutWith}, }, }; use std::collections::HashMap; -use std::rc::Rc; use std::collections::HashSet; use crate::PluginConfig; use crate::utils::{self, constants::*, harmony::components::*}; - pub struct PreVisitor { - is_in_jsx_expr_container: Rc, - is_in_and_expr: bool, } + +pub enum EtsDirection { + Row, + Column, +} + impl PreVisitor { fn new () -> Self { - Self { - is_in_jsx_expr_container: Rc::new(true), - is_in_and_expr: false, - } + Self {} + } + fn process_cond_expr (&self, expr: &mut CondExpr) { + let test = &expr.test; + let cons = &mut expr.cons; + let compile_if = utils::create_jsx_expr_attr(COMPILE_IF, test.clone()); + let process_cond_arm = |arm: &mut Box, attr: JSXAttrOrSpread| { + match &mut **arm { + Expr::JSXElement(el) => { + el.opening.attrs.push(attr); + }, + Expr::Cond(cond_expr) => { + self.process_cond_expr(cond_expr); + }, + _ => () + } + }; + process_cond_arm(cons, compile_if); } } impl VisitMut for PreVisitor { - fn visit_mut_jsx_expr_container (&mut self, container: &mut JSXExprContainer) { - let _counter = Rc::clone(&self.is_in_jsx_expr_container); - // TODO 目前的判断可能误伤函数内的三元表达式、条件表达式 - container.visit_mut_children_with(self); - } - fn visit_mut_expr (&mut self, expr: &mut Expr) { - if Rc::strong_count(&self.is_in_jsx_expr_container) == 1 { return }; - let mut is_first_and_expr = false; - - // is_in_and_expr 为 false 时，表示为当前 expr 的第一个 && 表达式，即当出现 aa && bb && 这种表达式时，只会处理最右侧的 && 表达式 - match expr { - // 将 aa && 转换为 aa ? : - Expr::Bin(BinExpr { op, left, right, ..}) => { - // C&&A 替换为 C?A:A'，原因是为了无论显示还是隐藏都保留一个元素，从而不影响兄弟节点的变量路径 - if *op == op!("&&") && !self.is_in_and_expr { - is_first_and_expr = true; - fn inject_compile_if (el: &mut Box, condition: &mut Box) -> () { - el.opening.attrs.push(utils::create_jsx_expr_attr(COMPILE_IF, condition.clone())); - } - fn get_element_double (element_name: JSXElementName, condition: &mut Box, right: &mut Box) -> Expr { - Expr::Cond(CondExpr { - span, - test: condition.take(), - cons: right.take(), - alt: Box::new(utils::create_self_closing_jsx_element_expr( - element_name, // element 替换为同类型的元素。在显示/隐藏切换时，让运行时 diff 只更新必要属性而不是整个节点刷新 - Some(vec![utils::create_jsx_bool_attr(COMPILE_IGNORE)] - ))) - }) - } - match &mut **right { - Expr::JSXElement(el) => { - let element_name = el.opening.name.clone(); - inject_compile_if(el, left); - *expr = get_element_double(element_name, left, right); - }, - Expr::Paren(ParenExpr { expr: paren_expr, .. }) => { - if paren_expr.is_jsx_element() { - let el: &mut Box = paren_expr.as_mut_jsx_element().unwrap(); - let element_name = el.opening.name.clone(); - inject_compile_if(el, left); - *expr = get_element_double(element_name, left, paren_expr); - } - }, - Expr::Lit(_) => { - *expr = Expr::Cond(CondExpr { + fn visit_mut_jsx_element_child (&mut self, child: &mut JSXElementChild) { + if let JSXElementChild::JSXExprContainer(JSXExprContainer { expr: JSXExpr::Expr(expr), .. }) = child { + if let Expr::Paren(ParenExpr { expr: e, .. }) = &mut **expr { + *expr = e.take(); + } + + match &mut **expr { + // 将 aa && 转换为 aa ? : + Expr::Bin(BinExpr { op, left, right, ..}) => { + // C&&A 替换为 C?A:A'，原因是为了无论显示还是隐藏都保留一个元素，从而不影响兄弟节点的变量路径 + if *op == op!("&&") { + fn inject_compile_if (el: &mut Box, condition: &mut Box) -> () { + el.opening.attrs.push(utils::create_jsx_expr_attr(COMPILE_IF, condition.clone())); + } + fn get_element_double (condition: &mut Box, right: &mut Box) -> Expr { + Expr::Cond(CondExpr { span, - test: left.take(), + test: condition.take(), cons: right.take(), - alt: Box::new(Expr::Lit(Lit::Str(Str { span, value: String::new().into(), raw: None }))) + alt: Box::new(utils::create_self_closing_jsx_element_expr( + JSXElementName::Ident(swc_ecma_ast::Ident::new( + "View".into(), + span // 使用适当的 Span + )), // element 替换为同类型的元素。在显示/隐藏切换时，让运行时 diff 只更新必要属性而不是整个节点刷新 + Some(vec![utils::create_jsx_bool_attr(COMPILE_IGNORE)] + ))) }) - }, - _ => { - // TODO Unknown fallback to template - println!("unknown expr: {right:?}"); + } + match &mut **right { + Expr::JSXElement(el) => { + inject_compile_if(el, left); + **expr = get_element_double(left, right); + }, + Expr::Paren(ParenExpr { expr: paren_expr, .. }) => { + if paren_expr.is_jsx_element() { + let el: &mut Box = paren_expr.as_mut_jsx_element().unwrap(); + inject_compile_if(el, left); + **expr = get_element_double(left, paren_expr); + } + }, + Expr::Lit(_) => { + **expr = Expr::Cond(CondExpr { + span, + test: left.take(), + cons: right.take(), + alt: Box::new(Expr::Lit(Lit::Str(Str { span, value: String::new().into(), raw: None }))) + }) + }, + _ => () } } - } - }, - Expr::Cond(CondExpr { test, cons, ..}) => { - let compile_if = utils::create_jsx_expr_attr(COMPILE_IF, test.clone()); - let process_cond_arm = |arm: &mut Box, attr: JSXAttrOrSpread| { - match &mut **arm { - Expr::JSXElement(el) => { - el.opening.attrs.push(attr); - }, - _ => () - } - }; - process_cond_arm(cons, compile_if); - }, - _ => (), - } - - if is_first_and_expr { - self.is_in_and_expr = true; - } - - expr.visit_mut_children_with(self); + }, + Expr::Cond(cond_expr) => { + self.process_cond_expr(cond_expr); + }, + _ => (), + } - if is_first_and_expr { - self.is_in_and_expr = false; + expr.visit_mut_children_with(self); + } else { + child.visit_mut_children_with(self); } } } @@ -171,13 +166,15 @@ impl TransformVisitor { Some(_) => { // 事件的处理，根据事件添加对应的 ets 事件处理函数 let event_string: String = self.build_ets_event(opening_element); + let element_direction: EtsDirection = self.build_ets_direction(opening_element); - // 判断 el 的子元素是否只有一个循环，如果是的话，直接使用 createNode 来生成后续子节点 + // 判断 el 的子元素是否只有一个循环，如果是的话，直接使用 createLazyChildren 来生成后续子节点 let is_loop_exist = utils::check_jsx_element_children_exist_loop(el); - let mut children = utils::create_original_node_renderer(self); + let mut children = utils::create_original_node_renderer_foreach(self); if !is_loop_exist { - children = self.build_ets_children(el); + let (ets_children, ..) = self.build_ets_children(&mut el.children, None); + children = ets_children; } // 当前 node_name 节点树已全部递归完毕 @@ -188,7 +185,7 @@ impl TransformVisitor { let mut code = match name.as_str() { VIEW_TAG => { self.component_set.insert(name.clone()); - get_view_component_str(&dynmaic_node_name, &children) + get_view_component_str(&dynmaic_node_name, &children, element_direction) }, TEXT_TAG => { self.component_set.insert(name.clone()); @@ -206,7 +203,7 @@ impl TransformVisitor { }, None => { // React 组件 - // 原生自定义组件 + // 原生自定义组件, 不支持自定义组件的跟节点是一个 fragment!! // 半编译暂未支持的组件 utils::create_original_node_renderer(self) } @@ -218,19 +215,20 @@ impl TransformVisitor { child_string } - fn build_ets_children (&mut self, el: &mut JSXElement) -> String { + fn build_ets_children (&mut self, children: &mut Vec, retain_start_from: Option) -> (String, i32) { let mut children_string = String::new(); - let mut retain_child_counter = 0; + let start = if retain_start_from.is_some() { retain_start_from.unwrap() } else { 0 }; + let mut retain_child_counter = start; // 迭代 el.children - el.children.iter_mut().for_each(|child| { - self.node_stack.entry(self.node_name.last().unwrap().clone()).or_insert(vec![]).push(retain_child_counter); + children.iter_mut().for_each(|child| { + self.push_node_stack(retain_child_counter); match child { JSXElementChild::JSXElement(child_el) => { let child_string = self.build_ets_element(&mut **child_el); children_string.push_str(&child_string); - retain_child_counter = retain_child_counter + 1; + retain_child_counter += 1; }, JSXElementChild::JSXExprContainer(JSXExprContainer { expr: JSXExpr::Expr(jsx_expr), @@ -244,16 +242,22 @@ impl TransformVisitor { Expr::Cond(cond_expr) => { children_string.push_str(self.build_ets_cond_expr(cond_expr).as_str()); }, + Expr::Call(CallExpr { + callee: Callee::Expr(callee_expr), + .. + }) => { + let mut tmpl = utils::create_normal_text_template(self); + if utils::is_render_fn(callee_expr) { + tmpl = utils::create_original_node_renderer(self); + } + children_string.push_str(&tmpl); + }, _ => { - // TODO: 全部当普通文本处理，后续根据前缀是否为 render 来判断是 jsx 还是普通文本，后续会支持 render 开头的函数调用返回 JSX - // Expr::Call(_) - let node_path = self.get_current_node_path(); - let code = utils::add_spaces_to_lines(get_text_component_str(&node_path).as_str()); - self.component_set.insert(TEXT_TAG.to_string()); + let code = utils::create_normal_text_template(self); children_string.push_str(&code); } }; - retain_child_counter = retain_child_counter + 1; + retain_child_counter += 1; }, JSXElementChild::JSXText(jsx_text) => { let content = utils::jsx_text_to_string(&jsx_text.value); @@ -262,17 +266,26 @@ impl TransformVisitor { let code = utils::add_spaces_to_lines(get_text_component_str(¤t_path).as_str()); children_string.push_str(code.as_str()); - self.component_set.insert(TEXT_TAG.to_string()); - retain_child_counter = retain_child_counter + 1; + self.component_set.insert(TEXT_TAG.clone().to_string()); + retain_child_counter += 1; + } + }, + JSXElementChild::JSXFragment(child_el) => { + self.pop_node_stack(); + let (child_string, inner_retain) = self.build_ets_children(&mut child_el.children, Some(retain_child_counter)); + children_string.push_str(&child_string); + if inner_retain != 0 { + retain_child_counter += inner_retain; } + self.push_node_stack(retain_child_counter); }, _ => (), } - self.node_stack.entry(self.node_name.last().unwrap().clone()).or_insert(vec![]).pop(); + self.pop_node_stack(); }); - children_string + (children_string, retain_child_counter - start) } fn build_ets_cond_expr (&mut self, cond_expr: &mut CondExpr) -> String { @@ -303,7 +316,7 @@ impl TransformVisitor { let alt_children_string = process_condition_expr(&mut cond_expr.alt); let cons_children_string = process_condition_expr(&mut cond_expr.cons as &mut Box); - children_string.push_str(format!("if (this.{}._attrs.compileIf) {{\n{}}}", self.get_current_node_path(), cons_children_string).as_str()); + children_string.push_str(format!("if ((this.{} as TaroElement)._attrs.compileIf) {{\n{}}}", self.get_current_node_path(), cons_children_string).as_str()); if !alt_children_string.is_empty() { children_string.push_str(format!(" else {{\n{}}}", alt_children_string).as_str()); } @@ -356,6 +369,65 @@ impl TransformVisitor { return true; } + fn build_ets_direction (&self, opening_element: &mut JSXOpeningElement) -> EtsDirection { + // 判断 opening_element 中的 attrs.style._flexDirection 属性，如果值是 FlexDirection.Row,则返回 EtsDirection.Row，否则返回 EtsDirection.Column + let mut direction = EtsDirection::Column; + let mut is_flex = false; + for attr in opening_element.attrs.iter_mut() { + if let JSXAttrOrSpread::JSXAttr(jsx_attr) = attr { + if let JSXAttrName::Ident(Ident { sym: name, .. }) = &jsx_attr.name { + let jsx_attr_name = name.to_string(); + if jsx_attr_name == DIRECTION_ATTR { + if let Some(JSXAttrValue::Lit(Lit::Str(Str { value, .. }))) = &jsx_attr.value { + if value == "row" { + direction = EtsDirection::Row; + } + } + } else if jsx_attr_name == STYLE_ATTR { + if let Some(JSXAttrValue::JSXExprContainer(JSXExprContainer { expr, .. })) = &mut jsx_attr.value { + if let JSXExpr::Expr(expr) = expr { + if let Expr::Object(ObjectLit { props, .. }) = &mut **expr { + for prop in props.iter_mut() { + if let PropOrSpread::Prop(prop) = prop { + if let Prop::KeyValue(KeyValueProp { key, value, .. }) = &mut **prop { + if let PropName::Ident(Ident { sym: name, .. }) = key { + // 判断 display 是否为 flex 且 _flexDirection 为 FlexDirection.Column，如果是则返回 EtsDirection.Column，否则返回 EtsDirection.Row + if name == "display" { + if let Expr::Lit(Lit::Str(Str { value, .. })) = &mut **value { + if value == "flex" && is_flex == false { + direction = EtsDirection::Row; + } + } + } + + if name == "_flexDirection" { + is_flex = true; + // 判断 value 是否为 attrs.style._flexDirection: FlexDirection.Row 变量 + if let Expr::Member(MemberExpr { obj, prop, .. } ) = &mut **value { + if let Expr::Ident(Ident{ sym: obj_name, .. }) = &mut **obj { + if let MemberProp::Ident(Ident{ sym: prop_name, .. }) = &mut *prop { + if obj_name == "FlexDirection" && prop_name == "Column" { + direction = EtsDirection::Column; + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + } + + direction + } + fn build_ets_event (&self, opening_element: &mut JSXOpeningElement) -> String { let mut event_string = String::new(); @@ -386,7 +458,7 @@ impl TransformVisitor { event_string } - fn get_current_node_path (&self) -> String { + pub fn get_current_node_path (&self) -> String { let current_node_name = self.node_name.last().unwrap().clone(); let current_node_stack = match self.node_stack.get(¤t_node_name) { Some(stack) => stack, @@ -399,6 +471,14 @@ impl TransformVisitor { return acc; }) } + + pub fn pop_node_stack (&mut self) { + self.node_stack.entry(self.node_name.last().unwrap().clone()).or_insert(vec![]).pop(); + } + + pub fn push_node_stack (&mut self, index: i32) { + self.node_stack.entry(self.node_name.last().unwrap().clone()).or_insert(vec![]).push(index); + } } impl VisitMut for TransformVisitor { @@ -429,7 +509,7 @@ impl VisitMut for TransformVisitor { let tmpl_build_contents = format!("build() {{\n{content}}}", content = self.build_ets_element(el)); let tmpl_node_declare_contents = self.node_name_vec.iter().fold(String::new(), |mut acc, item| { - acc.push_str(&format!("@State {}: TaroElement = new TaroIgnoreElement()\n", item)); + acc.push_str(&format!("@State {}: TaroElement = new TaroElement('Ignore')\n", item)); return acc; }); let tmpl_main_contents = utils::add_spaces_to_lines(&format!("{}\n{}", tmpl_node_declare_contents, tmpl_build_contents)); @@ -438,18 +518,16 @@ impl VisitMut for TransformVisitor { utils::get_harmony_component_style(self).as_str() + format!( r#"@Component -struct TARO_TEMPLATES_{name} {{ - nodeInfoMap: any = {{}} - dynamicCenter: DynamicCenter - @ObjectLink node: TaroElement +export default struct TARO_TEMPLATES_{name} {{ + node: TaroViewElement = new TaroElement('Ignore') + + dynamicCenter: DynamicCenter = new DynamicCenter() aboutToAppear () {{ - this.dynamicCenter = new DynamicCenter() this.dynamicCenter.bindComponentToNodeWithDFS(this.node, this) }} {content}}} -export default TARO_TEMPLATES_{name} "#, name = tmpl_name, content = tmpl_main_contents diff --git a/crates/swc_plugin_compile_mode/src/utils/constants.rs b/crates/swc_plugin_compile_mode/src/utils/constants.rs index 17538c2947b5..5f4ad43358ec 100644 --- a/crates/swc_plugin_compile_mode/src/utils/constants.rs +++ b/crates/swc_plugin_compile_mode/src/utils/constants.rs @@ -16,191 +16,86 @@ pub const VIEW_TAG: &str = "view"; pub const TEXT_TAG: &str = "text"; pub const IMAGE_TAG: &str = "image"; -pub const HARMONY_IMPORTER: &str = "import { FlexManager } from './utils/FlexManager' -import { getNodeThresholds, getNormalAttributes, getTextAttributes } from './utils/helper' -import { TaroIgnoreElement, eventHandler, DynamicCenter, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '../runtime' -import type { TaroElement } from '../runtime' -import { TOUCH_EVENT_MAP } from './utils/constant/event' +pub const STYLE_ATTR: &str = "style"; +pub const DIRECTION_ATTR: &str = "harmonyDirection"; + +pub const HARMONY_IMPORTER: &str = "import { + FlexManager, + DynamicCenter, + getButtonColor, + TOUCH_EVENT_MAP, + getFontAttributes, + commonStyleModify, + getNodeThresholds, + BUTTON_THEME_COLOR, + getNormalAttributes +} from '@tarojs/components' +import { NodeType, convertNumber2VP, TaroElement, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '@tarojs/runtime' +import { createLazyChildren, createChildItem } from '../render' + +import type { HarmonyStyle, TaroButtonElement, TaroViewElement, TaroAny, TaroStyleType, TaroTextStyleType } from '@tarojs/runtime' + "; -pub const HARMONY_FLEX_STYLE_BIND: &str = r#"@Extend(Flex) -function attrs ({ - flexBasis, - flexGrow, - flexShrink, - alignSelf, - clip, - width, - height, - margin, - padding, - linearGradient, - zIndex, - borderStyle, - borderWidth, - borderColor, - borderRadius, - opacity, - backgroundColor, - backgroundImage, - backgroundRepeat, - backgroundImageSize, - constraintSize, - rotate, - scale, - translate, - transform -}) { - .flexGrow(flexGrow) - .flexShrink(flexShrink) - .flexBasis(flexBasis) - .alignSelf(alignSelf) - .width(width) - .height(height) - .constraintSize(constraintSize) - .margin(margin) - .padding(padding) - .linearGradient(linearGradient) - .zIndex(zIndex) - .borderStyle(borderStyle) - .borderWidth(borderWidth) - .borderColor(borderColor) - .borderRadius(borderRadius) - .opacity(opacity) - .backgroundColor(backgroundColor) - .backgroundImage(backgroundImage, backgroundRepeat) - .backgroundImageSize(backgroundImageSize) - .rotate(rotate) - .scale(scale) - .translate(translate) - .transform(transform) - .clip(clip) +pub const HARMONY_FLEX_STYLE_BIND: &str = r#"@Extend(Row) +function rowAttrs (style: TaroStyleType) { + .constraintSize({ + minWidth: style.minWidth || style.width, + maxWidth: style.maxWidth, + minHeight: style.minHeight, + maxHeight: style.maxHeight + }) +} +@Extend(Column) +function columnAttrs (style: TaroStyleType) { + .constraintSize({ + minWidth: style.minWidth, + maxWidth: style.maxWidth, + minHeight: style.minHeight || style.height, + maxHeight: style.maxHeight + }) } "#; + pub const HARMONY_TEXT_STYLE_BIND: &str = r#"@Extend(Text) -function attrsText ({ - id, - width, - height, - zIndex, - opacity, - margin, - padding, - decoration, - lineHeight, - letterSpacing, - maxLines, - fontColor, - fontSize, - fontWeight, - fontFamily, - textOverflow, - constraintSize, - border, - borderRadius, - backgroundColor, - backgroundImage, - backgroundRepeat, - backgroundImageSize, - rotate, - scale, - translate, - transform, - textAlign, - }) { - .id(id) - .key(id) - .constraintSize(constraintSize) - .zIndex(zIndex) - .opacity(opacity) - .margin(margin) - .padding(padding) - .decoration(decoration) - .lineHeight(lineHeight) - .letterSpacing(letterSpacing) - .maxLines(maxLines) - .fontColor(fontColor) - .fontSize(fontSize) - .fontWeight(fontWeight) - .fontFamily(fontFamily) - .textOverflow(textOverflow) - .border(border) - .borderRadius(borderRadius) - .backgroundColor(backgroundColor) - .backgroundImage(backgroundImage, backgroundRepeat) - .backgroundImageSize(backgroundImageSize) - .rotate(rotate) - .scale(scale) - .translate(translate) - .transform(transform) - .textAlign(textAlign) - .width(width) - .height(height) +function textNormalFontStyle (style: HarmonyStyle) { + .id(style.id) + .key(style.id) + .opacity(style.opacity) + .fontColor(style.color) + .fontSize(style.fontSize) + .fontWeight(style.fontWeight) + .fontStyle(style.fontStyle) + .fontFamily(style.fontFamily) + .lineHeight(style.lineHeight) + .decoration({ + type: style.textDecoration, + color: style.color + }) } -function getTextAttributes (node: TaroViewElement) { - const attrs = { - ...getNormalAttributes(node), - ...getFontAttributes(node) - } +@Extend(Text) +function textSpecialFontStyle(attr: TaroTextStyleType) { + .textAlign(attr.textAlign) + .textOverflow(attr.textOverflow) + .maxLines(attr.WebkitLineClamp) + .letterSpacing(attr.letterSpacing) +} - transformW3CToHarmonyInStyle(node._st, attrs) +function getButtonFontSize (node: TaroButtonElement) { + const isMini = node._attrs.size === 'mini' - return attrs + return isMini ? convertNumber2VP(26) : convertNumber2VP(36) } "#; -pub const HARMONY_IMAGE_STYLE_BIND: &str = r#"@Extend(Image) -function attrsImage ({ - flexBasis, - flexGrow, - flexShrink, - alignSelf, - clip, - width, - height, - margin, - padding, - linearGradient, - zIndex, - borderStyle, - borderWidth, - borderColor, - borderRadius, - opacity, - backgroundColor, - backgroundImage, - backgroundRepeat, - backgroundImageSize, - constraintSize, - rotate, - scale, - translate, - transform -}) { - .flexGrow(flexGrow) - .flexShrink(flexShrink) - .flexBasis(flexBasis) - .alignSelf(alignSelf) - .width(width) - .height(height) - .constraintSize(constraintSize) - .margin(margin) - .padding(padding) - .linearGradient(linearGradient) - .zIndex(zIndex) - .borderStyle(borderStyle) - .borderWidth(borderWidth) - .borderColor(borderColor) - .borderRadius(borderRadius) - .opacity(opacity) - .backgroundColor(backgroundColor) - .backgroundImage(backgroundImage, backgroundRepeat) - .backgroundImageSize(backgroundImageSize) - .rotate(rotate) - .scale(scale) - .translate(translate) - .transform(transform) - .clip(clip) - .objectFit(ImageFit.Contain) +pub const HARMONY_IMAGE_STYLE_BIND: &str = r#"function getImageMode (mode: string): ImageFit { + switch (mode) { + case 'aspectFit': return ImageFit.Contain + case 'aspectFill': return ImageFit.Cover + case 'scaleToFill': return ImageFit.Fill + case 'widthFix': return ImageFit.Auto + case 'heightFix': return ImageFit.Auto + default: return ImageFit.Contain + } } "#; diff --git a/crates/swc_plugin_compile_mode/src/utils/harmony/components.rs b/crates/swc_plugin_compile_mode/src/utils/harmony/components.rs index bfedd4282f76..00b21afd35cf 100644 --- a/crates/swc_plugin_compile_mode/src/utils/harmony/components.rs +++ b/crates/swc_plugin_compile_mode/src/utils/harmony/components.rs @@ -1,49 +1,73 @@ +use crate::{transform_harmony::EtsDirection, utils}; + pub fn get_component_attr_str (node_name: &str, tag_name: &str) -> String { if tag_name == "text" { - format!(".attrsText(getTextAttributes(this.{}))", node_name) - } else if tag_name == "image" { - format!(".attrsImage(getNormalAttributes(this.{}))", node_name) + format!(".attributeModifier(commonStyleModify.setNode(this.{} as TaroElement))\n.textSpecialFontStyle(getFontAttributes(this.{} as TaroElement))", node_name, node_name) + } else if tag_name == "row" { + format!(".attributeModifier(commonStyleModify.setNode(this.{} as TaroElement))\n.rowAttrs(getNormalAttributes(this.{} as TaroElement))", node_name, node_name) + } else if tag_name == "column" { + format!(".attributeModifier(commonStyleModify.setNode(this.{} as TaroElement))\n.columnAttrs(getNormalAttributes(this.{} as TaroElement))", node_name, node_name) } else { - format!(".attrs(getNormalAttributes(this.{}))", node_name) + format!(".attributeModifier(commonStyleModify.setNode(this.{} as TaroElement))", node_name) } } pub fn get_component_style_str (node_name: &str, tag_name: &str) -> String { format!( r#"{} -.onVisibleAreaChange(getNodeThresholds(this.{node_id}) || [0.0, 1.0], getComponentEventCallback(this.{node_id}, VISIBLE_CHANGE_EVENT_NAME)) -.onAreaChange(getComponentEventCallback(this.{node_id}, AREA_CHANGE_EVENT_NAME, ({{ eventResult }}) => {{ - const [_, areaResult] = eventResult - this.nodeInfoMap[this.{node_id}._nid].areaInfo = areaResult +.onVisibleAreaChange(getNodeThresholds(this.{node_id} as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.{node_id} as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) +.onAreaChange(getComponentEventCallback(this.{node_id} as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {{ + (this.{node_id} as TaroElement)._nodeInfo.areaInfo = res[1] }}))"#, get_component_attr_str(node_name, tag_name), node_id = node_name, ) } - -pub fn get_view_component_str (node_name: &str, child_content: &str) -> String { - format!("Flex(FlexManager.flexOptions(this.{node_id})) {{{children}}}\n{style}", +pub fn get_view_component_str (node_name: &str, child_content: &str, direction: EtsDirection) -> String { + let container = match direction { + EtsDirection::Row => "Row", + EtsDirection::Column => "Column" + }; + let container_align_type = match direction { + EtsDirection::Row => "VerticalAlign", + EtsDirection::Column => "HorizontalAlign" + }; + format!("{container}() {{{children}}}\n{style}\n.alignItems(FlexManager.flexOptions(this.{node_id} as TaroElement).alignItems as {container_align_type})\n.justifyContent(FlexManager.flexOptions(this.{node_id} as TaroElement).justifyContent)", + container = container, + container_align_type = container_align_type, node_id = node_name, children = match child_content { "" => "".to_string(), _ => format!("\n{}", child_content) }, - style = get_component_style_str(node_name, "view") + style = get_component_style_str(node_name, container.to_lowercase().as_str()), ) } pub fn get_image_component_str (node_name: &str) -> String { - format!("Image(this.{node_id}.getAttribute('src'))\n{style}", + format!("Image((this.{node_id} as TaroElement).getAttribute('src'))\n.objectFit(getImageMode((this.{node_id} as TaroElement).getAttribute('mode')))\n{style}", node_id = node_name, style = get_component_style_str(node_name, "image") ) } pub fn get_text_component_str (node_name: &str) -> String { - format!("Text(this.{node_id}.textContent)\n{style}", - node_id = node_name, - style = get_component_style_str(node_name, "text") + format!( +"if (this.{node_id}.nodeType === NodeType.TEXT_NODE && this.{node_id}.parentNode) {{ + if ((this.{node_id}.parentNode as TaroButtonElement).tagName === 'BUTTON') {{ + Text(this.{node_id}.textContent)\n{style} .fontSize((this.{node_id}.parentNode as TaroButtonElement).hmStyle.fontSize || getButtonFontSize((this.{node_id}.parentNode as TaroButtonElement))) + .fontColor((this.{node_id}.parentNode as TaroButtonElement).hmStyle.color || getButtonColor(this.{node_id}.parentNode as TaroButtonElement, BUTTON_THEME_COLOR.get((this.{node_id}.parentNode as TaroButtonElement)._attrs.type).text)) + }} else {{ + Text(this.{node_id}.textContent)\n{style} }} +}} else {{ + Text(this.{node_id}.textContent) + .onClick((e: ClickEvent) => eventHandler(e, 'click', this.{node_id} as TaroElement)) + .textNormalFontStyle(getNormalAttributes(this.{node_id}))\n{style_with_event}}} +", + node_id = node_name, + style = utils::add_spaces_to_lines_with_count(&get_component_attr_str(node_name, "text"), 4), + style_with_event = utils::add_spaces_to_lines_with_count(&get_component_style_str(node_name, "text"), 2) ) } @@ -51,11 +75,11 @@ pub fn get_text_component_str (node_name: &str) -> String { pub fn create_component_event (event_name: &str, node_name: &str) -> String { let process_event_trigger_name = |name: &str| -> String { if name == "touch" { - String::from("TOUCH_EVENT_MAP[e.type]") + String::from("TOUCH_EVENT_MAP.get(e.type)") } else { format!("'{}'", name) } }; - - format!("\n.{}(e => eventHandler(e, {}, this.{}))", event_name, process_event_trigger_name(&event_name.get(2..).unwrap().to_lowercase()), node_name) + + format!("\n.{}(e => eventHandler(e, {}, this.{} as TaroElement))", event_name, process_event_trigger_name(&event_name.get(2..).unwrap().to_lowercase()), node_name) } diff --git a/crates/swc_plugin_compile_mode/src/utils/mod.rs b/crates/swc_plugin_compile_mode/src/utils/mod.rs index cc41829302a2..f120d1cd7fd4 100644 --- a/crates/swc_plugin_compile_mode/src/utils/mod.rs +++ b/crates/swc_plugin_compile_mode/src/utils/mod.rs @@ -12,7 +12,7 @@ use swc_core::{ }; use std::collections::HashMap; -use self::constants::*; +use self::{constants::*, harmony::components::get_text_component_str}; use crate::PluginConfig; use crate::transform_harmony::TransformVisitor; @@ -201,8 +201,7 @@ pub fn create_jsx_dynamic_id (el: &mut JSXElement, visitor: &mut TransformVisito node_name } -pub fn add_spaces_to_lines(input: &str) -> String { - let count = 2; +pub fn add_spaces_to_lines_with_count(input: &str, count: usize) -> String { let mut result = String::new(); for line in input.lines() { @@ -213,6 +212,12 @@ pub fn add_spaces_to_lines(input: &str) -> String { result } +pub fn add_spaces_to_lines(input: &str) -> String { + let count = 2; + + add_spaces_to_lines_with_count(input, count) +} + pub fn get_harmony_component_style (visitor: &mut TransformVisitor) -> String { let component_set = &visitor.component_set; let mut harmony_component_style = String::new(); @@ -222,7 +227,7 @@ pub fn get_harmony_component_style (visitor: &mut TransformVisitor) -> String { harmony_component_style.push_str(component_style); } }; - + build_component(VIEW_TAG, HARMONY_FLEX_STYLE_BIND); build_component(IMAGE_TAG, HARMONY_IMAGE_STYLE_BIND); build_component(TEXT_TAG, HARMONY_TEXT_STYLE_BIND); @@ -328,8 +333,21 @@ pub fn check_jsx_element_children_exist_loop (el: &mut JSXElement) -> bool { false } +pub fn create_original_node_renderer_foreach (visitor: &mut TransformVisitor) -> String { + add_spaces_to_lines(format!("createLazyChildren(this.{})", visitor.get_current_node_path()).as_str()) +} + pub fn create_original_node_renderer (visitor: &mut TransformVisitor) -> String { - add_spaces_to_lines(format!("ForEach(this.{}.childNodes, item => {{\n createNode(item)\n}}, item => item._nid)", visitor.node_name.last().unwrap().clone()).as_str()) + add_spaces_to_lines(format!("createChildItem(this.{} as TaroElement)", visitor.get_current_node_path()).as_str()) +} + +pub fn create_normal_text_template (visitor: &mut TransformVisitor) -> String { + let node_path = visitor.get_current_node_path(); + let code = add_spaces_to_lines(get_text_component_str(&node_path).as_str()); + + visitor.component_set.insert(TEXT_TAG.clone().to_string()); + + code } pub fn gen_template_v (node_path: &str) -> String { diff --git a/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/attributes.rs/should_handle_events.js b/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/attributes.rs/should_handle_events.js index f12900f30938..1dd625adddd7 100644 --- a/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/attributes.rs/should_handle_events.js +++ b/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/attributes.rs/should_handle_events.js @@ -1,190 +1,128 @@ -const TARO_TEMPLATES_f0t0 = `import { FlexManager } from './utils/FlexManager' -import { getNodeThresholds, getNormalAttributes, getTextAttributes } from './utils/helper' -import { TaroIgnoreElement, eventHandler, DynamicCenter, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '../runtime' -import type { TaroElement } from '../runtime' -import { TOUCH_EVENT_MAP } from './utils/constant/event' -@Extend(Flex) -function attrs ({ - flexBasis, - flexGrow, - flexShrink, - alignSelf, - clip, - width, - height, - margin, - padding, - linearGradient, - zIndex, - borderStyle, - borderWidth, - borderColor, - borderRadius, - opacity, - backgroundColor, - backgroundImage, - backgroundRepeat, - backgroundImageSize, - constraintSize, - rotate, - scale, - translate, - transform -}) { - .flexGrow(flexGrow) - .flexShrink(flexShrink) - .flexBasis(flexBasis) - .alignSelf(alignSelf) - .width(width) - .height(height) - .constraintSize(constraintSize) - .margin(margin) - .padding(padding) - .linearGradient(linearGradient) - .zIndex(zIndex) - .borderStyle(borderStyle) - .borderWidth(borderWidth) - .borderColor(borderColor) - .borderRadius(borderRadius) - .opacity(opacity) - .backgroundColor(backgroundColor) - .backgroundImage(backgroundImage, backgroundRepeat) - .backgroundImageSize(backgroundImageSize) - .rotate(rotate) - .scale(scale) - .translate(translate) - .transform(transform) - .clip(clip) +const TARO_TEMPLATES_f0t0 = `import { createLazyChildren, createChildItem } from '../render' +import commonStyleModify from '@tarojs/components/style' +import { getButtonColor } from '@tarojs/components/button' +import { FlexManager } from '@tarojs/components/utils/flexManager' +import { TOUCH_EVENT_MAP } from '@tarojs/components/utils/constant/event' +import { BUTTON_THEME_COLOR } from '@tarojs/components/utils/constant/style' +import { getNodeThresholds, getNormalAttributes, getFontAttributes } from '@tarojs/components/utils/helper' +import { NodeType, convertNumber2VP, TaroElement, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '@tarojs/runtime' +import { DynamicCenter } from '@tarojs/components/utils/DynamicCenter' + +import type { HarmonyStyle, TaroButtonElement, TaroViewElement, TaroAny, TaroStyleType, TaroTextStyleType } from '@tarojs/runtime' + +@Extend(Row) +function rowAttrs (style: TaroStyleType) { + .constraintSize({ + minWidth: style.minWidth || style.width, + maxWidth: style.maxWidth, + minHeight: style.minHeight, + maxHeight: style.maxHeight + }) } -@Extend(Image) -function attrsImage ({ - flexBasis, - flexGrow, - flexShrink, - alignSelf, - clip, - width, - height, - margin, - padding, - linearGradient, - zIndex, - borderStyle, - borderWidth, - borderColor, - borderRadius, - opacity, - backgroundColor, - backgroundImage, - backgroundRepeat, - backgroundImageSize, - constraintSize, - rotate, - scale, - translate, - transform -}) { - .flexGrow(flexGrow) - .flexShrink(flexShrink) - .flexBasis(flexBasis) - .alignSelf(alignSelf) - .width(width) - .height(height) - .constraintSize(constraintSize) - .margin(margin) - .padding(padding) - .linearGradient(linearGradient) - .zIndex(zIndex) - .borderStyle(borderStyle) - .borderWidth(borderWidth) - .borderColor(borderColor) - .borderRadius(borderRadius) - .opacity(opacity) - .backgroundColor(backgroundColor) - .backgroundImage(backgroundImage, backgroundRepeat) - .backgroundImageSize(backgroundImageSize) - .rotate(rotate) - .scale(scale) - .translate(translate) - .transform(transform) - .clip(clip) - .objectFit(ImageFit.Contain) +@Extend(Column) +function columnAttrs (style: TaroStyleType) { + .constraintSize({ + minWidth: style.minWidth, + maxWidth: style.maxWidth, + minHeight: style.minHeight || style.height, + maxHeight: style.maxHeight + }) +} +function getImageMode (mode: string): ImageFit { + switch (mode) { + case 'aspectFit': return ImageFit.Contain + case 'aspectFill': return ImageFit.Cover + case 'scaleToFill': return ImageFit.Fill + case 'widthFix': return ImageFit.Auto + case 'heightFix': return ImageFit.Auto + default: return ImageFit.Contain + } } @Component -struct TARO_TEMPLATES_f0t0 { - nodeInfoMap: any = {} - dynamicCenter: DynamicCenter - @ObjectLink node: TaroElement +export default struct TARO_TEMPLATES_f0t0 { + node: TaroViewElement = new TaroElement('Ignore') + + dynamicCenter: DynamicCenter = new DynamicCenter() aboutToAppear () { - this.dynamicCenter = new DynamicCenter() this.dynamicCenter.bindComponentToNodeWithDFS(this.node, this) } - @State node0: TaroElement = new TaroIgnoreElement() - @State node1: TaroElement = new TaroIgnoreElement() - @State node2: TaroElement = new TaroIgnoreElement() + @State node0: TaroElement = new TaroElement('Ignore') + @State node1: TaroElement = new TaroElement('Ignore') + @State node2: TaroElement = new TaroElement('Ignore') build() { - Flex(FlexManager.flexOptions(this.node0)) { - Flex(FlexManager.flexOptions(this.node0.childNodes[0])) {} - .attrs(getNormalAttributes(this.node0.childNodes[0])) - .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[0]) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[0], VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node0.childNodes[0], AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node0.childNodes[0]._nid].areaInfo = areaResult + Column() { + Column() {} + .attributeModifier(commonStyleModify.setNode(this.node0.childNodes[0] as TaroElement)) + .columnAttrs(getNormalAttributes(this.node0.childNodes[0] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[0] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[0] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node0.childNodes[0] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node0.childNodes[0] as TaroElement)._nodeInfo.areaInfo = res[1] })) - .onClick(e => eventHandler(e, 'click', this.node0.childNodes[0])) - Flex(FlexManager.flexOptions(this.node0.childNodes[1])) {} - .attrs(getNormalAttributes(this.node0.childNodes[1])) - .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[1]) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[1], VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node0.childNodes[1], AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node0.childNodes[1]._nid].areaInfo = areaResult + .alignItems(FlexManager.flexOptions(this.node0.childNodes[0] as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node0.childNodes[0] as TaroElement).justifyContent) + .onClick(e => eventHandler(e, 'click', this.node0.childNodes[0] as TaroElement)) + Column() {} + .attributeModifier(commonStyleModify.setNode(this.node0.childNodes[1] as TaroElement)) + .columnAttrs(getNormalAttributes(this.node0.childNodes[1] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[1] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[1] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node0.childNodes[1] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node0.childNodes[1] as TaroElement)._nodeInfo.areaInfo = res[1] })) - .onClick(e => eventHandler(e, 'click', this.node0.childNodes[1])) - Flex(FlexManager.flexOptions(this.node1)) {} - .attrs(getNormalAttributes(this.node1)) - .onVisibleAreaChange(getNodeThresholds(this.node1) || [0.0, 1.0], getComponentEventCallback(this.node1, VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node1, AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node1._nid].areaInfo = areaResult + .alignItems(FlexManager.flexOptions(this.node0.childNodes[1] as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node0.childNodes[1] as TaroElement).justifyContent) + .onClick(e => eventHandler(e, 'click', this.node0.childNodes[1] as TaroElement)) + Column() {} + .attributeModifier(commonStyleModify.setNode(this.node1 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node1 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node1 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node1 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node1 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node1 as TaroElement)._nodeInfo.areaInfo = res[1] })) - .onClick(e => eventHandler(e, 'click', this.node1)) - Flex(FlexManager.flexOptions(this.node2)) {} - .attrs(getNormalAttributes(this.node2)) - .onVisibleAreaChange(getNodeThresholds(this.node2) || [0.0, 1.0], getComponentEventCallback(this.node2, VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node2, AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node2._nid].areaInfo = areaResult + .alignItems(FlexManager.flexOptions(this.node1 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node1 as TaroElement).justifyContent) + .onClick(e => eventHandler(e, 'click', this.node1 as TaroElement)) + Column() {} + .attributeModifier(commonStyleModify.setNode(this.node2 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node2 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node2 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node2 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node2 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node2 as TaroElement)._nodeInfo.areaInfo = res[1] })) - Image(this.node0.childNodes[4].getAttribute('src')) - .attrsImage(getNormalAttributes(this.node0.childNodes[4])) - .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[4]) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[4], VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node0.childNodes[4], AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node0.childNodes[4]._nid].areaInfo = areaResult + .alignItems(FlexManager.flexOptions(this.node2 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node2 as TaroElement).justifyContent) + Image((this.node0.childNodes[4] as TaroElement).getAttribute('src')) + .objectFit(getImageMode((this.node0.childNodes[4] as TaroElement).getAttribute('mode'))) + .attributeModifier(commonStyleModify.setNode(this.node0.childNodes[4] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[4] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[4] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node0.childNodes[4] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node0.childNodes[4] as TaroElement)._nodeInfo.areaInfo = res[1] })) - .onComplete(e => eventHandler(e, 'complete', this.node0.childNodes[4])) - Flex(FlexManager.flexOptions(this.node0.childNodes[5])) {} - .attrs(getNormalAttributes(this.node0.childNodes[5])) - .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[5]) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[5], VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node0.childNodes[5], AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node0.childNodes[5]._nid].areaInfo = areaResult + .onComplete(e => eventHandler(e, 'complete', this.node0.childNodes[4] as TaroElement)) + Column() {} + .attributeModifier(commonStyleModify.setNode(this.node0.childNodes[5] as TaroElement)) + .columnAttrs(getNormalAttributes(this.node0.childNodes[5] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[5] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[5] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node0.childNodes[5] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node0.childNodes[5] as TaroElement)._nodeInfo.areaInfo = res[1] })) - .onClick(e => eventHandler(e, 'click', this.node0.childNodes[5])) - .onTouch(e => eventHandler(e, TOUCH_EVENT_MAP[e.type], this.node0.childNodes[5])) + .alignItems(FlexManager.flexOptions(this.node0.childNodes[5] as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node0.childNodes[5] as TaroElement).justifyContent) + .onClick(e => eventHandler(e, 'click', this.node0.childNodes[5] as TaroElement)) + .onTouch(e => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node0.childNodes[5] as TaroElement)) } - .attrs(getNormalAttributes(this.node0)) - .onVisibleAreaChange(getNodeThresholds(this.node0) || [0.0, 1.0], getComponentEventCallback(this.node0, VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node0, AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node0._nid].areaInfo = areaResult + .attributeModifier(commonStyleModify.setNode(this.node0 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node0 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node0 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node0 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node0 as TaroElement)._nodeInfo.areaInfo = res[1] })) + .alignItems(FlexManager.flexOptions(this.node0 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node0 as TaroElement).justifyContent) } } -export default TARO_TEMPLATES_f0t0 `; function Index() { return diff --git a/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/attributes.rs/should_turn_dynamic_attrs.js b/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/attributes.rs/should_turn_dynamic_attrs.js index 70710c618853..4f157b484357 100644 --- a/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/attributes.rs/should_turn_dynamic_attrs.js +++ b/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/attributes.rs/should_turn_dynamic_attrs.js @@ -1,196 +1,134 @@ -const TARO_TEMPLATES_f0t0 = `import { FlexManager } from './utils/FlexManager' -import { getNodeThresholds, getNormalAttributes, getTextAttributes } from './utils/helper' -import { TaroIgnoreElement, eventHandler, DynamicCenter, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '../runtime' -import type { TaroElement } from '../runtime' -import { TOUCH_EVENT_MAP } from './utils/constant/event' -@Extend(Flex) -function attrs ({ - flexBasis, - flexGrow, - flexShrink, - alignSelf, - clip, - width, - height, - margin, - padding, - linearGradient, - zIndex, - borderStyle, - borderWidth, - borderColor, - borderRadius, - opacity, - backgroundColor, - backgroundImage, - backgroundRepeat, - backgroundImageSize, - constraintSize, - rotate, - scale, - translate, - transform -}) { - .flexGrow(flexGrow) - .flexShrink(flexShrink) - .flexBasis(flexBasis) - .alignSelf(alignSelf) - .width(width) - .height(height) - .constraintSize(constraintSize) - .margin(margin) - .padding(padding) - .linearGradient(linearGradient) - .zIndex(zIndex) - .borderStyle(borderStyle) - .borderWidth(borderWidth) - .borderColor(borderColor) - .borderRadius(borderRadius) - .opacity(opacity) - .backgroundColor(backgroundColor) - .backgroundImage(backgroundImage, backgroundRepeat) - .backgroundImageSize(backgroundImageSize) - .rotate(rotate) - .scale(scale) - .translate(translate) - .transform(transform) - .clip(clip) +const TARO_TEMPLATES_f0t0 = `import { createLazyChildren, createChildItem } from '../render' +import commonStyleModify from '@tarojs/components/style' +import { getButtonColor } from '@tarojs/components/button' +import { FlexManager } from '@tarojs/components/utils/flexManager' +import { TOUCH_EVENT_MAP } from '@tarojs/components/utils/constant/event' +import { BUTTON_THEME_COLOR } from '@tarojs/components/utils/constant/style' +import { getNodeThresholds, getNormalAttributes, getFontAttributes } from '@tarojs/components/utils/helper' +import { NodeType, convertNumber2VP, TaroElement, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '@tarojs/runtime' +import { DynamicCenter } from '@tarojs/components/utils/DynamicCenter' + +import type { HarmonyStyle, TaroButtonElement, TaroViewElement, TaroAny, TaroStyleType, TaroTextStyleType } from '@tarojs/runtime' + +@Extend(Row) +function rowAttrs (style: TaroStyleType) { + .constraintSize({ + minWidth: style.minWidth || style.width, + maxWidth: style.maxWidth, + minHeight: style.minHeight, + maxHeight: style.maxHeight + }) } -@Extend(Image) -function attrsImage ({ - flexBasis, - flexGrow, - flexShrink, - alignSelf, - clip, - width, - height, - margin, - padding, - linearGradient, - zIndex, - borderStyle, - borderWidth, - borderColor, - borderRadius, - opacity, - backgroundColor, - backgroundImage, - backgroundRepeat, - backgroundImageSize, - constraintSize, - rotate, - scale, - translate, - transform -}) { - .flexGrow(flexGrow) - .flexShrink(flexShrink) - .flexBasis(flexBasis) - .alignSelf(alignSelf) - .width(width) - .height(height) - .constraintSize(constraintSize) - .margin(margin) - .padding(padding) - .linearGradient(linearGradient) - .zIndex(zIndex) - .borderStyle(borderStyle) - .borderWidth(borderWidth) - .borderColor(borderColor) - .borderRadius(borderRadius) - .opacity(opacity) - .backgroundColor(backgroundColor) - .backgroundImage(backgroundImage, backgroundRepeat) - .backgroundImageSize(backgroundImageSize) - .rotate(rotate) - .scale(scale) - .translate(translate) - .transform(transform) - .clip(clip) - .objectFit(ImageFit.Contain) +@Extend(Column) +function columnAttrs (style: TaroStyleType) { + .constraintSize({ + minWidth: style.minWidth, + maxWidth: style.maxWidth, + minHeight: style.minHeight || style.height, + maxHeight: style.maxHeight + }) +} +function getImageMode (mode: string): ImageFit { + switch (mode) { + case 'aspectFit': return ImageFit.Contain + case 'aspectFill': return ImageFit.Cover + case 'scaleToFill': return ImageFit.Fill + case 'widthFix': return ImageFit.Auto + case 'heightFix': return ImageFit.Auto + default: return ImageFit.Contain + } } @Component -struct TARO_TEMPLATES_f0t0 { - nodeInfoMap: any = {} - dynamicCenter: DynamicCenter - @ObjectLink node: TaroElement +export default struct TARO_TEMPLATES_f0t0 { + node: TaroViewElement = new TaroElement('Ignore') + + dynamicCenter: DynamicCenter = new DynamicCenter() aboutToAppear () { - this.dynamicCenter = new DynamicCenter() this.dynamicCenter.bindComponentToNodeWithDFS(this.node, this) } - @State node0: TaroElement = new TaroIgnoreElement() - @State node1: TaroElement = new TaroIgnoreElement() - @State node2: TaroElement = new TaroIgnoreElement() - @State node3: TaroElement = new TaroIgnoreElement() - @State node4: TaroElement = new TaroIgnoreElement() - @State node5: TaroElement = new TaroIgnoreElement() + @State node0: TaroElement = new TaroElement('Ignore') + @State node1: TaroElement = new TaroElement('Ignore') + @State node2: TaroElement = new TaroElement('Ignore') + @State node3: TaroElement = new TaroElement('Ignore') + @State node4: TaroElement = new TaroElement('Ignore') + @State node5: TaroElement = new TaroElement('Ignore') build() { - Flex(FlexManager.flexOptions(this.node0)) { - Flex(FlexManager.flexOptions(this.node1)) { - Flex(FlexManager.flexOptions(this.node2)) {} - .attrs(getNormalAttributes(this.node2)) - .onVisibleAreaChange(getNodeThresholds(this.node2) || [0.0, 1.0], getComponentEventCallback(this.node2, VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node2, AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node2._nid].areaInfo = areaResult + Column() { + Column() { + Column() {} + .attributeModifier(commonStyleModify.setNode(this.node2 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node2 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node2 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node2 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node2 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node2 as TaroElement)._nodeInfo.areaInfo = res[1] })) - Flex(FlexManager.flexOptions(this.node1.childNodes[1])) {} - .attrs(getNormalAttributes(this.node1.childNodes[1])) - .onVisibleAreaChange(getNodeThresholds(this.node1.childNodes[1]) || [0.0, 1.0], getComponentEventCallback(this.node1.childNodes[1], VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node1.childNodes[1], AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node1.childNodes[1]._nid].areaInfo = areaResult + .alignItems(FlexManager.flexOptions(this.node2 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node2 as TaroElement).justifyContent) + Column() {} + .attributeModifier(commonStyleModify.setNode(this.node1.childNodes[1] as TaroElement)) + .columnAttrs(getNormalAttributes(this.node1.childNodes[1] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node1.childNodes[1] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node1.childNodes[1] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node1.childNodes[1] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node1.childNodes[1] as TaroElement)._nodeInfo.areaInfo = res[1] })) - Flex(FlexManager.flexOptions(this.node3)) { - Flex(FlexManager.flexOptions(this.node4)) {} - .attrs(getNormalAttributes(this.node4)) - .onVisibleAreaChange(getNodeThresholds(this.node4) || [0.0, 1.0], getComponentEventCallback(this.node4, VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node4, AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node4._nid].areaInfo = areaResult + .alignItems(FlexManager.flexOptions(this.node1.childNodes[1] as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node1.childNodes[1] as TaroElement).justifyContent) + Column() { + Column() {} + .attributeModifier(commonStyleModify.setNode(this.node4 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node4 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node4 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node4 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node4 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node4 as TaroElement)._nodeInfo.areaInfo = res[1] })) + .alignItems(FlexManager.flexOptions(this.node4 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node4 as TaroElement).justifyContent) } - .attrs(getNormalAttributes(this.node3)) - .onVisibleAreaChange(getNodeThresholds(this.node3) || [0.0, 1.0], getComponentEventCallback(this.node3, VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node3, AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node3._nid].areaInfo = areaResult + .attributeModifier(commonStyleModify.setNode(this.node3 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node3 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node3 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node3 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node3 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node3 as TaroElement)._nodeInfo.areaInfo = res[1] })) + .alignItems(FlexManager.flexOptions(this.node3 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node3 as TaroElement).justifyContent) } - .attrs(getNormalAttributes(this.node1)) - .onVisibleAreaChange(getNodeThresholds(this.node1) || [0.0, 1.0], getComponentEventCallback(this.node1, VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node1, AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node1._nid].areaInfo = areaResult + .attributeModifier(commonStyleModify.setNode(this.node1 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node1 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node1 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node1 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node1 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node1 as TaroElement)._nodeInfo.areaInfo = res[1] })) - Image(this.node0.childNodes[1].getAttribute('src')) - .attrsImage(getNormalAttributes(this.node0.childNodes[1])) - .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[1]) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[1], VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node0.childNodes[1], AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node0.childNodes[1]._nid].areaInfo = areaResult + .alignItems(FlexManager.flexOptions(this.node1 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node1 as TaroElement).justifyContent) + Image((this.node0.childNodes[1] as TaroElement).getAttribute('src')) + .objectFit(getImageMode((this.node0.childNodes[1] as TaroElement).getAttribute('mode'))) + .attributeModifier(commonStyleModify.setNode(this.node0.childNodes[1] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[1] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[1] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node0.childNodes[1] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node0.childNodes[1] as TaroElement)._nodeInfo.areaInfo = res[1] })) - Image(this.node5.getAttribute('src')) - .attrsImage(getNormalAttributes(this.node5)) - .onVisibleAreaChange(getNodeThresholds(this.node5) || [0.0, 1.0], getComponentEventCallback(this.node5, VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node5, AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node5._nid].areaInfo = areaResult + Image((this.node5 as TaroElement).getAttribute('src')) + .objectFit(getImageMode((this.node5 as TaroElement).getAttribute('mode'))) + .attributeModifier(commonStyleModify.setNode(this.node5 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node5 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node5 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node5 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node5 as TaroElement)._nodeInfo.areaInfo = res[1] })) } - .attrs(getNormalAttributes(this.node0)) - .onVisibleAreaChange(getNodeThresholds(this.node0) || [0.0, 1.0], getComponentEventCallback(this.node0, VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node0, AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node0._nid].areaInfo = areaResult + .attributeModifier(commonStyleModify.setNode(this.node0 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node0 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node0 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node0 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node0 as TaroElement)._nodeInfo.areaInfo = res[1] })) + .alignItems(FlexManager.flexOptions(this.node0 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node0 as TaroElement).justifyContent) } } -export default TARO_TEMPLATES_f0t0 `; function Index() { return diff --git a/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/children.rs/should_render_complex_children.js b/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/children.rs/should_render_complex_children.js new file mode 100644 index 000000000000..d100eeb096df --- /dev/null +++ b/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/children.rs/should_render_complex_children.js @@ -0,0 +1,133 @@ +const TARO_TEMPLATES_f0t0 = `import { createLazyChildren, createChildItem } from '../render' +import commonStyleModify from '@tarojs/components/style' +import { getButtonColor } from '@tarojs/components/button' +import { FlexManager } from '@tarojs/components/utils/flexManager' +import { TOUCH_EVENT_MAP } from '@tarojs/components/utils/constant/event' +import { BUTTON_THEME_COLOR } from '@tarojs/components/utils/constant/style' +import { getNodeThresholds, getNormalAttributes, getFontAttributes } from '@tarojs/components/utils/helper' +import { NodeType, convertNumber2VP, TaroElement, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '@tarojs/runtime' +import { DynamicCenter } from '@tarojs/components/utils/DynamicCenter' + +import type { HarmonyStyle, TaroButtonElement, TaroViewElement, TaroAny, TaroStyleType, TaroTextStyleType } from '@tarojs/runtime' + +@Extend(Row) +function rowAttrs (style: TaroStyleType) { + .constraintSize({ + minWidth: style.minWidth || style.width, + maxWidth: style.maxWidth, + minHeight: style.minHeight, + maxHeight: style.maxHeight + }) +} +@Extend(Column) +function columnAttrs (style: TaroStyleType) { + .constraintSize({ + minWidth: style.minWidth, + maxWidth: style.maxWidth, + minHeight: style.minHeight || style.height, + maxHeight: style.maxHeight + }) +} +function getImageMode (mode: string): ImageFit { + switch (mode) { + case 'aspectFit': return ImageFit.Contain + case 'aspectFill': return ImageFit.Cover + case 'scaleToFill': return ImageFit.Fill + case 'widthFix': return ImageFit.Auto + case 'heightFix': return ImageFit.Auto + default: return ImageFit.Contain + } +} +@Component +export default struct TARO_TEMPLATES_f0t0 { + node: TaroViewElement = new TaroElement('Ignore') + + dynamicCenter: DynamicCenter = new DynamicCenter() + + aboutToAppear () { + this.dynamicCenter.bindComponentToNodeWithDFS(this.node, this) + } + + @State node0: TaroElement = new TaroElement('Ignore') + @State node1: TaroElement = new TaroElement('Ignore') + @State node2: TaroElement = new TaroElement('Ignore') + @State node3: TaroElement = new TaroElement('Ignore') + @State node4: TaroElement = new TaroElement('Ignore') + + build() { + Column() { + if ((this.node0.childNodes[0] as TaroElement)._attrs.compileIf) { + Column() { + Column() { + Image((this.node3 as TaroElement).getAttribute('src')) + .objectFit(getImageMode((this.node3 as TaroElement).getAttribute('mode'))) + .attributeModifier(commonStyleModify.setNode(this.node3 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node3 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node3 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node3 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node3 as TaroElement)._nodeInfo.areaInfo = res[1] + })) + if ((this.node2.childNodes[1] as TaroElement)._attrs.compileIf) { + Image((this.node4 as TaroElement).getAttribute('src')) + .objectFit(getImageMode((this.node4 as TaroElement).getAttribute('mode'))) + .attributeModifier(commonStyleModify.setNode(this.node4 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node4 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node4 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node4 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node4 as TaroElement)._nodeInfo.areaInfo = res[1] + })) + } + } + .attributeModifier(commonStyleModify.setNode(this.node2 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node2 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node2 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node2 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node2 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node2 as TaroElement)._nodeInfo.areaInfo = res[1] + })) + .alignItems(FlexManager.flexOptions(this.node2 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node2 as TaroElement).justifyContent) + } + .attributeModifier(commonStyleModify.setNode(this.node1 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node1 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node1 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node1 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node1 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node1 as TaroElement)._nodeInfo.areaInfo = res[1] + })) + .alignItems(FlexManager.flexOptions(this.node1 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node1 as TaroElement).justifyContent) + .onClick(e => eventHandler(e, 'click', this.node1 as TaroElement)) + } + } + .attributeModifier(commonStyleModify.setNode(this.node0 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node0 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node0 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node0 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node0 as TaroElement)._nodeInfo.areaInfo = res[1] + })) + .alignItems(FlexManager.flexOptions(this.node0 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node0 as TaroElement).justifyContent) + } +} +`; +function Index() { + return + + {showModal ? + + + + + + {haveIcon ? : } + + + + : } + + ; +} diff --git a/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/children.rs/should_render_react_component.js b/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/children.rs/should_render_react_component.js new file mode 100644 index 000000000000..881fdce5584d --- /dev/null +++ b/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/children.rs/should_render_react_component.js @@ -0,0 +1,68 @@ +const TARO_TEMPLATES_f0t0 = `import { createLazyChildren, createChildItem } from '../render' +import commonStyleModify from '@tarojs/components/style' +import { getButtonColor } from '@tarojs/components/button' +import { FlexManager } from '@tarojs/components/utils/flexManager' +import { TOUCH_EVENT_MAP } from '@tarojs/components/utils/constant/event' +import { BUTTON_THEME_COLOR } from '@tarojs/components/utils/constant/style' +import { getNodeThresholds, getNormalAttributes, getFontAttributes } from '@tarojs/components/utils/helper' +import { NodeType, convertNumber2VP, TaroElement, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '@tarojs/runtime' +import { DynamicCenter } from '@tarojs/components/utils/DynamicCenter' + +import type { HarmonyStyle, TaroButtonElement, TaroViewElement, TaroAny, TaroStyleType, TaroTextStyleType } from '@tarojs/runtime' + +@Extend(Row) +function rowAttrs (style: TaroStyleType) { + .constraintSize({ + minWidth: style.minWidth || style.width, + maxWidth: style.maxWidth, + minHeight: style.minHeight, + maxHeight: style.maxHeight + }) +} +@Extend(Column) +function columnAttrs (style: TaroStyleType) { + .constraintSize({ + minWidth: style.minWidth, + maxWidth: style.maxWidth, + minHeight: style.minHeight || style.height, + maxHeight: style.maxHeight + }) +} +@Component +export default struct TARO_TEMPLATES_f0t0 { + node: TaroViewElement = new TaroElement('Ignore') + + dynamicCenter: DynamicCenter = new DynamicCenter() + + aboutToAppear () { + this.dynamicCenter.bindComponentToNodeWithDFS(this.node, this) + } + + @State node0: TaroElement = new TaroElement('Ignore') + @State node1: TaroElement = new TaroElement('Ignore') + + build() { + Column() { + createChildItem(this.node0.childNodes[0] as TaroElement) + createChildItem(this.node1 as TaroElement) + } + .attributeModifier(commonStyleModify.setNode(this.node0 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node0 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node0 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node0 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node0 as TaroElement)._nodeInfo.areaInfo = res[1] + })) + .alignItems(FlexManager.flexOptions(this.node0 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node0 as TaroElement).justifyContent) + } +} +`; +function Index() { + return + + + + {}} _dynamicID="node1"/> + + ; +} diff --git a/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/children.rs/should_support_fragment.js b/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/children.rs/should_support_fragment.js new file mode 100644 index 000000000000..4c8a1fe8f46f --- /dev/null +++ b/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/children.rs/should_support_fragment.js @@ -0,0 +1,502 @@ +const TARO_TEMPLATES_f0t0 = `import { createLazyChildren, createChildItem } from '../render' +import commonStyleModify from '@tarojs/components/style' +import { getButtonColor } from '@tarojs/components/button' +import { FlexManager } from '@tarojs/components/utils/flexManager' +import { TOUCH_EVENT_MAP } from '@tarojs/components/utils/constant/event' +import { BUTTON_THEME_COLOR } from '@tarojs/components/utils/constant/style' +import { getNodeThresholds, getNormalAttributes, getFontAttributes } from '@tarojs/components/utils/helper' +import { NodeType, convertNumber2VP, TaroElement, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '@tarojs/runtime' +import { DynamicCenter } from '@tarojs/components/utils/DynamicCenter' + +import type { HarmonyStyle, TaroButtonElement, TaroViewElement, TaroAny, TaroStyleType, TaroTextStyleType } from '@tarojs/runtime' + +@Extend(Row) +function rowAttrs (style: TaroStyleType) { + .constraintSize({ + minWidth: style.minWidth || style.width, + maxWidth: style.maxWidth, + minHeight: style.minHeight, + maxHeight: style.maxHeight + }) +} +@Extend(Column) +function columnAttrs (style: TaroStyleType) { + .constraintSize({ + minWidth: style.minWidth, + maxWidth: style.maxWidth, + minHeight: style.minHeight || style.height, + maxHeight: style.maxHeight + }) +} +@Extend(Text) +function textNormalFontStyle (style: HarmonyStyle) { + .id(style.id) + .key(style.id) + .opacity(style.opacity) + .fontColor(style.color) + .fontSize(style.fontSize) + .fontWeight(style.fontWeight) + .fontStyle(style.fontStyle) + .fontFamily(style.fontFamily) + .lineHeight(style.lineHeight) + .decoration({ + type: style.textDecoration, + color: style.color + }) +} + +@Extend(Text) +function textSpecialFontStyle(attr: TaroTextStyleType) { + .textAlign(attr.textAlign) + .textOverflow(attr.textOverflow) + .maxLines(attr.WebkitLineClamp) + .letterSpacing(attr.letterSpacing) +} + +function getButtonFontSize (node: TaroButtonElement) { + const isMini = node._attrs.size === 'mini' + + return isMini ? convertNumber2VP(26) : convertNumber2VP(36) +} +@Component +export default struct TARO_TEMPLATES_f0t0 { + node: TaroViewElement = new TaroElement('Ignore') + + dynamicCenter: DynamicCenter = new DynamicCenter() + + aboutToAppear () { + this.dynamicCenter.bindComponentToNodeWithDFS(this.node, this) + } + + @State node0: TaroElement = new TaroElement('Ignore') + @State node1: TaroElement = new TaroElement('Ignore') + @State node2: TaroElement = new TaroElement('Ignore') + @State node3: TaroElement = new TaroElement('Ignore') + @State node4: TaroElement = new TaroElement('Ignore') + @State node5: TaroElement = new TaroElement('Ignore') + @State node6: TaroElement = new TaroElement('Ignore') + + build() { + Column() { + if (this.node0.childNodes[0].nodeType === NodeType.TEXT_NODE && this.node0.childNodes[0].parentNode) { + if ((this.node0.childNodes[0].parentNode as TaroButtonElement).tagName === 'BUTTON') { + Text(this.node0.childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node0.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node0.childNodes[0] as TaroElement)) + .fontSize((this.node0.childNodes[0].parentNode as TaroButtonElement).hmStyle.fontSize || getButtonFontSize((this.node0.childNodes[0].parentNode as TaroButtonElement))) + .fontColor((this.node0.childNodes[0].parentNode as TaroButtonElement).hmStyle.color || getButtonColor(this.node0.childNodes[0].parentNode as TaroButtonElement, BUTTON_THEME_COLOR.get((this.node0.childNodes[0].parentNode as TaroButtonElement)._attrs.type).text)) + } else { + Text(this.node0.childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node0.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node0.childNodes[0] as TaroElement)) + } + } else { + Text(this.node0.childNodes[0].textContent) + .onClick((e: ClickEvent) => eventHandler(e, 'click', this.node0.childNodes[0] as TaroElement)) + .textNormalFontStyle(getNormalAttributes(this.node0.childNodes[0])) + .attributeModifier(commonStyleModify.setNode(this.node0.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node0.childNodes[0] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[0] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[0] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node0.childNodes[0] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node0.childNodes[0] as TaroElement)._nodeInfo.areaInfo = res[1] + })) + } + Column() { + if (this.node1.childNodes[0].nodeType === NodeType.TEXT_NODE && this.node1.childNodes[0].parentNode) { + if ((this.node1.childNodes[0].parentNode as TaroButtonElement).tagName === 'BUTTON') { + Text(this.node1.childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node1.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node1.childNodes[0] as TaroElement)) + .fontSize((this.node1.childNodes[0].parentNode as TaroButtonElement).hmStyle.fontSize || getButtonFontSize((this.node1.childNodes[0].parentNode as TaroButtonElement))) + .fontColor((this.node1.childNodes[0].parentNode as TaroButtonElement).hmStyle.color || getButtonColor(this.node1.childNodes[0].parentNode as TaroButtonElement, BUTTON_THEME_COLOR.get((this.node1.childNodes[0].parentNode as TaroButtonElement)._attrs.type).text)) + } else { + Text(this.node1.childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node1.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node1.childNodes[0] as TaroElement)) + } + } else { + Text(this.node1.childNodes[0].textContent) + .onClick((e: ClickEvent) => eventHandler(e, 'click', this.node1.childNodes[0] as TaroElement)) + .textNormalFontStyle(getNormalAttributes(this.node1.childNodes[0])) + .attributeModifier(commonStyleModify.setNode(this.node1.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node1.childNodes[0] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node1.childNodes[0] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node1.childNodes[0] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node1.childNodes[0] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node1.childNodes[0] as TaroElement)._nodeInfo.areaInfo = res[1] + })) + } + } + .attributeModifier(commonStyleModify.setNode(this.node1 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node1 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node1 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node1 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node1 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node1 as TaroElement)._nodeInfo.areaInfo = res[1] + })) + .alignItems(FlexManager.flexOptions(this.node1 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node1 as TaroElement).justifyContent) + Column() { + if (this.node0.childNodes[2].childNodes[0].nodeType === NodeType.TEXT_NODE && this.node0.childNodes[2].childNodes[0].parentNode) { + if ((this.node0.childNodes[2].childNodes[0].parentNode as TaroButtonElement).tagName === 'BUTTON') { + Text(this.node0.childNodes[2].childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node0.childNodes[2].childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node0.childNodes[2].childNodes[0] as TaroElement)) + .fontSize((this.node0.childNodes[2].childNodes[0].parentNode as TaroButtonElement).hmStyle.fontSize || getButtonFontSize((this.node0.childNodes[2].childNodes[0].parentNode as TaroButtonElement))) + .fontColor((this.node0.childNodes[2].childNodes[0].parentNode as TaroButtonElement).hmStyle.color || getButtonColor(this.node0.childNodes[2].childNodes[0].parentNode as TaroButtonElement, BUTTON_THEME_COLOR.get((this.node0.childNodes[2].childNodes[0].parentNode as TaroButtonElement)._attrs.type).text)) + } else { + Text(this.node0.childNodes[2].childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node0.childNodes[2].childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node0.childNodes[2].childNodes[0] as TaroElement)) + } + } else { + Text(this.node0.childNodes[2].childNodes[0].textContent) + .onClick((e: ClickEvent) => eventHandler(e, 'click', this.node0.childNodes[2].childNodes[0] as TaroElement)) + .textNormalFontStyle(getNormalAttributes(this.node0.childNodes[2].childNodes[0])) + .attributeModifier(commonStyleModify.setNode(this.node0.childNodes[2].childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node0.childNodes[2].childNodes[0] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[2].childNodes[0] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[2].childNodes[0] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node0.childNodes[2].childNodes[0] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node0.childNodes[2].childNodes[0] as TaroElement)._nodeInfo.areaInfo = res[1] + })) + } + } + .attributeModifier(commonStyleModify.setNode(this.node0.childNodes[2] as TaroElement)) + .columnAttrs(getNormalAttributes(this.node0.childNodes[2] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[2] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[2] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node0.childNodes[2] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node0.childNodes[2] as TaroElement)._nodeInfo.areaInfo = res[1] + })) + .alignItems(FlexManager.flexOptions(this.node0.childNodes[2] as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node0.childNodes[2] as TaroElement).justifyContent) + Column() { + Column() { + if (this.node2.childNodes[0].nodeType === NodeType.TEXT_NODE && this.node2.childNodes[0].parentNode) { + if ((this.node2.childNodes[0].parentNode as TaroButtonElement).tagName === 'BUTTON') { + Text(this.node2.childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node2.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node2.childNodes[0] as TaroElement)) + .fontSize((this.node2.childNodes[0].parentNode as TaroButtonElement).hmStyle.fontSize || getButtonFontSize((this.node2.childNodes[0].parentNode as TaroButtonElement))) + .fontColor((this.node2.childNodes[0].parentNode as TaroButtonElement).hmStyle.color || getButtonColor(this.node2.childNodes[0].parentNode as TaroButtonElement, BUTTON_THEME_COLOR.get((this.node2.childNodes[0].parentNode as TaroButtonElement)._attrs.type).text)) + } else { + Text(this.node2.childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node2.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node2.childNodes[0] as TaroElement)) + } + } else { + Text(this.node2.childNodes[0].textContent) + .onClick((e: ClickEvent) => eventHandler(e, 'click', this.node2.childNodes[0] as TaroElement)) + .textNormalFontStyle(getNormalAttributes(this.node2.childNodes[0])) + .attributeModifier(commonStyleModify.setNode(this.node2.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node2.childNodes[0] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node2.childNodes[0] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node2.childNodes[0] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node2.childNodes[0] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node2.childNodes[0] as TaroElement)._nodeInfo.areaInfo = res[1] + })) + } + } + .attributeModifier(commonStyleModify.setNode(this.node2 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node2 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node2 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node2 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node2 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node2 as TaroElement)._nodeInfo.areaInfo = res[1] + })) + .alignItems(FlexManager.flexOptions(this.node2 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node2 as TaroElement).justifyContent) + Column() { + if (this.node0.childNodes[3].childNodes[1].childNodes[0].nodeType === NodeType.TEXT_NODE && this.node0.childNodes[3].childNodes[1].childNodes[0].parentNode) { + if ((this.node0.childNodes[3].childNodes[1].childNodes[0].parentNode as TaroButtonElement).tagName === 'BUTTON') { + Text(this.node0.childNodes[3].childNodes[1].childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node0.childNodes[3].childNodes[1].childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node0.childNodes[3].childNodes[1].childNodes[0] as TaroElement)) + .fontSize((this.node0.childNodes[3].childNodes[1].childNodes[0].parentNode as TaroButtonElement).hmStyle.fontSize || getButtonFontSize((this.node0.childNodes[3].childNodes[1].childNodes[0].parentNode as TaroButtonElement))) + .fontColor((this.node0.childNodes[3].childNodes[1].childNodes[0].parentNode as TaroButtonElement).hmStyle.color || getButtonColor(this.node0.childNodes[3].childNodes[1].childNodes[0].parentNode as TaroButtonElement, BUTTON_THEME_COLOR.get((this.node0.childNodes[3].childNodes[1].childNodes[0].parentNode as TaroButtonElement)._attrs.type).text)) + } else { + Text(this.node0.childNodes[3].childNodes[1].childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node0.childNodes[3].childNodes[1].childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node0.childNodes[3].childNodes[1].childNodes[0] as TaroElement)) + } + } else { + Text(this.node0.childNodes[3].childNodes[1].childNodes[0].textContent) + .onClick((e: ClickEvent) => eventHandler(e, 'click', this.node0.childNodes[3].childNodes[1].childNodes[0] as TaroElement)) + .textNormalFontStyle(getNormalAttributes(this.node0.childNodes[3].childNodes[1].childNodes[0])) + .attributeModifier(commonStyleModify.setNode(this.node0.childNodes[3].childNodes[1].childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node0.childNodes[3].childNodes[1].childNodes[0] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[3].childNodes[1].childNodes[0] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[3].childNodes[1].childNodes[0] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node0.childNodes[3].childNodes[1].childNodes[0] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node0.childNodes[3].childNodes[1].childNodes[0] as TaroElement)._nodeInfo.areaInfo = res[1] + })) + } + } + .attributeModifier(commonStyleModify.setNode(this.node0.childNodes[3].childNodes[1] as TaroElement)) + .columnAttrs(getNormalAttributes(this.node0.childNodes[3].childNodes[1] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[3].childNodes[1] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[3].childNodes[1] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node0.childNodes[3].childNodes[1] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node0.childNodes[3].childNodes[1] as TaroElement)._nodeInfo.areaInfo = res[1] + })) + .alignItems(FlexManager.flexOptions(this.node0.childNodes[3].childNodes[1] as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node0.childNodes[3].childNodes[1] as TaroElement).justifyContent) + } + .attributeModifier(commonStyleModify.setNode(this.node0.childNodes[3] as TaroElement)) + .columnAttrs(getNormalAttributes(this.node0.childNodes[3] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[3] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[3] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node0.childNodes[3] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node0.childNodes[3] as TaroElement)._nodeInfo.areaInfo = res[1] + })) + .alignItems(FlexManager.flexOptions(this.node0.childNodes[3] as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node0.childNodes[3] as TaroElement).justifyContent) + Column() { + if (this.node3.childNodes[0].nodeType === NodeType.TEXT_NODE && this.node3.childNodes[0].parentNode) { + if ((this.node3.childNodes[0].parentNode as TaroButtonElement).tagName === 'BUTTON') { + Text(this.node3.childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node3.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node3.childNodes[0] as TaroElement)) + .fontSize((this.node3.childNodes[0].parentNode as TaroButtonElement).hmStyle.fontSize || getButtonFontSize((this.node3.childNodes[0].parentNode as TaroButtonElement))) + .fontColor((this.node3.childNodes[0].parentNode as TaroButtonElement).hmStyle.color || getButtonColor(this.node3.childNodes[0].parentNode as TaroButtonElement, BUTTON_THEME_COLOR.get((this.node3.childNodes[0].parentNode as TaroButtonElement)._attrs.type).text)) + } else { + Text(this.node3.childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node3.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node3.childNodes[0] as TaroElement)) + } + } else { + Text(this.node3.childNodes[0].textContent) + .onClick((e: ClickEvent) => eventHandler(e, 'click', this.node3.childNodes[0] as TaroElement)) + .textNormalFontStyle(getNormalAttributes(this.node3.childNodes[0])) + .attributeModifier(commonStyleModify.setNode(this.node3.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node3.childNodes[0] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node3.childNodes[0] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node3.childNodes[0] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node3.childNodes[0] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node3.childNodes[0] as TaroElement)._nodeInfo.areaInfo = res[1] + })) + } + } + .attributeModifier(commonStyleModify.setNode(this.node3 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node3 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node3 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node3 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node3 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node3 as TaroElement)._nodeInfo.areaInfo = res[1] + })) + .alignItems(FlexManager.flexOptions(this.node3 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node3 as TaroElement).justifyContent) + Column() { + if (this.node4.childNodes[0].nodeType === NodeType.TEXT_NODE && this.node4.childNodes[0].parentNode) { + if ((this.node4.childNodes[0].parentNode as TaroButtonElement).tagName === 'BUTTON') { + Text(this.node4.childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node4.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node4.childNodes[0] as TaroElement)) + .fontSize((this.node4.childNodes[0].parentNode as TaroButtonElement).hmStyle.fontSize || getButtonFontSize((this.node4.childNodes[0].parentNode as TaroButtonElement))) + .fontColor((this.node4.childNodes[0].parentNode as TaroButtonElement).hmStyle.color || getButtonColor(this.node4.childNodes[0].parentNode as TaroButtonElement, BUTTON_THEME_COLOR.get((this.node4.childNodes[0].parentNode as TaroButtonElement)._attrs.type).text)) + } else { + Text(this.node4.childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node4.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node4.childNodes[0] as TaroElement)) + } + } else { + Text(this.node4.childNodes[0].textContent) + .onClick((e: ClickEvent) => eventHandler(e, 'click', this.node4.childNodes[0] as TaroElement)) + .textNormalFontStyle(getNormalAttributes(this.node4.childNodes[0])) + .attributeModifier(commonStyleModify.setNode(this.node4.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node4.childNodes[0] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node4.childNodes[0] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node4.childNodes[0] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node4.childNodes[0] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node4.childNodes[0] as TaroElement)._nodeInfo.areaInfo = res[1] + })) + } + } + .attributeModifier(commonStyleModify.setNode(this.node4 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node4 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node4 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node4 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node4 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node4 as TaroElement)._nodeInfo.areaInfo = res[1] + })) + .alignItems(FlexManager.flexOptions(this.node4 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node4 as TaroElement).justifyContent) + Column() { + if (this.node5.childNodes[0].nodeType === NodeType.TEXT_NODE && this.node5.childNodes[0].parentNode) { + if ((this.node5.childNodes[0].parentNode as TaroButtonElement).tagName === 'BUTTON') { + Text(this.node5.childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node5.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node5.childNodes[0] as TaroElement)) + .fontSize((this.node5.childNodes[0].parentNode as TaroButtonElement).hmStyle.fontSize || getButtonFontSize((this.node5.childNodes[0].parentNode as TaroButtonElement))) + .fontColor((this.node5.childNodes[0].parentNode as TaroButtonElement).hmStyle.color || getButtonColor(this.node5.childNodes[0].parentNode as TaroButtonElement, BUTTON_THEME_COLOR.get((this.node5.childNodes[0].parentNode as TaroButtonElement)._attrs.type).text)) + } else { + Text(this.node5.childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node5.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node5.childNodes[0] as TaroElement)) + } + } else { + Text(this.node5.childNodes[0].textContent) + .onClick((e: ClickEvent) => eventHandler(e, 'click', this.node5.childNodes[0] as TaroElement)) + .textNormalFontStyle(getNormalAttributes(this.node5.childNodes[0])) + .attributeModifier(commonStyleModify.setNode(this.node5.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node5.childNodes[0] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node5.childNodes[0] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node5.childNodes[0] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node5.childNodes[0] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node5.childNodes[0] as TaroElement)._nodeInfo.areaInfo = res[1] + })) + } + } + .attributeModifier(commonStyleModify.setNode(this.node5 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node5 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node5 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node5 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node5 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node5 as TaroElement)._nodeInfo.areaInfo = res[1] + })) + .alignItems(FlexManager.flexOptions(this.node5 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node5 as TaroElement).justifyContent) + Column() { + if (this.node0.childNodes[7].childNodes[0].nodeType === NodeType.TEXT_NODE && this.node0.childNodes[7].childNodes[0].parentNode) { + if ((this.node0.childNodes[7].childNodes[0].parentNode as TaroButtonElement).tagName === 'BUTTON') { + Text(this.node0.childNodes[7].childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node0.childNodes[7].childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node0.childNodes[7].childNodes[0] as TaroElement)) + .fontSize((this.node0.childNodes[7].childNodes[0].parentNode as TaroButtonElement).hmStyle.fontSize || getButtonFontSize((this.node0.childNodes[7].childNodes[0].parentNode as TaroButtonElement))) + .fontColor((this.node0.childNodes[7].childNodes[0].parentNode as TaroButtonElement).hmStyle.color || getButtonColor(this.node0.childNodes[7].childNodes[0].parentNode as TaroButtonElement, BUTTON_THEME_COLOR.get((this.node0.childNodes[7].childNodes[0].parentNode as TaroButtonElement)._attrs.type).text)) + } else { + Text(this.node0.childNodes[7].childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node0.childNodes[7].childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node0.childNodes[7].childNodes[0] as TaroElement)) + } + } else { + Text(this.node0.childNodes[7].childNodes[0].textContent) + .onClick((e: ClickEvent) => eventHandler(e, 'click', this.node0.childNodes[7].childNodes[0] as TaroElement)) + .textNormalFontStyle(getNormalAttributes(this.node0.childNodes[7].childNodes[0])) + .attributeModifier(commonStyleModify.setNode(this.node0.childNodes[7].childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node0.childNodes[7].childNodes[0] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[7].childNodes[0] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[7].childNodes[0] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node0.childNodes[7].childNodes[0] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node0.childNodes[7].childNodes[0] as TaroElement)._nodeInfo.areaInfo = res[1] + })) + } + } + .attributeModifier(commonStyleModify.setNode(this.node0.childNodes[7] as TaroElement)) + .columnAttrs(getNormalAttributes(this.node0.childNodes[7] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[7] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[7] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node0.childNodes[7] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node0.childNodes[7] as TaroElement)._nodeInfo.areaInfo = res[1] + })) + .alignItems(FlexManager.flexOptions(this.node0.childNodes[7] as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node0.childNodes[7] as TaroElement).justifyContent) + Column() { + if (this.node0.childNodes[8].childNodes[0].nodeType === NodeType.TEXT_NODE && this.node0.childNodes[8].childNodes[0].parentNode) { + if ((this.node0.childNodes[8].childNodes[0].parentNode as TaroButtonElement).tagName === 'BUTTON') { + Text(this.node0.childNodes[8].childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node0.childNodes[8].childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node0.childNodes[8].childNodes[0] as TaroElement)) + .fontSize((this.node0.childNodes[8].childNodes[0].parentNode as TaroButtonElement).hmStyle.fontSize || getButtonFontSize((this.node0.childNodes[8].childNodes[0].parentNode as TaroButtonElement))) + .fontColor((this.node0.childNodes[8].childNodes[0].parentNode as TaroButtonElement).hmStyle.color || getButtonColor(this.node0.childNodes[8].childNodes[0].parentNode as TaroButtonElement, BUTTON_THEME_COLOR.get((this.node0.childNodes[8].childNodes[0].parentNode as TaroButtonElement)._attrs.type).text)) + } else { + Text(this.node0.childNodes[8].childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node0.childNodes[8].childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node0.childNodes[8].childNodes[0] as TaroElement)) + } + } else { + Text(this.node0.childNodes[8].childNodes[0].textContent) + .onClick((e: ClickEvent) => eventHandler(e, 'click', this.node0.childNodes[8].childNodes[0] as TaroElement)) + .textNormalFontStyle(getNormalAttributes(this.node0.childNodes[8].childNodes[0])) + .attributeModifier(commonStyleModify.setNode(this.node0.childNodes[8].childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node0.childNodes[8].childNodes[0] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[8].childNodes[0] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[8].childNodes[0] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node0.childNodes[8].childNodes[0] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node0.childNodes[8].childNodes[0] as TaroElement)._nodeInfo.areaInfo = res[1] + })) + } + } + .attributeModifier(commonStyleModify.setNode(this.node0.childNodes[8] as TaroElement)) + .columnAttrs(getNormalAttributes(this.node0.childNodes[8] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[8] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[8] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node0.childNodes[8] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node0.childNodes[8] as TaroElement)._nodeInfo.areaInfo = res[1] + })) + .alignItems(FlexManager.flexOptions(this.node0.childNodes[8] as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node0.childNodes[8] as TaroElement).justifyContent) + Column() { + if (this.node6.childNodes[0].nodeType === NodeType.TEXT_NODE && this.node6.childNodes[0].parentNode) { + if ((this.node6.childNodes[0].parentNode as TaroButtonElement).tagName === 'BUTTON') { + Text(this.node6.childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node6.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node6.childNodes[0] as TaroElement)) + .fontSize((this.node6.childNodes[0].parentNode as TaroButtonElement).hmStyle.fontSize || getButtonFontSize((this.node6.childNodes[0].parentNode as TaroButtonElement))) + .fontColor((this.node6.childNodes[0].parentNode as TaroButtonElement).hmStyle.color || getButtonColor(this.node6.childNodes[0].parentNode as TaroButtonElement, BUTTON_THEME_COLOR.get((this.node6.childNodes[0].parentNode as TaroButtonElement)._attrs.type).text)) + } else { + Text(this.node6.childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node6.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node6.childNodes[0] as TaroElement)) + } + } else { + Text(this.node6.childNodes[0].textContent) + .onClick((e: ClickEvent) => eventHandler(e, 'click', this.node6.childNodes[0] as TaroElement)) + .textNormalFontStyle(getNormalAttributes(this.node6.childNodes[0])) + .attributeModifier(commonStyleModify.setNode(this.node6.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node6.childNodes[0] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node6.childNodes[0] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node6.childNodes[0] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node6.childNodes[0] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node6.childNodes[0] as TaroElement)._nodeInfo.areaInfo = res[1] + })) + } + } + .attributeModifier(commonStyleModify.setNode(this.node6 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node6 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node6 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node6 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node6 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node6 as TaroElement)._nodeInfo.areaInfo = res[1] + })) + .alignItems(FlexManager.flexOptions(this.node6 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node6 as TaroElement).justifyContent) + } + .attributeModifier(commonStyleModify.setNode(this.node0 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node0 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node0 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node0 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node0 as TaroElement)._nodeInfo.areaInfo = res[1] + })) + .alignItems(FlexManager.flexOptions(this.node0 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node0 as TaroElement).justifyContent) + } +} +`; +function Index() { + return + + {content0} + + <> + + {content1} + + hello + + + + <> + + {content2} + + hello! + + + + + + {content3} + + + + {content4} + + <> + + {content5} + + + + <> + + hello!! + + + + hello!!! + + {content6} + + ; +} diff --git a/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/children.rs/should_support_render_fn.js b/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/children.rs/should_support_render_fn.js new file mode 100644 index 000000000000..8aa4987dc145 --- /dev/null +++ b/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/children.rs/should_support_render_fn.js @@ -0,0 +1,198 @@ +const TARO_TEMPLATES_f0t0 = `import { createLazyChildren, createChildItem } from '../render' +import commonStyleModify from '@tarojs/components/style' +import { getButtonColor } from '@tarojs/components/button' +import { FlexManager } from '@tarojs/components/utils/flexManager' +import { TOUCH_EVENT_MAP } from '@tarojs/components/utils/constant/event' +import { BUTTON_THEME_COLOR } from '@tarojs/components/utils/constant/style' +import { getNodeThresholds, getNormalAttributes, getFontAttributes } from '@tarojs/components/utils/helper' +import { NodeType, convertNumber2VP, TaroElement, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '@tarojs/runtime' +import { DynamicCenter } from '@tarojs/components/utils/DynamicCenter' + +import type { HarmonyStyle, TaroButtonElement, TaroViewElement, TaroAny, TaroStyleType, TaroTextStyleType } from '@tarojs/runtime' + +@Extend(Row) +function rowAttrs (style: TaroStyleType) { + .constraintSize({ + minWidth: style.minWidth || style.width, + maxWidth: style.maxWidth, + minHeight: style.minHeight, + maxHeight: style.maxHeight + }) +} +@Extend(Column) +function columnAttrs (style: TaroStyleType) { + .constraintSize({ + minWidth: style.minWidth, + maxWidth: style.maxWidth, + minHeight: style.minHeight || style.height, + maxHeight: style.maxHeight + }) +} +@Extend(Text) +function textNormalFontStyle (style: HarmonyStyle) { + .id(style.id) + .key(style.id) + .opacity(style.opacity) + .fontColor(style.color) + .fontSize(style.fontSize) + .fontWeight(style.fontWeight) + .fontStyle(style.fontStyle) + .fontFamily(style.fontFamily) + .lineHeight(style.lineHeight) + .decoration({ + type: style.textDecoration, + color: style.color + }) +} + +@Extend(Text) +function textSpecialFontStyle(attr: TaroTextStyleType) { + .textAlign(attr.textAlign) + .textOverflow(attr.textOverflow) + .maxLines(attr.WebkitLineClamp) + .letterSpacing(attr.letterSpacing) +} + +function getButtonFontSize (node: TaroButtonElement) { + const isMini = node._attrs.size === 'mini' + + return isMini ? convertNumber2VP(26) : convertNumber2VP(36) +} +@Component +export default struct TARO_TEMPLATES_f0t0 { + node: TaroViewElement = new TaroElement('Ignore') + + dynamicCenter: DynamicCenter = new DynamicCenter() + + aboutToAppear () { + this.dynamicCenter.bindComponentToNodeWithDFS(this.node, this) + } + + @State node0: TaroElement = new TaroElement('Ignore') + @State node1: TaroElement = new TaroElement('Ignore') + @State node2: TaroElement = new TaroElement('Ignore') + @State node3: TaroElement = new TaroElement('Ignore') + @State node4: TaroElement = new TaroElement('Ignore') + + build() { + Column() { + Column() { + createChildItem(this.node1.childNodes[0] as TaroElement) + } + .attributeModifier(commonStyleModify.setNode(this.node1 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node1 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node1 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node1 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node1 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node1 as TaroElement)._nodeInfo.areaInfo = res[1] + })) + .alignItems(FlexManager.flexOptions(this.node1 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node1 as TaroElement).justifyContent) + Column() { + createChildItem(this.node2.childNodes[0] as TaroElement) + if (this.node2.childNodes[1].nodeType === NodeType.TEXT_NODE && this.node2.childNodes[1].parentNode) { + if ((this.node2.childNodes[1].parentNode as TaroButtonElement).tagName === 'BUTTON') { + Text(this.node2.childNodes[1].textContent) + .attributeModifier(commonStyleModify.setNode(this.node2.childNodes[1] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node2.childNodes[1] as TaroElement)) + .fontSize((this.node2.childNodes[1].parentNode as TaroButtonElement).hmStyle.fontSize || getButtonFontSize((this.node2.childNodes[1].parentNode as TaroButtonElement))) + .fontColor((this.node2.childNodes[1].parentNode as TaroButtonElement).hmStyle.color || getButtonColor(this.node2.childNodes[1].parentNode as TaroButtonElement, BUTTON_THEME_COLOR.get((this.node2.childNodes[1].parentNode as TaroButtonElement)._attrs.type).text)) + } else { + Text(this.node2.childNodes[1].textContent) + .attributeModifier(commonStyleModify.setNode(this.node2.childNodes[1] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node2.childNodes[1] as TaroElement)) + } + } else { + Text(this.node2.childNodes[1].textContent) + .onClick((e: ClickEvent) => eventHandler(e, 'click', this.node2.childNodes[1] as TaroElement)) + .textNormalFontStyle(getNormalAttributes(this.node2.childNodes[1])) + .attributeModifier(commonStyleModify.setNode(this.node2.childNodes[1] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node2.childNodes[1] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node2.childNodes[1] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node2.childNodes[1] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node2.childNodes[1] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node2.childNodes[1] as TaroElement)._nodeInfo.areaInfo = res[1] + })) + } + } + .attributeModifier(commonStyleModify.setNode(this.node2 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node2 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node2 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node2 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node2 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node2 as TaroElement)._nodeInfo.areaInfo = res[1] + })) + .alignItems(FlexManager.flexOptions(this.node2 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node2 as TaroElement).justifyContent) + Column() { + createChildItem(this.node3.childNodes[0] as TaroElement) + } + .attributeModifier(commonStyleModify.setNode(this.node3 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node3 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node3 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node3 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node3 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node3 as TaroElement)._nodeInfo.areaInfo = res[1] + })) + .alignItems(FlexManager.flexOptions(this.node3 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node3 as TaroElement).justifyContent) + Column() { + if (this.node4.childNodes[0].nodeType === NodeType.TEXT_NODE && this.node4.childNodes[0].parentNode) { + if ((this.node4.childNodes[0].parentNode as TaroButtonElement).tagName === 'BUTTON') { + Text(this.node4.childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node4.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node4.childNodes[0] as TaroElement)) + .fontSize((this.node4.childNodes[0].parentNode as TaroButtonElement).hmStyle.fontSize || getButtonFontSize((this.node4.childNodes[0].parentNode as TaroButtonElement))) + .fontColor((this.node4.childNodes[0].parentNode as TaroButtonElement).hmStyle.color || getButtonColor(this.node4.childNodes[0].parentNode as TaroButtonElement, BUTTON_THEME_COLOR.get((this.node4.childNodes[0].parentNode as TaroButtonElement)._attrs.type).text)) + } else { + Text(this.node4.childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node4.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node4.childNodes[0] as TaroElement)) + } + } else { + Text(this.node4.childNodes[0].textContent) + .onClick((e: ClickEvent) => eventHandler(e, 'click', this.node4.childNodes[0] as TaroElement)) + .textNormalFontStyle(getNormalAttributes(this.node4.childNodes[0])) + .attributeModifier(commonStyleModify.setNode(this.node4.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node4.childNodes[0] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node4.childNodes[0] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node4.childNodes[0] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node4.childNodes[0] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node4.childNodes[0] as TaroElement)._nodeInfo.areaInfo = res[1] + })) + } + } + .attributeModifier(commonStyleModify.setNode(this.node4 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node4 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node4 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node4 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node4 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node4 as TaroElement)._nodeInfo.areaInfo = res[1] + })) + .alignItems(FlexManager.flexOptions(this.node4 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node4 as TaroElement).justifyContent) + } + .attributeModifier(commonStyleModify.setNode(this.node0 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node0 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node0 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node0 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node0 as TaroElement)._nodeInfo.areaInfo = res[1] + })) + .alignItems(FlexManager.flexOptions(this.node0 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node0 as TaroElement).justifyContent) + } +} +`; +function Index() { + return + + {renderHeader()} + + + + {renderHeader()} + + {normalFunc()} + + + + {this.methods.renderFooter()} + + {normalFunc()} + + ; +} diff --git a/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/condition.rs/should_support_and_expr.js b/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/condition.rs/should_support_and_expr.js index c697916ebea1..de7073671099 100644 --- a/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/condition.rs/should_support_and_expr.js +++ b/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/condition.rs/should_support_and_expr.js @@ -1,236 +1,255 @@ -const TARO_TEMPLATES_f0t0 = `import { FlexManager } from './utils/FlexManager' -import { getNodeThresholds, getNormalAttributes, getTextAttributes } from './utils/helper' -import { TaroIgnoreElement, eventHandler, DynamicCenter, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '../runtime' -import type { TaroElement } from '../runtime' -import { TOUCH_EVENT_MAP } from './utils/constant/event' -@Extend(Flex) -function attrs ({ - flexBasis, - flexGrow, - flexShrink, - alignSelf, - clip, - width, - height, - margin, - padding, - linearGradient, - zIndex, - borderStyle, - borderWidth, - borderColor, - borderRadius, - opacity, - backgroundColor, - backgroundImage, - backgroundRepeat, - backgroundImageSize, - constraintSize, - rotate, - scale, - translate, - transform -}) { - .flexGrow(flexGrow) - .flexShrink(flexShrink) - .flexBasis(flexBasis) - .alignSelf(alignSelf) - .width(width) - .height(height) - .constraintSize(constraintSize) - .margin(margin) - .padding(padding) - .linearGradient(linearGradient) - .zIndex(zIndex) - .borderStyle(borderStyle) - .borderWidth(borderWidth) - .borderColor(borderColor) - .borderRadius(borderRadius) - .opacity(opacity) - .backgroundColor(backgroundColor) - .backgroundImage(backgroundImage, backgroundRepeat) - .backgroundImageSize(backgroundImageSize) - .rotate(rotate) - .scale(scale) - .translate(translate) - .transform(transform) - .clip(clip) +const TARO_TEMPLATES_f0t0 = `import { createLazyChildren, createChildItem } from '../render' +import commonStyleModify from '@tarojs/components/style' +import { getButtonColor } from '@tarojs/components/button' +import { FlexManager } from '@tarojs/components/utils/flexManager' +import { TOUCH_EVENT_MAP } from '@tarojs/components/utils/constant/event' +import { BUTTON_THEME_COLOR } from '@tarojs/components/utils/constant/style' +import { getNodeThresholds, getNormalAttributes, getFontAttributes } from '@tarojs/components/utils/helper' +import { NodeType, convertNumber2VP, TaroElement, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '@tarojs/runtime' +import { DynamicCenter } from '@tarojs/components/utils/DynamicCenter' + +import type { HarmonyStyle, TaroButtonElement, TaroViewElement, TaroAny, TaroStyleType, TaroTextStyleType } from '@tarojs/runtime' + +@Extend(Row) +function rowAttrs (style: TaroStyleType) { + .constraintSize({ + minWidth: style.minWidth || style.width, + maxWidth: style.maxWidth, + minHeight: style.minHeight, + maxHeight: style.maxHeight + }) +} +@Extend(Column) +function columnAttrs (style: TaroStyleType) { + .constraintSize({ + minWidth: style.minWidth, + maxWidth: style.maxWidth, + minHeight: style.minHeight || style.height, + maxHeight: style.maxHeight + }) } @Extend(Text) -function attrsText ({ - id, - width, - height, - zIndex, - opacity, - margin, - padding, - decoration, - lineHeight, - letterSpacing, - maxLines, - fontColor, - fontSize, - fontWeight, - fontFamily, - textOverflow, - constraintSize, - border, - borderRadius, - backgroundColor, - backgroundImage, - backgroundRepeat, - backgroundImageSize, - rotate, - scale, - translate, - transform, - textAlign, - }) { - .id(id) - .key(id) - .constraintSize(constraintSize) - .zIndex(zIndex) - .opacity(opacity) - .margin(margin) - .padding(padding) - .decoration(decoration) - .lineHeight(lineHeight) - .letterSpacing(letterSpacing) - .maxLines(maxLines) - .fontColor(fontColor) - .fontSize(fontSize) - .fontWeight(fontWeight) - .fontFamily(fontFamily) - .textOverflow(textOverflow) - .border(border) - .borderRadius(borderRadius) - .backgroundColor(backgroundColor) - .backgroundImage(backgroundImage, backgroundRepeat) - .backgroundImageSize(backgroundImageSize) - .rotate(rotate) - .scale(scale) - .translate(translate) - .transform(transform) - .textAlign(textAlign) - .width(width) - .height(height) +function textNormalFontStyle (style: HarmonyStyle) { + .id(style.id) + .key(style.id) + .opacity(style.opacity) + .fontColor(style.color) + .fontSize(style.fontSize) + .fontWeight(style.fontWeight) + .fontStyle(style.fontStyle) + .fontFamily(style.fontFamily) + .lineHeight(style.lineHeight) + .decoration({ + type: style.textDecoration, + color: style.color + }) } -function getTextAttributes (node: TaroViewElement) { - const attrs = { - ...getNormalAttributes(node), - ...getFontAttributes(node) - } +@Extend(Text) +function textSpecialFontStyle(attr: TaroTextStyleType) { + .textAlign(attr.textAlign) + .textOverflow(attr.textOverflow) + .maxLines(attr.WebkitLineClamp) + .letterSpacing(attr.letterSpacing) +} - transformW3CToHarmonyInStyle(node._st, attrs) +function getButtonFontSize (node: TaroButtonElement) { + const isMini = node._attrs.size === 'mini' - return attrs + return isMini ? convertNumber2VP(26) : convertNumber2VP(36) } @Component -struct TARO_TEMPLATES_f0t0 { - nodeInfoMap: any = {} - dynamicCenter: DynamicCenter - @ObjectLink node: TaroElement +export default struct TARO_TEMPLATES_f0t0 { + node: TaroViewElement = new TaroElement('Ignore') + + dynamicCenter: DynamicCenter = new DynamicCenter() aboutToAppear () { - this.dynamicCenter = new DynamicCenter() this.dynamicCenter.bindComponentToNodeWithDFS(this.node, this) } - @State node0: TaroElement = new TaroIgnoreElement() - @State node1: TaroElement = new TaroIgnoreElement() - @State node2: TaroElement = new TaroIgnoreElement() - @State node3: TaroElement = new TaroIgnoreElement() - @State node4: TaroElement = new TaroIgnoreElement() + @State node0: TaroElement = new TaroElement('Ignore') + @State node1: TaroElement = new TaroElement('Ignore') + @State node2: TaroElement = new TaroElement('Ignore') + @State node3: TaroElement = new TaroElement('Ignore') + @State node4: TaroElement = new TaroElement('Ignore') build() { - Flex(FlexManager.flexOptions(this.node0)) { - if (this.node0.childNodes[0]._attrs.compileIf) { - Flex(FlexManager.flexOptions(this.node1)) { - Text(this.node1.childNodes[0].textContent) - .attrsText(getTextAttributes(this.node1.childNodes[0])) - .onVisibleAreaChange(getNodeThresholds(this.node1.childNodes[0]) || [0.0, 1.0], getComponentEventCallback(this.node1.childNodes[0], VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node1.childNodes[0], AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node1.childNodes[0]._nid].areaInfo = areaResult - })) + Column() { + if ((this.node0.childNodes[0] as TaroElement)._attrs.compileIf) { + Column() { + if (this.node1.childNodes[0].nodeType === NodeType.TEXT_NODE && this.node1.childNodes[0].parentNode) { + if ((this.node1.childNodes[0].parentNode as TaroButtonElement).tagName === 'BUTTON') { + Text(this.node1.childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node1.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node1.childNodes[0] as TaroElement)) + .fontSize((this.node1.childNodes[0].parentNode as TaroButtonElement).hmStyle.fontSize || getButtonFontSize((this.node1.childNodes[0].parentNode as TaroButtonElement))) + .fontColor((this.node1.childNodes[0].parentNode as TaroButtonElement).hmStyle.color || getButtonColor(this.node1.childNodes[0].parentNode as TaroButtonElement, BUTTON_THEME_COLOR.get((this.node1.childNodes[0].parentNode as TaroButtonElement)._attrs.type).text)) + } else { + Text(this.node1.childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node1.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node1.childNodes[0] as TaroElement)) + } + } else { + Text(this.node1.childNodes[0].textContent) + .onClick((e: ClickEvent) => eventHandler(e, 'click', this.node1.childNodes[0] as TaroElement)) + .textNormalFontStyle(getNormalAttributes(this.node1.childNodes[0])) + .attributeModifier(commonStyleModify.setNode(this.node1.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node1.childNodes[0] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node1.childNodes[0] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node1.childNodes[0] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node1.childNodes[0] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node1.childNodes[0] as TaroElement)._nodeInfo.areaInfo = res[1] + })) + } } - .attrs(getNormalAttributes(this.node1)) - .onVisibleAreaChange(getNodeThresholds(this.node1) || [0.0, 1.0], getComponentEventCallback(this.node1, VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node1, AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node1._nid].areaInfo = areaResult + .attributeModifier(commonStyleModify.setNode(this.node1 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node1 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node1 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node1 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node1 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node1 as TaroElement)._nodeInfo.areaInfo = res[1] })) + .alignItems(FlexManager.flexOptions(this.node1 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node1 as TaroElement).justifyContent) } - if (this.node0.childNodes[1]._attrs.compileIf) { - Flex(FlexManager.flexOptions(this.node2)) { - Text(this.node2.childNodes[0].textContent) - .attrsText(getTextAttributes(this.node2.childNodes[0])) - .onVisibleAreaChange(getNodeThresholds(this.node2.childNodes[0]) || [0.0, 1.0], getComponentEventCallback(this.node2.childNodes[0], VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node2.childNodes[0], AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node2.childNodes[0]._nid].areaInfo = areaResult - })) + if ((this.node0.childNodes[1] as TaroElement)._attrs.compileIf) { + Column() { + if (this.node2.childNodes[0].nodeType === NodeType.TEXT_NODE && this.node2.childNodes[0].parentNode) { + if ((this.node2.childNodes[0].parentNode as TaroButtonElement).tagName === 'BUTTON') { + Text(this.node2.childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node2.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node2.childNodes[0] as TaroElement)) + .fontSize((this.node2.childNodes[0].parentNode as TaroButtonElement).hmStyle.fontSize || getButtonFontSize((this.node2.childNodes[0].parentNode as TaroButtonElement))) + .fontColor((this.node2.childNodes[0].parentNode as TaroButtonElement).hmStyle.color || getButtonColor(this.node2.childNodes[0].parentNode as TaroButtonElement, BUTTON_THEME_COLOR.get((this.node2.childNodes[0].parentNode as TaroButtonElement)._attrs.type).text)) + } else { + Text(this.node2.childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node2.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node2.childNodes[0] as TaroElement)) + } + } else { + Text(this.node2.childNodes[0].textContent) + .onClick((e: ClickEvent) => eventHandler(e, 'click', this.node2.childNodes[0] as TaroElement)) + .textNormalFontStyle(getNormalAttributes(this.node2.childNodes[0])) + .attributeModifier(commonStyleModify.setNode(this.node2.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node2.childNodes[0] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node2.childNodes[0] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node2.childNodes[0] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node2.childNodes[0] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node2.childNodes[0] as TaroElement)._nodeInfo.areaInfo = res[1] + })) + } } - .attrs(getNormalAttributes(this.node2)) - .onVisibleAreaChange(getNodeThresholds(this.node2) || [0.0, 1.0], getComponentEventCallback(this.node2, VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node2, AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node2._nid].areaInfo = areaResult + .attributeModifier(commonStyleModify.setNode(this.node2 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node2 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node2 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node2 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node2 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node2 as TaroElement)._nodeInfo.areaInfo = res[1] })) + .alignItems(FlexManager.flexOptions(this.node2 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node2 as TaroElement).justifyContent) } - if (this.node0.childNodes[2]._attrs.compileIf) { - Flex(FlexManager.flexOptions(this.node3)) { - Text(this.node3.childNodes[0].textContent) - .attrsText(getTextAttributes(this.node3.childNodes[0])) - .onVisibleAreaChange(getNodeThresholds(this.node3.childNodes[0]) || [0.0, 1.0], getComponentEventCallback(this.node3.childNodes[0], VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node3.childNodes[0], AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node3.childNodes[0]._nid].areaInfo = areaResult - })) + if ((this.node0.childNodes[2] as TaroElement)._attrs.compileIf) { + Column() { + if (this.node3.childNodes[0].nodeType === NodeType.TEXT_NODE && this.node3.childNodes[0].parentNode) { + if ((this.node3.childNodes[0].parentNode as TaroButtonElement).tagName === 'BUTTON') { + Text(this.node3.childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node3.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node3.childNodes[0] as TaroElement)) + .fontSize((this.node3.childNodes[0].parentNode as TaroButtonElement).hmStyle.fontSize || getButtonFontSize((this.node3.childNodes[0].parentNode as TaroButtonElement))) + .fontColor((this.node3.childNodes[0].parentNode as TaroButtonElement).hmStyle.color || getButtonColor(this.node3.childNodes[0].parentNode as TaroButtonElement, BUTTON_THEME_COLOR.get((this.node3.childNodes[0].parentNode as TaroButtonElement)._attrs.type).text)) + } else { + Text(this.node3.childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node3.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node3.childNodes[0] as TaroElement)) + } + } else { + Text(this.node3.childNodes[0].textContent) + .onClick((e: ClickEvent) => eventHandler(e, 'click', this.node3.childNodes[0] as TaroElement)) + .textNormalFontStyle(getNormalAttributes(this.node3.childNodes[0])) + .attributeModifier(commonStyleModify.setNode(this.node3.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node3.childNodes[0] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node3.childNodes[0] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node3.childNodes[0] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node3.childNodes[0] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node3.childNodes[0] as TaroElement)._nodeInfo.areaInfo = res[1] + })) + } } - .attrs(getNormalAttributes(this.node3)) - .onVisibleAreaChange(getNodeThresholds(this.node3) || [0.0, 1.0], getComponentEventCallback(this.node3, VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node3, AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node3._nid].areaInfo = areaResult + .attributeModifier(commonStyleModify.setNode(this.node3 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node3 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node3 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node3 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node3 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node3 as TaroElement)._nodeInfo.areaInfo = res[1] })) + .alignItems(FlexManager.flexOptions(this.node3 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node3 as TaroElement).justifyContent) } - if (this.node0.childNodes[3]._attrs.compileIf) { - Text(this.node0.childNodes[3].textContent) - .attrsText(getTextAttributes(this.node0.childNodes[3])) - .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[3]) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[3], VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node0.childNodes[3], AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node0.childNodes[3]._nid].areaInfo = areaResult - })) + if ((this.node0.childNodes[3] as TaroElement)._attrs.compileIf) { + if (this.node0.childNodes[3].nodeType === NodeType.TEXT_NODE && this.node0.childNodes[3].parentNode) { + if ((this.node0.childNodes[3].parentNode as TaroButtonElement).tagName === 'BUTTON') { + Text(this.node0.childNodes[3].textContent) + .attributeModifier(commonStyleModify.setNode(this.node0.childNodes[3] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node0.childNodes[3] as TaroElement)) + .fontSize((this.node0.childNodes[3].parentNode as TaroButtonElement).hmStyle.fontSize || getButtonFontSize((this.node0.childNodes[3].parentNode as TaroButtonElement))) + .fontColor((this.node0.childNodes[3].parentNode as TaroButtonElement).hmStyle.color || getButtonColor(this.node0.childNodes[3].parentNode as TaroButtonElement, BUTTON_THEME_COLOR.get((this.node0.childNodes[3].parentNode as TaroButtonElement)._attrs.type).text)) + } else { + Text(this.node0.childNodes[3].textContent) + .attributeModifier(commonStyleModify.setNode(this.node0.childNodes[3] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node0.childNodes[3] as TaroElement)) + } + } else { + Text(this.node0.childNodes[3].textContent) + .onClick((e: ClickEvent) => eventHandler(e, 'click', this.node0.childNodes[3] as TaroElement)) + .textNormalFontStyle(getNormalAttributes(this.node0.childNodes[3])) + .attributeModifier(commonStyleModify.setNode(this.node0.childNodes[3] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node0.childNodes[3] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[3] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[3] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node0.childNodes[3] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node0.childNodes[3] as TaroElement)._nodeInfo.areaInfo = res[1] + })) + } } else { - Text(this.node0.childNodes[3].textContent) - .attrsText(getTextAttributes(this.node0.childNodes[3])) - .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[3]) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[3], VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node0.childNodes[3], AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node0.childNodes[3]._nid].areaInfo = areaResult - })) + if (this.node0.childNodes[3].nodeType === NodeType.TEXT_NODE && this.node0.childNodes[3].parentNode) { + if ((this.node0.childNodes[3].parentNode as TaroButtonElement).tagName === 'BUTTON') { + Text(this.node0.childNodes[3].textContent) + .attributeModifier(commonStyleModify.setNode(this.node0.childNodes[3] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node0.childNodes[3] as TaroElement)) + .fontSize((this.node0.childNodes[3].parentNode as TaroButtonElement).hmStyle.fontSize || getButtonFontSize((this.node0.childNodes[3].parentNode as TaroButtonElement))) + .fontColor((this.node0.childNodes[3].parentNode as TaroButtonElement).hmStyle.color || getButtonColor(this.node0.childNodes[3].parentNode as TaroButtonElement, BUTTON_THEME_COLOR.get((this.node0.childNodes[3].parentNode as TaroButtonElement)._attrs.type).text)) + } else { + Text(this.node0.childNodes[3].textContent) + .attributeModifier(commonStyleModify.setNode(this.node0.childNodes[3] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node0.childNodes[3] as TaroElement)) + } + } else { + Text(this.node0.childNodes[3].textContent) + .onClick((e: ClickEvent) => eventHandler(e, 'click', this.node0.childNodes[3] as TaroElement)) + .textNormalFontStyle(getNormalAttributes(this.node0.childNodes[3])) + .attributeModifier(commonStyleModify.setNode(this.node0.childNodes[3] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node0.childNodes[3] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[3] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[3] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node0.childNodes[3] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node0.childNodes[3] as TaroElement)._nodeInfo.areaInfo = res[1] + })) + } } - Flex(FlexManager.flexOptions(this.node4)) {} - .attrs(getNormalAttributes(this.node4)) - .onVisibleAreaChange(getNodeThresholds(this.node4) || [0.0, 1.0], getComponentEventCallback(this.node4, VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node4, AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node4._nid].areaInfo = areaResult + Column() {} + .attributeModifier(commonStyleModify.setNode(this.node4 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node4 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node4 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node4 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node4 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node4 as TaroElement)._nodeInfo.areaInfo = res[1] })) + .alignItems(FlexManager.flexOptions(this.node4 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node4 as TaroElement).justifyContent) } - .attrs(getNormalAttributes(this.node0)) - .onVisibleAreaChange(getNodeThresholds(this.node0) || [0.0, 1.0], getComponentEventCallback(this.node0, VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node0, AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node0._nid].areaInfo = areaResult + .attributeModifier(commonStyleModify.setNode(this.node0 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node0 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node0 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node0 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node0 as TaroElement)._nodeInfo.areaInfo = res[1] })) + .alignItems(FlexManager.flexOptions(this.node0 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node0 as TaroElement).justifyContent) } } -export default TARO_TEMPLATES_f0t0 `; function Index() { return diff --git a/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/condition.rs/should_support_complex_condition.js b/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/condition.rs/should_support_complex_condition.js new file mode 100644 index 000000000000..c216eab64145 --- /dev/null +++ b/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/condition.rs/should_support_complex_condition.js @@ -0,0 +1,283 @@ +const TARO_TEMPLATES_f0t0 = `import { createLazyChildren, createChildItem } from '../render' +import commonStyleModify from '@tarojs/components/style' +import { getButtonColor } from '@tarojs/components/button' +import { FlexManager } from '@tarojs/components/utils/flexManager' +import { TOUCH_EVENT_MAP } from '@tarojs/components/utils/constant/event' +import { BUTTON_THEME_COLOR } from '@tarojs/components/utils/constant/style' +import { getNodeThresholds, getNormalAttributes, getFontAttributes } from '@tarojs/components/utils/helper' +import { NodeType, convertNumber2VP, TaroElement, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '@tarojs/runtime' +import { DynamicCenter } from '@tarojs/components/utils/DynamicCenter' + +import type { HarmonyStyle, TaroButtonElement, TaroViewElement, TaroAny, TaroStyleType, TaroTextStyleType } from '@tarojs/runtime' + +@Extend(Row) +function rowAttrs (style: TaroStyleType) { + .constraintSize({ + minWidth: style.minWidth || style.width, + maxWidth: style.maxWidth, + minHeight: style.minHeight, + maxHeight: style.maxHeight + }) +} +@Extend(Column) +function columnAttrs (style: TaroStyleType) { + .constraintSize({ + minWidth: style.minWidth, + maxWidth: style.maxWidth, + minHeight: style.minHeight || style.height, + maxHeight: style.maxHeight + }) +} +@Extend(Text) +function textNormalFontStyle (style: HarmonyStyle) { + .id(style.id) + .key(style.id) + .opacity(style.opacity) + .fontColor(style.color) + .fontSize(style.fontSize) + .fontWeight(style.fontWeight) + .fontStyle(style.fontStyle) + .fontFamily(style.fontFamily) + .lineHeight(style.lineHeight) + .decoration({ + type: style.textDecoration, + color: style.color + }) +} + +@Extend(Text) +function textSpecialFontStyle(attr: TaroTextStyleType) { + .textAlign(attr.textAlign) + .textOverflow(attr.textOverflow) + .maxLines(attr.WebkitLineClamp) + .letterSpacing(attr.letterSpacing) +} + +function getButtonFontSize (node: TaroButtonElement) { + const isMini = node._attrs.size === 'mini' + + return isMini ? convertNumber2VP(26) : convertNumber2VP(36) +} +@Component +export default struct TARO_TEMPLATES_f0t0 { + node: TaroViewElement = new TaroElement('Ignore') + + dynamicCenter: DynamicCenter = new DynamicCenter() + + aboutToAppear () { + this.dynamicCenter.bindComponentToNodeWithDFS(this.node, this) + } + + @State node0: TaroElement = new TaroElement('Ignore') + @State node1: TaroElement = new TaroElement('Ignore') + @State node2: TaroElement = new TaroElement('Ignore') + @State node3: TaroElement = new TaroElement('Ignore') + @State node4: TaroElement = new TaroElement('Ignore') + @State node5: TaroElement = new TaroElement('Ignore') + + build() { + Column() { + if ((this.node0.childNodes[0] as TaroElement)._attrs.compileIf) { + Column() {} + .attributeModifier(commonStyleModify.setNode(this.node0.childNodes[0] as TaroElement)) + .columnAttrs(getNormalAttributes(this.node0.childNodes[0] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[0] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[0] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node0.childNodes[0] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node0.childNodes[0] as TaroElement)._nodeInfo.areaInfo = res[1] + })) + .alignItems(FlexManager.flexOptions(this.node0.childNodes[0] as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node0.childNodes[0] as TaroElement).justifyContent) + .onClick(e => eventHandler(e, 'click', this.node0.childNodes[0] as TaroElement)) + } + Column() { + if (this.node1.childNodes[0].nodeType === NodeType.TEXT_NODE && this.node1.childNodes[0].parentNode) { + if ((this.node1.childNodes[0].parentNode as TaroButtonElement).tagName === 'BUTTON') { + Text(this.node1.childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node1.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node1.childNodes[0] as TaroElement)) + .fontSize((this.node1.childNodes[0].parentNode as TaroButtonElement).hmStyle.fontSize || getButtonFontSize((this.node1.childNodes[0].parentNode as TaroButtonElement))) + .fontColor((this.node1.childNodes[0].parentNode as TaroButtonElement).hmStyle.color || getButtonColor(this.node1.childNodes[0].parentNode as TaroButtonElement, BUTTON_THEME_COLOR.get((this.node1.childNodes[0].parentNode as TaroButtonElement)._attrs.type).text)) + } else { + Text(this.node1.childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node1.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node1.childNodes[0] as TaroElement)) + } + } else { + Text(this.node1.childNodes[0].textContent) + .onClick((e: ClickEvent) => eventHandler(e, 'click', this.node1.childNodes[0] as TaroElement)) + .textNormalFontStyle(getNormalAttributes(this.node1.childNodes[0])) + .attributeModifier(commonStyleModify.setNode(this.node1.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node1.childNodes[0] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node1.childNodes[0] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node1.childNodes[0] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node1.childNodes[0] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node1.childNodes[0] as TaroElement)._nodeInfo.areaInfo = res[1] + })) + } + } + .attributeModifier(commonStyleModify.setNode(this.node1 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node1 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node1 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node1 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node1 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node1 as TaroElement)._nodeInfo.areaInfo = res[1] + })) + .alignItems(FlexManager.flexOptions(this.node1 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node1 as TaroElement).justifyContent) + Column() { + if (this.node2.childNodes[0].nodeType === NodeType.TEXT_NODE && this.node2.childNodes[0].parentNode) { + if ((this.node2.childNodes[0].parentNode as TaroButtonElement).tagName === 'BUTTON') { + Text(this.node2.childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node2.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node2.childNodes[0] as TaroElement)) + .fontSize((this.node2.childNodes[0].parentNode as TaroButtonElement).hmStyle.fontSize || getButtonFontSize((this.node2.childNodes[0].parentNode as TaroButtonElement))) + .fontColor((this.node2.childNodes[0].parentNode as TaroButtonElement).hmStyle.color || getButtonColor(this.node2.childNodes[0].parentNode as TaroButtonElement, BUTTON_THEME_COLOR.get((this.node2.childNodes[0].parentNode as TaroButtonElement)._attrs.type).text)) + } else { + Text(this.node2.childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node2.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node2.childNodes[0] as TaroElement)) + } + } else { + Text(this.node2.childNodes[0].textContent) + .onClick((e: ClickEvent) => eventHandler(e, 'click', this.node2.childNodes[0] as TaroElement)) + .textNormalFontStyle(getNormalAttributes(this.node2.childNodes[0])) + .attributeModifier(commonStyleModify.setNode(this.node2.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node2.childNodes[0] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node2.childNodes[0] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node2.childNodes[0] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node2.childNodes[0] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node2.childNodes[0] as TaroElement)._nodeInfo.areaInfo = res[1] + })) + } + } + .attributeModifier(commonStyleModify.setNode(this.node2 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node2 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node2 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node2 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node2 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node2 as TaroElement)._nodeInfo.areaInfo = res[1] + })) + .alignItems(FlexManager.flexOptions(this.node2 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node2 as TaroElement).justifyContent) + Column() { + if (this.node3.childNodes[0].nodeType === NodeType.TEXT_NODE && this.node3.childNodes[0].parentNode) { + if ((this.node3.childNodes[0].parentNode as TaroButtonElement).tagName === 'BUTTON') { + Text(this.node3.childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node3.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node3.childNodes[0] as TaroElement)) + .fontSize((this.node3.childNodes[0].parentNode as TaroButtonElement).hmStyle.fontSize || getButtonFontSize((this.node3.childNodes[0].parentNode as TaroButtonElement))) + .fontColor((this.node3.childNodes[0].parentNode as TaroButtonElement).hmStyle.color || getButtonColor(this.node3.childNodes[0].parentNode as TaroButtonElement, BUTTON_THEME_COLOR.get((this.node3.childNodes[0].parentNode as TaroButtonElement)._attrs.type).text)) + } else { + Text(this.node3.childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node3.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node3.childNodes[0] as TaroElement)) + } + } else { + Text(this.node3.childNodes[0].textContent) + .onClick((e: ClickEvent) => eventHandler(e, 'click', this.node3.childNodes[0] as TaroElement)) + .textNormalFontStyle(getNormalAttributes(this.node3.childNodes[0])) + .attributeModifier(commonStyleModify.setNode(this.node3.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node3.childNodes[0] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node3.childNodes[0] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node3.childNodes[0] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node3.childNodes[0] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node3.childNodes[0] as TaroElement)._nodeInfo.areaInfo = res[1] + })) + } + } + .attributeModifier(commonStyleModify.setNode(this.node3 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node3 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node3 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node3 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node3 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node3 as TaroElement)._nodeInfo.areaInfo = res[1] + })) + .alignItems(FlexManager.flexOptions(this.node3 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node3 as TaroElement).justifyContent) + if ((this.node0.childNodes[4] as TaroElement)._attrs.compileIf) { + Column() {} + .attributeModifier(commonStyleModify.setNode(this.node4 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node4 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node4 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node4 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node4 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node4 as TaroElement)._nodeInfo.areaInfo = res[1] + })) + .alignItems(FlexManager.flexOptions(this.node4 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node4 as TaroElement).justifyContent) + } else { + Column() {} + .attributeModifier(commonStyleModify.setNode(this.node0.childNodes[4] as TaroElement)) + .columnAttrs(getNormalAttributes(this.node0.childNodes[4] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[4] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[4] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node0.childNodes[4] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node0.childNodes[4] as TaroElement)._nodeInfo.areaInfo = res[1] + })) + .alignItems(FlexManager.flexOptions(this.node0.childNodes[4] as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node0.childNodes[4] as TaroElement).justifyContent) + } + if ((this.node0.childNodes[5] as TaroElement)._attrs.compileIf) { + Column() { + if ((this.node5.childNodes[0] as TaroElement)._attrs.compileIf) { + Column() {} + .attributeModifier(commonStyleModify.setNode(this.node5.childNodes[0] as TaroElement)) + .columnAttrs(getNormalAttributes(this.node5.childNodes[0] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node5.childNodes[0] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node5.childNodes[0] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node5.childNodes[0] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node5.childNodes[0] as TaroElement)._nodeInfo.areaInfo = res[1] + })) + .alignItems(FlexManager.flexOptions(this.node5.childNodes[0] as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node5.childNodes[0] as TaroElement).justifyContent) + } else { + Column() {} + .attributeModifier(commonStyleModify.setNode(this.node5.childNodes[0] as TaroElement)) + .columnAttrs(getNormalAttributes(this.node5.childNodes[0] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node5.childNodes[0] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node5.childNodes[0] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node5.childNodes[0] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node5.childNodes[0] as TaroElement)._nodeInfo.areaInfo = res[1] + })) + .alignItems(FlexManager.flexOptions(this.node5.childNodes[0] as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node5.childNodes[0] as TaroElement).justifyContent) + } + } + .attributeModifier(commonStyleModify.setNode(this.node5 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node5 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node5 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node5 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node5 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node5 as TaroElement)._nodeInfo.areaInfo = res[1] + })) + .alignItems(FlexManager.flexOptions(this.node5 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node5 as TaroElement).justifyContent) + } else { + Column() {} + .attributeModifier(commonStyleModify.setNode(this.node0.childNodes[5] as TaroElement)) + .columnAttrs(getNormalAttributes(this.node0.childNodes[5] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[5] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[5] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node0.childNodes[5] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node0.childNodes[5] as TaroElement)._nodeInfo.areaInfo = res[1] + })) + .alignItems(FlexManager.flexOptions(this.node0.childNodes[5] as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node0.childNodes[5] as TaroElement).justifyContent) + } + } + .attributeModifier(commonStyleModify.setNode(this.node0 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node0 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node0 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node0 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node0 as TaroElement)._nodeInfo.areaInfo = res[1] + })) + .alignItems(FlexManager.flexOptions(this.node0 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node0 as TaroElement).justifyContent) + } +} +`; +function Index() { + return + + {condition1 ? condition2 && doSth()} compileIf={condition1}/> : } + + {condition1 && ident} + + {condition1 && obj.property} + + {condition1 && fn()} + + {condition1 ? : } + + {condition1 ? {condition2 ? : } : } + + ; +} diff --git a/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/condition.rs/should_support_conditional_and_unkonw_component.js b/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/condition.rs/should_support_conditional_and_unkonw_component.js new file mode 100644 index 000000000000..f80e37f1560e --- /dev/null +++ b/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/condition.rs/should_support_conditional_and_unkonw_component.js @@ -0,0 +1,130 @@ +const TARO_TEMPLATES_f0t0 = `import { createLazyChildren, createChildItem } from '../render' +import commonStyleModify from '@tarojs/components/style' +import { getButtonColor } from '@tarojs/components/button' +import { FlexManager } from '@tarojs/components/utils/flexManager' +import { TOUCH_EVENT_MAP } from '@tarojs/components/utils/constant/event' +import { BUTTON_THEME_COLOR } from '@tarojs/components/utils/constant/style' +import { getNodeThresholds, getNormalAttributes, getFontAttributes } from '@tarojs/components/utils/helper' +import { NodeType, convertNumber2VP, TaroElement, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '@tarojs/runtime' +import { DynamicCenter } from '@tarojs/components/utils/DynamicCenter' + +import type { HarmonyStyle, TaroButtonElement, TaroViewElement, TaroAny, TaroStyleType, TaroTextStyleType } from '@tarojs/runtime' + +@Extend(Row) +function rowAttrs (style: TaroStyleType) { + .constraintSize({ + minWidth: style.minWidth || style.width, + maxWidth: style.maxWidth, + minHeight: style.minHeight, + maxHeight: style.maxHeight + }) +} +@Extend(Column) +function columnAttrs (style: TaroStyleType) { + .constraintSize({ + minWidth: style.minWidth, + maxWidth: style.maxWidth, + minHeight: style.minHeight || style.height, + maxHeight: style.maxHeight + }) +} +@Extend(Text) +function textNormalFontStyle (style: HarmonyStyle) { + .id(style.id) + .key(style.id) + .opacity(style.opacity) + .fontColor(style.color) + .fontSize(style.fontSize) + .fontWeight(style.fontWeight) + .fontStyle(style.fontStyle) + .fontFamily(style.fontFamily) + .lineHeight(style.lineHeight) + .decoration({ + type: style.textDecoration, + color: style.color + }) +} + +@Extend(Text) +function textSpecialFontStyle(attr: TaroTextStyleType) { + .textAlign(attr.textAlign) + .textOverflow(attr.textOverflow) + .maxLines(attr.WebkitLineClamp) + .letterSpacing(attr.letterSpacing) +} + +function getButtonFontSize (node: TaroButtonElement) { + const isMini = node._attrs.size === 'mini' + + return isMini ? convertNumber2VP(26) : convertNumber2VP(36) +} +@Component +export default struct TARO_TEMPLATES_f0t0 { + node: TaroViewElement = new TaroElement('Ignore') + + dynamicCenter: DynamicCenter = new DynamicCenter() + + aboutToAppear () { + this.dynamicCenter.bindComponentToNodeWithDFS(this.node, this) + } + + @State node0: TaroElement = new TaroElement('Ignore') + + build() { + Column() { + if ((this.node0.childNodes[0] as TaroElement)._attrs.compileIf) { + Column() { + if (this.node0.childNodes[0].childNodes[0].nodeType === NodeType.TEXT_NODE && this.node0.childNodes[0].childNodes[0].parentNode) { + if ((this.node0.childNodes[0].childNodes[0].parentNode as TaroButtonElement).tagName === 'BUTTON') { + Text(this.node0.childNodes[0].childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node0.childNodes[0].childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node0.childNodes[0].childNodes[0] as TaroElement)) + .fontSize((this.node0.childNodes[0].childNodes[0].parentNode as TaroButtonElement).hmStyle.fontSize || getButtonFontSize((this.node0.childNodes[0].childNodes[0].parentNode as TaroButtonElement))) + .fontColor((this.node0.childNodes[0].childNodes[0].parentNode as TaroButtonElement).hmStyle.color || getButtonColor(this.node0.childNodes[0].childNodes[0].parentNode as TaroButtonElement, BUTTON_THEME_COLOR.get((this.node0.childNodes[0].childNodes[0].parentNode as TaroButtonElement)._attrs.type).text)) + } else { + Text(this.node0.childNodes[0].childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node0.childNodes[0].childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node0.childNodes[0].childNodes[0] as TaroElement)) + } + } else { + Text(this.node0.childNodes[0].childNodes[0].textContent) + .onClick((e: ClickEvent) => eventHandler(e, 'click', this.node0.childNodes[0].childNodes[0] as TaroElement)) + .textNormalFontStyle(getNormalAttributes(this.node0.childNodes[0].childNodes[0])) + .attributeModifier(commonStyleModify.setNode(this.node0.childNodes[0].childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node0.childNodes[0].childNodes[0] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[0].childNodes[0] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[0].childNodes[0] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node0.childNodes[0].childNodes[0] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node0.childNodes[0].childNodes[0] as TaroElement)._nodeInfo.areaInfo = res[1] + })) + } + } + .attributeModifier(commonStyleModify.setNode(this.node0.childNodes[0] as TaroElement)) + .columnAttrs(getNormalAttributes(this.node0.childNodes[0] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[0] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[0] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node0.childNodes[0] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node0.childNodes[0] as TaroElement)._nodeInfo.areaInfo = res[1] + })) + .alignItems(FlexManager.flexOptions(this.node0.childNodes[0] as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node0.childNodes[0] as TaroElement).justifyContent) + } else { + createChildItem(this.node0.childNodes[0] as TaroElement) + } + } + .attributeModifier(commonStyleModify.setNode(this.node0 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node0 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node0 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node0 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node0 as TaroElement)._nodeInfo.areaInfo = res[1] + })) + .alignItems(FlexManager.flexOptions(this.node0 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node0 as TaroElement).justifyContent) + } +} +`; +function Index() { + return + + {condition ? hello : hello} + + ; +} diff --git a/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/condition.rs/should_support_conditional_expr.js b/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/condition.rs/should_support_conditional_expr.js index 831487069fcf..b82380712e0d 100644 --- a/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/condition.rs/should_support_conditional_expr.js +++ b/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/condition.rs/should_support_conditional_expr.js @@ -1,392 +1,512 @@ -const TARO_TEMPLATES_f0t0 = `import { FlexManager } from './utils/FlexManager' -import { getNodeThresholds, getNormalAttributes, getTextAttributes } from './utils/helper' -import { TaroIgnoreElement, eventHandler, DynamicCenter, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '../runtime' -import type { TaroElement } from '../runtime' -import { TOUCH_EVENT_MAP } from './utils/constant/event' -@Extend(Flex) -function attrs ({ - flexBasis, - flexGrow, - flexShrink, - alignSelf, - clip, - width, - height, - margin, - padding, - linearGradient, - zIndex, - borderStyle, - borderWidth, - borderColor, - borderRadius, - opacity, - backgroundColor, - backgroundImage, - backgroundRepeat, - backgroundImageSize, - constraintSize, - rotate, - scale, - translate, - transform -}) { - .flexGrow(flexGrow) - .flexShrink(flexShrink) - .flexBasis(flexBasis) - .alignSelf(alignSelf) - .width(width) - .height(height) - .constraintSize(constraintSize) - .margin(margin) - .padding(padding) - .linearGradient(linearGradient) - .zIndex(zIndex) - .borderStyle(borderStyle) - .borderWidth(borderWidth) - .borderColor(borderColor) - .borderRadius(borderRadius) - .opacity(opacity) - .backgroundColor(backgroundColor) - .backgroundImage(backgroundImage, backgroundRepeat) - .backgroundImageSize(backgroundImageSize) - .rotate(rotate) - .scale(scale) - .translate(translate) - .transform(transform) - .clip(clip) +const TARO_TEMPLATES_f0t0 = `import { createLazyChildren, createChildItem } from '../render' +import commonStyleModify from '@tarojs/components/style' +import { getButtonColor } from '@tarojs/components/button' +import { FlexManager } from '@tarojs/components/utils/flexManager' +import { TOUCH_EVENT_MAP } from '@tarojs/components/utils/constant/event' +import { BUTTON_THEME_COLOR } from '@tarojs/components/utils/constant/style' +import { getNodeThresholds, getNormalAttributes, getFontAttributes } from '@tarojs/components/utils/helper' +import { NodeType, convertNumber2VP, TaroElement, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '@tarojs/runtime' +import { DynamicCenter } from '@tarojs/components/utils/DynamicCenter' + +import type { HarmonyStyle, TaroButtonElement, TaroViewElement, TaroAny, TaroStyleType, TaroTextStyleType } from '@tarojs/runtime' + +@Extend(Row) +function rowAttrs (style: TaroStyleType) { + .constraintSize({ + minWidth: style.minWidth || style.width, + maxWidth: style.maxWidth, + minHeight: style.minHeight, + maxHeight: style.maxHeight + }) +} +@Extend(Column) +function columnAttrs (style: TaroStyleType) { + .constraintSize({ + minWidth: style.minWidth, + maxWidth: style.maxWidth, + minHeight: style.minHeight || style.height, + maxHeight: style.maxHeight + }) } @Extend(Text) -function attrsText ({ - id, - width, - height, - zIndex, - opacity, - margin, - padding, - decoration, - lineHeight, - letterSpacing, - maxLines, - fontColor, - fontSize, - fontWeight, - fontFamily, - textOverflow, - constraintSize, - border, - borderRadius, - backgroundColor, - backgroundImage, - backgroundRepeat, - backgroundImageSize, - rotate, - scale, - translate, - transform, - textAlign, - }) { - .id(id) - .key(id) - .constraintSize(constraintSize) - .zIndex(zIndex) - .opacity(opacity) - .margin(margin) - .padding(padding) - .decoration(decoration) - .lineHeight(lineHeight) - .letterSpacing(letterSpacing) - .maxLines(maxLines) - .fontColor(fontColor) - .fontSize(fontSize) - .fontWeight(fontWeight) - .fontFamily(fontFamily) - .textOverflow(textOverflow) - .border(border) - .borderRadius(borderRadius) - .backgroundColor(backgroundColor) - .backgroundImage(backgroundImage, backgroundRepeat) - .backgroundImageSize(backgroundImageSize) - .rotate(rotate) - .scale(scale) - .translate(translate) - .transform(transform) - .textAlign(textAlign) - .width(width) - .height(height) +function textNormalFontStyle (style: HarmonyStyle) { + .id(style.id) + .key(style.id) + .opacity(style.opacity) + .fontColor(style.color) + .fontSize(style.fontSize) + .fontWeight(style.fontWeight) + .fontStyle(style.fontStyle) + .fontFamily(style.fontFamily) + .lineHeight(style.lineHeight) + .decoration({ + type: style.textDecoration, + color: style.color + }) } -function getTextAttributes (node: TaroViewElement) { - const attrs = { - ...getNormalAttributes(node), - ...getFontAttributes(node) - } +@Extend(Text) +function textSpecialFontStyle(attr: TaroTextStyleType) { + .textAlign(attr.textAlign) + .textOverflow(attr.textOverflow) + .maxLines(attr.WebkitLineClamp) + .letterSpacing(attr.letterSpacing) +} - transformW3CToHarmonyInStyle(node._st, attrs) +function getButtonFontSize (node: TaroButtonElement) { + const isMini = node._attrs.size === 'mini' - return attrs + return isMini ? convertNumber2VP(26) : convertNumber2VP(36) } @Component -struct TARO_TEMPLATES_f0t0 { - nodeInfoMap: any = {} - dynamicCenter: DynamicCenter - @ObjectLink node: TaroElement +export default struct TARO_TEMPLATES_f0t0 { + node: TaroViewElement = new TaroElement('Ignore') + + dynamicCenter: DynamicCenter = new DynamicCenter() aboutToAppear () { - this.dynamicCenter = new DynamicCenter() this.dynamicCenter.bindComponentToNodeWithDFS(this.node, this) } - @State node0: TaroElement = new TaroIgnoreElement() - @State node1: TaroElement = new TaroIgnoreElement() - @State node2: TaroElement = new TaroIgnoreElement() - @State node3: TaroElement = new TaroIgnoreElement() - @State node4: TaroElement = new TaroIgnoreElement() - @State node5: TaroElement = new TaroIgnoreElement() - @State node6: TaroElement = new TaroIgnoreElement() - @State node7: TaroElement = new TaroIgnoreElement() - @State node8: TaroElement = new TaroIgnoreElement() - @State node9: TaroElement = new TaroIgnoreElement() - @State node10: TaroElement = new TaroIgnoreElement() - @State node11: TaroElement = new TaroIgnoreElement() - @State node12: TaroElement = new TaroIgnoreElement() - @State node13: TaroElement = new TaroIgnoreElement() + @State node0: TaroElement = new TaroElement('Ignore') + @State node1: TaroElement = new TaroElement('Ignore') + @State node2: TaroElement = new TaroElement('Ignore') + @State node3: TaroElement = new TaroElement('Ignore') + @State node4: TaroElement = new TaroElement('Ignore') + @State node5: TaroElement = new TaroElement('Ignore') + @State node6: TaroElement = new TaroElement('Ignore') + @State node7: TaroElement = new TaroElement('Ignore') + @State node8: TaroElement = new TaroElement('Ignore') + @State node9: TaroElement = new TaroElement('Ignore') + @State node10: TaroElement = new TaroElement('Ignore') + @State node11: TaroElement = new TaroElement('Ignore') build() { - Flex(FlexManager.flexOptions(this.node0)) { - if (this.node0.childNodes[0]._attrs.compileIf) { - Flex(FlexManager.flexOptions(this.node1)) { - Text(this.node1.childNodes[0].textContent) - .attrsText(getTextAttributes(this.node1.childNodes[0])) - .onVisibleAreaChange(getNodeThresholds(this.node1.childNodes[0]) || [0.0, 1.0], getComponentEventCallback(this.node1.childNodes[0], VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node1.childNodes[0], AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node1.childNodes[0]._nid].areaInfo = areaResult - })) + Column() { + if ((this.node0.childNodes[0] as TaroElement)._attrs.compileIf) { + Column() { + if (this.node1.childNodes[0].nodeType === NodeType.TEXT_NODE && this.node1.childNodes[0].parentNode) { + if ((this.node1.childNodes[0].parentNode as TaroButtonElement).tagName === 'BUTTON') { + Text(this.node1.childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node1.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node1.childNodes[0] as TaroElement)) + .fontSize((this.node1.childNodes[0].parentNode as TaroButtonElement).hmStyle.fontSize || getButtonFontSize((this.node1.childNodes[0].parentNode as TaroButtonElement))) + .fontColor((this.node1.childNodes[0].parentNode as TaroButtonElement).hmStyle.color || getButtonColor(this.node1.childNodes[0].parentNode as TaroButtonElement, BUTTON_THEME_COLOR.get((this.node1.childNodes[0].parentNode as TaroButtonElement)._attrs.type).text)) + } else { + Text(this.node1.childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node1.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node1.childNodes[0] as TaroElement)) + } + } else { + Text(this.node1.childNodes[0].textContent) + .onClick((e: ClickEvent) => eventHandler(e, 'click', this.node1.childNodes[0] as TaroElement)) + .textNormalFontStyle(getNormalAttributes(this.node1.childNodes[0])) + .attributeModifier(commonStyleModify.setNode(this.node1.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node1.childNodes[0] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node1.childNodes[0] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node1.childNodes[0] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node1.childNodes[0] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node1.childNodes[0] as TaroElement)._nodeInfo.areaInfo = res[1] + })) + } } - .attrs(getNormalAttributes(this.node1)) - .onVisibleAreaChange(getNodeThresholds(this.node1) || [0.0, 1.0], getComponentEventCallback(this.node1, VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node1, AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node1._nid].areaInfo = areaResult + .attributeModifier(commonStyleModify.setNode(this.node1 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node1 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node1 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node1 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node1 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node1 as TaroElement)._nodeInfo.areaInfo = res[1] })) + .alignItems(FlexManager.flexOptions(this.node1 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node1 as TaroElement).justifyContent) } else { - Text(this.node0.childNodes[0].textContent) - .attrsText(getTextAttributes(this.node0.childNodes[0])) - .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[0]) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[0], VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node0.childNodes[0], AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node0.childNodes[0]._nid].areaInfo = areaResult - })) + if (this.node0.childNodes[0].nodeType === NodeType.TEXT_NODE && this.node0.childNodes[0].parentNode) { + if ((this.node0.childNodes[0].parentNode as TaroButtonElement).tagName === 'BUTTON') { + Text(this.node0.childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node0.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node0.childNodes[0] as TaroElement)) + .fontSize((this.node0.childNodes[0].parentNode as TaroButtonElement).hmStyle.fontSize || getButtonFontSize((this.node0.childNodes[0].parentNode as TaroButtonElement))) + .fontColor((this.node0.childNodes[0].parentNode as TaroButtonElement).hmStyle.color || getButtonColor(this.node0.childNodes[0].parentNode as TaroButtonElement, BUTTON_THEME_COLOR.get((this.node0.childNodes[0].parentNode as TaroButtonElement)._attrs.type).text)) + } else { + Text(this.node0.childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node0.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node0.childNodes[0] as TaroElement)) + } + } else { + Text(this.node0.childNodes[0].textContent) + .onClick((e: ClickEvent) => eventHandler(e, 'click', this.node0.childNodes[0] as TaroElement)) + .textNormalFontStyle(getNormalAttributes(this.node0.childNodes[0])) + .attributeModifier(commonStyleModify.setNode(this.node0.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node0.childNodes[0] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[0] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[0] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node0.childNodes[0] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node0.childNodes[0] as TaroElement)._nodeInfo.areaInfo = res[1] + })) + } } - if (this.node0.childNodes[1]._attrs.compileIf) { - if (this.node0.childNodes[1]._attrs.compileIf) { - Flex(FlexManager.flexOptions(this.node4)) { - Text(this.node4.childNodes[0].textContent) - .attrsText(getTextAttributes(this.node4.childNodes[0])) - .onVisibleAreaChange(getNodeThresholds(this.node4.childNodes[0]) || [0.0, 1.0], getComponentEventCallback(this.node4.childNodes[0], VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node4.childNodes[0], AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node4.childNodes[0]._nid].areaInfo = areaResult - })) + if ((this.node0.childNodes[1] as TaroElement)._attrs.compileIf) { + if ((this.node0.childNodes[1] as TaroElement)._attrs.compileIf) { + Column() { + if (this.node4.childNodes[0].nodeType === NodeType.TEXT_NODE && this.node4.childNodes[0].parentNode) { + if ((this.node4.childNodes[0].parentNode as TaroButtonElement).tagName === 'BUTTON') { + Text(this.node4.childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node4.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node4.childNodes[0] as TaroElement)) + .fontSize((this.node4.childNodes[0].parentNode as TaroButtonElement).hmStyle.fontSize || getButtonFontSize((this.node4.childNodes[0].parentNode as TaroButtonElement))) + .fontColor((this.node4.childNodes[0].parentNode as TaroButtonElement).hmStyle.color || getButtonColor(this.node4.childNodes[0].parentNode as TaroButtonElement, BUTTON_THEME_COLOR.get((this.node4.childNodes[0].parentNode as TaroButtonElement)._attrs.type).text)) + } else { + Text(this.node4.childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node4.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node4.childNodes[0] as TaroElement)) + } + } else { + Text(this.node4.childNodes[0].textContent) + .onClick((e: ClickEvent) => eventHandler(e, 'click', this.node4.childNodes[0] as TaroElement)) + .textNormalFontStyle(getNormalAttributes(this.node4.childNodes[0])) + .attributeModifier(commonStyleModify.setNode(this.node4.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node4.childNodes[0] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node4.childNodes[0] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node4.childNodes[0] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node4.childNodes[0] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node4.childNodes[0] as TaroElement)._nodeInfo.areaInfo = res[1] + })) + } } - .attrs(getNormalAttributes(this.node4)) - .onVisibleAreaChange(getNodeThresholds(this.node4) || [0.0, 1.0], getComponentEventCallback(this.node4, VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node4, AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node4._nid].areaInfo = areaResult + .attributeModifier(commonStyleModify.setNode(this.node4 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node4 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node4 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node4 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node4 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node4 as TaroElement)._nodeInfo.areaInfo = res[1] })) + .alignItems(FlexManager.flexOptions(this.node4 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node4 as TaroElement).justifyContent) } else { - Text(this.node3.textContent) - .attrsText(getTextAttributes(this.node3)) - .onVisibleAreaChange(getNodeThresholds(this.node3) || [0.0, 1.0], getComponentEventCallback(this.node3, VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node3, AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node3._nid].areaInfo = areaResult - })) + if (this.node3.nodeType === NodeType.TEXT_NODE && this.node3.parentNode) { + if ((this.node3.parentNode as TaroButtonElement).tagName === 'BUTTON') { + Text(this.node3.textContent) + .attributeModifier(commonStyleModify.setNode(this.node3 as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node3 as TaroElement)) + .fontSize((this.node3.parentNode as TaroButtonElement).hmStyle.fontSize || getButtonFontSize((this.node3.parentNode as TaroButtonElement))) + .fontColor((this.node3.parentNode as TaroButtonElement).hmStyle.color || getButtonColor(this.node3.parentNode as TaroButtonElement, BUTTON_THEME_COLOR.get((this.node3.parentNode as TaroButtonElement)._attrs.type).text)) + } else { + Text(this.node3.textContent) + .attributeModifier(commonStyleModify.setNode(this.node3 as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node3 as TaroElement)) + } + } else { + Text(this.node3.textContent) + .onClick((e: ClickEvent) => eventHandler(e, 'click', this.node3 as TaroElement)) + .textNormalFontStyle(getNormalAttributes(this.node3)) + .attributeModifier(commonStyleModify.setNode(this.node3 as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node3 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node3 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node3 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node3 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node3 as TaroElement)._nodeInfo.areaInfo = res[1] + })) + } } } else { - Flex(FlexManager.flexOptions(this.node2)) { - Text(this.node2.childNodes[0].textContent) - .attrsText(getTextAttributes(this.node2.childNodes[0])) - .onVisibleAreaChange(getNodeThresholds(this.node2.childNodes[0]) || [0.0, 1.0], getComponentEventCallback(this.node2.childNodes[0], VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node2.childNodes[0], AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node2.childNodes[0]._nid].areaInfo = areaResult - })) + Column() { + if (this.node2.childNodes[0].nodeType === NodeType.TEXT_NODE && this.node2.childNodes[0].parentNode) { + if ((this.node2.childNodes[0].parentNode as TaroButtonElement).tagName === 'BUTTON') { + Text(this.node2.childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node2.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node2.childNodes[0] as TaroElement)) + .fontSize((this.node2.childNodes[0].parentNode as TaroButtonElement).hmStyle.fontSize || getButtonFontSize((this.node2.childNodes[0].parentNode as TaroButtonElement))) + .fontColor((this.node2.childNodes[0].parentNode as TaroButtonElement).hmStyle.color || getButtonColor(this.node2.childNodes[0].parentNode as TaroButtonElement, BUTTON_THEME_COLOR.get((this.node2.childNodes[0].parentNode as TaroButtonElement)._attrs.type).text)) + } else { + Text(this.node2.childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node2.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node2.childNodes[0] as TaroElement)) + } + } else { + Text(this.node2.childNodes[0].textContent) + .onClick((e: ClickEvent) => eventHandler(e, 'click', this.node2.childNodes[0] as TaroElement)) + .textNormalFontStyle(getNormalAttributes(this.node2.childNodes[0])) + .attributeModifier(commonStyleModify.setNode(this.node2.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node2.childNodes[0] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node2.childNodes[0] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node2.childNodes[0] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node2.childNodes[0] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node2.childNodes[0] as TaroElement)._nodeInfo.areaInfo = res[1] + })) + } } - .attrs(getNormalAttributes(this.node2)) - .onVisibleAreaChange(getNodeThresholds(this.node2) || [0.0, 1.0], getComponentEventCallback(this.node2, VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node2, AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node2._nid].areaInfo = areaResult + .attributeModifier(commonStyleModify.setNode(this.node2 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node2 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node2 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node2 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node2 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node2 as TaroElement)._nodeInfo.areaInfo = res[1] })) + .alignItems(FlexManager.flexOptions(this.node2 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node2 as TaroElement).justifyContent) } - if (this.node0.childNodes[2]._attrs.compileIf) { - Flex(FlexManager.flexOptions(this.node7)) { - Text(this.node7.childNodes[0].textContent) - .attrsText(getTextAttributes(this.node7.childNodes[0])) - .onVisibleAreaChange(getNodeThresholds(this.node7.childNodes[0]) || [0.0, 1.0], getComponentEventCallback(this.node7.childNodes[0], VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node7.childNodes[0], AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node7.childNodes[0]._nid].areaInfo = areaResult - })) + if ((this.node0.childNodes[2] as TaroElement)._attrs.compileIf) { + Column() { + if (this.node7.childNodes[0].nodeType === NodeType.TEXT_NODE && this.node7.childNodes[0].parentNode) { + if ((this.node7.childNodes[0].parentNode as TaroButtonElement).tagName === 'BUTTON') { + Text(this.node7.childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node7.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node7.childNodes[0] as TaroElement)) + .fontSize((this.node7.childNodes[0].parentNode as TaroButtonElement).hmStyle.fontSize || getButtonFontSize((this.node7.childNodes[0].parentNode as TaroButtonElement))) + .fontColor((this.node7.childNodes[0].parentNode as TaroButtonElement).hmStyle.color || getButtonColor(this.node7.childNodes[0].parentNode as TaroButtonElement, BUTTON_THEME_COLOR.get((this.node7.childNodes[0].parentNode as TaroButtonElement)._attrs.type).text)) + } else { + Text(this.node7.childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node7.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node7.childNodes[0] as TaroElement)) + } + } else { + Text(this.node7.childNodes[0].textContent) + .onClick((e: ClickEvent) => eventHandler(e, 'click', this.node7.childNodes[0] as TaroElement)) + .textNormalFontStyle(getNormalAttributes(this.node7.childNodes[0])) + .attributeModifier(commonStyleModify.setNode(this.node7.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node7.childNodes[0] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node7.childNodes[0] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node7.childNodes[0] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node7.childNodes[0] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node7.childNodes[0] as TaroElement)._nodeInfo.areaInfo = res[1] + })) + } } - .attrs(getNormalAttributes(this.node7)) - .onVisibleAreaChange(getNodeThresholds(this.node7) || [0.0, 1.0], getComponentEventCallback(this.node7, VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node7, AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node7._nid].areaInfo = areaResult + .attributeModifier(commonStyleModify.setNode(this.node7 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node7 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node7 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node7 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node7 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node7 as TaroElement)._nodeInfo.areaInfo = res[1] })) + .alignItems(FlexManager.flexOptions(this.node7 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node7 as TaroElement).justifyContent) } else { - if (this.node0.childNodes[2]._attrs.compileIf) { - Flex(FlexManager.flexOptions(this.node6)) { - Text(this.node6.childNodes[0].textContent) - .attrsText(getTextAttributes(this.node6.childNodes[0])) - .onVisibleAreaChange(getNodeThresholds(this.node6.childNodes[0]) || [0.0, 1.0], getComponentEventCallback(this.node6.childNodes[0], VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node6.childNodes[0], AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node6.childNodes[0]._nid].areaInfo = areaResult - })) + if ((this.node0.childNodes[2] as TaroElement)._attrs.compileIf) { + Column() { + if (this.node6.childNodes[0].nodeType === NodeType.TEXT_NODE && this.node6.childNodes[0].parentNode) { + if ((this.node6.childNodes[0].parentNode as TaroButtonElement).tagName === 'BUTTON') { + Text(this.node6.childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node6.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node6.childNodes[0] as TaroElement)) + .fontSize((this.node6.childNodes[0].parentNode as TaroButtonElement).hmStyle.fontSize || getButtonFontSize((this.node6.childNodes[0].parentNode as TaroButtonElement))) + .fontColor((this.node6.childNodes[0].parentNode as TaroButtonElement).hmStyle.color || getButtonColor(this.node6.childNodes[0].parentNode as TaroButtonElement, BUTTON_THEME_COLOR.get((this.node6.childNodes[0].parentNode as TaroButtonElement)._attrs.type).text)) + } else { + Text(this.node6.childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node6.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node6.childNodes[0] as TaroElement)) + } + } else { + Text(this.node6.childNodes[0].textContent) + .onClick((e: ClickEvent) => eventHandler(e, 'click', this.node6.childNodes[0] as TaroElement)) + .textNormalFontStyle(getNormalAttributes(this.node6.childNodes[0])) + .attributeModifier(commonStyleModify.setNode(this.node6.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node6.childNodes[0] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node6.childNodes[0] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node6.childNodes[0] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node6.childNodes[0] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node6.childNodes[0] as TaroElement)._nodeInfo.areaInfo = res[1] + })) + } } - .attrs(getNormalAttributes(this.node6)) - .onVisibleAreaChange(getNodeThresholds(this.node6) || [0.0, 1.0], getComponentEventCallback(this.node6, VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node6, AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node6._nid].areaInfo = areaResult + .attributeModifier(commonStyleModify.setNode(this.node6 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node6 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node6 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node6 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node6 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node6 as TaroElement)._nodeInfo.areaInfo = res[1] })) + .alignItems(FlexManager.flexOptions(this.node6 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node6 as TaroElement).justifyContent) } else { - Text(this.node5.textContent) - .attrsText(getTextAttributes(this.node5)) - .onVisibleAreaChange(getNodeThresholds(this.node5) || [0.0, 1.0], getComponentEventCallback(this.node5, VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node5, AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node5._nid].areaInfo = areaResult - })) + if (this.node5.nodeType === NodeType.TEXT_NODE && this.node5.parentNode) { + if ((this.node5.parentNode as TaroButtonElement).tagName === 'BUTTON') { + Text(this.node5.textContent) + .attributeModifier(commonStyleModify.setNode(this.node5 as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node5 as TaroElement)) + .fontSize((this.node5.parentNode as TaroButtonElement).hmStyle.fontSize || getButtonFontSize((this.node5.parentNode as TaroButtonElement))) + .fontColor((this.node5.parentNode as TaroButtonElement).hmStyle.color || getButtonColor(this.node5.parentNode as TaroButtonElement, BUTTON_THEME_COLOR.get((this.node5.parentNode as TaroButtonElement)._attrs.type).text)) + } else { + Text(this.node5.textContent) + .attributeModifier(commonStyleModify.setNode(this.node5 as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node5 as TaroElement)) + } + } else { + Text(this.node5.textContent) + .onClick((e: ClickEvent) => eventHandler(e, 'click', this.node5 as TaroElement)) + .textNormalFontStyle(getNormalAttributes(this.node5)) + .attributeModifier(commonStyleModify.setNode(this.node5 as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node5 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node5 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node5 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node5 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node5 as TaroElement)._nodeInfo.areaInfo = res[1] + })) + } } } - if (this.node0.childNodes[3]._attrs.compileIf) { - Flex(FlexManager.flexOptions(this.node8)) { - Text(this.node8.childNodes[0].textContent) - .attrsText(getTextAttributes(this.node8.childNodes[0])) - .onVisibleAreaChange(getNodeThresholds(this.node8.childNodes[0]) || [0.0, 1.0], getComponentEventCallback(this.node8.childNodes[0], VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node8.childNodes[0], AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node8.childNodes[0]._nid].areaInfo = areaResult - })) + if ((this.node0.childNodes[3] as TaroElement)._attrs.compileIf) { + Column() { + if (this.node8.childNodes[0].nodeType === NodeType.TEXT_NODE && this.node8.childNodes[0].parentNode) { + if ((this.node8.childNodes[0].parentNode as TaroButtonElement).tagName === 'BUTTON') { + Text(this.node8.childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node8.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node8.childNodes[0] as TaroElement)) + .fontSize((this.node8.childNodes[0].parentNode as TaroButtonElement).hmStyle.fontSize || getButtonFontSize((this.node8.childNodes[0].parentNode as TaroButtonElement))) + .fontColor((this.node8.childNodes[0].parentNode as TaroButtonElement).hmStyle.color || getButtonColor(this.node8.childNodes[0].parentNode as TaroButtonElement, BUTTON_THEME_COLOR.get((this.node8.childNodes[0].parentNode as TaroButtonElement)._attrs.type).text)) + } else { + Text(this.node8.childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node8.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node8.childNodes[0] as TaroElement)) + } + } else { + Text(this.node8.childNodes[0].textContent) + .onClick((e: ClickEvent) => eventHandler(e, 'click', this.node8.childNodes[0] as TaroElement)) + .textNormalFontStyle(getNormalAttributes(this.node8.childNodes[0])) + .attributeModifier(commonStyleModify.setNode(this.node8.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node8.childNodes[0] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node8.childNodes[0] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node8.childNodes[0] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node8.childNodes[0] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node8.childNodes[0] as TaroElement)._nodeInfo.areaInfo = res[1] + })) + } } - .attrs(getNormalAttributes(this.node8)) - .onVisibleAreaChange(getNodeThresholds(this.node8) || [0.0, 1.0], getComponentEventCallback(this.node8, VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node8, AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node8._nid].areaInfo = areaResult + .attributeModifier(commonStyleModify.setNode(this.node8 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node8 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node8 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node8 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node8 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node8 as TaroElement)._nodeInfo.areaInfo = res[1] })) + .alignItems(FlexManager.flexOptions(this.node8 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node8 as TaroElement).justifyContent) } - if (this.node0.childNodes[4]._attrs.compileIf) { - if (this.node0.childNodes[4]._attrs.compileIf) { - Flex(FlexManager.flexOptions(this.node10)) { - Text(this.node10.childNodes[0].textContent) - .attrsText(getTextAttributes(this.node10.childNodes[0])) - .onVisibleAreaChange(getNodeThresholds(this.node10.childNodes[0]) || [0.0, 1.0], getComponentEventCallback(this.node10.childNodes[0], VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node10.childNodes[0], AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node10.childNodes[0]._nid].areaInfo = areaResult + if ((this.node0.childNodes[4] as TaroElement)._attrs.compileIf) { + } else { + Column() { + if (this.node9.childNodes[0].nodeType === NodeType.TEXT_NODE && this.node9.childNodes[0].parentNode) { + if ((this.node9.childNodes[0].parentNode as TaroButtonElement).tagName === 'BUTTON') { + Text(this.node9.childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node9.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node9.childNodes[0] as TaroElement)) + .fontSize((this.node9.childNodes[0].parentNode as TaroButtonElement).hmStyle.fontSize || getButtonFontSize((this.node9.childNodes[0].parentNode as TaroButtonElement))) + .fontColor((this.node9.childNodes[0].parentNode as TaroButtonElement).hmStyle.color || getButtonColor(this.node9.childNodes[0].parentNode as TaroButtonElement, BUTTON_THEME_COLOR.get((this.node9.childNodes[0].parentNode as TaroButtonElement)._attrs.type).text)) + } else { + Text(this.node9.childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node9.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node9.childNodes[0] as TaroElement)) + } + } else { + Text(this.node9.childNodes[0].textContent) + .onClick((e: ClickEvent) => eventHandler(e, 'click', this.node9.childNodes[0] as TaroElement)) + .textNormalFontStyle(getNormalAttributes(this.node9.childNodes[0])) + .attributeModifier(commonStyleModify.setNode(this.node9.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node9.childNodes[0] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node9.childNodes[0] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node9.childNodes[0] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node9.childNodes[0] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node9.childNodes[0] as TaroElement)._nodeInfo.areaInfo = res[1] })) } - .attrs(getNormalAttributes(this.node10)) - .onVisibleAreaChange(getNodeThresholds(this.node10) || [0.0, 1.0], getComponentEventCallback(this.node10, VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node10, AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node10._nid].areaInfo = areaResult - })) } - } else { - Flex(FlexManager.flexOptions(this.node9)) { - Text(this.node9.childNodes[0].textContent) - .attrsText(getTextAttributes(this.node9.childNodes[0])) - .onVisibleAreaChange(getNodeThresholds(this.node9.childNodes[0]) || [0.0, 1.0], getComponentEventCallback(this.node9.childNodes[0], VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node9.childNodes[0], AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node9.childNodes[0]._nid].areaInfo = areaResult - })) + .attributeModifier(commonStyleModify.setNode(this.node9 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node9 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node9 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node9 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node9 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node9 as TaroElement)._nodeInfo.areaInfo = res[1] + })) + .alignItems(FlexManager.flexOptions(this.node9 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node9 as TaroElement).justifyContent) + } + if ((this.node0.childNodes[5] as TaroElement)._attrs.compileIf) { + Column() { + if (this.node10.childNodes[0].nodeType === NodeType.TEXT_NODE && this.node10.childNodes[0].parentNode) { + if ((this.node10.childNodes[0].parentNode as TaroButtonElement).tagName === 'BUTTON') { + Text(this.node10.childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node10.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node10.childNodes[0] as TaroElement)) + .fontSize((this.node10.childNodes[0].parentNode as TaroButtonElement).hmStyle.fontSize || getButtonFontSize((this.node10.childNodes[0].parentNode as TaroButtonElement))) + .fontColor((this.node10.childNodes[0].parentNode as TaroButtonElement).hmStyle.color || getButtonColor(this.node10.childNodes[0].parentNode as TaroButtonElement, BUTTON_THEME_COLOR.get((this.node10.childNodes[0].parentNode as TaroButtonElement)._attrs.type).text)) + } else { + Text(this.node10.childNodes[0].textContent) + .attributeModifier(commonStyleModify.setNode(this.node10.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node10.childNodes[0] as TaroElement)) + } + } else { + Text(this.node10.childNodes[0].textContent) + .onClick((e: ClickEvent) => eventHandler(e, 'click', this.node10.childNodes[0] as TaroElement)) + .textNormalFontStyle(getNormalAttributes(this.node10.childNodes[0])) + .attributeModifier(commonStyleModify.setNode(this.node10.childNodes[0] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node10.childNodes[0] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node10.childNodes[0] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node10.childNodes[0] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node10.childNodes[0] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node10.childNodes[0] as TaroElement)._nodeInfo.areaInfo = res[1] + })) + } } - .attrs(getNormalAttributes(this.node9)) - .onVisibleAreaChange(getNodeThresholds(this.node9) || [0.0, 1.0], getComponentEventCallback(this.node9, VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node9, AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node9._nid].areaInfo = areaResult + .attributeModifier(commonStyleModify.setNode(this.node10 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node10 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node10 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node10 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node10 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node10 as TaroElement)._nodeInfo.areaInfo = res[1] })) + .alignItems(FlexManager.flexOptions(this.node10 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node10 as TaroElement).justifyContent) } - if (this.node0.childNodes[5]._attrs.compileIf) { - Flex(FlexManager.flexOptions(this.node12)) { - Text(this.node12.childNodes[0].textContent) - .attrsText(getTextAttributes(this.node12.childNodes[0])) - .onVisibleAreaChange(getNodeThresholds(this.node12.childNodes[0]) || [0.0, 1.0], getComponentEventCallback(this.node12.childNodes[0], VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node12.childNodes[0], AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node12.childNodes[0]._nid].areaInfo = areaResult + if ((this.node0.childNodes[6] as TaroElement)._attrs.compileIf) { + if (this.node0.childNodes[6].nodeType === NodeType.TEXT_NODE && this.node0.childNodes[6].parentNode) { + if ((this.node0.childNodes[6].parentNode as TaroButtonElement).tagName === 'BUTTON') { + Text(this.node0.childNodes[6].textContent) + .attributeModifier(commonStyleModify.setNode(this.node0.childNodes[6] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node0.childNodes[6] as TaroElement)) + .fontSize((this.node0.childNodes[6].parentNode as TaroButtonElement).hmStyle.fontSize || getButtonFontSize((this.node0.childNodes[6].parentNode as TaroButtonElement))) + .fontColor((this.node0.childNodes[6].parentNode as TaroButtonElement).hmStyle.color || getButtonColor(this.node0.childNodes[6].parentNode as TaroButtonElement, BUTTON_THEME_COLOR.get((this.node0.childNodes[6].parentNode as TaroButtonElement)._attrs.type).text)) + } else { + Text(this.node0.childNodes[6].textContent) + .attributeModifier(commonStyleModify.setNode(this.node0.childNodes[6] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node0.childNodes[6] as TaroElement)) + } + } else { + Text(this.node0.childNodes[6].textContent) + .onClick((e: ClickEvent) => eventHandler(e, 'click', this.node0.childNodes[6] as TaroElement)) + .textNormalFontStyle(getNormalAttributes(this.node0.childNodes[6])) + .attributeModifier(commonStyleModify.setNode(this.node0.childNodes[6] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node0.childNodes[6] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[6] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[6] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node0.childNodes[6] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node0.childNodes[6] as TaroElement)._nodeInfo.areaInfo = res[1] })) } - .attrs(getNormalAttributes(this.node12)) - .onVisibleAreaChange(getNodeThresholds(this.node12) || [0.0, 1.0], getComponentEventCallback(this.node12, VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node12, AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node12._nid].areaInfo = areaResult - })) } else { - if (this.node0.childNodes[5]._attrs.compileIf) { - Flex(FlexManager.flexOptions(this.node11)) { - Text(this.node11.childNodes[0].textContent) - .attrsText(getTextAttributes(this.node11.childNodes[0])) - .onVisibleAreaChange(getNodeThresholds(this.node11.childNodes[0]) || [0.0, 1.0], getComponentEventCallback(this.node11.childNodes[0], VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node11.childNodes[0], AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node11.childNodes[0]._nid].areaInfo = areaResult - })) + if (this.node0.childNodes[6].nodeType === NodeType.TEXT_NODE && this.node0.childNodes[6].parentNode) { + if ((this.node0.childNodes[6].parentNode as TaroButtonElement).tagName === 'BUTTON') { + Text(this.node0.childNodes[6].textContent) + .attributeModifier(commonStyleModify.setNode(this.node0.childNodes[6] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node0.childNodes[6] as TaroElement)) + .fontSize((this.node0.childNodes[6].parentNode as TaroButtonElement).hmStyle.fontSize || getButtonFontSize((this.node0.childNodes[6].parentNode as TaroButtonElement))) + .fontColor((this.node0.childNodes[6].parentNode as TaroButtonElement).hmStyle.color || getButtonColor(this.node0.childNodes[6].parentNode as TaroButtonElement, BUTTON_THEME_COLOR.get((this.node0.childNodes[6].parentNode as TaroButtonElement)._attrs.type).text)) + } else { + Text(this.node0.childNodes[6].textContent) + .attributeModifier(commonStyleModify.setNode(this.node0.childNodes[6] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node0.childNodes[6] as TaroElement)) } - .attrs(getNormalAttributes(this.node11)) - .onVisibleAreaChange(getNodeThresholds(this.node11) || [0.0, 1.0], getComponentEventCallback(this.node11, VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node11, AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node11._nid].areaInfo = areaResult + } else { + Text(this.node0.childNodes[6].textContent) + .onClick((e: ClickEvent) => eventHandler(e, 'click', this.node0.childNodes[6] as TaroElement)) + .textNormalFontStyle(getNormalAttributes(this.node0.childNodes[6])) + .attributeModifier(commonStyleModify.setNode(this.node0.childNodes[6] as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node0.childNodes[6] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[6] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[6] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node0.childNodes[6] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node0.childNodes[6] as TaroElement)._nodeInfo.areaInfo = res[1] })) } } - if (this.node0.childNodes[6]._attrs.compileIf) { - Text(this.node0.childNodes[6].textContent) - .attrsText(getTextAttributes(this.node0.childNodes[6])) - .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[6]) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[6], VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node0.childNodes[6], AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node0.childNodes[6]._nid].areaInfo = areaResult - })) - } else { - Text(this.node0.childNodes[6].textContent) - .attrsText(getTextAttributes(this.node0.childNodes[6])) - .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[6]) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[6], VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node0.childNodes[6], AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node0.childNodes[6]._nid].areaInfo = areaResult - })) - } - Flex(FlexManager.flexOptions(this.node13)) {} - .attrs(getNormalAttributes(this.node13)) - .onVisibleAreaChange(getNodeThresholds(this.node13) || [0.0, 1.0], getComponentEventCallback(this.node13, VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node13, AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node13._nid].areaInfo = areaResult + Column() {} + .attributeModifier(commonStyleModify.setNode(this.node11 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node11 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node11 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node11 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node11 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node11 as TaroElement)._nodeInfo.areaInfo = res[1] })) + .alignItems(FlexManager.flexOptions(this.node11 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node11 as TaroElement).justifyContent) } - .attrs(getNormalAttributes(this.node0)) - .onVisibleAreaChange(getNodeThresholds(this.node0) || [0.0, 1.0], getComponentEventCallback(this.node0, VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node0, AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node0._nid].areaInfo = areaResult + .attributeModifier(commonStyleModify.setNode(this.node0 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node0 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node0 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node0 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node0 as TaroElement)._nodeInfo.areaInfo = res[1] })) + .alignItems(FlexManager.flexOptions(this.node0 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node0 as TaroElement).justifyContent) } } -export default TARO_TEMPLATES_f0t0 `; function Index() { return @@ -395,17 +515,17 @@ function Index() { {condition1 ? condition2 ? {a} : {b} : {c}} - {condition1 ? {a} : condition2 ? {b} : {c}} + {condition1 ? {a} : condition2 ? {b} : {c}} - {condition1 ? {a} : condition2 ? {b} : {c}} + {condition1 ? {a} : condition2 ? {b} : {c}} - {condition1 ? condition2 ? {a} : : {b}} + {condition1 ? condition2 && {a} : {b}} - {condition1 ? {a} : condition2 ? {b} : } + {condition1 ? {a} : condition2 && {b}} {condition1 ? "someText" : 789} - + ; } diff --git a/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/entry.rs/should_support_compile_child_node.js b/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/entry.rs/should_support_compile_child_node.js index 247a62723176..cd1fdee1e46c 100644 --- a/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/entry.rs/should_support_compile_child_node.js +++ b/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/entry.rs/should_support_compile_child_node.js @@ -1,168 +1,105 @@ -const TARO_TEMPLATES_f0t0 = `import { FlexManager } from './utils/FlexManager' -import { getNodeThresholds, getNormalAttributes, getTextAttributes } from './utils/helper' -import { TaroIgnoreElement, eventHandler, DynamicCenter, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '../runtime' -import type { TaroElement } from '../runtime' -import { TOUCH_EVENT_MAP } from './utils/constant/event' -@Extend(Flex) -function attrs ({ - flexBasis, - flexGrow, - flexShrink, - alignSelf, - clip, - width, - height, - margin, - padding, - linearGradient, - zIndex, - borderStyle, - borderWidth, - borderColor, - borderRadius, - opacity, - backgroundColor, - backgroundImage, - backgroundRepeat, - backgroundImageSize, - constraintSize, - rotate, - scale, - translate, - transform -}) { - .flexGrow(flexGrow) - .flexShrink(flexShrink) - .flexBasis(flexBasis) - .alignSelf(alignSelf) - .width(width) - .height(height) - .constraintSize(constraintSize) - .margin(margin) - .padding(padding) - .linearGradient(linearGradient) - .zIndex(zIndex) - .borderStyle(borderStyle) - .borderWidth(borderWidth) - .borderColor(borderColor) - .borderRadius(borderRadius) - .opacity(opacity) - .backgroundColor(backgroundColor) - .backgroundImage(backgroundImage, backgroundRepeat) - .backgroundImageSize(backgroundImageSize) - .rotate(rotate) - .scale(scale) - .translate(translate) - .transform(transform) - .clip(clip) +const TARO_TEMPLATES_f0t0 = `import { createLazyChildren, createChildItem } from '../render' +import commonStyleModify from '@tarojs/components/style' +import { getButtonColor } from '@tarojs/components/button' +import { FlexManager } from '@tarojs/components/utils/flexManager' +import { TOUCH_EVENT_MAP } from '@tarojs/components/utils/constant/event' +import { BUTTON_THEME_COLOR } from '@tarojs/components/utils/constant/style' +import { getNodeThresholds, getNormalAttributes, getFontAttributes } from '@tarojs/components/utils/helper' +import { NodeType, convertNumber2VP, TaroElement, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '@tarojs/runtime' +import { DynamicCenter } from '@tarojs/components/utils/DynamicCenter' + +import type { HarmonyStyle, TaroButtonElement, TaroViewElement, TaroAny, TaroStyleType, TaroTextStyleType } from '@tarojs/runtime' + +@Extend(Row) +function rowAttrs (style: TaroStyleType) { + .constraintSize({ + minWidth: style.minWidth || style.width, + maxWidth: style.maxWidth, + minHeight: style.minHeight, + maxHeight: style.maxHeight + }) } -@Extend(Image) -function attrsImage ({ - flexBasis, - flexGrow, - flexShrink, - alignSelf, - clip, - width, - height, - margin, - padding, - linearGradient, - zIndex, - borderStyle, - borderWidth, - borderColor, - borderRadius, - opacity, - backgroundColor, - backgroundImage, - backgroundRepeat, - backgroundImageSize, - constraintSize, - rotate, - scale, - translate, - transform -}) { - .flexGrow(flexGrow) - .flexShrink(flexShrink) - .flexBasis(flexBasis) - .alignSelf(alignSelf) - .width(width) - .height(height) - .constraintSize(constraintSize) - .margin(margin) - .padding(padding) - .linearGradient(linearGradient) - .zIndex(zIndex) - .borderStyle(borderStyle) - .borderWidth(borderWidth) - .borderColor(borderColor) - .borderRadius(borderRadius) - .opacity(opacity) - .backgroundColor(backgroundColor) - .backgroundImage(backgroundImage, backgroundRepeat) - .backgroundImageSize(backgroundImageSize) - .rotate(rotate) - .scale(scale) - .translate(translate) - .transform(transform) - .clip(clip) - .objectFit(ImageFit.Contain) +@Extend(Column) +function columnAttrs (style: TaroStyleType) { + .constraintSize({ + minWidth: style.minWidth, + maxWidth: style.maxWidth, + minHeight: style.minHeight || style.height, + maxHeight: style.maxHeight + }) +} +function getImageMode (mode: string): ImageFit { + switch (mode) { + case 'aspectFit': return ImageFit.Contain + case 'aspectFill': return ImageFit.Cover + case 'scaleToFill': return ImageFit.Fill + case 'widthFix': return ImageFit.Auto + case 'heightFix': return ImageFit.Auto + default: return ImageFit.Contain + } } @Component -struct TARO_TEMPLATES_f0t0 { - nodeInfoMap: any = {} - dynamicCenter: DynamicCenter - @ObjectLink node: TaroElement +export default struct TARO_TEMPLATES_f0t0 { + node: TaroViewElement = new TaroElement('Ignore') + + dynamicCenter: DynamicCenter = new DynamicCenter() aboutToAppear () { - this.dynamicCenter = new DynamicCenter() this.dynamicCenter.bindComponentToNodeWithDFS(this.node, this) } - @State node0: TaroElement = new TaroIgnoreElement() + @State node0: TaroElement = new TaroElement('Ignore') build() { - Flex(FlexManager.flexOptions(this.node0)) { - Flex(FlexManager.flexOptions(this.node0.childNodes[0])) {} - .attrs(getNormalAttributes(this.node0.childNodes[0])) - .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[0]) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[0], VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node0.childNodes[0], AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node0.childNodes[0]._nid].areaInfo = areaResult + Column() { + Column() {} + .attributeModifier(commonStyleModify.setNode(this.node0.childNodes[0] as TaroElement)) + .columnAttrs(getNormalAttributes(this.node0.childNodes[0] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[0] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[0] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node0.childNodes[0] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node0.childNodes[0] as TaroElement)._nodeInfo.areaInfo = res[1] })) - Flex(FlexManager.flexOptions(this.node0.childNodes[1])) { - Image(this.node0.childNodes[1].childNodes[0].getAttribute('src')) - .attrsImage(getNormalAttributes(this.node0.childNodes[1].childNodes[0])) - .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[1].childNodes[0]) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[1].childNodes[0], VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node0.childNodes[1].childNodes[0], AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node0.childNodes[1].childNodes[0]._nid].areaInfo = areaResult + .alignItems(FlexManager.flexOptions(this.node0.childNodes[0] as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node0.childNodes[0] as TaroElement).justifyContent) + Column() { + Image((this.node0.childNodes[1].childNodes[0] as TaroElement).getAttribute('src')) + .objectFit(getImageMode((this.node0.childNodes[1].childNodes[0] as TaroElement).getAttribute('mode'))) + .attributeModifier(commonStyleModify.setNode(this.node0.childNodes[1].childNodes[0] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[1].childNodes[0] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[1].childNodes[0] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node0.childNodes[1].childNodes[0] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node0.childNodes[1].childNodes[0] as TaroElement)._nodeInfo.areaInfo = res[1] })) } - .attrs(getNormalAttributes(this.node0.childNodes[1])) - .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[1]) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[1], VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node0.childNodes[1], AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node0.childNodes[1]._nid].areaInfo = areaResult + .attributeModifier(commonStyleModify.setNode(this.node0.childNodes[1] as TaroElement)) + .columnAttrs(getNormalAttributes(this.node0.childNodes[1] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[1] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[1] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node0.childNodes[1] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node0.childNodes[1] as TaroElement)._nodeInfo.areaInfo = res[1] })) + .alignItems(FlexManager.flexOptions(this.node0.childNodes[1] as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node0.childNodes[1] as TaroElement).justifyContent) } - .attrs(getNormalAttributes(this.node0)) - .onVisibleAreaChange(getNodeThresholds(this.node0) || [0.0, 1.0], getComponentEventCallback(this.node0, VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node0, AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node0._nid].areaInfo = areaResult + .attributeModifier(commonStyleModify.setNode(this.node0 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node0 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node0 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node0 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node0 as TaroElement)._nodeInfo.areaInfo = res[1] })) + .alignItems(FlexManager.flexOptions(this.node0 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node0 as TaroElement).justifyContent) } } -export default TARO_TEMPLATES_f0t0 -` +`; function Index() { return + + + + - + + ; } diff --git a/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/entry.rs/should_support_component_not_in_config.js b/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/entry.rs/should_support_component_not_in_config.js index 35dc23f96f62..6de5d53242d4 100644 --- a/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/entry.rs/should_support_component_not_in_config.js +++ b/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/entry.rs/should_support_component_not_in_config.js @@ -1,108 +1,80 @@ -const TARO_TEMPLATES_f0t0 = `import { FlexManager } from './utils/FlexManager' -import { getNodeThresholds, getNormalAttributes, getTextAttributes } from './utils/helper' -import { TaroIgnoreElement, eventHandler, DynamicCenter, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '../runtime' -import type { TaroElement } from '../runtime' -import { TOUCH_EVENT_MAP } from './utils/constant/event' -@Extend(Flex) -function attrs ({ - flexBasis, - flexGrow, - flexShrink, - alignSelf, - clip, - width, - height, - margin, - padding, - linearGradient, - zIndex, - borderStyle, - borderWidth, - borderColor, - borderRadius, - opacity, - backgroundColor, - backgroundImage, - backgroundRepeat, - backgroundImageSize, - constraintSize, - rotate, - scale, - translate, - transform -}) { - .flexGrow(flexGrow) - .flexShrink(flexShrink) - .flexBasis(flexBasis) - .alignSelf(alignSelf) - .width(width) - .height(height) - .constraintSize(constraintSize) - .margin(margin) - .padding(padding) - .linearGradient(linearGradient) - .zIndex(zIndex) - .borderStyle(borderStyle) - .borderWidth(borderWidth) - .borderColor(borderColor) - .borderRadius(borderRadius) - .opacity(opacity) - .backgroundColor(backgroundColor) - .backgroundImage(backgroundImage, backgroundRepeat) - .backgroundImageSize(backgroundImageSize) - .rotate(rotate) - .scale(scale) - .translate(translate) - .transform(transform) - .clip(clip) +const TARO_TEMPLATES_f0t0 = `import { createLazyChildren, createChildItem } from '../render' +import commonStyleModify from '@tarojs/components/style' +import { getButtonColor } from '@tarojs/components/button' +import { FlexManager } from '@tarojs/components/utils/flexManager' +import { TOUCH_EVENT_MAP } from '@tarojs/components/utils/constant/event' +import { BUTTON_THEME_COLOR } from '@tarojs/components/utils/constant/style' +import { getNodeThresholds, getNormalAttributes, getFontAttributes } from '@tarojs/components/utils/helper' +import { NodeType, convertNumber2VP, TaroElement, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '@tarojs/runtime' +import { DynamicCenter } from '@tarojs/components/utils/DynamicCenter' + +import type { HarmonyStyle, TaroButtonElement, TaroViewElement, TaroAny, TaroStyleType, TaroTextStyleType } from '@tarojs/runtime' + +@Extend(Row) +function rowAttrs (style: TaroStyleType) { + .constraintSize({ + minWidth: style.minWidth || style.width, + maxWidth: style.maxWidth, + minHeight: style.minHeight, + maxHeight: style.maxHeight + }) +} +@Extend(Column) +function columnAttrs (style: TaroStyleType) { + .constraintSize({ + minWidth: style.minWidth, + maxWidth: style.maxWidth, + minHeight: style.minHeight || style.height, + maxHeight: style.maxHeight + }) } @Component -struct TARO_TEMPLATES_f0t0 { - nodeInfoMap: any = {} - dynamicCenter: DynamicCenter - @ObjectLink node: TaroElement +export default struct TARO_TEMPLATES_f0t0 { + node: TaroViewElement = new TaroElement('Ignore') + + dynamicCenter: DynamicCenter = new DynamicCenter() aboutToAppear () { - this.dynamicCenter = new DynamicCenter() this.dynamicCenter.bindComponentToNodeWithDFS(this.node, this) } - @State node0: TaroElement = new TaroIgnoreElement() + @State node0: TaroElement = new TaroElement('Ignore') build() { - Flex(FlexManager.flexOptions(this.node0)) { - Flex(FlexManager.flexOptions(this.node0.childNodes[0])) { - ForEach(this.node0.childNodes, item => { - createNode(item) - }, item => item._nid) + Column() { + Column() { + createChildItem(this.node0.childNodes[0].childNodes[0] as TaroElement) } - .attrs(getNormalAttributes(this.node0.childNodes[0])) - .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[0]) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[0], VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node0.childNodes[0], AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node0.childNodes[0]._nid].areaInfo = areaResult + .attributeModifier(commonStyleModify.setNode(this.node0.childNodes[0] as TaroElement)) + .columnAttrs(getNormalAttributes(this.node0.childNodes[0] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[0] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[0] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node0.childNodes[0] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node0.childNodes[0] as TaroElement)._nodeInfo.areaInfo = res[1] })) - Flex(FlexManager.flexOptions(this.node0.childNodes[1])) { - ForEach(this.node0.childNodes, item => { - createNode(item) - }, item => item._nid) + .alignItems(FlexManager.flexOptions(this.node0.childNodes[0] as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node0.childNodes[0] as TaroElement).justifyContent) + Column() { + createChildItem(this.node0.childNodes[1].childNodes[0] as TaroElement) } - .attrs(getNormalAttributes(this.node0.childNodes[1])) - .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[1]) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[1], VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node0.childNodes[1], AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node0.childNodes[1]._nid].areaInfo = areaResult + .attributeModifier(commonStyleModify.setNode(this.node0.childNodes[1] as TaroElement)) + .columnAttrs(getNormalAttributes(this.node0.childNodes[1] as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[1] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[1] as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node0.childNodes[1] as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node0.childNodes[1] as TaroElement)._nodeInfo.areaInfo = res[1] })) + .alignItems(FlexManager.flexOptions(this.node0.childNodes[1] as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node0.childNodes[1] as TaroElement).justifyContent) } - .attrs(getNormalAttributes(this.node0)) - .onVisibleAreaChange(getNodeThresholds(this.node0) || [0.0, 1.0], getComponentEventCallback(this.node0, VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node0, AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node0._nid].areaInfo = areaResult + .attributeModifier(commonStyleModify.setNode(this.node0 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node0 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node0 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node0 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node0 as TaroElement)._nodeInfo.areaInfo = res[1] })) + .alignItems(FlexManager.flexOptions(this.node0 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node0 as TaroElement).justifyContent) } } -export default TARO_TEMPLATES_f0t0 `; function Index() { return diff --git a/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/entry.rs/should_support_multi_compile_mode.js b/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/entry.rs/should_support_multi_compile_mode.js index c0820bc38727..55e880361f40 100644 --- a/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/entry.rs/should_support_multi_compile_mode.js +++ b/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/entry.rs/should_support_multi_compile_mode.js @@ -1,255 +1,168 @@ -const TARO_TEMPLATES_f0t0 = `import { FlexManager } from './utils/FlexManager' -import { getNodeThresholds, getNormalAttributes, getTextAttributes } from './utils/helper' -import { TaroIgnoreElement, eventHandler, DynamicCenter, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '../runtime' -import type { TaroElement } from '../runtime' -import { TOUCH_EVENT_MAP } from './utils/constant/event' -@Extend(Image) -function attrsImage ({ - flexBasis, - flexGrow, - flexShrink, - alignSelf, - clip, - width, - height, - margin, - padding, - linearGradient, - zIndex, - borderStyle, - borderWidth, - borderColor, - borderRadius, - opacity, - backgroundColor, - backgroundImage, - backgroundRepeat, - backgroundImageSize, - constraintSize, - rotate, - scale, - translate, - transform -}) { - .flexGrow(flexGrow) - .flexShrink(flexShrink) - .flexBasis(flexBasis) - .alignSelf(alignSelf) - .width(width) - .height(height) - .constraintSize(constraintSize) - .margin(margin) - .padding(padding) - .linearGradient(linearGradient) - .zIndex(zIndex) - .borderStyle(borderStyle) - .borderWidth(borderWidth) - .borderColor(borderColor) - .borderRadius(borderRadius) - .opacity(opacity) - .backgroundColor(backgroundColor) - .backgroundImage(backgroundImage, backgroundRepeat) - .backgroundImageSize(backgroundImageSize) - .rotate(rotate) - .scale(scale) - .translate(translate) - .transform(transform) - .clip(clip) - .objectFit(ImageFit.Contain) +const TARO_TEMPLATES_f0t0 = `import { createLazyChildren, createChildItem } from '../render' +import commonStyleModify from '@tarojs/components/style' +import { getButtonColor } from '@tarojs/components/button' +import { FlexManager } from '@tarojs/components/utils/flexManager' +import { TOUCH_EVENT_MAP } from '@tarojs/components/utils/constant/event' +import { BUTTON_THEME_COLOR } from '@tarojs/components/utils/constant/style' +import { getNodeThresholds, getNormalAttributes, getFontAttributes } from '@tarojs/components/utils/helper' +import { NodeType, convertNumber2VP, TaroElement, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '@tarojs/runtime' +import { DynamicCenter } from '@tarojs/components/utils/DynamicCenter' + +import type { HarmonyStyle, TaroButtonElement, TaroViewElement, TaroAny, TaroStyleType, TaroTextStyleType } from '@tarojs/runtime' + +function getImageMode (mode: string): ImageFit { + switch (mode) { + case 'aspectFit': return ImageFit.Contain + case 'aspectFill': return ImageFit.Cover + case 'scaleToFill': return ImageFit.Fill + case 'widthFix': return ImageFit.Auto + case 'heightFix': return ImageFit.Auto + default: return ImageFit.Contain + } } @Component -struct TARO_TEMPLATES_f0t0 { - nodeInfoMap: any = {} - dynamicCenter: DynamicCenter - @ObjectLink node: TaroElement +export default struct TARO_TEMPLATES_f0t0 { + node: TaroViewElement = new TaroElement('Ignore') + + dynamicCenter: DynamicCenter = new DynamicCenter() aboutToAppear () { - this.dynamicCenter = new DynamicCenter() this.dynamicCenter.bindComponentToNodeWithDFS(this.node, this) } - @State node0: TaroElement = new TaroIgnoreElement() + @State node0: TaroElement = new TaroElement('Ignore') build() { - Image(this.node0.getAttribute('src')) - .attrsImage(getNormalAttributes(this.node0)) - .onVisibleAreaChange(getNodeThresholds(this.node0) || [0.0, 1.0], getComponentEventCallback(this.node0, VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node0, AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node0._nid].areaInfo = areaResult + Image((this.node0 as TaroElement).getAttribute('src')) + .objectFit(getImageMode((this.node0 as TaroElement).getAttribute('mode'))) + .attributeModifier(commonStyleModify.setNode(this.node0 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node0 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node0 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node0 as TaroElement)._nodeInfo.areaInfo = res[1] })) } } -export default TARO_TEMPLATES_f0t0 -` -const TARO_TEMPLATES_f0t1 = `import { FlexManager } from './utils/FlexManager' -import { getNodeThresholds, getNormalAttributes, getTextAttributes } from './utils/helper' -import { TaroIgnoreElement, eventHandler, DynamicCenter, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '../runtime' -import type { TaroElement } from '../runtime' -import { TOUCH_EVENT_MAP } from './utils/constant/event' -@Extend(Flex) -function attrs ({ - flexBasis, - flexGrow, - flexShrink, - alignSelf, - clip, - width, - height, - margin, - padding, - linearGradient, - zIndex, - borderStyle, - borderWidth, - borderColor, - borderRadius, - opacity, - backgroundColor, - backgroundImage, - backgroundRepeat, - backgroundImageSize, - constraintSize, - rotate, - scale, - translate, - transform -}) { - .flexGrow(flexGrow) - .flexShrink(flexShrink) - .flexBasis(flexBasis) - .alignSelf(alignSelf) - .width(width) - .height(height) - .constraintSize(constraintSize) - .margin(margin) - .padding(padding) - .linearGradient(linearGradient) - .zIndex(zIndex) - .borderStyle(borderStyle) - .borderWidth(borderWidth) - .borderColor(borderColor) - .borderRadius(borderRadius) - .opacity(opacity) - .backgroundColor(backgroundColor) - .backgroundImage(backgroundImage, backgroundRepeat) - .backgroundImageSize(backgroundImageSize) - .rotate(rotate) - .scale(scale) - .translate(translate) - .transform(transform) - .clip(clip) +`; +const TARO_TEMPLATES_f0t1 = `import { createLazyChildren, createChildItem } from '../render' +import commonStyleModify from '@tarojs/components/style' +import { getButtonColor } from '@tarojs/components/button' +import { FlexManager } from '@tarojs/components/utils/flexManager' +import { TOUCH_EVENT_MAP } from '@tarojs/components/utils/constant/event' +import { BUTTON_THEME_COLOR } from '@tarojs/components/utils/constant/style' +import { getNodeThresholds, getNormalAttributes, getFontAttributes } from '@tarojs/components/utils/helper' +import { NodeType, convertNumber2VP, TaroElement, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '@tarojs/runtime' +import { DynamicCenter } from '@tarojs/components/utils/DynamicCenter' + +import type { HarmonyStyle, TaroButtonElement, TaroViewElement, TaroAny, TaroStyleType, TaroTextStyleType } from '@tarojs/runtime' + +@Extend(Row) +function rowAttrs (style: TaroStyleType) { + .constraintSize({ + minWidth: style.minWidth || style.width, + maxWidth: style.maxWidth, + minHeight: style.minHeight, + maxHeight: style.maxHeight + }) +} +@Extend(Column) +function columnAttrs (style: TaroStyleType) { + .constraintSize({ + minWidth: style.minWidth, + maxWidth: style.maxWidth, + minHeight: style.minHeight || style.height, + maxHeight: style.maxHeight + }) } @Extend(Text) -function attrsText ({ - id, - width, - height, - zIndex, - opacity, - margin, - padding, - decoration, - lineHeight, - letterSpacing, - maxLines, - fontColor, - fontSize, - fontWeight, - fontFamily, - textOverflow, - constraintSize, - border, - borderRadius, - backgroundColor, - backgroundImage, - backgroundRepeat, - backgroundImageSize, - rotate, - scale, - translate, - transform, - textAlign, - }) { - .id(id) - .key(id) - .constraintSize(constraintSize) - .zIndex(zIndex) - .opacity(opacity) - .margin(margin) - .padding(padding) - .decoration(decoration) - .lineHeight(lineHeight) - .letterSpacing(letterSpacing) - .maxLines(maxLines) - .fontColor(fontColor) - .fontSize(fontSize) - .fontWeight(fontWeight) - .fontFamily(fontFamily) - .textOverflow(textOverflow) - .border(border) - .borderRadius(borderRadius) - .backgroundColor(backgroundColor) - .backgroundImage(backgroundImage, backgroundRepeat) - .backgroundImageSize(backgroundImageSize) - .rotate(rotate) - .scale(scale) - .translate(translate) - .transform(transform) - .textAlign(textAlign) - .width(width) - .height(height) +function textNormalFontStyle (style: HarmonyStyle) { + .id(style.id) + .key(style.id) + .opacity(style.opacity) + .fontColor(style.color) + .fontSize(style.fontSize) + .fontWeight(style.fontWeight) + .fontStyle(style.fontStyle) + .fontFamily(style.fontFamily) + .lineHeight(style.lineHeight) + .decoration({ + type: style.textDecoration, + color: style.color + }) } -function getTextAttributes (node: TaroViewElement) { - const attrs = { - ...getNormalAttributes(node), - ...getFontAttributes(node) - } +@Extend(Text) +function textSpecialFontStyle(attr: TaroTextStyleType) { + .textAlign(attr.textAlign) + .textOverflow(attr.textOverflow) + .maxLines(attr.WebkitLineClamp) + .letterSpacing(attr.letterSpacing) +} - transformW3CToHarmonyInStyle(node._st, attrs) +function getButtonFontSize (node: TaroButtonElement) { + const isMini = node._attrs.size === 'mini' - return attrs + return isMini ? convertNumber2VP(26) : convertNumber2VP(36) } @Component -struct TARO_TEMPLATES_f0t1 { - nodeInfoMap: any = {} - dynamicCenter: DynamicCenter - @ObjectLink node: TaroElement +export default struct TARO_TEMPLATES_f0t1 { + node: TaroViewElement = new TaroElement('Ignore') + + dynamicCenter: DynamicCenter = new DynamicCenter() aboutToAppear () { - this.dynamicCenter = new DynamicCenter() this.dynamicCenter.bindComponentToNodeWithDFS(this.node, this) } - @State node0: TaroElement = new TaroIgnoreElement() - @State node1: TaroElement = new TaroIgnoreElement() + @State node0: TaroElement = new TaroElement('Ignore') + @State node1: TaroElement = new TaroElement('Ignore') build() { - Flex(FlexManager.flexOptions(this.node0)) { - Text(this.node1.textContent) - .attrsText(getTextAttributes(this.node1)) - .onVisibleAreaChange(getNodeThresholds(this.node1) || [0.0, 1.0], getComponentEventCallback(this.node1, VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node1, AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node1._nid].areaInfo = areaResult - })) + Column() { + if (this.node1.nodeType === NodeType.TEXT_NODE && this.node1.parentNode) { + if ((this.node1.parentNode as TaroButtonElement).tagName === 'BUTTON') { + Text(this.node1.textContent) + .attributeModifier(commonStyleModify.setNode(this.node1 as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node1 as TaroElement)) + .fontSize((this.node1.parentNode as TaroButtonElement).hmStyle.fontSize || getButtonFontSize((this.node1.parentNode as TaroButtonElement))) + .fontColor((this.node1.parentNode as TaroButtonElement).hmStyle.color || getButtonColor(this.node1.parentNode as TaroButtonElement, BUTTON_THEME_COLOR.get((this.node1.parentNode as TaroButtonElement)._attrs.type).text)) + } else { + Text(this.node1.textContent) + .attributeModifier(commonStyleModify.setNode(this.node1 as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node1 as TaroElement)) + } + } else { + Text(this.node1.textContent) + .onClick((e: ClickEvent) => eventHandler(e, 'click', this.node1 as TaroElement)) + .textNormalFontStyle(getNormalAttributes(this.node1)) + .attributeModifier(commonStyleModify.setNode(this.node1 as TaroElement)) + .textSpecialFontStyle(getFontAttributes(this.node1 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node1 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node1 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node1 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node1 as TaroElement)._nodeInfo.areaInfo = res[1] + })) + } } - .attrs(getNormalAttributes(this.node0)) - .onVisibleAreaChange(getNodeThresholds(this.node0) || [0.0, 1.0], getComponentEventCallback(this.node0, VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node0, AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node0._nid].areaInfo = areaResult + .attributeModifier(commonStyleModify.setNode(this.node0 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node0 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node0 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node0 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node0 as TaroElement)._nodeInfo.areaInfo = res[1] })) + .alignItems(FlexManager.flexOptions(this.node0 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node0 as TaroElement).justifyContent) } } -export default TARO_TEMPLATES_f0t1 -` +`; function Index() { return + + + {myText} + - + + ; } diff --git a/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/entry.rs/should_support_single_compile_mode.js b/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/entry.rs/should_support_single_compile_mode.js index a17219333158..d6fb736b329f 100644 --- a/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/entry.rs/should_support_single_compile_mode.js +++ b/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/entry.rs/should_support_single_compile_mode.js @@ -1,86 +1,58 @@ -const TARO_TEMPLATES_f0t0 = `import { FlexManager } from './utils/FlexManager' -import { getNodeThresholds, getNormalAttributes, getTextAttributes } from './utils/helper' -import { TaroIgnoreElement, eventHandler, DynamicCenter, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '../runtime' -import type { TaroElement } from '../runtime' -import { TOUCH_EVENT_MAP } from './utils/constant/event' -@Extend(Flex) -function attrs ({ - flexBasis, - flexGrow, - flexShrink, - alignSelf, - clip, - width, - height, - margin, - padding, - linearGradient, - zIndex, - borderStyle, - borderWidth, - borderColor, - borderRadius, - opacity, - backgroundColor, - backgroundImage, - backgroundRepeat, - backgroundImageSize, - constraintSize, - rotate, - scale, - translate, - transform -}) { - .flexGrow(flexGrow) - .flexShrink(flexShrink) - .flexBasis(flexBasis) - .alignSelf(alignSelf) - .width(width) - .height(height) - .constraintSize(constraintSize) - .margin(margin) - .padding(padding) - .linearGradient(linearGradient) - .zIndex(zIndex) - .borderStyle(borderStyle) - .borderWidth(borderWidth) - .borderColor(borderColor) - .borderRadius(borderRadius) - .opacity(opacity) - .backgroundColor(backgroundColor) - .backgroundImage(backgroundImage, backgroundRepeat) - .backgroundImageSize(backgroundImageSize) - .rotate(rotate) - .scale(scale) - .translate(translate) - .transform(transform) - .clip(clip) +const TARO_TEMPLATES_f0t0 = `import { createLazyChildren, createChildItem } from '../render' +import commonStyleModify from '@tarojs/components/style' +import { getButtonColor } from '@tarojs/components/button' +import { FlexManager } from '@tarojs/components/utils/flexManager' +import { TOUCH_EVENT_MAP } from '@tarojs/components/utils/constant/event' +import { BUTTON_THEME_COLOR } from '@tarojs/components/utils/constant/style' +import { getNodeThresholds, getNormalAttributes, getFontAttributes } from '@tarojs/components/utils/helper' +import { NodeType, convertNumber2VP, TaroElement, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '@tarojs/runtime' +import { DynamicCenter } from '@tarojs/components/utils/DynamicCenter' + +import type { HarmonyStyle, TaroButtonElement, TaroViewElement, TaroAny, TaroStyleType, TaroTextStyleType } from '@tarojs/runtime' + +@Extend(Row) +function rowAttrs (style: TaroStyleType) { + .constraintSize({ + minWidth: style.minWidth || style.width, + maxWidth: style.maxWidth, + minHeight: style.minHeight, + maxHeight: style.maxHeight + }) +} +@Extend(Column) +function columnAttrs (style: TaroStyleType) { + .constraintSize({ + minWidth: style.minWidth, + maxWidth: style.maxWidth, + minHeight: style.minHeight || style.height, + maxHeight: style.maxHeight + }) } @Component -struct TARO_TEMPLATES_f0t0 { - nodeInfoMap: any = {} - dynamicCenter: DynamicCenter - @ObjectLink node: TaroElement +export default struct TARO_TEMPLATES_f0t0 { + node: TaroViewElement = new TaroElement('Ignore') + + dynamicCenter: DynamicCenter = new DynamicCenter() aboutToAppear () { - this.dynamicCenter = new DynamicCenter() this.dynamicCenter.bindComponentToNodeWithDFS(this.node, this) } - @State node0: TaroElement = new TaroIgnoreElement() + @State node0: TaroElement = new TaroElement('Ignore') build() { - Flex(FlexManager.flexOptions(this.node0)) {} - .attrs(getNormalAttributes(this.node0)) - .onVisibleAreaChange(getNodeThresholds(this.node0) || [0.0, 1.0], getComponentEventCallback(this.node0, VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node0, AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node0._nid].areaInfo = areaResult + Column() {} + .attributeModifier(commonStyleModify.setNode(this.node0 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node0 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node0 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node0 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node0 as TaroElement)._nodeInfo.areaInfo = res[1] })) + .alignItems(FlexManager.flexOptions(this.node0 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node0 as TaroElement).justifyContent) } } -export default TARO_TEMPLATES_f0t0 -` +`; function Index() { - return + return ; } diff --git a/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/looping.rs/should_loop_with_arrow_function_with_blockstmt.js b/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/looping.rs/should_loop_with_arrow_function_with_blockstmt.js index 4dd3704cf651..34f82049519e 100644 --- a/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/looping.rs/should_loop_with_arrow_function_with_blockstmt.js +++ b/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/looping.rs/should_loop_with_arrow_function_with_blockstmt.js @@ -1,89 +1,59 @@ -const TARO_TEMPLATES_f0t0 = `import { FlexManager } from './utils/FlexManager' -import { getNodeThresholds, getNormalAttributes, getTextAttributes } from './utils/helper' -import { TaroIgnoreElement, eventHandler, DynamicCenter, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '../runtime' -import type { TaroElement } from '../runtime' -import { TOUCH_EVENT_MAP } from './utils/constant/event' -@Extend(Flex) -function attrs ({ - flexBasis, - flexGrow, - flexShrink, - alignSelf, - clip, - width, - height, - margin, - padding, - linearGradient, - zIndex, - borderStyle, - borderWidth, - borderColor, - borderRadius, - opacity, - backgroundColor, - backgroundImage, - backgroundRepeat, - backgroundImageSize, - constraintSize, - rotate, - scale, - translate, - transform -}) { - .flexGrow(flexGrow) - .flexShrink(flexShrink) - .flexBasis(flexBasis) - .alignSelf(alignSelf) - .width(width) - .height(height) - .constraintSize(constraintSize) - .margin(margin) - .padding(padding) - .linearGradient(linearGradient) - .zIndex(zIndex) - .borderStyle(borderStyle) - .borderWidth(borderWidth) - .borderColor(borderColor) - .borderRadius(borderRadius) - .opacity(opacity) - .backgroundColor(backgroundColor) - .backgroundImage(backgroundImage, backgroundRepeat) - .backgroundImageSize(backgroundImageSize) - .rotate(rotate) - .scale(scale) - .translate(translate) - .transform(transform) - .clip(clip) +const TARO_TEMPLATES_f0t0 = `import { createLazyChildren, createChildItem } from '../render' +import commonStyleModify from '@tarojs/components/style' +import { getButtonColor } from '@tarojs/components/button' +import { FlexManager } from '@tarojs/components/utils/flexManager' +import { TOUCH_EVENT_MAP } from '@tarojs/components/utils/constant/event' +import { BUTTON_THEME_COLOR } from '@tarojs/components/utils/constant/style' +import { getNodeThresholds, getNormalAttributes, getFontAttributes } from '@tarojs/components/utils/helper' +import { NodeType, convertNumber2VP, TaroElement, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '@tarojs/runtime' +import { DynamicCenter } from '@tarojs/components/utils/DynamicCenter' + +import type { HarmonyStyle, TaroButtonElement, TaroViewElement, TaroAny, TaroStyleType, TaroTextStyleType } from '@tarojs/runtime' + +@Extend(Row) +function rowAttrs (style: TaroStyleType) { + .constraintSize({ + minWidth: style.minWidth || style.width, + maxWidth: style.maxWidth, + minHeight: style.minHeight, + maxHeight: style.maxHeight + }) +} +@Extend(Column) +function columnAttrs (style: TaroStyleType) { + .constraintSize({ + minWidth: style.minWidth, + maxWidth: style.maxWidth, + minHeight: style.minHeight || style.height, + maxHeight: style.maxHeight + }) } @Component -struct TARO_TEMPLATES_f0t0 { - nodeInfoMap: any = {} - dynamicCenter: DynamicCenter - @ObjectLink node: TaroElement +export default struct TARO_TEMPLATES_f0t0 { + node: TaroViewElement = new TaroElement('Ignore') + + dynamicCenter: DynamicCenter = new DynamicCenter() aboutToAppear () { - this.dynamicCenter = new DynamicCenter() this.dynamicCenter.bindComponentToNodeWithDFS(this.node, this) } - @State node0: TaroElement = new TaroIgnoreElement() + @State node0: TaroElement = new TaroElement('Ignore') build() { - Flex(FlexManager.flexOptions(this.node0)) { - ForEach(this.node0.childNodes, item => { - createNode(item) - }, item => item._nid) + Column() { + createLazyChildren(this.node0) } - .attrs(getNormalAttributes(this.node0)) - .onVisibleAreaChange(getNodeThresholds(this.node0) || [0.0, 1.0], getComponentEventCallback(this.node0, VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node0, AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node0._nid].areaInfo = areaResult + .attributeModifier(commonStyleModify.setNode(this.node0 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node0 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node0 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node0 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node0 as TaroElement)._nodeInfo.areaInfo = res[1] })) + .alignItems(FlexManager.flexOptions(this.node0 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node0 as TaroElement).justifyContent) } } -export default TARO_TEMPLATES_f0t0 `; function Index() { return diff --git a/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/looping.rs/should_loop_with_arrow_function_with_blockstmt_and_set_parent_dynamic_id.js b/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/looping.rs/should_loop_with_arrow_function_with_blockstmt_and_set_parent_dynamic_id.js index fc4a2224dec9..3904eee51e27 100644 --- a/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/looping.rs/should_loop_with_arrow_function_with_blockstmt_and_set_parent_dynamic_id.js +++ b/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/looping.rs/should_loop_with_arrow_function_with_blockstmt_and_set_parent_dynamic_id.js @@ -1,105 +1,81 @@ -const TARO_TEMPLATES_f0t0 = `import { FlexManager } from './utils/FlexManager' -import { getNodeThresholds, getNormalAttributes, getTextAttributes } from './utils/helper' -import { TaroIgnoreElement, eventHandler, DynamicCenter, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '../runtime' -import type { TaroElement } from '../runtime' -import { TOUCH_EVENT_MAP } from './utils/constant/event' -@Extend(Flex) -function attrs ({ - flexBasis, - flexGrow, - flexShrink, - alignSelf, - clip, - width, - height, - margin, - padding, - linearGradient, - zIndex, - borderStyle, - borderWidth, - borderColor, - borderRadius, - opacity, - backgroundColor, - backgroundImage, - backgroundRepeat, - backgroundImageSize, - constraintSize, - rotate, - scale, - translate, - transform -}) { - .flexGrow(flexGrow) - .flexShrink(flexShrink) - .flexBasis(flexBasis) - .alignSelf(alignSelf) - .width(width) - .height(height) - .constraintSize(constraintSize) - .margin(margin) - .padding(padding) - .linearGradient(linearGradient) - .zIndex(zIndex) - .borderStyle(borderStyle) - .borderWidth(borderWidth) - .borderColor(borderColor) - .borderRadius(borderRadius) - .opacity(opacity) - .backgroundColor(backgroundColor) - .backgroundImage(backgroundImage, backgroundRepeat) - .backgroundImageSize(backgroundImageSize) - .rotate(rotate) - .scale(scale) - .translate(translate) - .transform(transform) - .clip(clip) +const TARO_TEMPLATES_f0t0 = `import { createLazyChildren, createChildItem } from '../render' +import commonStyleModify from '@tarojs/components/style' +import { getButtonColor } from '@tarojs/components/button' +import { FlexManager } from '@tarojs/components/utils/flexManager' +import { TOUCH_EVENT_MAP } from '@tarojs/components/utils/constant/event' +import { BUTTON_THEME_COLOR } from '@tarojs/components/utils/constant/style' +import { getNodeThresholds, getNormalAttributes, getFontAttributes } from '@tarojs/components/utils/helper' +import { NodeType, convertNumber2VP, TaroElement, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '@tarojs/runtime' +import { DynamicCenter } from '@tarojs/components/utils/DynamicCenter' + +import type { HarmonyStyle, TaroButtonElement, TaroViewElement, TaroAny, TaroStyleType, TaroTextStyleType } from '@tarojs/runtime' + +@Extend(Row) +function rowAttrs (style: TaroStyleType) { + .constraintSize({ + minWidth: style.minWidth || style.width, + maxWidth: style.maxWidth, + minHeight: style.minHeight, + maxHeight: style.maxHeight + }) +} +@Extend(Column) +function columnAttrs (style: TaroStyleType) { + .constraintSize({ + minWidth: style.minWidth, + maxWidth: style.maxWidth, + minHeight: style.minHeight || style.height, + maxHeight: style.maxHeight + }) } @Component -struct TARO_TEMPLATES_f0t0 { - nodeInfoMap: any = {} - dynamicCenter: DynamicCenter - @ObjectLink node: TaroElement +export default struct TARO_TEMPLATES_f0t0 { + node: TaroViewElement = new TaroElement('Ignore') + + dynamicCenter: DynamicCenter = new DynamicCenter() aboutToAppear () { - this.dynamicCenter = new DynamicCenter() this.dynamicCenter.bindComponentToNodeWithDFS(this.node, this) } - @State node0: TaroElement = new TaroIgnoreElement() - @State node1: TaroElement = new TaroIgnoreElement() + @State node0: TaroElement = new TaroElement('Ignore') + @State node1: TaroElement = new TaroElement('Ignore') build() { - Flex(FlexManager.flexOptions(this.node0)) { - Flex(FlexManager.flexOptions(this.node1)) { - ForEach(this.node1.childNodes, item => { - createNode(item) - }, item => item._nid) + Column() { + Column() { + createLazyChildren(this.node1) } - .attrs(getNormalAttributes(this.node1)) - .onVisibleAreaChange(getNodeThresholds(this.node1) || [0.0, 1.0], getComponentEventCallback(this.node1, VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node1, AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node1._nid].areaInfo = areaResult + .attributeModifier(commonStyleModify.setNode(this.node1 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node1 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node1 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node1 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node1 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node1 as TaroElement)._nodeInfo.areaInfo = res[1] })) + .alignItems(FlexManager.flexOptions(this.node1 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node1 as TaroElement).justifyContent) } - .attrs(getNormalAttributes(this.node0)) - .onVisibleAreaChange(getNodeThresholds(this.node0) || [0.0, 1.0], getComponentEventCallback(this.node0, VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node0, AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node0._nid].areaInfo = areaResult + .attributeModifier(commonStyleModify.setNode(this.node0 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node0 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node0 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node0 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node0 as TaroElement)._nodeInfo.areaInfo = res[1] })) + .alignItems(FlexManager.flexOptions(this.node0 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node0 as TaroElement).justifyContent) } } -export default TARO_TEMPLATES_f0t0 `; function Index() { return + + {list.map((item)=>{ return {item}; })} + + ; } diff --git a/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/looping.rs/should_loop_with_function_expr.js b/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/looping.rs/should_loop_with_function_expr.js index c81d692bba46..c3297e448291 100644 --- a/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/looping.rs/should_loop_with_function_expr.js +++ b/crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/harmony/looping.rs/should_loop_with_function_expr.js @@ -1,99 +1,76 @@ -const TARO_TEMPLATES_f0t0 = `import { FlexManager } from './utils/FlexManager' -import { getNodeThresholds, getNormalAttributes, getTextAttributes } from './utils/helper' -import { TaroIgnoreElement, eventHandler, DynamicCenter, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '../runtime' -import type { TaroElement } from '../runtime' -import { TOUCH_EVENT_MAP } from './utils/constant/event' -@Extend(Flex) -function attrs ({ - flexBasis, - flexGrow, - flexShrink, - alignSelf, - clip, - width, - height, - margin, - padding, - linearGradient, - zIndex, - borderStyle, - borderWidth, - borderColor, - borderRadius, - opacity, - backgroundColor, - backgroundImage, - backgroundRepeat, - backgroundImageSize, - constraintSize, - rotate, - scale, - translate, - transform -}) { - .flexGrow(flexGrow) - .flexShrink(flexShrink) - .flexBasis(flexBasis) - .alignSelf(alignSelf) - .width(width) - .height(height) - .constraintSize(constraintSize) - .margin(margin) - .padding(padding) - .linearGradient(linearGradient) - .zIndex(zIndex) - .borderStyle(borderStyle) - .borderWidth(borderWidth) - .borderColor(borderColor) - .borderRadius(borderRadius) - .opacity(opacity) - .backgroundColor(backgroundColor) - .backgroundImage(backgroundImage, backgroundRepeat) - .backgroundImageSize(backgroundImageSize) - .rotate(rotate) - .scale(scale) - .translate(translate) - .transform(transform) - .clip(clip) +const TARO_TEMPLATES_f0t0 = `import { createLazyChildren, createChildItem } from '../render' +import commonStyleModify from '@tarojs/components/style' +import { getButtonColor } from '@tarojs/components/button' +import { FlexManager } from '@tarojs/components/utils/flexManager' +import { TOUCH_EVENT_MAP } from '@tarojs/components/utils/constant/event' +import { BUTTON_THEME_COLOR } from '@tarojs/components/utils/constant/style' +import { getNodeThresholds, getNormalAttributes, getFontAttributes } from '@tarojs/components/utils/helper' +import { NodeType, convertNumber2VP, TaroElement, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '@tarojs/runtime' +import { DynamicCenter } from '@tarojs/components/utils/DynamicCenter' + +import type { HarmonyStyle, TaroButtonElement, TaroViewElement, TaroAny, TaroStyleType, TaroTextStyleType } from '@tarojs/runtime' + +@Extend(Row) +function rowAttrs (style: TaroStyleType) { + .constraintSize({ + minWidth: style.minWidth || style.width, + maxWidth: style.maxWidth, + minHeight: style.minHeight, + maxHeight: style.maxHeight + }) +} +@Extend(Column) +function columnAttrs (style: TaroStyleType) { + .constraintSize({ + minWidth: style.minWidth, + maxWidth: style.maxWidth, + minHeight: style.minHeight || style.height, + maxHeight: style.maxHeight + }) } @Component -struct TARO_TEMPLATES_f0t0 { - nodeInfoMap: any = {} - dynamicCenter: DynamicCenter - @ObjectLink node: TaroElement +export default struct TARO_TEMPLATES_f0t0 { + node: TaroViewElement = new TaroElement('Ignore') + + dynamicCenter: DynamicCenter = new DynamicCenter() aboutToAppear () { - this.dynamicCenter = new DynamicCenter() this.dynamicCenter.bindComponentToNodeWithDFS(this.node, this) } - @State node0: TaroElement = new TaroIgnoreElement() + @State node0: TaroElement = new TaroElement('Ignore') build() { - Flex(FlexManager.flexOptions(this.node0)) { - ForEach(this.node0.childNodes, item => { - createNode(item) - }, item => item._nid) + Column() { + createLazyChildren(this.node0) } - .attrs(getNormalAttributes(this.node0)) - .onVisibleAreaChange(getNodeThresholds(this.node0) || [0.0, 1.0], getComponentEventCallback(this.node0, VISIBLE_CHANGE_EVENT_NAME)) - .onAreaChange(getComponentEventCallback(this.node0, AREA_CHANGE_EVENT_NAME, ({ eventResult }) => { - const [_, areaResult] = eventResult - this.nodeInfoMap[this.node0._nid].areaInfo = areaResult + .attributeModifier(commonStyleModify.setNode(this.node0 as TaroElement)) + .columnAttrs(getNormalAttributes(this.node0 as TaroElement)) + .onVisibleAreaChange(getNodeThresholds(this.node0 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0 as TaroElement, VISIBLE_CHANGE_EVENT_NAME)) + .onAreaChange(getComponentEventCallback(this.node0 as TaroElement, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => { + (this.node0 as TaroElement)._nodeInfo.areaInfo = res[1] })) + .alignItems(FlexManager.flexOptions(this.node0 as TaroElement).alignItems as HorizontalAlign) + .justifyContent(FlexManager.flexOptions(this.node0 as TaroElement).justifyContent) } } -export default TARO_TEMPLATES_f0t0 -` +`; function Index() { return + {list.map(function(item, index) { return + index: + {index} + item: + {item} - + + ; })} - + + ; } diff --git a/crates/taro_init/src/constants.rs b/crates/taro_init/src/constants.rs index 64e945566477..21715c3b431f 100644 --- a/crates/taro_init/src/constants.rs +++ b/crates/taro_init/src/constants.rs @@ -29,7 +29,6 @@ pub static FRAMEWORK_TYPE_MAP: Lazy> = Lazy::new(| let mut map = HashMap::new(); map.insert(&FrameworkType::Preact, "preact"); map.insert(&FrameworkType::React, "react"); - map.insert(&FrameworkType::Vue, "vue"); map.insert(&FrameworkType::Vue3, "vue3"); map }); @@ -95,7 +94,6 @@ pub enum CSSType { pub enum FrameworkType { React, Preact, - Vue, Vue3, } diff --git a/crates/taro_init/src/creator.rs b/crates/taro_init/src/creator.rs index 89356f7c0b49..a01a7cac72a1 100644 --- a/crates/taro_init/src/creator.rs +++ b/crates/taro_init/src/creator.rs @@ -34,6 +34,9 @@ pub struct CreateOptions { pub page_name: Option, pub compiler: Option, pub set_page_name: Option, + pub sub_pkg: Option, + pub page_dir: Option, + pub set_sub_pkg_page_name: Option, pub change_ext: Option, pub is_custom_template: Option, pub plugin_type: Option, @@ -43,6 +46,7 @@ pub struct CreateOptions { pub struct JSReturnObject { pub set_page_name: Option, pub change_ext: Option, + pub set_sub_pkg_page_name: Option, } impl FromNapiValue for JSReturnObject { @@ -51,12 +55,17 @@ impl FromNapiValue for JSReturnObject { let mut js_return_object = JSReturnObject { set_page_name: None, change_ext: None, + set_sub_pkg_page_name: None, }; let has_set_page_name = obj.has_named_property("setPageName")?; let has_change_ext = obj.has_named_property("changeExt")?; + let has_set_sub_pkg_page_name = obj.has_named_property("setSubPkgName")?; if has_set_page_name { js_return_object.set_page_name = Some(obj.get_named_property::("setPageName")?); } + if has_set_sub_pkg_page_name { + js_return_object.set_sub_pkg_page_name = Some(obj.get_named_property::("setSubPkgName")?); + } if has_change_ext { js_return_object.change_ext = Some(obj.get_named_property::("changeExt")?); } @@ -197,11 +206,7 @@ impl Creator { for file in files { let file_relative_path = normalize_path_str(file.replace(template_path, "").as_str()); let framework = options.framework; - let is_vue_framework = if let Some(framework) = framework { - framework == FrameworkType::Vue || framework == FrameworkType::Vue3 - } else { - false - }; + let is_vue_framework = framework.is_some_and(|framework| framework == FrameworkType::Vue3); if is_vue_framework && file_relative_path.ends_with(".jsx") { continue; } @@ -226,8 +231,17 @@ impl Creator { JSReturn::Object(obj) => { let set_page_name = obj.set_page_name; let change_ext_re = obj.change_ext; - if let Some(set_page_name) = set_page_name { - page_name = set_page_name; + let set_sub_pkg_page_name = obj.set_sub_pkg_page_name; + let sub_pkg = &options.sub_pkg; + if sub_pkg.is_some() { + // 创建分包页面模式 + if let Some(set_sub_pkg_page_name) = set_sub_pkg_page_name { + page_name = set_sub_pkg_page_name; + } + } else { + if let Some(set_page_name) = set_page_name { + page_name = set_page_name; + } } if let Some(change_ext_re) = change_ext_re { change_ext = change_ext_re; diff --git a/crates/taro_init/src/page.rs b/crates/taro_init/src/page.rs index caab73d0126d..49897e507ae7 100644 --- a/crates/taro_init/src/page.rs +++ b/crates/taro_init/src/page.rs @@ -29,6 +29,8 @@ pub struct Page { pub custom_template_path: Option, pub base_page_files: Vec, pub period: PeriodType, + pub sub_pkg: Option, + pub page_dir: Option, } impl Page { @@ -49,6 +51,8 @@ impl Page { custom_template_path: Option, base_page_files: Vec, period: PeriodType, + sub_pkg: Option, + page_dir: Option, ) -> Self { Page { project_dir, @@ -67,6 +71,8 @@ impl Page { custom_template_path, base_page_files, period, + sub_pkg, + page_dir, } } @@ -101,8 +107,11 @@ impl Page { typescript: self.typescript.clone(), template: self.template.clone(), page_name: Some(self.page_name.clone()), + sub_pkg: self.sub_pkg.clone(), + page_dir: self.page_dir.clone(), compiler: self.compiler.clone(), set_page_name: None, + set_sub_pkg_page_name: None, change_ext: None, is_custom_template: self.is_custom_template.clone(), plugin_type: None, diff --git a/crates/taro_init/src/plugin.rs b/crates/taro_init/src/plugin.rs index 8a04d1f5cf1b..e9210999c500 100644 --- a/crates/taro_init/src/plugin.rs +++ b/crates/taro_init/src/plugin.rs @@ -63,6 +63,9 @@ impl Plugin { change_ext: None, is_custom_template: None, plugin_type: Some(self.plugin_type.clone()), + sub_pkg: None, + page_dir: None, + set_sub_pkg_page_name: None, }; let all_files = all_files.iter().map(|f| f.as_str()).collect::>(); println!(); diff --git a/crates/taro_init/src/project.rs b/crates/taro_init/src/project.rs index b7c5f11e2225..4c71c019b246 100644 --- a/crates/taro_init/src/project.rs +++ b/crates/taro_init/src/project.rs @@ -107,6 +107,9 @@ impl Project { page_name: Some("index".to_string()), compiler: self.compiler.clone(), set_page_name: None, + set_sub_pkg_page_name: None, + sub_pkg: None, + page_dir: None, change_ext: None, is_custom_template: None, plugin_type: None, diff --git a/examples/custom-tabbar-vue3/package.json b/examples/custom-tabbar-vue3/package.json index 6d752cc51594..3362fe1e1d9a 100644 --- a/examples/custom-tabbar-vue3/package.json +++ b/examples/custom-tabbar-vue3/package.json @@ -40,7 +40,7 @@ "@tarojs/components": "3.4.3", "@tarojs/plugin-framework-vue3": "3.4.3", "vuex": "^4.0.0-beta.4", - "vue": "^3.0.0" + "vue": "3.2.47" }, "devDependencies": { "@types/webpack-env": "^1.13.6", @@ -48,7 +48,7 @@ "@tarojs/webpack-runner": "3.4.3", "@babel/core": "^7.8.0", "babel-preset-taro": "3.4.3", - "@vue/compiler-sfc": "^3.0.0", + "@vue/compiler-sfc": "3.2.47", "vue-loader": "^16.0.0-beta.8", "eslint-plugin-vue": "^7.0.0", "eslint-config-taro": "3.4.3", diff --git a/examples/new-blended/miniapp/project.config.json b/examples/new-blended/miniapp/project.config.json index 775f1a0d6783..e68102fb2ac9 100644 --- a/examples/new-blended/miniapp/project.config.json +++ b/examples/new-blended/miniapp/project.config.json @@ -49,4 +49,4 @@ "include": [] }, "appid": "wxa9abf43f10a7bdb0" -} \ No newline at end of file +} diff --git a/examples/new-blended/miniapp/project.private.config.json b/examples/new-blended/miniapp/project.private.config.json index 5fba65235c00..0f43df783847 100644 --- a/examples/new-blended/miniapp/project.private.config.json +++ b/examples/new-blended/miniapp/project.private.config.json @@ -17,4 +17,4 @@ ] } } -} \ No newline at end of file +} diff --git a/npm/darwin-arm64/package.json b/npm/darwin-arm64/package.json index b50470acaec4..808a6983ca8d 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": "3.6.23", + "version": "4.0.0-beta.33", "os": [ "darwin" ], @@ -14,7 +14,7 @@ ], "license": "MIT", "engines": { - "node": ">= 10" + "node": ">= 18" }, "publishConfig": { "access": "public" diff --git a/npm/darwin-x64/package.json b/npm/darwin-x64/package.json index deb97daeb412..b0078753a572 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": "3.6.23", + "version": "4.0.0-beta.33", "os": [ "darwin" ], @@ -14,7 +14,7 @@ ], "license": "MIT", "engines": { - "node": ">= 10" + "node": ">= 18" }, "publishConfig": { "access": "public" diff --git a/npm/linux-x64-gnu/package.json b/npm/linux-x64-gnu/package.json index 3be48772ec26..db8db792b447 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": "3.6.23", + "version": "4.0.0-beta.33", "os": [ "linux" ], @@ -14,7 +14,7 @@ ], "license": "MIT", "engines": { - "node": ">= 10" + "node": ">= 18" }, "libc": [ "glibc" diff --git a/npm/win32-x64-msvc/package.json b/npm/win32-x64-msvc/package.json index a83f3354fa63..fb59329bdb6a 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": "3.6.23", + "version": "4.0.0-beta.33", "os": [ "win32" ], @@ -14,7 +14,7 @@ ], "license": "MIT", "engines": { - "node": ">= 10" + "node": ">= 18" }, "publishConfig": { "access": "public" diff --git a/package.json b/package.json index ed6a90f4aaab..daffb7af8990 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "taro", - "version": "3.6.23", + "version": "4.0.0-beta.33", "description": "开放式跨端跨框架开发解决方案", "homepage": "https://github.com/NervJS/taro#readme", "author": "O2Team", @@ -21,7 +21,7 @@ "scripts": { "preinstall": "npx only-allow pnpm", "prepare": "husky install", - "build": "pnpm -r --aggregate-output --filter=./packages/* build", + "build": "pnpm -r --filter=./packages/* build", "build:binding:debug": "pnpm --filter @tarojs/binding run build:debug", "build:binding:release": "pnpm --filter @tarojs/binding run build", "format::rs": "cargo fmt --all", @@ -58,26 +58,25 @@ "@babel/plugin-transform-react-jsx": "^7.14.5", "@babel/plugin-transform-runtime": "^7.14.5", "@babel/preset-env": "^7.14.5", - "@babel/preset-react": "^7.14.5", + "@babel/preset-react": "^7.22.15", "@babel/preset-typescript": "^7.14.5", "@babel/runtime": "^7.14.5", "@babel/traverse": "^7.14.5", + "@babel/types": "^7.14.5", "@commitlint/cli": "^17.6.6", "@commitlint/config-conventional": "^17.6.6", "@tarojs/components": "workspace:*", "@tarojs/helper": "workspace:*", - "@tarojs/mini-runner": "workspace:*", "@tarojs/plugin-framework-react": "workspace:*", - "@tarojs/plugin-framework-vue2": "workspace:*", "@tarojs/plugin-framework-vue3": "workspace:*", "@tarojs/plugin-platform-alipay": "workspace:*", "@tarojs/plugin-platform-h5": "workspace:*", + "@tarojs/plugin-platform-harmony-hybrid": "workspace:*", "@tarojs/plugin-platform-jd": "workspace:*", "@tarojs/plugin-platform-qq": "workspace:*", "@tarojs/plugin-platform-swan": "workspace:*", "@tarojs/plugin-platform-tt": "workspace:*", "@tarojs/plugin-platform-weapp": "workspace:*", - "@tarojs/plugin-platform-harmony-hybrid": "workspace:*", "@tarojs/router": "workspace:*", "@tarojs/runner-utils": "workspace:*", "@tarojs/runtime": "workspace:*", @@ -86,7 +85,6 @@ "@tarojs/taro-h5": "workspace:*", "@tarojs/taro-loader": "workspace:*", "@tarojs/taro-rn": "workspace:*", - "@tarojs/webpack-runner": "workspace:*", "@tarojs/webpack5-runner": "workspace:*", "@types/babel-types": "^7.0.7", "@types/babel__core": "^7.1.14", @@ -100,9 +98,11 @@ "@types/less": "^3.0.2", "@types/lodash": "^4.14.142", "@types/lodash-es": "^4.17.6", - "@types/node": "^14.14.31", + "@types/node": "^18.19.12", "@types/postcss-import": "^14.0.0", + "@types/postcss-url": "^10.0.0", "@types/react": "^18.0.0", + "@types/react-dom": "^18.0.0", "@types/react-reconciler": "0.28.1", "@types/request": "^2.48.1", "@types/resolve": "^1.20.6", @@ -119,6 +119,7 @@ "core-js": "^3.6.5", "cpy-cli": "^4.1.0", "cross-env": "^7.0.2", + "escodegen": "^2.0.0", "eslint": "^8.12.0", "eslint-config-prettier": "^6.4.0", "eslint-config-standard": "^14.1.1", @@ -128,7 +129,7 @@ "eslint-plugin-node": "^10.0.0", "eslint-plugin-prettier": "^4.2.1", "eslint-plugin-promise": "^6.1.1", - "eslint-plugin-react": "^7.4.0", + "eslint-plugin-react": "^7.33.2", "eslint-plugin-simple-import-sort": "^7.0.0", "eslint-plugin-standard": "^4.0.1", "husky": "^8.0.1", @@ -136,6 +137,7 @@ "jest-cli": "^27.4.5", "jest-environment-node": "^27.4.4", "lint-staged": "^13.0.2", + "mkdirp": "^3.0.1", "nervjs": "^1.4.6", "npm-run-all": "^4.1.2", "postcss": "^8.4.18", @@ -148,6 +150,7 @@ "react-dom": "^18.2.0", "react-test-renderer": "^18.2.0", "rimraf": "^5.0.0", + "rollup": "^3.8.1", "stylelint": "^14.6.1", "stylelint-config-standard-scss": "^3.0.0", "stylelint-config-taro-rn": "workspace:*", @@ -155,9 +158,8 @@ "stylelint-taro-rn": "workspace:*", "tslib": "^2.6.2", "typescript": "^4.7.4", - "vue": "^2.6.11", "vue-loader": "^17.0.0", - "vue-template-compiler": "^2.6.11", + "vue-template-compiler": "~2.6.11", "webpack": "5.78.0", "webpack-chain": "6.5.1", "webpack-dev-server": "4.11.1", @@ -174,7 +176,7 @@ }, "react-native-root-siblings": { "peerDependencies": { - "react": "18.1.0" + "react": "18.2.0" }, "peerDependenciesMeta": { "react": { @@ -182,6 +184,9 @@ } } } + }, + "overrides": { + "browserslist": "^4.23.0" } } } 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 415c24fe909b..102a6fe0a5a2 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": "3.6.23", + "version": "4.0.0-beta.33", "description": "Transform stylesheet selector to style in JSX Elements.", "license": "MIT", "main": "dist/index.js", @@ -19,8 +19,8 @@ }, "homepage": "https://github.com/NervJS/taro#readme", "engines": { - "node": ">=12.0.0", - "npm": ">=6.0.0" + "node": ">= 18", + "npm": ">= 6" }, "dependencies": { "camelize": "^1.0.0", @@ -28,7 +28,7 @@ }, "devDependencies": { "@babel/core": "^7.14.5", - "babel-jest": "^29.5.0", + "babel-jest": "^29.7.0", "jest": "^29.3.1", "jest-cli": "^29.3.1", "ts-jest": "^29.0.5", diff --git a/packages/babel-plugin-transform-react-jsx-to-rn-stylesheet/src/index.ts b/packages/babel-plugin-transform-react-jsx-to-rn-stylesheet/src/index.ts index 7205f4adb9b3..13de9c997dac 100644 --- a/packages/babel-plugin-transform-react-jsx-to-rn-stylesheet/src/index.ts +++ b/packages/babel-plugin-transform-react-jsx-to-rn-stylesheet/src/index.ts @@ -140,11 +140,10 @@ export default function (babel: { const getModuleClassNameFunctionStmt = template(getModuleClassNameFunction)() - function getMap (str) { return str.split(/\s+/).map((className) => { // return template(`${STYLE_SHEET_NAME}["${className}"]`)().expression - const stmt = template(`${STYLE_SHEET_NAME}["${className}"]`)() + const stmt = template(`${STYLE_SHEET_NAME}["${className}"]`)() as Types.Node if (t.isExpressionStatement(stmt)) { return stmt.expression } diff --git a/packages/babel-plugin-transform-taroapi/babel.config.json b/packages/babel-plugin-transform-taroapi/babel.config.json index 52bbf45dfe07..6117dbb1e9d8 100644 --- a/packages/babel-plugin-transform-taroapi/babel.config.json +++ b/packages/babel-plugin-transform-taroapi/babel.config.json @@ -4,8 +4,7 @@ "@babel/preset-env", { "targets": { - "ios": "9", - "android": "4.4" + "node": "current" } } ] diff --git a/packages/babel-plugin-transform-taroapi/package.json b/packages/babel-plugin-transform-taroapi/package.json index 8e43a759783a..20b8f0c584bb 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": "3.6.23", + "version": "4.0.0-beta.33", "main": "dist/index.js", "scripts": { "build": "tsc", @@ -16,7 +16,7 @@ "devDependencies": { "@babel/core": "^7.14.5", "@babel/types": "^7.14.5", - "babel-jest": "^29.5.0", + "babel-jest": "^29.7.0", "jest": "^29.3.1", "jest-cli": "^29.3.1", "ts-jest": "^29.0.5", diff --git a/packages/babel-plugin-transform-taroapi/src/index.ts b/packages/babel-plugin-transform-taroapi/src/index.ts index c0c9a848db70..f43e91fb737a 100644 --- a/packages/babel-plugin-transform-taroapi/src/index.ts +++ b/packages/babel-plugin-transform-taroapi/src/index.ts @@ -60,7 +60,7 @@ const plugin = function (babel: typeof BabelCore): BabelCore.PluginObj { this.apis = apis }, visitor: { - ImportDeclaration (ast) { + ImportDeclaration (ast: BabelCore.NodePath) { if (ast.node.source.value !== this.packageName) return ast.node.specifiers.forEach(node => { @@ -91,7 +91,7 @@ const plugin = function (babel: typeof BabelCore): BabelCore.PluginObj { } }) }, - MemberExpression (ast) { + MemberExpression (ast: BabelCore.NodePath) { /* 处理Taro.xxx */ const isTaro = t.isIdentifier(ast.node.object, { name: taroName }) const property = ast.node.property @@ -110,7 +110,7 @@ const plugin = function (babel: typeof BabelCore): BabelCore.PluginObj { // 同一api使用多次, 读取变量名 if (this.apis.has(propertyName)) { - const parentNode = ast.parent + const parentNode = ast.parent as BabelCore.types.AssignmentExpression const isAssignment = t.isAssignmentExpression(parentNode) && parentNode.left === ast.node if (!isAssignment) { @@ -129,7 +129,7 @@ const plugin = function (babel: typeof BabelCore): BabelCore.PluginObj { needDefault = true } }, - CallExpression (ast) { + CallExpression (ast: BabelCore.NodePath) { if (!ast.scope.hasReference(this.canIUse)) return const callee = ast.node.callee if (t.isMemberExpression(callee) && t.isIdentifier(callee.object, { name: taroName })) { @@ -188,7 +188,7 @@ const plugin = function (babel: typeof BabelCore): BabelCore.PluginObj { ast.node.specifiers = namedImports } }, - CallExpression (ast) { + CallExpression (ast: BabelCore.NodePath) { if (!invokedApis.has(that.canIUse)) return const callee = ast.node.callee const { name } = t.identifier(invokedApis.get(that.canIUse)!) diff --git a/packages/babel-preset-taro/README.md b/packages/babel-preset-taro/README.md index 6f528de67734..33fd18f1d0cf 100644 --- a/packages/babel-preset-taro/README.md +++ b/packages/babel-preset-taro/README.md @@ -43,13 +43,7 @@ module.exports = { - `react-refresh/babel` -#### 3. Vue - -##### presetes - -- `@vue/babel-preset-jsx` - -#### 4. Vue3 +#### 3. Vue3 ##### plugins @@ -80,16 +74,16 @@ module.exports = { ### vueJsx :::note -只在使用 **Vue/Vue3** 时生效。 +只在使用 **Vue3** 时生效。 ::: **默认值**：`true` **类型**：`true` | `false` | `object` -是否使用 `@vue/babel-preset-jsx`（Vue）或 `@vue/babel-plugin-jsx`（Vue3）来支持使用 `jsx`。 +是否使用 `@vue/babel-plugin-jsx` 来支持使用 `jsx`。 -当传入一个 `object` 时，等同于设置为 `true`，且该 `object` 将会作为 `@vue/babel-preset-jsx`（Vue）或 `@vue/babel-plugin-jsx`（Vue3）的参数。 +当传入一个 `object` 时，等同于设置为 `true`，且该 `object` 将会作为 `@vue/babel-plugin-jsx` 的参数。 ### targets diff --git a/packages/babel-preset-taro/__tests__/index.spec.js b/packages/babel-preset-taro/__tests__/index.spec.js index 9ebfffff16dd..6702adb31a30 100644 --- a/packages/babel-preset-taro/__tests__/index.spec.js +++ b/packages/babel-preset-taro/__tests__/index.spec.js @@ -2,20 +2,6 @@ const babelPresetTaro = require('..') describe('babel-preset-taro', () => { - it('nerv', () => { - const config = babelPresetTaro({}, { - framework: 'nerv' - }) - - expect(config.sourceType).toBe('unambiguous') - - const [override] = config.overrides - - const [, [_, reactConfig]] = override.presets - expect(reactConfig.pragma).toBe('Nerv.createElement') - expect(reactConfig.pragmaFrag).toBe('Nerv.Fragment') - }) - it('react', () => { const config = babelPresetTaro({}, { framework: 'react' @@ -24,20 +10,6 @@ describe('babel-preset-taro', () => { expect(config.sourceType).toBe('unambiguous') }) - it('vue', () => { - const config = babelPresetTaro({}, { - framework: 'vue' - }) - - expect(config.sourceType).toBe('unambiguous') - - const [override] = config.overrides - - const [, [jsxPreset, jsxOptions]] = override.presets - expect(jsxPreset === require('@vue/babel-preset-jsx')).toBeTruthy() - expect(jsxOptions).toEqual({}) - }) - it('vue3', () => { const config = babelPresetTaro({}, { framework: 'vue3' @@ -52,20 +24,6 @@ describe('babel-preset-taro', () => { expect(jsxOptions).toEqual({}) }) - it('vue without jsx', () => { - const config = babelPresetTaro({}, { - framework: 'vue', - vueJsx: false - }) - - expect(config.sourceType).toBe('unambiguous') - - const [override] = config.overrides - - const [, jsxPreset] = override.presets - expect(jsxPreset).toBeUndefined() - }) - it('vue3 without jsx', () => { const config = babelPresetTaro({}, { framework: 'vue3', @@ -95,30 +53,19 @@ describe('babel-preset-taro', () => { expect(tsconfig.jsxPragma === 'React').toBeTruthy() }) - it('typescript nerv', () => { - const config = babelPresetTaro({}, { - framework: 'nerv', - ts: true - }) - - const [override] = config.overrides - - const [, , [ts, tsconfig]] = override.presets - expect(typeof ts.default === 'function').toBeTruthy() - expect(tsconfig.jsxPragma === 'Nerv').toBeTruthy() - }) - - it('typescript vue', () => { + it('typescript vue3', () => { const config = babelPresetTaro({}, { - framework: 'vue', + framework: 'vue3', ts: true }) - const [override, vueOverride] = config.overrides - const [, , [ts, tsconfig]] = override.presets + const [, vueOverride] = config.overrides + const [[ts, tsConfig]] = vueOverride.presets expect(typeof ts.default === 'function').toBeTruthy() - expect(tsconfig.hasOwnProperty('jsxPragma') === false).toBeTruthy() + expect(tsConfig.hasOwnProperty('jsxPragma') === false).toBeTruthy() + expect(tsConfig.allExtensions).toBeTruthy() + expect(tsConfig.isTSX).toBeTruthy() expect(vueOverride.include.test('a.vue')).toBeTruthy() }) diff --git a/packages/babel-preset-taro/index.js b/packages/babel-preset-taro/index.js index df04463e4bd8..cddf32dcb0ae 100644 --- a/packages/babel-preset-taro/index.js +++ b/packages/babel-preset-taro/index.js @@ -28,21 +28,14 @@ module.exports = (_, options = {}) => { const presets = [] const plugins = [] const overrides = [] - const isReact = options.framework === 'react' || options.framework === 'preact' - const isNerv = options.framework === 'nerv' - const isVue = options.framework === 'vue' - const isVue3 = options.framework === 'vue3' + const isVite = options.compiler === 'vite' + const isReact = options.framework === 'react' || options.framework === 'preact' && !isVite + const isSolid = options.framework === 'solid' + const isVue3 = options.framework === 'vue3' && !isVite + const isTs = options.ts && !isVite const moduleName = options.framework.charAt(0).toUpperCase() + options.framework.slice(1) const presetReactConfig = options.react || {} - if (isNerv) { - presets.push([require('@babel/preset-react'), { - pragma: `${moduleName}.createElement`, - pragmaFrag: `${moduleName}.Fragment`, - ...presetReactConfig - }]) - } - if (isReact) { presets.push([require('@babel/preset-react'), { runtime: options.reactJsxRuntime || 'automatic', @@ -58,25 +51,26 @@ module.exports = (_, options = {}) => { }) } } + } else if (isSolid) { + presets.push([require('babel-preset-solid'), { + moduleName: '@tarojs/plugin-framework-react/dist/reconciler', + generate: 'universal', + }]) } - if (isVue || isVue3) { + if (isVue3) { if (options.vueJsx !== false) { const jsxOptions = typeof options.vueJsx === 'object' ? options.vueJsx : {} - if (isVue) { - presets.push([require('@vue/babel-preset-jsx'), jsxOptions]) - } else { - plugins.push([require('@vue/babel-plugin-jsx'), jsxOptions]) - } + plugins.push([require('@vue/babel-plugin-jsx'), jsxOptions]) } } - if (options.ts) { + if (isTs) { const config = typeof options.ts === 'object' ? options.ts : {} - if (isNerv || isReact) { + if (isReact) { config.jsxPragma = moduleName } - if (isVue || isVue3) { + if (isVue3) { overrides.push({ include: /\.vue$/, presets: [[require('@babel/preset-typescript'), { allExtensions: true, isTSX: true }]] diff --git a/packages/babel-preset-taro/package.json b/packages/babel-preset-taro/package.json index 44102d8a440c..a860e6218db8 100644 --- a/packages/babel-preset-taro/package.json +++ b/packages/babel-preset-taro/package.json @@ -1,6 +1,6 @@ { "name": "babel-preset-taro", - "version": "3.6.23", + "version": "4.0.0-beta.33", "description": "Taro babel preset", "author": "yuche ", "homepage": "https://github.com/nervjs/taro/tree/master/packages/babel-preset-taro#readme", @@ -28,17 +28,17 @@ "@babel/plugin-syntax-jsx": "^7.14.5", "@babel/plugin-transform-runtime": "^7.14.5", "@babel/preset-env": "^7.14.5", - "@babel/preset-react": "^7.14.5", + "@babel/preset-react": "^7.22.15", "@babel/preset-typescript": "^7.14.5", "@babel/runtime": "^7.14.5", "@babel/runtime-corejs3": "^7.14.5", + "@react-native/babel-preset": "^0.73.18", "@tarojs/helper": "workspace:*", "babel-plugin-dynamic-import-node": "2.3.3", "babel-plugin-minify-dead-code-elimination": "^0.5.2", "babel-plugin-transform-imports-api": "1.0.0", + "babel-preset-solid": "^1.8.15", "core-js": "^3.6.5", - "lodash": "^4.17.21", - "metro-react-native-babel-preset": "^0.72.1", "react-refresh": "^0.11.0" }, "devDependencies": { @@ -46,7 +46,6 @@ "@prefresh/babel-plugin": "^0.4.1", "@tarojs/shared": "workspace:*", "@vue/babel-plugin-jsx": "^1.0.6", - "@vue/babel-preset-jsx": "^1.2.4", "jest": "^29.3.1", "jest-cli": "^29.3.1", "jest-environment-node": "^29.5.0", diff --git a/packages/babel-preset-taro/rn/index.js b/packages/babel-preset-taro/rn/index.js index 42ef78216ed3..9af3c068abf6 100644 --- a/packages/babel-preset-taro/rn/index.js +++ b/packages/babel-preset-taro/rn/index.js @@ -1,6 +1,9 @@ -const reactNativeBabelPreset = require('metro-react-native-babel-preset') +const reactNativeBabelPreset = require('@react-native/babel-preset') module.exports = (_, options = {}) => { + if (!process.env.NODE_ENV) { + process.env.NODE_ENV = 'development' + } const { decoratorsBeforeExport, decoratorsLegacy diff --git a/packages/create-app/package.json b/packages/create-app/package.json index 235c8bfdfc7d..0960d94297ab 100644 --- a/packages/create-app/package.json +++ b/packages/create-app/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/create-app", - "version": "3.6.23", + "version": "4.0.0-beta.33", "description": "create taro app with one command", "author": "VincentW ", "homepage": "https://github.com/nervjs/taro/tree/master/packages/create-app#readme", @@ -10,7 +10,7 @@ "dev": "tsc -w", "prod": "tsc", "build": "run-s clean prod", - "clean": "rimraf dist" + "clean": "rimraf --impl=move-remove dist" }, "files": [ "dist" @@ -27,7 +27,7 @@ "cli" ], "engines": { - "node": ">=12" + "node": ">= 18" }, "dependencies": { "@tarojs/cli": "workspace:*", diff --git a/packages/create-app/src/createApp.ts b/packages/create-app/src/createApp.ts old mode 100755 new mode 100644 diff --git a/packages/create-app/src/index.ts b/packages/create-app/src/index.ts old mode 100755 new mode 100644 diff --git a/packages/css-to-react-native/package.json b/packages/css-to-react-native/package.json index 75f1b4b777c5..26a5d9648096 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": "3.6.23", + "version": "4.0.0-beta.33", "main": "dist/index.js", "license": "MIT", "files": [ @@ -56,7 +56,7 @@ }, "devDependencies": { "@babel/core": "^7.14.5", - "babel-jest": "^29.5.0", + "babel-jest": "^29.7.0", "jest": "^29.3.1", "jest-cli": "^29.3.1" } diff --git a/packages/eslint-config-taro/nerv.js b/packages/eslint-config-taro/nerv.js deleted file mode 100644 index d7c3858e5527..000000000000 --- a/packages/eslint-config-taro/nerv.js +++ /dev/null @@ -1,8 +0,0 @@ -module.exports = Object.assign({}, require('./index'), { - settings: { - react: { - pragma: 'Nerv', - version: '15.0' - } - } -}) diff --git a/packages/eslint-config-taro/package.json b/packages/eslint-config-taro/package.json index 7681d36a987d..edb466d55232 100644 --- a/packages/eslint-config-taro/package.json +++ b/packages/eslint-config-taro/package.json @@ -1,6 +1,6 @@ { "name": "eslint-config-taro", - "version": "3.6.23", + "version": "4.0.0-beta.33", "description": "Taro specific linting rules for ESLint", "main": "index.js", "files": [ @@ -9,8 +9,6 @@ "html-tags.js", "react.js", "preact.js", - "nerv.js", - "vue.js", "vue3.js", "README.md" ], @@ -32,9 +30,9 @@ "@typescript-eslint/eslint-plugin": "^5.17.0", "eslint": "^8.12.0", "eslint-plugin-import": "^2.26.0", - "eslint-plugin-react": "^7.4.0", + "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.4.0", - "eslint-plugin-vue": "^8.6.0", + "eslint-plugin-vue": "^9.17.0", "typescript": "^4.7.4" }, "peerDependencies": { diff --git a/packages/eslint-config-taro/vue.js b/packages/eslint-config-taro/vue.js deleted file mode 100644 index 1fe40f9a77bf..000000000000 --- a/packages/eslint-config-taro/vue.js +++ /dev/null @@ -1,10 +0,0 @@ -module.exports = { - extends: [ - // add more generic rulesets here, such as: - // 'eslint:recommended', - 'plugin:vue/recommended' - ], - parserOptions: { - parser: require.resolve('@babel/eslint-parser') - } -} diff --git a/packages/jest-helper/package.json b/packages/jest-helper/package.json new file mode 100644 index 000000000000..08af4ae0c3de --- /dev/null +++ b/packages/jest-helper/package.json @@ -0,0 +1,24 @@ +{ + "name": "jest-taro-helper", + "version": "4.0.0-beta.33", + "description": "jest helper for taro", + "private": true, + "main": "index.js", + "files": [ + "lib" + ], + "scripts": { + "build": "tsc", + "dev": "tsc -w" + }, + "keywords": [], + "author": "", + "license": "ISC", + "devDependencies": { + "@jest/test-sequencer": "^29.5.0", + "jest-resolve": "^29.5.0", + "jest-runner": "^29.5.0", + "pretty-format": "^29.5.0", + "typescript": "^4.7.4" + } +} diff --git a/packages/jest-helper/src/resolver.ts b/packages/jest-helper/src/resolver.ts new file mode 100644 index 000000000000..571ab332e5d9 --- /dev/null +++ b/packages/jest-helper/src/resolver.ts @@ -0,0 +1,14 @@ +import type { ResolverOptions } from 'jest-resolve' + +export = (path: string, options: ResolverOptions) => { + return options.defaultResolver(path, { + ...options, + packageFilter: (pkg) => { + const field = ['module', 'main'].find((e) => pkg[e] && typeof pkg[e] === 'string') + if (field) { + pkg.main = pkg[field] || pkg.main + } + return pkg + }, + }) +} diff --git a/packages/jest-helper/src/sequencer.ts b/packages/jest-helper/src/sequencer.ts new file mode 100644 index 000000000000..cddc40cb46b2 --- /dev/null +++ b/packages/jest-helper/src/sequencer.ts @@ -0,0 +1,10 @@ +import type { Test } from 'jest-runner' + +const Sequencer = require('@jest/test-sequencer').default + +export default class CustomSequencer extends Sequencer { + sort (tests: Test[]) { + const copyTests = Array.from(tests) + return copyTests.sort((testA, testB) => testA.path.localeCompare(testB.path)) + } +} diff --git a/packages/jest-helper/src/snapshot/resolver.ts b/packages/jest-helper/src/snapshot/resolver.ts new file mode 100644 index 000000000000..1834b04ac40f --- /dev/null +++ b/packages/jest-helper/src/snapshot/resolver.ts @@ -0,0 +1,20 @@ +import * as path from 'path' + +const TEST_DIR = '__tests__' +const SNAPSHOT_DIR = '__snapshots__' + +export const resolveSnapshotPath = (testPath: string, snapshotExtension: string) => { + return testPath.replace(TEST_DIR, SNAPSHOT_DIR) + snapshotExtension +} + +export const resolveTestPath = (snapshotPath: string, snapshotExtension: string) => { + return snapshotPath.replace(snapshotExtension, '').replace(SNAPSHOT_DIR, TEST_DIR) +} + +export const testPathForConsistencyCheck = path.posix.join('consistency_check', TEST_DIR, 'example.test.js') + +export default { + resolveSnapshotPath, + resolveTestPath, + testPathForConsistencyCheck, +} diff --git a/packages/jest-helper/src/snapshot/serializers.ts b/packages/jest-helper/src/snapshot/serializers.ts new file mode 100644 index 000000000000..190ed1973aa2 --- /dev/null +++ b/packages/jest-helper/src/snapshot/serializers.ts @@ -0,0 +1,58 @@ +import * as os from 'os' +// import type { Config, Refs, Printer } from 'pretty-format' + +export const print = (val: string) => { + // Note: 对齐各平台的路径分隔符 + return val.replace(/\\*\*\sfilePath:\s(.*)\s\*\*\//g, (replaceValue) => replaceValue.replace(/\\/g, '/')) +} + +const mockFilePath = '/** filePath:mockFilePath **/' +export const parseSnapshotByFilePath = (val: string) => { + const arr = val.split(new RegExp(os.EOL + '|\n')) + let key = mockFilePath + return arr.reduce((acc, cur) => { + if (cur.startsWith('/** filePath:')) { + key = cur.replace(/\\/g, '/') + acc[key] = '' + } else { + acc[key] ||= '' + if (acc[key] !== '') { + acc[key] += '\n' + } + acc[key] += cur + } + return acc + }, {}) +} + +export const snapshotObject2String = (val: Record) => { + const arr = Object.entries(val) + const hasMockFilePath = arr.some(([key]) => key === mockFilePath) && arr.length <= 1 + return `${hasMockFilePath ? '' : '"\n'}${arr + .sort(([key1], [key2]) => key1.localeCompare(key2)) + .filter(([key, value]) => (!!key && key !== mockFilePath) || (key === mockFilePath && !!value)) + .map(([key, value]) => `${key === mockFilePath ? '' : `${key}\n`}${value}`) + .join('\n')}${hasMockFilePath ? '' : '"'}` +} + +export const serialize = ( + val: any, + // config: Config, + // indentation: string, + // depth: number, + // refs: Refs, + // printer: Printer, +) => { + if (typeof val === 'string') { + return snapshotObject2String(parseSnapshotByFilePath(val)) + } + return val +} + +export const test = (val: unknown) => typeof val === 'string' + +export default { + // print, + serialize, + test, +} diff --git a/packages/jest-helper/tsconfig.json b/packages/jest-helper/tsconfig.json new file mode 100644 index 000000000000..90ec8083ddee --- /dev/null +++ b/packages/jest-helper/tsconfig.json @@ -0,0 +1,11 @@ +{ + "extends": "../../tsconfig.root.json", + "compilerOptions": { + "baseUrl": ".", + "outDir": "lib", + "rootDir": "./src", + "module": "commonjs" + }, + "include": ["./src"], + "exclude": ["./src/__tests__"] +} diff --git a/packages/postcss-html-transform/package.json b/packages/postcss-html-transform/package.json index 37bd2ea853fe..647853cdb06a 100644 --- a/packages/postcss-html-transform/package.json +++ b/packages/postcss-html-transform/package.json @@ -1,6 +1,6 @@ { "name": "postcss-html-transform", - "version": "3.6.23", + "version": "4.0.0-beta.33", "description": "transform html tag name selector", "main": "index.js", "author": "drchan", diff --git a/packages/postcss-plugin-constparse/package.json b/packages/postcss-plugin-constparse/package.json index 92b43a468f79..1e21d28ea9ea 100644 --- a/packages/postcss-plugin-constparse/package.json +++ b/packages/postcss-plugin-constparse/package.json @@ -1,6 +1,6 @@ { "name": "postcss-plugin-constparse", - "version": "3.6.23", + "version": "4.0.0-beta.33", "description": "parse constants defined in config", "main": "index.js", "author": "Simba", diff --git a/packages/postcss-pxtransform/__tests__/index.test.js b/packages/postcss-pxtransform/__tests__/index.test.js index d025877ffaf5..2da7ac304296 100644 --- a/packages/postcss-pxtransform/__tests__/index.test.js +++ b/packages/postcss-pxtransform/__tests__/index.test.js @@ -865,6 +865,6 @@ describe('platform 为 harmony，适配', () => { } } const processed = postcss(px2rem(options)).process(rules).css - expect(processed).toBe('view { width: 100vp; }') + expect(processed).toBe('view { width: 100ch; }') }) }) diff --git a/packages/postcss-pxtransform/index.js b/packages/postcss-pxtransform/index.js index 150c69be556a..37785ccacb57 100644 --- a/packages/postcss-pxtransform/index.js +++ b/packages/postcss-pxtransform/index.js @@ -1,8 +1,8 @@ const pxRegex = require('./lib/pixel-unit-regex') -const PXRegex = require('./lib/pixel-upper-unit-regex') const filterPropList = require('./lib/filter-prop-list') const defaults = { + methods: ['platform', 'size'], rootValue: 16, unitPrecision: 5, selectorBlackList: [], @@ -36,32 +36,41 @@ const DEFAULT_WEAPP_OPTIONS = { const processed = Symbol('processed') - let targetUnit +const SPECIAL_PIXEL = ['Px', 'PX', 'pX'] +let unConvertTargetUnit +let platform + module.exports = (options = {}) => { options = Object.assign({}, DEFAULT_WEAPP_OPTIONS, options) - + const exclude = options.exclude const transUnits = ['px'] const baseFontSize = options.baseFontSize || (options.minRootSize >= 1 ? options.minRootSize : 20) const designWidth = (input) => typeof options.designWidth === 'function' ? options.designWidth(input) : options.designWidth + platform = options.platform switch (options.platform) { case 'h5': { targetUnit = options.targetUnit ?? 'rem' - if (targetUnit === 'vw') { - options.rootValue = (input) => { - return designWidth(input) / 100 - } - } else if (targetUnit === 'px') { - options.rootValue = (input) => (1 / options.deviceRatio[designWidth(input)]) * 2 - } else { - // rem - options.rootValue = (input) => { - return (baseFontSize / options.deviceRatio[designWidth(input)]) * 2 - } + switch (targetUnit) { + case 'vw': + case 'vmin': + options.rootValue = (input) => { + return designWidth(input) / 100 + } + break + case 'px': + options.rootValue = (input) => (1 / options.deviceRatio[designWidth(input)]) * 2 + break + default: + // rem + options.rootValue = (input) => { + return (baseFontSize / options.deviceRatio[designWidth(input)]) * 2 + } + break } transUnits.push('rpx') @@ -80,6 +89,8 @@ module.exports = (options = {}) => { case 'harmony': { options.rootValue = (input) => 1 / options.deviceRatio[designWidth(input)] targetUnit = 'px' + unConvertTargetUnit = 'ch' // harmony对于大小写的PX转换成其他单位，用于rust解析 + transUnits.push(...SPECIAL_PIXEL) break } default: { @@ -117,6 +128,10 @@ module.exports = (options = {}) => { /** 是否跳过当前文件不处理 */ let skip = false + + if (exclude && exclude?.(result.opts.from)) { + return null + } return { // 注意：钩子在节点变动时会重新执行，Once，OnceExit只执行一次，https://github.com/NervJS/taro/issues/13238 @@ -126,6 +141,8 @@ module.exports = (options = {}) => { return } + if (!opts.methods.includes('platform')) return + // delete code between comment in RN // 有死循环的问题 if (options.platform === 'rn') { @@ -183,47 +200,46 @@ module.exports = (options = {}) => { }, Declaration (decl) { if (skip) return + if (!opts.methods.includes('size')) return if (decl[processed]) return // 标记当前 node 已处理 decl[processed] = true - if (options.platform === 'harmony') { - if (decl.value.indexOf('PX') === -1) return - const value = decl.value.replace(PXRegex, function (m, _$1, $2) { - return m.replace($2, 'vp') - }) - decl.value = value - } else { - if (decl.value.indexOf('px') === -1) return + if (!/px/i.test(decl.value)) return - if (!satisfyPropList(decl.prop)) return + if (!satisfyPropList(decl.prop)) return - if (blacklistedSelector(opts.selectorBlackList, decl.parent.selector)) return - const value = decl.value.replace(pxRgx, pxReplace) - // if rem unit already exists, do not add or replace - if (declarationExists(decl.parent, decl.prop, value)) return - if (opts.replace) { - decl.value = value + const isBlacklisted = blacklistedSelector(opts.selectorBlackList, decl.parent.selector) + if (isBlacklisted && platform !== 'harmony') return + let value + if (isBlacklisted) { + // 如果是harmony平台，黑名单的样式单位做特殊处理 + if (platform === 'harmony') { + value = decl.value.replace(pxRgx, (m, $1) => $1 ? $1 + unConvertTargetUnit : m) } else { - decl.cloneAfter({ value: value }) + // 如果是其他平台，黑名单的样式单位不做处理 + return } + } else { + value = decl.value.replace(pxRgx, pxReplace) + } + // if rem unit already exists, do not add or replace + if (declarationExists(decl.parent, decl.prop, value)) return + if (opts.replace) { + decl.value = value + } else { + decl.cloneAfter({ value: value }) } }, AtRule: { media: (rule) => { if (skip) return - if (options.platform === 'harmony') { - if (rule.params.indexOf('PX') === -1) return - const value = rule.params.replace(PXRegex, function (m, _$1, $2) { - return m.replace($2, 'vp') - }) - rule.params = value - } else { - if (rule.params.indexOf('px') === -1) return - rule.params = rule.params.replace(pxRgx, pxReplace) - } + if (!opts.methods.includes('size')) return + + if (!/px/i.test(rule.params)) return + rule.params = rule.params.replace(pxRgx, pxReplace) }, }, } @@ -255,14 +271,28 @@ function convertLegacyOptions (options) { } function createPxReplace (rootValue, unitPrecision, minPixelValue, onePxTransform) { + const specialPxRgx = pxRegex(SPECIAL_PIXEL) return function (input) { return function (m, $1) { if (!$1) return m + + if (platform === 'harmony' && specialPxRgx.test(m)) { + // harmony对大小写的PX转换成其他单位，用于rust解析 + return $1 + unConvertTargetUnit + } + if (!onePxTransform && parseInt($1, 10) === 1) { + if (platform === 'harmony') { return $1 + unConvertTargetUnit } return m } const pixels = parseFloat($1) - if (pixels < minPixelValue) return m + if (pixels < minPixelValue) { + if (platform === 'harmony') { return $1 + unConvertTargetUnit } + return m + } + + // 转换工作，如果是harmony的话不转换 + if (platform === 'harmony') { return m } let val = pixels / rootValue(input, m, $1) if (unitPrecision >= 0 && unitPrecision <= 100) { val = toFixed(val, unitPrecision) diff --git a/packages/postcss-pxtransform/package.json b/packages/postcss-pxtransform/package.json index 755432238359..099f6cef0a8f 100644 --- a/packages/postcss-pxtransform/package.json +++ b/packages/postcss-pxtransform/package.json @@ -1,6 +1,6 @@ { "name": "postcss-pxtransform", - "version": "3.6.23", + "version": "4.0.0-beta.33", "description": "PostCSS plugin px 转小程序 rpx及h5 rem 单位", "main": "index.js", "keywords": [ diff --git a/packages/postcss-unit-transform/package.json b/packages/postcss-unit-transform/package.json index 84fc671d06e1..28b3af653cfb 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": "3.6.23", + "version": "4.0.0-beta.33", "description": "小程序单位转换", "main": "index.js", "scripts": { diff --git a/packages/rollup-plugin-copy/.gitignore b/packages/rollup-plugin-copy/.gitignore new file mode 100644 index 000000000000..a65b41774ad5 --- /dev/null +++ b/packages/rollup-plugin-copy/.gitignore @@ -0,0 +1 @@ +lib diff --git a/packages/rollup-plugin-copy/index.js b/packages/rollup-plugin-copy/index.js new file mode 100644 index 000000000000..c368c43314c0 --- /dev/null +++ b/packages/rollup-plugin-copy/index.js @@ -0,0 +1,3 @@ +module.exports = require('./lib/index.js').default + +module.exports.default = module.exports diff --git a/packages/rollup-plugin-copy/package.json b/packages/rollup-plugin-copy/package.json new file mode 100644 index 000000000000..01e8deac0483 --- /dev/null +++ b/packages/rollup-plugin-copy/package.json @@ -0,0 +1,22 @@ +{ + "name": "rollup-plugin-copy", + "version": "4.0.0-beta.33", + "description": "rollup-plugin-copy for taro", + "private": true, + "main": "index.js", + "files": [ + "lib" + ], + "scripts": { + "build": "tsc", + "dev": "tsc -w" + }, + "keywords": [], + "author": "", + "license": "ISC", + "devDependencies": { + "@tarojs/helper": "workspace:*", + "rollup": "^3.8.1", + "typescript": "^4.7.4" + } +} diff --git a/packages/rollup-plugin-copy/src/index.ts b/packages/rollup-plugin-copy/src/index.ts new file mode 100644 index 000000000000..fc338f66559e --- /dev/null +++ b/packages/rollup-plugin-copy/src/index.ts @@ -0,0 +1,63 @@ +import { fs } from '@tarojs/helper' +import path from 'path' + +const cwd = process.cwd() + +interface ITarget { + readonly src: string + readonly dest: string +} + +interface IOptions { + hook?: string + targets?: ITarget[] +} + +export default function handleRollupCopy ({ + targets = [], + hook = 'buildEnd' +}: IOptions) { + let isWatched = false + + return { + name: 'rollup-plugin:taro-copy', + async [hook] () { + if (isWatched) return + + for (const item of targets) { + try { + let src = item.src + let dest = item.dest + const { base, dir } = path.parse(src) + dest = !dir ? dest : path.join(dest, base) + + src = path.join(cwd, src) + dest = path.join(cwd, dest) + if (path.extname(src)) { + fs.ensureDirSync(path.dirname(dest)) + } else { + fs.ensureDirSync(dest) + } + + const stat = fs.statSync(src) + if (stat.isDirectory()) { + fs.copySync(src, dest, { recursive: true }) + fs.watch(src, { recursive: true }, (_event, filename) => { + if (!filename) return + fs.copyFileSync(path.join(src, filename), path.join(dest, filename)) + }) + } else if (stat.isFile()) { + fs.copyFileSync(src, dest) + fs.watchFile(src, () => { + fs.copyFileSync(path.join(src), dest) + }) + } + } catch (error) { + console.error(error) + } + } + + isWatched = true + } + } +} diff --git a/packages/rollup-plugin-copy/tsconfig.json b/packages/rollup-plugin-copy/tsconfig.json new file mode 100644 index 000000000000..e934ffe0043f --- /dev/null +++ b/packages/rollup-plugin-copy/tsconfig.json @@ -0,0 +1,12 @@ +{ + "extends": "../../tsconfig.root.json", + "compilerOptions": { + "baseUrl": ".", + "esModuleInterop": true, + "outDir": "lib", + "rootDir": "./src", + "module": "commonjs" + }, + "include": ["./src"], + "exclude": ["./src/__tests__"] +} diff --git a/packages/shared/package.json b/packages/shared/package.json index 1d1675fe9530..7d0cff25a1a0 100644 --- a/packages/shared/package.json +++ b/packages/shared/package.json @@ -1,6 +1,6 @@ { "name": "@tarojs/shared", - "version": "3.6.23", + "version": "4.0.0-beta.33", "description": "Taro utils internal use.", "author": "yuche ", "homepage": "https://github.com/nervjs/taro/tree/master/packages/shared#readme", diff --git a/packages/shared/src/runtime-hooks.ts b/packages/shared/src/runtime-hooks.ts index 89b317880a43..756a23adaec7 100644 --- a/packages/shared/src/runtime-hooks.ts +++ b/packages/shared/src/runtime-hooks.ts @@ -196,7 +196,6 @@ type ITaroHooks = { getEventCenter: (EventsClass: typeof Events) => Events isBubbleEvents: (eventName: string) => boolean getSpecialNodes: () => string[] - /** 解决 Vue2 布尔值属性值的设置问题 */ onRemoveAttribute: (element, qualifiedName: string) => boolean /** 用于把 React 同一事件回调中的所有 setState 合并到同一个更新处理中 */ batchedEventUpdates: (cb: TFunc) => void @@ -253,6 +252,8 @@ type ITaroHooks = { modifyAddEventListener: (element, sideEffect: boolean, getComponentsAlias: () => Record) => void /** 元素删除事件监听钩子 */ modifyRemoveEventListener: (element, sideEffect: boolean, getComponentsAlias: () => Record) => void + /** 鸿蒙用于监听 memory 等级的钩子 */ + getMemoryLevel: (level: { level: number }) => void } export const hooks = new TaroHooks({ @@ -353,4 +354,6 @@ export const hooks = new TaroHooks({ modifyAddEventListener: TaroHook(HOOK_TYPE.SINGLE), modifyRemoveEventListener: TaroHook(HOOK_TYPE.SINGLE), + + getMemoryLevel: TaroHook(HOOK_TYPE.SINGLE), }) diff --git a/packages/shared/src/template.ts b/packages/shared/src/template.ts index 03f3ad8152cc..835254194fa9 100644 --- a/packages/shared/src/template.ts +++ b/packages/shared/src/template.ts @@ -495,7 +495,7 @@ export class BaseTemplate { return '' } - public buildPageTemplate = (baseTempPath: string, _page: { content: Record, path: string }) => { + public buildPageTemplate = (baseTempPath: string, _page?: { content: Record, path: string }) => { const template = `