Build a preact CDN bundle and use it in a new cdn-preact example

Note that the additional babel config breaks Storybook, but if we end up going this route, we can update our Storybook config to work with preact
CMSgov · Jan 31, 2023 · bdcd14d · bdcd14d
1 parent 84918dc
commit bdcd14d
Show file tree

Hide file tree

Showing 9 changed files with 123 additions and 10 deletions.
diff --git 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/babel.config.js b/babel.config.js
@@ -18,6 +18,13 @@ module.exports = function (api) {
     '@babel/plugin-transform-object-assign',
     ['babel-plugin-typescript-to-proptypes', { comments: true }],
     'inline-react-svg',
+    [
+      '@babel/plugin-transform-react-jsx',
+      {
+        pragma: 'h',
+        pragmaFrag: 'Fragment',
+      },
+    ],
   ];
 
   return {

diff --git a/examples/cdn-preact/README.md b/examples/cdn-preact/README.md
@@ -0,0 +1,15 @@
+## Example: Consuming assets from the CDN
+
+This shows the usage of CMS design system 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 React 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
@@ -0,0 +1,4 @@
+#!/usr/bin/env bash
+
+mkdir -p dist/js
+cp -R ../../packages/design-system/dist/js/. dist/js/
diff --git a/examples/cdn-preact/index.html b/examples/cdn-preact/index.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>CDN Example</title>
+    <link rel="stylesheet" href="https://design.cms.gov/cdn/design-system/6.0.0/css/index.css" />
+    <link
+      rel="stylesheet"
+      href="https://design.cms.gov/cdn/design-system/6.0.0/css/core-theme.css"
+    />
+    <link rel="stylesheet" href="style.css" />
+    <script src="dist/js/preact.min.umd.js"></script>
+    <script src="dist/js/bundle.js"></script>
+  </head>
+  <body class="ds-base">
+    <div id="usa-banner"></div>
+    <script>
+      preact.render(preact.h(DesignSystem.UsaBanner), document.getElementById('usa-banner'));
+    </script>
+
+    <header class="ds-base--inverse ds-u-padding-y--3">
+      <div class="ds-l-container">
+        <span class="ds-h3">ExampleWebsite.gov</span>
+      </div>
+    </header>
+
+    <div class="ds-l-container ds-u-padding-top--2">
+      <div class="ds-u-measure--base">
+        <h1 class="ds-h1">CDN Example</h1>
+        <p>
+          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.
+        </p>
+
+        <div id="alert"></div>
+        <script>
+          preact.render(
+            preact.h(DesignSystem.Alert, {
+              heading: 'Hello World',
+              children: 'I was rendered with React!',
+            }),
+            document.getElementById('alert')
+          );
+        </script>
+
+        <form>
+          <div id="month-picker"></div>
+          <script>
+            preact.render(
+              preact.h(DesignSystem.MonthPicker, {
+                label: 'Please select the months you lived abroad.',
+                name: 'months',
+              }),
+              document.getElementById('month-picker')
+            );
+          </script>
+
+          <button type="submit" class="ds-c-button ds-c-button--primary">Submit</button>
+        </form>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/examples/cdn-preact/style.css b/examples/cdn-preact/style.css
@@ -0,0 +1,4 @@
+body {
+  margin: 0;
+  padding: 0;
+}
diff --git 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
@@ -237,11 +238,25 @@ const bundleJs = (cb) => {
           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.
+        // 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: {
-          react: 'React',
-          'react-dom': 'ReactDOM',
+          preact: 'preact',
+        },
+        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',
+          },
         },
       })
     )
@@ -258,8 +273,9 @@ 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`,
     ])
     .pipe(gulp.dest(`${distPath}/js`))
     .on('end', cb);

diff --git a/package.json b/package.json
@@ -122,6 +122,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/yarn.lock b/yarn.lock
@@ -20459,6 +20459,11 @@ postcss@^8.2.9, postcss@^8.3.11, postcss@^8.4.12:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+[email protected]:
+  version "10.11.3"
+  resolved "https://registry.yarnpkg.com/preact/-/preact-10.11.3.tgz#8a7e4ba19d3992c488b0785afcc0f8aa13c78d19"
+  integrity sha512-eY93IVpod/zG3uMF22Unl8h9KkrcKIRs2EGar8hwLZZDU1lkjph303V9HZBwufh2s736U6VXuhD109LYqPoffg==
+
 prebuild-install@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-7.0.1.tgz#c10075727c318efe72412f333e0ef625beaf3870"