From 99ecf14f8df1f2db1dfd0068e8a7703cdca128cd Mon Sep 17 00:00:00 2001
From: Sean Hammond <seanh@users.noreply.github.com>
Date: Fri, 5 Jul 2024 12:49:09 +0100
Subject: [PATCH] Fix Preact app CSS in shadow DOM

Since the Preact app has now been moved into a shadow DOM the app's CSS
was no longer working: the `<link>` elements for the app's stylesheets
were outside of the shadow DOM where they don't affect the content
inside the shadow DOM.

The `<link>`'s to the app's stylesheets need to be moved into the shadow
DOM. The problem is that the Preact app renders the contents of the
shadow DOM, but the stylesheet URLs are only available to the Jinja
templates and not available to the Preact app, but the Jinja templates
only render the outer page not the contents of the shadow DOM.

Get around this by having the Jinja templates pass the stylesheet URLs
into the Preact app so that the Preact app can render the `<link>`'s in
the shadow DOM: change the `create.html.jinja2` template to render the
app's stylesheet URLs in a `"js-config"` object instead of actually
rendering them as stylesheet `<link>`'s, then change the Preact app to
read the stylesheet URLs from the `"js-config"` object and to render
`<link>`'s for the stylesheet URLs into the shadow DOM.

This `"js-config"` object can be used more in future when we need the
Python code/Jinja templates to pass more configuration into the Preact
app.
---
 h/static/scripts/group-forms/config.ts |  9 +++++++++
 h/static/scripts/group-forms/index.tsx | 13 ++++++++++++-
 h/templates/groups/create.html.jinja2  | 13 +++++--------
 3 files changed, 26 insertions(+), 9 deletions(-)
 create mode 100644 h/static/scripts/group-forms/config.ts

diff --git a/h/static/scripts/group-forms/config.ts b/h/static/scripts/group-forms/config.ts
new file mode 100644
index 00000000000..c9e530e1b3c
--- /dev/null
+++ b/h/static/scripts/group-forms/config.ts
@@ -0,0 +1,9 @@
+export type ConfigObject = {
+  /** The URLs of the app's CSS stylesheets. */
+  styles: string[];
+};
+
+/** Return the frontend config from the page's <script class="js-config">. */
+export default function readConfig(): ConfigObject {
+  return JSON.parse(document.querySelector('.js-config')!.textContent!);
+}
diff --git a/h/static/scripts/group-forms/index.tsx b/h/static/scripts/group-forms/index.tsx
index 9f243d167dd..b1ec0dce3f1 100644
--- a/h/static/scripts/group-forms/index.tsx
+++ b/h/static/scripts/group-forms/index.tsx
@@ -1,11 +1,22 @@
 import { render } from 'preact';
 
 import CreateGroupForm from './components/CreateGroupForm';
+import readConfig from './config';
 
 function init() {
   const shadowHost = document.querySelector('#create-group-form')!;
   const shadowRoot = shadowHost.attachShadow({ mode: 'open' });
-  render(<CreateGroupForm />, shadowRoot);
+  const config = readConfig();
+  const stylesheetLinks = config.styles.map(stylesheetURL => (
+    <link rel="stylesheet" href={stylesheetURL} />
+  ));
+  render(
+    <>
+      {stylesheetLinks}
+      <CreateGroupForm />
+    </>,
+    shadowRoot,
+  );
 }
 
 init();
diff --git a/h/templates/groups/create.html.jinja2 b/h/templates/groups/create.html.jinja2
index c99be0edd49..c023a34f1eb 100644
--- a/h/templates/groups/create.html.jinja2
+++ b/h/templates/groups/create.html.jinja2
@@ -2,16 +2,13 @@
 
 {% set page_title = 'Create a new private group' %}
 
-{% block styles %}
-  {{ super() }}
-
-  {% for url in asset_urls('group_forms_css') %}
-    <link rel="stylesheet" href="{{ url }}">
-  {% endfor %}
-{% endblock %}
-
 {% block page_content %}
   <div id="create-group-form"></div>
+  <script type="application/json" class="js-config">
+    {
+      "styles": {{ asset_urls("group_forms_css")|tojson }}
+    }
+  </script>
 {% endblock %}
 
 {% block scripts %}