From 6000cbb6a5f8b12a94d1c40dd2341edc29b64bb6 Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Tue, 9 Apr 2024 23:26:51 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Import=20plugins=20directly=20in?=
 =?UTF-8?q?to=20svgr?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/copySvg.svelte       | 21 +++++++++++++++------
 src/routes/api/svgs/svgr/+server.ts | 22 +++++++++++++++++++++-
 2 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/src/components/copySvg.svelte b/src/components/copySvg.svelte
index 672fd61..26d9695 100644
--- a/src/components/copySvg.svelte
+++ b/src/components/copySvg.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { iSVG } from '@/types/svg';
 
-  import { ClipboardIcon, CopyIcon, X } from 'lucide-svelte';
+  import { ClipboardIcon, CopyIcon, Loader, X } from 'lucide-svelte';
   import { toast } from 'svelte-sonner';
   import * as Popover from '@/ui/popover';
 
@@ -19,6 +19,7 @@
   export let isWordmarkSvg = false;
   export let svgInfo: iSVG;
   let optionsOpen = false;
+  let isLoading = false;
 
   const getSvgUrl = () => {
     let svgUrlToCopy;
@@ -85,20 +86,20 @@
       : svgInfo.category;
 
     if (isInFigma) {
-      toast.success('Ready to paste in Figma!', {
+      toast.success('Ready to paste in Figma', {
         description: `${svgInfo.title} - ${category}`
       });
       return;
     }
 
     if (isWordmarkSvg) {
-      toast.success('Copied wordmark SVG to clipboard!', {
+      toast.success('Copied wordmark SVG to clipboard', {
         description: `${svgInfo.title} - ${category}`
       });
       return;
     }
 
-    toast.success('Copied to clipboard!', {
+    toast.success('Copied to clipboard', {
       description: `${svgInfo.title} - ${category}`
     });
   };
@@ -108,6 +109,8 @@
     const svgUrlToCopy = getSvgUrl();
     optionsOpen = false;
 
+    isLoading = true;
+
     try {
       const title = svgInfo.title.split(' ').join('');
       const content = (await getSvgContent(svgUrlToCopy, false)) as string;
@@ -120,14 +123,16 @@
       });
       const data = await getCode.json();
       await navigator.clipboard.writeText(data);
-      toast.success('Copied as React component', {
-        description: `${svgInfo.title}`
+      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>
@@ -138,6 +143,8 @@
   >
     {#if optionsOpen}
       <X size={iconSize} strokeWidth={iconStroke} />
+    {:else if isLoading}
+      <Loader size={iconSize} strokeWidth={iconStroke} class="animate-spin" />
     {:else}
       <CopyIcon size={iconSize} strokeWidth={iconStroke} />
     {/if}
@@ -154,6 +161,7 @@
     <button
       class={cn(buttonStyles, 'rounded-md w-full')}
       title="Copy as React component"
+      disabled={isLoading}
       on:click={() => copyToClipboardAsReactComponent(true)}
     >
       <ReactIcon iconSize={18} color="#2563eb" />
@@ -162,6 +170,7 @@
     <button
       class={cn(buttonStyles, 'rounded-md w-full')}
       title="Copy as React component"
+      disabled={isLoading}
       on:click={() => copyToClipboardAsReactComponent(false)}
     >
       <ReactIcon iconSize={18} color="#60a5fa" />
diff --git a/src/routes/api/svgs/svgr/+server.ts b/src/routes/api/svgs/svgr/+server.ts
index 703c4ad..bb59ab1 100644
--- a/src/routes/api/svgs/svgr/+server.ts
+++ b/src/routes/api/svgs/svgr/+server.ts
@@ -3,7 +3,27 @@ import type { RequestEvent } from '../$types';
 import { transform } from '@svgr/core';
 import { json } from '@sveltejs/kit';
 
+import { ratelimit } from '@/server/redis';
+
+// SVGR Plugins:
+import svgrJSX from '@svgr/plugin-jsx';
+
 export const POST = async ({ request }: RequestEvent) => {
+  const ip = request.headers.get('x-forwarded-for') ?? '';
+  const { success, reset } = await ratelimit.limit(ip);
+
+  // Error 429 | If rate limit is exceeded:
+  if (!success) {
+    const now = Date.now();
+    const retryAfter = Math.floor((reset - now) / 500);
+    return new Response('Too Many Requests', {
+      status: 429,
+      headers: {
+        'Retry-After': retryAfter.toString()
+      }
+    });
+  }
+
   try {
     const body = await request.json();
 
@@ -14,7 +34,7 @@ export const POST = async ({ request }: RequestEvent) => {
     const jsCode = await transform(
       svgCode,
       {
-        plugins: ['@svgr/plugin-jsx'],
+        plugins: [svgrJSX],
         icon: true,
         typescript: typescript
       },