Updated signup form options to react to changes (#16854)

refs https://github.com/TryGhost/Team/issues/3293

ghost/signup-form/src/App.tsx

@@ -1,15 +1,18 @@
 import React, {ComponentProps} from 'react';
 import pages, {Page, PageName} from './pages';
-import {AppContextProvider, SignupFormOptions} from './AppContext';
+import {AppContextProvider} from './AppContext';
 import {ContentBox} from './components/ContentBox';
 import {Frame} from './components/Frame';
 import {setupGhostApi} from './utils/api';
+import {useOptions} from './utils/options';
 
 type AppProps = {
-    options: SignupFormOptions;
+    scriptTag: HTMLElement;
 };
 
-const App: React.FC<AppProps> = ({options}) => {
+const App: React.FC<AppProps> = ({scriptTag}) => {
+    const options = useOptions(scriptTag);
+
     const [page, setPage] = React.useState<Page>({
         name: 'FormPage',
         data: {}

ghost/signup-form/src/index.tsx

@@ -2,7 +2,6 @@ import App from './App.tsx';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import {ROOT_DIV_CLASS} from './utils/constants';
-import {SignupFormOptions} from './AppContext.ts';
 
 function getScriptTag(): HTMLElement {
     let scriptTag = document.currentScript as HTMLElement | null;
@@ -45,18 +44,9 @@ function init() {
     const scriptTag = getScriptTag();
     const root = getRootDiv(scriptTag);
 
-    const options: SignupFormOptions = {
-        title: scriptTag.dataset.title || undefined,
-        description: scriptTag.dataset.description || undefined,
-        logo: scriptTag.dataset.logo || undefined,
-        color: scriptTag.dataset.color || undefined,
-        site: scriptTag.dataset.site || window.location.origin,
-        labels: scriptTag.dataset.labels ? scriptTag.dataset.labels.split(',') : []
-    };
-
     ReactDOM.createRoot(root).render(
         <React.StrictMode>
-            <App options={options} />
+            <App scriptTag={scriptTag} />
         </React.StrictMode>
     );
 }

ghost/signup-form/src/utils/options.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import {SignupFormOptions} from '../AppContext';
+
+export function useOptions(scriptTag: HTMLElement) {
+    const buildOptions = React.useCallback(() => ({
+        title: scriptTag.dataset.title || undefined,
+        description: scriptTag.dataset.description || undefined,
+        logo: scriptTag.dataset.logo || undefined,
+        color: scriptTag.dataset.color || undefined,
+        site: scriptTag.dataset.site || window.location.origin,
+        labels: scriptTag.dataset.labels ? scriptTag.dataset.labels.split(',') : []
+    }), [scriptTag]);
+
+    const [options, setOptions] = React.useState<SignupFormOptions>(buildOptions());
+
+    React.useEffect(() => {
+        const observer = new MutationObserver((mutationList) => {
+            if (mutationList.some(mutation => mutation.type === 'attributes')) {
+                setOptions(buildOptions());
+            }
+        });
+
+        observer.observe(scriptTag, {
+            attributes: true
+        });
+
+        return () => {
+            observer.disconnect();
+        };
+    }, [scriptTag, buildOptions]);
+
+    return options;
+}