fix(fuselage)!: Bundling size

.changeset/sour-monkeys-change.md

@@ -0,0 +1,5 @@
+---
+'@rocket.chat/fuselage': minor
+---
+
+Reduces the bundle size of `@rocket.chat/fuselage` by externalizing more dependencies and increasing the ECMAScript version.

.github/workflows/cd.yml

@@ -20,7 +20,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: '22.16.0'
+          node-version: '22.19.0'
           cache: 'yarn'
       - uses: actions/cache@v4
         id: yarn-cache
@@ -66,7 +66,7 @@ jobs:
           fetch-depth: 0
       - uses: actions/setup-node@v4
         with:
-          node-version: '22.16.0'
+          node-version: '22.19.0'
           registry-url: 'https://registry.npmjs.org'
           scope: '@rocket.chat'
           cache: 'yarn'

.github/workflows/ci-pr.yml

@@ -22,7 +22,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: '22.16.0'
+          node-version: '22.19.0'
           cache: 'yarn'
       - uses: actions/cache@v4
         id: yarn-cache

.yarnrc.yml

@@ -6,4 +6,4 @@ enableGlobalCache: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.9.2.cjs
+yarnPath: .yarn/releases/yarn-4.9.4.cjs

eslint.config.mjs

@@ -426,10 +426,12 @@ export default tseslint.config(
       },
     },
   },
+  tseslint.configs.eslintRecommended,
   ...tseslint.configs.recommended,
   {
     files: ['**/*.{ts,tsx,cts,ctsx,mts,mtsx}'],
     rules: {
+      '@typescript-eslint/consistent-type-imports': 'error',
       '@typescript-eslint/no-dupe-class-members': 'error',
       '@typescript-eslint/no-explicit-any': 'off',
       '@typescript-eslint/no-unused-vars': [

package.json

@@ -50,12 +50,9 @@
     "typescript-eslint": "~8.38.0",
     "update-readme": "workspace:~"
   },
-  "packageManager": "yarn@4.9.2",
-  "engines": {
-    "node": "22.16.0"
-  },
+  "packageManager": "yarn@4.9.4",
   "volta": {
-    "node": "22.16.0",
-    "yarn": "4.9.2"
+    "node": "22.19.0",
+    "yarn": "4.9.4"
   }
 }

packages/fuselage-forms/src/Field/Field.tsx

@@ -1,5 +1,5 @@
 import { Field as FieldComponent } from '@rocket.chat/fuselage';
-import { ComponentProps, ReactNode } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
 
 import FieldProvider from './FieldProvider';
 

packages/fuselage-forms/src/Field/FieldProvider.tsx

@@ -1,7 +1,9 @@
-import { useState, useCallback, ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import { useState, useCallback } from 'react';
 import { useId } from 'react-aria';
 
-import { FieldContext, LabelTypes, FieldType } from './FieldContext';
+import type { LabelTypes, FieldType } from './FieldContext';
+import { FieldContext } from './FieldContext';
 
 type FieldProviderProps = { children: ReactNode };
 

packages/fuselage-forms/src/Field/Label/FieldLabel.tsx

@@ -1,4 +1,4 @@
-import { FieldLabel as FieldLabelComponent } from '@rocket.chat/fuselage';
+import type { FieldLabel as FieldLabelComponent } from '@rocket.chat/fuselage';
 import { type ComponentPropsWithoutRef } from 'react';
 
 import { useFieldFieldType } from '../FieldContext';

packages/fuselage-hooks/src/testing.ts

@@ -1,10 +1,10 @@
-import {
+import type {
   queries,
   Queries,
   RenderHookOptions,
   RenderHookResult,
-  renderHook as _renderHook,
 } from '@testing-library/react';
+import { renderHook as _renderHook } from '@testing-library/react';
 import { createElement } from 'react';
 import { renderToString } from 'react-dom/server';
 

packages/fuselage-toastbar/src/ToastBarContext.ts

@@ -1,4 +1,5 @@
-import { createContext, ReactNode, useContext } from 'react';
+import type { ReactNode } from 'react';
+import { createContext, useContext } from 'react';
 
 export type ToastBarPayload = {
   type?: 'success' | 'info' | 'error';

packages/fuselage/package.json

@@ -27,12 +27,8 @@
     "storybook": "storybook dev -p 6006 --no-version-updates",
     "build": "run-s .:build:clean .:build:dev .:build:prod",
     ".:build:clean": "rimraf dist",
-    ".:build:prod": "run-s .:build:prod:bundle .:build:prod:check",
-    ".:build:dev": "run-s .:build:dev:bundle .:build:dev:check",
-    ".:build:prod:bundle": "webpack --mode production",
-    ".:build:prod:check": "es-check es5 dist/*.production.js",
-    ".:build:dev:bundle": "webpack --mode development",
-    ".:build:dev:check": "es-check es5 dist/*.development.js",
+    ".:build:prod": "webpack --mode production",
+    ".:build:dev": "webpack --mode development",
     "lint": "lint",
     "lint-and-fix": "lint-and-fix",
     "test": "jest --runInBand",
@@ -79,7 +75,6 @@
     "cross-env": "^7.0.3",
     "css-loader": "~7.1.2",
     "cssnano": "~7.1.0",
-    "es-check": "~9.1.4",
     "eslint": "~9.29.0",
     "jest": "~30.0.0",
     "jest-axe": "~10.0.0",

packages/fuselage/src/components/Accordion/Accordion.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from 'react';
 
 import { cx, cxx } from '../../helpers/composeClassNames';
 import { StylingBox } from '../Box';
-import { StylingProps } from '../Box/stylingProps';
+import type { StylingProps } from '../Box/stylingProps';
 
 export type AccordionProps = {
   children: ReactNode;

packages/fuselage/src/components/AutoComplete/AutoComplete.tsx

@@ -17,7 +17,8 @@ import Chip from '../Chip';
 import { Icon } from '../Icon';
 import { InputBox } from '../InputBox';
 import Margins from '../Margins';
-import { useCursor, Options, OptionType } from '../Options';
+import type { OptionType } from '../Options';
+import { useCursor, Options } from '../Options';
 import PositionAnimated from '../PositionAnimated';
 
 const Addon = (props: ComponentProps<typeof Box>) => (

packages/fuselage/src/components/Box/index.ts

@@ -1,2 +1,2 @@
-export { default, default as Box, BoxProps } from './Box';
+export { default, default as Box, type BoxProps } from './Box';
 export { default as StylingBox, type StylingBoxProps } from './StylingBox';

packages/fuselage/src/components/Menu/V2/stately/MenuItem.tsx

@@ -1,5 +1,5 @@
 import type { ItemProps } from '@react-types/shared';
-import { Children, ReactElement } from 'react';
+import { Children, type ReactElement } from 'react';
 
 import type { PartialNode } from './PartialNode';
 

packages/fuselage/src/components/PaginatedSelect/PaginatedMultiSelect.tsx

@@ -1,5 +1,5 @@
 import { useEffectEvent, useResizeObserver } from '@rocket.chat/fuselage-hooks';
-import { type ComponentProps, useState, useRef, ElementType } from 'react';
+import { type ComponentProps, useState, useRef, type ElementType } from 'react';
 
 import { prevent } from '../../helpers/prevent';
 import AnimatedVisibility from '../AnimatedVisibility';

packages/fuselage/src/components/Select/SelectTrigger.tsx

@@ -1,6 +1,6 @@
 import type { AllHTMLAttributes, RefObject } from 'react';
 import { forwardRef } from 'react';
-import { useButton, AriaButtonProps } from 'react-aria';
+import { useButton, type AriaButtonProps } from 'react-aria';
 
 import Box from '../Box';
 

packages/fuselage/src/components/SelectInput/SelectInput.stories.tsx

@@ -1,5 +1,5 @@
 import type { StoryFn, Meta } from '@storybook/react-webpack5';
-import { ComponentType } from 'react';
+import type { ComponentType } from 'react';
 
 import { PropsVariationSection } from '../../../.storybook/helpers';
 import { Icon } from '../Icon';

packages/fuselage/src/components/Skeleton/Skeleton.tsx

@@ -1,7 +1,8 @@
-import { AllHTMLAttributes } from 'react';
+import type { AllHTMLAttributes } from 'react';
 
 import { cx, cxx } from '../../helpers/composeClassNames';
-import { StylingBox, StylingBoxProps } from '../Box';
+import type { StylingBoxProps } from '../Box';
+import { StylingBox } from '../Box';
 
 type SkeletonProps = Omit<StylingBoxProps, 'children'> & {
   variant?: 'text' | 'rect' | 'circle';

packages/fuselage/src/helpers/composeClassNames.ts

@@ -1,4 +1,4 @@
-import { Falsy } from '../types/Falsy';
+import type { Falsy } from '../types/Falsy';
 
 import { exhaustiveCheck } from './exhaustiveCheck';
 

packages/fuselage/tsconfig.json

@@ -1,18 +1,20 @@
 {
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "rootDirs": ["./src", "./.storybook"],
-    "target": "ES5",
-    "module": "CommonJS",
+    "target": "es2024",
+    "module": "es2022",
+    "moduleResolution": "bundler",
+    "verbatimModuleSyntax": true,
     "lib": ["ES2020", "DOM"],
     "downlevelIteration": true,
     "outDir": "./dist",
     "esModuleInterop": true,
     "skipLibCheck": true,
-    "moduleResolution": "node",
     "resolveJsonModule": true,
     "allowJs": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "erasableSyntaxOnly": true,
+    "isolatedModules": true
   },
   "include": [
     "./src",

packages/fuselage/webpack.config.js

@@ -51,15 +51,6 @@ module.exports = (env, { mode = 'production' }) => ({
         use: [
           MiniCssExtractPlugin.loader,
           'babel-loader',
-          // {
-          //   loader: 'style-loader',
-          //   options: {
-          //     attributes: {
-          //       id: 'fuselage-style',
-          //     },
-          //     injectType: 'lazySingletonStyleTag',
-          //   },
-          // },
           {
             loader: 'css-loader',
             options: {
@@ -90,25 +81,12 @@ module.exports = (env, { mode = 'production' }) => ({
     extensions: ['.tsx', '.ts', '.jsx', '.js', '.json'],
   },
   externals: [
-    {
-      react: {
-        commonjs: 'react',
-        commonjs2: 'react',
-        amd: 'react',
-        root: 'React',
-      },
-    },
-    'react-virtuoso',
-    'react-dom',
-    '@rocket.chat/icons',
-    '@rocket.chat/fuselage-hooks',
-    'react-aria',
-    'react-stately',
-    '@rocket.chat/css-in-js',
-    '@rocket.chat/css-supports',
-    '@rocket.chat/fuselage-tokens',
-    '@rocket.chat/memo',
-    '@rocket.chat/styled',
+    ...Object.keys(pkg.dependencies ?? {}).map(
+      (dep) => new RegExp(`^${dep}(/.+)?$`),
+    ),
+    ...Object.keys(pkg.peerDependencies ?? {}).map(
+      (dep) => new RegExp(`^${dep}(/.+)?$`),
+    ),
   ],
   plugins: [
     new MiniCssExtractPlugin(),

packages/layout/src/components/BackgroundLayer/BackgroundLayer.tsx

@@ -26,7 +26,7 @@ const BackgroundLayer = ({ children }: BackgroundLayerProps): ReactElement => {
           <BackgroundImage backgroundColor={backgroundColor} />,
         ),
       )}`,
-    [backgroundColor],
+    [background, backgroundColor, backgroundDark, darkMode],
   );
 
   return (

packages/layout/src/layouts/HeroLayout/HeroLayoutSubtitle.tsx

@@ -1,5 +1,5 @@
 import { Box } from '@rocket.chat/fuselage';
-import { ReactElement, ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 
 const HeroLayoutSubtitle = ({
   children,

packages/layout/src/layouts/HeroLayout/HeroLayoutTitle.tsx

@@ -1,5 +1,5 @@
 import { Box } from '@rocket.chat/fuselage';
-import { ReactElement, ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 
 const HeroLayoutTitle = ({
   children,

packages/layout/src/layouts/HorizontalWizardLayout/HorizontalWizardLayoutAside.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 
 import * as FormPageLayout from '../../components/FormPageLayout/FormPageLayout.styles';
 import LayoutLogo from '../../components/LayoutLogo';

packages/layout/src/layouts/HorizontalWizardLayout/HorizontalWizardLayoutFooter.tsx

@@ -1,5 +1,5 @@
 import { Box } from '@rocket.chat/fuselage';
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 const HorizontalWizardLayoutFooter = ({
   children,

packages/layout/src/layouts/HorizontalWizardLayout/HorizontalWizardLayoutTitle.tsx

@@ -1,4 +1,4 @@
-import { ComponentProps, ReactElement } from 'react';
+import type { ComponentProps, ReactElement } from 'react';
 
 import * as FormPageLayout from '../../components/FormPageLayout/FormPageLayout.styles';