fix(website): no longer depend on the legacy custom-elements json file

Signed-off-by: Bozhidar Dryanovski <bozhidar.dryanovski@gmail.com>

apps/website/.vuepress/theme/global-components/DocWebComponentAPI.vue

@@ -5,62 +5,62 @@
   -->
 
 <template>
-  <div v-if="api">
+  <div v-if="CustomElement">
     <slot></slot>
-    <section v-if="api.properties">
-      <slot name="properties" v-if="api.properties"></slot>
+    <section v-if="properties">
+      <slot name="properties" v-if="properties"></slot>
       <table cds-layout="m-y:sm" class="table">
         <tr>
           <th class="left">Name</th>
           <th class="left">Type</th>
           <th class="left">Description</th>
         </tr>
 
-        <tr v-for="prop in api.properties">
+        <tr v-for="prop in properties">
           <td class="left">{{ prop.name }}</td>
-          <td class="left">{{ prop.type }}</td>
+          <td class="left">{{ prop.type && prop.type.text ? prop.type.text : '' }}</td>
           <td class="left">{{ prop.description }}</td>
         </tr>
       </table>
     </section>
 
-    <section v-if="api.cssProperties">
-      <slot name="cssProperties" v-if="api.cssProperties"></slot>
+    <section v-if="cssProperties">
+      <slot name="cssProperties" v-if="cssProperties"></slot>
       <table cds-layout="m-y:sm" class="table">
         <tr>
           <th class="left">Name</th>
         </tr>
 
-        <tr v-for="cssProp in api.cssProperties">
+        <tr v-for="cssProp in cssProperties">
           <td class="left">{{ cssProp.name }}</td>
         </tr>
       </table>
     </section>
 
-    <section v-if="api.events">
-      <slot name="events" v-if="api.events"></slot>
+    <section v-if="events">
+      <slot name="events" v-if="events"></slot>
       <table cds-layout="m-y:sm" class="table">
         <tr>
           <th class="left">Name</th>
           <th class="left">Desription</th>
         </tr>
 
-        <tr v-for="event in api.events">
+        <tr v-for="event in events">
           <td class="left">{{ event.name }}</td>
           <td class="left">{{ event.description }}</td>
         </tr>
       </table>
     </section>
 
-    <section v-if="api.slots">
-      <slot name="slots" v-if="api.slots"></slot>
+    <section v-if="slots">
+      <slot name="slots" v-if="slots"></slot>
       <table cds-layout="m-y:sm" class="table">
         <tr>
           <th class="left">Name</th>
           <th class="left">Description</th>
         </tr>
 
-        <tr v-for="slot in api.slots">
+        <tr v-for="slot in slots">
           <td class="left">{{ slot.name }}</td>
           <td class="left">{{ slot.description || 'Content slot for inside the alert' }}</td>
         </tr>
@@ -70,20 +70,31 @@
 </template>
 
 <script>
-import API from '@cds/core/custom-elements.legacy.json';
+import API from '@cds/core/custom-elements.json';
 
 export default {
   name: 'DocWebComponentAPI',
   props: ['component'],
-  computed: {
-    items: function () {
-      // For some reason there are duplicate entries in the web component API so we find the first one.
-      let api = API.tags.find(tag => tag.name === this.component);
-    },
-  },
   data: function () {
+    const CustomElement = API.modules
+      .filter(module => module.path.includes('element.d.ts'))
+      .find(
+        module =>
+          module.declarations &&
+          module.declarations[0].kind === 'class' &&
+          module.declarations[0].tagName === this.component
+      );
+
+    if (CustomElement === undefined) {
+      return { CustomElement };
+    }
+
     return {
-      api: API.tags.find(tag => tag.name === this.component),
+      CustomElement,
+      cssProperties: CustomElement.declarations[0].cssProperties,
+      properties: CustomElement.declarations[0].members.filter(member => !(member.privacy || member.kind !== 'field')),
+      events: CustomElement.declarations[0].events,
+      slots: CustomElement.declarations[0].slots,
     };
   },
 };

apps/website/data/clarity-web-components.js

@@ -4,7 +4,7 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-import clarityWebComponents from '../dist/core/custom-elements.legacy.json';
+import clarityWebComponents from '../dist/core/custom-elements.json';
 
 export default {
   fetchApi(componentName) {