fix(vue): generate web-types for components (#26205)

Resolves #26198

packages/vue/scripts/build-web-types.js

@@ -1,16 +1,37 @@
-const fs = require("fs")
+const fs = require("fs");
-const docs = require("@ionic/core/dist/docs.json")
+const docs = require("@ionic/core/dist/docs.json");
-const { pascalCase } = require('change-case')
+const { pascalCase } = require("change-case");
 
-const components = []
+const components = [];
 
-for (const component of docs.components) {
+/**
-  if (!component.usage.vue) continue
+ * The list of tag names to ignore generating web types for.
-  const attributes = []
+ */
-  const slots = []
+const excludeComponents = [
-  const events = []
+  "ion-app",
-  const componentName = pascalCase(component.tag)
+  "ion-icon",
-  const docUrl = "https://ionicframework.com/docs/api/" + component.tag.substr(4)
+  "ion-nav",
+  "ion-nav-link",
+  "ion-router",
+  "ion-route-redirect",
+  "ion-router-link",
+  "ion-router-outlet",
+];
+
+/**
+ * The filtered set of components to generate web types for.
+ */
+const filteredComponents = docs.components.filter(
+  (c) => !excludeComponents.includes(c.tag)
+);
+
+for (const component of filteredComponents) {
+  const attributes = [];
+  const slots = [];
+  const events = [];
+  const componentName = pascalCase(component.tag);
+  const docUrl =
+    "https://ionicframework.com/docs/api/" + component.tag.substr(4);
 
   for (const prop of component.props || []) {
     attributes.push({
@@ -20,9 +41,9 @@ for (const component of docs.components) {
       default: prop.default,
       value: {
         kind: "expression",
-        type: prop.type
+        type: prop.type,
-      }
+      },
-    })
+    });
   }
 
   for (const event of component.events || []) {
@@ -33,18 +54,20 @@ for (const component of docs.components) {
     events.push({
       name: eventName,
       description: event.docs,
-      arguments: [{
+      arguments: [
+        {
           name: "detail",
-        type: event.detail
+          type: event.detail,
-      }]
+        },
-    })
+      ],
+    });
   }
 
   for (const slot of component.slots || []) {
     slots.push({
       name: slot.name === "" ? "default" : slot.name,
-      description: slot.docs
+      description: slot.docs,
-    })
+    });
   }
 
   components.push({
@@ -52,13 +75,17 @@ for (const component of docs.components) {
     "doc-url": docUrl,
     description: component.docs,
     source: {
-      module: "@ionic/core/" + component.filePath.replace("./src/", "dist/types/").replace(".tsx", ".d.ts"),
+      module:
-      symbol: componentName.substr(3)
+        "@ionic/core/" +
+        component.filePath
+          .replace("./src/", "dist/types/")
+          .replace(".tsx", ".d.ts"),
+      symbol: componentName.substr(3),
     },
     attributes,
     slots,
-    events
+    events,
-  })
+  });
 }
 
 const webTypes = {
@@ -70,9 +97,9 @@ const webTypes = {
     html: {
       "types-syntax": "typescript",
       "description-markup": "markdown",
-      tags: components
+      tags: components,
-    }
+    },
-  }
+  },
-}
+};
 
-fs.writeFileSync("dist/web-types.json", JSON.stringify(webTypes, null, 2))
+fs.writeFileSync("dist/web-types.json", JSON.stringify(webTypes, null, 2));