feat: show whether the property is reflected (#193)

Author: bendera

.changeset/old-days-kick.md

@@ -0,0 +1,9 @@
+---
+'@api-viewer/common': patch
+'@api-viewer/docs': patch
+'@api-viewer/demo': patch
+'@api-viewer/tabs': patch
+'api-viewer-element': patch
+---
+
+Show whether a property reflects to attribute

packages/api-common/src/manifest.ts

@@ -1,6 +1,5 @@
 import type {
   Attribute,
-  ClassField as ManifestClassField,
   ClassLike,
   ClassMember,
   ClassMethod,
@@ -9,6 +8,7 @@ import type {
   CustomElement,
   CustomElementDeclaration,
   CustomElementExport,
+  CustomElementField,
   Event,
   Export,
   Package,
@@ -17,7 +17,7 @@ import type {
 
 // FIXME: remove once new custom-elements-manifest version is released
 // https://github.com/webcomponents/custom-elements-manifest/pull/118
-type ClassField = ManifestClassField & {
+type ClassField = CustomElementField & {
   /**
    * Whether the property is read-only.
    */

packages/api-docs/src/layout.ts

@@ -26,11 +26,15 @@ const renderItem = (
   valueType?: string,
   value?: unknown,
   attribute?: string,
-  isStatic?: boolean
+  isStatic?: boolean,
+  reflects?: boolean
 ): TemplateResult => html`
   <div part="docs-item">
-    ${isStatic
-      ? html`<div part="docs-row"><div part="docs-tag">static</div></div>`
+    ${isStatic || reflects
+      ? html`<div part="docs-row">
+          ${isStatic ? html`<div part="docs-tag">static</div>` : nothing}
+          ${reflects ? html`<div part="docs-tag">reflected</div>` : nothing}
+        </div>`
       : nothing}
     <div part="docs-row">
       <div part="docs-column" class="column-name-${prefix}">
@@ -164,7 +168,13 @@ class ApiDocsLayout extends LitElement {
               props,
               html`
                 ${props.map((prop) => {
-                  const { name, description, type, static: isStatic } = prop;
+                  const {
+                    name,
+                    description,
+                    type,
+                    static: isStatic,
+                    reflects
+                  } = prop;
                   const attribute = attrs.find((x) => x.fieldName === name);
                   return renderItem(
                     'prop',
@@ -173,7 +183,8 @@ class ApiDocsLayout extends LitElement {
                     type?.text,
                     prop.default,
                     attribute?.name,
-                    isStatic
+                    isStatic,
+                    reflects
                   );
                 })}
               `