@unitedstatespowersquadrons/components 1.1.1 → 1.1.3

package/Readme.md

@@ -16,6 +16,30 @@ Install dependencies with
 yarn
 ```
 
+## Mounting Components
+
+Components can be mounted by passing them into the included `mount` function in
+your application asset root.
+
+```tsx
+mount({
+  ActionButton,
+});
+```
+
+This will search the DOM for elements matching the following pattern, and
+attempt to render the corresponding component at that location.
+
+```html
+<div data-react-component="Namespace.Component" data-props="{}"></div>
+```
+
+In Rails, you can generate this element with the following helper call:
+
+```rb
+content_tag(:div, '', data: { 'react-component' => component_name, props: props.to_json })
+```
+
 ## Toasts
 
 More detailed information is available for [Toasts](Toasts/Readme.md) usage.

package/index.tsx

@@ -1,3 +1,4 @@
+export { default as mount } from "./mount";
 export * from "./Reducer";
 
 export { default as FontAwesomeIcon } from "./FontAwesomeIcon";

package/mount.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+
+type Components = Record<string, React.ElementType>;
+type NestedComponents = Record<string, React.ElementType | Components>;
+
+const findComponent = (
+  components: NestedComponents,
+  componentName: string
+): React.ElementType | undefined => {
+  let current: NestedComponents | React.ElementType = components;
+
+  // Walk through the provided component name, filtering the defined components
+  if (/\./.exec(componentName)) {
+    const keys = componentName.split(".");
+    componentName = keys.pop()!; // Reserve last key
+
+    for (const key of keys) {
+      if (typeof current === "object" && key in current) {
+        current = current[key]!;
+      } else {
+        return; // Short-circuit: lookup chain broken
+      }
+    }
+  }
+
+  // Return the specified component
+  return (current as Components)[componentName];
+};
+
+export default function mount(components: NestedComponents): void {
+  document.addEventListener("DOMContentLoaded", () => {
+    const mountPoints = document.querySelectorAll("[data-react-component]");
+    mountPoints.forEach(mountPoint => {
+      const { dataset } = mountPoint as HTMLElement;
+      const componentName = dataset["reactComponent"];
+      if (componentName) {
+        const Component = findComponent(components, componentName);
+        if (Component) {
+          const props = JSON.parse(dataset["props"] as string) as object;
+          const root = ReactDOM.createRoot(mountPoint);
+          root.render(<Component {...props} />);
+        } else {
+          // eslint-disable-next-line no-console
+          console.warn(
+            "WARNING: No component found for: ",
+            dataset["reactComponent"],
+            components
+          );
+        }
+      }
+    });
+  });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unitedstatespowersquadrons/components",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "USPS shared React components library",
   "main": "index.tsx",
   "scripts": {
@@ -20,6 +20,7 @@
     "classnames": "^2.5.1",
     "immer": "^10.1.1",
     "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "react-jss": "^10.10.0",
     "typescript": "^5.8.3",
     "use-immer": "^0.11.0"
@@ -27,6 +28,7 @@
   "devDependencies": {
     "@stylistic/eslint-plugin": "^5.1.0",
     "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
     "eslint": "^9.30.1",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-import-newlines": "^1.4.0",