@jbrowse/core 2.18.0 → 3.0.1

package/pluggableElementTypes/renderers/RpcRenderedSvgGroup.js

@@ -1,41 +1,16 @@
 "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;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
-const mobx_state_tree_1 = require("mobx-state-tree");
-const react_dom_1 = require("react-dom");
+const client_1 = require("react-dom/client");
 const ui_1 = require("../../ui");
 const util_1 = require("../../util");
-const NewHydrate = (0, mobx_react_1.observer)(function RpcRenderedSvgGroup(props) {
+const RpcRenderedSvgGroup = (0, mobx_react_1.observer)(function RpcRenderedSvgGroup(props) {
     const { html, theme, RenderingComponent, ...rest } = props;
     const ref = (0, react_1.useRef)(null);
-    const rootRef = (0, react_1.useRef)();
-    const root = (0, mobx_state_tree_1.getRoot)(props.displayModel);
-    const hydrateRoot = root.hydrateFn;
+    const rootRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         const renderTimeout = (0, util_1.rIC)(() => {
             var _a;
@@ -44,50 +19,19 @@ const NewHydrate = (0, mobx_react_1.observer)(function RpcRenderedSvgGroup(props
             }
             const jbrowseTheme = (0, ui_1.createJBrowseTheme)(theme);
             rootRef.current =
-                (_a = rootRef.current) !== null && _a !== void 0 ? _a : hydrateRoot(ref.current, react_1.default.createElement(material_1.ThemeProvider, { theme: jbrowseTheme },
-                    react_1.default.createElement(RenderingComponent, { ...rest })));
+                (_a = rootRef.current) !== null && _a !== void 0 ? _a : (0, client_1.hydrateRoot)(ref.current, (0, jsx_runtime_1.jsx)(material_1.ThemeProvider, { theme: jbrowseTheme, children: (0, jsx_runtime_1.jsx)(RenderingComponent, { ...rest }) }));
         });
         return () => {
             if (renderTimeout !== undefined) {
                 clearTimeout(renderTimeout);
             }
             const root = rootRef.current;
-            rootRef.current = undefined;
+            rootRef.current = null;
             setTimeout(() => {
                 root === null || root === void 0 ? void 0 : root.unmount();
             });
         };
-    }, [RenderingComponent, hydrateRoot, theme, rest]);
-    return react_1.default.createElement("g", { ref: ref, dangerouslySetInnerHTML: { __html: html } });
-});
-const OldHydrate = (0, mobx_react_1.observer)(function OldHydrate(props) {
-    const { html, RenderingComponent } = props;
-    const ref = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        const domNode = ref.current;
-        function doHydrate() {
-            if (domNode && html) {
-                if (domNode.innerHTML) {
-                    (0, react_dom_1.unmountComponentAtNode)(domNode);
-                }
-                domNode.style.outline = 'none';
-                domNode.innerHTML = html;
-                (0, util_1.rIC)(() => {
-                    (0, react_dom_1.hydrate)(react_1.default.createElement(RenderingComponent, { ...props }), domNode);
-                });
-            }
-        }
-        doHydrate();
-        return () => {
-            if (domNode) {
-                (0, react_dom_1.unmountComponentAtNode)(domNode);
-            }
-        };
-    }, [html, RenderingComponent, props]);
-    return react_1.default.createElement("g", { ref: ref });
-});
-const RpcRenderedSvgGroup = (0, mobx_react_1.observer)(function (props) {
-    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 });
+    }, [RenderingComponent, theme, rest]);
+    return (0, jsx_runtime_1.jsx)("g", { ref: ref, dangerouslySetInnerHTML: { __html: html } });
 });
 exports.default = RpcRenderedSvgGroup;

package/pluggableElementTypes/renderers/ServerSideRenderedContent.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
 import type { RenderArgs, ResultsSerialized } from './ServerSideRendererType';
 interface Props extends ResultsSerialized, RenderArgs {
     RenderingComponent: React.ComponentType<any>;
 }
-declare const ServerSideRenderedContent: (props: Props) => React.JSX.Element;
+declare const ServerSideRenderedContent: ({ theme, html, RenderingComponent, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export default ServerSideRenderedContent;

package/pluggableElementTypes/renderers/ServerSideRenderedContent.js

@@ -1,43 +1,16 @@
 "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;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const styles_1 = require("@mui/material/styles");
 const mobx_react_1 = require("mobx-react");
-const mobx_state_tree_1 = require("mobx-state-tree");
-const react_dom_1 = require("react-dom");
+const client_1 = require("react-dom/client");
 const ui_1 = require("../../ui");
 const util_1 = require("../../util");
-const NewHydrate = (0, mobx_react_1.observer)(function ServerSideRenderedContent({ theme, html, RenderingComponent, ...rest }) {
+const ServerSideRenderedContent = (0, mobx_react_1.observer)(function ServerSideRenderedContent({ theme, html, RenderingComponent, ...rest }) {
     const ref = (0, react_1.useRef)(null);
-    const rootRef = (0, react_1.useRef)();
-    const { hydrateFn } = (0, mobx_state_tree_1.getRoot)(rest.displayModel);
+    const rootRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
-        if (ref.current) {
-            ref.current.innerHTML = html;
-        }
         const renderTimeout = (0, util_1.rIC)(() => {
             var _a;
             if (!ref.current) {
@@ -45,48 +18,19 @@ const NewHydrate = (0, mobx_react_1.observer)(function ServerSideRenderedContent
             }
             const jbrowseTheme = (0, ui_1.createJBrowseTheme)(theme);
             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 })));
+                (_a = rootRef.current) !== null && _a !== void 0 ? _a : (0, client_1.hydrateRoot)(ref.current, (0, jsx_runtime_1.jsx)(styles_1.ThemeProvider, { theme: jbrowseTheme, children: (0, jsx_runtime_1.jsx)(RenderingComponent, { ...rest }) }));
         });
         return () => {
             if (renderTimeout !== undefined) {
                 clearTimeout(renderTimeout);
             }
             const root = rootRef.current;
-            rootRef.current = undefined;
+            rootRef.current = null;
             setTimeout(() => {
                 root === null || root === void 0 ? void 0 : root.unmount();
             });
         };
-    }, [theme, rest, html, hydrateFn, RenderingComponent]);
-    return react_1.default.createElement("div", { "data-testid": "hydrationContainer", ref: ref });
-});
-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)(() => {
-        const domNode = ref.current;
-        function doHydrate() {
-            if (domNode) {
-                (0, react_dom_1.unmountComponentAtNode)(domNode);
-                domNode.innerHTML = html;
-                (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);
-                });
-            }
-        }
-        doHydrate();
-        return () => {
-            if (domNode) {
-                (0, react_dom_1.unmountComponentAtNode)(domNode);
-            }
-        };
-    }, [html, jbrowseTheme, rest, RenderingComponent]);
-    return react_1.default.createElement("div", { ref: ref });
-});
-const ServerSideRenderedContent = (0, mobx_react_1.observer)(function (props) {
-    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 });
+    }, [theme, rest, RenderingComponent]);
+    return (0, jsx_runtime_1.jsx)("div", { ref: ref, dangerouslySetInnerHTML: { __html: html } });
 });
 exports.default = ServerSideRenderedContent;

package/pluggableElementTypes/renderers/ServerSideRendererType.js

@@ -3,7 +3,7 @@ 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 jsx_runtime_1 = require("react/jsx-runtime");
 const styles_1 = require("@mui/material/styles");
 const mobx_state_tree_1 = require("mobx-state-tree");
 const server_1 = require("react-dom/server");
@@ -38,7 +38,7 @@ class ServerSideRenderer extends RendererType_1.default {
         }
         return {
             ...res,
-            reactElement: (react_1.default.createElement(ServerSideRenderedContent_1.default, { ...args, ...res, RenderingComponent: this.ReactComponent })),
+            reactElement: ((0, jsx_runtime_1.jsx)(ServerSideRenderedContent_1.default, { ...args, ...res, RenderingComponent: this.ReactComponent })),
         };
     }
     deserializeArgsInWorker(args) {
@@ -54,7 +54,7 @@ class ServerSideRenderer extends RendererType_1.default {
         return deserialized;
     }
     serializeResultsInWorker(results, args) {
-        const html = (0, server_1.renderToString)(react_1.default.createElement(styles_1.ThemeProvider, { theme: (0, ui_1.createJBrowseTheme)(args.theme) }, results.reactElement));
+        const html = (0, server_1.renderToString)((0, jsx_runtime_1.jsx)(styles_1.ThemeProvider, { theme: (0, ui_1.createJBrowseTheme)(args.theme), children: results.reactElement }));
         results.reactElement = undefined;
         return { ...results, html };
     }

package/stories/examples/WithSequencePanel.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
-declare function GeneCollapsedIntronCoords(): React.JSX.Element;
-declare function GeneCollapsedIntronNoCoords(): React.JSX.Element;
-declare function CDSCoords(): React.JSX.Element;
-declare function GeneCoordsGenomic(): React.JSX.Element;
-declare function CDSNoCoords(): React.JSX.Element;
+declare function GeneCollapsedIntronCoords(): import("react/jsx-runtime").JSX.Element;
+declare function GeneCollapsedIntronNoCoords(): import("react/jsx-runtime").JSX.Element;
+declare function CDSCoords(): import("react/jsx-runtime").JSX.Element;
+declare function GeneCoordsGenomic(): import("react/jsx-runtime").JSX.Element;
+declare function CDSNoCoords(): import("react/jsx-runtime").JSX.Element;
 export { CDSCoords, CDSNoCoords, GeneCollapsedIntronCoords, GeneCollapsedIntronNoCoords, GeneCoordsGenomic, };

package/stories/examples/WithSequencePanel.js

@@ -8,7 +8,7 @@ exports.CDSNoCoords = CDSNoCoords;
 exports.GeneCollapsedIntronCoords = GeneCollapsedIntronCoords;
 exports.GeneCollapsedIntronNoCoords = GeneCollapsedIntronNoCoords;
 exports.GeneCoordsGenomic = GeneCoordsGenomic;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const util_1 = require("./util");
 const SequencePanel_1 = __importDefault(require(".././../BaseFeatureWidget/SequenceFeatureDetails/SequencePanel"));
 const model_1 = require(".././../BaseFeatureWidget/SequenceFeatureDetails/model");
@@ -16,27 +16,27 @@ function GeneCollapsedIntronCoords() {
     const model = (0, model_1.SequenceFeatureDetailsF)().create();
     model.setShowCoordinates('relative');
     model.setMode('gene_collapsed_intron');
-    return react_1.default.createElement(SequencePanel_1.default, { model: model, sequence: util_1.sequence, feature: util_1.feature });
+    return (0, jsx_runtime_1.jsx)(SequencePanel_1.default, { model: model, sequence: util_1.sequence, feature: util_1.feature });
 }
 function GeneCollapsedIntronNoCoords() {
     const model = (0, model_1.SequenceFeatureDetailsF)().create();
     model.setMode('gene_collapsed_intron');
-    return react_1.default.createElement(SequencePanel_1.default, { model: model, sequence: util_1.sequence, feature: util_1.feature });
+    return (0, jsx_runtime_1.jsx)(SequencePanel_1.default, { model: model, sequence: util_1.sequence, feature: util_1.feature });
 }
 function CDSCoords() {
     const model = (0, model_1.SequenceFeatureDetailsF)().create();
     model.setShowCoordinates('relative');
     model.setMode('cds');
-    return react_1.default.createElement(SequencePanel_1.default, { model: model, sequence: util_1.sequence, feature: util_1.feature });
+    return (0, jsx_runtime_1.jsx)(SequencePanel_1.default, { model: model, sequence: util_1.sequence, feature: util_1.feature });
 }
 function GeneCoordsGenomic() {
     const model = (0, model_1.SequenceFeatureDetailsF)().create();
     model.setShowCoordinates('genomic');
     model.setMode('gene');
-    return react_1.default.createElement(SequencePanel_1.default, { model: model, sequence: util_1.sequence, feature: util_1.feature });
+    return (0, jsx_runtime_1.jsx)(SequencePanel_1.default, { model: model, sequence: util_1.sequence, feature: util_1.feature });
 }
 function CDSNoCoords() {
     const model = (0, model_1.SequenceFeatureDetailsF)().create();
     model.setMode('cds');
-    return react_1.default.createElement(SequencePanel_1.default, { model: model, sequence: util_1.sequence, feature: util_1.feature });
+    return (0, jsx_runtime_1.jsx)(SequencePanel_1.default, { model: model, sequence: util_1.sequence, feature: util_1.feature });
 }