Replace parcel with tsup. Better types, better tsconfig. Move to …

…ESM. (#6467)

packages/components/news/6467.internal

@@ -0,0 +1 @@
+Replace `parcel` with `tsup`. Better types, better tsconfig. Move to ESM. @sneridagh

packages/components/package.json

@@ -16,23 +16,20 @@
   "bugs": {
     "url": "https://github.com/plone/components/issues"
   },
+  "type": "module",
   "files": [
     "dist",
     "src",
     "README.md"
   ],
-  "source": "./src/index.ts",
-  "main": "./dist/main.js",
-  "module": "./dist/module.mjs",
-  "types": "./dist/index.d.ts",
+  "main": "./dist/index.js",
   "exports": {
+    "./package.json": "./package.json",
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/module.mjs",
-      "require": "./dist/main.js"
+      "import": "./dist/index.js",
+      "default": "./dist/index.cjs"
     },
-    "./dist/*.css": "./dist/*.css",
-    "./src/*": "./src/*"
+    "./dist/*.css": "./dist/*.css"
   },
   "homepage": "https://plone.org",
   "keywords": [
@@ -45,12 +42,13 @@
     "quanta"
   ],
   "scripts": {
-    "build": "parcel build && pnpm build:css",
-    "build:force": "parcel build --no-cache && pnpm build:css",
+    "build": "tsup && pnpm build:css",
+    "build:force": "tsup && pnpm build:css",
     "build:css": "pnpm build:basic && pnpm build:quanta",
     "build:basic": "lightningcss --browserslist --bundle --sourcemap src/styles/basic/main.css -o basic.css && mv basic.css* dist/.",
     "build:quanta": "lightningcss --browserslist --bundle --sourcemap src/styles/quanta/main.css -o quanta.css && mv quanta.css* dist/.",
-    "check-ts": "tsc --project tsconfig.json",
+    "check:exports": "attw --pack .",
+    "check:ts": "tsc --project tsconfig.json",
     "test": "vitest --passWithNoTests",
     "coverage": "vitest run --coverage --no-threads",
     "lint": "pnpm eslint && pnpm prettier && pnpm stylelint && pnpm check-ts",
@@ -77,12 +75,7 @@
     "not dead"
   ],
   "devDependencies": {
-    "@parcel/config-default": "^2.12.0",
-    "@parcel/core": "^2.12.0",
-    "@parcel/packager-ts": "^2.12.0",
-    "@parcel/transformer-js": "^2.12.0",
-    "@parcel/transformer-react-refresh-wrap": "^2.12.0",
-    "@parcel/transformer-typescript-types": "^2.12.0",
+    "@arethetypeswrong/cli": "^0.16.4",
     "@plone/types": "workspace: *",
     "@react-types/shared": "^3.22.0",
     "@storybook/addon-essentials": "^8.0.4",
@@ -107,9 +100,9 @@
     "jsdom": "^22.1.0",
     "lightningcss": "^1.24.0",
     "lightningcss-cli": "^1.24.0",
-    "parcel": "^2.12.0",
     "release-it": "17.1.1",
     "storybook": "^8.0.4",
+    "tsup": "^8.3.5",
     "typescript": "^5.6.3",
     "vite": "^5.4.8",
     "vitest": "^2.1.3",

packages/components/src/components/BlockToolbar/BlockToolbar.tsx

@@ -1,5 +1,8 @@
 import React from 'react';
-import { Toolbar as RACToolbar, ToolbarProps } from 'react-aria-components';
+import {
+  Toolbar as RACToolbar,
+  type ToolbarProps,
+} from 'react-aria-components';
 
 export function BlockToolbar(props: ToolbarProps) {
   return <RACToolbar {...props} className="blocks-toolbar" />;

packages/components/src/components/Button/Button.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef, ForwardedRef } from 'react';
-import { Button as RACButton, ButtonProps } from 'react-aria-components';
+import React, { forwardRef, type ForwardedRef } from 'react';
+import { Button as RACButton, type ButtonProps } from 'react-aria-components';
 
 export const Button = forwardRef(function _Button(
   props: ButtonProps,

packages/components/src/components/Calendar/Calendar.tsx

@@ -4,8 +4,8 @@ import {
   Calendar as RACCalendar,
   CalendarCell,
   CalendarGrid,
-  CalendarProps as RACCalendarProps,
-  DateValue,
+  type CalendarProps as RACCalendarProps,
+  type DateValue,
   Heading,
   Text,
 } from 'react-aria-components';

packages/components/src/components/Checkbox/Checkbox.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {
   Checkbox as RACCheckbox,
-  CheckboxProps as RACCheckboxProps,
+  type CheckboxProps as RACCheckboxProps,
 } from 'react-aria-components';
 
 interface CheckboxProps extends RACCheckboxProps {

packages/components/src/components/CheckboxGroup/CheckboxGroup.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import {
   CheckboxGroup as RACCheckboxGroup,
-  CheckboxGroupProps as RACCheckboxGroupProps,
+  type CheckboxGroupProps as RACCheckboxGroupProps,
   FieldError,
   Text,
-  ValidationResult,
+  type ValidationResult,
 } from 'react-aria-components';
 
 export interface CheckboxGroupProps

packages/components/src/components/ColorArea/ColorArea.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {
   ColorArea as RACColorArea,
-  ColorAreaProps,
+  type ColorAreaProps,
   ColorThumb,
 } from 'react-aria-components';
 

packages/components/src/components/ColorField/ColorField.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import {
   ColorField as RACColorField,
-  ColorFieldProps as RACColorFieldProps,
+  type ColorFieldProps as RACColorFieldProps,
   FieldError,
   Input,
   Label,
   Text,
-  ValidationResult,
+  type ValidationResult,
 } from 'react-aria-components';
 
 export interface ColorFieldProps extends RACColorFieldProps {

packages/components/src/components/ColorPicker/ColorPicker.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import {
   Button,
   ColorPicker as RACColorPicker,
-  ColorPickerProps as RACColorPickerProps,
+  type ColorPickerProps as RACColorPickerProps,
   Dialog,
   DialogTrigger,
   Popover,

packages/components/src/components/ColorSlider/ColorSlider.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {
   ColorSlider as RACColorSlider,
-  ColorSliderProps as RACColorSliderProps,
+  type ColorSliderProps as RACColorSliderProps,
   ColorThumb,
   Label,
   SliderOutput,

packages/components/src/components/ColorSwatch/ColorSwatch.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {
   ColorSwatch as RACColorSwatch,
-  ColorSwatchProps,
+  type ColorSwatchProps,
 } from 'react-aria-components';
 
 export function ColorSwatch(props: ColorSwatchProps) {

packages/components/src/components/ColorSwatchPicker/ColorSwatchPicker.tsx

@@ -2,8 +2,8 @@ import * as React from 'react';
 import {
   ColorSwatchPicker as AriaColorSwatchPicker,
   ColorSwatchPickerItem as AriaColorSwatchPickerItem,
-  ColorSwatchPickerItemProps,
-  ColorSwatchPickerProps,
+  type ColorSwatchPickerItemProps,
+  type ColorSwatchPickerProps,
 } from 'react-aria-components';
 
 import { ColorSwatch } from '../ColorSwatch/ColorSwatch';

packages/components/src/components/ColorWheel/ColorWheel.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import {
   ColorThumb,
   ColorWheel as AriaColorWheel,
-  ColorWheelProps as AriaColorWheelProps,
+  type ColorWheelProps as AriaColorWheelProps,
   ColorWheelTrack,
 } from 'react-aria-components';
 

packages/components/src/components/ComboBox/ComboBox.tsx

@@ -2,16 +2,16 @@ import React from 'react';
 import {
   Button,
   ComboBox as RACComboBox,
-  ComboBoxProps as RACComboBoxProps,
+  type ComboBoxProps as RACComboBoxProps,
   FieldError,
   Input,
   Label,
   ListBox,
   ListBoxItem,
-  ListBoxItemProps,
+  type ListBoxItemProps,
   Popover,
   Text,
-  ValidationResult,
+  type ValidationResult,
 } from 'react-aria-components';
 
 export interface ComboBoxProps<T extends object>

packages/components/src/components/DateField/DateField.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import {
   DateField as RACDateField,
-  DateFieldProps as RACDateFieldProps,
+  type DateFieldProps as RACDateFieldProps,
   DateInput,
   DateSegment,
-  DateValue,
+  type DateValue,
   FieldError,
   Label,
   Text,
-  ValidationResult,
+  type ValidationResult,
 } from 'react-aria-components';
 
 export interface DateFieldProps<T extends DateValue>

packages/components/src/components/DatePicker/DatePicker.tsx

@@ -6,17 +6,17 @@ import {
   CalendarGrid,
   DateInput,
   DatePicker as RACDatePicker,
-  DatePickerProps as RACDatePickerProps,
+  type DatePickerProps as RACDatePickerProps,
   DateSegment,
-  DateValue,
+  type DateValue,
   Dialog,
   FieldError,
   Group,
   Heading,
   Label,
   Popover,
   Text,
-  ValidationResult,
+  type ValidationResult,
 } from 'react-aria-components';
 
 export interface DatePickerProps<T extends DateValue>

packages/components/src/components/DateRangePicker/DateRangePicker.tsx

@@ -5,9 +5,9 @@ import {
   CalendarGrid,
   DateInput,
   DateRangePicker as RACDateRangePicker,
-  DateRangePickerProps as RACDateRangePickerProps,
+  type DateRangePickerProps as RACDateRangePickerProps,
   DateSegment,
-  DateValue,
+  type DateValue,
   Dialog,
   FieldError,
   Group,
@@ -16,7 +16,7 @@ import {
   Popover,
   RangeCalendar,
   Text,
-  ValidationResult,
+  type ValidationResult,
 } from 'react-aria-components';
 
 export interface DateRangePickerProps<T extends DateValue>

packages/components/src/components/Dialog/Dialog.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Dialog as RACDialog, DialogProps } from 'react-aria-components';
+import { Dialog as RACDialog, type DialogProps } from 'react-aria-components';
 
 export function Dialog(props: DialogProps) {
   return <RACDialog {...props} />;

packages/components/src/components/Disclosure/Disclosure.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {
   UNSTABLE_Disclosure as RACDisclosure,
-  DisclosureProps,
+  type DisclosureProps,
 } from 'react-aria-components';
 
 /**

packages/components/src/components/DisclosureGroup/DisclosureGroup.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {
   UNSTABLE_DisclosureGroup as RACDisclosureGroup,
-  DisclosureGroupProps,
+  type DisclosureGroupProps,
 } from 'react-aria-components';
 
 /**

packages/components/src/components/Form/Form.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Form as RACForm, FormProps } from 'react-aria-components';
+import { Form as RACForm, type FormProps } from 'react-aria-components';
 
 export function Form(props: FormProps) {
   return <RACForm {...props} />;

packages/components/src/components/GridList/GridList.tsx

@@ -3,8 +3,8 @@ import {
   Button,
   GridList as RACGridList,
   GridListItem as RACGridListItem,
-  GridListItemProps,
-  GridListProps,
+  type GridListItemProps,
+  type GridListProps,
 } from 'react-aria-components';
 
 import { Checkbox } from '../Checkbox/Checkbox';

packages/components/src/components/Icon/Icon.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react';
+import React, { type ReactElement } from 'react';
 import type {
   AriaLabelingProps,
   DOMProps,
@@ -7,7 +7,7 @@ import type {
 } from '@react-types/shared';
 import {
   baseStyleProps,
-  StyleHandlers,
+  type StyleHandlers,
   useSlotProps,
   useStyleProps,
 } from '@react-spectrum/utils';

packages/components/src/components/ListBox/ListBox.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import {
   ListBox as RACListBox,
   ListBoxItem as RACListBoxItem,
-  ListBoxItemProps,
-  ListBoxProps,
+  type ListBoxItemProps,
+  type ListBoxProps,
 } from 'react-aria-components';
 
 export function ListBox<T extends object>({

packages/components/src/components/Menu/Menu.tsx

@@ -2,12 +2,12 @@ import React from 'react';
 import {
   Menu as RACMenu,
   MenuItem as RACMenuItem,
-  MenuItemProps,
-  MenuProps,
+  type MenuItemProps,
+  type MenuProps,
   MenuTrigger,
-  MenuTriggerProps,
+  type MenuTriggerProps,
   Popover,
-  PressEvent,
+  type PressEvent,
 } from 'react-aria-components';
 
 import { Button } from '../Button/Button';

packages/components/src/components/Meter/Meter.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import {
   Label,
   Meter as RACMeter,
-  MeterProps as RACMeterProps,
+  type MeterProps as RACMeterProps,
 } from 'react-aria-components';
 
 export interface MeterProps extends RACMeterProps {

packages/components/src/components/Modal/Modal.tsx

@@ -1,5 +1,8 @@
 import React from 'react';
-import { Modal as RACModal, ModalOverlayProps } from 'react-aria-components';
+import {
+  Modal as RACModal,
+  type ModalOverlayProps,
+} from 'react-aria-components';
 
 export function Modal(props: ModalOverlayProps) {
   return <RACModal {...props} />;