Split React bindings into @sigmacomputing/plugin-react package

packages/plugin-sdk-react/README.md

@@ -0,0 +1,48 @@
+<p align="center">
+  <a href="https://github.com/sigmacomputing/plugin">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://github.com/sigmacomputing/plugin/blob/main/assets/sigma-logo-dark.svg">
+      <img alt="Sigma Logo" src="https://github.com/sigmacomputing/plugin/blob/main/assets/sigma-logo-light.svg" width="400px">
+    </picture>
+  </a>
+</p>
+
+React bindings for the [`@sigmacomputing/plugin`](https://www.npmjs.com/package/@sigmacomputing/plugin) Client SDK.
+
+This package provides the `SigmaClientProvider` context provider and a set of
+React hooks (`usePlugin`, `useConfig`, `useElementColumns`, `useElementData`,
+etc.) that wrap the framework-agnostic client exported from
+`@sigmacomputing/plugin`.
+
+## Installation
+
+```sh
+yarn add @sigmacomputing/plugin @sigmacomputing/plugin-sdk-react
+# or
+npm install @sigmacomputing/plugin @sigmacomputing/plugin-sdk-react
+```
+
+`react` (`>= 16.8`) is required as a peer dependency.
+
+## Usage
+
+```tsx
+import { client } from '@sigmacomputing/plugin';
+import { SigmaClientProvider, useConfig } from '@sigmacomputing/plugin-sdk-react';
+
+function MyPlugin() {
+  const config = useConfig();
+  return <pre>{JSON.stringify(config, null, 2)}</pre>;
+}
+
+export function App() {
+  return (
+    <SigmaClientProvider client={client}>
+      <MyPlugin />
+    </SigmaClientProvider>
+  );
+}
+```
+
+See the [`@sigmacomputing/plugin` README](https://github.com/sigmacomputing/plugin/blob/main/packages/plugin-sdk/README.md)
+for the full hook reference.

packages/plugin-sdk-react/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@sigmacomputing/plugin-sdk-react",
+  "version": "1.2.0",
+  "description": "React bindings for the Sigma Computing Plugin Client SDK",
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "build": "tsdown",
+    "build:watch": "tsdown --watch",
+    "format": "yarn g:format",
+    "lint": "yarn g:lint",
+    "publish": "yarn g:publlish",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "types": "yarn g:types"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@sigmacomputing/plugin": "^1.2.0",
+    "dequal": "^2.0.3"
+  },
+  "devDependencies": {
+    "tsdown": "^0.21.10",
+    "vitest": "^4.1.5"
+  },
+  "main": "./dist/cjs/index.cjs",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/cjs/index.d.cts",
+  "unpkg": "./dist/umd/sigmacomputing-plugin-sdk-react.umd.js",
+  "jsdelivr": "./dist/umd/sigmacomputing-plugin-sdk-react.umd.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      },
+      "require": {
+        "types": "./dist/cjs/index.d.cts",
+        "default": "./dist/cjs/index.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist/**/*",
+    "src/**/*",
+    "!src/**/__tests__/**/*"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/plugin-sdk/src/react/Context.ts → packages/plugin-sdk-react/src/Context.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 
-import { client } from '../client';
-import { PluginInstance } from '../types';
+import { client, PluginInstance } from '@sigmacomputing/plugin';
 
 export const PluginContext = React.createContext<PluginInstance>(client);

packages/plugin-sdk/src/react/Provider.tsx → packages/plugin-sdk-react/src/Provider.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { PluginInstance } from '../types';
+import { PluginInstance } from '@sigmacomputing/plugin';
 
 import { PluginContext } from './Context';
 

packages/plugin-sdk/src/react/__tests__/hooks.test.tsx → packages/plugin-sdk-react/src/__tests__/hooks.test.tsx

@@ -1,9 +1,8 @@
 import { act, renderHook } from '@testing-library/react';
 import * as React from 'react';
 
-import { initialize } from '../../client/initialize';
-import { PluginInstance } from '../../types';
-import { SigmaClientProvider } from '../Provider';
+import { initialize, PluginInstance } from '@sigmacomputing/plugin';
+
 import {
   useActionEffect,
   useActionTrigger,
@@ -19,6 +18,7 @@ import {
   useUrlParameter,
   useVariable,
 } from '../hooks';
+import { SigmaClientProvider } from '../Provider';
 
 type Subscriber<T> = (value: T) => void;
 

packages/plugin-sdk/src/react/hooks.ts → packages/plugin-sdk-react/src/hooks.ts

@@ -1,3 +1,4 @@
+import { dequal } from 'dequal/lite';
 import * as React from 'react';
 
 import {
@@ -9,8 +10,7 @@
   WorkbookVariable,
   PluginStyle,
   UrlParameter,
-} from '../types';
-import { deepEqual } from '../utils/deepEqual';
+} from '@sigmacomputing/plugin';
 
 import { PluginContext } from './Context';
 
@@ -34,7 +34,7 @@
 
   React.useEffect(() => {
     if (nextOptions == null) return;
-    if (!deepEqual(nextOptions, optionsRef.current)) {
+    if (!dequal(nextOptions, optionsRef.current)) {
       client.config.configureEditorPanel(nextOptions);
       optionsRef.current = nextOptions;
     }
@@ -164,7 +164,7 @@
  */
 export function useVariable(
   id: string,
 ): [WorkbookVariable | undefined, Function] {
   const client = usePlugin();
   const [workbookVariable, setWorkbookVariable] =
     React.useState<WorkbookVariable>();
@@ -194,7 +194,7 @@
  */
 export function useUrlParameter(
   id: string,
 ): [UrlParameter | undefined, (value: string) => void] {
   const client = usePlugin();
   const [urlParameter, setUrlParameter] = React.useState<UrlParameter>();
 
@@ -284,9 +284,9 @@
  * React hook for accessing plugin style with live updates
  * @returns {PluginStyle | undefined} Style properties from the workbook if available
  */
 export function usePluginStyle(): PluginStyle | undefined {
   const client = usePlugin();
   const [style, setStyle] = React.useState<PluginStyle | undefined>();
 
   React.useEffect(() => {
     // Request initial style data on mount and subscribe to updates

packages/plugin-sdk-react/src/index.ts

@@ -0,0 +1,3 @@
+export * from './hooks';
+export type { SigmaClientProviderProps } from './Provider';
+export { SigmaClientProvider } from './Provider';

packages/plugin-sdk-react/tsconfig.app.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.app.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo"
+  },
+  "include": ["src"]
+}

packages/plugin-sdk-react/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.tsbuildinfo",
+
+    "noEmit": true
+  },
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

packages/plugin-sdk-react/tsconfig.node.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.node.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo"
+  },
+  "include": ["tsdown.config.ts", "vitest.config.ts"]
+}

packages/plugin-sdk-react/tsdown.config.ts

@@ -0,0 +1,37 @@
+import { defineConfig } from 'tsdown';
+
+// @ts-ignore - base config is defined outside of this package
+import baseConfig from '../../tsdown.base.ts';
+
+// Split into two configs so dequal stays external for ESM/CJS (consumers
+// install it via npm) but is bundled into the UMD build, where shipping
+// a self-contained file matters more than dedup.
+
+const baseFormat = baseConfig.format as Record<string, any>;
+
+export default [
+  defineConfig({
+    ...baseConfig,
+    format: {
+      esm: baseFormat.esm,
+      cjs: baseFormat.cjs,
+    },
+  }),
+  defineConfig({
+    ...baseConfig,
+    deps: { alwaysBundle: [/^dequal(\/|$)/] },
+    format: {
+      umd: {
+        outputOptions: {
+          ...baseFormat.umd.outputOptions,
+          entryFileNames: 'sigmacomputing-plugin-sdk-react.umd.js',
+          globals: {
+            ...baseFormat.umd.outputOptions.globals,
+            '@sigmacomputing/plugin': 'SigmaPlugin',
+          },
+          name: 'SigmaPluginReact',
+        },
+      },
+    },
+  }),
+];

packages/plugin-sdk-react/vitest.config.ts

@@ -0,0 +1,2 @@
+// @ts-ignore - base config is defined outside of this package
+export { default } from '../../vitest.base.ts';

packages/plugin-sdk/package.json

@@ -14,14 +14,6 @@
     "test:watch": "vitest",
     "types": "yarn g:types"
   },
-  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
-  },
-  "peerDependenciesMeta": {
-    "react": {
-      "optional": true
-    }
-  },
   "devDependencies": {
     "tsdown": "^0.21.10",
     "vitest": "^4.1.5"

packages/plugin-sdk/src/index.ts

@@ -1,5 +1,5 @@
 export * from './types';
-export * from './react';
 export * from './client';
+export { initialize } from './client/initialize';
 
 export { polyfillRequestAnimationFrame } from './utils/polyfillRequestAnimationFrame';

packages/plugin-sdk/tsdown.config.ts

@@ -1,15 +1,2 @@
-import { defineConfig, mergeConfig } from 'tsdown';
-
 // @ts-ignore - base config is defined outside of this package
-import baseConfig from '../../tsdown.base.ts';
-
-import packageJson from './package.json' with { type: 'json' };
-
-export default mergeConfig(
-  baseConfig,
-  defineConfig({
-    define: {
-      __VERSION__: JSON.stringify(packageJson.version),
-    },
-  }),
-);
+export { default } from '../../tsdown.base.ts';

packages/plugin-sdk/vitest.config.ts

@@ -1,15 +1,2 @@
-import { defineConfig, mergeConfig } from 'vitest/config';
-
 // @ts-ignore - base config is defined outside of this package
-import baseConfig from '../../vitest.base.ts';
-
-import packageJson from './package.json' with { type: 'json' };
-
-export default mergeConfig(
-  baseConfig,
-  defineConfig({
-    define: {
-      __VERSION__: JSON.stringify(packageJson.version),
-    },
-  }),
-);
+export { default } from '../../vitest.base.ts';

scripts/bump-version.ts

@@ -109,13 +109,34 @@ const writeNewVersion = (pkgPath: string, version: string): void => {
   writeFileSync(pkgPath, raw.replace(pattern, `$1${version}$2`));
 };
 
+const escapeRegex = (value: string): string =>
+  value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+const bumpInternalDeps = (
+  pkgPath: string,
+  internalPackageNames: readonly string[],
+  version: string,
+): void => {
+  let raw = readFileSync(pkgPath, 'utf8');
+  for (const depName of internalPackageNames) {
+    const pattern = new RegExp(
+      `("${escapeRegex(depName)}"\\s*:\\s*")(?!workspace:)[^"]+(")`,
+      'g',
+    );
+    raw = raw.replace(pattern, `$1^${version}$2`);
+  }
+  writeFileSync(pkgPath, raw);
+};
+
 type TurboQueryLsResponse = {
   packages: {
     items: { name: string; path: string }[];
   };
 };
 
-const findWorkspacePackageJsons = (): string[] => {
+type WorkspacePackage = { name: string; pkgPath: string };
+
+const findWorkspacePackages = (): WorkspacePackage[] => {
   const result = spawnSync(
     'yarn',
     ['turbo', 'query', 'ls', '--output', 'json'],
@@ -137,19 +158,24 @@ const findWorkspacePackageJsons = (): string[] => {
     result.stdout.slice(jsonStart),
   ) as TurboQueryLsResponse;
 
-  return parsed.packages.items.map(item =>
-    path.join(item.path, 'package.json'),
-  );
+  return parsed.packages.items.map(item => ({
+    name: item.name,
+    pkgPath: path.join(item.path, 'package.json'),
+  }));
 };
 
 const main = async (): Promise<void> => {
   const current = readCurrentVersion();
   const choices = buildChoices(current);
   const choice = await promptChoice(current.version, choices);
 
-  const targets = [PACKAGE_JSON_PATH, ...findWorkspacePackageJsons()];
+  const workspaces = findWorkspacePackages();
+  const internalPackageNames = workspaces.map(w => w.name);
+  const targets = [PACKAGE_JSON_PATH, ...workspaces.map(w => w.pkgPath)];
+
   for (const pkgPath of targets) {
     writeNewVersion(pkgPath, choice.next);
+    bumpInternalDeps(pkgPath, internalPackageNames, choice.next);
     console.log(`Bumped ${pkgPath}: ${current.version} -> ${choice.next}`);
   }
 };

vitest.base.ts

@@ -1,8 +1,11 @@
 import { playwright } from '@vitest/browser-playwright';
 import { defineConfig } from 'vitest/config';
 
+import packageJson from './package.json' with { type: 'json' };
+
 export default defineConfig({
   define: {
+    __VERSION__: JSON.stringify(packageJson.version),
     __VITEST_BROWSER__: true.toString(),
   },
   oxc: {