@jbrowse/core 2.6.2 → 2.7.0

package/pluggableElementTypes/renderers/ServerSideRenderedContent.js

@@ -25,11 +25,50 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const styles_1 = require("@mui/material/styles");
-const react_dom_1 = require("react-dom");
 // locals
 const ui_1 = require("../../ui");
+const mobx_react_1 = require("mobx-react");
+const mobx_state_tree_1 = require("mobx-state-tree");
+// eslint-disable-next-line react/no-deprecated
+const react_dom_1 = require("react-dom");
 const util_1 = require("../../util");
-function default_1({ theme, html, RenderingComponent, ...rest }) {
+const NewHydrate = (0, mobx_react_1.observer)(function ServerSideRenderedContent({ theme, html, RenderingComponent, ...rest }) {
+    const ref = (0, react_1.useRef)(null);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const rootRef = (0, react_1.useRef)();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const { hydrateFn } = (0, mobx_state_tree_1.getRoot)(rest.displayModel);
+    (0, react_1.useEffect)(() => {
+        // requestIdleCallback here helps to avoid hydration mismatch
+        // because it provides time for dangerouslySetInnerHTML to set the innerHTML
+        // contents of the node, otherwise ref.current.innerHTML can be empty
+        const renderTimeout = (0, util_1.rIC)(() => {
+            var _a;
+            if (!ref.current) {
+                return;
+            }
+            const jbrowseTheme = (0, ui_1.createJBrowseTheme)(theme);
+            // if there is a hydration mismatch, investigate value of
+            // - value of ref.current.innerHTML
+            // - value of `html` variable
+            // - renderToString of the below React element
+            rootRef.current =
+                (_a = rootRef.current) !== null && _a !== void 0 ? _a : hydrateFn(ref.current, react_1.default.createElement(styles_1.ThemeProvider, { theme: jbrowseTheme },
+                    react_1.default.createElement(RenderingComponent, { ...rest })));
+        });
+        return () => {
+            clearTimeout(renderTimeout);
+            const root = rootRef.current;
+            rootRef.current = undefined;
+            setTimeout(() => {
+                root === null || root === void 0 ? void 0 : root.unmount();
+            });
+        };
+    }, [html, theme, rest, hydrateFn, RenderingComponent]);
+    // eslint-disable-next-line react/no-danger
+    return react_1.default.createElement("div", { ref: ref, dangerouslySetInnerHTML: { __html: html } });
+});
+const OldHydrate = (0, mobx_react_1.observer)(function ({ theme, html, RenderingComponent, ...rest }) {
     const ref = (0, react_1.useRef)(null);
     const jbrowseTheme = (0, ui_1.createJBrowseTheme)(theme);
     (0, react_1.useEffect)(() => {
@@ -40,17 +79,10 @@ function default_1({ theme, html, RenderingComponent, ...rest }) {
                     (0, react_dom_1.unmountComponentAtNode)(domNode);
                 }
                 domNode.innerHTML = html;
-                // defer main-thread rendering and hydration for when
-                // we have some free time. helps keep the framerate up.
-                //
-                // note: the timeout param to rIC below helps when you are doing
-                // a long continuous scroll, it forces it to evaluate because
-                // otherwise the continuous scroll would never give it time to do
-                // so
                 (0, util_1.rIC)(() => {
                     (0, react_dom_1.hydrate)(react_1.default.createElement(styles_1.ThemeProvider, { theme: jbrowseTheme },
                         react_1.default.createElement(RenderingComponent, { ...rest })), domNode);
-                }, { timeout: 300 });
+                });
             }
         }
         doHydrate();
@@ -61,5 +93,10 @@ function default_1({ theme, html, RenderingComponent, ...rest }) {
         };
     }, [html, jbrowseTheme, rest, RenderingComponent]);
     return react_1.default.createElement("div", { ref: ref });
-}
-exports.default = default_1;
+});
+const ServerSideRenderedContent = (0, mobx_react_1.observer)(function (props) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const root = (0, mobx_state_tree_1.getRoot)(props.displayModel);
+    return root.hydrateFn ? react_1.default.createElement(NewHydrate, { ...props }) : react_1.default.createElement(OldHydrate, { ...props });
+});
+exports.default = ServerSideRenderedContent;

package/pluggableElementTypes/renderers/util/serializableFilterChain.js

@@ -13,10 +13,10 @@ class SerializableFilterChain {
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     passes(...args) {
-        for (let i = 0; i < this.filterChain.length; i += 1) {
+        for (const entry of this.filterChain) {
             if (
             // @ts-expect-error
-            !this.filterChain[i].expr.evalSync({ feature: args[0] })) {
+            !entry.expr.evalSync({ feature: args[0] })) {
                 return false;
             }
         }

package/rpc/RpcManager.d.ts

@@ -3,10 +3,10 @@ import { AnyConfigurationModel } from '../configuration';
 import WebWorkerRpcDriver from './WebWorkerRpcDriver';
 import MainThreadRpcDriver from './MainThreadRpcDriver';
 type DriverClass = WebWorkerRpcDriver | MainThreadRpcDriver;
-type BackendConfigurations = {
+interface BackendConfigurations {
     WebWorkerRpcDriver?: Omit<ConstructorParameters<typeof WebWorkerRpcDriver>[0], 'config'>;
     MainThreadRpcDriver?: Omit<ConstructorParameters<typeof MainThreadRpcDriver>[0], 'config'>;
-};
+}
 declare const DriverClasses: {
     WebWorkerRpcDriver: typeof WebWorkerRpcDriver;
     MainThreadRpcDriver: typeof MainThreadRpcDriver;

package/rpc/WebWorkerRpcDriver.js

@@ -4,17 +4,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const librpc_web_mod_1 = __importDefault(require("librpc-web-mod"));
-const shortid_1 = __importDefault(require("shortid"));
+const serialize_error_1 = require("serialize-error");
 // locals
+const nanoid_1 = require("../util/nanoid");
 const BaseRpcDriver_1 = __importDefault(require("./BaseRpcDriver"));
-const serialize_error_1 = require("serialize-error");
 class WebWorkerHandle extends librpc_web_mod_1.default.Client {
     destroy() {
         this.workers[0].terminate();
     }
     async call(funcName, args, opts) {
         const { statusCallback, rpcDriverClassName } = opts;
-        const channel = `message-${shortid_1.default.generate()}`;
+        const channel = `message-${(0, nanoid_1.nanoid)()}`;
         const listener = (message) => {
             statusCallback === null || statusCallback === void 0 ? void 0 : statusCallback(message);
         };
@@ -36,6 +36,9 @@ class WebWorkerRpcDriver extends BaseRpcDriver_1.default {
         // one for each worker, because we want to do our own state-group-aware
         // load balancing rather than using librpc's builtin round-robin
         const instance = this.makeWorkerInstance();
+        // @ts-ignore this is used to avoid warning in jbrowse-web startup
+        // (because this file is referred to via src, declare.d.ts file is in
+        // e.g. products/jbrowse-web)
         const worker = new WebWorkerHandle({ workers: [instance] });
         const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
         if (isSafari) {

package/rpc/methods/CoreGetFeatureDensityStats.js

@@ -3,7 +3,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
 const dataAdapterCache_1 = require("../../data_adapters/dataAdapterCache");
 const RpcMethodType_1 = __importDefault(require("../../pluggableElementTypes/RpcMethodType"));
 const BaseAdapter_1 = require("../../data_adapters/BaseAdapter");

package/rpc/methods/CoreGetFeatureDetails.js

@@ -3,7 +3,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
 const RpcMethodType_1 = __importDefault(require("../../pluggableElementTypes/RpcMethodType"));
 const util_1 = require("../../util");
 const util_2 = require("./util");

package/rpc/methods/CoreGetFeatures.js

@@ -3,7 +3,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
 const operators_1 = require("rxjs/operators");
 const rxjs_1 = require("rxjs");
 // locals

package/rpc/methods/CoreRender.js

@@ -1,5 +1,4 @@
 "use strict";
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };

package/rpc/remoteAbortSignals.d.ts

@@ -1,6 +1,6 @@
-export type RemoteAbortSignal = {
+export interface RemoteAbortSignal {
     abortSignalId: number;
-};
+}
 /**
  * assign an ID to the given abort signal and return a plain object
  * representation