Charts: Replace Rollup with Webpack

projects/js-packages/charts/changelog/update-change-to-webpack-charts-2

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Replace Rollup with Webpack for charts

projects/js-packages/charts/package.json

@@ -19,13 +19,14 @@
 		"test-coverage": "pnpm run test --coverage",
 		"storybook": "cd ../storybook && pnpm run storybook:dev",
 		"compile-ts": "tsc --pretty",
-		"build": "rollup -c",
-		"build:prod": "rollup -c --environment NODE_ENV:production",
-		"build:dev": "rollup -c --environment NODE_ENV:development",
-		"build:watch": "rollup -c -w",
-		"clean-build": "rm -rf dist/"
+		"clean-build": "rm -rf dist/",
+		"build": "pnpm run build:cjs && pnpm run build:esm && bash ./tools/fixup.sh",
+		"build:cjs": "webpack --config webpack-cjs.cjs --mode production",
+		"build:esm": "webpack --config webpack-esm.cjs --mode production",
+		"build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist"
 	},
 	"dependencies": {
+		"@babel/runtime": "7.26.0",
 		"@react-spring/web": "9.7.3",
 		"@visx/axis": "^3.12.0",
 		"@visx/event": "^3.8.0",
@@ -42,45 +43,50 @@
 		"tslib": "2.5.0"
 	},
 	"devDependencies": {
-		"@rollup/plugin-commonjs": "26.0.1",
-		"@rollup/plugin-json": "6.1.0",
-		"@rollup/plugin-node-resolve": "15.3.0",
-		"@rollup/plugin-terser": "0.4.3",
-		"@rollup/plugin-typescript": "12.1.0",
+		"@babel/core": "7.26.0",
+		"@babel/plugin-transform-runtime": "7.25.9",
+		"@babel/preset-env": "7.26.0",
+		"@babel/preset-react": "7.26.3",
+		"@babel/preset-typescript": "7.26.0",
 		"@storybook/blocks": "8.4.7",
 		"@storybook/react": "8.4.7",
 		"@types/react": "18.3.18",
 		"@types/react-dom": "18.3.5",
+		"babel-loader": "9.1.2",
+		"clean-webpack-plugin": "^4.0.0",
+		"css-loader": "^6.7.0",
 		"jest": "29.7.0",
 		"jest-environment-jsdom": "29.7.0",
 		"jest-extended": "4.0.2",
+		"mini-css-extract-plugin": "^2.7.0",
 		"postcss": "8.4.47",
+		"postcss-loader": "^7.0.0",
 		"postcss-modules": "6.0.1",
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
-		"rollup": "3.29.5",
-		"rollup-plugin-dts": "6.1.1",
-		"rollup-plugin-peer-deps-external": "2.2.4",
-		"rollup-plugin-postcss": "4.0.2",
 		"sass": "1.64.1",
 		"sass-embedded": "1.83.0",
+		"sass-loader": "^13.0.0",
 		"storybook": "8.4.7",
-		"typescript": "5.7.2"
+		"ts-loader": "^9.4.0",
+		"typescript": "5.7.2",
+		"webpack": "^5.88.0",
+		"webpack-cli": "^5.1.0"
 	},
 	"peerDependencies": {
 		"react": "^17.0.0 || ^18.0.0",
 		"react-dom": "^17.0.0 || ^18.0.0"
 	},
 	"exports": {
 		".": {
-			"import": "./dist/index.mjs",
-			"require": "./dist/index.js",
-			"types": "./dist/index.d.ts"
+			"import": "./dist/esm/index.js",
+			"require": "./dist/cjs/index.cjs",
+			"types": "./dist/esm/index.d.ts"
 		},
 		"./components/*": {
-			"import": "./dist/components/*/index.js",
-			"require": "./dist/components/*/index.cjs.js",
-			"types": "./dist/components/*/index.d.ts"
+			"import": "./dist/esm/components/*/index.js",
+			"require": "./dist/cjs/components/*/index.cjs",
+			"types": "./dist/esm/components/*/index.d.ts"
 		},
 		"./style.css": "./dist/style.css"
 	},

projects/js-packages/charts/src/components/bar-chart/bar-chart.tsx

@@ -11,7 +11,7 @@ import { GridControl } from '../grid-control';
 import { Legend } from '../legend';
 import { BaseTooltip } from '../tooltip';
 import styles from './bar-chart.module.scss';
-import type { BaseChartProps, SeriesData } from '../shared/types';
+import type { BaseChartProps, SeriesData } from '../../types';
 
 interface BarChartProps extends BaseChartProps< SeriesData[] > {}
 

projects/js-packages/charts/src/components/grid-control/grid-control.tsx

@@ -1,7 +1,7 @@
 import { GridRows, GridColumns } from '@visx/grid';
 import React from 'react';
 import styles from './grid-control.module.scss';
-import type { GridProps } from '../shared/types';
+import type { GridProps } from '../../types';
 
 const GridControl: React.FC< GridProps > = ( {
 	width,

projects/js-packages/charts/src/components/line-chart/line-chart.tsx

@@ -11,7 +11,7 @@ import { FC } from 'react';
 import { useChartTheme } from '../../providers/theme/theme-provider';
 import { Legend } from '../legend';
 import styles from './line-chart.module.scss';
-import type { BaseChartProps, DataPointDate, SeriesData } from '../shared/types';
+import type { BaseChartProps, DataPointDate, SeriesData } from '../../types';
 
 // TODO: revisit grid and axis options - accept as props for frid lines, axis, values: x, y, all, none
 

projects/js-packages/charts/src/components/line-chart/stories/sample-data.ts

@@ -1,4 +1,4 @@
-import type { SeriesData } from '../../shared/types';
+import type { SeriesData } from '../../types';
 
 // Sample data
 const temperatureData: SeriesData[] = [

projects/js-packages/charts/src/components/pie-chart/pie-chart.tsx

@@ -7,7 +7,7 @@ import { useChartTheme, defaultTheme } from '../../providers/theme';
 import { Legend } from '../legend';
 import { BaseTooltip } from '../tooltip';
 import styles from './pie-chart.module.scss';
-import type { BaseChartProps, DataPointPercentage } from '../shared/types';
+import type { BaseChartProps, DataPointPercentage } from '../../types';
 import type { PieArcDatum } from '@visx/shape/lib/shapes/Pie';
 
 // TODO: add animation

projects/js-packages/charts/src/components/pie-semi-circle-chart/pie-semi-circle-chart.tsx

@@ -9,7 +9,7 @@ import { useChartTheme } from '../../providers/theme/theme-provider';
 import { Legend } from '../legend';
 import { BaseTooltip } from '../tooltip';
 import styles from './pie-semi-circle-chart.module.scss';
-import type { BaseChartProps, DataPointPercentage } from '../shared/types';
+import type { BaseChartProps, DataPointPercentage } from '../../types';
 
 interface PieSemiCircleChartProps extends BaseChartProps< DataPointPercentage[] > {
 	/**

projects/js-packages/charts/src/components/shared/types.d.ts → projects/js-packages/charts/src/types/index.d.ts

@@ -145,3 +145,5 @@ export type GridProps = {
 	 */
 	top?: number;
 };
+
+declare module '*.module.scss';

projects/js-packages/charts/tools/fixup.sh

@@ -0,0 +1,11 @@
+cat >dist/cjs/package.json <<!EOF
+{
+    "type": "commonjs"
+}
+!EOF
+
+cat >dist/esm/package.json <<!EOF
+{
+    "type": "module"
+}
+!EOF

projects/js-packages/charts/tools/webpack.common.cjs

@@ -0,0 +1,83 @@
+const { CleanWebpackPlugin } = require( 'clean-webpack-plugin' );
+const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
+
+// List of components to build individually
+const components = [
+	'components/bar-chart',
+	'components/line-chart',
+	'components/pie-chart',
+	'components/pie-semi-circle-chart',
+	'components/tooltip',
+	'components/legend',
+	'components/grid-control',
+	'providers/theme',
+];
+
+// Common configuration for both ESM and CommonJS builds
+const getCommonConfig = isESM => ( {
+	module: {
+		rules: [
+			{
+				test: /\.(ts|tsx)$/,
+				use: [
+					{
+						loader: 'babel-loader',
+						options: {
+							presets: [ '@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript' ],
+							plugins: [ [ '@babel/plugin-transform-runtime', { useESModules: isESM } ] ],
+						},
+					},
+				],
+				exclude: /node_modules/,
+			},
+			{
+				test: /\.(scss|css)$/,
+				use: [
+					MiniCssExtractPlugin.loader,
+					{
+						loader: 'css-loader',
+						options: {
+							modules: {
+								localIdentName: '[name]__[local]__[hash:base64:5]',
+							},
+							importLoaders: 2,
+						},
+					},
+					'postcss-loader',
+					'sass-loader',
+				],
+			},
+		],
+	},
+	resolve: {
+		extensions: [ '.tsx', '.ts', '.js', '.jsx' ],
+	},
+	externals: [ 'react', 'react-dom', /^@visx\/.*/, '@react-spring/web', 'clsx', 'tslib' ],
+	plugins: [
+		new CleanWebpackPlugin(),
+		new MiniCssExtractPlugin( {
+			filename: pathData => {
+				const name = pathData.chunk.name;
+				if ( name === 'index' ) {
+					return 'style.css';
+				}
+				return `${ name }/style.css`;
+			},
+		} ),
+	],
+} );
+
+// Generate entry points for components
+const getComponentEntries = () => {
+	const entries = {
+		index: './src/index.ts',
+	};
+
+	components.forEach( component => {
+		entries[ component ] = `./src/${ component }/index`;
+	} );
+
+	return entries;
+};
+
+module.exports = { getCommonConfig, getComponentEntries };

projects/js-packages/charts/tsconfig.json

@@ -15,5 +15,5 @@
 		"typeRoots": [ "./node_modules/@types/", "src/*" ]
 	},
 	"include": [ "src" ],
-	"exclude": [ "node_modules", "dist" ]
+	"exclude": [ "node_modules", "dist", "**/stories/*" ]
 }