Merge pull request #290 from xavimondev/main

⚙️ Fix clipboard on safari + separate services

src/components/copySvg.svelte

@@ -6,7 +6,9 @@
   import * as Popover from '@/ui/popover';
 
   // Utils:
-  import { MIMETYPE, getSvgContent } from '@/utils/getSvgContent';
+  import { getSvgContent } from '@/utils/getSvgContent';
+  import { getReactComponentCode } from '@/utils/getReactComponentCode';
+  import { clipboard } from '@/utils/clipboard';
   import { copyToClipboard as figmaCopyToClipboard } from '@/figma/copy-to-clipboard';
   import { buttonStyles } from '@/ui/styles';
   import { cn } from '@/utils/cn';
@@ -64,22 +66,12 @@
     const svgUrlToCopy = getSvgUrl();
     optionsOpen = false;
 
-    const data = {
-      [MIMETYPE]: getSvgContent(svgUrlToCopy, true)
-    };
-
+    const content = await getSvgContent(svgUrlToCopy);
     if (isInFigma) {
-      const content = (await getSvgContent(svgUrlToCopy, false)) as string;
       figmaCopyToClipboard(content);
     }
 
-    try {
-      const clipboardItem = new ClipboardItem(data);
-      await navigator.clipboard.write([clipboardItem]);
-    } catch (error) {
-      const content = (await getSvgContent(svgUrlToCopy, false)) as string;
-      await navigator.clipboard.writeText(content);
-    }
+    await clipboard(content);
 
     const category = Array.isArray(svgInfo.category)
       ? svgInfo.category.sort().join(' - ')
@@ -111,32 +103,26 @@
 
     isLoading = true;
 
-    try {
-      const title = svgInfo.title.split(' ').join('');
-      const content = (await getSvgContent(svgUrlToCopy, false)) as string;
-      const getCode = await fetch('/api/svgs/svgr', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ code: content, typescript: tsx, name: title })
-      });
-      const data = await getCode.json();
-      const clipboardItem = new ClipboardItem({
-        'text/plain': new Blob([data], { type: 'text/plain' })
-      });
-      await navigator.clipboard.write([clipboardItem]);
-      toast.success(`Copied as React ${tsx ? 'TSX' : 'JSX'} component`, {
-        description: `${svgInfo.title} - ${svgInfo.category}`
-      });
-    } catch (error) {
-      toast.error('Failed to copy as React component', {
-        description: `${error}`,
+    const title = svgInfo.title.split(' ').join('');
+    const content = await getSvgContent(svgUrlToCopy);
+    const dataComponent = { code: content, typescript: tsx, name: title };
+    const { data, error } = await getReactComponentCode(dataComponent);
+
+    if (error || !data) {
+      toast.error('Failed to fetch React component', {
+        description: `${error ?? ''}`,
         duration: 5000
       });
-    } finally {
-      isLoading = false;
+      return;
     }
+
+    await clipboard(data);
+
+    toast.success(`Copied as React ${tsx ? 'TSX' : 'JSX'} component`, {
+      description: `${svgInfo.title} - ${svgInfo.category}`
+    });
+
+    isLoading = false;
   };
 </script>
 

src/routes/api/svgs/svgr/+server.ts

@@ -41,7 +41,7 @@ export const POST = async ({ request }: RequestEvent) => {
       { componentName: name }
     );
 
-    return json(jsCode, { status: 200 });
+    return json({ data: jsCode }, { status: 200 });
   } catch (error) {
     return json(
       { error: `Error al transformar el SVG a componente React: ${error}` },

src/utils/clipboard.ts

@@ -0,0 +1,15 @@
+const MIMETYPE = 'text/plain';
+
+export const clipboard = async (content: string) => {
+  try {
+    const clipboardItem = new ClipboardItem({
+      [MIMETYPE]: new Blob([content], { type: MIMETYPE })
+    });
+
+    setTimeout(async () => {
+      await navigator.clipboard.write([clipboardItem]);
+    }, 200);
+  } catch (error) {
+    await navigator.clipboard.writeText(content);
+  }
+};

src/utils/getReactComponentCode.ts

@@ -0,0 +1,23 @@
+interface iComponentCode {
+  code: string;
+  name: string;
+  typescript: boolean;
+}
+
+export const getReactComponentCode = async (
+  params: iComponentCode
+): Promise<{ data?: string; error?: string }> => {
+  try {
+    const getCode = await fetch('/api/svgs/svgr', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(params)
+    });
+    const data = await getCode.json();
+    return data;
+  } catch (error) {
+    return { error: 'An error has ocurred. Try again.' };
+  }
+};

src/utils/getSvgContent.ts

@@ -1,7 +1,5 @@
-export const MIMETYPE = 'text/plain';
-export const getSvgContent = async (url: string | undefined, isSupported: boolean) => {
-    const response = await fetch(url || '');
-    const content = await response.text();
-    const blob = new Blob([content], { type: MIMETYPE });
-    return isSupported ? blob : content;
-};
+export const getSvgContent = async (url: string | undefined) => {
+  const response = await fetch(url || '');
+  const content = await response.text();
+  return content;
+};