@jbrowse/core 4.3.0 → 5.0.0-beta.2

package/esm/util/tss-react/cssAndCx.js

@@ -1,8 +1,15 @@
 import { useMemo } from 'react';
 import { serializeStyles } from '@emotion/serialize';
 import { getRegisteredStyles, insertStyles } from '@emotion/utils';
-import { classnames } from "./tools/classnames.js";
-import { matchCSSObject } from "./types.js";
+import { classnames } from './tools/classnames.js';
+// NOTE: upstream tss-react wraps `cx`/`css` in a workaround (issue #27) that
+// re-wraps combined classes' media-query rules in `&&` for specificity. We
+// intentionally omit it: no `cx()` call in this codebase combines an
+// `@media`-bearing class with another (the only `@media (hover: none)` rules
+// are applied as standalone classNames), so the workaround never changed any
+// output while costing a per-render WeakMap walk in every multi-arg `cx()` and
+// an unbounded per-cache Map. If you ever `cx()` together a class containing a
+// media query, re-introduce it from upstream.
 export const { createCssAndCx } = (() => {
     function merge(registered, css, className) {
         const registeredStyles = [];
@@ -17,21 +24,9 @@ export const { createCssAndCx } = (() => {
         const css = (...args) => {
             const serialized = serializeStyles(args, cache.registered);
             insertStyles(cache, serialized, false);
-            const className = `${cache.key}-${serialized.name}`;
-            scope: {
-                const arg = args[0];
-                if (!matchCSSObject(arg)) {
-                    break scope;
-                }
-                increaseSpecificityToTakePrecedenceOverMediaQueries.saveClassNameCSSObjectMapping(cache, className, arg);
-            }
-            return className;
-        };
-        const cx = (...args) => {
-            const className = classnames(args);
-            const feat27FixedClassnames = increaseSpecificityToTakePrecedenceOverMediaQueries.fixClassName(cache, className, css);
-            return merge(cache.registered, css, feat27FixedClassnames);
+            return `${cache.key}-${serialized.name}`;
         };
+        const cx = (...args) => merge(cache.registered, css, classnames(args));
         return { css, cx };
     }
     return { createCssAndCx };
@@ -45,53 +40,3 @@ export function createUseCssAndCx(params) {
     }
     return { useCssAndCx };
 }
-const increaseSpecificityToTakePrecedenceOverMediaQueries = (() => {
-    const cssObjectMapByCache = new WeakMap();
-    return {
-        saveClassNameCSSObjectMapping: (cache, className, cssObject) => {
-            let cssObjectMap = cssObjectMapByCache.get(cache);
-            if (cssObjectMap === undefined) {
-                cssObjectMap = new Map();
-                cssObjectMapByCache.set(cache, cssObjectMap);
-            }
-            cssObjectMap.set(className, cssObject);
-        },
-        fixClassName: (() => {
-            function fix(classNameCSSObjects) {
-                let isThereAnyMediaQueriesInPreviousClasses = false;
-                return classNameCSSObjects.map(([className, cssObject]) => {
-                    if (cssObject === undefined) {
-                        return className;
-                    }
-                    let out;
-                    if (!isThereAnyMediaQueriesInPreviousClasses) {
-                        out = className;
-                        for (const key in cssObject) {
-                            if (key.startsWith('@media')) {
-                                isThereAnyMediaQueriesInPreviousClasses = true;
-                                break;
-                            }
-                        }
-                    }
-                    else {
-                        out = {
-                            '&&': cssObject,
-                        };
-                    }
-                    return out;
-                });
-            }
-            return (cache, className, css) => {
-                if (!className.includes(' ')) {
-                    return className;
-                }
-                const cssObjectMap = cssObjectMapByCache.get(cache);
-                return classnames(fix(className
-                    .split(' ')
-                    .map(className => [className, cssObjectMap?.get(className)])).map(classNameOrCSSObject => typeof classNameOrCSSObject === 'string'
-                    ? classNameOrCSSObject
-                    : css(classNameOrCSSObject)));
-            };
-        })(),
-    };
-})();

package/esm/util/tss-react/index.d.ts

@@ -1,4 +1,13 @@
+import type { CxArg } from './tools/classnames.ts';
 export { keyframes } from '@emotion/react';
-export { makeStyles } from './mui/index.ts';
-import { type CxArg } from './tools/classnames.ts';
+export declare const makeStyles: () => <RuleName extends string>(cssObjectByRuleNameOrGetCssObjectByRuleName: Record<RuleName, import("./types.ts").CSSObject> | ((theme: import("../../ui/styleTheme.ts").JBrowseStyleTheme) => Record<RuleName, import("./types.ts").CSSObject>)) => (_params?: unknown, muiStyleOverridesParams?: {
+    props: {
+        classes?: Record<string, string>;
+    };
+} | undefined) => {
+    classes: Record<RuleName, string>;
+    theme: import("../../ui/styleTheme.ts").JBrowseStyleTheme;
+    css: import("./types.ts").Css;
+    cx: import("./types.ts").Cx;
+};
 export declare function cx(...args: CxArg[]): string;

package/esm/util/tss-react/index.js

@@ -1,7 +1,14 @@
 'use client';
+import { useStyleTheme } from '../../ui/PaletteContext.js';
+import { createMakeStyles } from './makeStyles.js';
+import { classnames } from './tools/classnames.js';
 export { keyframes } from '@emotion/react';
-export { makeStyles } from "./mui/index.js";
-import { classnames } from "./tools/classnames.js";
+// The theme a `makeStyles` block is handed is JBrowse's own plain-data one, not
+// Material UI's. It used to be MUI's, and the `useTheme` that fetched it pulled
+// `createTheme` — ~51 KB — into the first paint of every host, whether or not
+// anything Material was on the screen. See ui/styleTheme.ts.
+export const { makeStyles } = createMakeStyles({ useTheme: useStyleTheme });
+// Export cx as a standalone function (wrapper around classnames)
 export function cx(...args) {
     return classnames(args);
 }

package/esm/util/tss-react/makeStyles.js

@@ -1,9 +1,9 @@
 'use client';
 import { useMemo } from 'react';
 import { __unsafe_useEmotionCache } from '@emotion/react';
-import { createUseCssAndCx } from "./cssAndCx.js";
-import { mergeClasses } from "./mergeClasses.js";
-import { getDependencyArrayRef } from "./tools/getDependencyArrayRef.js";
+import { createUseCssAndCx } from './cssAndCx.js';
+import { mergeClasses } from './mergeClasses.js';
+import { getDependencyArrayRef } from './tools/getDependencyArrayRef.js';
 const useContextualCache = __unsafe_useEmotionCache;
 export function createMakeStyles(params) {
     const { useTheme } = params;
@@ -25,11 +25,14 @@ export function createMakeStyles(params) {
                         const cssObject = cssObjectByRuleName[ruleName];
                         result[ruleName] = css(cssObject);
                     }
+                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
                     return result;
                 }, [css, theme]);
                 const propsClasses = muiStyleOverridesParams?.props.classes;
                 const propsClassesRef = getDependencyArrayRef(propsClasses);
-                const mergedClasses = useMemo(() => propsClasses ? mergeClasses(classes, propsClasses, cx) : classes, [classes, propsClassesRef, cx]);
+                const mergedClasses = useMemo(() => propsClasses ? mergeClasses(classes, propsClasses, cx) : classes, 
+                // eslint-disable-next-line @eslint-react/exhaustive-deps -- propsClassesRef is a stable proxy dep for propsClasses
+                [classes, propsClassesRef, cx]);
                 return { classes: mergedClasses, theme, css, cx };
             };
         };

package/esm/util/tss-react/mergeClasses.js

@@ -20,5 +20,6 @@ export function mergeClasses(classesFromUseStyles, classesOverrides, cx) {
         }
         out[ruleName] = className;
     }
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
     return out;
 }

package/esm/util/tss-react/tools/classnames.d.ts

@@ -1,2 +1,5 @@
 export type CxArg = undefined | null | string | boolean | Record<string, boolean | null | undefined> | readonly CxArg[];
+/** Copy pasted from
+ * https://github.com/emotion-js/emotion/blob/23f43ab9f24d44219b0b007a00f4ac681fe8712e/packages/react/src/class-names.js#L17-L63
+ **/
 export declare const classnames: (args: CxArg[]) => string;

package/esm/util/tss-react/tools/classnames.js

@@ -1,3 +1,6 @@
+/** Copy pasted from
+ * https://github.com/emotion-js/emotion/blob/23f43ab9f24d44219b0b007a00f4ac681fe8712e/packages/react/src/class-names.js#L17-L63
+ **/
 export const classnames = (args) => {
     const len = args.length;
     let i = 0;

package/esm/util/tss-react/tools/getDependencyArrayRef.d.ts

@@ -1 +1,19 @@
+/**
+ * useEffect(
+ *    ()=> { ... },
+ *    [ { "foo": "bar" } ]
+ * )
+ * => The callback will be invoked every render.
+ * because { "foo": "bar" } is a new instance every render.
+ *
+ * useEffect(
+ *    ()=> { ... },
+ *    [ getDependencyArrayRef({ "foo": "bar" }) ]
+ * );
+ * => The callback will only be invoked once.
+ *
+ * The optimization will be enabled only if obj is
+ * of the form Record<string, string | number | undefined | null>
+ * otherwise the object is returned (the function is the identity function).
+ */
 export declare function getDependencyArrayRef(obj: any): any;

package/esm/util/tss-react/tools/getDependencyArrayRef.js

@@ -1,3 +1,21 @@
+/**
+ * useEffect(
+ *    ()=> { ... },
+ *    [ { "foo": "bar" } ]
+ * )
+ * => The callback will be invoked every render.
+ * because { "foo": "bar" } is a new instance every render.
+ *
+ * useEffect(
+ *    ()=> { ... },
+ *    [ getDependencyArrayRef({ "foo": "bar" }) ]
+ * );
+ * => The callback will only be invoked once.
+ *
+ * The optimization will be enabled only if obj is
+ * of the form Record<string, string | number | undefined | null>
+ * otherwise the object is returned (the function is the identity function).
+ */
 export function getDependencyArrayRef(obj) {
     if (!(obj instanceof Object) || typeof obj === 'function') {
         return obj;
@@ -7,6 +25,7 @@ export function getDependencyArrayRef(obj) {
         const value = obj[key];
         const typeofValue = typeof value;
         if (!(typeofValue === 'string' ||
+            // eslint-disable-next-line unicorn/prefer-number-properties -- vendored tss-react, keep upstream form
             (typeofValue === 'number' && !isNaN(value)) ||
             typeofValue === 'boolean' ||
             value === undefined ||

package/esm/util/tss-react/types.d.ts

@@ -2,6 +2,7 @@ import type { CxArg } from './tools/classnames.ts';
 import type { CSSObject as CSSObject_base, Interpolation } from '@emotion/react';
 export type CSSInterpolation = Interpolation<undefined>;
 export interface CSSObject extends CSSObject_base {
+    /** https://emotion.sh/docs/labels */
     label?: string;
 }
 export interface Css {
@@ -9,5 +10,4 @@ export interface Css {
     (...args: CSSInterpolation[]): string;
 }
 export type Cx = (...classNames: CxArg[]) => string;
-export declare function matchCSSObject(arg: TemplateStringsArray | CSSInterpolation): arg is CSSObject;
 export type { CxArg } from './tools/classnames.ts';

package/esm/util/tss-react/types.js

@@ -1,6 +1 @@
-export function matchCSSObject(arg) {
-    return (arg instanceof Object &&
-        !('styles' in arg) &&
-        !('length' in arg) &&
-        !('__emotion_styles' in arg));
-}
+export {};

package/esm/util/types/ElementId.js

@@ -1,5 +1,5 @@
 import { types } from '@jbrowse/mobx-state-tree';
-import { nanoid } from "../nanoid.js";
+import { nanoid } from '../nanoid.js';
 export function createElementId() {
     return nanoid(10);
 }

package/esm/util/types/data.d.ts

@@ -0,0 +1,75 @@
+import type { BlobLocation as MUBlobLocation, FileHandleLocation as MUFileHandleLocation, Region as MUIRegion, LocalPathLocation as MULocalPathLocation, NoAssemblyRegion as MUNoAssemblyRegion, UriLocation as MUUriLocation } from './mst.ts';
+import type { SnapshotIn } from '@jbrowse/mobx-state-tree';
+export interface NoAssemblyRegion extends SnapshotIn<typeof MUNoAssemblyRegion> {
+}
+/**
+ * a description of a specific genomic region. assemblyName, refName, start,
+ * end, and reversed
+ */
+export interface Region extends SnapshotIn<typeof MUIRegion> {
+}
+export interface AugmentedRegion extends Region {
+    originalRefName?: string;
+}
+export interface LocalPathLocation extends SnapshotIn<typeof MULocalPathLocation> {
+}
+export interface UriLocation extends SnapshotIn<typeof MUUriLocation> {
+}
+export interface BlobLocation extends SnapshotIn<typeof MUBlobLocation> {
+}
+export interface FileHandleLocation extends SnapshotIn<typeof MUFileHandleLocation> {
+}
+export type FileLocation = LocalPathLocation | UriLocation | BlobLocation | FileHandleLocation;
+export declare function isUriLocation(location: unknown): location is UriLocation;
+export declare function isLocalPathLocation(location: unknown): location is LocalPathLocation;
+export declare function isBlobLocation(location: unknown): location is BlobLocation;
+export declare function isFileHandleLocation(location: unknown): location is FileHandleLocation;
+export interface PreUriLocation {
+    uri: string;
+}
+export interface PreLocalPathLocation {
+    localPath: string;
+}
+export interface PreBlobLocation {
+    blob: File;
+}
+export interface PreFileHandleLocation {
+    handle: FileSystemFileHandle;
+}
+export type PreFileLocation = PreUriLocation | PreLocalPathLocation | PreBlobLocation | PreFileHandleLocation;
+export declare class AuthNeededError extends Error {
+    url: string;
+    constructor(message: string, url: string);
+}
+export declare function isAuthNeededException(exception: unknown): exception is AuthNeededError;
+export interface BasePlugin {
+    version?: string;
+    name: string;
+    url?: string;
+}
+export interface JBrowsePluginVersion {
+    pluginVersion: string;
+    jbrowseRange: string;
+    url?: string;
+    umdUrl?: string;
+    esmUrl?: string;
+    cjsUrl?: string;
+    integrity?: string;
+}
+export interface JBrowsePlugin {
+    name: string;
+    packageName?: string;
+    authors: string[];
+    description: string;
+    location: string;
+    url?: string;
+    umdUrl?: string;
+    esmUrl?: string;
+    cjsUrl?: string;
+    integrity?: string;
+    versions?: JBrowsePluginVersion[];
+    latestUrl?: string;
+    license: string;
+    image?: string;
+    tags?: string[];
+}

package/esm/util/types/data.js

@@ -0,0 +1,41 @@
+export function isUriLocation(location) {
+    return (typeof location === 'object' &&
+        location !== null &&
+        'uri' in location &&
+        !!location.uri);
+}
+export function isLocalPathLocation(location) {
+    return (typeof location === 'object' &&
+        location !== null &&
+        'localPath' in location &&
+        !!location.localPath);
+}
+export function isBlobLocation(location) {
+    return (typeof location === 'object' &&
+        location !== null &&
+        'blobId' in location &&
+        !!location.blobId);
+}
+export function isFileHandleLocation(location) {
+    return (typeof location === 'object' &&
+        location !== null &&
+        'handleId' in location &&
+        !!location.handleId);
+}
+export class AuthNeededError extends Error {
+    url;
+    constructor(message, url) {
+        super(message);
+        this.url = url;
+        this.name = 'AuthNeededError';
+        Object.setPrototypeOf(this, AuthNeededError.prototype);
+    }
+}
+// The name alone, deliberately: this also has to recognize an AuthNeededError
+// that crossed the worker boundary, and serializeError/deserializeError carry
+// `name` through, so the cross-realm case needs no structural fallback. It used
+// to also accept any error carrying a `url` property, which routed ordinary
+// fetch failures into RpcManager's auth-retry path and prompted for a login.
+export function isAuthNeededException(exception) {
+    return exception instanceof Error && exception.name === 'AuthNeededError';
+}