Update @lwc/lwc/valid-api eslint for data (#161)

* Update @lwc/lwc/valid-api eslint for data

* Update lib/rules/valid-api.js

Co-authored-by: Will Harney <62956339+wjhsf@users.noreply.github.com>

* Update valid-api.js

* Update valid-api.js

* Update lib/rules/valid-api.js

* Update lib/rules/valid-api.js

* Update valid-api.js

* Update lib/rules/valid-api.js

Co-authored-by: Eugene Kashida <ekashida@gmail.com>

* Update lib/rules/valid-api.js

Co-authored-by: Will Harney <62956339+wjhsf@users.noreply.github.com>

* Update valid-api.md

* Update valid-api.js

* Update valid-api.js

---------

Co-authored-by: Will Harney <62956339+wjhsf@users.noreply.github.com>
Co-authored-by: Eugene Kashida <ekashida@gmail.com>

Author: 3 people

docs/rules/valid-api.md

@@ -5,7 +5,8 @@ The following restrictions apply to the `@api` decorator:
 -   Apply to class fields and class methods only.
 -   Fields and methods should be unique per class.
 -   Fields and methods can't start with `on`. The `on` prefix is reserved to bind event handlers.
--   Fields and methods can't start with `data`, `slot` or `part`. These names are reserved by LWC.
+-   Fields and methods can't be named `slot`, `part` or `dataset`. These names are reserved by LWC.
+-   Fields and methods can't start with `data[A-Z]`. These are mapped to the reflected property `this.dataset.*`.
 -   Boolean properties must be initialized with `false`. By initializing a public property to `true`, the consumer component can't set its value to `false` via the template.
 
 ## Rule details

lib/rules/valid-api.js

@@ -13,7 +13,7 @@ const { isClassField } = require('../util/isClassField');
 /**
  * Set of APIs that we reserved for forward compatibility of LWC.
  */
-const RESERVED_PUBLIC_PROPERTIES = new Set(['slot', 'part']);
+const RESERVED_PUBLIC_PROPERTIES = new Set(['slot', 'part', 'dataset']);
 
 /**
  * Maps containing attributes that have a camelCased property mapping. We do not want users
@@ -68,17 +68,15 @@ function validatePropertyName(property, context) {
         });
     }
 
-    if (name.startsWith('data')) {
+    if (RESERVED_PUBLIC_PROPERTIES.has(name)) {
         context.report({
             node: property,
-            message: `Invalid public property "${name}". Properties starting with "data" are reserved properties.`,
+            message: `Invalid public property "${name}". This property name is a reserved property.`,
         });
-    }
-
-    if (RESERVED_PUBLIC_PROPERTIES.has(name)) {
+    } else if (/^data[A-Z]/.test(name)) {
         context.report({
             node: property,
-            message: `Invalid public property "${name}". This property name is a reserved property.`,
+            message: `Invalid public property name "${name}". Properties starting with "data" correspond to data-* HTML attributes, which are not allowed.`,
         });
     }
 

test/lib/rules/valid-api.js

@@ -13,6 +13,12 @@ testRule('valid-api', {
         {
             code: 'api();',
         },
+        {
+            code: `import { api } from 'lwc';
+        class Foo {
+            @api data
+        }`,
+        },
         {
             code: `import { api } from 'lwc';
         class Foo {
@@ -125,18 +131,6 @@ testRule('valid-api', {
                 },
             ],
         },
-        {
-            code: `import { api } from 'lwc';
-            class Foo {
-                @api data;
-            }`,
-            errors: [
-                {
-                    message:
-                        'Invalid public property "data". Properties starting with "data" are reserved properties.',
-                },
-            ],
-        },
         {
             code: `import { api } from 'lwc';
             class Foo {
@@ -145,7 +139,7 @@ testRule('valid-api', {
             errors: [
                 {
                     message:
-                        'Invalid public property "dataFooBar". Properties starting with "data" are reserved properties.',
+                        'Invalid public property name "dataFooBar". Properties starting with "data" correspond to data-* HTML attributes, which are not allowed.',
                 },
             ],
         },
@@ -195,6 +189,18 @@ testRule('valid-api', {
                 },
             ],
         },
+        {
+            code: `import { api } from 'lwc';
+            class Foo {
+                @api dataset;
+            }`,
+            errors: [
+                {
+                    message:
+                        'Invalid public property "dataset". This property name is a reserved property.',
+                },
+            ],
+        },
         {
             code: `import { api } from 'lwc';
             class Foo {
@@ -295,6 +301,12 @@ testRule('valid-api', {
 
 testTypeScript('valid-api', {
     valid: [
+        {
+            code: `import { api } from 'lwc';
+        class Foo {
+            @api data: string
+        }`,
+        },
         {
             code: `import { api } from 'lwc';
         class Foo {
@@ -410,12 +422,12 @@ testTypeScript('valid-api', {
         {
             code: `import { api } from 'lwc';
             class Foo {
-                @api data: string;
+                @api dataset: string;
             }`,
             errors: [
                 {
                     message:
-                        'Invalid public property "data". Properties starting with "data" are reserved properties.',
+                        'Invalid public property "dataset". This property name is a reserved property.',
                 },
             ],
         },
@@ -427,7 +439,7 @@ testTypeScript('valid-api', {
             errors: [
                 {
                     message:
-                        'Invalid public property "dataFooBar". Properties starting with "data" are reserved properties.',
+                        'Invalid public property name "dataFooBar". Properties starting with "data" correspond to data-* HTML attributes, which are not allowed.',
                 },
             ],
         },