use the new JSX transform

.changeset/fresh-hats-count.md

@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': minor
+---
+
+The build output now uses the [new JSX transform](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) instead of `React.createElement`.

.changeset/lemon-kings-type.md

@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': minor
+---
+
+Replaced dependency on `tslib` with `@swc/helpers`. This is used mainly by the CommonJS build.

.changeset/strange-spiders-count.md

@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': patch
+---
+
+The build output is now (again) formatted using `prettier` for easier debugging.

.changeset/witty-ties-protect.md

@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': patch
+---
+
+Removed all code comments from the build output.

internal/configs/eslint-preset.js

@@ -42,5 +42,7 @@ module.exports = {
     curly: 'error',
     '@typescript-eslint/explicit-module-boundary-types': 'off',
     'no-restricted-imports': ['error', '..'],
+    'react/react-in-jsx-scope': 'off',
+    'react/jsx-uses-react': 'off',
   },
 };

packages/itwinui-react/.swcrc

@@ -2,7 +2,7 @@
   "$schema": "https://json.schemastore.org/swcrc",
   "jsc": {
     "parser": { "syntax": "typescript" },
-    "transform": { "react": { "useBuiltins": true } },
+    "transform": { "react": { "useBuiltins": true, "runtime": "automatic" } },
     "target": "es2022"
   },
   "module": {

packages/itwinui-react/package.json

@@ -62,9 +62,10 @@
     "ux"
   ],
   "scripts": {
-    "build": "pnpm clean:build && tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json && tsc -p tsconfig.react-table.json && pnpm build:styles && pnpm build:post",
+    "build": "pnpm clean:build && pnpm build:js && pnpm build:styles && pnpm build:types && pnpm build:post",
+    "build:js": "node ./scripts/build.mjs",
+    "build:types": "tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json && tsc -p tsconfig.react-table.json",
     "build:styles": "vite build src/styles.js",
-    "build:watch": "concurrently \"tsc -p tsconfig.cjs.json --watch\" \"tsc -p tsconfig.esm.json --watch\"",
     "build:post": "node ./scripts/postBuild.mjs",
     "clean:build": "rimraf esm && rimraf cjs && rimraf react-table.d.ts",
     "clean:coverage": "rimraf coverage",
@@ -85,11 +86,11 @@
   "dependencies": {
     "@floating-ui/react": "^0.26.10",
     "@itwin/itwinui-illustrations-react": "^2.1.0",
+    "@swc/helpers": "^0.5.11",
     "classnames": "^2.3.2",
     "jotai": "^2.8.0",
     "react-table": "^7.8.0",
-    "react-transition-group": "^4.4.5",
-    "tslib": "^2.6.0"
+    "react-transition-group": "^4.4.5"
   },
   "devDependencies": {
     "@swc/cli": "^0.3.12",

packages/itwinui-react/scripts/build.mjs

@@ -0,0 +1,43 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import { execSync } from 'node:child_process';
+
+// https://swc.rs/docs/usage/cli
+const swcOptions = {
+  shared: [
+    '--strip-leading-paths',
+    '--no-swcrc',
+    '--ignore **/*.test.*,**/styles.js/*,**/styles*',
+  ].join(' '),
+
+  // https://swc.rs/docs/configuration/compilation
+  compilerOptions: [
+    '',
+    'jsc.parser.syntax=typescript',
+    'jsc.parser.tsx=true',
+    'jsc.transform.react.useBuiltins=true',
+    'jsc.transform.react.runtime=automatic',
+    'jsc.target=es2020',
+    'jsc.minify.format.comments=false',
+    'jsc.externalHelpers=true',
+    'module.noInterop=true',
+  ].join(' -C '),
+
+  get esm() {
+    return [this.shared, this.compilerOptions, '-C module.type=es6'].join(' ');
+  },
+
+  get cjs() {
+    return [this.shared, this.compilerOptions, '-C module.type=commonjs'].join(
+      ' ',
+    );
+  },
+};
+
+execSync(`pnpm swc src -d esm ${swcOptions.esm}`);
+console.log('✓ Built esm.');
+
+execSync(`pnpm swc src -d cjs ${swcOptions.cjs}`);
+console.log('✓ Built cjs.');

packages/itwinui-react/scripts/postBuild.mjs

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import fs from 'node:fs';
-import { exec } from 'node:child_process';
+import { execSync } from 'node:child_process';
 
 // This creates a dummy package.json file in the cjs folder.
 // Without this, all cjs files would need the .cjs extension
@@ -15,10 +15,12 @@ try {
 }
 
 // Run prettier on all compiled output because it gets jumbled by tsc.
-exec('pnpm exec prettier --write "{esm,cjs}/**/*.js"', (error) => {
-  if (error) {
-    console.error('Error when running prettier', error);
-  } else {
-    console.log('✓ Finished compiling @itwin/itwinui-react');
-  }
-});
+try {
+  execSync(
+    'npx prettier --write --ignore-path="../../.gitignore" "{esm,cjs}/**/*.js"',
+  );
+} catch (error) {
+  console.error('Error when running prettier', error);
+}
+
+console.log('\x1b[32m✓ Finished building @itwin/itwinui-react');

packages/itwinui-react/src/core/Alert/Alert.test.tsx

@@ -3,7 +3,6 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import { fireEvent, render, screen } from '@testing-library/react';
-import * as React from 'react';
 import { userEvent } from '@testing-library/user-event';
 
 import { Alert } from './Alert.js';

packages/itwinui-react/src/core/Avatar/Avatar.test.tsx

@@ -2,7 +2,6 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { SvgUser } from '@itwin/itwinui-icons-react';
 

packages/itwinui-react/src/core/AvatarGroup/AvatarGroup.test.tsx

@@ -2,7 +2,6 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import * as React from 'react';
 import { render } from '@testing-library/react';
 
 import { Avatar } from '../Avatar/Avatar.js';

packages/itwinui-react/src/core/Backdrop/Backdrop.test.tsx

@@ -2,7 +2,6 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import * as React from 'react';
 import { render } from '@testing-library/react';
 import { Backdrop } from './Backdrop.js';
 

packages/itwinui-react/src/core/Badge/Badge.test.tsx

@@ -2,7 +2,6 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import * as React from 'react';
 import { render } from '@testing-library/react';
 
 import { Badge } from './Badge.js';

packages/itwinui-react/src/core/ButtonGroup/ButtonGroup.test.tsx

@@ -4,7 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 import { SvgMore, SvgClose as SvgPlaceholder } from '../../utils/index.js';
 import { fireEvent, render } from '@testing-library/react';
-import * as React from 'react';
 import * as UseOverflow from '../../utils/hooks/useOverflow.js';
 
 import { ButtonGroup } from './ButtonGroup.js';

packages/itwinui-react/src/core/Buttons/Button.test.tsx

@@ -3,7 +3,6 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import { render } from '@testing-library/react';
-import * as React from 'react';
 import { SvgClose as SvgPlaceholder } from '../../utils/index.js';
 import { Button } from './Button.js';
 

packages/itwinui-react/src/core/Buttons/IconButton.test.tsx

@@ -3,7 +3,6 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import { render, screen } from '@testing-library/react';
-import * as React from 'react';
 import { SvgMore } from '../../utils/index.js';
 
 import { IconButton } from './IconButton.js';

packages/itwinui-react/src/core/Buttons/IdeasButton.test.tsx

@@ -3,7 +3,6 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import { render } from '@testing-library/react';
-import * as React from 'react';
 
 import { IdeasButton } from './IdeasButton.js';
 

packages/itwinui-react/src/core/Carousel/Carousel.test.tsx

@@ -2,7 +2,6 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import * as React from 'react';
 import { render } from '@testing-library/react';
 
 import { Carousel } from './Carousel.js';

packages/itwinui-react/src/core/Carousel/CarouselDotsList.test.tsx

@@ -3,7 +3,6 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import { render, screen, act } from '@testing-library/react';
-import * as React from 'react';
 import { CarouselDotsList } from './CarouselDotsList.js';
 import * as UseResizeObserver from '../../utils/hooks/useResizeObserver.js';
 import { userEvent } from '@testing-library/user-event';

packages/itwinui-react/src/core/Checkbox/Checkbox.test.tsx

@@ -3,7 +3,6 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import { render, screen } from '@testing-library/react';
-import * as React from 'react';
 
 import { Checkbox } from './Checkbox.js';
 

packages/itwinui-react/src/core/ColorPicker/ColorInputPanel.test.tsx

@@ -2,7 +2,6 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import * as React from 'react';
 import { act, fireEvent, render } from '@testing-library/react';
 import { ColorPicker } from './ColorPicker.js';
 import { ColorInputPanel } from './ColorInputPanel.js';

packages/itwinui-react/src/core/ColorPicker/ColorPalette.test.tsx

@@ -2,7 +2,6 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import * as React from 'react';
 import { render } from '@testing-library/react';
 import { ColorPalette } from './ColorPalette.js';
 import { ColorPicker } from './ColorPicker.js';

packages/itwinui-react/src/core/ColorPicker/ColorPicker.test.tsx

@@ -2,7 +2,6 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import * as React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 import { getColorValue, ColorPicker } from './ColorPicker.js';
 import { ColorPalette } from './ColorPalette.js';

packages/itwinui-react/src/core/ColorPicker/ColorSwatch.test.tsx

@@ -2,7 +2,6 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import * as React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 import { ColorSwatch } from './ColorSwatch.js';
 import { ColorValue } from '../../utils/index.js';

packages/itwinui-react/src/core/ComboBox/ComboBox.test-types.tsx

@@ -7,7 +7,7 @@
  * (e.g. react-workshop, unit tests, etc.)
  */
 
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 import { ComboBox } from './ComboBox.js';
 
 () => {

packages/itwinui-react/src/core/DatePicker/DatePicker.test.tsx

@@ -4,7 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 import { fireEvent, render, screen } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
-import * as React from 'react';
 import { DatePicker } from './DatePicker.js';
 
 const selectedDaySelector = '.iui-calendar-day-selected';

packages/itwinui-react/src/core/Dialog/Dialog.test.tsx

@@ -2,7 +2,6 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import * as React from 'react';
 import { render, act } from '@testing-library/react';
 import { Dialog } from './Dialog.js';
 import { Button } from '../Buttons/Button.js';

packages/itwinui-react/src/core/Dialog/DialogBackdrop.test.tsx

@@ -2,7 +2,6 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import * as React from 'react';
 import { render } from '@testing-library/react';
 import { DialogBackdrop } from './DialogBackdrop.js';
 import { userEvent } from '@testing-library/user-event';

packages/itwinui-react/src/core/Dialog/DialogButtonBar.test.tsx

@@ -3,7 +3,6 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import { render, screen } from '@testing-library/react';
-import * as React from 'react';
 import { Button } from '../Buttons/Button.js';
 
 import { DialogButtonBar } from './DialogButtonBar.js';

packages/itwinui-react/src/core/Dialog/DialogContent.test.tsx

@@ -3,7 +3,6 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import { render, screen } from '@testing-library/react';
-import * as React from 'react';
 import { DialogContent } from './DialogContent.js';
 
 it('should render in its most basic state', () => {

packages/itwinui-react/src/core/Dialog/DialogMain.test.tsx

@@ -2,7 +2,6 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import * as React from 'react';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { DialogMain } from './DialogMain.js';
 import { DialogTitleBar } from './DialogTitleBar.js';

packages/itwinui-react/src/core/Dialog/DialogTitleBar.test.tsx

@@ -3,7 +3,6 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import { render } from '@testing-library/react';
-import * as React from 'react';
 
 import { DialogTitleBar } from './DialogTitleBar.js';
 

packages/itwinui-react/src/core/Dialog/DialogTitleBarTitle.test.tsx

@@ -3,7 +3,6 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import { render } from '@testing-library/react';
-import * as React from 'react';
 
 import { DialogTitleBarTitle } from './DialogTitleBarTitle.js';
 

packages/itwinui-react/src/core/Divider/Divider.test.tsx

@@ -2,7 +2,6 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import * as React from 'react';
 import { render } from '@testing-library/react';
 
 import { Divider } from './Divider.js';

packages/itwinui-react/src/core/DropdownMenu/DropdownMenu.test.tsx

@@ -2,7 +2,6 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import * as React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { DropdownMenu, type DropdownMenuProps } from './DropdownMenu.js';
 import { Button } from '../Buttons/Button.js';

packages/itwinui-react/src/core/ExpandableBlock/ExpandableBlock.test.tsx

@@ -4,7 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 import { fireEvent, render, screen } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
-import * as React from 'react';
 import { StatusIconMap, SvgMore as SvgPlaceholder } from '../../utils/index.js';
 import * as UseId from '../../utils/hooks/useId.js';
 

packages/itwinui-react/src/core/Fieldset/Fieldset.test.tsx

@@ -2,7 +2,6 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import * as React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 import { Fieldset } from './Fieldset.js';
 import { InputGroup } from '../InputGroup/InputGroup.js';

packages/itwinui-react/src/core/FileUpload/FileUpload.test.tsx

@@ -2,7 +2,6 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import * as React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 
 import { FileUpload } from './FileUpload.js';

packages/itwinui-react/src/core/FileUpload/FileUploadTemplate.test.tsx

@@ -2,7 +2,6 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import * as React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 import { FileUploadTemplate } from './FileUploadTemplate.js';
 import { SvgUpload } from '../../utils/index.js';

packages/itwinui-react/src/core/Flex/Flex.test.tsx

@@ -2,7 +2,6 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import * as React from 'react';
 import { render } from '@testing-library/react';
 
 import { Flex } from './Flex.js';