[pickers] Add "use client" directive to every public component and …

…hook (#14562)

.circleci/config.yml

@@ -212,6 +212,12 @@ jobs:
       - run:
           name: '`pnpm l10n` changes committed?'
           command: git add -A && git diff --exit-code --staged
+      - run:
+          name: Sync RSC "use client" directives
+          command: pnpm rsc:build
+      - run:
+          name: '`pnpm rsc:build` changes committed?'
+          command: git add -A && git diff --exit-code --staged
       - run:
           name: '`pnpm docs:link-check` changes committed?'
           command: |

package.json

@@ -29,6 +29,7 @@
     "prettier:all": "prettier --write . --ignore-path .eslintignore",
     "prettier:check": "prettier --check . --ignore-path .eslintignore",
     "proptypes": "cross-env BABEL_ENV=development babel-node -i \"/node_modules/(?!@mui)/\" -x .ts,.tsx,.js ./docs/scripts/generateProptypes.ts",
+    "rsc:build": "tsx ./packages/rsc-builder/buildRsc.ts",
     "size:snapshot": "node --max-old-space-size=2048 ./scripts/sizeSnapshot/create",
     "size:why": "pnpm size:snapshot --analyze --accurateBundles",
     "tc": "node test/cli.js",

packages/rsc-builder/buildRsc.ts

@@ -0,0 +1,147 @@
+import path from 'path';
+import * as yargs from 'yargs';
+import * as fse from 'fs-extra';
+import findComponents from '@mui-internal/api-docs-builder/utils/findComponents';
+import findHooks from '@mui-internal/api-docs-builder/utils/findHooks';
+
+type CommandOptions = { grep?: string };
+
+type Project = {
+  name: string;
+  rootPath: string;
+  additionalPaths?: string[];
+  additionalFiles?: string[];
+  ignorePaths?: string[];
+};
+
+const PROJECTS: Project[] = [
+  {
+    name: 'x-date-pickers',
+    rootPath: path.join(process.cwd(), 'packages/x-date-pickers'),
+  },
+  {
+    name: 'x-date-pickers-pro',
+    rootPath: path.join(process.cwd(), 'packages/x-date-pickers-pro'),
+  },
+];
+
+async function processFile(
+  filename: string,
+  options: {
+    lineToPrepend?: string;
+  } = {},
+) {
+  if (!fse.statSync(filename).isFile()) {
+    return;
+  }
+
+  const { lineToPrepend = `'use client';` } = options;
+  const contents = await fse.readFile(filename, 'utf8');
+
+  if (
+    filename.indexOf('internal') !== -1 ||
+    !!contents.match(/@ignore - internal component\./) ||
+    !!contents.match(/@ignore - internal hook\./) ||
+    !!contents.match(/@ignore - do not document\./)
+  ) {
+    return;
+  }
+
+  const lines = contents.split(/\r?\n/);
+  if (lines[0] === lineToPrepend) {
+    return;
+  }
+
+  const newContents = `${lineToPrepend}\n${contents}`;
+
+  await fse.writeFile(filename, newContents);
+}
+
+async function findAll(
+  directories: string[],
+  grep: RegExp | null,
+  findFn: typeof findComponents | typeof findHooks,
+) {
+  const result = await Promise.all(
+    directories.map((dir) => {
+      return findFn(dir).filter((item) => {
+        if (grep === null) {
+          return true;
+        }
+        return grep.test(item.filename);
+      });
+    }),
+  );
+
+  return result.flat();
+}
+
+async function run(argv: yargs.ArgumentsCamelCase<CommandOptions>) {
+  const grep = argv.grep == null ? null : new RegExp(argv.grep);
+
+  await PROJECTS.reduce(async (resolvedPromise, project) => {
+    await resolvedPromise;
+
+    const projectSrc = path.join(project.rootPath, 'src');
+
+    let directories = [projectSrc];
+
+    if (Array.isArray(project?.additionalPaths)) {
+      directories = [
+        ...directories,
+        ...project.additionalPaths.map((p) => path.join(project.rootPath, p)),
+      ];
+    }
+
+    const components = await findAll(directories, grep, findComponents);
+
+    components.forEach(async (component) => {
+      try {
+        if (!project.ignorePaths?.some((p) => component.filename.includes(p))) {
+          processFile(component.filename);
+        }
+      } catch (error: any) {
+        error.message = `${path.relative(process.cwd(), component.filename)}: ${error.message}`;
+        throw error;
+      }
+    });
+
+    const hooks = await findAll(directories, grep, findHooks);
+
+    hooks.forEach(async (hook) => {
+      try {
+        processFile(hook.filename);
+      } catch (error: any) {
+        error.message = `${path.relative(process.cwd(), hook.filename)}: ${error.message}`;
+        throw error;
+      }
+    });
+
+    if (Array.isArray(project?.additionalFiles)) {
+      project.additionalFiles.forEach(async (file) => {
+        const fullPath = path.join(project.rootPath, file);
+        processFile(fullPath);
+      });
+    }
+
+    return Promise.resolve();
+  }, Promise.resolve());
+}
+
+yargs
+  .command({
+    command: '$0',
+    describe: 'prepends the use client directive to components',
+    builder: (command) => {
+      return command.option('grep', {
+        description:
+          'Only process files for component filenames matching the pattern. The string is treated as a RegExp.',
+        type: 'string',
+      });
+    },
+    handler: run,
+  })
+  .help()
+  .strict(true)
+  .version(false)
+  .parse();

packages/rsc-builder/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "rsc-builder",
+  "version": "1.0.0",
+  "private": "true",
+  "main": "./buildRsc.ts",
+  "dependencies": {
+    "fs-extra": "^11.2.0",
+    "yargs": "^17.7.2"
+  },
+  "devDependencies": {
+    "@types/mocha": "^10.0.7",
+    "@types/node": "^20.14.8"
+  }
+}

packages/rsc-builder/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "noUnusedLocals": false,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "types": ["node", "mocha"],
+    "target": "ES2020",
+    "module": "CommonJS",
+    "moduleResolution": "node",
+    "strict": true,
+    "baseUrl": "./",
+    "paths": {
+      "@mui-internal/api-docs-builder": [
+        "../../node_modules/@mui/monorepo/packages/api-docs-builder/index.ts"
+      ],
+      "@mui-internal/api-docs-builder/*": [
+        "../../node_modules/@mui/monorepo/packages/api-docs-builder/*"
+      ]
+    }
+  },
+  "include": ["./**/*.ts", "./**/*.js"],
+  "exclude": ["node_modules"]
+}

packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';

packages/x-date-pickers-pro/src/DateRangeCalendar/useDragRange.ts

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { MuiPickersAdapter, PickersTimezone, PickerValidDate } from '@mui/x-date-pickers/models';

packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import useMediaQuery from '@mui/material/useMediaQuery';

packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';

packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';

packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { refType } from '@mui/utils';

packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTabs.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';

packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';

packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { PickerViewRendererLookup } from '@mui/x-date-pickers/internals';

packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import {

packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { PickerViewRendererLookup } from '@mui/x-date-pickers/internals';

packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { refType } from '@mui/utils';

packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';

packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';

packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { clsx } from 'clsx';

packages/x-date-pickers-pro/src/PickersRangeCalendarHeader/PickersRangeCalendarHeader.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';

packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import MuiTextField from '@mui/material/TextField';

packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useField, useDefaultizedDateField } from '@mui/x-date-pickers/internals';
 import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';

packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import MuiTextField from '@mui/material/TextField';

packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useField, useDefaultizedDateTimeField } from '@mui/x-date-pickers/internals';
 import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';

packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import MuiTextField from '@mui/material/TextField';

packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useField, useDefaultizedTimeField } from '@mui/x-date-pickers/internals';
 import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';

packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { PickerViewRendererLookup } from '@mui/x-date-pickers/internals';

packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';

packages/x-date-pickers/src/DateCalendar/useCalendarState.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { SlideDirection } from './PickersSlideTransition';

packages/x-date-pickers/src/DateCalendar/useIsDateDisabled.ts

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { ValidateDateProps, validateDate } from '../validation';
 import { useLocalizationContext } from '../internals/hooks/useUtils';

packages/x-date-pickers/src/DateField/DateField.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import MuiTextField from '@mui/material/TextField';

packages/x-date-pickers/src/DateField/useDateField.ts

@@ -1,3 +1,4 @@
+'use client';
 import {
   singleItemFieldValueManager,
   singleItemValueManager,

packages/x-date-pickers/src/DatePicker/DatePicker.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import useMediaQuery from '@mui/material/useMediaQuery';

packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';

packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import MuiTextField from '@mui/material/TextField';

packages/x-date-pickers/src/DateTimeField/useDateTimeField.ts

@@ -1,3 +1,4 @@
+'use client';
 import {
   singleItemFieldValueManager,
   singleItemValueManager,

packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import useMediaQuery from '@mui/material/useMediaQuery';

packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';

packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useRtl } from '@mui/system/RtlProvider';

packages/x-date-pickers/src/DayCalendarSkeleton/DayCalendarSkeleton.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';

packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import resolveComponentProps from '@mui/utils/resolveComponentProps';