diff --git a/.gitignore b/.gitignore index e58286be..1ffec3e4 100644 --- a/.gitignore +++ b/.gitignore @@ -11,3 +11,4 @@ docs/ /styles/ coverage/ .vscode/ +stats.html diff --git a/babel.config.js b/babel.config.js index 828f4ad7..c0ff0646 100644 --- a/babel.config.js +++ b/babel.config.js @@ -11,5 +11,70 @@ module.exports = { '@babel/preset-react', '@babel/preset-typescript', ], - plugins: ['@babel/proposal-object-rest-spread'], + plugins: [ + [ + 'babel-plugin-react-compiler', + { + // Support React 17 as a minimum + target: '17', + logger: { + /** + * @param {string | null} filename + * @param {import('babel-plugin-react-compiler').LoggerEvent} event + */ + logEvent(filename, event) { + if ( + event.kind === 'CompileError' || + event.kind === 'CompileSkip' || + event.kind === 'PipelineError' + ) { + if (event.kind === 'CompileError') { + console.warn( + `\n[React Compiler] \x1b[33mCompilation skipped\x1b[0m: ${filename}`, + ) + } + + if (event.detail?.reason) { + console.error(`Reason: ${event.detail.reason}`) + } + + if (event.detail?.description) { + console.error(`Details: ${event.detail.description}`) + } + + if (event.detail.primaryLocation) { + const sourceLocation = event.detail.primaryLocation() + + if (sourceLocation?.start) { + console.error( + `Location: Line ${sourceLocation.start.line}, Column ${sourceLocation.start.column}`, + ) + } + } + + if (event.detail?.suggestions?.length) { + console.error('Suggestions:') + for (const suggestion of event.detail.suggestions) { + console.error(`• ${suggestion.description}`) + } + } + + if (event.data) { + console.error(`Data: ${event.data}`) + } + } + }, + }, + }, + ], + '@babel/proposal-object-rest-spread', + [ + '@babel/plugin-transform-runtime', + { + // Prevent helpers from being inlined in the output code + // https://babeljs.io/docs/babel-plugin-transform-runtime#version + version: '^7.28.4', + }, + ], + ], } diff --git a/package-lock.json b/package-lock.json index d6bf8b82..b66060f9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "hasInstallScript": true, "license": "MIT", "dependencies": { + "@babel/runtime": "^7.28.4", "aria-hidden": "^1.2.1", "dayjs": "^1.8.10", "patch-package": "^6.4.6", @@ -20,13 +21,15 @@ }, "devDependencies": { "@ariakit/react": "0.4.19", - "@babel/core": "^7.9.6", + "@babel/cli": "7.28.3", + "@babel/core": "7.28.5", "@babel/plugin-proposal-class-properties": "^7.10.1", "@babel/plugin-proposal-export-default-from": "^7.0.0", "@babel/plugin-proposal-export-namespace-from": "^7.0.0", "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6", "@babel/plugin-proposal-object-rest-spread": "^7.10.1", "@babel/plugin-proposal-optional-chaining": "7.21.0", + "@babel/plugin-transform-runtime": "7.28.5", "@babel/plugin-transform-spread": "^7.0.0", "@babel/polyfill": "^7.0.0", "@babel/preset-env": "^7.0.0", @@ -37,6 +40,7 @@ "@doist/prettier-config": "4.0.0", "@doist/tsconfig": "2.0.0", "@geometricpanda/storybook-addon-badges": "^0.2.2", + "@rollup/plugin-babel": "6.1.0", "@rollup/plugin-commonjs": "28.0.9", "@rollup/plugin-node-resolve": "16.0.3", "@rollup/plugin-terser": "0.4.4", @@ -69,6 +73,7 @@ "autoprefixer": "^9.8.0", "babel-core": "^7.0.0-bridge.0", "babel-loader": "^8.1.0", + "babel-plugin-react-compiler": "1.0.0", "chromatic": "^6.11.4", "classnames": "^2.2.5", "css-loader": "^4.2.2", @@ -98,6 +103,7 @@ "prettier": "3.6.2", "raw-loader": "^4.0.1", "react": "^17.0.2", + "react-compiler-runtime": "1.0.0", "react-docgen-typescript-loader": "^3.7.2", "react-dom": "^17.0.2", "react-is": "^17.0.2", @@ -106,6 +112,7 @@ "rimraf": "^3.0.2", "rollup": "2.79.2", "rollup-plugin-styles": "4.0.0", + "rollup-plugin-visualizer": "6.0.5", "style-loader": "^0.23.1", "svg-url-loader": "^6.0.0", "ts-loader": "^8.0.2", @@ -122,6 +129,7 @@ "classnames": "^2.2.5", "prop-types": "^15.6.2", "react": "^17.0.0 || ^18.0.0", + "react-compiler-runtime": "^1.0.0", "react-dom": "^17.0.0 || ^18.0.0" } }, @@ -173,6 +181,46 @@ "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" } }, + "node_modules/@babel/cli": { + "version": "7.28.3", + "resolved": "https://registry.npmjs.org/@babel/cli/-/cli-7.28.3.tgz", + "integrity": "sha512-n1RU5vuCX0CsaqaXm9I0KUCNKNQMy5epmzl/xdSSm70bSqhg9GWhgeosypyQLc0bK24+Xpk1WGzZlI9pJtkZdg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/trace-mapping": "^0.3.28", + "commander": "^6.2.0", + "convert-source-map": "^2.0.0", + "fs-readdir-recursive": "^1.1.0", + "glob": "^7.2.0", + "make-dir": "^2.1.0", + "slash": "^2.0.0" + }, + "bin": { + "babel": "bin/babel.js", + "babel-external-helpers": "bin/babel-external-helpers.js" + }, + "engines": { + "node": ">=6.9.0" + }, + "optionalDependencies": { + "@nicolo-ribaudo/chokidar-2": "2.1.8-no-fsevents.3", + "chokidar": "^3.6.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/cli/node_modules/slash": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz", + "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/@babel/code-frame": { "version": "7.27.1", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz", @@ -1998,6 +2046,27 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@babel/plugin-transform-runtime": { + "version": "7.28.5", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.28.5.tgz", + "integrity": "sha512-20NUVgOrinudkIBzQ2bNxP08YpKprUkRTiRSd2/Z5GOdPImJGkoN4Z7IQe1T5AdyKI1i5L6RBmluqdSzvaq9/w==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-module-imports": "^7.27.1", + "@babel/helper-plugin-utils": "^7.27.1", + "babel-plugin-polyfill-corejs2": "^0.4.14", + "babel-plugin-polyfill-corejs3": "^0.13.0", + "babel-plugin-polyfill-regenerator": "^0.6.5", + "semver": "^6.3.1" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, "node_modules/@babel/plugin-transform-shorthand-properties": { "version": "7.27.1", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.27.1.tgz", @@ -2358,12 +2427,12 @@ } }, "node_modules/@babel/runtime": { - "version": "7.7.2", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.7.2.tgz", - "integrity": "sha512-JONRbXbTXc9WQE2mAZd1p0Z3DZ/6vaQIkgYMSTP3KjRCyd7rCZCcfhCyX+YjwcKxcZ82UrxbRD358bpExNgrjw==", + "version": "7.28.4", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz", + "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==", "license": "MIT", - "dependencies": { - "regenerator-runtime": "^0.13.2" + "engines": { + "node": ">=6.9.0" } }, "node_modules/@babel/template": { @@ -2473,6 +2542,16 @@ "react": ">= 16.8.6" } }, + "node_modules/@devtools-ds/object-inspector/node_modules/@babel/runtime": { + "version": "7.7.2", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.7.2.tgz", + "integrity": "sha512-JONRbXbTXc9WQE2mAZd1p0Z3DZ/6vaQIkgYMSTP3KjRCyd7rCZCcfhCyX+YjwcKxcZ82UrxbRD358bpExNgrjw==", + "dev": true, + "license": "MIT", + "dependencies": { + "regenerator-runtime": "^0.13.2" + } + }, "node_modules/@devtools-ds/object-parser": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/@devtools-ds/object-parser/-/object-parser-1.2.1.tgz", @@ -2581,6 +2660,16 @@ "react": ">= 16.8.6" } }, + "node_modules/@devtools-ds/tree/node_modules/@babel/runtime": { + "version": "7.7.2", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.7.2.tgz", + "integrity": "sha512-JONRbXbTXc9WQE2mAZd1p0Z3DZ/6vaQIkgYMSTP3KjRCyd7rCZCcfhCyX+YjwcKxcZ82UrxbRD358bpExNgrjw==", + "dev": true, + "license": "MIT", + "dependencies": { + "regenerator-runtime": "^0.13.2" + } + }, "node_modules/@discoveryjs/json-ext": { "version": "0.5.7", "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz", @@ -4307,6 +4396,14 @@ "dev": true, "license": "BSD" }, + "node_modules/@nicolo-ribaudo/chokidar-2": { + "version": "2.1.8-no-fsevents.3", + "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.3.tgz", + "integrity": "sha512-s88O1aVtXftvp5bCPB7WnmXc5IwOZZ7YPuwNPt+GtOOXpPvad1LfbmjYv+qII7zP6RU2QGnqve27dnLycEnyEQ==", + "dev": true, + "license": "MIT", + "optional": true + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -4397,6 +4494,33 @@ "url": "https://opencollective.com/pkgr" } }, + "node_modules/@rollup/plugin-babel": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-6.1.0.tgz", + "integrity": "sha512-dFZNuFD2YRcoomP4oYf+DvQNSUA9ih+A3vUqopQx5EdtPGo3WBnQcI/S8pwpz91UsGfL0HsMSOlaMld8HrbubA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-module-imports": "^7.18.6", + "@rollup/pluginutils": "^5.0.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0", + "@types/babel__core": "^7.1.9", + "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0" + }, + "peerDependenciesMeta": { + "@types/babel__core": { + "optional": true + }, + "rollup": { + "optional": true + } + } + }, "node_modules/@rollup/plugin-commonjs": { "version": "28.0.9", "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-28.0.9.tgz", @@ -9128,16 +9252,6 @@ "ts-dedent": "^2.2.0" } }, - "node_modules/@storybook/testing-library/node_modules/@babel/runtime": { - "version": "7.28.4", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz", - "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=6.9.0" - } - }, "node_modules/@storybook/testing-library/node_modules/@testing-library/dom": { "version": "8.20.1", "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.20.1.tgz", @@ -9440,17 +9554,6 @@ "node": ">=18" } }, - "node_modules/@testing-library/dom/node_modules/@babel/runtime": { - "version": "7.28.4", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz", - "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==", - "dev": true, - "license": "MIT", - "peer": true, - "engines": { - "node": ">=6.9.0" - } - }, "node_modules/@testing-library/jest-dom": { "version": "5.17.0", "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz", @@ -9474,16 +9577,6 @@ "yarn": ">=1" } }, - "node_modules/@testing-library/jest-dom/node_modules/@babel/runtime": { - "version": "7.28.4", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz", - "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=6.9.0" - } - }, "node_modules/@testing-library/jest-dom/node_modules/chalk": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz", @@ -9517,16 +9610,6 @@ "react-dom": "<18.0.0" } }, - "node_modules/@testing-library/react/node_modules/@babel/runtime": { - "version": "7.28.4", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz", - "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=6.9.0" - } - }, "node_modules/@testing-library/react/node_modules/@testing-library/dom": { "version": "8.20.1", "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.20.1.tgz", @@ -9597,16 +9680,6 @@ "@testing-library/dom": ">=7.21.4" } }, - "node_modules/@testing-library/user-event/node_modules/@babel/runtime": { - "version": "7.28.4", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz", - "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=6.9.0" - } - }, "node_modules/@tootallnate/once": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz", @@ -12332,16 +12405,6 @@ "npm": ">=6" } }, - "node_modules/babel-plugin-macros/node_modules/@babel/runtime": { - "version": "7.28.4", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz", - "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=6.9.0" - } - }, "node_modules/babel-plugin-polyfill-corejs2": { "version": "0.4.14", "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.14.tgz", @@ -12384,6 +12447,16 @@ "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0" } }, + "node_modules/babel-plugin-react-compiler": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/babel-plugin-react-compiler/-/babel-plugin-react-compiler-1.0.0.tgz", + "integrity": "sha512-Ixm8tFfoKKIPYdCCKYTsqv+Fd4IJ0DQqMyEimo+pxUOMUR9cVPlwTrFt9Avu+3cb6Zp3mAzl+t1MrG2fxxKsxw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/types": "^7.26.0" + } + }, "node_modules/babel-plugin-react-docgen": { "version": "4.2.1", "resolved": "https://registry.npmjs.org/babel-plugin-react-docgen/-/babel-plugin-react-docgen-4.2.1.tgz", @@ -15929,16 +16002,6 @@ "csstype": "^3.0.2" } }, - "node_modules/dom-helpers/node_modules/@babel/runtime": { - "version": "7.28.4", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz", - "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=6.9.0" - } - }, "node_modules/dom-serializer": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz", @@ -18611,6 +18674,13 @@ "dev": true, "license": "Unlicense" }, + "node_modules/fs-readdir-recursive": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/fs-readdir-recursive/-/fs-readdir-recursive-1.1.0.tgz", + "integrity": "sha512-GNanXlVr2pf02+sPN40XN8HG+ePaNcvM0q5mZBd668Obwb0yD5GiUbZOFgwn8kGMY6I3mdyDJzieUy3PTYyTRA==", + "dev": true, + "license": "MIT" + }, "node_modules/fs-write-stream-atomic": { "version": "1.0.10", "resolved": "https://registry.npmjs.org/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz", @@ -28733,16 +28803,6 @@ "node": ">=10" } }, - "node_modules/polished/node_modules/@babel/runtime": { - "version": "7.28.4", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz", - "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=6.9.0" - } - }, "node_modules/posix-character-classes": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz", @@ -30061,15 +30121,6 @@ "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" } }, - "node_modules/react-clientside-effect/node_modules/@babel/runtime": { - "version": "7.28.4", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz", - "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==", - "license": "MIT", - "engines": { - "node": ">=6.9.0" - } - }, "node_modules/react-colorful": { "version": "5.6.1", "resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.6.1.tgz", @@ -30081,6 +30132,16 @@ "react-dom": ">=16.8.0" } }, + "node_modules/react-compiler-runtime": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/react-compiler-runtime/-/react-compiler-runtime-1.0.0.tgz", + "integrity": "sha512-rRfjYv66HlG8896yPUDONgKzG5BxZD1nV9U6rkm+7VCuvQc903C4MjcoZR4zPw53IKSOX9wMQVpA1IAbRtzQ7w==", + "dev": true, + "license": "MIT", + "peerDependencies": { + "react": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^0.0.0-experimental" + } + }, "node_modules/react-docgen": { "version": "5.4.3", "resolved": "https://registry.npmjs.org/react-docgen/-/react-docgen-5.4.3.tgz", @@ -30169,16 +30230,6 @@ "typescript": ">= 3.x" } }, - "node_modules/react-docgen/node_modules/@babel/runtime": { - "version": "7.28.4", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz", - "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=6.9.0" - } - }, "node_modules/react-docgen/node_modules/commander": { "version": "2.20.3", "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", @@ -30936,6 +30987,7 @@ "version": "0.13.11", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==", + "dev": true, "license": "MIT" }, "node_modules/regex-not": { @@ -31859,6 +31911,47 @@ "node": ">=4" } }, + "node_modules/rollup-plugin-visualizer": { + "version": "6.0.5", + "resolved": "https://registry.npmjs.org/rollup-plugin-visualizer/-/rollup-plugin-visualizer-6.0.5.tgz", + "integrity": "sha512-9+HlNgKCVbJDs8tVtjQ43US12eqaiHyyiLMdBwQ7vSZPiHMysGNo2E88TAp1si5wx8NAoYriI2A5kuKfIakmJg==", + "dev": true, + "license": "MIT", + "dependencies": { + "open": "^8.0.0", + "picomatch": "^4.0.2", + "source-map": "^0.7.4", + "yargs": "^17.5.1" + }, + "bin": { + "rollup-plugin-visualizer": "dist/bin/cli.js" + }, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "rolldown": "1.x || ^1.0.0-beta", + "rollup": "2.x || 3.x || 4.x" + }, + "peerDependenciesMeta": { + "rolldown": { + "optional": true + }, + "rollup": { + "optional": true + } + } + }, + "node_modules/rollup-plugin-visualizer/node_modules/source-map": { + "version": "0.7.6", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.6.tgz", + "integrity": "sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==", + "dev": true, + "license": "BSD-3-Clause", + "engines": { + "node": ">= 12" + } + }, "node_modules/rst-selector-parser": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/rst-selector-parser/-/rst-selector-parser-2.2.3.tgz", diff --git a/package.json b/package.json index e046523c..227727a9 100644 --- a/package.json +++ b/package.json @@ -65,17 +65,20 @@ "classnames": "^2.2.5", "prop-types": "^15.6.2", "react": "^17.0.0 || ^18.0.0", + "react-compiler-runtime": "^1.0.0", "react-dom": "^17.0.0 || ^18.0.0" }, "devDependencies": { "@ariakit/react": "0.4.19", - "@babel/core": "^7.9.6", + "@babel/cli": "7.28.3", + "@babel/core": "7.28.5", "@babel/plugin-proposal-class-properties": "^7.10.1", "@babel/plugin-proposal-export-default-from": "^7.0.0", "@babel/plugin-proposal-export-namespace-from": "^7.0.0", "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6", "@babel/plugin-proposal-object-rest-spread": "^7.10.1", "@babel/plugin-proposal-optional-chaining": "7.21.0", + "@babel/plugin-transform-runtime": "7.28.5", "@babel/plugin-transform-spread": "^7.0.0", "@babel/polyfill": "^7.0.0", "@babel/preset-env": "^7.0.0", @@ -86,6 +89,7 @@ "@doist/prettier-config": "4.0.0", "@doist/tsconfig": "2.0.0", "@geometricpanda/storybook-addon-badges": "^0.2.2", + "@rollup/plugin-babel": "6.1.0", "@rollup/plugin-commonjs": "28.0.9", "@rollup/plugin-node-resolve": "16.0.3", "@rollup/plugin-terser": "0.4.4", @@ -118,6 +122,7 @@ "autoprefixer": "^9.8.0", "babel-core": "^7.0.0-bridge.0", "babel-loader": "^8.1.0", + "babel-plugin-react-compiler": "1.0.0", "chromatic": "^6.11.4", "classnames": "^2.2.5", "css-loader": "^4.2.2", @@ -147,6 +152,7 @@ "prettier": "3.6.2", "raw-loader": "^4.0.1", "react": "^17.0.2", + "react-compiler-runtime": "1.0.0", "react-docgen-typescript-loader": "^3.7.2", "react-dom": "^17.0.2", "react-is": "^17.0.2", @@ -155,6 +161,7 @@ "rimraf": "^3.0.2", "rollup": "2.79.2", "rollup-plugin-styles": "4.0.0", + "rollup-plugin-visualizer": "6.0.5", "style-loader": "^0.23.1", "svg-url-loader": "^6.0.0", "ts-loader": "^8.0.2", @@ -163,6 +170,7 @@ "webpack": "^4.43.0" }, "dependencies": { + "@babel/runtime": "^7.28.4", "aria-hidden": "^1.2.1", "dayjs": "^1.8.10", "patch-package": "^6.4.6", diff --git a/rollup.config.mjs b/rollup.config.mjs index 44ace95b..4834c118 100644 --- a/rollup.config.mjs +++ b/rollup.config.mjs @@ -1,16 +1,20 @@ import typescript from '@rollup/plugin-typescript' import resolve from '@rollup/plugin-node-resolve' +import { babel } from '@rollup/plugin-babel' import commonjs from '@rollup/plugin-commonjs' import styles from 'rollup-plugin-styles' import terser from '@rollup/plugin-terser' import { exec } from 'child_process' +import { visualizer } from 'rollup-plugin-visualizer' const isWatchMode = process.env.ROLLUP_WATCH === 'true' const onSuccessCallback = process.env.ON_SUCCESS const external = [ + /@babel\/runtime/, 'react', 'react-dom', + 'react-compiler-runtime', 'classnames', 'prop-types', '@ariakit/react', @@ -23,7 +27,17 @@ const external = [ 'tslib', ] -const basePlugins = [resolve(), commonjs()] +const basePlugins = [ + resolve({ + extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'], + }), + commonjs(), + babel({ + babelHelpers: 'runtime', + extensions: ['.js', '.jsx', '.ts', '.tsx'], + exclude: 'node_modules/**', + }), +] const baseStylesConfig = { autoModules: /\.module\.css$/, @@ -66,6 +80,7 @@ function createConfig({ preserveModules, withDeclarations, withMinification, + withVisualizer, onSuccessCommand, }) { return { @@ -88,16 +103,22 @@ function createConfig({ ...baseStylesConfig, ...(withMinification && { minimize: true }), }), - typescript({ - ...baseTypescriptConfig, - compilerOptions: { - outDir: outputDir || 'dist', - ...(withDeclarations - ? { declaration: true, declarationMap: false } - : { declaration: false, declarationMap: false, declarationDir: undefined }), - }, - }), + ...(withDeclarations + ? [ + typescript({ + ...baseTypescriptConfig, + noForceEmit: true, + compilerOptions: { + outDir: outputDir || 'dist', + declaration: true, + declarationMap: false, + emitDeclarationOnly: true, + }, + }), + ] + : []), ...(withMinification ? [terser()] : []), + ...(withVisualizer ? [visualizer({ gzipSize: true })] : []), ...(onSuccessCommand ? [onSuccess(onSuccessCommand)] : []), ], } @@ -108,6 +129,7 @@ const es = createConfig({ format: 'esm', outputDir: 'es', preserveModules: true, + withVisualizer: true, }) // CJS unbundled build with TypeScript declarations (lib/ folder)