fix(compiler): Validate decorated properties (#101)

salesforce · Feb 14, 2018 · d50e217 · d50e217
1 parent 9a57344
commit d50e217
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 11 deletions.
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
@@ -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
@@ -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
diff --git 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
+                        );
+                    }
+                }
+            },
         ])
     }
 }