feat(labs/gen-manifest): Added attributes to generated CEM manifest

.changeset/gorgeous-countries-tickle.md

@@ -0,0 +1,5 @@
+---
+'@lit-labs/gen-manifest': minor
+---
+
+Added attributes to generated CEM manifest

packages/labs/gen-manifest/goldens/test-element-a/custom-elements.json

@@ -59,6 +59,13 @@
           ],
           "tagName": "element-a",
           "customElement": true,
+          "attributes": [
+            {
+              "name": "foo",
+              "type": {"text": "string | undefined"},
+              "fieldName": "foo"
+            }
+          ],
           "events": [
             {
               "name": "a-changed",
@@ -390,6 +397,13 @@
           ],
           "tagName": "element-events",
           "customElement": true,
+          "attributes": [
+            {
+              "name": "foo",
+              "type": {"text": "string | undefined"},
+              "fieldName": "foo"
+            }
+          ],
           "events": [
             {
               "name": "string-custom-event",
@@ -619,6 +633,36 @@
           ],
           "tagName": "element-props",
           "customElement": true,
+          "attributes": [
+            {"name": "astr", "type": {"text": "string"}, "fieldName": "aStr"},
+            {"name": "anum", "type": {"text": "number"}, "fieldName": "aNum"},
+            {
+              "name": "abool",
+              "type": {"text": "boolean"},
+              "fieldName": "aBool"
+            },
+            {
+              "name": "astrarray",
+              "type": {"text": "string[]"},
+              "fieldName": "aStrArray"
+            },
+            {
+              "name": "aMyType",
+              "type": {
+                "text": "MyType",
+                "references": [
+                  {
+                    "name": "MyType",
+                    "package": "@lit-internal/test-element-a",
+                    "module": "element-props.js",
+                    "start": 0,
+                    "end": 6
+                  }
+                ]
+              },
+              "fieldName": "aMyType"
+            }
+          ],
           "events": [
             {
               "name": "a-changed",
@@ -678,7 +722,14 @@
             }
           ],
           "tagName": "element-slots",
-          "customElement": true
+          "customElement": true,
+          "attributes": [
+            {
+              "name": "maindefault",
+              "type": {"text": "string"},
+              "fieldName": "mainDefault"
+            }
+          ]
         }
       ],
       "exports": [
@@ -926,6 +977,13 @@
           ],
           "tagName": "element-sub",
           "customElement": true,
+          "attributes": [
+            {
+              "name": "foo",
+              "type": {"text": "string | undefined"},
+              "fieldName": "foo"
+            }
+          ],
           "events": [
             {
               "name": "sub-changed",

packages/labs/gen-manifest/src/index.ts

@@ -24,6 +24,7 @@ import {
 } from '@lit-labs/analyzer';
 import {FileTree} from '@lit-labs/gen-utils/lib/file-utils.js';
 import type * as cem from 'custom-elements-manifest/schema';
+import {ReactiveProperty} from '@lit-labs/analyzer/lib/model.js';
 
 /**
  * For optional entries in the manifest, if the value has no meaningful value
@@ -170,7 +171,9 @@ const convertLitElementDeclaration = (
     ...convertClassDeclaration(declaration),
     tagName: declaration.tagname,
     customElement: true,
-    // attributes: [], // TODO
+    attributes: transformIfNotEmpty(declaration.reactiveProperties, (v) =>
+      Array.from(v.values()).map(convertAttribute)
+    ),
     events: transformIfNotEmpty(declaration.events, (v) =>
       Array.from(v.values()).map(convertEvent)
     ),
@@ -302,6 +305,23 @@ const convertEvent = (event: Event): cem.Event => {
   };
 };
 
+const convertAttribute = (
+  reactiveProperty: ReactiveProperty
+): cem.Attribute => {
+  return {
+    name:
+      typeof reactiveProperty.attribute === 'string'
+        ? reactiveProperty.attribute
+        : reactiveProperty.name,
+    type: transformIfNotEmpty(reactiveProperty.type, convertType),
+    summary: reactiveProperty.summary,
+    deprecated: reactiveProperty.deprecated,
+    description: reactiveProperty.description,
+    default: reactiveProperty.default,
+    fieldName: reactiveProperty.name,
+  };
+};
+
 const convertType = (type: Type): cem.Type => {
   return {
     text: type.text,