feat(core): add viaProxy Utility to rewrite requests to proxy (motion…

…-canvas#338)

packages/core/src/utils/viaProxy.test.ts

@@ -0,0 +1,46 @@
+import {afterEach, describe, expect, test, vi} from 'vitest';
+import {viaProxy} from './viaProxy';
+
+const windowMock = {
+  location: {
+    toString: () => 'https://mockhostname:1234',
+  },
+};
+
+describe('viaProxy()', () => {
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  vi.mock('virtual:proxysettings', () => ({enabled: false}));
+
+  describe('Pass requests as-is if proxying is disabled', () => {
+    test.each([
+      ['Remote Address', 'https://example.com/image'],
+      ['Local Address', 'https://mockhostname:1234/image'],
+      ['Local Address No Host', '/image'],
+    ])('%s', (_, val) => {
+      expect(viaProxy(val, false)).toEqual(val);
+    });
+  });
+
+  describe('Pass requests as-is if proxying is enabled, but requests go to local host', () => {
+    vi.stubGlobal('window', windowMock);
+
+    test.each([
+      ['Local Address', 'https://mockhostname:1234/image'],
+      ['Local Address No Host', '/image'],
+    ])('%s', (_, val) => {
+      expect(viaProxy(val, true)).toEqual(val);
+    });
+  });
+
+  test('Transform request if proxying is enabled and request is remote', () => {
+    vi.stubGlobal('window', windowMock);
+
+    const address = 'https://example.com/some/image_resource.png?with_query';
+    expect(viaProxy(address, true)).toEqual(
+      `/cors-proxy/${encodeURIComponent(address)}`,
+    );
+  });
+});

packages/core/src/utils/viaProxy.ts

@@ -0,0 +1,42 @@
+/**
+ * Utility to redirect remote sources via Proxy
+ *
+ * This utility is used to rewrite a request to be routed through
+ * the Proxy instead.
+ */
+
+/**
+ * Virtual Module provided by the Motion Canvas
+ * Plugin. Returns `false` if proxy is set to `false`, else `true`
+ */
+//@ts-ignore
+import {enabled} from 'virtual:proxysettings';
+
+/**
+ * Helper-Function to route remote requests through a local proxy.
+ *
+ * @example This rewrites a remote url like `https://via.placeholder.com/300.png/09f/fff` into a URI-Component-Encoded string like `/cors-proxy/https%3A%2F%2Fvia.placeholder.com%2F300.png%2F09f%2Ffff`
+ */
+export function viaProxy(url: string, overrideProxySetting?: boolean) {
+  const isEnabled = overrideProxySetting ?? enabled;
+  if (!isEnabled) {
+    // Proxy is disabled, so we just pass as-is.
+    return url;
+  }
+
+  // window.location.hostname is being passed here to ensure that
+  // this does not throw an Error for same-origin requests
+  // e.g. /some/image -> localhost:9000/some/image
+
+  const selfUrl = new URL(window.location.toString());
+  const expandedUrl = new URL(url, selfUrl);
+
+  if (selfUrl.host === expandedUrl.host) {
+    // This is a request to a "local" resource.
+    // No need to rewrite
+    return url;
+  }
+
+  // Everything else is a "remote" resource and requires a rewrite.
+  return `/cors-proxy/${encodeURIComponent(url)}`;
+}

packages/vite-plugin/src/main.ts

@@ -104,6 +104,8 @@ export default ({
   const createHtml = (src: string) => htmlParts[0] + src + htmlParts[1];
 
   const resolvedEditorId = '\0virtual:editor';
+  const proxySettingsKey = 'virtual:proxysettings';
+
   const timeStamps: Record<string, number> = {};
   const outputPath = path.resolve(output);
   const projects: ProjectData[] = [];
@@ -136,6 +138,11 @@ export default ({
     async configResolved(resolvedConfig) {
       viteConfig = resolvedConfig;
     },
+    resolveId(id) {
+      if (id === proxySettingsKey) {
+        return '\0' + proxySettingsKey;
+      }
+    },
     async load(id) {
       const [base, query] = id.split('?');
       const {name, dir} = path.posix.parse(base);
@@ -167,6 +174,12 @@ export default ({
         );
       }
 
+      if (id.startsWith('\0' + proxySettingsKey)) {
+        return source(
+          `export const enabled = "${proxy === false ? 'false' : 'true'}" `,
+        );
+      }
+
       if (query) {
         const params = new URLSearchParams(query);
         if (params.has('scene')) {