fixup! feat(core): add viaProxy Utility to rewrite requests to proxy (m…

…otion-canvas#338)


Apply proposed changes

Co-authored-by: Jacob <64662184+aarthificial@users.noreply.github.com>

packages/vite-plugin/src/proxy-middleware.ts

@@ -1,8 +1,8 @@
 /**
- * This modules provides the proxy located at
- * /motion-canvas-proxy/...
+ * This module provides the proxy located at
+ * /cors-proxy/...
  *
- * It is needed when acessing remote resources.
+ * It is needed when accessing remote resources.
  * Trying to access remote resources works while
  * in preview, but will fail when you try to
  * output the image (= "read" the canvas)
@@ -28,7 +28,8 @@ export interface MotionCanvasCorsProxyPluginOptions {
    *
    * @remarks
    * Catchall on the right side is supported.
-   * Pass an empty Array to allow all types of resources, although this is not recommended.
+   * Pass an empty Array to allow all types of resources, although this is not 
+   * recommended.
    *
    * @default ["image/*", "video/*"]
    */
@@ -37,17 +38,19 @@ export interface MotionCanvasCorsProxyPluginOptions {
    * Set which hosts are allowed
    *
    *
-   * @remarks Note that the host is everything to the left of the first `/`, and to the right of the protocol `https://`
-   * Allowlist is not used by default, although you should consider setting up just the relevant hosts.
-   *
-   * Note that `api.iconify.design` is **always** enabled, as it is used by the Icon-Component.
-   * It gets added by the Middleware internally.
+   * @remarks 
+   * Note that the host is everything to the left of the first `/`, and to the 
+   * right of the protocol `https://`. AllowList is not used by default, 
+   * although you should consider setting up just the relevant hosts.
+
+   * Note that `api.iconify.design` is **always** enabled, as it is used by the 
+   * Icon-Component. It gets added by the Middleware internally.
    */
   allowListHosts?: string[];
 }
 
 // Add Hosts required for core functionality to work
-const predefinedAllowlist = [
+const predefinedAllowList = [
   // Icons
   'api.iconify.design',
 ];
@@ -110,23 +113,25 @@ export function motionCanvasCorsProxy(
 /**
  * Unwrap the destination from the URL.
  *
- * @param url - the entire URL with the `/cors-proxy/` prefix and containing the url-Encoded Path
- * @returns the URL that needs to be called
+ * @remarks 
+ * Throws an Error if the value could not be unwrapped.
+ *
+ * @param url - the entire URL with the `/cors-proxy/` prefix and containing the
+ * url-Encoded Path.
  *
- * @remarks Throws an Error if the value could not be unwrapped.
+ * @returns The URL that needs to be called.
  */
 function extractDestination(url: string): URL {
   const withoutPrefix = url.replace('/cors-proxy/', '');
   const asUrl = new URL(decodeURIComponent(withoutPrefix));
   if (asUrl.protocol !== 'http:' && asUrl.protocol !== 'https:') {
-    throw 'Only supported protocols are http and https';
+    throw new Error('Only supported protocols are http and https');
   }
   return asUrl;
 }
 
 /**
- * A simple Error Helper that will write an Error and close
- * the response
+ * A simple Error Helper that will write an Error and close the response.
  */
 function writeError(
   message: string,
@@ -138,7 +143,8 @@ function writeError(
 }
 
 /**
- * Check if the Proxy is allowed to get the requested resource based on the host
+ * Check if the Proxy is allowed to get the requested resource based on the 
+ * host.
  */
 function isReceivedUrlInAllowedHosts(
   hostname: string,
@@ -156,10 +162,11 @@ function isReceivedUrlInAllowedHosts(
 }
 
 /**
- * Check if the Proxy is allowed to get the requested resource based on the MIME-Type
+ * Check if the Proxy is allowed to get the requested resource based on the 
+ * MIME-Type.
  *
  * @remarks
- * Also handles catch-All Declarations like image/*
+ * Also handles catch-All Declarations like `image/*`.
  */
 function isResultOfAllowedResourceType(
   foundMimeType: string,
@@ -177,12 +184,14 @@ function isResultOfAllowedResourceType(
     .split('/')
     .map(e => e.trim().toLowerCase());
 
-  // Get all Segments where the left Part is identical between foundMimeType and allowedMimeType
+  // Get all Segments where the left Part is identical between foundMimeType and 
+  // allowedMimeType.
   const leftSegmentMatches = allowedMimeTypes.filter(
     e => e.trim().toLowerCase().split('/')[0] === leftSegment,
   );
   if (leftSegmentMatches.length === 0) {
-    return false; // No matches at all, not even catchall - resource is rejected
+    // No matches at all, not even catchall - resource is rejected.
+    return false; 
   }
 
   // This just gets the right part of the MIME Types from the
@@ -191,7 +200,8 @@ function isResultOfAllowedResourceType(
     e => e.split('/')[1],
   );
 
-  // if an exact match, or a catchall is found, the resource is allowed to be proxied.
+  // if an exact match or a catchall is found, the resource is allowed to be 
+  // proxied.
   return rightSegmentOfLeftSegmentMatches.some(
     e => e === '*' || e === rightSegment,
   );