From 823f56800ebcd775f73ffbe4ba507fd8a58c14a3 Mon Sep 17 00:00:00 2001
From: Patrick Wolfert <patrick.wolfert@adhocteam.us>
Date: Tue, 31 Jan 2023 16:18:29 -0800
Subject: [PATCH] Web components are kind of working

If I were doing this for real, I'd make a separate web components bundle so there are no side effects in the npm package. Problem right now is being able to pass `children` to web components. Going to try https://github.com/jahilldev/component-elements/tree/main/packages/preactement#readme next based on [this issue thread](https://github.com/preactjs/preact-custom-element/issues/41)
---
 examples/cdn-preact/index.html                   |  4 ++++
 packages/design-system/package.json              |  3 ++-
 packages/design-system/src/components/index.ts   |  2 ++
 .../src/components/web-components/ds-alert.ts    | 16 ++++++++++++++++
 yarn.lock                                        |  5 +++++
 5 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 packages/design-system/src/components/web-components/ds-alert.ts

diff --git a/examples/cdn-preact/index.html b/examples/cdn-preact/index.html
index 0049b25b63..d6707c88ed 100644
--- a/examples/cdn-preact/index.html
+++ b/examples/cdn-preact/index.html
@@ -45,6 +45,10 @@ <h1 class="ds-h1">CDN Example</h1>
           );
         </script>
 
+        <ds-alert variation="error" heading="WHOA!!!!!" children="Weeeee!!!">
+          <span slot="children">Weeeeeee!!!</span>
+        </ds-alert>
+
         <form>
           <div id="month-picker"></div>
           <script>
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
index 9d8801f3bc..0d8d35e1ce 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"],
   "types": "dist/types/index.d.ts",
   "files": [
     "dist",
@@ -40,6 +40,7 @@
     "inquirer": "^9.0.2",
     "lodash": "^4.17.21",
     "ora": "^6.1.2",
+    "preact-custom-element": "4.2.1",
     "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/index.ts b/packages/design-system/src/components/index.ts
index 6c4322b6d8..bf2b5f102f 100644
--- a/packages/design-system/src/components/index.ts
+++ b/packages/design-system/src/components/index.ts
@@ -28,6 +28,8 @@ export * from './UsaBanner';
 export * from './VerticalNav';
 export * from './Icons';
 
+import './web-components/ds-alert';
+
 export * from './analytics';
 export * from './flags';
 export * from './i18n';
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..d7dbbfb389
--- /dev/null
+++ b/packages/design-system/src/components/web-components/ds-alert.ts
@@ -0,0 +1,16 @@
+import register from 'preact-custom-element';
+import Alert, { AlertProps } from '../Alert/Alert';
+
+const observedAttributes: Array<keyof AlertProps> = [
+  'className',
+  'heading',
+  'headingId',
+  'hideIcon',
+  'role',
+  'weight',
+  'variation',
+];
+
+// In order for slots to work with `preact-custom-element`, shadow dom has to be
+// enabled, but unfortunately that will break the styles because they're global.
+register(Alert, 'ds-alert', observedAttributes, { shadow: false });
diff --git a/yarn.lock b/yarn.lock
index 2480970355..98fcdf7ec6 100644
--- 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"
 
+preact-custom-element@4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/preact-custom-element/-/preact-custom-element-4.2.1.tgz#a18752ef60823ea61199d9cdc1866e51139b3f46"
+  integrity sha512-/fiEEAyC+MXRlCBRmv/owoN5BLpO2nF/MF3YBHLtp4C2lNqlhV+a4he74A5DhfDoRmxDHm0sYVgQzWFEyzTDsw==
+
 preact@10.11.3:
   version "10.11.3"
   resolved "https://registry.yarnpkg.com/preact/-/preact-10.11.3.tgz#8a7e4ba19d3992c488b0785afcc0f8aa13c78d19"