Apply title from url on page load

.changeset/green-plants-cheer.md

@@ -0,0 +1,8 @@
+---
+'playroom': patch
+---
+
+Apply `title` from url on page load
+
+Previously the document `title` would only update when the frames panel is open.
+The title is now correctly reflected from the url on page load.

cypress/e2e/urlHandling.cy.ts

@@ -22,6 +22,14 @@ describe('URL handling', () => {
 
       assertFramesMatch([375, 768]);
     });
+
+    it('title', () => {
+      cy.visit(
+        'http://localhost:9000/#?code=N4Ig7glgJgLgFgZxALgNoF0A0IYRgGwFMUQAVQhGEAXyA'
+      );
+
+      cy.title().should('eq', 'Test | Playroom');
+    });
   });
 
   describe('where paramType is search', () => {
@@ -34,7 +42,7 @@ describe('URL handling', () => {
       assertCodePaneContains('<Foo><Foo><Bar/></Foo></Foo>');
     });
 
-    it('widths', () => {
+    it('widths and themes', () => {
       cy.visit(
         'http://localhost:9001/?code=N4Ig7glgJgLgFgZxALgNoGYDsBWANJgNgA4BdAXyA'
       );
@@ -46,5 +54,13 @@ describe('URL handling', () => {
         ['themeTwo', 768],
       ]);
     });
+
+    it('title', () => {
+      cy.visit(
+        'http://localhost:9001/?code=N4Ig7glgJgLgFgZxALgNoF0A0IYRgGwFMUQAVQhGEAXyA'
+      );
+
+      cy.title().should('eq', 'Test | Playroom');
+    });
   });
 });

src/Playroom/FramesPanel/FramesPanel.tsx

@@ -5,26 +5,11 @@ import { ToolbarPanel } from '../ToolbarPanel/ToolbarPanel';
 import { StoreContext } from '../../StoreContext/StoreContext';
 import { Stack } from '../Stack/Stack';
 import { Text } from '../Text/Text';
-import { Helmet } from 'react-helmet';
 import { Inline } from '../Inline/Inline';
 import { Box } from '../Box/Box';
 
 import * as styles from './FramesPanel.css';
 
-const getTitle = (title: string | undefined) => {
-  if (title) {
-    return `${title} | Playroom`;
-  }
-
-  const configTitle = window?.__playroomConfig__.title;
-
-  if (configTitle) {
-    return `${configTitle} | Playroom`;
-  }
-
-  return 'Playroom';
-};
-
 interface FramesPanelProps {
   availableWidths: number[];
   availableThemes: string[];
@@ -104,93 +89,84 @@ export default ({ availableWidths, availableThemes }: FramesPanelProps) => {
   const hasFilteredThemes =
     visibleThemes.length > 0 && visibleThemes.length <= availableThemes.length;
 
-  const displayedTitle = getTitle(title);
-
   return (
-    <>
-      {title === undefined ? null : (
-        <Helmet>
-          <title>{displayedTitle}</title>
-        </Helmet>
-      )}
-      <ToolbarPanel>
-        <Stack space="xxxlarge">
-          <label>
-            <Stack space="small">
-              <Heading level="3">Title</Heading>
-              <input
-                type="text"
-                id="playroomTitleField"
-                placeholder="Enter a title for this Playroom..."
-                className={styles.textField}
-                value={title}
-                onChange={(e) =>
+    <ToolbarPanel>
+      <Stack space="xxxlarge">
+        <label>
+          <Stack space="small">
+            <Heading level="3">Title</Heading>
+            <input
+              type="text"
+              id="playroomTitleField"
+              placeholder="Enter a title for this Playroom..."
+              className={styles.textField}
+              value={title}
+              onChange={(e) =>
+                dispatch({
+                  type: 'updateTitle',
+                  payload: { title: e.target.value },
+                })
+              }
+            />
+          </Stack>
+        </label>
+
+        <Stack space="xlarge">
+          <FrameHeading
+            showReset={hasFilteredWidths}
+            onReset={() => dispatch({ type: 'resetVisibleWidths' })}
+          >
+            Widths
+          </FrameHeading>
+          {availableWidths.map((option) => (
+            <FrameOption
+              key={option}
+              option={option}
+              selected={hasFilteredWidths && visibleWidths.includes(option)}
+              visible={visibleWidths}
+              onChange={(newWidths) => {
+                if (newWidths) {
                   dispatch({
-                    type: 'updateTitle',
-                    payload: { title: e.target.value },
-                  })
+                    type: 'updateVisibleWidths',
+                    payload: { widths: newWidths },
+                  });
+                } else {
+                  dispatch({ type: 'resetVisibleWidths' });
                 }
-              />
-            </Stack>
-          </label>
+              }}
+            />
+          ))}
+        </Stack>
 
+        {hasThemes ? (
           <Stack space="xlarge">
             <FrameHeading
-              showReset={hasFilteredWidths}
-              onReset={() => dispatch({ type: 'resetVisibleWidths' })}
+              showReset={hasFilteredThemes}
+              onReset={() => dispatch({ type: 'resetVisibleThemes' })}
             >
-              Widths
+              Themes
             </FrameHeading>
-            {availableWidths.map((option) => (
+            {availableThemes.map((option) => (
               <FrameOption
                 key={option}
                 option={option}
-                selected={hasFilteredWidths && visibleWidths.includes(option)}
-                visible={visibleWidths}
-                onChange={(newWidths) => {
-                  if (newWidths) {
+                selected={hasFilteredThemes && visibleThemes.includes(option)}
+                visible={visibleThemes}
+                onChange={(newThemes) => {
+                  if (newThemes) {
                     dispatch({
-                      type: 'updateVisibleWidths',
-                      payload: { widths: newWidths },
+                      type: 'updateVisibleThemes',
+                      payload: { themes: newThemes },
                     });
                   } else {
-                    dispatch({ type: 'resetVisibleWidths' });
+                    dispatch({ type: 'resetVisibleThemes' });
                   }
                 }}
               />
             ))}
           </Stack>
-
-          {hasThemes ? (
-            <Stack space="xlarge">
-              <FrameHeading
-                showReset={hasFilteredThemes}
-                onReset={() => dispatch({ type: 'resetVisibleThemes' })}
-              >
-                Themes
-              </FrameHeading>
-              {availableThemes.map((option) => (
-                <FrameOption
-                  key={option}
-                  option={option}
-                  selected={hasFilteredThemes && visibleThemes.includes(option)}
-                  visible={visibleThemes}
-                  onChange={(newThemes) => {
-                    if (newThemes) {
-                      dispatch({
-                        type: 'updateVisibleThemes',
-                        payload: { themes: newThemes },
-                      });
-                    } else {
-                      dispatch({ type: 'resetVisibleThemes' });
-                    }
-                  }}
-                />
-              ))}
-            </Stack>
-          ) : null}
-        </Stack>
-      </ToolbarPanel>
-    </>
+        ) : null}
+      </Stack>
+    </ToolbarPanel>
   );
 };

src/Playroom/Playroom.tsx

@@ -1,4 +1,5 @@
 import { useContext, type ComponentType, Fragment } from 'react';
+import { Helmet } from 'react-helmet';
 import classnames from 'classnames';
 import { useDebouncedCallback } from 'use-debounce';
 import { Resizable } from 're-resizable';
@@ -45,6 +46,20 @@ const resolveDirection = (
   return editorHidden ? 'up' : 'down';
 };
 
+const getTitle = (title: string | undefined) => {
+  if (title) {
+    return `${title} | Playroom`;
+  }
+
+  const configTitle = window?.__playroomConfig__.title;
+
+  if (configTitle) {
+    return `${configTitle} | Playroom`;
+  }
+
+  return 'Playroom';
+};
+
 export interface PlayroomProps {
   components: Record<string, ComponentType>;
   themes: string[];
@@ -65,9 +80,11 @@ export default ({ components, themes, widths, snippets }: PlayroomProps) => {
       previewRenderCode,
       previewEditorCode,
       ready,
+      title,
     },
     dispatch,
   ] = useContext(StoreContext);
+  const displayedTitle = getTitle(title);
 
   const updateEditorSize = useDebouncedCallback(
     ({
@@ -154,6 +171,11 @@ export default ({ components, themes, widths, snippets }: PlayroomProps) => {
 
   return (
     <div className={styles.root}>
+      {title === undefined ? null : (
+        <Helmet>
+          <title>{displayedTitle}</title>
+        </Helmet>
+      )}
       <div
         className={styles.previewContainer}
         style={