@jbrowse/core 2.3.3 → 2.4.0

package/PluginLoader.js

@@ -3,8 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getWindowPath = exports.isCJSPluginDefinition = exports.isESMPluginDefinition = exports.isUMDPluginDefinition = void 0;
+exports.isCJSPluginDefinition = exports.isESMPluginDefinition = exports.isUMDPluginDefinition = void 0;
 const load_script2_1 = __importDefault(require("load-script2"));
+// locals
+const Plugin_1 = __importDefault(require("./Plugin"));
 const ReExports_1 = __importDefault(require("./ReExports"));
 const util_1 = require("./util");
 function isUMDPluginDefinition(def) {
@@ -23,22 +25,8 @@ function isCJSPluginDefinition(def) {
     return def.cjsUrl !== undefined;
 }
 exports.isCJSPluginDefinition = isCJSPluginDefinition;
-function getWindowPath(windowHref) {
-    return window.location.href + windowHref;
-}
-exports.getWindowPath = getWindowPath;
-function getGlobalObject() {
-    // Based on window-or-global
-    // https://github.com/purposeindustries/window-or-global/blob/322abc71de0010c9e5d9d0729df40959e1ef8775/lib/index.js
-    return (
-    // eslint-disable-next-line no-restricted-globals
-    (typeof self === 'object' && self.self === self && self) ||
-        (typeof global === 'object' && global.global === global && global) ||
-        // @ts-ignore
-        this);
-}
-function isInWebWorker(globalObject) {
-    return Boolean('WorkerGlobalScope' in globalObject);
+function isInWebWorker() {
+    return Boolean('WorkerGlobalScope' in globalThis);
 }
 class PluginLoader {
     constructor(defs = [], args) {
@@ -48,20 +36,19 @@ class PluginLoader {
         this.definitions = JSON.parse(JSON.stringify(defs));
     }
     async loadScript(scriptUrl) {
-        const globalObject = getGlobalObject();
-        if (!isInWebWorker(globalObject)) {
+        if (!isInWebWorker()) {
             return (0, load_script2_1.default)(scriptUrl);
         }
         // @ts-ignore
-        if (globalObject === null || globalObject === void 0 ? void 0 : globalObject.importScripts) {
+        if (globalThis === null || globalThis === void 0 ? void 0 : globalThis.importScripts) {
             // @ts-ignore
-            await globalObject.importScripts(scriptUrl);
+            await globalThis.importScripts(scriptUrl);
             return;
         }
         throw new Error('cannot figure out how to load external JS scripts in this environment');
     }
-    async loadCJSPlugin(def, windowHref) {
-        const parsedUrl = new URL(def.cjsUrl, windowHref);
+    async loadCJSPlugin(def, baseUri) {
+        const parsedUrl = new URL(def.cjsUrl, baseUri);
         if (parsedUrl.protocol !== 'http:' && parsedUrl.protocol !== 'https:') {
             throw new Error(`Cannot load plugins using protocol "${parsedUrl.protocol}"`);
         }
@@ -70,50 +57,57 @@ class PluginLoader {
         }
         return this.fetchCJS(parsedUrl.href);
     }
-    async loadESMPlugin(def, windowHref) {
-        var _a;
+    async loadESMPlugin(def, baseUri) {
         const parsedUrl = 'esmUrl' in def
-            ? new URL(def.esmUrl, windowHref)
+            ? new URL(def.esmUrl, baseUri)
             : new URL(def.esmLoc.uri, def.esmLoc.baseUri);
         if (parsedUrl.protocol !== 'http:' && parsedUrl.protocol !== 'https:') {
             throw new Error(`cannot load plugins using protocol "${parsedUrl.protocol}"`);
         }
-        const plugin = (await ((_a = this.fetchESM) === null || _a === void 0 ? void 0 : _a.call(this, parsedUrl.href)));
+        if (!this.fetchESM) {
+            throw new Error(`No ESM fetcher installed`);
+        }
+        const plugin = await this.fetchESM(parsedUrl.href);
         if (!plugin) {
             throw new Error(`Could not load ESM plugin: ${parsedUrl}`);
         }
         return plugin;
     }
-    async loadUMDPlugin(def, windowHref) {
+    async loadUMDPlugin(def, baseUri) {
         const parsedUrl = 'url' in def
-            ? new URL(def.url, windowHref)
+            ? new URL(def.url, baseUri)
             : 'umdUrl' in def
-                ? new URL(def.umdUrl, windowHref)
+                ? new URL(def.umdUrl, baseUri)
                 : new URL(def.umdLoc.uri, def.umdLoc.baseUri);
         if (parsedUrl.protocol !== 'http:' && parsedUrl.protocol !== 'https:') {
             throw new Error(`cannot load plugins using protocol "${parsedUrl.protocol}"`);
         }
-        await this.loadScript(parsedUrl.href);
         const moduleName = def.name;
         const umdName = `JBrowsePlugin${moduleName}`;
-        const globalObject = getGlobalObject();
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const plugin = globalObject[umdName];
+        if (typeof jest !== 'undefined') {
+            // @ts-ignore
+            globalThis[umdName] = { default: Plugin_1.default };
+        }
+        else {
+            await this.loadScript(parsedUrl.href);
+        }
+        // @ts-ignore
+        const plugin = globalThis[umdName];
         if (!plugin) {
-            throw new Error(`Failed to load UMD bundle for ${moduleName}, ${globalObject.constructor.name}.${umdName} is undefined`);
+            throw new Error(`Failed to load UMD bundle for ${moduleName}, ${umdName} is undefined`);
         }
         return plugin;
     }
-    async loadPlugin(def, windowHref) {
+    async loadPlugin(def, baseUri) {
         let plugin;
         if (util_1.isElectron && isCJSPluginDefinition(def)) {
-            plugin = await this.loadCJSPlugin(def, windowHref);
+            plugin = await this.loadCJSPlugin(def, baseUri);
         }
         else if (isESMPluginDefinition(def)) {
-            plugin = await this.loadESMPlugin(def, windowHref);
+            plugin = await this.loadESMPlugin(def, baseUri);
         }
         else if (isUMDPluginDefinition(def)) {
-            plugin = await this.loadUMDPlugin(def, windowHref);
+            plugin = await this.loadUMDPlugin(def, baseUri);
         }
         else if (!util_1.isElectron && isCJSPluginDefinition(def)) {
             throw new Error(`CommonJS plugin found, but not in a NodeJS environment: ${JSON.stringify(def)}`);
@@ -129,9 +123,9 @@ class PluginLoader {
             return [moduleName, module];
         }));
     }
-    async load(windowHref = '') {
+    async load(baseUri) {
         return Promise.all(this.definitions.map(async (definition) => ({
-            plugin: await this.loadPlugin(definition, windowHref),
+            plugin: await this.loadPlugin(definition, baseUri),
             definition,
         })));
     }

package/data_adapters/CytobandAdapter/CytobandAdapter.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="node" />
+import { SimpleFeature } from '../../util';
+import { BaseAdapter } from '../BaseAdapter';
+export declare function isGzip(buf: Buffer): boolean;
+export default class CytobandAdapter extends BaseAdapter {
+    getData(): Promise<SimpleFeature[]>;
+    freeResources(): void;
+}

package/data_adapters/CytobandAdapter/CytobandAdapter.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isGzip = void 0;
+const bgzf_filehandle_1 = require("@gmod/bgzf-filehandle");
+// locals
+const util_1 = require("../../util");
+const io_1 = require("../../util/io");
+const BaseAdapter_1 = require("../BaseAdapter");
+function isGzip(buf) {
+    return buf[0] === 31 && buf[1] === 139 && buf[2] === 8;
+}
+exports.isGzip = isGzip;
+class CytobandAdapter extends BaseAdapter_1.BaseAdapter {
+    async getData() {
+        const pm = this.pluginManager;
+        const loc = this.getConf('cytobandLocation');
+        if (loc.uri === '' || loc.uri === '/path/to/cytoband.txt.gz') {
+            return [];
+        }
+        const buffer = (await (0, io_1.openLocation)(loc, pm).readFile());
+        const buf = isGzip(buffer) ? await (0, bgzf_filehandle_1.unzip)(buffer) : buffer;
+        const text = new TextDecoder('utf8', { fatal: true }).decode(buf);
+        return text
+            .split(/\n|\r\n|\r/)
+            .filter(f => !!f.trim())
+            .map((line, i) => {
+            const [refName, start, end, name, type] = line.split('\t');
+            return new util_1.SimpleFeature({
+                uniqueId: `${i}`,
+                refName,
+                start: +start,
+                end: +end,
+                name,
+                type,
+            });
+        });
+    }
+    freeResources( /* { region } */) { }
+}
+exports.default = CytobandAdapter;

package/data_adapters/CytobandAdapter/configSchema.d.ts

@@ -0,0 +1,2 @@
+declare const configSchema: import("../../configuration").AnyConfigurationSchemaType;
+export default configSchema;

package/data_adapters/CytobandAdapter/configSchema.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const configuration_1 = require("../../configuration");
+/**
+ * #config CytobandAdapter
+ */
+function x() { } // eslint-disable-line @typescript-eslint/no-unused-vars
+const configSchema = (0, configuration_1.ConfigurationSchema)('CytobandAdapter', {
+    /**
+     * #slot
+     */
+    cytobandLocation: {
+        type: 'fileLocation',
+        defaultValue: { uri: '/path/to/cytoband.txt.gz' },
+    },
+}, { explicitlyTyped: true });
+exports.default = configSchema;

package/data_adapters/CytobandAdapter/index.d.ts

@@ -0,0 +1,3 @@
+import PluginManager from '../../PluginManager';
+declare const _default: (pluginManager: PluginManager) => void;
+export default _default;

package/data_adapters/CytobandAdapter/index.js

@@ -0,0 +1,37 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const pluggableElementTypes_1 = require("../../pluggableElementTypes");
+const configSchema_1 = __importDefault(require("./configSchema"));
+exports.default = (pluginManager) => {
+    pluginManager.addAdapterType(() => new pluggableElementTypes_1.AdapterType({
+        name: 'CytobandAdapter',
+        configSchema: configSchema_1.default,
+        getAdapterClass: () => Promise.resolve().then(() => __importStar(require('./CytobandAdapter'))).then(f => f.default),
+    }));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/core",
-  "version": "2.3.3",
+  "version": "2.4.0",
   "description": "JBrowse 2 core libraries used by plugins",
   "keywords": [
     "jbrowse",
@@ -29,6 +29,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.17.9",
+    "@gmod/bgzf-filehandle": "^1.4.3",
     "@mui/icons-material": "^5.0.1",
     "@types/clone": "^2.0.0",
     "abortable-promise-cache": "^1.5.0",
@@ -40,7 +41,7 @@
     "copy-to-clipboard": "^3.3.1",
     "deepmerge": "^4.2.2",
     "detect-node": "^2.1.0",
-    "dompurify": "^2.3.4",
+    "dompurify": "^3.0.0",
     "escape-html": "^1.0.3",
     "fast-deep-equal": "^3.1.3",
     "generic-filehandle": "^3.0.0",
@@ -50,7 +51,7 @@
     "json-stable-stringify": "^1.0.1",
     "librpc-web-mod": "^1.1.5",
     "load-script2": "^2.0.5",
-    "material-ui-popup-state": "^3.0.0",
+    "material-ui-popup-state": "^5.0.0",
     "rbush": "^3.0.1",
     "react-error-boundary": "^3.0.0",
     "react-use-measure": "^2.1.1",
@@ -74,5 +75,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "283e0387ccd5acc9f092cf00804d1fcac212e68d"
+  "gitHead": "78707a2bc3ba8489f26a590ef83f62ede945d048"
 }

package/pluggableElementTypes/PluggableElementBase.d.ts

@@ -2,7 +2,7 @@ export default abstract class PluggableElementBase {
     name: string;
     maybeDisplayName?: string;
     constructor(args: {
-        name: string;
+        name?: string;
         displayName?: string;
     });
     get displayName(): string;

package/pluggableElementTypes/PluggableElementBase.js

@@ -2,8 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 class PluggableElementBase {
     constructor(args) {
-        this.name = '';
-        this.name = args.name;
+        this.name = args.name || 'UNKNOWN';
         this.maybeDisplayName = args.displayName;
     }
     get displayName() {

package/pluggableElementTypes/RpcMethodType.d.ts

@@ -5,20 +5,17 @@ import { RemoteAbortSignal } from '../rpc/remoteAbortSignals';
 export type RpcMethodConstructor = new (pm: PluginManager) => RpcMethodType;
 export default abstract class RpcMethodType extends PluggableElementBase {
     pluginManager: PluginManager;
-    name: string;
     constructor(pluginManager: PluginManager);
     serializeArguments(args: {}, _rpcDriverClassName: string): Promise<{}>;
     serializeNewAuthArguments(loc: UriLocation): Promise<UriLocation>;
-    deserializeArguments<SERIALIZED extends {
+    deserializeArguments<T extends {
         signal?: RemoteAbortSignal;
         blobMap?: Record<string, File>;
-    }>(serializedArgs: SERIALIZED, _rpcDriverClassName: string): Promise<(SERIALIZED & {
-        signal: AbortSignal;
-    }) | (SERIALIZED & {
-        signal: undefined;
-    })>;
+    }>(serializedArgs: T, _rpcDriverClassName: string): Promise<T & {
+        signal: AbortSignal | undefined;
+    }>;
     abstract execute(serializedArgs: unknown, rpcDriverClassName: string): Promise<unknown>;
     serializeReturn(originalReturn: unknown, _args: unknown, _rpcDriverClassName: string): Promise<unknown>;
-    deserializeReturn(serializedReturn: unknown, _args: unknown, _rpcDriverClassName: string): Promise<unknown>;
+    deserializeReturn(serializedReturn: unknown, _args: unknown, _rpcDriver: string): Promise<unknown>;
     private augmentLocationObjects;
 }

package/pluggableElementTypes/RpcMethodType.js

@@ -3,16 +3,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const map_obj_1 = __importDefault(require("../util/map-obj"));
 const PluggableElementBase_1 = __importDefault(require("./PluggableElementBase"));
 const tracks_1 = require("../util/tracks");
-const mobx_state_tree_1 = require("mobx-state-tree");
 const types_1 = require("../util/types");
 const remoteAbortSignals_1 = require("../rpc/remoteAbortSignals");
 class RpcMethodType extends PluggableElementBase_1.default {
     constructor(pluginManager) {
-        super({ name: '' });
+        super({});
         this.pluginManager = pluginManager;
-        this.name = 'UNKNOWN';
     }
     async serializeArguments(args, _rpcDriverClassName) {
         const blobMap = (0, tracks_1.getBlobMap)();
@@ -25,7 +24,7 @@ class RpcMethodType extends PluggableElementBase_1.default {
         if (!(0, types_1.isAppRootModel)(rootModel) || loc.internetAccountPreAuthorization) {
             return loc;
         }
-        const account = rootModel === null || rootModel === void 0 ? void 0 : rootModel.findAppropriateInternetAccount(loc);
+        const account = rootModel.findAppropriateInternetAccount(loc);
         if (account) {
             loc.internetAccountPreAuthorization =
                 await account.getPreAuthorizationInformation(loc);
@@ -37,55 +36,45 @@ class RpcMethodType extends PluggableElementBase_1.default {
             (0, tracks_1.setBlobMap)(serializedArgs.blobMap);
         }
         const { signal } = serializedArgs;
-        if (signal && (0, remoteAbortSignals_1.isRemoteAbortSignal)(signal)) {
-            return { ...serializedArgs, signal: (0, remoteAbortSignals_1.deserializeAbortSignal)(signal) };
-        }
-        return { ...serializedArgs, signal: undefined };
+        return {
+            ...serializedArgs,
+            signal: (0, remoteAbortSignals_1.isRemoteAbortSignal)(signal)
+                ? (0, remoteAbortSignals_1.deserializeAbortSignal)(signal)
+                : undefined,
+        };
     }
     async serializeReturn(originalReturn, _args, _rpcDriverClassName) {
         return originalReturn;
     }
-    async deserializeReturn(serializedReturn, _args, _rpcDriverClassName) {
+    async deserializeReturn(serializedReturn, _args, _rpcDriver) {
+        var _a;
         let r;
-        const { rootModel } = this.pluginManager;
         try {
             r = await serializedReturn;
         }
         catch (error) {
             if ((0, types_1.isAuthNeededException)(error)) {
+                const retryAccount = 
                 // @ts-ignore
-                const retryAccount = rootModel === null || rootModel === void 0 ? void 0 : rootModel.createEphemeralInternetAccount(`HTTPBasicInternetAccount-${new URL(error.url).origin}`, {}, error.url);
+                (_a = this.pluginManager.rootModel) === null || _a === void 0 ? void 0 : _a.createEphemeralInternetAccount(`HTTPBasicInternetAccount-${new URL(error.url).origin}`, {}, error.url);
                 throw new types_1.RetryError('Retrying with created internet account', retryAccount.internetAccountId);
             }
             throw error;
         }
         return r;
     }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     async augmentLocationObjects(thing) {
-        if ((0, mobx_state_tree_1.isStateTreeNode)(thing) && !(0, mobx_state_tree_1.isAlive)(thing)) {
-            return thing;
-        }
-        if ((0, types_1.isUriLocation)(thing)) {
-            await this.serializeNewAuthArguments(thing);
-        }
-        if (Array.isArray(thing)) {
-            for (const val of thing) {
-                await this.augmentLocationObjects(val);
-            }
-        }
-        if (typeof thing === 'object' && thing !== null) {
-            for (const value of Object.values(thing)) {
-                if (Array.isArray(value)) {
-                    for (const val of value) {
-                        await this.augmentLocationObjects(val);
-                    }
-                }
-                else if (typeof value === 'object' && value !== null) {
-                    await this.augmentLocationObjects(value);
-                }
+        const uris = [];
+        // using map-obj avoids cycles, seen in circular view svg export
+        (0, map_obj_1.default)(thing, val => {
+            if ((0, types_1.isUriLocation)(val)) {
+                uris.push(val);
             }
+        });
+        for (const uri of uris) {
+            await this.serializeNewAuthArguments(uri);
         }
+        return thing;
     }
 }
 exports.default = RpcMethodType;

package/pluggableElementTypes/renderers/CircularChordRendererType.d.ts

@@ -1,6 +1,8 @@
-import { SimpleFeatureSerialized } from '../../util/simpleFeature';
+/// <reference types="react" />
+import { SimpleFeature, SimpleFeatureSerialized } from '../../util';
 import FeatureRenderer from './FeatureRendererType';
 export default class CircularChordRendererType extends FeatureRenderer {
+    supportsSVG: boolean;
     deserializeResultsInClient(res: {
         features: SimpleFeatureSerialized[];
         html: string;
@@ -8,5 +10,14 @@ export default class CircularChordRendererType extends FeatureRenderer {
         exportSVG?: {
             rasterizeLayers?: boolean;
         };
-    }): any;
+    }): {
+        features: Map<string, SimpleFeature>;
+        blockKey: string;
+        html: string;
+    } | {
+        features: Map<string, SimpleFeature>;
+        blockKey: string;
+        reactElement: JSX.Element;
+        html: string;
+    };
 }

package/pluggableElementTypes/renderers/CircularChordRendererType.js

@@ -4,12 +4,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const simpleFeature_1 = __importDefault(require("../../util/simpleFeature"));
+const util_1 = require("../../util");
 const FeatureRendererType_1 = __importDefault(require("./FeatureRendererType"));
 const RpcRenderedSvgGroup_1 = __importDefault(require("./RpcRenderedSvgGroup"));
 class CircularChordRendererType extends FeatureRendererType_1.default {
+    constructor() {
+        super(...arguments);
+        this.supportsSVG = true;
+    }
     deserializeResultsInClient(res, args) {
-        const deserializedFeatures = new Map(res.features.map(f => simpleFeature_1.default.fromJSON(f)).map(f => [f.id(), f]));
+        const deserializedFeatures = new Map(res.features.map(f => util_1.SimpleFeature.fromJSON(f)).map(f => [f.id(), f]));
         // if we are rendering svg, we skip hydration
         if (args.exportSVG) {
             // only return the res if the renderer explicitly has
@@ -17,6 +21,8 @@ class CircularChordRendererType extends FeatureRendererType_1.default {
             // document
             return {
                 ...res,
+                features: deserializedFeatures,
+                blockKey: 'circularChord',
                 html: this.supportsSVG
                     ? res.html
                     : '<text y="12" fill="black">SVG export not supported for this track</text>',
@@ -25,6 +31,8 @@ class CircularChordRendererType extends FeatureRendererType_1.default {
         // hydrate res using ServerSideRenderedContent
         return {
             ...res,
+            features: deserializedFeatures,
+            blockKey: 'circularChord',
             reactElement: (react_1.default.createElement(RpcRenderedSvgGroup_1.default, { ...args, ...res, features: deserializedFeatures, RenderingComponent: this.ReactComponent })),
         };
     }

package/pluggableElementTypes/renderers/ComparativeServerSideRendererType.d.ts

@@ -18,6 +18,12 @@ export type ResultsSerialized = ServerSideResultsSerialized;
 export interface ResultsDeserialized extends ServerSideResultsDeserialized {
     blockKey: string;
 }
+export interface ResultsSerializedSvgExport extends ResultsSerialized {
+    canvasRecordedData: unknown;
+    width: number;
+    height: number;
+    reactElement: unknown;
+}
 export default class ComparativeServerSideRenderer extends ServerSideRenderer {
     /**
      * directly modifies the render arguments to prepare

package/pluggableElementTypes/renderers/ComparativeServerSideRendererType.js

@@ -9,6 +9,9 @@ const ServerSideRendererType_1 = __importDefault(require("./ServerSideRendererTy
 const dataAdapterCache_1 = require("../../data_adapters/dataAdapterCache");
 const util_1 = require("../../util");
 const rxjs_1 = require("rxjs");
+function isSvgExport(e) {
+    return 'canvasRecordedData' in e;
+}
 class ComparativeServerSideRenderer extends ServerSideRendererType_1.default {
     /**
      * directly modifies the render arguments to prepare
@@ -43,7 +46,12 @@ class ComparativeServerSideRenderer extends ServerSideRendererType_1.default {
      * calls `render` with the RPC manager.
      */
     async renderInClient(rpcManager, args) {
-        return rpcManager.call(args.sessionId, 'ComparativeRender', args);
+        const results = (await rpcManager.call(args.sessionId, 'ComparativeRender', args));
+        if (isSvgExport(results)) {
+            results.html = await (0, util_1.getSerializedSvg)(results);
+            delete results.reactElement;
+        }
+        return results;
     }
     /**
      * @param renderArgs -

package/pluggableElementTypes/renderers/ServerSideRendererType.js

@@ -1,34 +1,10 @@
 "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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styles_1 = require("@mui/material/styles");
-const canvas_sequencer_1 = require("canvas-sequencer");
 const server_1 = require("react-dom/server");
 const mobx_state_tree_1 = require("mobx-state-tree");
 // locals
@@ -79,7 +55,7 @@ class ServerSideRenderer extends RendererType_1.default {
                     : '<text y="12" fill="black">SVG export not supported for this track</text>',
             };
         }
-        // hydrate res using ServerSideRenderedContent
+        // get res using ServerSideRenderedContent
         return {
             ...res,
             reactElement: (react_1.default.createElement(ServerSideRenderedContent_1.default, { ...args, ...res, RenderingComponent: this.ReactComponent })),
@@ -124,15 +100,7 @@ class ServerSideRenderer extends RendererType_1.default {
     async renderInClient(rpcManager, args) {
         const results = (await rpcManager.call(args.sessionId, 'CoreRender', args));
         if (isSvgExport(results)) {
-            const { width, height, canvasRecordedData } = results;
-            const C2S = await Promise.resolve().then(() => __importStar(require('canvas2svg')));
-            const ctx = new C2S.default(width, height);
-            const seq = new canvas_sequencer_1.CanvasSequence(canvasRecordedData);
-            seq.execute(ctx);
-            const str = ctx.getSvg();
-            // innerHTML strips the outer <svg> element from returned data, we add
-            // our own <svg> element in the view's SVG export
-            results.html = str.innerHTML;
+            results.html = await (0, util_1.getSerializedSvg)(results);
             delete results.reactElement;
         }
         return results;