feat(slice-library): prevent fetching from a different framework (#1763)

Author: jomifepe

packages/slice-machine/src/features/customTypes/customTypesBuilder/ImportSlicesFromLibraryModal/LibrarySlicesDialogContent.tsx

@@ -1,4 +1,4 @@
-import { useDebounce } from "@prismicio/editor-support/React";
+import { useDebounce, useStableEffect } from "@prismicio/editor-support/React";
 import {
   Box,
   Button,
@@ -24,6 +24,7 @@ import { ReactNode, Suspense, useEffect, useMemo, useState } from "react";
 import { toast } from "react-toastify";
 
 import { getState, telemetry } from "@/apiClient";
+import { getFrameworkFromAdapter } from "@/features/customTypes/customTypesBuilder/ImportSlicesFromLibraryModal/utils/getFrameworkFromAdapter";
 import { useOnboarding } from "@/features/onboarding/useOnboarding";
 import { useAutoSync } from "@/features/sync/AutoSyncProvider";
 import { useRepositoryInformation } from "@/hooks/useRepositoryInformation";
@@ -37,6 +38,7 @@ import { EmptyView } from "./EmptyView";
 import { useGitIntegration } from "./hooks/useGitIntegration";
 import { SliceCard } from "./SliceCard";
 import {
+  AdapterSchema,
   CommonDialogContentProps,
   GitIntegration,
   NewSlice,
@@ -71,16 +73,16 @@ function LibrarySlicesDialogSuspenseContent(
 
   const {
     integrations,
+    fetchedSlices,
     isImportingSlices,
     fetchSlicesFromGithub,
-    importedSlices,
     resetImportedSlices,
   } = useGitIntegration();
 
   const smActions = useSliceMachineActions();
   const { syncChanges } = useAutoSync();
   const { completeStep: completeOnboardingStep } = useOnboarding();
-  const prismicRepositoryInformation = useRepositoryInformation();
+  const prismicRepositoryInformation = usePrismicRepositoryDetails();
 
   useEffect(() => {
     if (isTabSelected) {
@@ -102,11 +104,14 @@ function LibrarySlicesDialogSuspenseContent(
   const onSelectRepository = (repository: RepositorySelection) => {
     setSelectedRepository(repository);
     setSelectedSlices([]);
-    void fetchSlicesFromGithub({ repository });
+    void fetchSlicesFromGithub({
+      repository,
+      targetFramework: prismicRepositoryInformation.framework,
+    });
   };
 
   const onSelectAll = (checked: boolean) => {
-    setSelectedSlices(checked ? importedSlices : []);
+    setSelectedSlices(checked ? fetchedSlices : []);
   };
 
   const onSelect = (slice: SliceImport) => {
@@ -258,27 +263,28 @@ repositories and set a library for this project.`}
         icon="alert"
       />
     );
-  } else if (importedSlices.length === 0) {
+  } else if (fetchedSlices.length === 0) {
     renderedContent = (
       <EmptyView
         title="No slices found"
-        description="This repository doesn't contain any Slice components."
+        description={`This repository doesn't contain any Slice components
+compatible with your project.`}
         icon="viewDay"
       />
     );
   } else {
-    const allSelected = importedSlices.every((slice) =>
+    const allSelected = fetchedSlices.every((slice) =>
       selectedSlices.some((s) => s.model.id === slice.model.id),
     );
-    const someSelected = importedSlices.some((slice) =>
+    const someSelected = fetchedSlices.some((slice) =>
       selectedSlices.some((s) => s.model.id === slice.model.id),
     );
 
     let selectAllLabel = "Select all slices";
     if (allSelected) {
       selectAllLabel = `Selected all slices (${selectedSlices.length})`;
     } else if (someSelected) {
-      selectAllLabel = `${selectedSlices.length} of ${importedSlices.length} selected`;
+      selectAllLabel = `${selectedSlices.length} of ${fetchedSlices.length} selected`;
     }
 
     renderedContent = (
@@ -300,7 +306,7 @@ repositories and set a library for this project.`}
               gap={16}
               padding={{ inline: 16, bottom: 16 }}
             >
-              {importedSlices.map((slice) => (
+              {fetchedSlices.map((slice) => (
                 <SliceCard
                   key={slice.model.id}
                   model={slice.model}
@@ -380,8 +386,12 @@ function RepositorySelector(props: RepositorySelectorProps) {
     );
   }, [integrations]);
 
-  useEffect(() => {
+  useStableEffect(() => {
     if (isTabSelected && repositories.length > 0) {
+      if (repositories.length === 1) {
+        onSelectRepository(repositories[0]);
+      }
+
       void telemetry.track({
         event: "slice-library:projects-listed",
         repositories_count: repositories.length,
@@ -471,6 +481,20 @@ function RepositorySelector(props: RepositorySelectorProps) {
   );
 }
 
+function usePrismicRepositoryDetails() {
+  const prismicRepositoryInformation = useRepositoryInformation();
+  const { data: framework } = useSuspenseQuery({
+    queryKey: ["getFrameworkFromAdapterName"],
+    queryFn: async () => {
+      return getFrameworkFromAdapter(
+        AdapterSchema.parse(await managerClient.project.getAdapterName()),
+      );
+    },
+  });
+
+  return { ...prismicRepositoryInformation, framework };
+}
+
 function ComboBoxItemContent(props: {
   children: ReactNode;
   disabled?: boolean;

packages/slice-machine/src/features/customTypes/customTypesBuilder/ImportSlicesFromLibraryModal/hooks/useGitIntegration.ts

@@ -5,16 +5,16 @@ import { toast } from "react-toastify";
 import { telemetry } from "@/apiClient";
 import { managerClient } from "@/managerClient";
 
-import { RepositorySelection, SliceImport } from "../types";
+import { Framework, RepositorySelection, SliceImport } from "../types";
 import {
   fetchSlicesFromLibraries,
   getDefaultBranch,
-  getSliceLibraries,
+  getProjectDetails,
 } from "../utils/github";
 
 export function useGitIntegration() {
   const [isImportingSlices, setIsImportingSlices] = useState(false);
-  const [importedSlices, setImportedSlices] = useState<SliceImport[]>([]);
+  const [fetchedSlices, setFetchedSlices] = useState<SliceImport[]>([]);
 
   const { data: githubIntegrations } = useSuspenseQuery({
     queryKey: ["getIntegrations"],
@@ -29,14 +29,15 @@ export function useGitIntegration() {
   });
 
   const resetImportedSlices = () => {
-    setImportedSlices([]);
+    setFetchedSlices([]);
     setIsImportingSlices(false);
   };
 
   const fetchSlicesFromGithub = async (args: {
     repository: RepositorySelection;
+    targetFramework: Framework;
   }) => {
-    const { repository } = args;
+    const { repository, targetFramework } = args;
 
     try {
       resetImportedSlices();
@@ -62,7 +63,12 @@ export function useGitIntegration() {
       let libraries: string[] | undefined;
 
       try {
-        libraries = await getSliceLibraries({ owner, repo, branch, token });
+        const project = await getProjectDetails({ owner, repo, branch, token });
+        if (project.framework !== targetFramework) {
+          throw new GitHubImportError("Incompatible project framework.");
+        }
+
+        libraries = project.libraries;
       } catch (error) {
         throw new GitHubImportError(`
           Failed to fetch slicemachine.config.json: ${
@@ -89,7 +95,7 @@ export function useGitIntegration() {
         throw new GitHubImportError("No slices were found in the libraries.");
       }
 
-      setImportedSlices(fetchedSlices);
+      setFetchedSlices(fetchedSlices);
       toast.success(
         `Found ${fetchedSlices.length} slice(s) from ${libraries.length} library/libraries`,
       );
@@ -127,8 +133,8 @@ export function useGitIntegration() {
 
   return {
     integrations: githubIntegrations.integrations ?? [],
+    fetchedSlices: fetchedSlices ?? [],
     isImportingSlices,
-    importedSlices,
     resetImportedSlices,
     fetchSlicesFromGithub,
   };

packages/slice-machine/src/features/customTypes/customTypesBuilder/ImportSlicesFromLibraryModal/types.ts

@@ -1,5 +1,17 @@
 import { SharedSliceContent } from "@prismicio/types-internal/lib/content";
 import { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
+import { z } from "zod";
+
+export type Framework = "next" | "nuxt" | "sveltekit";
+
+export const AdapterSchema = z.enum([
+  "@slicemachine/adapter-next",
+  "@slicemachine/adapter-nuxt",
+  "@slicemachine/adapter-nuxt2",
+  "@slicemachine/adapter-sveltekit",
+]);
+
+export type Adapter = z.infer<typeof AdapterSchema>;
 
 export type SliceImport = {
   image: File;

packages/slice-machine/src/features/customTypes/customTypesBuilder/ImportSlicesFromLibraryModal/utils/getFrameworkFromAdapter.ts

@@ -0,0 +1,19 @@
+import { Adapter, Framework } from "../types";
+
+export function getFrameworkFromAdapter(adapter: Adapter): Framework;
+export function getFrameworkFromAdapter(adapter: string): Framework | undefined;
+export function getFrameworkFromAdapter(
+  adapter: string,
+): Framework | undefined {
+  switch (adapter) {
+    case "@slicemachine/adapter-next":
+      return "next";
+    case "@slicemachine/adapter-nuxt":
+    case "@slicemachine/adapter-nuxt2":
+      return "nuxt";
+    case "@slicemachine/adapter-sveltekit":
+      return "sveltekit";
+    default:
+      return undefined;
+  }
+}

packages/slice-machine/src/features/customTypes/customTypesBuilder/ImportSlicesFromLibraryModal/utils/github.ts

@@ -2,7 +2,9 @@ import { SharedSliceContent } from "@prismicio/types-internal/lib/content";
 import { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
 import { z } from "zod";
 
-import { SliceFile, SliceImport } from "../types";
+import { getFrameworkFromAdapter } from "@/features/customTypes/customTypesBuilder/ImportSlicesFromLibraryModal/utils/getFrameworkFromAdapter";
+
+import { AdapterSchema, Framework, SliceFile, SliceImport } from "../types";
 import { mapWithConcurrency } from "./mapWithConcurrency";
 
 class GitHubRepositoryAPI {
@@ -114,7 +116,7 @@ class GitHubRepositoryAPI {
       .parse(data);
   }
 
-  async getSliceLibraries(branch: string) {
+  async getSliceMachineConfigDetails(branch: string) {
     const data = await this.request(
       `/repos/${this.owner}/${this.repo}/contents/slicemachine.config.json?ref=${branch}`,
     );
@@ -130,8 +132,15 @@ class GitHubRepositoryAPI {
       const decodedContent = atob(parsed.content.replace(/\s/g, ""));
 
       return z
-        .object({ libraries: z.array(z.string()) })
-        .parse(JSON.parse(decodedContent)).libraries;
+        .object({
+          libraries: z.array(z.string()),
+          adapter: AdapterSchema,
+        })
+        .transform((data) => ({
+          framework: getFrameworkFromAdapter(data.adapter),
+          libraries: data.libraries,
+        }))
+        .parse(JSON.parse(decodedContent));
     } else {
       throw new Error("No content found in slicemachine.config.json");
     }
@@ -151,7 +160,7 @@ export const getDefaultBranch = async ({
   return github.getDefaultBranch();
 };
 
-export const getSliceLibraries = async ({
+export const getProjectDetails = async ({
   owner,
   repo,
   branch,
@@ -161,9 +170,9 @@ export const getSliceLibraries = async ({
   repo: string;
   branch: string;
   token: string;
-}): Promise<string[]> => {
+}): Promise<{ libraries: string[]; framework: Framework }> => {
   const github = new GitHubRepositoryAPI({ owner, repo, token });
-  return github.getSliceLibraries(branch);
+  return github.getSliceMachineConfigDetails(branch);
 };
 
 const mocksSchema = z.array(