diff --git a/packages/babel-plugin-transform-lwc-class/src/__tests__/decorators.test.js b/packages/babel-plugin-transform-lwc-class/src/__tests__/decorators.test.js index 17b52c4735..667127c453 100644 --- a/packages/babel-plugin-transform-lwc-class/src/__tests__/decorators.test.js +++ b/packages/babel-plugin-transform-lwc-class/src/__tests__/decorators.test.js @@ -3,7 +3,21 @@ const pluginTest = require('./utils/test-transform').pluginTest( ); describe('decorators', () => { - pluginTest('should throw if a decorator is not imported from engine', ` + pluginTest('should throw if an global decorator is used on class field', ` + export default class Test { + @api test = false; + } + `, { + error: { + message: 'test.js: Invalid decorator usage. Supported decorators (api, wire, track) should be imported from "engine"', + loc: { + line: 10, + column: 0 + } + } + }); + + pluginTest('should throw if an global decorator is used on class methods', ` export default class Test { @api test() {} diff --git a/packages/babel-plugin-transform-lwc-class/src/__tests__/utils/test-transform.js b/packages/babel-plugin-transform-lwc-class/src/__tests__/utils/test-transform.js index a0d6680d2b..09ca4661c0 100644 --- a/packages/babel-plugin-transform-lwc-class/src/__tests__/utils/test-transform.js +++ b/packages/babel-plugin-transform-lwc-class/src/__tests__/utils/test-transform.js @@ -3,9 +3,6 @@ const babel = require('babel-core'); const baseConfig = { babelrc: false, filename: 'test.js', - parserOpts: { - plugins: ['*'], - }, }; function transform(plugin, opts = {}) { diff --git a/packages/babel-plugin-transform-lwc-class/src/class-properties.js b/packages/babel-plugin-transform-lwc-class/src/class-properties.js deleted file mode 100644 index d00bbfc5ba..0000000000 --- a/packages/babel-plugin-transform-lwc-class/src/class-properties.js +++ /dev/null @@ -1,5 +0,0 @@ -const classProperty = require('babel-plugin-transform-class-properties'); - -module.exports = function({ types }) { - return classProperty({ types }).visitor; -} diff --git a/packages/babel-plugin-transform-lwc-class/src/index.js b/packages/babel-plugin-transform-lwc-class/src/index.js index 57a8536024..f0311ebcc8 100644 --- a/packages/babel-plugin-transform-lwc-class/src/index.js +++ b/packages/babel-plugin-transform-lwc-class/src/index.js @@ -1,15 +1,36 @@ +const classProperty = require('babel-plugin-transform-class-properties'); + const component = require('./component'); const decorators = require('./decorators'); -const classProperties = require('./class-properties'); +/** + * The transform is done in 2 passes: + * - First, apply in a single AST traversal the decorators and the component transformation. + * - Then, in a second path transform class properties using the official babel plugin "babel-plugin-transform-class-properties". + */ module.exports = function ({ types, traverse }) { const { merge: mergeVisitors } = traverse.visitors; + const { visitor: classPropertyVisitor } = classProperty({ types }); + return { + manipulateOptions(opts, parserOpts) { + parserOpts.plugins.push('decorators'); + parserOpts.plugins.push('classProperties'); + }, visitor: mergeVisitors([ decorators({ types }), component({ types }), - classProperties({ types }), + { + Program: { + exit(path, state) { + path.traverse( + classPropertyVisitor, + state + ); + } + } + }, ]) } }