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.
This commit is contained in:
Dmitry Gozman
GitHub
parent
6a7347f134
commit
a1ba6757e0
|
|
@ -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
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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)!;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue