build: align component-library-react rollup config with `build-util…

…s-react`

packages/component-library-react/package.json

@@ -20,7 +20,14 @@
   "sideEffects": false,
   "type": "module",
   "exports": {
-    ".": "./dist/index.mjs",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs"
+    },
+    "./css": {
+      "types": "./dist/css.d.ts",
+      "import": "./dist/css.mjs"
+    },
     "./dist": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs"
@@ -123,6 +130,7 @@
     "@rollup/plugin-commonjs": "26.0.1",
     "@rollup/plugin-json": "6.1.0",
     "@rollup/plugin-node-resolve": "15.2.3",
+    "@rollup/plugin-typescript": "12.1.0",
     "@testing-library/dom": "8.20.1",
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "13.4.0",
@@ -222,7 +230,7 @@
     "react-dom": "18.3.1",
     "react-vega": "7.6.0",
     "rimraf": "5.0.7",
-    "rollup": "4.18.0",
+    "rollup": "4.23.0",
     "rollup-plugin-delete": "2.0.0",
     "rollup-plugin-filesize": "10.0.0",
     "rollup-plugin-node-externals": "7.1.2",
@@ -231,6 +239,7 @@
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-typescript2": "0.36.0",
     "sass": "1.69.5",
+    "sort-package-json": "2.11.0",
     "tslib": "2.6.2",
     "typescript": "5.6.2",
     "vega": "5.26.1",

packages/component-library-react/rollup-components.config.mjs

@@ -10,6 +10,7 @@ import nodePolyfills from 'rollup-plugin-node-polyfills';
 import peerDepsExternal from 'rollup-plugin-peer-deps-external';
 import postcss from 'rollup-plugin-postcss';
 import typescript from 'rollup-plugin-typescript2';
+
 // `assert` is not yet supported by ESLint <https://github.com/eslint/eslint/discussions/15305>
 // import packageJson from './package.json' assert { type: 'json' };
 
@@ -50,7 +51,9 @@ const createComponentConfig = (name, { css }) => ({
       extensions: ['.css', '.scss'],
       minimize: true,
     }),
-    typescript({ includeDependencies: false }),
+    typescript({
+      tsconfig: css ? './tsconfig.build-css-module.json' : './tsconfig.build.json',
+    }),
     babel({
       presets: ['@babel/preset-react'],
       babelHelpers: 'runtime',

packages/component-library-react/rollup.config.mjs

@@ -1,21 +1,11 @@
 import babel from '@rollup/plugin-babel';
 import commonjs from '@rollup/plugin-commonjs';
-import json from '@rollup/plugin-json';
 import resolve from '@rollup/plugin-node-resolve';
-// import del from 'rollup-plugin-delete';
-import { readFileSync } from 'fs';
+import typescript from 'rollup-plugin-typescript2';
 import filesize from 'rollup-plugin-filesize';
 import nodeExternal from 'rollup-plugin-node-externals';
-import nodePolyfills from 'rollup-plugin-node-polyfills';
 import peerDepsExternal from 'rollup-plugin-peer-deps-external';
-import postcss from 'rollup-plugin-postcss';
-import typescript from 'rollup-plugin-typescript2';
-// `assert` is not yet supported by ESLint <https://github.com/eslint/eslint/discussions/15305>
-// import packageJson from './package.json' assert { type: 'json' };
-
-const packageJson = JSON.parse(readFileSync('./package.json', 'utf8'));
 
-// rollup.config.js
 /**
  * @type {import('rollup').RollupOptions}
  */
@@ -27,7 +17,7 @@ export const outputGlobals = {
 
 export default [
   {
-    input: 'src/index.ts',
+    input: './src/index.ts',
     output: [
       {
         file: './dist/index.mjs',
@@ -38,28 +28,30 @@ export default [
     ],
     plugins: [
       peerDepsExternal(),
-      nodeExternal(),
-      resolve({ browser: true }),
+
+      // Convert CommonJS modules to ES Modules
       commonjs({
         include: /node_modules/,
       }),
-      nodePolyfills(),
-      // del({ targets: ['dist/*', 'pages/*'] }),
-      typescript({ includeDependencies: false }),
-      json(),
+      // Inline imports from `devDependencies`
+      // Leave `dependencies` and `devDependencies` imports as is.
+      // See: https://www.npmjs.com/package/rollup-plugin-node-externals
+      nodeExternal(),
+      resolve(),
+      typescript({ tsconfig: './tsconfig.build.json' }),
       babel({
         presets: ['@babel/preset-react'],
         babelHelpers: 'runtime',
         exclude: ['node_modules/**', 'dist/**'],
         extensions: ['.ts', '.tsx'],
-        inputSourceMap: true,
+        // inputSourceMap: true,
         plugins: ['@babel/plugin-transform-runtime'],
       }),
       filesize(),
     ],
   },
   {
-    input: 'src/css-module/index.ts',
+    input: './src/css-module/index.ts',
     output: [
       {
         file: './dist/css-module/index.mjs',
@@ -68,28 +60,25 @@ export default [
         globals: outputGlobals,
       },
     ],
-    external: [/@babel\/runtime/, 'react-dom', 'react'],
     plugins: [
-      peerDepsExternal({ includeDependencies: true }),
-      nodeExternal(),
-      resolve({ browser: true }),
+      peerDepsExternal(),
+
+      // Convert CommonJS modules to ES Modules
       commonjs({
         include: /node_modules/,
       }),
-      nodePolyfills(),
-      // del({ targets: ['dist/*', 'pages/*'] }),
-      postcss({
-        extensions: ['.css', '.scss'],
-        minimize: true,
-      }),
-      typescript({ includeDependencies: false }),
-      json(),
+      // Inline imports from `devDependencies`
+      // Leave `dependencies` and `devDependencies` imports as is.
+      // See: https://www.npmjs.com/package/rollup-plugin-node-externals
+      nodeExternal(),
+      resolve(),
+      typescript({ tsconfig: './tsconfig.build-css-module.json' }),
       babel({
         presets: ['@babel/preset-react'],
         babelHelpers: 'runtime',
         exclude: ['node_modules/**', 'dist/**'],
         extensions: ['.ts', '.tsx'],
-        inputSourceMap: true,
+        // inputSourceMap: true,
         plugins: ['@babel/plugin-transform-runtime'],
       }),
       filesize(),

packages/component-library-react/tsconfig.build-css-module.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "outDir": "./dist/css-module/",
+    "rootDir": "./src/"
+  }
+}

packages/component-library-react/tsconfig.json

@@ -9,7 +9,7 @@
     { "path": "../components-react/calendar-react/tsconfig.build.json" }
   ],
   "compilerOptions": {
-    "outDir": "dist",
-    "rootDir": "src"
+    "outDir": "./dist/",
+    "rootDir": "./src/"
   }
 }