refactor: Integrations view & Modules APIs

Author: adhamfarrag

package.json

@@ -14,7 +14,8 @@
   "repository": "https://github.com/nuxtrdev/nuxtr-vscode",
   "homepage": "https://nuxtr.com",
   "activationEvents": [
-    "onStartupFinished"
+    "workspaceContains:**/nuxt.config.{js,ts}",
+    "workspaceContains:**/package.json"
   ],
   "files": [
     "out"
@@ -1062,7 +1063,7 @@
     "@types/vscode": "^1.83.1",
     "@typescript-eslint/eslint-plugin": "^6.9.0",
     "@typescript-eslint/parser": "^6.9.0",
-    "@vscode/test-electron": "^2.3.5",
+    "@vscode/test-electron": "^2.3.6",
     "changelogen": "^0.5.5",
     "eslint": "^8.52.0",
     "nuxi-edge": "3.9.1-1697113884.a6acb6a",
@@ -1073,7 +1074,7 @@
   },
   "dependencies": {
     "@nuxt/schema": "^3.8.0",
-    "destr": "^2.0.1",
+    "destr": "^2.0.2",
     "fs-extra": "^11.1.1",
     "jiti": "^1.20.0",
     "magicast": "^0.3.0",

pnpm-lock.yaml

@@ -9,9 +9,10 @@
         "preview": "vite preview"
     },
     "dependencies": {
-        "@supabase/supabase-js": "^2.38.2",
+        "@supabase/supabase-js": "^2.38.3",
         "@vscode/webview-ui-toolkit": "^1.2.2",
         "build": "^0.1.4",
+        "ofetch": "^1.3.3",
         "vue": "^3.3.6",
         "vue-router": "4.2.4"
     },
@@ -22,7 +23,7 @@
         "postcss": "^8.4.31",
         "prettier": "^3.0.3",
         "prettier-plugin-tailwindcss": "^0.5.6",
-        "tailwindcss": "^3.3.3",
+        "tailwindcss": "^3.3.4",
         "typescript": "^5.2.2",
         "vite": "^4.5.0",
         "vue-tsc": "^1.8.20"

ui/build/assets/index.js

@@ -24,13 +24,13 @@
             <div class="flex gap-1">
               <IconStar class="h-4 w-4" />
               <span class="text-xs font-normal">
-                {{ formatNumber(module.stars) }}
+                {{ formatNumber(module.stats.stars) }}
               </span>
             </div>
             <div class="flex gap-1">
               <IconDownloads class="h-4 w-4" />
               <span class="text-xs font-normal">
-                {{ formatNumber(module.downloads) }}
+                {{ formatNumber(module.stats.downloads) }}
               </span>
             </div>
           </div>
@@ -63,8 +63,10 @@ import IconStar from "./Icons/Star.vue";
 import IconDownloads from "./Icons/Downloads.vue";
 import { ref } from "vue";
 
+import { Module } from "./../composables/modules";
+
 const props = defineProps<{
-  module: any;
+  module: Module;
   installed?: boolean;
 }>();
 

ui/package.json

@@ -32,18 +32,18 @@
 </template>
 
 <script setup lang="ts">
-import { useModules } from "./../composables/modules";
+import { useModules, Module } from "./../composables/modules";
 import ModuleCard from "./ModuleCard.vue";
 import ModulesFilter from "./ModulesFilter.vue";
 import { ref, computed } from "vue";
 
 const searchInput = ref<HTMLElement | null>(null);
 
-const modules = useModules();
+const modules: Module[] = useModules();
 
-const nuxtVersions = ref(["3.x", "2.x", "2.x-bridge"]);
+const nuxtVersions = ref(["3.0.0", "2.0.0"]);
 
-const selectedVersion = ref("3.x");
+const selectedVersion = ref("3.0.0");
 const selectedIntegrationType = ref("All");
 const selectedCategory = ref("All");
 const selectedType = ref("All");
@@ -53,7 +53,7 @@ const showFilter = ref(false);
 
 const types = ref(
   modules
-    .map((m: any) => {
+    .map((m: Module) => {
       return m.type.charAt(0).toUpperCase() + m.type.slice(1);
     })
     .filter((v: any, i: any, a: any) => a.indexOf(v) === i)
@@ -63,8 +63,8 @@ types.value.unshift("All");
 // unique categories from modules with tag 3.x
 const categories = computed(() => {
   const categories = modules
-    .filter((m: any) => m.tags.includes(selectedVersion.value))
-    .map((m: any) => m.category)
+    .filter((m: Module) => m.compatibility.nuxt.includes(selectedVersion.value))
+    .map((m: Module) => m.category)
     .filter((v: any, i: any, a: any) => a.indexOf(v) === i)
     .sort();
   categories.unshift("All");
@@ -73,8 +73,8 @@ const categories = computed(() => {
 
 const filteredModules = computed(() => {
   // filter by selected version
-  const filteredByVersion = modules.filter((m: any) =>
-    m.tags.includes(selectedVersion.value),
+  const filteredByVersion = modules.filter((m: Module) =>
+    m.compatibility.nuxt.includes(selectedVersion.value),
   );
 
   // filter by selected category
@@ -95,20 +95,20 @@ const filteredModules = computed(() => {
   );
 
   // filter by search result
-  const filteredBySearch = sortedByDownloads.filter((m: any) =>
+  const filteredBySearch = sortedByDownloads.filter((m: Module) =>
     (m.name + " " + m.description)
       .toLowerCase()
       .includes(searchResult.value.toLowerCase()),
   );
 
   // filter by selectedIntegrationType
   if (selectedIntegrationType.value === "Layers") {
-    const filteredByExtends = filteredBySearch.filter((m: any) =>
+    const filteredByExtends = filteredBySearch.filter((m: Module) =>
       m.isLayer ? true : false,
     );
     return filteredByExtends;
   } else if (selectedIntegrationType.value === "Modules") {
-    const filteredByExtends = filteredBySearch.filter((m: any) =>
+    const filteredByExtends = filteredBySearch.filter((m: Module) =>
       m.isLayer ? false : true,
     );
     return filteredByExtends;
@@ -118,7 +118,7 @@ const filteredModules = computed(() => {
 });
 
 const isModuleInstalled = (module: string) => {
-  if (installedModules.value?.find((m: any) => m.name === module)) {
+  if (installedModules.value?.find((m: Module) => m.name === module)) {
     return true;
   }
   return false;

ui/src/components/ModuleCard.vue

@@ -68,7 +68,7 @@ const props = defineProps({
   },
   nuxtVersions: {
     type: Array,
-    default: () => ["3.x", "2.x", "2.x-bridge"],
+    default: () => ["3.0.0", "2.0.0"],
   },
   categories: {
     type: Array,
@@ -101,7 +101,7 @@ const emit = defineEmits([
 
 const listOpen = ref(props.open || false);
 const integrationType = ref("All Integrations");
-const selectedVersion = ref("3.x");
+const selectedVersion = ref("3.0.0");
 const selectedType = ref("Type");
 const selectedCategory = ref("Category");