@vladimish/motion-canvas-2-vite-plugin 3.17.2

package/lib/index.d.ts

@@ -0,0 +1,3 @@
+import motionCanvas from './main';
+export default motionCanvas;
+export * from './plugins';

package/lib/index.js

@@ -0,0 +1,23 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const main_1 = __importDefault(require("./main"));
+exports.default = main_1.default;
+__exportStar(require("./plugins"), exports);
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,kDAAkC;AAElC,kBAAe,cAAY,CAAC;AAC5B,4CAA0B"}

package/lib/main.d.ts

@@ -0,0 +1,82 @@
+import type { Plugin } from 'vite';
+import { CorsProxyPluginConfig } from './partials';
+export interface MotionCanvasPluginConfig {
+    /**
+     * The import path of the project file or an array of paths.
+     * Also supports globs.
+     *
+     * @remarks
+     * Each file must contain a default export exposing an instance of the
+     * {@link Project} class.
+     *
+     * @example
+     * ```ts
+     * motionCanvas({
+     *   project: [
+     *     './src/firstProject.ts',
+     *     './src/secondProject.ts',
+     *   ]
+     * })
+     * ```
+     *
+     * @defaultValue './src/project.ts'
+     */
+    project?: string | string[];
+    /**
+     * A directory path to which the animation will be rendered.
+     *
+     * @defaultValue './output'
+     */
+    output?: string;
+    /**
+     * Defines which assets should be buffered before being sent to the browser.
+     *
+     * @remarks
+     * Streaming larger assets directly from the drive may cause issues with other
+     * applications. For instance, if an audio file is being used in the project,
+     * Adobe Audition will perceive it as "being used by another application"
+     * and refuse to override it.
+     *
+     * Buffered assets are first loaded to the memory and then streamed from
+     * there. This leaves the original files open for modification with hot module
+     * replacement still working.
+     *
+     * @defaultValue /^$/
+     */
+    bufferedAssets?: RegExp | false;
+    /**
+     * The import path of the editor package.
+     *
+     * @remarks
+     * This path will be resolved using Node.js module resolution rules.
+     * It should lead to a directory containing the following files:
+     * - `editor.html` - The HTML template for the editor.
+     * - `styles.css` - The editor styles.
+     * - `main.js` - A module exporting necessary factory functions.
+     *
+     * `main.js` should export the following functions:
+     * - `editor` - Receives the project factory as its first argument and creates
+     *              the user interface.
+     * - `index` - Receives a list of all projects as its first argument and
+     *             creates the initial page for selecting a project.
+     *
+     * @defaultValue '\@vladimish/motion-canvas-2-ui'
+     */
+    editor?: string;
+    /**
+     * Configuration of the Proxy used for remote sources
+     *
+     * @remarks
+     * This passes configuration to Motion Canvas' proxy.
+     * Note that the proxy is disabled by default.
+     * You can either pass `true` and a config object
+     * to enable it.
+     **/
+    proxy?: boolean | CorsProxyPluginConfig;
+    /**
+     * Build the project to run in the editor.
+     */
+    buildForEditor?: boolean;
+}
+declare const _default: ({ project, output, bufferedAssets, editor, proxy, buildForEditor, }?: MotionCanvasPluginConfig) => Plugin[];
+export default _default;

package/lib/main.js

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const path_1 = __importDefault(require("path"));
+const partials_1 = require("./partials");
+const plugins_1 = require("./plugins");
+const utils_1 = require("./utils");
+exports.default = ({ project = './src/project.ts', output = './output', bufferedAssets = /^$/, editor = '@vladimish/motion-canvas-2-ui', proxy, buildForEditor, } = {}) => {
+    const plugins = [];
+    let config = {
+        output: path_1.default.resolve(output),
+        projects: (0, utils_1.getProjects)(project),
+    };
+    return [
+        {
+            name: 'motion-canvas',
+            async configResolved(resolvedConfig) {
+                plugins.push(...resolvedConfig.plugins
+                    .filter(plugins_1.isPlugin)
+                    .map(plugin => plugin[plugins_1.PLUGIN_OPTIONS]));
+                for (const plugin of plugins) {
+                    const newConfig = await plugin.config?.(config);
+                    if (newConfig) {
+                        config = { ...config, ...newConfig };
+                    }
+                }
+            },
+        },
+        (0, partials_1.metaPlugin)(),
+        (0, partials_1.settingsPlugin)(),
+        (0, partials_1.scenesPlugin)(),
+        (0, partials_1.exporterPlugin)({ outputPath: config.output }),
+        (0, partials_1.audioPlugin)(),
+        (0, partials_1.editorPlugin)({ editor, projects: config.projects }),
+        (0, partials_1.projectsPlugin)({ projects: config.projects, plugins, buildForEditor }),
+        (0, partials_1.assetsPlugin)({ bufferedAssets }),
+        (0, partials_1.webglPlugin)(),
+        (0, partials_1.corsProxyPlugin)(proxy),
+    ];
+};
+//# sourceMappingURL=main.js.map

package/lib/main.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.js","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":";;;;;AAAA,gDAAwB;AAExB,yCAYoB;AACpB,uCAAgF;AAChF,mCAAoC;AAkFpC,kBAAe,CAAC,EACd,OAAO,GAAG,kBAAkB,EAC5B,MAAM,GAAG,UAAU,EACnB,cAAc,GAAG,IAAI,EACrB,MAAM,GAAG,+BAA+B,EACxC,KAAK,EACL,cAAc,MACc,EAAE,EAAY,EAAE;IAC5C,MAAM,OAAO,GAAoB,EAAE,CAAC;IACpC,IAAI,MAAM,GAAiB;QACzB,MAAM,EAAE,cAAI,CAAC,OAAO,CAAC,MAAM,CAAC;QAC5B,QAAQ,EAAE,IAAA,mBAAW,EAAC,OAAO,CAAC;KAC/B,CAAC;IAEF,OAAO;QACL;YACE,IAAI,EAAE,eAAe;YACrB,KAAK,CAAC,cAAc,CAAC,cAAc;gBACjC,OAAO,CAAC,IAAI,CACV,GAAG,cAAc,CAAC,OAAO;qBACtB,MAAM,CAAC,kBAAQ,CAAC;qBAChB,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,wBAAc,CAAC,CAAC,CACzC,CAAC;gBAEF,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE,CAAC;oBAC7B,MAAM,SAAS,GAAG,MAAM,MAAM,CAAC,MAAM,EAAE,CAAC,MAAM,CAAC,CAAC;oBAChD,IAAI,SAAS,EAAE,CAAC;wBACd,MAAM,GAAG,EAAC,GAAG,MAAM,EAAE,GAAG,SAAS,EAAC,CAAC;oBACrC,CAAC;gBACH,CAAC;YACH,CAAC;SACF;QACD,IAAA,qBAAU,GAAE;QACZ,IAAA,yBAAc,GAAE;QAChB,IAAA,uBAAY,GAAE;QACd,IAAA,yBAAc,EAAC,EAAC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAC,CAAC;QAC3C,IAAA,sBAAW,GAAE;QACb,IAAA,uBAAY,EAAC,EAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,QAAQ,EAAC,CAAC;QACjD,IAAA,yBAAc,EAAC,EAAC,QAAQ,EAAE,MAAM,CAAC,QAAQ,EAAE,OAAO,EAAE,cAAc,EAAC,CAAC;QACpE,IAAA,uBAAY,EAAC,EAAC,cAAc,EAAC,CAAC;QAC9B,IAAA,sBAAW,GAAE;QACb,IAAA,0BAAe,EAAC,KAAK,CAAC;KACvB,CAAC;AACJ,CAAC,CAAC"}

package/lib/openInExplorer.d.ts

@@ -0,0 +1 @@
+export declare function openInExplorer(file: string): void;

package/lib/openInExplorer.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.openInExplorer = void 0;
+const child_process_1 = require("child_process");
+const os_1 = require("os");
+function openInExplorer(file) {
+    let command = null;
+    let args = [file];
+    const os = (0, os_1.platform)();
+    switch (os) {
+        case 'win32':
+            command = 'explorer';
+            break;
+        case 'linux':
+            if (isRunningOnWSL()) {
+                command = 'bash';
+                args = ['-c', `cd ${file} && explorer.exe .`];
+            }
+            else {
+                command = 'xdg-open';
+            }
+            break;
+        case 'darwin':
+            command = 'open';
+            break;
+    }
+    if (command) {
+        (0, child_process_1.spawn)(command, args, { detached: true }).unref();
+    }
+    else {
+        console.warn(`Unsupported OS: ${os}`);
+    }
+}
+exports.openInExplorer = openInExplorer;
+function isRunningOnWSL() {
+    try {
+        const uname = (0, child_process_1.execSync)('uname -a').toString().toLowerCase();
+        return uname.includes('microsoft');
+    }
+    catch (error) {
+        console.error(`exec error: ${error}`);
+        return false;
+    }
+}
+//# sourceMappingURL=openInExplorer.js.map

package/lib/openInExplorer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"openInExplorer.js","sourceRoot":"","sources":["../src/openInExplorer.ts"],"names":[],"mappings":";;;AAAA,iDAA8C;AAC9C,2BAA4B;AAE5B,SAAgB,cAAc,CAAC,IAAY;IACzC,IAAI,OAAO,GAAkB,IAAI,CAAC;IAClC,IAAI,IAAI,GAAG,CAAC,IAAI,CAAC,CAAC;IAClB,MAAM,EAAE,GAAG,IAAA,aAAQ,GAAE,CAAC;IAEtB,QAAQ,EAAE,EAAE,CAAC;QACX,KAAK,OAAO;YACV,OAAO,GAAG,UAAU,CAAC;YACrB,MAAM;QACR,KAAK,OAAO;YACV,IAAI,cAAc,EAAE,EAAE,CAAC;gBACrB,OAAO,GAAG,MAAM,CAAC;gBACjB,IAAI,GAAG,CAAC,IAAI,EAAE,MAAM,IAAI,oBAAoB,CAAC,CAAC;YAChD,CAAC;iBAAM,CAAC;gBACN,OAAO,GAAG,UAAU,CAAC;YACvB,CAAC;YACD,MAAM;QACR,KAAK,QAAQ;YACX,OAAO,GAAG,MAAM,CAAC;YACjB,MAAM;IACV,CAAC;IAED,IAAI,OAAO,EAAE,CAAC;QACZ,IAAA,qBAAK,EAAC,OAAO,EAAE,IAAI,EAAE,EAAC,QAAQ,EAAE,IAAI,EAAC,CAAC,CAAC,KAAK,EAAE,CAAC;IACjD,CAAC;SAAM,CAAC;QACN,OAAO,CAAC,IAAI,CAAC,mBAAmB,EAAE,EAAE,CAAC,CAAC;IACxC,CAAC;AACH,CAAC;AA3BD,wCA2BC;AAED,SAAS,cAAc;IACrB,IAAI,CAAC;QACH,MAAM,KAAK,GAAG,IAAA,wBAAQ,EAAC,UAAU,CAAC,CAAC,QAAQ,EAAE,CAAC,WAAW,EAAE,CAAC;QAC5D,OAAO,KAAK,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;IACrC,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,OAAO,CAAC,KAAK,CAAC,eAAe,KAAK,EAAE,CAAC,CAAC;QACtC,OAAO,KAAK,CAAC;IACf,CAAC;AACH,CAAC"}

package/lib/partials/assets.d.ts

@@ -0,0 +1,6 @@
+import { Plugin } from 'vite';
+interface AssetsPluginConfig {
+    bufferedAssets: RegExp | false;
+}
+export declare function assetsPlugin({ bufferedAssets }: AssetsPluginConfig): Plugin;
+export {};

package/lib/partials/assets.js

@@ -0,0 +1,51 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.assetsPlugin = void 0;
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+const stream_1 = require("stream");
+const AUDIO_EXTENSION_REGEX = /\.(mp3|wav|ogg|aac|flac|webm|m4a)(?:$|\?)/;
+const AUDIO_HMR_DELAY = 1000;
+function assetsPlugin({ bufferedAssets }) {
+    let config;
+    return {
+        name: 'motion-canvas:assets',
+        configResolved(resolvedConfig) {
+            config = resolvedConfig;
+        },
+        configureServer(server) {
+            server.middlewares.use((req, res, next) => {
+                if (req.url && bufferedAssets && bufferedAssets.test(req.url)) {
+                    const file = fs_1.default.readFileSync(path_1.default.resolve(config.root, req.url.slice(1)));
+                    stream_1.Readable.from(file).pipe(res);
+                    return;
+                }
+                next();
+            });
+        },
+        async handleHotUpdate(ctx) {
+            const urls = [];
+            const modules = [];
+            for (const module of ctx.modules) {
+                urls.push(module.url);
+                if (!AUDIO_EXTENSION_REGEX.test(module.url)) {
+                    modules.push(module);
+                }
+                else {
+                    await new Promise(resolve => {
+                        setTimeout(resolve, AUDIO_HMR_DELAY);
+                    });
+                }
+            }
+            if (urls.length > 0) {
+                ctx.server.ws.send('motion-canvas:assets', { urls });
+            }
+            return modules;
+        },
+    };
+}
+exports.assetsPlugin = assetsPlugin;
+//# sourceMappingURL=assets.js.map

package/lib/partials/assets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"assets.js","sourceRoot":"","sources":["../../src/partials/assets.ts"],"names":[],"mappings":";;;;;;AAAA,4CAAoB;AACpB,gDAAwB;AACxB,mCAAgC;AAGhC,MAAM,qBAAqB,GAAG,2CAA2C,CAAC;AAC1E,MAAM,eAAe,GAAG,IAAI,CAAC;AAM7B,SAAgB,YAAY,CAAC,EAAC,cAAc,EAAqB;IAC/D,IAAI,MAAsB,CAAC;IAC3B,OAAO;QACL,IAAI,EAAE,sBAAsB;QAE5B,cAAc,CAAC,cAAc;YAC3B,MAAM,GAAG,cAAc,CAAC;QAC1B,CAAC;QAED,eAAe,CAAC,MAAM;YACpB,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,EAAE;gBACxC,IAAI,GAAG,CAAC,GAAG,IAAI,cAAc,IAAI,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;oBAC9D,MAAM,IAAI,GAAG,YAAE,CAAC,YAAY,CAC1B,cAAI,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,EAAE,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAC5C,CAAC;oBACF,iBAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;oBAC9B,OAAO;gBACT,CAAC;gBAED,IAAI,EAAE,CAAC;YACT,CAAC,CAAC,CAAC;QACL,CAAC;QAED,KAAK,CAAC,eAAe,CAAC,GAAG;YACvB,MAAM,IAAI,GAAG,EAAE,CAAC;YAChB,MAAM,OAAO,GAAiB,EAAE,CAAC;YAEjC,KAAK,MAAM,MAAM,IAAI,GAAG,CAAC,OAAO,EAAE,CAAC;gBACjC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;gBACtB,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC;oBAC5C,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;gBACvB,CAAC;qBAAM,CAAC;oBACN,MAAM,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE;wBAC1B,UAAU,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC;oBACvC,CAAC,CAAC,CAAC;gBACL,CAAC;YACH,CAAC;YAED,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBACpB,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,EAAC,IAAI,EAAC,CAAC,CAAC;YACrD,CAAC;YAED,OAAO,OAAO,CAAC;QACjB,CAAC;KACF,CAAC;AACJ,CAAC;AA7CD,oCA6CC"}

package/lib/partials/audio.d.ts

@@ -0,0 +1,9 @@
+import { Plugin } from 'vite';
+/**
+ * Handles audio recorded or imported from within the editor.
+ *
+ * @remarks
+ * Audio blobs sent over the `motion-canvas:save-audio` event are written to an
+ * `audio` directory next to the project and served back under `/audio`.
+ */
+export declare function audioPlugin(): Plugin;

package/lib/partials/audio.js

@@ -0,0 +1,104 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.audioPlugin = void 0;
+const fs_1 = __importDefault(require("fs"));
+const mime_types_1 = __importDefault(require("mime-types"));
+const path_1 = __importDefault(require("path"));
+/**
+ * Maps the MIME types produced by `MediaRecorder` and common file inputs to the
+ * file extensions Motion Canvas understands.
+ */
+const AUDIO_EXTENSIONS = new Map([
+    ['audio/webm', 'webm'],
+    ['audio/ogg', 'ogg'],
+    ['audio/wav', 'wav'],
+    ['audio/wave', 'wav'],
+    ['audio/x-wav', 'wav'],
+    ['audio/mpeg', 'mp3'],
+    ['audio/mp3', 'mp3'],
+    ['audio/mp4', 'm4a'],
+    ['audio/aac', 'm4a'],
+    ['audio/x-m4a', 'm4a'],
+    ['audio/flac', 'flac'],
+]);
+/**
+ * Handles audio recorded or imported from within the editor.
+ *
+ * @remarks
+ * Audio blobs sent over the `motion-canvas:save-audio` event are written to an
+ * `audio` directory next to the project and served back under `/audio`.
+ */
+function audioPlugin() {
+    let audioDir;
+    return {
+        name: 'motion-canvas:audio',
+        configResolved(resolvedConfig) {
+            audioDir = path_1.default.resolve(resolvedConfig.root, 'audio');
+        },
+        configureServer(server) {
+            // Serve previously saved audio files. A dedicated handler with range
+            // support keeps audio seeking responsive in the preview.
+            server.middlewares.use((req, res, next) => {
+                if (!req.url?.startsWith('/audio/')) {
+                    next();
+                    return;
+                }
+                const relative = decodeURIComponent(req.url.slice('/audio/'.length).split('?')[0]);
+                const filePath = path_1.default.join(audioDir, relative);
+                if (!filePath.startsWith(audioDir) || !fs_1.default.existsSync(filePath)) {
+                    next();
+                    return;
+                }
+                const stat = fs_1.default.statSync(filePath);
+                res.setHeader('Content-Type', mime_types_1.default.lookup(filePath) || 'application/octet-stream');
+                res.setHeader('Accept-Ranges', 'bytes');
+                const range = req.headers.range;
+                const match = range && /bytes=(\d*)-(\d*)/.exec(range);
+                if (match) {
+                    const start = match[1] ? parseInt(match[1], 10) : 0;
+                    const end = match[2] ? parseInt(match[2], 10) : stat.size - 1;
+                    res.statusCode = 206;
+                    res.setHeader('Content-Range', `bytes ${start}-${end}/${stat.size}`);
+                    res.setHeader('Content-Length', end - start + 1);
+                    fs_1.default.createReadStream(filePath, { start, end }).pipe(res);
+                }
+                else {
+                    res.setHeader('Content-Length', stat.size);
+                    fs_1.default.createReadStream(filePath).pipe(res);
+                }
+            });
+            server.ws.on('motion-canvas:save-audio', async ({ id, data, mimeType, name }, client) => {
+                const baseMime = (mimeType ?? '').split(';')[0].trim().toLowerCase();
+                const extension = AUDIO_EXTENSIONS.get(baseMime) ||
+                    mime_types_1.default.extension(baseMime) ||
+                    'webm';
+                const safeName = path_1.default
+                    .basename(`${name ?? 'audio'}`)
+                    .replace(/[^a-zA-Z0-9-_]/g, '-') || 'audio';
+                const fileName = `${safeName}.${extension}`;
+                if (!fs_1.default.existsSync(audioDir)) {
+                    fs_1.default.mkdirSync(audioDir, { recursive: true });
+                }
+                const base64Data = data.slice(data.indexOf(',') + 1);
+                await writeBase64(path_1.default.join(audioDir, fileName), base64Data);
+                client.send('motion-canvas:save-audio-ack', {
+                    id,
+                    url: `/audio/${fileName}`,
+                });
+            });
+        },
+    };
+}
+exports.audioPlugin = audioPlugin;
+function writeBase64(filePath, base64) {
+    return new Promise((resolve, reject) => {
+        fs_1.default.createWriteStream(filePath)
+            .on('finish', resolve)
+            .on('error', reject)
+            .end(Buffer.from(base64, 'base64'));
+    });
+}
+//# sourceMappingURL=audio.js.map

package/lib/partials/audio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"audio.js","sourceRoot":"","sources":["../../src/partials/audio.ts"],"names":[],"mappings":"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"}

package/lib/partials/corsProxy.d.ts

@@ -0,0 +1,43 @@
+import { Plugin } from 'vite';
+/**
+ * Configuration used by the Proxy plugin
+ */
+export interface CorsProxyPluginConfig {
+    /**
+     * Set which types of resources are allowed by default.
+     *
+     * @remarks
+     * Catchall on the right side is supported.
+     * Pass an empty Array to allow all types of resources, although this is not
+     * recommended.
+     *
+     * @defaultValue ["image/*", "video/*"]
+     */
+    allowedMimeTypes?: string[];
+    /**
+     * 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.
+     */
+    allowListHosts?: string[];
+}
+/**
+ * This module provides the proxy located at
+ * /cors-proxy/...
+ *
+ * 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)
+ *
+ * See https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image
+ * for reasons
+ *
+ * Using the proxy circumvents CORS-issues because
+ * this way all remote resources are served from the
+ * same host as the main app.
+ */
+export declare function corsProxyPlugin(config?: CorsProxyPluginConfig | boolean): Plugin;

package/lib/partials/corsProxy.js

@@ -0,0 +1,219 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.corsProxyPlugin = void 0;
+const follow_redirects_1 = __importDefault(require("follow-redirects"));
+/**
+ * This module provides the proxy located at
+ * /cors-proxy/...
+ *
+ * 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)
+ *
+ * See https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image
+ * for reasons
+ *
+ * Using the proxy circumvents CORS-issues because
+ * this way all remote resources are served from the
+ * same host as the main app.
+ */
+function corsProxyPlugin(config) {
+    setupEnvVarsForProxy(config);
+    return {
+        name: 'motion-canvas:cors-proxy',
+        configureServer(server) {
+            if (config !== false && config !== undefined) {
+                motionCanvasCorsProxy(server.middlewares, config === true ? {} : config);
+            }
+        },
+    };
+}
+exports.corsProxyPlugin = corsProxyPlugin;
+function setupEnvVarsForProxy(config) {
+    // Define Keys for Env Var
+    const prefix = 'VITE_MC_PROXY_';
+    const isEnabledKey = prefix + 'ENABLED';
+    const allowList = prefix + 'ALLOW_LIST';
+    if (config === true) {
+        config = {}; // Use Default values
+    }
+    process.env[isEnabledKey] = String(!!config); // 'true' or 'false'
+    if (config) {
+        // These values are only configured if the Proxy is enabled
+        // You cannot access them via import.meta.env if the Proxy
+        // is set to false
+        process.env[allowList] = JSON.stringify(config.allowListHosts ?? []);
+    }
+}
+function motionCanvasCorsProxy(middleware, config) {
+    // Set the default config if no config was provided
+    config.allowedMimeTypes ??= ['image/*', 'video/*'];
+    config.allowListHosts ??= [];
+    // Check the Mime Types to have a correct structure (left/right)
+    // not having them in the correct format would crash the Middleware
+    // further down below
+    if ((config.allowedMimeTypes ?? []).some(e => e.split('/').length !== 2)) {
+        throw new Error("Invalid config for Proxy:\nAll Entries must have the following format:\n 'left/right' where left may be '*'");
+    }
+    middleware.use((req, res, next) => {
+        if (!req.url || !req.url.startsWith('/cors-proxy/')) {
+            // url does not start with /cors-proxy/, so this
+            // middleware does not care about it
+            return next();
+        }
+        // For now, only allow GET Requests
+        if (req.method !== 'GET') {
+            return writeError('Only GET Requests are allowed', res, 405);
+        }
+        let sourceUrl;
+        try {
+            sourceUrl = extractDestination(req.url);
+        }
+        catch (err) {
+            return writeError(err, res);
+        }
+        if (!isReceivedUrlInAllowedHosts(sourceUrl.hostname, config.allowListHosts)) {
+            return writeError(`Blocked by Proxy: ${sourceUrl.hostname} is not on Hosts Allowlist`, res);
+        }
+        // Get the resource, do some checks. Throws an Error
+        // if the checks fail. The catch then writes an Error
+        return tryGetResource(res, sourceUrl, config).catch(error => {
+            writeError(error, res);
+        });
+    });
+}
+/**
+ * Unwrap the destination from the URL.
+ *
+ * @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.
+ *
+ * @returns The URL that needs to be called.
+ */
+function extractDestination(url) {
+    const withoutPrefix = url.replace('/cors-proxy/', '');
+    const asUrl = new URL(decodeURIComponent(withoutPrefix));
+    if (asUrl.protocol !== 'http:' && asUrl.protocol !== '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.
+ */
+function writeError(message, res, statusCode = 400) {
+    res.writeHead(statusCode, message);
+    res.end();
+}
+/**
+ * Check if the Proxy is allowed to get the requested resource based on the
+ * host.
+ */
+function isReceivedUrlInAllowedHosts(hostname, allowListHosts) {
+    if (!allowListHosts || allowListHosts.length === 0) {
+        // if the allowListHosts is just the predefinedAllowlist, the user has not
+        // set any additional hosts. In this case, allow any hostname
+        return true;
+    }
+    // Check if the hostname is any of the values set in allowListHosts
+    return allowListHosts.some(e => e.toLowerCase().trim() === hostname.toLowerCase().trim());
+}
+/**
+ * Check if the Proxy is allowed to get the requested resource based on the
+ * MIME-Type.
+ *
+ * @remarks
+ * Also handles catch-All Declarations like `image/*`.
+ */
+function isResultOfAllowedResourceType(foundMimeType, allowedMimeTypes) {
+    if (!allowedMimeTypes || allowedMimeTypes.length === 0) {
+        return true; // no filters set
+    }
+    if (foundMimeType.split('/').length !== 2) {
+        return false; // invalid mime structure
+    }
+    const [leftSegment, rightSegment] = foundMimeType
+        .split('/')
+        .map(e => e.trim().toLowerCase());
+    // 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) {
+        // No matches at all, not even catchall - resource is rejected.
+        return false;
+    }
+    // This just gets the right part of the MIME Types from the
+    // configured allowList, e.g. "image/png" -> png
+    const rightSegmentOfLeftSegmentMatches = leftSegmentMatches.map(e => e.split('/')[1]);
+    // if an exact match or a catchall is found, the resource is allowed to be
+    // proxied.
+    return rightSegmentOfLeftSegmentMatches.some(e => e === '*' || e === rightSegment);
+}
+/**
+ * Requests a remote resource with the help of axios
+ * May throw a string in case of a bad mime-type or missing headers
+ */
+async function tryGetResource(res, sourceUrl, config) {
+    // Turn this callback into a Promise to avoid additional nesting
+    const result = await new Promise((res, rej) => {
+        try {
+            // We check what protocol was used and decide if we use http or https
+            const request = (sourceUrl.protocol.startsWith('https')
+                ? follow_redirects_1.default.https
+                : follow_redirects_1.default.http).get(sourceUrl, data => {
+                res(data);
+            });
+            request.on('error', (err) => {
+                if (err.code && err.code === 'ENOTFOUND') {
+                    // This is a bit hacky, but this basically returns as a
+                    // 404 instead of crashing the Node Server with ENOTFOUND
+                    res({ statusCode: 404 });
+                }
+                else {
+                    rej(err);
+                }
+            });
+        }
+        catch (err) {
+            rej(err);
+        }
+    });
+    if (!result.statusCode || result.statusCode >= 300) {
+        throw 'Unexpected Status: ' + (result.statusCode ?? 'NO_STATUS');
+    }
+    const contentType = result.headers['content-type'];
+    const contentLength = result.headers['content-length'];
+    if (!contentType) {
+        throw 'Proxied Response does not contain a Content Type';
+    }
+    if (!contentLength) {
+        throw 'Proxied Response does not contain a Content Length';
+    }
+    if (!isResultOfAllowedResourceType(contentType.toString(), config.allowedMimeTypes ?? [])) {
+        throw 'Proxied response has blocked content-type: ' + contentType;
+    }
+    // Prepare Response
+    for (const key in result.headers) {
+        const header = result.headers[key];
+        if (header === undefined) {
+            console.warn('Proxy: Received Header is empty. Skipping…');
+            continue;
+        }
+        res.setHeader(key, header);
+    }
+    res.addListener('error', () => {
+        console.log('Proxy: Connection Reset');
+    });
+    res.setHeader('x-proxy-destination', sourceUrl.toString());
+    // Don't store on the server, just immediately pass on the
+    // received chunks
+    result.pipe(res);
+}
+//# sourceMappingURL=corsProxy.js.map