feat: add @fluentui/react to ui-components

Author: chenjiahan

README.md

@@ -133,23 +133,23 @@ CASE=ui-components pnpm benchmark
 
 | Name                        | Prod build |
 | --------------------------- | ---------- |
-| Rspack CLI 1.4.6            | 1129ms     |
-| Rsbuild 1.4.6               | 1181ms     |
-| Vite (Rollup + SWC) 7.0.4   | 5443ms     |
-| Vite (Rolldown + Oxc) 7.0.7 | 636ms      |
-| Rolldown 1.0.0-beta.25      | 528ms      |
-| webpack (SWC) 5.100.0       | 11202ms    |
+| Rspack CLI 1.4.6            | 1640ms     |
+| Rsbuild 1.4.6               | 1536ms     |
+| Vite (Rollup + SWC) 7.0.4   | 6286ms     |
+| Vite (Rolldown + Oxc) 7.0.7 | 672ms      |
+| Rolldown 1.0.0-beta.25      | 567ms      |
+| webpack (SWC) 5.100.0       | 15943ms    |
 
 #### Bundle size
 
 | Name                        | Total size | Gzipped size |
 | --------------------------- | ---------- | ------------ |
-| Rspack CLI 1.4.6            | 1493.9kB   | 406.5kB      |
-| Rsbuild 1.4.6               | 1310.5kB   | 400.8kB      |
-| Vite (Rollup + SWC) 7.0.4   | 1315.4kB   | 412.4kB      |
-| Vite (Rolldown + Oxc) 7.0.7 | 1342.3kB   | 416.9kB      |
-| Rolldown 1.0.0-beta.25      | 1358.2kB   | 417.8kB      |
-| webpack (SWC) 5.100.0       | 1349.6kB   | 407.6kB      |
+| Rspack CLI 1.4.6            | 2210.3kB   | 621.7kB      |
+| Rsbuild 1.4.6               | 2021.9kB   | 615.9kB      |
+| Vite (Rollup + SWC) 7.0.4   | 2037.5kB   | 638.2kB      |
+| Vite (Rolldown + Oxc) 7.0.7 | 2054.4kB   | 636.3kB      |
+| Rolldown 1.0.0-beta.25      | 2071.2kB   | 637.3kB      |
+| webpack (SWC) 5.100.0       | 2072.9kB   | 624.9kB      |
 
 ### rome
 

benchmark.mjs

@@ -262,9 +262,7 @@ toolNames.forEach((name) => {
     case 'rolldown':
       buildTools.push(
         new BuildTool({
-          name:
-            'Rolldown ' +
-            require('rolldown/package.json').version,
+          name: 'Rolldown ' + require('rolldown/package.json').version,
           port: 5173,
           startScript: 'start:rolldown',
           startedRegex: /Finished in (\d+) (s|ms)/,
@@ -461,7 +459,6 @@ async function runDevBenchmark(buildTool, perfResult) {
 
   await coolDown();
   logger.success(color.dim(buildTool.name) + ' dev server closed');
-
 }
 
 async function runBuildBenchmark(buildTool, perfResult) {
@@ -577,41 +574,38 @@ for (const [name, values] of Object.entries(averageResults)) {
 logger.log('');
 logger.success('Benchmark finished!\n');
 
-logger.info('Build performance:\n');
+let markdownLogs = '';
+
+markdownLogs += '#### Build performance\n\n';
 
 if (runDev) {
-  console.log(
-    markdownTable([
-      ['Name', 'Dev cold start', 'Root HMR', 'Leaf HMR', 'Prod build'],
-      ...buildTools.map(({ name }) => [
-        name,
-        `${averageResults[name].devColdStart} (${averageResults[name].serverStart} + ${averageResults[name].onLoad})`,
-        averageResults[name].rootHmr,
-        averageResults[name].leafHmr,
-        averageResults[name].prodBuild,
-      ]),
+  markdownLogs += markdownTable([
+    ['Name', 'Dev cold start', 'Root HMR', 'Leaf HMR', 'Prod build'],
+    ...buildTools.map(({ name }) => [
+      name,
+      `${averageResults[name].devColdStart} (${averageResults[name].serverStart} + ${averageResults[name].onLoad})`,
+      averageResults[name].rootHmr,
+      averageResults[name].leafHmr,
+      averageResults[name].prodBuild,
     ]),
-  );
+  ]);
 } else {
-  console.log(
-    markdownTable([
-      ['Name', 'Prod build'],
-      ...buildTools.map(({ name }) => [name, averageResults[name].prodBuild]),
-    ]),
-  );
+  markdownLogs += markdownTable([
+    ['Name', 'Prod build'],
+    ...buildTools.map(({ name }) => [name, averageResults[name].prodBuild]),
+  ]);
 }
 
-logger.log('');
-logger.info('Bundle sizes:\n');
-console.log(
-  markdownTable([
-    ['Name', 'Total size', 'Gzipped size'],
-    ...buildTools.map(({ name }) => [
-      name,
-      sizeResults[name].totalSize,
-      sizeResults[name].totalGzipSize,
-    ]),
+markdownLogs += '\n\n#### Bundle sizes\n\n';
+markdownLogs += markdownTable([
+  ['Name', 'Total size', 'Gzipped size'],
+  ...buildTools.map(({ name }) => [
+    name,
+    sizeResults[name].totalSize,
+    sizeResults[name].totalGzipSize,
   ]),
-);
+]);
+
+console.log(markdownLogs);
 
 process.exit(0);

cases/ui-components/package.json

@@ -13,6 +13,7 @@
     "@chakra-ui/react": "^3.22.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
+    "@fluentui/react": "^8.123.1",
     "@headlessui/react": "^2.2.4",
     "@mantine/core": "^8.1.3",
     "@mui/material": "^7.2.0",

cases/ui-components/src/index.js

@@ -1,33 +1,45 @@
+// @ts-check
 import {
   Button as MuiButton,
   TextField as MuiTextField,
   Select as MuiSelect,
+  FormControl as MuiFormControl,
+  Table as MuiTable,
 } from '@mui/material';
 import {
   Button as BootstrapButton,
   Form as BootstrapForm,
   Card as BootstrapCard,
+  FormControl as BootstrapFormControl,
+  Table as BootstrapTable,
 } from 'react-bootstrap';
 import {
   Button as ChakraButton,
   Input as ChakraInput,
   Select as ChakraSelect,
+  Table as ChakraTable,
 } from '@chakra-ui/react';
 import {
   Button as AntdButton,
   Input as AntdInput,
   Select as AntdSelect,
+  Table as AntdTable,
+  Form as AntdForm,
 } from 'antd';
-import { ElButton, ElInput, ElSelect } from 'element-plus';
+import { ElButton, ElInput, ElSelect, ElTable, ElForm } from 'element-plus';
 import {
   VBtn as VuetifyButton,
   VTextField as VuetifyTextField,
   VSelect as VuetifySelect,
+  VTable as VuetifyTable,
+  VForm as VuetifyForm,
 } from 'vuetify/components';
 import {
   Button as VantButton,
   Field as VantField,
   Picker as VantPicker,
+  Calendar as VantCalendar,
+  Form as VantForm,
 } from 'vant';
 import {
   Dialog as HeadlessDialog,
@@ -38,14 +50,32 @@ import {
   Button as MantineButton,
   TextInput as MantineTextInput,
   Select as MantineSelect,
+  Table as MantineTable,
 } from '@mantine/core';
+import {
+  ButtonGrid as FluentUIButtonGrid,
+  Dialog as FluentUIDialog,
+} from '@fluentui/react';
 
-console.log(MuiButton, MuiTextField, MuiSelect);
-console.log(BootstrapButton, BootstrapForm, BootstrapCard);
-console.log(ChakraButton, ChakraInput, ChakraSelect);
-console.log(AntdButton, AntdInput, AntdSelect);
-console.log(ElButton, ElInput, ElSelect);
-console.log(VuetifyButton, VuetifyTextField, VuetifySelect);
-console.log(VantButton, VantField, VantPicker);
+console.log(MuiButton, MuiTextField, MuiSelect, MuiFormControl, MuiTable);
+console.log(
+  BootstrapButton,
+  BootstrapForm,
+  BootstrapCard,
+  BootstrapFormControl,
+  BootstrapTable,
+);
+console.log(ChakraButton, ChakraInput, ChakraSelect, ChakraTable);
+console.log(AntdButton, AntdInput, AntdSelect, AntdTable, AntdForm);
+console.log(ElButton, ElInput, ElSelect, ElTable, ElForm);
+console.log(
+  VuetifyButton,
+  VuetifyTextField,
+  VuetifySelect,
+  VuetifyTable,
+  VuetifyForm,
+);
+console.log(VantButton, VantField, VantPicker, VantCalendar, VantForm);
 console.log(HeadlessDialog, HeadlessListbox, HeadlessMenu);
-console.log(MantineButton, MantineTextInput, MantineSelect);
+console.log(MantineButton, MantineTextInput, MantineSelect, MantineTable);
+console.log(FluentUIButtonGrid, FluentUIDialog);