diff --git a/.gitignore b/.gitignore index b096194c35..446181f1f2 100644 --- a/.gitignore +++ b/.gitignore @@ -6,10 +6,6 @@ **/package-lock.json /examples/*/yarn.lock -/examples/cdn/js/* -/examples/cdn/css/* -/examples/cdn/fonts/* - # Code editors *.sublime-* diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js index c102b06d83..2a6658898a 100644 --- a/.storybook/webpack.config.js +++ b/.storybook/webpack.config.js @@ -73,6 +73,10 @@ module.exports = async ({ config }) => { __dirname, '../packages/design-system/src/styles/' ), + react: 'preact/compat', + 'react-dom/test-utils': 'preact/test-utils', + 'react-dom': 'preact/compat', // Must be below test-utils + 'react/jsx-runtime': 'preact/jsx-runtime', }; return config; diff --git a/examples/cdn-preact/README.md b/examples/cdn-preact/README.md new file mode 100644 index 0000000000..1d29638c16 --- /dev/null +++ b/examples/cdn-preact/README.md @@ -0,0 +1,15 @@ +## Example: Consuming assets from the CDN + +This shows the usage of CMS design system preact components from the CDN: + +- Include the core CSS bundle and theme +- Include the JS vendor files and bundle +- Use CSS layout, utility, and component classes +- Render Preact components from our library + +See also: https://reactjs.org/docs/add-react-to-a-website.html + +## Getting started + +1. Serve the root of this directory from a webserver, with `npx http-server` +2. View it in a browser by visiting http://localhost:8080 diff --git a/examples/cdn-preact/copy.sh b/examples/cdn-preact/copy.sh new file mode 100644 index 0000000000..e8dc957d77 --- /dev/null +++ b/examples/cdn-preact/copy.sh @@ -0,0 +1,4 @@ +#!/usr/bin/env bash + +mkdir -p dist/js +cp -R ../../packages/design-system/dist/js/. dist/js/ \ No newline at end of file diff --git a/examples/cdn-preact/index.html b/examples/cdn-preact/index.html new file mode 100644 index 0000000000..271b954def --- /dev/null +++ b/examples/cdn-preact/index.html @@ -0,0 +1,65 @@ + + + + + CDN Example + + + + + + + +
+ + +
+
+ ExampleWebsite.gov +
+
+ +
+
+

CDN Example

+

+ This is an example showing how to use the CDN. Some elements are simple and can be easily + created by applying a CSS class from the Design System. Some components are more complex + or are interactive. Our React-based component library is here for those more complex + cases. +

+ +
+ + +
+
+ + + +
+
+
+ + diff --git a/examples/cdn-preact/style.css b/examples/cdn-preact/style.css new file mode 100644 index 0000000000..a3c84f0ef8 --- /dev/null +++ b/examples/cdn-preact/style.css @@ -0,0 +1,4 @@ +body { + margin: 0; + padding: 0; +} \ No newline at end of file diff --git a/examples/cdn-web-components/README.md b/examples/cdn-web-components/README.md new file mode 100644 index 0000000000..42e9ec377d --- /dev/null +++ b/examples/cdn-web-components/README.md @@ -0,0 +1,15 @@ +## Example: Consuming assets from the CDN + +This shows the usage of CMS design system web components from the CDN: + +- Include the core CSS bundle and theme +- Include the JS vendor files and bundle +- Use CSS layout, utility, and component classes +- Render web components from our library + +See also: https://reactjs.org/docs/add-react-to-a-website.html + +## Getting started + +1. Serve the root of this directory from a webserver, with `npx http-server` +2. View it in a browser by visiting http://localhost:8080 diff --git a/examples/cdn-web-components/copy.sh b/examples/cdn-web-components/copy.sh new file mode 100644 index 0000000000..e8dc957d77 --- /dev/null +++ b/examples/cdn-web-components/copy.sh @@ -0,0 +1,4 @@ +#!/usr/bin/env bash + +mkdir -p dist/js +cp -R ../../packages/design-system/dist/js/. dist/js/ \ No newline at end of file diff --git a/examples/cdn-web-components/index.html b/examples/cdn-web-components/index.html new file mode 100644 index 0000000000..5eb47709e2 --- /dev/null +++ b/examples/cdn-web-components/index.html @@ -0,0 +1,44 @@ + + + + + CDN Example + + + + + +
+
+ ExampleWebsite.gov + Hello world +
+
+ +
+
+

CDN Example

+

+ This is an example showing how to use the CDN and our library of interactive web + components. +

+ + + Weeeeeee!!! + + + I'm a button +
+
+ + + + diff --git a/examples/cdn-web-components/style.css b/examples/cdn-web-components/style.css new file mode 100644 index 0000000000..a3c84f0ef8 --- /dev/null +++ b/examples/cdn-web-components/style.css @@ -0,0 +1,4 @@ +body { + margin: 0; + padding: 0; +} \ No newline at end of file diff --git a/examples/preact-app/Gulpfile.js b/examples/preact-app/Gulpfile.js new file mode 100644 index 0000000000..4212166338 --- /dev/null +++ b/examples/preact-app/Gulpfile.js @@ -0,0 +1,18 @@ +const gulp = require('gulp'); + +/** + * Copy the static assets from the design system, such as the fonts and images. + * We could do this manually, but why not automate it so it's easy to do + * as things are updated :) + */ +gulp.task('copy-design-system', function () { + return gulp + .src([ + 'node_modules/@cmsgov/design-system/dist/**/fonts/*', + 'node_modules/@cmsgov/design-system/dist/**/images/*', + 'node_modules/@cmsgov/design-system/dist/css/*.css', + ]) + .pipe(gulp.dest('./dist/')); +}); + +gulp.task('default', gulp.series('copy-design-system')); diff --git a/examples/preact-app/README.md b/examples/preact-app/README.md new file mode 100644 index 0000000000..2b5c6b3d28 --- /dev/null +++ b/examples/preact-app/README.md @@ -0,0 +1,9 @@ +## Example: react-app + +This example shows how you can incorporate the design system into a Preact application. It uses [Webpack](https://webpack.js.org) to bundle and optimize JavaScript files, [Babel](https://babeljs.io/) to transpile JSX, and [Gulp](http://gulpjs.com/) to copy static assets from the design system. + +## Getting started + +1. Install packages: `npm install` or `yarn install` +1. Compile and bundle assets: `npm run build` or `yarn run build` +1. Open `index.html` in a browser. diff --git a/examples/preact-app/babel.config.js b/examples/preact-app/babel.config.js new file mode 100644 index 0000000000..30d757e5dd --- /dev/null +++ b/examples/preact-app/babel.config.js @@ -0,0 +1,26 @@ +module.exports = function (api) { + api.cache(true); + + const presets = [ + [ + '@babel/preset-env', + { + useBuiltIns: 'entry', + corejs: '3.0.0', + }, + ], + ]; + + return { + presets, + plugins: [ + [ + '@babel/plugin-transform-react-jsx', + { + pragma: 'h', + pragmaFrag: 'Fragment', + }, + ], + ], + }; +}; diff --git a/examples/preact-app/index.html b/examples/preact-app/index.html new file mode 100644 index 0000000000..fb2d038d6f --- /dev/null +++ b/examples/preact-app/index.html @@ -0,0 +1,24 @@ + + + + + Design System + + + + +
+

Build assets before viewing

+

Seeing this message in the browser? Make sure to run the following command first:

+

+ yarn run build +
+ or +
+ npm run build +

+
+ + + + diff --git a/examples/preact-app/package.json b/examples/preact-app/package.json new file mode 100644 index 0000000000..2f3a08df4e --- /dev/null +++ b/examples/preact-app/package.json @@ -0,0 +1,24 @@ +{ + "name": "react-app-example", + "version": "1.0.0", + "private": true, + "dependencies": { + "@cmsgov/design-system": "^6.0.0", + "preact": "^10.11.3" + }, + "devDependencies": { + "@babel/core": "^7.20.12", + "@babel/plugin-transform-react-jsx": "7.20.13", + "@babel/preset-env": "^7.20.2", + "babel-loader": "^8.0.0", + "gulp": "^4.0.2", + "http-server": "14.1.1", + "webpack": "^5.75.0", + "webpack-cli": "^5.0.1" + }, + "sideEffects": false, + "scripts": { + "build": "webpack --mode production --progress && gulp", + "serve": "http-server" + } +} diff --git a/examples/preact-app/src/scripts/index.js b/examples/preact-app/src/scripts/index.js new file mode 100644 index 0000000000..b94ead3954 --- /dev/null +++ b/examples/preact-app/src/scripts/index.js @@ -0,0 +1,50 @@ +/* eslint-disable react/react-in-jsx-scope */ + +// Named import from main entry file. This example has been configured to use Webpack's tree shaking +// to only bundle imported components. Without this optimization, all components will be imported +// your build process. + +import { Alert, Button, Drawer, UsaBanner } from '@cmsgov/design-system'; +import { render } from 'preact'; +import { useState } from 'preact/hooks'; + +const Example = function () { + const [open, setOpen] = useState(false); + return ( +
+ +
+
+ ExampleWebsite.gov +
+
+ +
+
+

Preact Example

+ +

You did it! You’ve ran the example.

+ {open && ( + Footer content

} + heading="Drawer Heading" + onCloseClick={() => setOpen(false)} + hasFocusTrap={true} + > + Test + + )} + + +
+
+
+ ); +}; + +const root = document.querySelector('#jsx-root'); +root.innerHTML = ''; // Preact doesn't replace content with its `render` function +render(, root); diff --git a/examples/preact-app/webpack.config.js b/examples/preact-app/webpack.config.js new file mode 100644 index 0000000000..fc2a9e341b --- /dev/null +++ b/examples/preact-app/webpack.config.js @@ -0,0 +1,41 @@ +/** + * Use Webpack + Babel to bundle and transpile our JSX + */ +const path = require('path'); +const webpack = require('webpack'); + +const config = { + entry: './src/scripts/index.js', + output: { + filename: 'bundle.js', + path: path.resolve(__dirname, 'dist/scripts'), + }, + resolve: { + alias: { + react: 'preact/compat', + 'react-dom': 'preact/compat', + 'react/jsx-runtime': 'preact/jsx-runtime', + }, + }, + plugins: [ + new webpack.ProvidePlugin({ + h: ['preact', 'h'], + Fragment: ['preact', 'Fragment'], + }), + ], + module: { + rules: [ + { + test: /\.js$/, + exclude: [/node_modules/], + use: [ + { + loader: 'babel-loader', + }, + ], + }, + ], + }, +}; + +module.exports = config; diff --git a/examples/react-app/Gulpfile.js b/examples/react-app/Gulpfile.js index 60d336bbac..4212166338 100644 --- a/examples/react-app/Gulpfile.js +++ b/examples/react-app/Gulpfile.js @@ -1,5 +1,4 @@ const gulp = require('gulp'); -const sass = require('gulp-sass'); /** * Copy the static assets from the design system, such as the fonts and images. @@ -11,28 +10,9 @@ gulp.task('copy-design-system', function () { .src([ 'node_modules/@cmsgov/design-system/dist/**/fonts/*', 'node_modules/@cmsgov/design-system/dist/**/images/*', + 'node_modules/@cmsgov/design-system/dist/css/*.css', ]) .pipe(gulp.dest('./dist/')); }); -/** - * Transpile Sass to CSS - */ -gulp.task('sass', function () { - const transpiler = sass({ - outputStyle: 'compressed', - }).on('error', sass.logError); - - return gulp.src('./src/styles/**/*.scss').pipe(transpiler).pipe(gulp.dest('./dist/styles')); -}); - -/** - * Copy CSS files to local dist - */ -gulp.task('css', function () { - return gulp - .src('node_modules/@cmsgov/design-system/dist/css/*.css') - .pipe(gulp.dest('./dist/styles/cmsds')); -}); - -gulp.task('default', gulp.series('copy-design-system', 'sass')); +gulp.task('default', gulp.series('copy-design-system')); diff --git a/examples/react-app/index.html b/examples/react-app/index.html index c4a299f6ee..fb2d038d6f 100644 --- a/examples/react-app/index.html +++ b/examples/react-app/index.html @@ -3,23 +3,20 @@ Design System - - + -
-
-

Build assets before viewing

-

Seeing this message in the browser? Make sure to run the following command first:

-

- yarn run build -
- or -
- npm run build -

-
+
+

Build assets before viewing

+

Seeing this message in the browser? Make sure to run the following command first:

+

+ yarn run build +
+ or +
+ npm run build +

diff --git a/examples/react-app/package.json b/examples/react-app/package.json index f5a5768a97..07d7b3fa07 100644 --- a/examples/react-app/package.json +++ b/examples/react-app/package.json @@ -3,22 +3,23 @@ "version": "1.0.0", "private": true, "dependencies": { - "@cmsgov/design-system": "file:../../packages/design-system/", + "@cmsgov/design-system": "^6.0.0", "react": "^16.14.0", "react-dom": "^16.14.0" }, "devDependencies": { - "@babel/core": "^7.8.4", - "@babel/preset-env": "^7.8.4", - "@babel/preset-react": "^7.8.3", + "@babel/core": "^7.20.12", + "@babel/preset-env": "^7.20.2", + "@babel/preset-react": "7.18.6", "babel-loader": "^8.0.0", "gulp": "^4.0.2", - "gulp-sass": "^3.1.0", - "webpack": "^4.42.1", - "webpack-cli": "^3.3.11" + "http-server": "14.1.1", + "webpack": "^5.75.0", + "webpack-cli": "^5.0.1" }, "sideEffects": false, "scripts": { - "build": "NODE_ENV=production webpack -p --progress --display-used-exports && gulp" + "build": "webpack --mode production --progress && gulp", + "serve": "http-server" } } diff --git a/examples/react-app/src/scripts/index.js b/examples/react-app/src/scripts/index.js index a52f12f017..7e105d3dfa 100644 --- a/examples/react-app/src/scripts/index.js +++ b/examples/react-app/src/scripts/index.js @@ -1,9 +1,8 @@ // Named import from main entry file. This example has been configured to use Webpack's tree shaking // to only bundle imported components. Without this optimization, all components will be imported // your build process. -import { Alert, Drawer } from '@cmsgov/design-system'; -// Default import for individual component. No special optimizations needed. -import Button from '@cmsgov/design-system/dist/components/Button/Button'; + +import { Alert, Button, Drawer, UsaBanner } from '@cmsgov/design-system'; import React, { useState } from 'react'; import ReactDOM from 'react-dom'; @@ -11,23 +10,35 @@ const Example = function () { const [open, setOpen] = useState(false); return (
- -

You did it! You’ve ran the example.

- {open && ( - Footer content

} - heading="Drawer Heading" - onCloseClick={() => setOpen(false)} - hasFocusTrap={true} - > - Test - - )} - - + +
+
+ ExampleWebsite.gov +
+
+ +
+
+

React Example

+ +

You did it! You’ve ran the example.

+ {open && ( + Footer content

} + heading="Drawer Heading" + onCloseClick={() => setOpen(false)} + hasFocusTrap={true} + > + Test + + )} + + +
+
); }; diff --git a/examples/react-app/src/styles/index.scss b/examples/react-app/src/styles/index.scss deleted file mode 100644 index ad9f8d042d..0000000000 --- a/examples/react-app/src/styles/index.scss +++ /dev/null @@ -1,5 +0,0 @@ -.wrap { - margin: auto; - max-width: 800px; - width: 95%; -} diff --git a/gulpfile.js b/gulpfile.js index 2271bf7b61..8c83ade2ac 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -17,6 +17,7 @@ const filter = require('gulp-filter'); const log = require('fancy-log'); const svgmin = require('gulp-svgmin'); const webpack = require('webpack-stream'); +const { ProvidePlugin } = require('webpack'); /* * command line arguments and global variables @@ -223,32 +224,70 @@ const compileTypescriptDefs = (cb) => { compileTypescriptDefs.displayName = '⛓ generating typescript definition files'; /* - * bundle javascript for CDN + * Bundle javascript for CDN */ -const bundleJs = (cb) => { - const entry = path.resolve(distPath, 'esnext', 'index.esm.js'); +const bundleJs = (options, cb) => { gulp - .src(entry) + .src(options.entryPath) .pipe( webpack({ output: { - filename: 'bundle.js', + filename: options.bundleName, // Expose all the index file's exports as a "DesignSystem" global object library: 'DesignSystem', }, mode: process.env.NODE_ENV || 'production', - // Don't bundle react, since we don't expose it anyway and you need to interact - // with those libraries directly in order to use our components. - externals: { - react: 'React', - 'react-dom': 'ReactDOM', + devtool: 'source-map', + plugins: [ + new ProvidePlugin({ + h: ['preact', 'h'], + Fragment: ['preact', 'Fragment'], + }), + ], + resolve: { + alias: { + react: 'preact/compat', + 'react-dom/test-utils': 'preact/test-utils', + 'react-dom': 'preact/compat', // Must be below test-utils + 'react/jsx-runtime': 'preact/jsx-runtime', + }, }, + ...(options.webpackConfig ?? {}), }) ) .pipe(gulp.dest(`${distPath}/js`)) .on('end', cb); }; -bundleJs.displayName = '💼 bundling cmsds for cdn with webpack'; + +const bundlePreactComponents = (cb) => { + bundleJs( + { + entryPath: path.resolve(distPath, 'esnext', 'index.esm.js'), + bundleName: 'preact-components.js', + webpackConfig: { + // Don't bundle preact because our customers need to interact with it directly + // in order to use our components, and we don't expose it in our code. They + // should instead load the preact umd module before loading our bundle. + externals: { + preact: 'preact', + }, + }, + }, + cb + ); +}; +bundlePreactComponents.displayName = '💼 bundling Preact components for cdn with webpack'; + +const bundleWebComponents = (cb) => { + bundleJs( + { + entryPath: path.resolve(distPath, 'esnext', 'web-components', 'index.js'), + bundleName: 'web-components.js', + }, + cb + ); +}; +bundleWebComponents.displayName = '💼 bundling web components for cdn with webpack'; /* * copies react bundles currently installed into cdn dist folder @@ -258,8 +297,11 @@ const copyReactToDist = (cb) => { gulp .src([ - `${nodeModules}/react/umd/react.production.min.js`, - `${nodeModules}/react-dom/umd/react-dom.production.min.js`, + // `${nodeModules}/react/umd/react.production.min.js`, + // `${nodeModules}/react-dom/umd/react-dom.production.min.js`, + `${nodeModules}/preact/dist/preact.min.umd.js`, + `${nodeModules}/preact/dist/preact.umd.js`, + `${nodeModules}/preact/dist/preact.umd.js.map`, ]) .pipe(gulp.dest(`${distPath}/js`)) .on('end', cb); @@ -287,7 +329,7 @@ exports.build = gulp.series( cleanDist, gulp.parallel(copyThemes, copyImages, copyFonts, copyJSON), gulp.parallel(compileSass, compileJs, compileEsmJs, compileTypescriptDefs), - gulp.parallel(bundleJs, copyReactToDist) + gulp.series(bundlePreactComponents, bundleWebComponents, copyReactToDist) ); /* diff --git a/package.json b/package.json index 0bc8b1df0b..850c60a41d 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "test:a11y": "yarn playwright test --config tests/a11y/playwright.config.ts", "test:unit": "yarn jest --config=tests/unit/jest.config.js", "test:unit:update": "yarn test:unit --updateSnapshot", + "test:unit:preact": "PREACT=true yarn jest --config=tests/unit/jest.config.js", "test:browser": "docker run --rm --network host -v $(pwd):/work/ -w /work/ mcr.microsoft.com/playwright:v1.25.0-focal yarn playwright test --config tests/browser/playwright.config.ts", "test:browser:update": "yarn build:storybook && docker run --rm --network host -v $(pwd):/work/ -w /work/ mcr.microsoft.com/playwright:v1.25.0-focal yarn playwright test --config tests/browser/playwright.config.ts -u", "type-check": "yarn tsc --noEmit" @@ -122,6 +123,7 @@ "postcss": "^8", "postcss-import": "^15.0.0", "postcss-scss": "^4.0.3", + "preact": "10.11.3", "prettier": "^2.6.1", "react": "17.0.2", "react-app-polyfill": "^3.0.0", diff --git a/packages/design-system/package.json b/packages/design-system/package.json index 9d8801f3bc..0c35e8ab41 100644 --- a/packages/design-system/package.json +++ b/packages/design-system/package.json @@ -17,7 +17,7 @@ "license": "SEE LICENSE IN LICENSE.md", "main": "dist/components/index.js", "module": "dist/esnext/index.esm.js", - "sideEffects": false, + "sideEffects": ["./dist/esnext/web-components/ds-alert.js", "./dist/esnext/web-components/ds-badge.js", "./dist/esnext/web-components/ds-button.js"], "types": "dist/types/index.d.ts", "files": [ "dist", @@ -40,6 +40,7 @@ "inquirer": "^9.0.2", "lodash": "^4.17.21", "ora": "^6.1.2", + "preactement": "1.8.2", "prop-types": "^15.8.1", "react-day-picker": "^8.0.5", "react-transition-group": "^4.4.2", diff --git a/packages/design-system/src/components/Button/Button.tsx b/packages/design-system/src/components/Button/Button.tsx index abc96e459d..410af9dc9d 100644 --- a/packages/design-system/src/components/Button/Button.tsx +++ b/packages/design-system/src/components/Button/Button.tsx @@ -154,7 +154,7 @@ export const Button = (props: ButtonProps) => { Button.defaultProps = { isAlternate: false, onDark: false, - type: 'button', + type: 'button' as const, }; export default Button; diff --git a/packages/design-system/src/components/web-components/ds-alert.ts b/packages/design-system/src/components/web-components/ds-alert.ts new file mode 100644 index 0000000000..b0383d8eac --- /dev/null +++ b/packages/design-system/src/components/web-components/ds-alert.ts @@ -0,0 +1,14 @@ +import { define } from 'preactement'; +import Alert from '../Alert/Alert'; + +const attributes = [ + 'class-name', + 'heading', + 'heading-id', + 'hide-icon', + 'role', + 'weight', + 'variation', +]; + +define('ds-alert', () => Alert, { attributes }); diff --git a/packages/design-system/src/components/web-components/ds-badge.ts b/packages/design-system/src/components/web-components/ds-badge.ts new file mode 100644 index 0000000000..eb833b922f --- /dev/null +++ b/packages/design-system/src/components/web-components/ds-badge.ts @@ -0,0 +1,6 @@ +import { define } from 'preactement'; +import Badge from '../Badge/Badge'; + +const attributes = ['class-name', 'size', 'variation']; + +define('ds-badge', () => Badge, { attributes }); diff --git a/packages/design-system/src/components/web-components/ds-button.ts b/packages/design-system/src/components/web-components/ds-button.ts new file mode 100644 index 0000000000..7e83c91c48 --- /dev/null +++ b/packages/design-system/src/components/web-components/ds-button.ts @@ -0,0 +1,20 @@ +import { define } from 'preactement'; +import Button from '../Button/Button'; + +const attributes = [ + 'class-name', + 'disabled', + 'href', + 'is-alternate', + 'on-dark', + 'size', + 'type', + 'variation', + 'analytics', + 'analytics-label-override', + 'analytics-event-type-override', + 'analytics-parent-heading', + 'analytics-parent-type', +]; + +define('ds-button', () => Button, { attributes }); diff --git a/packages/design-system/src/components/web-components/index.ts b/packages/design-system/src/components/web-components/index.ts new file mode 100644 index 0000000000..6d1df5aefa --- /dev/null +++ b/packages/design-system/src/components/web-components/index.ts @@ -0,0 +1,17 @@ +/** + * Entry point for web-components version of the component library + * + * This version necessarily has side-effects because defining custom elements + * in a web page changes the global state of JavaScript in that page; this + * module therefore needs to be marked as having side effects in the package + * file in order to let bundlers know not to remove all the web-component + * modules during tree-shaking. + */ + +export * from '../analytics'; +export * from '../flags'; +export * from '../i18n'; + +export * from './ds-alert'; +export * from './ds-badge'; +export * from './ds-button'; diff --git a/tests/unit/jest.config.js b/tests/unit/jest.config.js index f6e6aae1a2..d88b975b9f 100644 --- a/tests/unit/jest.config.js +++ b/tests/unit/jest.config.js @@ -1,3 +1,13 @@ +const usePreact = Boolean(process.env.PREACT && JSON.parse(process.env.PREACT)); +const preactModuleMapper = usePreact + ? { + '^react$': 'preact/compat', + '^react-dom/test-utils$': 'preact/test-utils', + '^react-dom$': 'preact/compat', + '^react/jsx-runtime$': 'preact/jsx-runtime', + } + : {}; + module.exports = { rootDir: '../../packages', testEnvironment: 'jsdom', @@ -18,5 +28,6 @@ module.exports = { moduleNameMapper: { // Remap imports for core to the src directory so we don't have to build first '^@cmsgov/design-system$': '/design-system/src/components/index', + ...preactModuleMapper, }, }; diff --git a/yarn.lock b/yarn.lock index 216b5f31fd..52bce2f8a5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -20459,6 +20459,16 @@ postcss@^8.2.9, postcss@^8.3.11, postcss@^8.4.12: picocolors "^1.0.0" source-map-js "^1.0.2" +preact@10.11.3: + version "10.11.3" + resolved "https://registry.yarnpkg.com/preact/-/preact-10.11.3.tgz#8a7e4ba19d3992c488b0785afcc0f8aa13c78d19" + integrity sha512-eY93IVpod/zG3uMF22Unl8h9KkrcKIRs2EGar8hwLZZDU1lkjph303V9HZBwufh2s736U6VXuhD109LYqPoffg== + +preactement@1.8.2: + version "1.8.2" + resolved "https://registry.yarnpkg.com/preactement/-/preactement-1.8.2.tgz#e4a81aff91ad4de50cc6ab25a838d9d371d740cf" + integrity sha512-YJHjmSc3u9bCtkueKDpNHuf3feCSCAc9R5xE2N7BsteBQB7O2cpFpK1yaFZLzmW+lDV/A4vCVFRpANmSL92Dpg== + prebuild-install@^7.0.1: version "7.0.1" resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-7.0.1.tgz#c10075727c318efe72412f333e0ef625beaf3870"