diff --git a/.changeset/fresh-candles-rush.md b/.changeset/fresh-candles-rush.md new file mode 100644 index 0000000..41664a3 --- /dev/null +++ b/.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 diff --git a/docs/assets/custom-elements.json b/docs/assets/custom-elements.json index d3b4be3..981a68b 100644 --- a/docs/assets/custom-elements.json +++ b/docs/assets/custom-elements.json @@ -339,7 +339,8 @@ "name": "focused", "type": { "text": "Element | null" - } + }, + "readonly": true }, { "kind": "method", diff --git a/package.json b/package.json index e19fd29..780834d 100644 --- a/package.json +++ b/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", diff --git a/packages/api-common/package.json b/packages/api-common/package.json index f6b0cf3..b482e01 100644 --- a/packages/api-common/package.json +++ b/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" }, diff --git a/packages/api-common/src/manifest.ts b/packages/api-common/src/manifest.ts index bd008c9..a6c7d61 100644 --- a/packages/api-common/src/manifest.ts +++ b/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, diff --git a/packages/api-demo/src/layout.ts b/packages/api-demo/src/layout.ts index 4abba12..72914e7 100644 --- a/packages/api-demo/src/layout.ts +++ b/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); } } diff --git a/packages/api-demo/src/ui/knobs.ts b/packages/api-demo/src/ui/knobs.ts index e00a51d..fbd16b9 100644 --- a/packages/api-demo/src/ui/knobs.ts +++ b/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 diff --git a/yarn.lock b/yarn.lock index 72da5f6..edbe9bc 100644 --- a/yarn.lock +++ b/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"