From 3a253c1be929b3c8117c5ddfd8f3c0f2b96f4710 Mon Sep 17 00:00:00 2001
From: Bozhidar Dryanovski <bozhidar.dryanovski@gmail.com>
Date: Thu, 2 Sep 2021 09:44:57 +0300
Subject: [PATCH] fix(website): no longer depend on the legacy custom-elements
 json file

Signed-off-by: Bozhidar Dryanovski <bozhidar.dryanovski@gmail.com>
---
 .../global-components/DocWebComponentAPI.vue  | 55 +++++++++++--------
 apps/website/data/clarity-web-components.js   |  2 +-
 2 files changed, 34 insertions(+), 23 deletions(-)

diff --git a/apps/website/.vuepress/theme/global-components/DocWebComponentAPI.vue b/apps/website/.vuepress/theme/global-components/DocWebComponentAPI.vue
index d9363bbbda..0001d44b2b 100644
--- a/apps/website/.vuepress/theme/global-components/DocWebComponentAPI.vue
+++ b/apps/website/.vuepress/theme/global-components/DocWebComponentAPI.vue
@@ -5,10 +5,10 @@
   -->
 
 <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>
@@ -16,51 +16,51 @@
           <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,
     };
   },
 };
diff --git a/apps/website/data/clarity-web-components.js b/apps/website/data/clarity-web-components.js
index 6126a79725..5c3cecce4b 100644
--- a/apps/website/data/clarity-web-components.js
+++ b/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) {