Allow support for module directives in build process

build.tsconfig.json → bundle-base.tsconfig.json

@@ -4,9 +4,6 @@
     "target": "es6",
     "module": "esnext",
     "moduleResolution": "node",
-    "declaration": true,
-    "declarationDir": "types",
-    "emitDeclarationOnly": true,
     "baseUrl": "./",
     "types": ["jest", "node"],
     "sourceMap": true,
@@ -17,7 +14,6 @@
     "strict": true,
     "strictNullChecks": true,
     "resolveJsonModule": true,
-    "allowJs": true,
     "paths": {
       "@components/*": ["src/components/*"],
       "@content-presentation/*": ["src/components/content-presentation/*"],
@@ -29,5 +25,5 @@
     }
   },
   "include": ["src"],
-  "exclude": ["node_modules", "build"]
+  "exclude": ["node_modules", "**/__tests__", "src/setupTests.ts"]
 }

package.json

@@ -9,8 +9,8 @@
     "lib"
   ],
   "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/cjs/index.d.ts",
+  "module": "dist/esm",
+  "types": "dist/index.d.ts",
   "scripts": {
     "cleanup": "rm -rf dist/ > /dev/null && rm -rf lib/ > /dev/null",
     "storybook": "storybook dev -p 6006",
@@ -26,10 +26,8 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@babel/cli": "^7.13.16",
-    "@babel/core": "^7.19.6",
+    "@babel/core": "^7.24.1",
     "@babel/plugin-transform-modules-commonjs": "^7.23.3",
-    "@babel/preset-react": "^7.18.6",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
@@ -45,6 +43,7 @@
     "@storybook/theming": "^7.0.2",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.1",
+    "@types/babel__core": "^7",
     "@types/jest": "^29.5.12",
     "@types/jest-axe": "^3.5.9",
     "@types/node": "^15.0.2",
@@ -53,6 +52,7 @@
     "@types/rollup-plugin-peer-deps-external": "^2.2.1",
     "@typescript-eslint/eslint-plugin": "^7.1.0",
     "@typescript-eslint/parser": "^7.1.0",
+    "babel-jest": "^29.7.0",
     "chromatic": "^6.17.3",
     "eslint": "^8.57.0",
     "eslint-config-airbnb": "^19.0.4",
@@ -73,6 +73,7 @@
     "rollup": "^4.13.0",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-preserve-directives": "^0.4.0",
     "sass": "^1.53.0",
     "storybook": "^7.6.17",
     "ts-jest": "^29.1.2",

rollup.config.mjs

@@ -4,38 +4,75 @@ import typescript from '@rollup/plugin-typescript';
 import terser from '@rollup/plugin-terser';
 import external from 'rollup-plugin-peer-deps-external';
 import dts from 'rollup-plugin-dts';
+import preserveDirectives from 'rollup-plugin-preserve-directives';
 
 import packageJson from './package.json' assert { type: 'json' };
 
+// suppresses warnings printed to console as part of bundling components with directives present.
+const onWarnSuppression = {
+  onwarn(warning, warn) {
+    if (warning.code === 'MODULE_LEVEL_DIRECTIVE' && warning.message.includes(`"use client"`)) {
+      return;
+    }
+    warn(warning);
+  },
+};
+
+const commonPlugins = [external(), resolve(), commonjs()];
+
 export default [
+  // cjs export
   {
     input: 'src/index.ts',
     output: [
       {
         file: packageJson.main,
         format: 'cjs',
         sourcemap: true,
-        name: 'react-ts-lib',
       },
+    ],
+    plugins: [
+      ...commonPlugins,
+      typescript({
+        tsconfig: 'bundle-base.tsconfig.json',
+        compilerOptions: {
+          declaration: false,
+        },
+      }),
+      terser(),
+    ],
+    ...onWarnSuppression,
+  },
+  // esm export
+  {
+    input: 'src/index.ts',
+    output: [
       {
-        file: packageJson.module,
+        dir: packageJson.module,
         format: 'esm',
         sourcemap: true,
+        preserveModules: true,
+        preserveModulesRoot: 'src',
       },
     ],
     plugins: [
-      external(),
-      resolve(),
-      commonjs(),
+      ...commonPlugins,
       typescript({
-        tsconfig: './build.tsconfig.json',
-        exclude: ['**/__tests__', '**/*.test.tsx', 'src/setupTests.ts'],
+        tsconfig: 'bundle-base.tsconfig.json',
+        compilerOptions: {
+          declaration: true,
+          declarationDir: 'dist/esm',
+          emitDeclarationOnly: true,
+        },
       }),
-      terser(),
+      preserveDirectives(),
+      terser({ compress: { directives: false } }),
     ],
+    ...onWarnSuppression,
   },
+  // type bundling
   {
-    input: 'dist/esm/types/index.d.ts',
+    input: 'dist/esm/index.d.ts',
     output: [{ file: 'dist/index.d.ts', format: 'esm' }],
     external: [],
     plugins: [dts()],

src/components/content-presentation/do-and-dont-list/DoAndDontList.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React, { HTMLProps, createContext, useContext, ReactNode } from 'react';
 import classNames from 'classnames';
 import { Tick, Cross } from '../../icons';

src/components/content-presentation/table/components/TableCell.tsx

@@ -1,3 +1,4 @@
+'use client';
 import classNames from 'classnames';
 import React, { HTMLProps, useContext } from 'react';
 import useDevWarning from '../../../../util/hooks/UseDevWarning';
@@ -38,11 +39,7 @@ const TableCell: React.FC<TableCellProps> = ({
     case TableSection.NONE:
     default:
       return (
-        <td
-          className={classes}
-          role={_responsive ? 'cell' : undefined}
-          {...rest}
-        >
+        <td className={classes} role={_responsive ? 'cell' : undefined} {...rest}>
           {_responsive && (
             <span className="nhsuk-table-responsive__heading">{_responsiveHeading}</span>
           )}

src/components/content-presentation/table/components/TableRow.tsx

@@ -1,3 +1,4 @@
+'use client';
 import classNames from 'classnames';
 import React, { HTMLProps, useContext, useEffect } from 'react';
 import TableContext from '../TableContext';

src/components/form-elements/checkboxes/components/Box.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React, {
   HTMLProps,
   useContext,
@@ -90,7 +91,10 @@ const Box: React.FC<BoxProps> = ({
           </Label>
         ) : null}
         {hint ? (
-          <HintText className={classNames('nhsuk-checkboxes__hint', hintClassName)} {...restHintProps}>
+          <HintText
+            className={classNames('nhsuk-checkboxes__hint', hintClassName)}
+            {...restHintProps}
+          >
             {hint}
           </HintText>
         ) : null}

src/components/form-elements/date-input/components/IndividualDateInputs.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React, { HTMLProps, useContext, ChangeEvent } from 'react';
 import classNames from 'classnames';
 import Label, { LabelProps } from '../../label/Label';
@@ -48,7 +49,8 @@ const IndividualDateInput: React.FC<IndividualDateInputProps> = ({
   const inputID = id || `${ctxId}-${inputType}`;
   const inputName = name || `${ctxName}-${inputType}`;
   const inputValue = value !== undefined ? value : ctxValue?.[inputType];
-  const inputDefaultValue = defaultValue !== undefined ? defaultValue : ctxDefaultValue?.[inputType];
+  const inputDefaultValue =
+    defaultValue !== undefined ? defaultValue : ctxDefaultValue?.[inputType];
 
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     e.persist();

src/components/form-elements/form/FormContext.ts

@@ -1,3 +1,4 @@
+'use client';
 import { createContext, useContext } from 'react';
 
 export interface IFormContext {

src/components/form-elements/radios/components/Radio.tsx

@@ -1,6 +1,5 @@
-import React, {
-  HTMLProps, useContext, ReactNode, useEffect, useState,
-} from 'react';
+'use client';
+import React, { HTMLProps, useContext, ReactNode, useEffect, useState } from 'react';
 import classNames from 'classnames';
 import { RadiosContext, IRadiosContext } from '../RadioContext';
 import HintText, { HintTextProps } from '../../hint-text/HintText';

src/components/navigation/card/components/CardContent.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React, { HTMLProps, useContext } from 'react';
 import classNames from 'classnames';
 import CardContext from '../CardContext';

src/components/navigation/card/components/CardHeading.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React, { HTMLProps, useContext } from 'react';
 import classNames from 'classnames';
 import HeadingLevel, { HeadingLevelType } from '../../../../util/HeadingLevel';

src/components/navigation/header/Header.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React, { PureComponent, HTMLProps, useContext } from 'react';
 import classNames from 'classnames';
 import NHSLogo, { NHSLogoNavProps } from './components/NHSLogo';

src/components/navigation/header/components/Content.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React, { HTMLProps, useContext } from 'react';
 import classNames from 'classnames';
 import HeaderContext, { IHeaderContext } from '../HeaderContext';

src/components/navigation/header/components/NHSLogo.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React, { useContext, SVGProps } from 'react';
 import classNames from 'classnames';
 import HeaderContext, { IHeaderContext } from '../HeaderContext';

src/components/navigation/header/components/NavDropdownMenu.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React, { HTMLProps, useContext, useEffect, MouseEvent } from 'react';
 import HeaderContext, { IHeaderContext } from '../HeaderContext';
 import { ChevronDown as ChevronDownIcon } from '../../../icons';

src/components/navigation/header/components/OrganisationalLogo.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React, { useContext } from 'react';
 import HeaderContext, { IHeaderContext } from '../HeaderContext';
 import type { AsElementLink } from '../../../../util/types/LinkTypes';
@@ -7,7 +8,10 @@ export interface OrganisationalLogoProps extends AsElementLink<HTMLAnchorElement
 }
 
 const OrganisationalLogo: React.FC<OrganisationalLogoProps> = ({
-  logoUrl, alt, asElement: Component = 'a', ...rest
+  logoUrl,
+  alt,
+  asElement: Component = 'a',
+  ...rest
 }) => {
   const { orgName, orgSplit, orgDescriptor } = useContext<IHeaderContext>(HeaderContext);
   return (

src/patterns/care-card/CareCard.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React, { HTMLProps, createContext, useContext } from 'react';
 import classNames from 'classnames';
 import { CareCardType } from '../../util/types/NHSUKTypes';
@@ -66,9 +67,7 @@ interface CareCard extends React.FC<CareCardProps> {
   Heading: React.FC<CareCardHeadingProps>;
 }
 
-const CareCard: CareCard = ({
-  className, type, children, ...rest
-}) => (
+const CareCard: CareCard = ({ className, type, children, ...rest }) => (
   <div className={classNames('nhsuk-care-card', `nhsuk-care-card--${type}`, className)} {...rest}>
     <CareCardContext.Provider value={type}>{children}</CareCardContext.Provider>
   </div>

src/util/FormGroup.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React, { ReactNode, useState, useEffect, HTMLProps, useContext } from 'react';
 import classNames from 'classnames';
 import HintText from '../components/form-elements/hint-text/HintText';

src/util/hooks/UseDevWarning.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { useEffect } from 'react';
 import isDev from '../IsDev';
 

tsconfig.json

@@ -15,7 +15,6 @@
     "strict": true,
     "strictNullChecks": true,
     "resolveJsonModule": true,
-    "allowJs": true,
     "paths": {
       "@components/*": ["src/components/*"],
       "@content-presentation/*": ["src/components/content-presentation/*"],