feat: update custom-elements-manifest to v2, add readonly (#182)

Author: web-padawan

.changeset/fresh-candles-rush.md

@@ -0,0 +1,9 @@
+---
+'@api-viewer/common': patch
+'@api-viewer/demo': patch
+'@api-viewer/docs': patch
+'@api-viewer/tabs': patch
+'api-viewer-element': patch
+---
+
+Update custom-elements-manifest to v2.0.0, add readonly support

docs/assets/custom-elements.json

@@ -339,7 +339,8 @@
               "name": "focused",
               "type": {
                 "text": "Element | null"
-              }
+              },
+              "readonly": true
             },
             {
               "kind": "method",

package.json

@@ -37,7 +37,7 @@
   },
   "devDependencies": {
     "@changesets/cli": "^2.25.2",
-    "@custom-elements-manifest/analyzer": "^0.6.6",
+    "@custom-elements-manifest/analyzer": "^0.8.0",
     "@size-limit/preset-small-lib": "^8.1.0",
     "@typescript-eslint/eslint-plugin": "^5.46.0",
     "@typescript-eslint/parser": "^5.46.0",

packages/api-common/package.json

@@ -27,7 +27,7 @@
     "web-components"
   ],
   "dependencies": {
-    "custom-elements-manifest": "^1.0.0",
+    "custom-elements-manifest": "^2.0.0",
     "lit": "^2.0.0",
     "tslib": "^2.3.1"
   },

packages/api-common/src/manifest.ts

@@ -1,6 +1,6 @@
 import type {
   Attribute,
-  ClassField,
+  ClassField as ManifestClassField,
   ClassLike,
   ClassMember,
   ClassMethod,
@@ -15,6 +15,15 @@ import type {
   Slot
 } 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 & {
+  /**
+   * Whether the property is read-only.
+   */
+  readonly?: boolean;
+};
+
 export type {
   Attribute,
   ClassField,

packages/api-demo/src/layout.ts

@@ -206,7 +206,7 @@ class ApiDemoLayout extends LitElement {
       }
 
       this.knobs = {};
-      this.propKnobs = getKnobs(this.tag, this.props, this.exclude);
+      this.propKnobs = getKnobs(this.props, this.exclude);
       this.customKnobs = getCustomKnobs(this.tag, this.vid);
     }
   }

packages/api-demo/src/ui/knobs.ts

@@ -18,42 +18,13 @@ const getDefault = (prop: PropertyKnob): KnobValue => {
   }
 };
 
-// TODO: remove when analyzer outputs "readOnly" to JSON
-const isGetter = (
-  ctor: CustomElementConstructor | undefined,
-  prop: string
-): boolean => {
-  function getDescriptor(
-    obj: CustomElementConstructor
-  ): PropertyDescriptor | undefined {
-    return obj === HTMLElement
-      ? undefined
-      : Object.getOwnPropertyDescriptor(obj.prototype, prop) ||
-          getDescriptor(Object.getPrototypeOf(obj));
-  }
-
-  let result = false;
-  if (ctor) {
-    const descriptor = getDescriptor(ctor);
-    result = Boolean(
-      descriptor && descriptor.get && descriptor.set === undefined
-    );
-  }
-  return result;
-};
-
 const normalizeType = (type: string | undefined = ''): string =>
   type.replace(' | undefined', '').replace(' | null', '');
 
-export const getKnobs = (
-  tag: string,
-  props: ClassField[],
-  exclude = ''
-): PropertyKnob[] => {
+export const getKnobs = (props: ClassField[], exclude = ''): PropertyKnob[] => {
   // Exclude getters and specific properties
   let propKnobs = props.filter(
-    ({ name }) =>
-      !exclude.includes(name) && !isGetter(customElements.get(tag), name)
+    ({ name, readonly }) => !exclude.includes(name) && !readonly
   ) as PropertyKnob[];
 
   // Set knob types and default knobs values

yarn.lock

@@ -1164,10 +1164,10 @@
   resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-2.0.2.tgz#1bfafe4b7ed0f3e4105837e056e0a89b108ebe36"
   integrity sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg==
 
-"@custom-elements-manifest/analyzer@^0.6.6":
-  version "0.6.6"
-  resolved "https://registry.yarnpkg.com/@custom-elements-manifest/analyzer/-/analyzer-0.6.6.tgz#52db8a3f6c575821d05694ff5a0295c0cb4bbb07"
-  integrity sha512-aPBZBdkrGcQPhgPPEucgw66vfOfLpS80GOGzDXE8NZuO/VmTdy3QQNAsuD4MPJmv9eRPV9W2V7ezodS5g8erng==
+"@custom-elements-manifest/analyzer@^0.8.0":
+  version "0.8.4"
+  resolved "https://registry.yarnpkg.com/@custom-elements-manifest/analyzer/-/analyzer-0.8.4.tgz#34fce1158a44cb7a9d8c1c7415e8c9d03e25d95f"
+  integrity sha512-hibYFNoqPc/xSH9ySuotOllz3UtQnnbG912oC0RtRwHGilnOVT5zeL3Ip26swCjiuFAp8Y0uLN5DwnMpa/xXYQ==
   dependencies:
     "@custom-elements-manifest/find-dependencies" "^0.0.5"
     "@github/catalyst" "^1.6.0"
@@ -3183,11 +3183,16 @@ csv@^5.5.0:
     csv-stringify "^5.6.5"
     stream-transform "^2.1.3"
 
-custom-elements-manifest@1.0.0, custom-elements-manifest@^1.0.0:
+custom-elements-manifest@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/custom-elements-manifest/-/custom-elements-manifest-1.0.0.tgz#b35c2129076a1dc9f95d720c6f7b5b71a857274b"
   integrity sha512-j59k0ExGCKA8T6Mzaq+7axc+KVHwpEphEERU7VZ99260npu/p/9kd+Db+I3cGKxHkM5y6q5gnlXn00mzRQkX2A==
 
+custom-elements-manifest@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/custom-elements-manifest/-/custom-elements-manifest-2.0.0.tgz#6b234f7a57c68ecda291ea70882555729617de6d"
+  integrity sha512-1MmhBRszwnNYqn56nkMeHXn/Zlh998+6Yal3wedbXI7NzKPG02GDgjspdN1NiuDtt2yb5n94JvFwPOF7Prnocg==
+
 date-fns@^2.29.1:
   version "2.29.3"
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.29.3.tgz#27402d2fc67eb442b511b70bbdf98e6411cd68a8"