Merge commit '958a810553aac6b6cf21d9d107a47b6f68b2a401' into glitch-soc/merge-upstream

Conflicts:
- `app/javascript/packs/admin.jsx`:
  This file was split between `app/javascript/core/admin.js`,
  `app/javascript/pack/admin.jsx`, and
  `app/javascript/flavours/glitch/packs/admin.jsx`.
  Ported upstream's change, splitting the new file to
  `app/javascript/core/admin.ts`, `app/javascript/packs/admin.tsx`,
  and `app/javascript/flavours/glitch/packs/admin.tsx`

app/javascript/flavours/glitch/packs/admin.jsx

@@ -1,25 +0,0 @@
-import 'packs/public-path';
-import { createRoot } from 'react-dom/client';
-
-import ready from 'flavours/glitch/ready';
-
-ready(() => {
-  document.querySelectorAll('[data-admin-component]').forEach(element => {
-    const componentName  = element.getAttribute('data-admin-component');
-    const componentProps = JSON.parse(element.getAttribute('data-props'));
-
-    import('flavours/glitch/containers/admin_component').then(({ default: AdminComponent }) => {
-      return import('flavours/glitch/components/admin/' + componentName).then(({ default: Component }) => {
-        const root = createRoot(element);
-
-        root.render (
-          <AdminComponent>
-            <Component {...componentProps} />
-          </AdminComponent>,
-        );
-      });
-    }).catch(error => {
-      console.error(error);
-    });
-  });
-});

app/javascript/flavours/glitch/packs/admin.tsx

@@ -0,0 +1,37 @@
+import 'packs/public-path';
+import { createRoot } from 'react-dom/client';
+
+import ready from 'flavours/glitch/ready';
+
+async function mountReactComponent(element: Element) {
+  const componentName = element.getAttribute('data-admin-component');
+  const stringProps = element.getAttribute('data-props');
+
+  if (!stringProps) return;
+
+  const componentProps = JSON.parse(stringProps) as object;
+
+  const { default: AdminComponent } = await import(
+    '@/flavours/glitch/containers/admin_component'
+  );
+
+  const { default: Component } = (await import(
+    `@/flavours/glitch/components/admin/${componentName}`
+  )) as { default: React.ComponentType };
+
+  const root = createRoot(element);
+
+  root.render(
+    <AdminComponent>
+      <Component {...componentProps} />
+    </AdminComponent>,
+  );
+}
+
+ready(() => {
+  document.querySelectorAll('[data-admin-component]').forEach((element) => {
+    void mountReactComponent(element);
+  });
+}).catch((reason) => {
+  throw reason;
+});

app/javascript/flavours/glitch/theme.yml

@@ -1,7 +1,7 @@
 #  (REQUIRED) The location of the pack files.
 pack:
   admin:
-    - packs/admin.jsx
+    - packs/admin.tsx
     - packs/public.jsx
   auth: packs/public.jsx
   common:

app/javascript/flavours/vanilla/theme.yml

@@ -1,7 +1,7 @@
 #  (REQUIRED) The location of the pack files inside `pack_directory`.
 pack:
   admin:
-    - admin.jsx
+    - admin.tsx
     - public.jsx
   auth: public.jsx
   common: