Build tooling changes (#2922)

* Remove Babel and Parcel

* Add the build script

* Refine the build script

* Also minify

* Comments

* Update .yarn/versions

* Don't minify (#1316)

* yarn types:check

* Nit

* Remove unused script

* Do not require importing React into scope to use JSX in Storybook

* Remove splitting and React from "external"

.storybook/main.ts

@@ -17,6 +17,16 @@ const config: StorybookConfig = {
       strictMode: true,
     },
   },
+  swc: () => ({
+    jsc: {
+      transform: {
+        react: {
+          // Do not require importing React into scope to use JSX
+          runtime: 'automatic',
+        },
+      },
+    },
+  }),
 
   // we need to add aliases to webpack so it knows how to follow
   // to the source of the packages rather than the built version (dist)

.yarn/versions/60c2f256.yml

@@ -0,0 +1,61 @@
+releases:
+  "@radix-ui/number": minor
+  "@radix-ui/primitive": minor
+  "@radix-ui/react-accessible-icon": minor
+  "@radix-ui/react-accordion": minor
+  "@radix-ui/react-alert-dialog": minor
+  "@radix-ui/react-announce": minor
+  "@radix-ui/react-arrow": minor
+  "@radix-ui/react-aspect-ratio": minor
+  "@radix-ui/react-avatar": minor
+  "@radix-ui/react-checkbox": minor
+  "@radix-ui/react-collapsible": minor
+  "@radix-ui/react-collection": minor
+  "@radix-ui/react-compose-refs": minor
+  "@radix-ui/react-context": minor
+  "@radix-ui/react-context-menu": minor
+  "@radix-ui/react-dialog": minor
+  "@radix-ui/react-direction": minor
+  "@radix-ui/react-dismissable-layer": minor
+  "@radix-ui/react-dropdown-menu": minor
+  "@radix-ui/react-focus-guards": minor
+  "@radix-ui/react-focus-scope": minor
+  "@radix-ui/react-form": minor
+  "@radix-ui/react-hover-card": minor
+  "@radix-ui/react-id": minor
+  "@radix-ui/react-label": minor
+  "@radix-ui/react-menu": minor
+  "@radix-ui/react-menubar": minor
+  "@radix-ui/react-navigation-menu": minor
+  "@radix-ui/react-popover": minor
+  "@radix-ui/react-popper": minor
+  "@radix-ui/react-portal": minor
+  "@radix-ui/react-presence": minor
+  "@radix-ui/react-primitive": minor
+  "@radix-ui/react-progress": minor
+  "@radix-ui/react-radio-group": minor
+  "@radix-ui/react-roving-focus": minor
+  "@radix-ui/react-scroll-area": minor
+  "@radix-ui/react-select": minor
+  "@radix-ui/react-separator": minor
+  "@radix-ui/react-slider": minor
+  "@radix-ui/react-slot": minor
+  "@radix-ui/react-switch": minor
+  "@radix-ui/react-tabs": minor
+  "@radix-ui/react-toast": minor
+  "@radix-ui/react-toggle": minor
+  "@radix-ui/react-toggle-group": minor
+  "@radix-ui/react-toolbar": minor
+  "@radix-ui/react-tooltip": minor
+  "@radix-ui/react-use-callback-ref": minor
+  "@radix-ui/react-use-controllable-state": minor
+  "@radix-ui/react-use-escape-keydown": minor
+  "@radix-ui/react-use-layout-effect": minor
+  "@radix-ui/react-use-previous": minor
+  "@radix-ui/react-use-rect": minor
+  "@radix-ui/react-use-size": minor
+  "@radix-ui/react-visually-hidden": minor
+  "@radix-ui/rect": minor
+
+declined:
+  - primitives

build.mjs

@@ -0,0 +1,47 @@
+import { globSync } from 'glob';
+import * as esbuild from 'esbuild';
+import * as tsup from 'tsup';
+
+async function build(path) {
+  const file = `${path}/src/index.ts`;
+  const dist = `${path}/dist`;
+
+  const esbuildConfig = {
+    entryPoints: [file],
+    external: ['@radix-ui/*'],
+    packages: 'external',
+    bundle: true,
+    sourcemap: true,
+    target: 'es2022',
+    outdir: dist,
+  };
+
+  await esbuild.build(esbuildConfig);
+  console.log(`Built ${path}/dist/index.js`);
+
+  await esbuild.build({
+    ...esbuildConfig,
+    format: 'esm',
+    outExtension: { '.js': '.mjs' },
+  });
+  console.log(`Built ${path}/dist/index.mjs`);
+
+  // tsup is used to emit d.ts files only (esbuild can't do that).
+  //
+  // Notes:
+  // 1. Emitting d.ts files is super slow for whatever reason.
+  // 2. It could have fully replaced esbuild (as it uses that internally),
+  //    but at the moment its esbuild version is somewhat outdated.
+  //    It’s also harder to configure and esbuild docs are more thorough.
+  await tsup.build({
+    entry: [file],
+    format: ['cjs', 'esm'],
+    dts: { only: true },
+    outDir: dist,
+    silent: true,
+    external: [/@radix-ui\/.+/],
+  });
+  console.log(`Built ${path}/dist/index.d.ts`);
+}
+
+globSync('packages/*/*').forEach(build);

package.json

@@ -18,16 +18,11 @@
     "cypress:dev": "cypress open",
     "dev": "yarn storybook",
     "build-storybook": "storybook build",
-    "// build": "For context on tsconfig replacements in build scripts, see https://github.com/radix-ui/primitives/pull/361#discussion_r555004944",
-    "build": "yarn build:config && yarn build:packages && yarn build:cleanup",
-    "build:config": "mv tsconfig.json tsconfig.tmp.json && mv tsconfig.production.json tsconfig.json",
-    "build:packages": "parcel build 'packages/*/*/' --no-cache && yarn build:fix-type-defs",
-    "build:fix-type-defs": "node ./scripts/fix-type-defs-imports",
-    "build:cleanup": "mv tsconfig.json tsconfig.production.json && mv tsconfig.tmp.json tsconfig.json",
+    "build": "node build.mjs",
     "publish:stable": "yarn bump:stable && yarn clean && yarn build && yarn workspaces foreach -pvW --exclude primitives --exclude ssr-testing npm publish --tolerate-republish --access public",
     "publish:next": "yarn bump:next && yarn clean && yarn build && yarn workspaces foreach -pvW --exclude primitives --exclude ssr-testing npm publish --tolerate-republish --access public --tag next",
     "clean": "yarn workspaces foreach -pvW --exclude primitives --exclude ssr-testing run clean",
-    "reset": "yarn clean && rm -rf node_modules .yarn/cache .parcel-cache",
+    "reset": "yarn clean && rm -rf node_modules .yarn/cache",
     "bump:stable": "yarn version apply --all",
     "bump:next": "yarn version apply --all --prerelease",
     "bump:check": "yarn version check"
@@ -37,14 +32,6 @@
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.9",
-    "@babel/plugin-transform-typescript": "^7.16.8",
-    "@babel/preset-react": "^7.16.7",
-    "@babel/template": "^7.16.7",
-    "@parcel/babel-plugin-transform-runtime": "^2.4.1",
-    "@parcel/babel-preset-env": "^2.4.1",
-    "@parcel/packager-ts": "2.4.1",
-    "@parcel/transformer-typescript-types": "2.4.1",
     "@stitches/core": "^1.2.8",
     "@storybook/addon-essentials": "^7.6.17",
     "@storybook/addon-storysource": "^7.6.17",
@@ -55,7 +42,6 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.0.1",
     "@testing-library/user-event": "^14.1.0",
-    "@types/babel__template": "^7.4.1",
     "@types/eslint": "^7.28.0",
     "@types/fs-extra": "^11",
     "@types/jest": "^27.4.1",
@@ -65,10 +51,9 @@
     "@types/react-test-renderer": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^5.19.0",
     "@typescript-eslint/parser": "^5.19.0",
-    "babel-eslint": "^10.1.0",
-    "babel-loader": "^8.2.4",
     "cypress": "^8.0.0",
     "cypress-real-events": "^1.5.0",
+    "esbuild": "0.21.4",
     "eslint": "^7.32.0",
     "eslint-config-react-app": "^6.0.0",
     "eslint-plugin-cypress": "^2.11.3",
@@ -85,14 +70,14 @@
     "jest-axe": "^6.0.0",
     "jest-watch-typeahead": "^1.0.0",
     "lint-staged": "^10.5.3",
-    "parcel": "2.4.1",
     "prettier": "^2.0.5",
     "pretty-quick": "^2.0.1",
     "react-test-renderer": "^18.0.0",
     "replace-in-files": "^3.0.0",
     "start-server-and-test": "^1.12.5",
     "storybook": "^7.6.17",
     "ts-jest": "^27.1.4",
+    "tsup": "8.0.2",
     "typescript": "^4.6.3"
   },
   "resolutions": {

packages/core/number/package.json

@@ -34,8 +34,5 @@
   },
   "bugs": {
     "url": "https://github.com/radix-ui/primitives/issues"
-  },
-  "dependencies": {
-    "@babel/runtime": "^7.13.10"
   }
 }

packages/core/primitive/package.json

@@ -34,8 +34,5 @@
   },
   "bugs": {
     "url": "https://github.com/radix-ui/primitives/issues"
-  },
-  "dependencies": {
-    "@babel/runtime": "^7.13.10"
   }
 }

packages/core/rect/package.json

@@ -34,8 +34,5 @@
   },
   "bugs": {
     "url": "https://github.com/radix-ui/primitives/issues"
-  },
-  "dependencies": {
-    "@babel/runtime": "^7.13.10"
   }
 }

packages/react/accessible-icon/package.json

@@ -28,7 +28,6 @@
     "version": "yarn version"
   },
   "dependencies": {
-    "@babel/runtime": "^7.13.10",
     "@radix-ui/react-visually-hidden": "workspace:*"
   },
   "peerDependencies": {

packages/react/accessible-icon/src/AccessibleIcon.stories.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { AccessibleIcon } from '@radix-ui/react-accessible-icon';
 
 export default { title: 'Utilities/AccessibleIcon' };

packages/react/accordion/package.json

@@ -28,7 +28,6 @@
     "version": "yarn version"
   },
   "dependencies": {
-    "@babel/runtime": "^7.13.10",
     "@radix-ui/primitive": "workspace:*",
     "@radix-ui/react-collapsible": "workspace:*",
     "@radix-ui/react-collection": "workspace:*",

packages/react/alert-dialog/package.json

@@ -28,7 +28,6 @@
     "version": "yarn version"
   },
   "dependencies": {
-    "@babel/runtime": "^7.13.10",
     "@radix-ui/primitive": "workspace:*",
     "@radix-ui/react-compose-refs": "workspace:*",
     "@radix-ui/react-context": "workspace:*",

packages/react/announce/package.json

@@ -28,7 +28,6 @@
     "version": "yarn version"
   },
   "dependencies": {
-    "@babel/runtime": "^7.13.10",
     "@radix-ui/react-compose-refs": "workspace:*",
     "@radix-ui/react-primitive": "workspace:*",
     "@radix-ui/react-use-layout-effect": "workspace:*"

packages/react/arrow/package.json

@@ -28,7 +28,6 @@
     "version": "yarn version"
   },
   "dependencies": {
-    "@babel/runtime": "^7.13.10",
     "@radix-ui/react-primitive": "workspace:*"
   },
   "peerDependencies": {

packages/react/arrow/src/Arrow.stories.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { Arrow } from '@radix-ui/react-arrow';
 
 export default { title: 'Utilities/Arrow' };

packages/react/arrow/src/Arrow.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { axe } from 'jest-axe';
 import type { RenderResult } from '@testing-library/react';
 import { render } from '@testing-library/react';

packages/react/aspect-ratio/package.json

@@ -28,7 +28,6 @@
     "version": "yarn version"
   },
   "dependencies": {
-    "@babel/runtime": "^7.13.10",
     "@radix-ui/react-primitive": "workspace:*"
   },
   "peerDependencies": {

packages/react/aspect-ratio/src/AspectRatio.stories.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { css } from '../../../../stitches.config';
 import { AspectRatio } from '@radix-ui/react-aspect-ratio';
 

packages/react/aspect-ratio/src/AspectRatio.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { axe } from 'jest-axe';
 import type { RenderResult } from '@testing-library/react';
 import { render } from '@testing-library/react';

packages/react/avatar/package.json

@@ -28,7 +28,6 @@
     "version": "yarn version"
   },
   "dependencies": {
-    "@babel/runtime": "^7.13.10",
     "@radix-ui/react-context": "workspace:*",
     "@radix-ui/react-primitive": "workspace:*",
     "@radix-ui/react-use-callback-ref": "workspace:*",

packages/react/avatar/src/Avatar.stories.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { css } from '../../../../stitches.config';
 import * as Avatar from '@radix-ui/react-avatar';
 

packages/react/avatar/src/Avatar.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { axe } from 'jest-axe';
 import type { RenderResult } from '@testing-library/react';
 import { render } from '@testing-library/react';

packages/react/checkbox/package.json

@@ -28,7 +28,6 @@
     "version": "yarn version"
   },
   "dependencies": {
-    "@babel/runtime": "^7.13.10",
     "@radix-ui/primitive": "workspace:*",
     "@radix-ui/react-compose-refs": "workspace:*",
     "@radix-ui/react-context": "workspace:*",

packages/react/collapsible/package.json

@@ -28,7 +28,6 @@
     "version": "yarn version"
   },
   "dependencies": {
-    "@babel/runtime": "^7.13.10",
     "@radix-ui/primitive": "workspace:*",
     "@radix-ui/react-compose-refs": "workspace:*",
     "@radix-ui/react-context": "workspace:*",

packages/react/collection/package.json

@@ -28,7 +28,6 @@
     "version": "yarn version"
   },
   "dependencies": {
-    "@babel/runtime": "^7.13.10",
     "@radix-ui/react-compose-refs": "workspace:*",
     "@radix-ui/react-context": "workspace:*",
     "@radix-ui/react-primitive": "workspace:*",

packages/react/compose-refs/package.json

@@ -43,8 +43,5 @@
   },
   "bugs": {
     "url": "https://github.com/radix-ui/primitives/issues"
-  },
-  "dependencies": {
-    "@babel/runtime": "^7.13.10"
   }
 }

packages/react/context-menu/package.json

@@ -28,7 +28,6 @@
     "version": "yarn version"
   },
   "dependencies": {
-    "@babel/runtime": "^7.13.10",
     "@radix-ui/primitive": "workspace:*",
     "@radix-ui/react-context": "workspace:*",
     "@radix-ui/react-menu": "workspace:*",