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 = {
+    const content = await getSvgContent(svgUrlToCopy);
-      [MIMETYPE]: getSvgContent(svgUrlToCopy, true)
-    };
-
     if (isInFigma) {
-      const content = (await getSvgContent(svgUrlToCopy, false)) as string;
       figmaCopyToClipboard(content);
     }
 
-    try {
+    await clipboard(content);
-      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);
-    }
 
     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 content = await getSvgContent(svgUrlToCopy);
-      const getCode = await fetch('/api/svgs/svgr', {
+    const dataComponent = { code: content, typescript: tsx, name: title };
-        method: 'POST',
+    const { data, error } = await getReactComponentCode(dataComponent);
-        headers: {
+
-          'Content-Type': 'application/json'
+    if (error || !data) {
-        },
+      toast.error('Failed to fetch React component', {
-        body: JSON.stringify({ code: content, typescript: tsx, name: title })
+        description: `${error ?? ''}`,
+        duration: 5000
       });
-      const data = await getCode.json();
+      return;
-      const clipboardItem = new ClipboardItem({
+    }
-        'text/plain': new Blob([data], { type: 'text/plain' })
+
-      });
+    await clipboard(data);
-      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}`,
-        duration: 5000
-      });
-    } finally {
     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) => {
-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 content;
-    return isSupported ? blob : content;
 };