playroom 0.44.2 → 0.44.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # playroom
 
+## 0.44.3
+
+### Patch Changes
+
+- [#446](https://github.com/seek-oss/playroom/pull/446) [`aa4ac22`](https://github.com/seek-oss/playroom/commit/aa4ac229ec731b0051b2419982f80e7eaf37c874) Thanks [@felixhabib](https://github.com/felixhabib)! - Update method to manage tab titles
+
+  Remove `react-helmet` dependency.
+
 ## 0.44.2
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "playroom",
-  "version": "0.44.2",
+  "version": "0.44.3",
   "description": "Design with code, powered by your own component library",
   "bin": {
     "playroom": "bin/cli.cjs"
@@ -81,7 +81,6 @@
     "prop-types": "^15.8.1",
     "react-docgen-typescript": "^2.2.2",
     "react-error-boundary": "^4.0.13",
-    "react-helmet": "^6.1.0",
     "react-transition-group": "^4.4.5",
     "read-pkg-up": "^7.0.1",
     "scope-eval": "^1.0.0",
@@ -101,7 +100,6 @@
     "@testing-library/cypress": "^10.0.3",
     "@types/jest": "^29.2.4",
     "@types/node": "^18.11.9",
-    "@types/react-helmet": "^6.1.6",
     "@types/react-transition-group": "^4.4.10",
     "@types/webpack-env": "^1.18.8",
     "concurrently": "^9.1.2",

package/src/components/Playroom/Playroom.tsx

@@ -6,9 +6,9 @@ import {
   useRef,
   useState,
 } from 'react';
-import { Helmet } from 'react-helmet';
 
 import { StoreContext, type EditorPosition } from '../../contexts/StoreContext';
+import { useDocumentTitle } from '../../utils/useDocumentTitle';
 import { Box } from '../Box/Box';
 import { CodeEditor } from '../CodeEditor/CodeEditor';
 import Frames from '../Frames/Frames';
@@ -32,20 +32,6 @@ 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';
-};
-
 const resizeHandlePosition: Record<
   EditorPosition,
   ComponentProps<typeof ResizeHandle>['position']
@@ -69,6 +55,9 @@ export default () => {
     },
     dispatch,
   ] = useContext(StoreContext);
+
+  useDocumentTitle({ title });
+
   const editorRef = useRef<HTMLElement | null>(null);
   const transitionTimeoutRef = useRef<ReturnType<typeof setTimeout>>(null);
   const [resizing, setResizing] = useState(false);
@@ -104,12 +93,6 @@ export default () => {
         [styles.editorSize]: editorHidden ? undefined : editorSize,
       })}
     >
-      {title === undefined ? null : (
-        <Helmet>
-          <title>{getTitle(title)}</title>
-        </Helmet>
-      )}
-
       <Box position="relative" className={styles.frames}>
         <Box className={styles.framesContainer}>
           <Frames code={previewRenderCode || code} />

package/src/components/Preview/Preview.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState, type ReactNode } from 'react';
-import { Helmet } from 'react-helmet';
 
+import { useDocumentTitle } from '../../utils/useDocumentTitle';
 import { Box } from '../Box/Box';
 
 import SplashScreen from './SplashScreen/SplashScreen';
@@ -17,6 +17,8 @@ interface PreviewProps {
 export default ({ title, children }: PreviewProps) => {
   const [loading, setLoading] = useState(true);
 
+  useDocumentTitle({ title, suffix: 'Playroom Preview' });
+
   useEffect(() => {
     const hideSplash = setTimeout(
       () => setLoading(false),
@@ -28,11 +30,6 @@ export default ({ title, children }: PreviewProps) => {
 
   return (
     <>
-      <Helmet>
-        <title>
-          {title ? `${title} | Playroom Preview` : 'Playroom Preview'}
-        </title>
-      </Helmet>
       <Box position="relative" zIndex={0} aria-hidden={loading || undefined}>
         {children}
       </Box>

package/src/utils/useDocumentTitle.ts

@@ -0,0 +1,27 @@
+import { useEffect } from 'react';
+
+import playroomConfig from '../config';
+
+interface UseDocumentTitleProps {
+  title?: string;
+  suffix?: string;
+}
+
+export function useDocumentTitle({ title, suffix }: UseDocumentTitleProps) {
+  useEffect(() => {
+    document.title = getTitle({ title, suffix });
+  }, [title, suffix]);
+}
+
+function getTitle({
+  title,
+  suffix = 'Playroom',
+}: UseDocumentTitleProps): string {
+  const resolvedTitle = title || playroomConfig?.title;
+
+  if (resolvedTitle) {
+    return `${resolvedTitle} | ${suffix}`;
+  }
+
+  return suffix;
+}