fix: make @api decorator spec compliant (#572)

* fix: make @api decorator spec compliant
salesforce · Aug 12, 2018 · deeb6bb · deeb6bb
1 parent 42e7e0a
commit deeb6bb
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 7 deletions.
diff --git a/packages/babel-plugin-transform-lwc-class/src/__tests__/api-decorator.spec.js b/packages/babel-plugin-transform-lwc-class/src/__tests__/api-decorator.spec.js
@@ -135,7 +135,7 @@ describe('Transform property', () => {
                     }
                     Test.publicProps = {
                         publicAccessor: {
-                        config: 1
+                        config: 3
                     }
                 };`
     }});
@@ -164,7 +164,7 @@ describe('Transform property', () => {
                     }
                     Test.publicProps = {
                     publicAccessor: {
-                        config: 2
+                        config: 3
                     }
                 };`
     }});

diff --git a/packages/babel-plugin-transform-lwc-class/src/decorators/api/transform.js b/packages/babel-plugin-transform-lwc-class/src/decorators/api/transform.js
@@ -21,6 +21,21 @@ function getPropertyBitmask(type) {
     }
 }
 
+function getSiblingGetSetPair(propertyPath, propertyName, type) {
+    const siblingType = type === 'getter' ? 'set' : 'get';
+    const klassBody = propertyPath.parentPath.get('body');
+    const siblingNode = klassBody.find((classMethodPath) => (
+        classMethodPath !== propertyPath &&
+        classMethodPath.isClassMethod({ kind: siblingType }) &&
+        classMethodPath.node.key.name === propertyName)
+    );
+
+    if (siblingNode) {
+        const decoratorType = siblingType === 'get' ? DECORATOR_TYPES.GETTER :DECORATOR_TYPES.SETTER;
+        return { type: decoratorType, path: siblingNode };
+    }
+}
+
 /** Returns the public props configuration of a class based on a list decorators. */
 function computePublicPropsConfig(decorators) {
     return decorators.reduce((acc, { path, type }) => {
@@ -32,6 +47,14 @@ function computePublicPropsConfig(decorators) {
         }
 
         acc[propertyName].config |= getPropertyBitmask(type);
+
+        // With the latest decorator spec a decorator only need to be in one of the getter/setter pair
+        // We need to add the proper bitmask for the sibling getter/setter if exists
+        const siblingPair = getSiblingGetSetPair(property, propertyName, type);
+        if (siblingPair) {
+            acc[propertyName].config |= getPropertyBitmask(siblingPair.type);
+        }
+
         return acc;
     }, {});
 }

diff --git a/packages/babel-plugin-transform-lwc-class/src/decorators/api/validate.js b/packages/babel-plugin-transform-lwc-class/src/decorators/api/validate.js
@@ -60,10 +60,7 @@ function validatePropertyName(property) {
 }
 
 function validateSingleApiDecoratorOnSetterGetterPair(decorators) {
-    decorators.filter(decorator => (
-        isApiDecorator(decorator) &&
-        decorator.type === DECORATOR_TYPES.SETTER
-    )).forEach(({ path }) => {
+    decorators.filter(decorator => (isApiDecorator(decorator) && decorator.type === DECORATOR_TYPES.SETTER)).forEach(({ path }) => {
         const name = path.parentPath.get('key.name').node;
 
         const associatedGetter = decorators.find(decorator => (
@@ -73,7 +70,7 @@ function validateSingleApiDecoratorOnSetterGetterPair(decorators) {
         ));
 
         if (associatedGetter) {
-            console.warn(`\`@api get ${name}\` and \`@api set ${name}\` detected in class declaration. Only the getter needs to be decorated with @api.`);
+            console.warn(`\`@api get ${name}\` and \`@api set ${name}\` detected in class declaration. Only one of the two needs to be decorated with @api.`);
         }
     });
 }