diff --git a/packages/babel-plugin-transform-lwc-class/src/__tests__/api-decorator.test.js b/packages/babel-plugin-transform-lwc-class/src/__tests__/api-decorator.test.js index 18cac3733d..24db16ca6c 100644 --- a/packages/babel-plugin-transform-lwc-class/src/__tests__/api-decorator.test.js +++ b/packages/babel-plugin-transform-lwc-class/src/__tests__/api-decorator.test.js @@ -234,6 +234,19 @@ describe('Public Props', () => { } }); + test('does not throw error if property name is "data"', ` + export default class Test { + @api data; + } + `, ` + export default class Test {} + Test.publicProps = { + data: { + config: 0 + } + }; + `); + test('throws error if property name prefixed with "data"', ` export default class Test { @api dataFooBar; diff --git a/packages/babel-plugin-transform-lwc-class/src/decorators/api.js b/packages/babel-plugin-transform-lwc-class/src/decorators/api.js index f7f4c5d5d9..f53fc72ecc 100644 --- a/packages/babel-plugin-transform-lwc-class/src/decorators/api.js +++ b/packages/babel-plugin-transform-lwc-class/src/decorators/api.js @@ -87,7 +87,7 @@ function validatePropertyName(property) { throw property.buildCodeFrameError( `Invalid property name ${propertyName}. Properties starting with "on" are reserved for event handlers.` ); - } else if (propertyName.startsWith('data')) { + } else if (propertyName.startsWith('data') && propertyName.length > 4) { throw property.buildCodeFrameError( `Invalid property name ${propertyName}. Properties starting with "data" are reserved attributes.` );