feat: show whether the property is reflected

open-wc · Oct 22, 2023 · 174b47a · 174b47a
1 parent c38cd89
commit 174b47a
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 8 deletions.
diff --git a/packages/api-common/src/manifest.ts b/packages/api-common/src/manifest.ts
@@ -1,6 +1,5 @@
 import type {
   Attribute,
-  ClassField as ManifestClassField,
   ClassLike,
   ClassMember,
   ClassMethod,
@@ -12,12 +11,13 @@ import type {
   Event,
   Export,
   Package,
-  Slot
+  Slot,
+  CustomElementField
 } from 'custom-elements-manifest/schema';
 
 // 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.
    */

diff --git a/packages/api-docs/src/layout.ts b/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
                   );
                 })}
               `