feat(compiler): detect unimported decorators

packages/babel-plugin-transform-lwc-class/src/__tests__/decorators.spec.js

@@ -74,4 +74,39 @@ describe('decorators', () => {
             }
         }
     });
+
+    pluginTest('compiler should throw when "api" decorator was not imported from lwc', `
+        import { LightningElement } from 'lwc';
+        export default class Test extends LightningElement {
+            @api title = 'hello'
+        }
+    `, {
+        error: {
+            message: 'Invalid decorator usage. Supported decorators (api, wire, track) should be imported from "lwc"',
+        }
+    });
+
+    pluginTest('compiler should throw when "track" decorator was not imported from lwc', `
+        import { LightningElement } from 'lwc';
+        export default class Test extends LightningElement {
+            @track title = 'hello'
+        }
+    `, {
+        error: {
+            message: 'Invalid decorator usage. Supported decorators (api, wire, track) should be imported from "lwc"',
+        }
+    });
+
+    pluginTest('compiler should throw when "wire" decorator was not imported from lwc', `
+        import { LightningElement } from 'lwc';
+        import { getTodo } from "todo";
+        export default class Test extends LightningElement {
+            @wire(getTodo, {})
+            data = {};
+        }
+    `, {
+        error: {
+            message: 'Invalid decorator usage. Supported decorators (api, wire, track) should be imported from "lwc"',
+        }
+    });
 })

packages/babel-plugin-transform-lwc-class/src/constants.js

@@ -58,6 +58,12 @@ const LWC_PACKAGE_EXPORTS = {
     WIRE_DECORATOR: 'wire',
 }
 
+const LWC_DECORATORS = [
+    LWC_PACKAGE_EXPORTS.API_DECORATOR,
+    LWC_PACKAGE_EXPORTS.TRACK_DECORATOR,
+    LWC_PACKAGE_EXPORTS.WIRE_DECORATOR
+];
+
 const LWC_COMPONENT_PROPERTIES = {
     STYLE: 'style',
     RENDER: 'render',
@@ -78,7 +84,7 @@ module.exports = {
     AMBIGUOUS_PROP_SET,
     DISALLOWED_PROP_SET,
     GLOBAL_ATTRIBUTE_MAP,
-
+    LWC_DECORATORS,
     LWC_PACKAGE_ALIAS,
     LWC_PACKAGE_ALIAS_LEGACY,
     LWC_PACKAGE_EXPORTS,

packages/babel-plugin-transform-lwc-class/src/decorators/index.js

@@ -124,7 +124,21 @@ function removeImportSpecifiers(specifiers) {
     }
 }
 
-module.exports = function decoratorVisitor({ types: t }) {
+function invalidDecorators({t: types}) {
+    return {
+        Decorator(path) {
+            throw path.parentPath.buildCodeFrameError(
+                `Invalid '${
+                    path.node.expression.name
+                }' decorator usage. Supported decorators (${LWC_DECORATORS.join(
+                    ', '
+                )}) should be imported from '${LWC_PACKAGE_ALIAS}'`
+            );
+        }
+    }
+}
+
+function decorators({ types: t }) {
     return {
         Program(path, state) {
             const engineImportSpecifiers = getEngineImportSpecifiers(path);
@@ -166,3 +180,8 @@ module.exports = function decoratorVisitor({ types: t }) {
         }
     }
 }
+
+module.exports = {
+    decorators,
+    invalidDecorators,
+}

packages/babel-plugin-transform-lwc-class/src/index.js

@@ -1,8 +1,7 @@
-const classProperty = require('@babel/plugin-proposal-class-properties')["default"];
 const metadata = require('./metadata');
 const component = require('./component');
-const decorators = require('./decorators');
-
+const { decorators } = require('./decorators');
+const { exit } = require('./program');
 /**
  * The transform is done in 2 passes:
  *    - First, apply in a single AST traversal the decorators and the component transformation.
@@ -11,8 +10,6 @@ const decorators = require('./decorators');
 module.exports = function LwcClassTransform(api) {
     const { merge: mergeVisitors } = api.traverse.visitors;
 
-    const { visitor: classPropertyVisitor } = classProperty(api, { loose: true });
-
     return {
         manipulateOptions(opts, parserOpts) {
             parserOpts.plugins.push(['decorators', { decoratorsBeforeExport: true }]);
@@ -23,16 +20,7 @@ module.exports = function LwcClassTransform(api) {
             metadata(api),
             decorators(api),
             component(api),
-            {
-                Program: {
-                    exit(path, state) {
-                        path.traverse(
-                            classPropertyVisitor,
-                            state
-                        );
-                    }
-                }
-            },
+            exit(api),
         ])
     }
 }

packages/babel-plugin-transform-lwc-class/src/program.js

@@ -0,0 +1,28 @@
+const classProperty = require('@babel/plugin-proposal-class-properties')["default"];
+const { invalidDecorators } = require('./decorators');
+
+function exit(api) {
+    return {
+        Program: {
+            exit(path, state) {
+                const visitors = api.traverse.visitors.merge([
+                    classProperty(api, { loose: true }).visitor,
+
+                    // Decorator usage validation is done on a program exit because by the time program exits,
+                    // all the decorators are suppose to be transformed and removed from the class.
+                    // Any remaining decorators mean they were not detected and therefore misused.
+                    invalidDecorators(api),
+                ]);
+
+                path.traverse(
+                    visitors,
+                    state
+                );
+            }
+        }
+    }
+}
+
+module.exports = {
+    exit,
+}