@dxos/plugin-sheet 0.6.11 → 0.6.12-main.568932b

package/src/{components/ComputeGraph/custom.ts → graph/testing/test-plugin.ts}

@@ -2,24 +2,36 @@
 // Copyright 2024 DXOS.org
 //
 
-import { FunctionArgumentType } from 'hyperformula';
 import { type InterpreterState } from 'hyperformula/typings/interpreter/InterpreterState';
 import { type ProcedureAst } from 'hyperformula/typings/parser';
 
 import { getDeep } from '@dxos/util';
 
-import { type AsyncFunction, FunctionPluginAsync } from './async-function';
-
-// TODO(burdon): Factor out.
-const parseNumberString = (str: string): number => {
-  return parseFloat(str.replace(/[^\d.]/g, ''));
-};
+import { FunctionArgumentType } from '#hyperformula';
+import { type ComputeGraphPlugin } from '../compute-graph-registry';
+import { type AsyncFunction, AsyncFunctionPlugin } from '../functions';
+import { parseNumberString } from '../util';
 
 /**
+ * Testing functions run locally (not run via EDGE).
  * https://hyperformula.handsontable.com/guide/custom-functions.html#add-a-simple-custom-function
  */
-export class CustomPlugin extends FunctionPluginAsync {
+export class TestPlugin extends AsyncFunctionPlugin {
+  /**
+   * Simple local function returns input value.
+   */
   test(ast: ProcedureAst, state: InterpreterState) {
+    const handler: AsyncFunction = async (_value) => {
+      return _value;
+    };
+
+    return this.runAsyncFunction(ast, state, handler);
+  }
+
+  /**
+   * Simple local function returns random number.
+   */
+  random(ast: ProcedureAst, state: InterpreterState) {
     const handler: AsyncFunction = async () => {
       return Math.random();
     };
@@ -27,6 +39,9 @@ export class CustomPlugin extends FunctionPluginAsync {
     return this.runAsyncFunction(ast, state, handler);
   }
 
+  /**
+   * Async HTTP function.
+   */
   crypto(ast: ProcedureAst, state: InterpreterState) {
     const handler: AsyncFunction = async (_currency) => {
       const currency = (_currency || 'USD').toUpperCase();
@@ -44,9 +59,15 @@ export class CustomPlugin extends FunctionPluginAsync {
   }
 }
 
-CustomPlugin.implementedFunctions = {
+TestPlugin.implementedFunctions = {
   TEST: {
     method: 'test',
+    parameters: [{ argumentType: FunctionArgumentType.NUMBER, optionalArg: false }],
+    isVolatile: true,
+  },
+
+  RANDOM: {
+    method: 'random',
     parameters: [],
     isVolatile: true,
   },
@@ -58,13 +79,22 @@ CustomPlugin.implementedFunctions = {
   },
 };
 
-export const CustomPluginTranslations = {
+export const TestPluginTranslations = {
   enGB: {
-    TEST: 'TEST',
-    CRYPTO: 'CRYPTO',
+    TEST: 'Returns input value',
+    RANDOM: 'Random number',
+    CRYPTO: 'Crypto token value',
   },
   enUS: {
-    TEST: 'TEST',
-    CRYPTO: 'CRYPTO',
+    TEST: 'Returns input value',
+    RANDOM: 'Random number',
+    CRYPTO: 'Crypto token value',
   },
 };
+
+export const testFunctionPlugins: ComputeGraphPlugin[] = [
+  {
+    plugin: TestPlugin,
+    translations: TestPluginTranslations,
+  },
+];

package/src/graph/util.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+// TODO(burdon): Factor out.
+export const parseNumberString = (str: string): number => {
+  return parseFloat(str.replace(/[^\d.]/g, ''));
+};

package/src/hooks/hooks.stories.tsx

@@ -0,0 +1,50 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import '@dxos-theme';
+
+import React, { useEffect, useState } from 'react';
+
+import { useSpace } from '@dxos/react-client/echo';
+import { withClientProvider } from '@dxos/react-client/testing';
+import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
+import { withTheme } from '@dxos/storybook-utils';
+
+import { ComputeGraphContextProvider } from '../components';
+import { createSheet } from '../defs';
+import { useComputeGraph, useSheetModel } from '../hooks';
+import { withComputeGraphDecorator } from '../testing';
+import { SheetType } from '../types';
+
+const Story = () => {
+  const space = useSpace();
+  const graph = useComputeGraph(space);
+  const [sheet, setSheet] = useState<SheetType>();
+  const model = useSheetModel(graph, sheet);
+  useEffect(() => {
+    if (space) {
+      const sheet = space.db.add(createSheet());
+      setSheet(sheet);
+    }
+  }, [space]);
+
+  return (
+    <SyntaxHighlighter language='json'>
+      {JSON.stringify({ space: space?.id, graph: graph?.id, sheet: sheet?.id, model: model?.id }, null, 2)}
+    </SyntaxHighlighter>
+  );
+};
+
+export default {
+  title: 'plugin-sheet/hooks',
+  component: ComputeGraphContextProvider,
+  decorators: [
+    withClientProvider({ types: [SheetType], createIdentity: true, createSpace: true }),
+    withComputeGraphDecorator(),
+    withTheme,
+  ],
+  render: (args: any) => <Story {...args} />,
+};
+
+export const Default = {};

package/src/hooks/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './useComputeGraph';
+export * from './useFormattingModel';
+export * from './useSheetModel';

package/src/hooks/useComputeGraph.ts

@@ -0,0 +1,28 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { useContext } from 'react';
+
+import { raise } from '@dxos/debug';
+import { type Space } from '@dxos/react-client/echo';
+import { useAsyncState } from '@dxos/react-hooks';
+
+import { ComputeGraphContext } from '../components';
+import { type ComputeGraph } from '../graph';
+
+/**
+ * Get existing or create new compute graph for the given space.
+ */
+export const useComputeGraph = (space?: Space): ComputeGraph | undefined => {
+  const { registry } = useContext(ComputeGraphContext) ?? raise(new Error('Missing ComputeGraphContext'));
+  const [graph] = useAsyncState(async () => {
+    if (space) {
+      const graph = registry.getOrCreateGraph(space);
+      await graph.open();
+      return graph;
+    }
+  }, [space, registry]);
+
+  return graph;
+};

package/src/hooks/useFormattingModel.ts

@@ -0,0 +1,11 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { useMemo } from 'react';
+
+import { type SheetModel, FormattingModel } from '../model';
+
+export const useFormattingModel = (model: SheetModel | undefined): FormattingModel | undefined => {
+  return useMemo(() => model && new FormattingModel(model), [model]);
+};

package/src/hooks/useSheetModel.ts

@@ -0,0 +1,40 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { useEffect, useState } from 'react';
+
+import { type ComputeGraph } from '../graph';
+import { SheetModel } from '../model';
+import { type SheetType } from '../types';
+
+export type UseSheetModelOptions = {
+  readonly?: boolean;
+};
+
+export const useSheetModel = (
+  graph?: ComputeGraph,
+  sheet?: SheetType,
+  { readonly }: UseSheetModelOptions = {},
+): SheetModel | undefined => {
+  const [model, setModel] = useState<SheetModel>();
+  useEffect(() => {
+    if (!graph || !sheet) {
+      return;
+    }
+
+    let model: SheetModel | undefined;
+    const t = setTimeout(async () => {
+      model = new SheetModel(graph, sheet, { readonly });
+      await model.open();
+      setModel(model);
+    });
+
+    return () => {
+      clearTimeout(t);
+      void model?.close();
+    };
+  }, [graph, sheet, readonly]);
+
+  return model;
+};

package/src/meta.tsx

@@ -2,9 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-import { GridNine, type IconProps } from '@phosphor-icons/react';
-import React from 'react';
-
 import { pluginMeta } from '@dxos/app-framework';
 
 export const SHEET_PLUGIN = 'dxos.org/plugin/sheet';
@@ -13,6 +10,5 @@ export default pluginMeta({
   id: SHEET_PLUGIN,
   name: 'Sheet',
   description: 'A simple spreadsheet plugin.',
-  iconComponent: (props: IconProps) => <GridNine {...props} />,
-  iconSymbol: 'ph--grid-nine--regular',
+  icon: 'ph--grid-nine--regular',
 });

package/src/{components/Sheet/formatting.ts → model/formatting-model.ts}

@@ -4,17 +4,24 @@
 
 import { type ClassNameValue } from '@dxos/react-ui-types';
 
-import { type SheetModel, type CellAddress, inRange } from '../../model';
-import { ValueTypeEnum } from '../../types';
+import { type SheetModel } from './sheet-model';
+import { type CellAddress, inRange } from '../defs';
+import { addressToIndex, rangeFromIndex } from '../defs';
+import { ValueTypeEnum } from '../types';
+
+export type CellFormat = {
+  value?: string;
+  classNames?: ClassNameValue;
+};
 
 export class FormattingModel {
-  constructor(private readonly model: SheetModel) {}
+  constructor(private readonly _model: SheetModel) {}
 
   /**
    * Get formatted string value and className for cell.
    */
-  getFormatting(cell: CellAddress): { value?: string; classNames?: ClassNameValue } {
-    const value = this.model.getValue(cell);
+  getFormatting(cell: CellAddress): CellFormat {
+    const value = this._model.getValue(cell);
     if (value === undefined || value === null) {
       return {};
     }
@@ -23,15 +30,15 @@ export class FormattingModel {
     const locales = undefined;
 
     // Cell-specific formatting.
-    const idx = this.model.addressToIndex(cell);
-    let formatting = this.model.sheet.formatting?.[idx] ?? {};
+    const idx = addressToIndex(this._model.sheet, cell);
+    let formatting = this._model.sheet.formatting?.[idx] ?? {};
     const classNames = [...(formatting?.classNames ?? [])];
 
     // Range formatting.
     // TODO(burdon): NOTE: D0 means the D column.
     // TODO(burdon): Cache model formatting (e.g., for ranges). Create class out of this function.
-    for (const [idx, _formatting] of Object.entries(this.model.sheet.formatting)) {
-      const range = this.model.rangeFromIndex(idx);
+    for (const [idx, _formatting] of Object.entries(this._model.sheet.formatting)) {
+      const range = rangeFromIndex(this._model.sheet, idx);
       if (inRange(range, cell)) {
         if (_formatting.classNames) {
           classNames.push(..._formatting.classNames);
@@ -46,7 +53,7 @@ export class FormattingModel {
 
     const defaultNumber = 'justify-end font-mono';
 
-    const type = formatting?.type ?? this.model.getValueType(cell);
+    const type = formatting?.type ?? this._model.getValueType(cell);
     switch (type) {
       case ValueTypeEnum.Boolean: {
         return {
@@ -84,17 +91,17 @@ export class FormattingModel {
       //
 
       case ValueTypeEnum.DateTime: {
-        const date = this.model.toLocalDate(value as number);
+        const date = this._model.toLocalDate(value as number);
         return { value: date.toLocaleString(locales), classNames };
       }
 
       case ValueTypeEnum.Date: {
-        const date = this.model.toLocalDate(value as number);
+        const date = this._model.toLocalDate(value as number);
         return { value: date.toLocaleDateString(locales), classNames };
       }
 
       case ValueTypeEnum.Time: {
-        const date = this.model.toLocalDate(value as number);
+        const date = this._model.toLocalDate(value as number);
         return { value: date.toLocaleTimeString(locales), classNames };
       }
 

package/src/model/index.ts

@@ -2,6 +2,5 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './functions';
-export * from './model';
-export * from './types';
+export * from './formatting-model';
+export * from './sheet-model';

package/src/model/sheet-model.test.ts

@@ -0,0 +1,57 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { afterEach, beforeEach, describe, expect, test } from 'vitest';
+
+import { Trigger } from '@dxos/async';
+import { FunctionType } from '@dxos/plugin-script/types';
+
+import { SheetModel } from './sheet-model';
+import { addressFromA1Notation, createSheet } from '../defs';
+import { TestBuilder, testFunctionPlugins } from '../graph/testing';
+import { type CellScalarValue } from '../types';
+
+describe('SheetModel', () => {
+  let testBuilder: TestBuilder;
+  beforeEach(async () => {
+    testBuilder = new TestBuilder({ types: [FunctionType], plugins: testFunctionPlugins });
+    await testBuilder.open();
+  });
+  afterEach(async () => {
+    await testBuilder.close();
+  });
+
+  test('async function', async () => {
+    const space = await testBuilder.client.spaces.create();
+    const graph = testBuilder.registry.createGraph(space);
+    await graph.open();
+
+    // TODO(burdon): Create via factory.
+    const sheet = createSheet({ rows: 5, columns: 5 });
+    const model = new SheetModel(graph, sheet);
+    await model.open();
+    testBuilder.ctx.onDispose(() => model.close());
+
+    // Trigger waits for function invocation.
+    const trigger = new Trigger<CellScalarValue>();
+    model.setValue(addressFromA1Notation('A1'), '=TEST(100)');
+    model.update.once((update) => {
+      const { type } = update;
+      if (type === 'valuesUpdated') {
+        const value = model.getValue(addressFromA1Notation('A1'));
+        trigger.wake(value);
+      }
+    });
+
+    // Initial value will be null.
+    const v1 = model.getValue(addressFromA1Notation('A1'));
+    expect(v1).to.be.null;
+    expect(graph.context.info.invocations.TEST).not.to.exist;
+
+    // Wait until async update triggered.
+    const v2 = await trigger.wait();
+    expect(v2).to.eq(100);
+    expect(graph.context.info.invocations.TEST).to.eq(1);
+  });
+});