build: fix issue with plotly.js

Author: iobuhov

packages/shared/charts/package.json

@@ -37,7 +37,6 @@
     "dependencies": {
         "classnames": "^2.3.2",
         "deepmerge": "^4.3.1",
-        "plotly.js": "npm:[email protected]",
         "plotly.js-dist-min": "^3.0.0",
         "react-plotly.js": "^2.6.0"
     },

packages/shared/charts/rollup/shared-libs-config.cts

@@ -20,19 +20,17 @@ interface Args {
 
 const bundles = {
     plotly: {
-        // [email protected] use: `import Plotly from 'plotly.js/dist/plotly';`
-        // We redirect this import to min version.
         input: "plotly.js-dist-min",
         file: {
             amd: "plotly.min.js",
             esm: "plotly.min.mjs"
         }
     },
     reactPlotly: {
-        input: "react-plotly.js",
+        input: "react-plotly.js/factory",
         file: {
-            amd: "react-plotly.js",
-            esm: "react-plotly.mjs"
+            amd: "react-plotly_factory.js",
+            esm: "react-plotly_factory.mjs"
         }
     },
     sharedCharts: {
@@ -116,7 +114,9 @@ function sharedCode(bundle: BundleBuildConfig): RollupOptions {
         file: format({ dir: bundle.esmDir, base: bundle.sharedCharts.file.esm }),
         paths: {
             // Replace imports of react-plotly.js with relative path.
-            [bundle.reactPlotly.input]: `./${bundle.reactPlotly.file.esm}`
+            [bundle.reactPlotly.input]: `./${bundle.reactPlotly.file.esm}`,
+            // Replace imports of plotly.js with relative path.
+            [bundle.plotly.input]: `./${bundle.plotly.file.esm}`
         }
     };
 
@@ -125,44 +125,38 @@ function sharedCode(bundle: BundleBuildConfig): RollupOptions {
         file: format({ dir: bundle.amdDir, base: bundle.sharedCharts.file.amd }),
         paths: {
             // Replace imports of react-plotly.js with relative path.
-            [bundle.reactPlotly.input]: `./${bundle.reactPlotly.file.amd}`
+            [bundle.reactPlotly.input]: `./${bundle.reactPlotly.file.amd}`,
+            // Replace imports of plotly.js with relative path.
+            [bundle.plotly.input]: `./${bundle.plotly.file.amd}`
         }
     };
 
     return {
         input: bundle.sharedCharts.input,
         plugins: stdPlugins(bundle),
         // Mark reactPlotly as external to not include react-plotly.js in bundle.
-        external: [...bundle.external, bundle.reactPlotly.input],
+        // Mark plotly as external to not include plotly.js in bundle.
+        external: [...bundle.external, bundle.reactPlotly.input, bundle.plotly.input],
         output: [esmOutput, amdOutput]
     };
 }
 
-/** react-plotly.js bundle config */
+/** This entry create standalone react-plotly.js/factory bundle */
 function reactPlotly(bundle: BundleBuildConfig): RollupOptions {
-    const plotlyImport = "plotly.js/dist/plotly";
     const esmOutput: OutputOptions = {
         format: "es",
-        file: format({ dir: bundle.esmDir, base: bundle.reactPlotly.file.esm }),
-        paths: {
-            // Replace imports of plotly.js with relative path.
-            [plotlyImport]: `./${bundle.plotly.file.esm}`
-        }
+        file: format({ dir: bundle.esmDir, base: bundle.reactPlotly.file.esm })
     };
 
     const amdOutput: OutputOptions = {
         format: "amd",
-        file: format({ dir: bundle.amdDir, base: bundle.reactPlotly.file.amd }),
-        paths: {
-            // Replace imports of plotly.js with relative path.
-            [plotlyImport]: `./${bundle.plotly.file.amd}`
-        }
+        file: format({ dir: bundle.amdDir, base: bundle.reactPlotly.file.amd })
     };
 
     return {
         input: bundle.reactPlotly.input,
         // Mark plotly as external to not include plotly.js in bundle.
-        external: [...bundle.external, plotlyImport],
+        external: [...bundle.external],
         plugins: stdPlugins(bundle),
         output: [esmOutput, amdOutput]
     };
@@ -199,8 +193,8 @@ function plotly(bundle: BundleBuildConfig): RollupOptions {
             // Here we just copy the license file.
             copy({
                 targets: [
-                    { src: "node_modules/plotly.js/dist/plotly.min.js.LICENSE.txt", dest: bundle.amdDir },
-                    { src: "node_modules/plotly.js/dist/plotly.min.js.LICENSE.txt", dest: bundle.esmDir }
+                    { src: "node_modules/plotly.js-dist-min/LICENSE", dest: bundle.amdDir },
+                    { src: "node_modules/plotly.js-dist-min/LICENSE", dest: bundle.esmDir }
                 ],
                 verbose: true
             })

packages/shared/charts/src/components/ChartView.tsx

@@ -1,11 +1,14 @@
-import { Config, Data, Layout } from "plotly.js-dist-min";
-import { createElement, ReactElement, useCallback, useEffect, useMemo, useRef } from "react";
-import ReactPlotlyChartComponent, { PlotParams } from "react-plotly.js";
 import deepmerge from "deepmerge";
+import Plotly, { Config, Data, Layout } from "plotly.js-dist-min";
+import { createElement, ReactElement, useCallback, useEffect, useMemo, useRef } from "react";
+import { type PlotParams } from "react-plotly.js";
+import createPlotComponent from "react-plotly.js/factory";
 import { ChartViewProps, PlotTrace } from "./types";
 
 const PREVENT_DEFAULT_INLINE_STYLES_BY_PASSING_EMPTY_OBJ = {};
 
+const Plot = createPlotComponent(Plotly);
+
 export const ChartView = ({
     data,
     configOptions,
@@ -43,7 +46,7 @@ export const ChartView = ({
     useResizeOnDataReadyEffect(data);
 
     return (
-        <ReactPlotlyChartComponent
+        <Plot
             className="mx-react-plotly-chart"
             data={plotlyData}
             style={PREVENT_DEFAULT_INLINE_STYLES_BY_PASSING_EMPTY_OBJ}