chore: Upgraded @deephaven/jsapi-types to 1.0.0-dev0.33.2 (#389)

package.json

@@ -7,6 +7,7 @@
     "docker": "docker compose up deephaven-plugins --build",
     "start": "run-p \"start:packages -- {@}\" serve:plugins --",
     "build": "lerna run build --stream",
+    "watch:types": "tsc -p . --watch --emitDeclarationOnly false --noEmit",
     "serve:plugins": "vite",
     "start:packages": "lerna run start --stream",
     "test": "jest --watch --changedSince origin/main",

plugins/ui/src/js/package.json

@@ -51,7 +51,7 @@
     "@deephaven/iris-grid": "^0.68.0",
     "@deephaven/jsapi-bootstrap": "^0.68.0",
     "@deephaven/jsapi-components": "^0.68.0",
-    "@deephaven/jsapi-types": "^0.67.0",
+    "@deephaven/jsapi-types": "1.0.0-dev0.33.2",
     "@deephaven/log": "^0.68.0",
     "@deephaven/plugin": "^0.68.0",
     "@deephaven/react-hooks": "^0.68.0",

plugins/ui/src/js/src/DashboardPlugin.tsx

@@ -18,7 +18,7 @@ import {
   DeferredApiBootstrap,
   useObjectFetcher,
 } from '@deephaven/jsapi-bootstrap';
-import { Widget } from '@deephaven/jsapi-types';
+import { dh } from '@deephaven/jsapi-types';
 import { ErrorBoundary } from '@deephaven/components';
 import { useDebouncedCallback } from '@deephaven/react-hooks';
 import styles from './styles.scss?inline';
@@ -89,7 +89,7 @@ export function DashboardPlugin(
       widgetId = shortid.generate(),
       widget,
     }: {
-      fetch: () => Promise<Widget>;
+      fetch: () => Promise<dh.Widget>;
       widgetId: string;
       widget: WidgetDescriptor;
     }) => {
@@ -115,11 +115,11 @@ export function DashboardPlugin(
       widget: WidgetDescriptor;
       dashboardId: string;
     }) => {
-      const { name: title = 'Untitled' } = widget;
+      const { name: title } = widget;
       log.debug('Emitting create dashboard event for', dashboardId, widget);
       emitCreateDashboard(layout.eventHub, {
         pluginId: PLUGIN_NAME,
-        title,
+        title: title ?? 'Untitled',
         data: { openWidgets: { [dashboardId]: { descriptor: widget } } },
       });
     },
@@ -131,7 +131,7 @@ export function DashboardPlugin(
       fetch,
       panelId: widgetId = shortid.generate(),
       widget,
-    }: PanelOpenEventDetail<Widget>) => {
+    }: PanelOpenEventDetail<dh.Widget>) => {
       const { type } = widget;
 
       switch (type) {

plugins/ui/src/js/src/elements/ElementUtils.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Text } from '@adobe/react-spectrum';
-import type { WidgetExportedObject } from '@deephaven/jsapi-types';
+import type { dh } from '@deephaven/jsapi-types';
 import { TestUtils } from '@deephaven/utils';
 import { ELEMENT_KEY, isPrimitive, wrapElementChildren } from './ElementUtils';
 import ObjectView from './ObjectView';
@@ -25,13 +25,13 @@ describe('isPrimitive', () => {
 
 describe('wrapElementChildren', () => {
   const mock = {
-    exportedA1: createMockProxy<WidgetExportedObject>({
+    exportedA1: createMockProxy<dh.WidgetExportedObject>({
       type: 'mock.exported.a',
     }),
-    exportedA2: createMockProxy<WidgetExportedObject>({
+    exportedA2: createMockProxy<dh.WidgetExportedObject>({
       type: 'mock.exported.a',
     }),
-    exportedB1: createMockProxy<WidgetExportedObject>({
+    exportedB1: createMockProxy<dh.WidgetExportedObject>({
       type: 'mock.exported.b',
     }),
   };

plugins/ui/src/js/src/elements/ElementUtils.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Text } from '@adobe/react-spectrum';
-import type { WidgetExportedObject } from '@deephaven/jsapi-types';
+import type { dh } from '@deephaven/jsapi-types';
 import { ITEM_ELEMENT_NAME } from './ElementConstants';
 import ObjectView from './ObjectView';
 
@@ -69,12 +69,12 @@ export function isCallableNode(obj: unknown): obj is CallableNode {
   return obj != null && typeof obj === 'object' && CALLABLE_KEY in obj;
 }
 
-export function isExportedObject(obj: unknown): obj is WidgetExportedObject {
+export function isExportedObject(obj: unknown): obj is dh.WidgetExportedObject {
   return (
     obj != null &&
     typeof obj === 'object' &&
-    typeof (obj as WidgetExportedObject).fetch === 'function' &&
-    typeof (obj as WidgetExportedObject).type === 'string'
+    typeof (obj as dh.WidgetExportedObject).fetch === 'function' &&
+    typeof (obj as dh.WidgetExportedObject).type === 'string'
   );
 }
 
@@ -161,9 +161,9 @@ export function wrapElementChildren(element: ElementNode): ElementNode {
 
   // Derive child keys based on type + index of the occurrence of the type
   const typeMap = new Map<string, number>();
-  const getChildKey = (type: string): string => {
-    const typeCount = typeMap.get(type) ?? 0;
-    typeMap.set(type, typeCount + 1);
+  const getChildKey = (type: string | null | undefined): string => {
+    const typeCount = typeMap.get(String(type)) ?? 0;
+    typeMap.set(String(type), typeCount + 1);
     return `${type}-${typeCount}`;
   };
 

plugins/ui/src/js/src/elements/ObjectView.tsx

@@ -1,36 +1,34 @@
 import React, { useCallback, useMemo } from 'react';
 import Log from '@deephaven/log';
 import { isWidgetPlugin, usePlugins } from '@deephaven/plugin';
-import type { Widget, WidgetExportedObject } from '@deephaven/jsapi-types';
+import type { dh } from '@deephaven/jsapi-types';
 
 const log = Log.module('@deephaven/js-plugin-ui/ObjectView');
 
-export type ObjectViewProps = { object: WidgetExportedObject };
+export type ObjectViewProps = { object: dh.WidgetExportedObject };
 function ObjectView(props: ObjectViewProps) {
   const { object } = props;
   log.info('Object is', object);
+  const { type } = object;
 
   const fetch = useCallback(async () => {
     // We re-export the object in case this object is used in multiple places or closed/opened multiple times
     const reexportedObject = await object.reexport();
-    return reexportedObject.fetch() as Promise<Widget>;
+    return reexportedObject.fetch() as Promise<dh.Widget>;
   }, [object]);
 
   const plugins = usePlugins();
 
   const plugin = useMemo(
     () =>
-      [...plugins.values()]
-        .filter(isWidgetPlugin)
-        .find(p => [p.supportedTypes].flat().includes(object.type)),
-    [plugins, object.type]
+      type == null
+        ? null
+        : [...plugins.values()]
+            .filter(isWidgetPlugin)
+            .find(p => [p.supportedTypes].flat().includes(type)),
+    [plugins, type]
   );
 
-  if (object == null) {
-    // Still loading
-    return null;
-  }
-
   if (plugin != null) {
     const Component = plugin.component;
     // eslint-disable-next-line react/jsx-props-no-spreading

plugins/ui/src/js/src/elements/SpectrumElementUtils.ts

@@ -89,9 +89,16 @@ export function isSpectrumElementNode(
 export function getSpectrumComponent(
   name: SpectrumElementName
 ): ValueOf<typeof SpectrumSupportedTypes> {
-  return SpectrumSupportedTypes[
-    name.substring(
-      SPECTRUM_ELEMENT_TYPE_PREFIX.length
-    ) as keyof typeof SpectrumSupportedTypes
-  ];
+  const Component =
+    SpectrumSupportedTypes[
+      name.substring(
+        SPECTRUM_ELEMENT_TYPE_PREFIX.length
+      ) as keyof typeof SpectrumSupportedTypes
+    ];
+
+  if (Component == null) {
+    throw new Error(`Unknown Spectrum component '${name}'`);
+  }
+
+  return Component;
 }

plugins/ui/src/js/src/elements/SpectrumElementView.tsx

@@ -14,10 +14,13 @@ export function SpectrumElementView({
   element,
 }: SpectrumElementViewProps): JSX.Element | null {
   const { [ELEMENT_KEY]: name, props = {} } = element;
-  const Component = getSpectrumComponent(name);
+
+  const Component = getSpectrumComponent(name) as React.ComponentType<unknown>;
+
   if (Component == null) {
     throw new Error(`Unknown Spectrum component ${name}`);
   }
+
   return (
     // eslint-disable-next-line react/jsx-props-no-spreading, @typescript-eslint/no-explicit-any
     <Component {...mapSpectrumProps(props)} />

plugins/ui/src/js/src/elements/UITable.tsx

@@ -9,9 +9,9 @@ import {
   IrisGridUtils,
 } from '@deephaven/iris-grid';
 import { useApi } from '@deephaven/jsapi-bootstrap';
-import type { Table } from '@deephaven/jsapi-types';
+import type { dh } from '@deephaven/jsapi-types';
 import Log from '@deephaven/log';
-import { getSettings } from '@deephaven/redux';
+import { getSettings, RootState } from '@deephaven/redux';
 import { EMPTY_ARRAY } from '@deephaven/utils';
 import { UITableProps } from './UITableUtils';
 import UITableMouseHandler from './UITableMouseHandler';
@@ -33,9 +33,9 @@ function UITable({
 }: UITableProps) {
   const dh = useApi();
   const [model, setModel] = useState<IrisGridModel>();
-  const [columns, setColumns] = useState<Table['columns']>();
+  const [columns, setColumns] = useState<dh.Table['columns']>();
   const utils = useMemo(() => new IrisGridUtils(dh), [dh]);
-  const settings = useSelector(getSettings);
+  const settings = useSelector(getSettings<RootState>);
 
   const hydratedSorts = useMemo(() => {
     if (sorts !== undefined && columns !== undefined) {
@@ -69,7 +69,7 @@ function UITable({
     let isCancelled = false;
     async function loadModel() {
       const reexportedTable = await exportedTable.reexport();
-      const newTable = (await reexportedTable.fetch()) as Table;
+      const newTable = (await reexportedTable.fetch()) as dh.Table;
       const newModel = await IrisGridModelFactory.makeModel(dh, newTable);
       if (!isCancelled) {
         setColumns(newTable.columns);

plugins/ui/src/js/src/elements/UITableUtils.tsx

@@ -1,4 +1,4 @@
-import type { WidgetExportedObject } from '@deephaven/jsapi-types';
+import type { dh } from '@deephaven/jsapi-types';
 import { ColumnName, DehydratedSort, RowIndex } from '@deephaven/iris-grid';
 import { ELEMENT_KEY, ElementNode, isElementNode } from './ElementUtils';
 import { UITableElementName, UITABLE_ELEMENT_TYPE } from './ElementConstants';
@@ -19,7 +19,7 @@ export type ColumnIndex = number;
 export type RowDataMap = Record<ColumnName, RowDataValue>;
 
 export interface UITableProps {
-  table: WidgetExportedObject;
+  table: dh.WidgetExportedObject;
   onCellPress?: (cellIndex: [ColumnIndex, RowIndex], data: CellData) => void;
   onCellDoublePress?: (
     cellIndex: [ColumnIndex, RowIndex],

plugins/ui/src/js/src/layout/ReactPanel.tsx

@@ -29,7 +29,7 @@ function ReactPanel({ children, title }: ReactPanelProps) {
   // Initialize the `isPanelOpenRef` and `openedWidgetRef` accordingly on initialization
   const isPanelOpenRef = useRef(portal != null);
   const openedMetadataRef = useRef<ReactPanelControl['metadata']>(
-    portal != null ? metadata : null
+    portal == null ? undefined : metadata
   );
   const parent = useParentItem();
   const { eventHub } = layoutManager;

plugins/ui/src/js/src/widget/DashboardWidgetHandler.tsx

@@ -3,7 +3,7 @@
  */
 import React, { useCallback } from 'react';
 import { WidgetDescriptor } from '@deephaven/dashboard';
-import { Widget } from '@deephaven/jsapi-types';
+import type { dh } from '@deephaven/jsapi-types';
 import Log from '@deephaven/log';
 import { ReadonlyWidgetData, WidgetDataUpdate, WidgetId } from './WidgetTypes';
 import WidgetHandler from './WidgetHandler';
@@ -18,7 +18,7 @@ export interface DashboardWidgetHandlerProps {
   widget: WidgetDescriptor;
 
   /** Fetch the widget instance */
-  fetch: () => Promise<Widget>;
+  fetch: () => Promise<dh.Widget>;
 
   /** Widget data to display */
   initialData?: ReadonlyWidgetData;

plugins/ui/src/js/src/widget/WidgetHandler.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { act, render } from '@testing-library/react';
-import type { Widget } from '@deephaven/jsapi-types';
+import type { dh } from '@deephaven/jsapi-types';
 import WidgetHandler, { WidgetHandlerProps } from './WidgetHandler';
 import { DocumentHandlerProps } from './DocumentHandler';
 import {
@@ -40,8 +40,8 @@ it('mounts and unmounts', async () => {
 });
 
 it('updates the document when event is received', async () => {
-  let fetchResolve: (value: Widget | PromiseLike<Widget>) => void;
-  const fetchPromise = new Promise<Widget>(resolve => {
+  let fetchResolve: (value: dh.Widget | PromiseLike<dh.Widget>) => void;
+  const fetchPromise = new Promise<dh.Widget>(resolve => {
     fetchResolve = resolve;
   });
   const fetch = jest.fn(() => fetchPromise);