From a1ba6757e0f786c51967a9419699ffb327af41aa Mon Sep 17 00:00:00 2001 From: Dmitry Gozman Date: Wed, 1 Mar 2023 16:43:17 -0800 Subject: [PATCH] feat(typescript): allow `declare` for class properties (#21281) This enables `allowDeclareFields` flag that allows code like: ```ts class Foo { declare prop: string; } ``` Declaring is a workaround for inheritance vs property initialization issues. https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#the-usedefineforclassfields-flag-and-the-declare-property-modifier For `allowDeclareFields` to work, we have to run plugin-transform-typescript before plugin-proposal-class-properties and few others, so this change migrates from preset-typescript that always runs last to individual plugin-transform-typescript, and reorders some plugins. References #21119. --- .../playwright-test/ThirdPartyNotices.txt | 30 +------------------ .../bundles/babel/package-lock.json | 28 +---------------- .../bundles/babel/package.json | 2 +- .../bundles/babel/src/babelBundleImpl.ts | 11 ++++--- tests/playwright-test/babel.spec.ts | 29 ++++++++++++++++++ 5 files changed, 37 insertions(+), 63 deletions(-) diff --git a/packages/playwright-test/ThirdPartyNotices.txt b/packages/playwright-test/ThirdPartyNotices.txt index 6f0e1d4565..1501117370 100644 --- a/packages/playwright-test/ThirdPartyNotices.txt +++ b/packages/playwright-test/ThirdPartyNotices.txt @@ -56,7 +56,6 @@ This project incorporates components from the projects listed below. The origina - @babel/plugin-transform-modules-commonjs@7.19.6 (https://github.com/babel/babel) - @babel/plugin-transform-react-jsx@7.20.7 (https://github.com/babel/babel) - @babel/plugin-transform-typescript@7.20.2 (https://github.com/babel/babel) -- @babel/preset-typescript@7.18.6 (https://github.com/babel/babel) - @babel/template@7.18.10 (https://github.com/babel/babel) - @babel/traverse@7.20.1 (https://github.com/babel/babel) - @babel/types@7.20.7 (https://github.com/babel/babel) @@ -1728,33 +1727,6 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ========================================= END OF @babel/plugin-transform-typescript@7.20.2 AND INFORMATION -%% @babel/preset-typescript@7.18.6 NOTICES AND INFORMATION BEGIN HERE -========================================= -MIT License - -Copyright (c) 2014-present Sebastian McKenzie and other contributors - -Permission is hereby granted, free of charge, to any person obtaining -a copy of this software and associated documentation files (the -"Software"), to deal in the Software without restriction, including -without limitation the rights to use, copy, modify, merge, publish, -distribute, sublicense, and/or sell copies of the Software, and to -permit persons to whom the Software is furnished to do so, subject to -the following conditions: - -The above copyright notice and this permission notice shall be -included in all copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, -EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF -MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND -NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE -LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION -OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION -WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -========================================= -END OF @babel/preset-typescript@7.18.6 AND INFORMATION - %% @babel/template@7.18.10 NOTICES AND INFORMATION BEGIN HERE ========================================= MIT License @@ -4130,6 +4102,6 @@ END OF update-browserslist-db@1.0.10 AND INFORMATION SUMMARY BEGIN HERE ========================================= -Total Packages: 143 +Total Packages: 142 ========================================= END OF SUMMARY \ No newline at end of file diff --git a/packages/playwright-test/bundles/babel/package-lock.json b/packages/playwright-test/bundles/babel/package-lock.json index d64e1c7b02..5c7b144cc3 100644 --- a/packages/playwright-test/bundles/babel/package-lock.json +++ b/packages/playwright-test/bundles/babel/package-lock.json @@ -28,7 +28,7 @@ "@babel/plugin-syntax-optional-catch-binding": "^7.8.3", "@babel/plugin-transform-modules-commonjs": "^7.19.6", "@babel/plugin-transform-react-jsx": "^7.20.7", - "@babel/preset-typescript": "^7.18.6" + "@babel/plugin-transform-typescript": "^7.20.2" }, "devDependencies": { "@types/babel__code-frame": "^7.0.3", @@ -724,22 +724,6 @@ "@babel/core": "^7.0.0-0" } }, - "node_modules/@babel/preset-typescript": { - "version": "7.18.6", - "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.18.6.tgz", - "integrity": "sha512-s9ik86kXBAnD760aybBucdpnLsAt0jK1xqJn2juOn9lkOvSHV60os5hxoVJsPzMQxvnUJFAlkont2DvvaYEBtQ==", - "dependencies": { - "@babel/helper-plugin-utils": "^7.18.6", - "@babel/helper-validator-option": "^7.18.6", - "@babel/plugin-transform-typescript": "^7.18.6" - }, - "engines": { - "node": ">=6.9.0" - }, - "peerDependencies": { - "@babel/core": "^7.0.0-0" - } - }, "node_modules/@babel/template": { "version": "7.18.10", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.18.10.tgz", @@ -1602,16 +1586,6 @@ "@babel/plugin-syntax-typescript": "^7.20.0" } }, - "@babel/preset-typescript": { - "version": "7.18.6", - "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.18.6.tgz", - "integrity": "sha512-s9ik86kXBAnD760aybBucdpnLsAt0jK1xqJn2juOn9lkOvSHV60os5hxoVJsPzMQxvnUJFAlkont2DvvaYEBtQ==", - "requires": { - "@babel/helper-plugin-utils": "^7.18.6", - "@babel/helper-validator-option": "^7.18.6", - "@babel/plugin-transform-typescript": "^7.18.6" - } - }, "@babel/template": { "version": "7.18.10", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.18.10.tgz", diff --git a/packages/playwright-test/bundles/babel/package.json b/packages/playwright-test/bundles/babel/package.json index 224ddb499a..df18b35006 100644 --- a/packages/playwright-test/bundles/babel/package.json +++ b/packages/playwright-test/bundles/babel/package.json @@ -29,7 +29,7 @@ "@babel/plugin-syntax-optional-catch-binding": "^7.8.3", "@babel/plugin-transform-modules-commonjs": "^7.19.6", "@babel/plugin-transform-react-jsx": "^7.20.7", - "@babel/preset-typescript": "^7.18.6" + "@babel/plugin-transform-typescript": "^7.20.2" }, "devDependencies": { "@types/babel__code-frame": "^7.0.3", diff --git a/packages/playwright-test/bundles/babel/src/babelBundleImpl.ts b/packages/playwright-test/bundles/babel/src/babelBundleImpl.ts index c2f303de01..6566a9dc32 100644 --- a/packages/playwright-test/bundles/babel/src/babelBundleImpl.ts +++ b/packages/playwright-test/bundles/babel/src/babelBundleImpl.ts @@ -31,12 +31,10 @@ export function babelTransform(filename: string, isTypeScript: boolean, isModule if (isTypeScript) { plugins.push( - [require('@babel/plugin-proposal-class-properties')], [require('@babel/plugin-proposal-numeric-separator')], [require('@babel/plugin-proposal-logical-assignment-operators')], [require('@babel/plugin-proposal-nullish-coalescing-operator')], [require('@babel/plugin-proposal-optional-chaining')], - [require('@babel/plugin-proposal-private-methods')], [require('@babel/plugin-syntax-json-strings')], [require('@babel/plugin-syntax-optional-catch-binding')], [require('@babel/plugin-syntax-async-generators')], @@ -56,7 +54,10 @@ export function babelTransform(filename: string, isTypeScript: boolean, isModule } } }) - ] + ], + [require('@babel/plugin-transform-typescript'), { onlyRemoveTypeImports: false, allowDeclareFields: true, isTSX: true }], + [require('@babel/plugin-proposal-class-properties')], + [require('@babel/plugin-proposal-private-methods')], ); } @@ -83,9 +84,7 @@ export function babelTransform(filename: string, isTypeScript: boolean, isModule // breaks playwright evaluates. setPublicClassFields: true, }, - presets: [ - [require('@babel/preset-typescript'), { onlyRemoveTypeImports: false }], - ], + presets: [], plugins, sourceMaps: 'both', } as babel.TransformOptions)!; diff --git a/tests/playwright-test/babel.spec.ts b/tests/playwright-test/babel.spec.ts index 20877ac2f2..39119309ff 100644 --- a/tests/playwright-test/babel.spec.ts +++ b/tests/playwright-test/babel.spec.ts @@ -75,3 +75,32 @@ test('should treat enums equally', async ({ runInlineTest }) => { expect(result.exitCode).toBe(0); expect(result.passed).toBe(1); }); + +test('should allow declare fields', async ({ runInlineTest }) => { + const result = await runInlineTest({ + 'example.spec.ts': ` + import { test, expect } from '@playwright/test'; + + class Base { + constructor(p1, p2) { + this.p1 = p1; + this.p2 = p2; + } + } + + class Derived extends Base { + p1: string; + declare p2: string; + } + + test('works', () => { + const d = new Derived('value1', 'value2'); + expect(d.p1).toBe(undefined); + expect(d.p2).toBe('value2'); + }) + `, + }); + + expect(result.exitCode).toBe(0); + expect(result.passed).toBe(1); +});