Merge pull request #368 from plotly/cam/switch-prop-types-to-ts

build: Switch prop-types to TS

Author: camdecoster

.github/workflows/test.yml

@@ -8,6 +8,12 @@ on:
 jobs:
   test:
     runs-on: ubuntu-latest
+
+    strategy:
+      fail-fast: false
+      matrix:
+        react-version: [18, 19]
+
     steps:
       - uses: actions/checkout@v4
 
@@ -19,11 +25,14 @@ jobs:
       - name: Install dependencies
         run: npm install
 
+      - name: Install React ${{ matrix.react-version }}
+        run: npm install --no-save react@${{ matrix.react-version }} react-dom@${{ matrix.react-version }}
+
       - name: List dependency versions
         run: |
           echo "npm: $(npm --version)"
           echo "node: $(node --version)"
-          npm ls || true
+          npm ls react react-dom || true
 
       - name: Run tests
         run: npm run test

eslint.config.mjs

@@ -107,7 +107,7 @@ export default [
       'react/no-is-mounted': ['error'],
       'react/no-unknown-property': ['error'],
       'react/prefer-es6-class': ['error', 'always'],
-      'react/prop-types': 'error',
+      'react/prop-types': 'off',
       yoda: ['error'],
       'spaced-comment': [
         'error',

package-lock.json

@@ -11,16 +11,29 @@
   },
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "unpkg": "./dist/create-plotly-component.min.js",
   "jsdelivr": "./dist/create-plotly-component.min.js",
   "exports": {
     ".": {
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.cjs"
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.cjs"
+      }
     },
     "./factory": {
-      "import": "./dist/factory.mjs",
-      "require": "./dist/factory.cjs"
+      "import": {
+        "types": "./dist/factory.d.mts",
+        "default": "./dist/factory.mjs"
+      },
+      "require": {
+        "types": "./dist/factory.d.ts",
+        "default": "./dist/factory.cjs"
+      }
     },
     "./package.json": "./package.json"
   },
@@ -38,8 +51,9 @@
     "build": "tsup",
     "clean": "rimraf dist",
     "prepublishOnly": "npm run build",
-    "lint": "prettier --trailing-comma es5 --write \"src/**/*.js\" && eslint src",
-    "test": "npm run lint && jest",
+    "lint": "prettier --write \"src/**/*.js\" && eslint src",
+    "typecheck": "tsc",
+    "test": "npm run lint && npm run typecheck && jest",
     "watch-test": "jest --watch",
     "watch": "tsup --watch"
   },
@@ -51,16 +65,14 @@
     "plotly",
     "react"
   ],
-  "dependencies": {
-    "prop-types": "^15.8.1"
-  },
   "devDependencies": {
     "@babel/core": "^7.19.0",
     "@babel/eslint-parser": "^7.29.0",
     "@babel/preset-env": "^7.19.0",
     "@babel/preset-react": "^7.18.6",
     "@eslint/js": "^9.39.0",
     "@testing-library/react": "^16.0.0",
+    "@types/react": "^19.2.17",
     "eslint": "^9.39.0",
     "eslint-config-prettier": "^10.1.0",
     "eslint-plugin-import": "^2.32.0",

package.json

@@ -0,0 +1,77 @@
+import type React from 'react';
+
+/**
+ * The snapshot of plot state passed to figure callbacks.
+ * `data`, `layout`, and the entries of `frames` are plotly.js objects; this
+ * package does not depend on `@types/plotly.js`, so they are typed as
+ * `unknown`. Consumers wanting tighter types can re-declare with imports
+ * from `plotly.js`.
+ */
+export interface Figure {
+  data: unknown[];
+  layout: unknown;
+  frames: unknown[] | null;
+}
+
+export type FigureCallback = (figure: Figure, graphDiv: HTMLElement) => void;
+export type EventCallback = (event: any) => void;
+
+export interface PlotParams {
+  data?: unknown[];
+  layout?: unknown;
+  config?: unknown;
+  frames?: unknown[];
+  revision?: number;
+  onInitialized?: FigureCallback;
+  onUpdate?: FigureCallback;
+  onPurge?: FigureCallback;
+  onError?: (err: Error) => void;
+  debug?: boolean;
+  style?: React.CSSProperties;
+  className?: string;
+  useResizeHandler?: boolean;
+  divId?: string;
+
+  onAfterExport?: EventCallback;
+  onAfterPlot?: EventCallback;
+  onAnimated?: EventCallback;
+  onAnimatingFrame?: EventCallback;
+  onAnimationInterrupted?: EventCallback;
+  onAutoSize?: EventCallback;
+  onBeforeExport?: EventCallback;
+  onBeforeHover?: EventCallback;
+  onButtonClicked?: EventCallback;
+  onClick?: EventCallback;
+  onClickAnnotation?: EventCallback;
+  onClickAnywhere?: EventCallback;
+  onDeselect?: EventCallback;
+  onDoubleClick?: EventCallback;
+  onFramework?: EventCallback;
+  onHover?: EventCallback;
+  onHoverAnywhere?: EventCallback;
+  onLegendClick?: EventCallback;
+  onLegendDoubleClick?: EventCallback;
+  onRelayout?: EventCallback;
+  onRelayouting?: EventCallback;
+  onRestyle?: EventCallback;
+  onRedraw?: EventCallback;
+  onSelected?: EventCallback;
+  onSelecting?: EventCallback;
+  onSliderChange?: EventCallback;
+  onSliderEnd?: EventCallback;
+  onSliderStart?: EventCallback;
+  onSunburstClick?: EventCallback;
+  onTransitioning?: EventCallback;
+  onTransitionInterrupted?: EventCallback;
+  onUnhover?: EventCallback;
+  onWebGlContextLost?: EventCallback;
+}
+
+/**
+ * Build a Plot component bound to a specific plotly.js instance. Use this
+ * when shipping a custom plotly.js bundle (e.g. the basic, cartesian, or
+ * a custom partial bundle) instead of the full library.
+ */
+declare function createPlotlyComponent(Plotly: unknown): React.ComponentType<PlotParams>;
+
+export default createPlotlyComponent;

src/factory.d.ts

@@ -1,5 +1,4 @@
 import React, {Component} from 'react';
-import PropTypes from 'prop-types';
 
 // The naming convention is:
 //   - events are attached as `'plotly_' + eventName.toLowerCase()`
@@ -257,27 +256,6 @@ export default function plotComponentFactory(Plotly) {
     }
   }
 
-  PlotlyComponent.propTypes = {
-    data: PropTypes.arrayOf(PropTypes.object),
-    config: PropTypes.object,
-    layout: PropTypes.object,
-    frames: PropTypes.arrayOf(PropTypes.object),
-    revision: PropTypes.number,
-    onInitialized: PropTypes.func,
-    onPurge: PropTypes.func,
-    onError: PropTypes.func,
-    onUpdate: PropTypes.func,
-    debug: PropTypes.bool,
-    style: PropTypes.object,
-    className: PropTypes.string,
-    useResizeHandler: PropTypes.bool,
-    divId: PropTypes.string,
-  };
-
-  eventNames.forEach((eventName) => {
-    PlotlyComponent.propTypes['on' + eventName] = PropTypes.func;
-  });
-
   PlotlyComponent.defaultProps = {
     debug: false,
     useResizeHandler: false,

src/factory.js

@@ -0,0 +1,7 @@
+import type React from 'react';
+import type {PlotParams} from './factory';
+
+declare const Plot: React.ComponentType<PlotParams>;
+
+export default Plot;
+export {Figure, FigureCallback, EventCallback, PlotParams} from './factory';

src/index.d.ts

@@ -0,0 +1,11 @@
+{
+  "include": ["src/**/*.d.ts"],
+  "compilerOptions": {
+    "noEmit": true,
+    "strict": true,
+    "jsx": "preserve",
+    "esModuleInterop": true,
+    "moduleResolution": "bundler",
+    "target": "es2022"
+  }
+}

tsconfig.json

@@ -1,3 +1,4 @@
+import {copyFile} from 'node:fs/promises';
 import {defineConfig} from 'tsup';
 
 // Mirror browserify-global-shim: rewrite `import React from 'react'` as
@@ -31,9 +32,17 @@ export default defineConfig([
     },
     sourcemap: true,
     clean: true,
-    external: ['react', 'plotly.js', 'prop-types'],
+    external: ['react', 'plotly.js'],
     outDir: 'dist',
     loader: {'.js': 'jsx'},
+    onSuccess: async () => {
+      // Ship the same declarations under both .d.ts (CJS interp) and .d.mts (ESM interp)
+      // so the exports map's per-condition types entries resolve unambiguously.
+      for (const name of ['index', 'factory']) {
+        await copyFile(`src/${name}.d.ts`, `dist/${name}.d.ts`);
+        await copyFile(`src/${name}.d.ts`, `dist/${name}.d.mts`);
+      }
+    },
   },
   // UMD / IIFE for <script>-tag consumers. React is taken from window.React
   // via the plugin above; plotly.js still external (consumer loads it the