playroom 0.39.0 → 0.40.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # playroom
 
+## 0.40.0
+
+### Minor Changes
+
+- b8f89d2: Set default colour scheme to 'system'.
+- 16ec1e7: Update `react` and `react-dom` peer dependency ranges to include `^19`
+- 857feab: Remove keybinding for copying Playroom link to clipboard.
+- fab7863: Drop support for browser versions that do not support the `IntersectionObserver` API
+
+  Playroom no longer provides a polyfill for [`IntersectionObserver`].
+
+  [`intersectionobserver`]: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
+
+### Patch Changes
+
+- 4412ef1: Ensure favicon is displayed on Preview links.
+- 6095dc4: Replace `polished` dependency with CSS relative color syntax and `color-mix`
+- 16ec1e7: Remove `react-use` dependency
+- 67006f0: Fix bug in "Wrap selection in tag" command that caused the start cursor to sometimes be in the wrong position when selecting an empty line.
+- fb14616: Restrict `playroom`'s Vanilla Extract plugin to only process playroom's `.css.ts` files
+- 719c957: Remove `lodash` dependency
+
+## 0.39.1
+
+### Patch Changes
+
+- dbf3310: Update `re-resizable` dependency.
+
+  Fix issue where resizable handles were stacked below the editor panel and could not be selected.
+
 ## 0.39.0
 
 ### Minor Changes

package/lib/getStaticTypes.js

@@ -1,7 +1,5 @@
 const findUp = require('find-up');
 const fastGlob = require('fast-glob');
-const keyBy = require('lodash/keyBy');
-const mapValues = require('lodash/mapValues');
 const fs = require('fs');
 const ts = require('typescript');
 const path = require('path');
@@ -16,6 +14,24 @@ const parsePropType = (propType) => {
   return [];
 };
 
+/**
+ * Modified from https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore?tab=readme-ov-file#_keyby.
+ * Only supports arrays and expects a `key` to be provided.
+ */
+const keyBy = (array = [], key) =>
+  array.reduce(
+    (previousValue, currentValue) => ({
+      ...previousValue,
+      [currentValue[key]]: currentValue,
+    }),
+    {}
+  );
+
+const mapValues = (object, callback) =>
+  Object.fromEntries(
+    Object.entries(object).map(([key, value]) => [key, callback(value)])
+  );
+
 module.exports = async (playroomConfig) => {
   const {
     cwd,

package/lib/makeWebpackConfig.js

@@ -30,7 +30,11 @@ module.exports = async (playroomConfig, options) => {
       }
     );
     const { version } = JSON.parse(pkgContents);
-    isLegacyReact = !(version.startsWith('18') || version.startsWith('0.0.0'));
+    isLegacyReact = !(
+      version.startsWith('18') ||
+      version.startsWith('19') ||
+      version.startsWith('0.0.0')
+    );
   } catch (e) {
     throw new Error('Unable to read `react-dom` package json');
   }
@@ -178,9 +182,18 @@ module.exports = async (playroomConfig, options) => {
         chunksSortMode: 'none',
         chunks: ['preview'],
         filename: 'preview/index.html',
+        favicon: path.join(__dirname, '../images/favicon.png'),
         publicPath: '../',
       }),
-      new VanillaExtractPlugin(),
+      new VanillaExtractPlugin({
+        test: (filePath) => {
+          // Only apply VanillaExtract plugin to playroom's source `.css.ts` files
+          return (
+            /\.css\.ts$/i.test(filePath) &&
+            includePaths.some((includePath) => filePath.startsWith(includePath))
+          );
+        },
+      }),
       new MiniCssExtractPlugin({ ignoreOrder: true }),
       ...(options.production ? [] : [new FriendlyErrorsWebpackPlugin()]),
       // If using a version of React earlier than 18, ignore the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "playroom",
-  "version": "0.39.0",
+  "version": "0.40.0",
   "description": "Design with code, powered by your own component library",
   "main": "utils/index.js",
   "types": "utils/index.d.ts",
@@ -42,10 +42,9 @@
     "@soda/friendly-errors-webpack-plugin": "^1.8.1",
     "@types/base64-url": "^2.2.0",
     "@types/codemirror": "^5.60.5",
-    "@types/lodash": "^4.14.191",
     "@types/prettier": "^2.7.1",
-    "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.9",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
     "@vanilla-extract/css": "^1.9.2",
     "@vanilla-extract/css-utils": "^0.1.3",
     "@vanilla-extract/dynamic": "^2.1.2",
@@ -65,22 +64,18 @@
     "fuzzy": "^0.1.3",
     "history": "^5.3.0",
     "html-webpack-plugin": "^5.5.0",
-    "intersection-observer": "^0.12.2",
     "localforage": "^1.10.0",
-    "lodash": "^4.17.21",
     "lz-string": "^1.5.0",
     "memoize-one": "^6.0.0",
     "mini-css-extract-plugin": "^2.7.2",
     "parse-prop-types": "^0.3.0",
-    "polished": "^4.2.2",
     "portfinder": "^1.0.32",
     "prettier": "^2.8.1",
     "prop-types": "^15.8.1",
-    "re-resizable": "^6.9.9",
+    "re-resizable": "^6.11.2",
     "react-docgen-typescript": "^2.2.2",
     "react-helmet": "^6.1.0",
     "react-transition-group": "^4.4.5",
-    "react-use": "^17.4.0",
     "read-pkg-up": "^7.0.1",
     "scope-eval": "^1.0.0",
     "sucrase": "^3.34.0",
@@ -94,8 +89,9 @@
     "@actions/core": "^1.10.0",
     "@changesets/cli": "^2.25.2",
     "@octokit/rest": "^19.0.5",
-    "@testing-library/cypress": "^10.0.1",
+    "@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",
     "concurrently": "^7.6.0",
@@ -105,15 +101,15 @@
     "husky": "^8.0.2",
     "jest": "^29.3.1",
     "lint-staged": "^15.2.2",
-    "react": "^18.0.1",
-    "react-dom": "^18.0.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "serve": "^14.1.2",
     "start-server-and-test": "^1.15.2",
     "surge": "^0.23.1"
   },
   "peerDependencies": {
-    "react": "^17 || ^18",
-    "react-dom": "^17 || ^18"
+    "react": "^17 || ^18 || ^19",
+    "react-dom": "^17 || ^18 || ^19"
   },
   "engines": {
     "node": ">=18.12.0"
@@ -148,7 +144,7 @@
     "format": "prettier --write '**/*.{js,md,ts,tsx}'",
     "version": "changeset version",
     "release": "changeset publish",
-    "test": "jest src",
+    "test": "jest src lib",
     "post-commit-status": "node scripts/postCommitStatus.js",
     "deploy-preview": "surge -p ./cypress/projects/themed/dist"
   }

package/src/Playroom/CodeEditor/CodeEditor.tsx

@@ -298,15 +298,6 @@ export const CodeEditor = ({
           ['Shift-Ctrl-R']: false, // override default keybinding
           ['Cmd-Option-F']: false, // override default keybinding
           ['Shift-Cmd-Option-F']: false, // override default keybinding
-          [`Shift-${keymapModifierKey}-C`]: () => {
-            dispatch({
-              type: 'copyToClipboard',
-              payload: {
-                url: window.location.href,
-                trigger: 'toolbarItem',
-              },
-            });
-          },
         },
       }}
     />

package/src/Playroom/CodeEditor/CodeMirror2.tsx

@@ -743,6 +743,13 @@ export class UnControlled extends React.Component<
       ? `react-codemirror2 ${this.props.className}`
       : 'react-codemirror2';
 
-    return <div className={className} ref={(self) => (this.ref = self!)} />;
+    return (
+      <div
+        className={className}
+        ref={(self) => {
+          this.ref = self!;
+        }}
+      />
+    );
   }
 }

package/src/Playroom/CodeEditor/keymaps/comment.ts

@@ -1,4 +1,3 @@
-import type CodeMirror from 'codemirror';
 import { type Editor, Pos } from 'codemirror';
 import type { Selection } from './types';
 

package/src/Playroom/CodeEditor/keymaps/wrap.ts

@@ -1,4 +1,3 @@
-import type CodeMirror from 'codemirror';
 import { type Editor, Pos } from 'codemirror';
 import type { Selection } from './types';
 
@@ -19,6 +18,8 @@ export const wrapInTag = (cm: Editor) => {
     const from = range.from();
     let to = range.to();
 
+    const isMultiLineSelection = to.line !== from.line;
+
     if (to.line !== from.line && to.ch === 0) {
       to = new Pos(to.line - 1);
     }
@@ -27,8 +28,6 @@ export const wrapInTag = (cm: Editor) => {
     const existingIndent =
       existingContent.length - existingContent.trimStart().length;
 
-    const isMultiLineSelection = to.line !== from.line;
-
     tagRanges.push({
       from,
       to,

package/src/Playroom/Frame.tsx

@@ -1,4 +1,3 @@
-import type React from 'react';
 import type { ReactNode } from 'react';
 import { useParams } from '../utils/params';
 import CatchErrors from './CatchErrors/CatchErrors';

package/src/Playroom/Frames/Frames.tsx

@@ -1,5 +1,4 @@
 import { useRef } from 'react';
-import flatMap from 'lodash/flatMap';
 import Iframe from './Iframe';
 import { compileJsx } from '../../utils/compileJsx';
 import type { PlayroomProps } from '../Playroom';
@@ -21,7 +20,7 @@ export default function Frames({ code, themes, widths }: FramesProps) {
   const scrollingPanelRef = useRef<HTMLDivElement | null>(null);
   const renderCode = useRef<string>('');
 
-  const frames = flatMap(widths, (width) =>
+  const frames = widths.flatMap((width) =>
     themes.map((theme) => ({
       theme,
       width,

package/src/Playroom/Frames/Iframe.tsx

@@ -4,8 +4,8 @@ import {
   useRef,
   type AllHTMLAttributes,
   type MutableRefObject,
+  type RefObject,
 } from 'react';
-import { useIntersection } from 'react-use';
 
 import playroomConfig from '../../config';
 
@@ -70,3 +70,34 @@ export default function Iframe({
     />
   );
 }
+
+// copied directly from `react-use`
+// https://github.com/streamich/react-use/blob/d2028ae44c79628475f0ef1736c4a48ca310247a/src/useIntersection.ts#L3-L28
+function useIntersection(
+  ref: RefObject<HTMLElement | null>,
+  options: IntersectionObserverInit
+): IntersectionObserverEntry | null {
+  const [intersectionObserverEntry, setIntersectionObserverEntry] =
+    useState<IntersectionObserverEntry | null>(null);
+
+  useEffect(() => {
+    if (ref.current && typeof IntersectionObserver === 'function') {
+      const handler = (entries: IntersectionObserverEntry[]) => {
+        setIntersectionObserverEntry(entries[0]);
+      };
+
+      const observer = new IntersectionObserver(handler, options);
+      observer.observe(ref.current);
+
+      return () => {
+        setIntersectionObserverEntry(null);
+        observer.disconnect();
+      };
+    }
+    return () => {};
+    // disabled in the original implementation
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ref.current, options.threshold, options.root, options.rootMargin]);
+
+  return intersectionObserverEntry;
+}

package/src/Playroom/Playroom.tsx

@@ -22,6 +22,8 @@ import { Box } from './Box/Box';
 
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 
+const staticTypes = __PLAYROOM_GLOBAL__STATIC_TYPES__;
+
 const resizableConfig = (position: EditorPosition = 'bottom') => ({
   top: position === 'bottom',
   right: false,
@@ -59,7 +61,7 @@ const getTitle = (title: string | undefined) => {
 };
 
 export interface PlayroomProps {
-  components: Record<string, ComponentType>;
+  components: Record<string, ComponentType<any>>;
   themes: string[];
   widths: number[];
   snippets: Snippets;
@@ -122,7 +124,7 @@ export default ({ components, themes, widths, snippets }: PlayroomProps) => {
             dispatch({ type: 'updateCode', payload: { code: newCode } })
           }
           previewCode={previewEditorCode}
-          hints={componentsToHints(components)}
+          hints={componentsToHints(components, staticTypes)}
         />
         <StatusMessage />
       </div>
@@ -163,6 +165,16 @@ export default ({ components, themes, widths, snippets }: PlayroomProps) => {
           updateEditorSize({ isVerticalEditor, offsetWidth, offsetHeight });
         }}
         enable={resizableConfig(editorPosition)}
+        /*
+         * Ensures resizable handles are stacked above the `codeEditor` component.
+         * By default, handles are stacked below the editor as introduced in:
+         * https://github.com/bokuweb/re-resizable/pull/827
+         */
+        handleStyles={
+          editorPosition === 'bottom'
+            ? { top: { zIndex: 1 } }
+            : { left: { zIndex: 1 } }
+        }
       >
         {codeEditor}
       </Resizable>

package/src/Playroom/SettingsPanel/SettingsPanel.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, type ReactChild } from 'react';
+import React, { useContext, type ReactElement } from 'react';
 import { Heading } from '../Heading/Heading';
 import { ToolbarPanel } from '../ToolbarPanel/ToolbarPanel';
 import {
@@ -32,7 +32,6 @@ const getKeyBindings = () => {
     'Wrap selection in tag': [metaKeySymbol, shiftKeySymbol, ','],
     'Format code': [metaKeySymbol, 'S'],
     'Insert snippet': [metaKeySymbol, 'K'],
-    'Copy Playroom link': [metaKeySymbol, shiftKeySymbol, 'C'],
     'Select next occurrence': [metaKeySymbol, 'D'],
     'Jump to line number': [metaKeySymbol, 'G'],
     'Swap line up': [altKeySymbol, '↑'],
@@ -44,13 +43,13 @@ const getKeyBindings = () => {
   };
 };
 
-const positionIcon: Record<EditorPosition, ReactChild> = {
+const positionIcon: Record<EditorPosition, ReactElement> = {
   undocked: <EditorUndockedIcon />,
   right: <EditorRightIcon />,
   bottom: <EditorBottomIcon />,
 };
 
-const colorModeIcon: Record<ColorScheme, ReactChild> = {
+const colorModeIcon: Record<ColorScheme, ReactElement> = {
   light: <ColorModeLightIcon />,
   dark: <ColorModeDarkIcon />,
   system: <ColorModeSystemIcon />,

package/src/Playroom/StatusMessage/StatusMessage.tsx

@@ -14,8 +14,12 @@ interface Props {
 }
 export const StatusMessage = ({ dismissable = false }: Props) => {
   const [{ statusMessage }, dispatch] = useContext(StoreContext);
-  const cleanupTimerRef = useRef<ReturnType<typeof setTimeout>>();
-  const showStatusTimerRef = useRef<ReturnType<typeof setTimeout>>();
+  const cleanupTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(
+    undefined
+  );
+  const showStatusTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(
+    undefined
+  );
 
   const [show, setShow] = useState(false);
   const [internalMessage, setInternalMessage] = useState(statusMessage);

package/src/Playroom/Toolbar/Toolbar.tsx

@@ -1,5 +1,4 @@
-import { useContext, useState, useCallback, useEffect } from 'react';
-import { useTimeoutFn } from 'react-use';
+import { useContext, useState, useCallback, useEffect, useRef } from 'react';
 import classnames from 'classnames';
 import type { PlayroomProps } from '../Playroom';
 import { StoreContext } from '../../StoreContext/StoreContext';
@@ -74,6 +73,8 @@ export default ({ themes: allThemes, widths: allWidths, snippets }: Props) => {
     visibleThemes.length > 0 || visibleWidths.length > 0;
   const isOpen = Boolean(activeToolbarPanel);
 
+  const panelRef = useRef<HTMLDivElement>(null);
+
   return (
     <div
       className={classnames(styles.root, {
@@ -135,7 +136,7 @@ export default ({ themes: allThemes, widths: allWidths, snippets }: Props) => {
 
           <div>
             <ToolbarItem
-              title={`Copy Playroom link (${isMac() ? '⌘⇧C' : 'Ctrl+Shift+C'})`}
+              title="Copy Playroom link"
               success={copying}
               onClick={copyHandler}
             >
@@ -157,13 +158,14 @@ export default ({ themes: allThemes, widths: allWidths, snippets }: Props) => {
         </div>
         <CSSTransition
           in={isOpen}
+          nodeRef={panelRef}
           timeout={ANIMATION_TIMEOUT}
           classNames={styles.transitionStyles}
           mountOnEnter
           unmountOnExit
           onExited={() => setLastActivePanel(undefined)}
         >
-          <div className={styles.panel} id="custom-id">
+          <div className={styles.panel} id="custom-id" ref={panelRef}>
             {lastActivePanel === 'snippets' && (
               <Snippets
                 isOpen={isOpen}
@@ -205,3 +207,53 @@ export default ({ themes: allThemes, widths: allWidths, snippets }: Props) => {
     </div>
   );
 };
+
+// copied directly from `react-use`
+// https://github.com/streamich/react-use/blob/db07ab65bfa48a399e7fd83f172653eb342882b1/src/useTimeoutFn.ts#L3-L40
+type UseTimeoutFnReturn = [() => boolean | null, () => void, () => void];
+
+function useTimeoutFn<T extends () => void>(
+  fn: T,
+  ms: number = 0
+): UseTimeoutFnReturn {
+  const ready = useRef<boolean | null>(false);
+  const timeout = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  const callback = useRef(fn);
+
+  const isReady = useCallback(() => ready.current, []);
+
+  const set = useCallback(() => {
+    ready.current = false;
+    if (timeout.current) {
+      clearTimeout(timeout.current);
+    }
+
+    timeout.current = setTimeout(() => {
+      ready.current = true;
+      callback.current();
+    }, ms);
+  }, [ms]);
+
+  const clear = useCallback(() => {
+    ready.current = null;
+    if (timeout.current) {
+      clearTimeout(timeout.current);
+    }
+  }, []);
+
+  // update ref when function changes
+  useEffect(() => {
+    callback.current = fn;
+  }, [fn]);
+
+  // set on mount, clear on unmount
+  useEffect(() => {
+    set();
+
+    return clear;
+    // disabled in the original implementation
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ms]);
+
+  return [isReady, clear, set];
+}

package/src/Playroom/ToolbarItem/ToolbarItem.tsx

@@ -1,11 +1,11 @@
-import type { ReactChild } from 'react';
+import type { ReactElement } from 'react';
 import classnames from 'classnames';
 import TickIcon from '../icons/TickIcon';
 
 import * as styles from './ToolbarItem.css';
 
 interface Props {
-  children: ReactChild;
+  children: ReactElement;
   title: string;
   active?: boolean;
   success?: boolean;

package/src/Playroom/palettes.ts

@@ -1,5 +1,3 @@
-import { transparentize, mix, darken } from 'polished';
-
 const originalPalette = {
   blue0: '#e5f3ff',
   blue1: '#0088ff',
@@ -22,6 +20,44 @@ const originalPalette = {
   black: '#000',
 };
 
+const guard = (amount: number) => {
+  if (amount > 1 || amount < 0) {
+    throw new Error('Amount must be between 0 and 1 inclusive');
+  }
+
+  return amount;
+};
+
+/**
+ * Subtracts `amount` from the alpha channel of `color`.
+ * Amount must be between 0 and 1 inclusive.
+ *
+ * Similar to `transparentize` from polished but uses CSS
+ * @see https://polished.js.org/docs/#transparentize
+ */
+const transparentize = (amount: number, color: string) =>
+  `rgb(from ${color} r g b / calc(alpha - ${guard(amount)}))`;
+
+/**
+ * Subtracts `amount` from the lightness of `color`.
+ * Amount must be between 0 and 1 inclusive.
+ *
+ * Similar to `darken` from polished but uses CSS
+ * @see https://polished.js.org/docs/#darken
+ */
+const darken = (amount: number, color: string) =>
+  `hsl(from ${color} h s calc(l - ${guard(amount) * 100}))`;
+
+/**
+ * Mixes `amount` of `color1` into `color2`.
+ * Amount must be between 0 and 1 inclusive.
+ *
+ * Similar to `mix` from polished but uses CSS
+ * @see https://polished.js.org/docs/#mix
+ */
+const mix = (amount: number, color1: string, color2: string) =>
+  `color-mix(in srgb, ${color1} ${guard(amount) * 100}%, ${color2})`;
+
 export const light = {
   code: {
     text: originalPalette.black,
@@ -42,7 +78,7 @@ export const light = {
     positive: originalPalette.green2,
   },
   background: {
-    transparent: 'rgba(0, 0, 0, .05)',
+    transparent: 'rgb(0, 0, 0, .05)',
     accent: originalPalette.blue2,
     positive: originalPalette.green1,
     critical: originalPalette.red1,
@@ -56,7 +92,7 @@ export const light = {
     standard: originalPalette.gray2,
   },
   shadows: {
-    small: '0 2px 8px rgba(18, 21, 26, 0.3)',
+    small: '0 2px 8px rgb(18, 21, 26, 0.3)',
     focus: `0 0 0 5px ${originalPalette.blue0}`,
   },
 };
@@ -144,7 +180,7 @@ export const dark = {
     positive: seekPalette.mint[500],
   },
   background: {
-    transparent: 'rgba(255, 255, 255, .07)',
+    transparent: 'rgb(255, 255, 255, .07)',
     accent: seekPalette.blue[500],
     positive: mix(0.6, seekPalette.grey[900], seekPalette.mint[500]),
     critical: mix(0.7, seekPalette.grey[900], seekPalette.red[600]),

package/src/StoreContext/StoreContext.tsx

@@ -438,7 +438,7 @@ const initialState: State = {
   editorHeight: defaultEditorSize,
   editorWidth: defaultEditorSize,
   ready: false,
-  colorScheme: 'light',
+  colorScheme: 'system',
 };
 
 export const StoreContext = createContext<StoreContextValues>([

package/src/index.d.ts

@@ -32,4 +32,7 @@ interface Window {
 }
 
 declare const __PLAYROOM_GLOBAL__CONFIG__: InternalPlayroomConfig;
-declare const __PLAYROOM_GLOBAL__STATIC_TYPES__: any;
+declare const __PLAYROOM_GLOBAL__STATIC_TYPES__: Record<
+  string,
+  Record<string, string[]>
+>;

package/src/index.js

@@ -5,67 +5,58 @@ import playroomConfig from './config';
 import faviconPath from '../images/favicon.png';
 import faviconInvertedPath from '../images/favicon-inverted.png';
 
-const polyfillIntersectionObserver = () =>
-  typeof window.IntersectionObserver !== 'undefined'
-    ? Promise.resolve()
-    : import('intersection-observer');
-
-polyfillIntersectionObserver().then(() => {
-  const widths = playroomConfig.widths || [320, 375, 768, 1024];
-
-  const outlet = document.createElement('div');
-  document.body.appendChild(outlet);
-
-  const selectedElement = document.head.querySelector('link[rel="icon"]');
-  const favicon = window.matchMedia('(prefers-color-scheme: dark)').matches
-    ? faviconInvertedPath
-    : faviconPath;
-
-  if (selectedElement) {
-    selectedElement.setAttribute('href', favicon);
-  }
-
-  const renderPlayroom = ({
-    themes = require('./themes'),
-    components = require('./components'),
-    snippets = require('./snippets'),
-  } = {}) => {
-    const themeNames = Object.keys(themes);
-
-    // Exclude undefined components, e.g. an exported TypeScript type.
-    const filteredComponents = Object.fromEntries(
-      Object.entries(components).filter(([_, value]) => value)
-    );
-
-    renderElement(
-      <StoreProvider themes={themeNames} widths={widths}>
-        <Playroom
-          components={filteredComponents}
-          widths={widths}
-          themes={themeNames}
-          snippets={
-            typeof snippets.default !== 'undefined'
-              ? snippets.default
-              : snippets
-          }
-        />
-      </StoreProvider>,
-      outlet
-    );
-  };
-  renderPlayroom();
-
-  if (module.hot) {
-    module.hot.accept('./components', () => {
-      renderPlayroom({ components: require('./components') });
-    });
-
-    module.hot.accept('./themes', () => {
-      renderPlayroom({ themes: require('./themes') });
-    });
-
-    module.hot.accept('./snippets', () => {
-      renderPlayroom({ snippets: require('./snippets') });
-    });
-  }
-});
+const widths = playroomConfig.widths || [320, 375, 768, 1024];
+
+const outlet = document.createElement('div');
+document.body.appendChild(outlet);
+
+const selectedElement = document.head.querySelector('link[rel="icon"]');
+const favicon = window.matchMedia('(prefers-color-scheme: dark)').matches
+  ? faviconInvertedPath
+  : faviconPath;
+
+if (selectedElement) {
+  selectedElement.setAttribute('href', favicon);
+}
+
+const renderPlayroom = ({
+  themes = require('./themes'),
+  components = require('./components'),
+  snippets = require('./snippets'),
+} = {}) => {
+  const themeNames = Object.keys(themes);
+
+  // Exclude undefined components, e.g. an exported TypeScript type.
+  const filteredComponents = Object.fromEntries(
+    Object.entries(components).filter(([_, value]) => value)
+  );
+
+  renderElement(
+    <StoreProvider themes={themeNames} widths={widths}>
+      <Playroom
+        components={filteredComponents}
+        widths={widths}
+        themes={themeNames}
+        snippets={
+          typeof snippets.default !== 'undefined' ? snippets.default : snippets
+        }
+      />
+    </StoreProvider>,
+    outlet
+  );
+};
+renderPlayroom();
+
+if (module.hot) {
+  module.hot.accept('./components', () => {
+    renderPlayroom({ components: require('./components') });
+  });
+
+  module.hot.accept('./themes', () => {
+    renderPlayroom({ themes: require('./themes') });
+  });
+
+  module.hot.accept('./snippets', () => {
+    renderPlayroom({ snippets: require('./snippets') });
+  });
+}

package/src/preview.js

@@ -1,9 +1,22 @@
 import { renderElement } from './render';
 import Preview from './Playroom/Preview';
+import faviconPath from '../images/favicon.png';
+import faviconInvertedPath from '../images/favicon-inverted.png';
 
 const outlet = document.createElement('div');
 document.body.appendChild(outlet);
 
+const selectedElement = document.head.querySelector('link[rel="icon"]');
+const favicon = window.matchMedia('(prefers-color-scheme: dark)').matches
+  ? faviconInvertedPath
+  : faviconPath;
+
+const formattedFavicon = `../${favicon}`;
+
+if (selectedElement) {
+  selectedElement.setAttribute('href', formattedFavicon);
+}
+
 const renderPreview = ({
   themes = require('./themes'),
   components = require('./components'),

package/src/render.js

@@ -1,11 +1,13 @@
 import ReactDOM, { version as reactDomVersion } from 'react-dom';
 
 // Uses the correct render API based on the available version of
-// `react-dom`. This hack can be removed when support for older
-// versions of React is removed.
+// `react-dom`.
+// Todo - remove check when support for React 17 is removed
 const canUseNewReactRootApi =
   reactDomVersion &&
-  (reactDomVersion.startsWith('18') || reactDomVersion.startsWith('0.0.0'));
+  (reactDomVersion.startsWith('18') ||
+    reactDomVersion.startsWith('19') ||
+    reactDomVersion.startsWith('0.0.0'));
 
 export const renderElement = (node, outlet) => {
   if (canUseNewReactRootApi) {
@@ -14,6 +16,7 @@ export const renderElement = (node, outlet) => {
     const root = createRoot(outlet);
     root.render(node);
   } else {
+    // eslint-disable-next-line react/no-deprecated
     ReactDOM.render(node, outlet);
   }
 };

package/src/utils/componentsToHints.ts

@@ -1,11 +1,11 @@
-import omit from 'lodash/omit';
 // @ts-expect-error
 import parsePropTypes from 'parse-prop-types';
 import type { PlayroomProps } from '../Playroom/Playroom';
 
-const staticTypes = __PLAYROOM_GLOBAL__STATIC_TYPES__;
-
-export default (components: PlayroomProps['components']) => {
+export default (
+  components: PlayroomProps['components'],
+  staticTypes: typeof __PLAYROOM_GLOBAL__STATIC_TYPES__ = {}
+) => {
   const componentNames = Object.keys(components).sort();
 
   return Object.assign(
@@ -23,8 +23,9 @@ export default (components: PlayroomProps['components']) => {
         };
       }
 
-      const parsedPropTypes = parsePropTypes(components[componentName]);
-      const filteredPropTypes = omit(parsedPropTypes, 'children');
+      const { children, ...filteredPropTypes } = parsePropTypes(
+        components[componentName]
+      );
       const propNames = Object.keys(filteredPropTypes);
 
       return {

package/src/utils/compileJsx.test.ts

@@ -1,66 +0,0 @@
-import dedent from 'dedent';
-import { type ErrorWithLocation, compileJsx, validateCode } from './compileJsx';
-
-describe('compileJsx', () => {
-  test('valid code', () => {
-    expect(
-      compileJsx(dedent`
-        <Foo />
-        <Bar />
-      `)
-    ).toMatchInlineSnapshot(`
-      "R_cE(R_F, null, R_cE(Foo, null )
-      , R_cE(Bar, null ))"
-    `);
-  });
-
-  test('invalid code - no error', () => {
-    expect(
-      compileJsx(`
-        <Foo--BarBaz ::invalid />
-      `)
-    ).toMatchInlineSnapshot(
-      `"R_cE(R_F, null, R_cE(Foo--BarBaz ::invalid, null ))"`
-    );
-  });
-
-  test('invalid code - with error', () => {
-    expect(() =>
-      compileJsx(`
-        <Foo />
-        <Bar />
-        <Foo--BarBaz>
-      `)
-    ).toThrowErrorMatchingInlineSnapshot(`"Unterminated JSX contents (3:25)"`);
-  });
-});
-
-describe('validateCode', () => {
-  test('valid code', () => {
-    expect(
-      validateCode(`
-        <Foo />
-        <Bar />
-      `)
-    ).toBe(true);
-  });
-
-  test('invalid code', () => {
-    const error = validateCode(`- line 1
-      <Foo />                   - line 2
-      <Bar />                   - line 3
-      <This is not ::valid />   - line 4
-                   ^ column 20
-    `);
-    expect(error).toMatchInlineSnapshot(
-      `[SyntaxError: Unexpected token (4:20)]`
-    );
-    expect((error as ErrorWithLocation).loc).toMatchInlineSnapshot(`
-      Position {
-        "column": 20,
-        "index": 113,
-        "line": 4,
-      }
-    `);
-  });
-});

package/src/utils/cursor.spec.ts

@@ -1,57 +0,0 @@
-import dedent from 'dedent';
-import { isValidLocation } from './cursor';
-
-const code = dedent`
-  <a>
-    <b />
-    <c>
-      <d>...</d>
-      <e />
-      ...
-      <f>
-        <g />
-      </f>
-      <h
-        i="j"
-      />
-    </c>
-  </a>`;
-
-describe('cursor', () => {
-  describe('isValidLocation', () => {
-    describe('with cursor', () => {
-      [
-        {
-          should: 'start of line after before component is valid',
-          input: { code, cursor: { line: 1, ch: 0 } },
-          output: true,
-        },
-        {
-          should: 'end of line after component is valid',
-          input: { code, cursor: { line: 1, ch: 7 } },
-          output: true,
-        },
-        {
-          should: 'middle of line inside component is valid',
-          input: { code, cursor: { line: 3, ch: 7 } },
-          output: true,
-        },
-        {
-          should: 'middle of line inside tag is not valid',
-          input: { code, cursor: { line: 3, ch: 5 } },
-          output: false,
-        },
-        {
-          should: 'start of line inside between attributes is not valid',
-          input: { code, cursor: { line: 10, ch: 0 } },
-          output: false,
-        },
-      ].forEach(({ should, input, output }) => {
-        // eslint-disable-next-line jest/valid-title
-        it(should, () => {
-          expect(isValidLocation(input)).toEqual(output);
-        });
-      });
-    });
-  });
-});

package/src/utils/formatting.spec.ts

@@ -1,135 +0,0 @@
-import {
-  positionToCursorOffset,
-  cursorOffsetToPosition,
-  formatCode,
-  formatAndInsert,
-} from './formatting';
-
-describe('cursor offset to position', () => {
-  it('should work for one line', () => {
-    const code = `<h1>Title</h1>`;
-    const position = 4; // Before the capital T
-
-    expect(cursorOffsetToPosition(code, position)).toEqual({ line: 0, ch: 4 });
-  });
-
-  it('should work across multiple lines', () => {
-    const code = `<div>\n<h1>Title</h1>\n</div>`;
-    const position = 10; // Before the capital T
-
-    expect(cursorOffsetToPosition(code, position)).toEqual({ line: 1, ch: 4 });
-  });
-});
-
-describe('position to cursor offset', () => {
-  it('should work for one line', () => {
-    const code = `<h1>Title</h1>`;
-    const offset = {
-      line: 0,
-      ch: 4,
-    }; // Before the capital T
-
-    expect(positionToCursorOffset(code, offset)).toEqual(4);
-  });
-
-  it('should work across multiple lines', () => {
-    const code = `<div>\n<h1>Title</h1>\n</div>`;
-    const offset = {
-      line: 1,
-      ch: 4,
-    };
-
-    expect(positionToCursorOffset(code, offset)).toEqual(10);
-  });
-});
-
-describe('formatting code', () => {
-  it('should handle one line', () => {
-    const code = `<div><h1>Title</h1></div>`;
-    expect(formatCode({ code, cursor: { line: 0, ch: 9 } })).toEqual({
-      cursor: { line: 1, ch: 6 },
-      code: `<div>\n  <h1>Title</h1>\n</div>\n`,
-    });
-  });
-
-  it('should handle multiple lines', () => {
-    const code = `<div>\n<h1>Title</h1>\n</div>`;
-    expect(formatCode({ code, cursor: { line: 1, ch: 4 } })).toEqual({
-      cursor: { line: 1, ch: 6 },
-      code: `<div>\n  <h1>Title</h1>\n</div>\n`,
-    });
-  });
-
-  it('should handle multiple lines with cursor at start of line', () => {
-    const code = `<div>\n<h1>Title</h1>\n</div>`;
-    expect(formatCode({ code, cursor: { line: 1, ch: 0 } })).toEqual({
-      cursor: { line: 1, ch: 0 },
-      code: `<div>\n  <h1>Title</h1>\n</div>\n`,
-    });
-  });
-
-  it('should handle multiple root level jsx elements', () => {
-    const code = `<div><h1>Title</h1></div><div><h1>Title Two</h1></div>`;
-    expect(formatCode({ code, cursor: { line: 0, ch: 34 } })).toEqual({
-      cursor: { line: 4, ch: 6 },
-      code: `<div>\n  <h1>Title</h1>\n</div>\n<div>\n  <h1>Title Two</h1>\n</div>\n`,
-    });
-  });
-});
-
-describe('format and insert', () => {
-  it('should handle inserting one line into one line', () => {
-    const snippet = '<span>added</span>';
-    const code = `<div><h1>Title</h1></div>`;
-    expect(
-      formatAndInsert({ code, cursor: { line: 0, ch: 9 }, snippet })
-    ).toEqual({
-      cursor: { line: 2, ch: 22 },
-      code: `<div>\n  <h1>\n    <span>added</span>Title\n  </h1>\n</div>\n`,
-    });
-  });
-
-  it('should handle inserting multiple lines into multiple lines', () => {
-    const snippet = '<span>\n  <strong>second</strong>\n</span>';
-    const code = `<div>\n  <h1>\n    <span>added</span>Title\n  </h1>\n</div>\n`;
-    expect(
-      formatAndInsert({ code, cursor: { line: 2, ch: 15 }, snippet })
-    ).toEqual({
-      cursor: { line: 6, ch: 13 },
-      code: `<div>\n  <h1>\n    <span>\n      added\n      <span>\n        <strong>second</strong>\n      </span>\n    </span>\n    Title\n  </h1>\n</div>\n`,
-    });
-  });
-
-  it('should handle inserting at the start', () => {
-    const snippet = '<span>\n  <strong>second</strong>\n</span>';
-    const code = `<div>\n  <h1>\n    <span>added</span>Title\n  </h1>\n</div>\n`;
-    expect(
-      formatAndInsert({ code, cursor: { line: 0, ch: 0 }, snippet })
-    ).toEqual({
-      cursor: { line: 2, ch: 7 },
-      code: `<span>\n  <strong>second</strong>\n</span>\n<div>\n  <h1>\n    <span>added</span>Title\n  </h1>\n</div>\n`,
-    });
-  });
-
-  it('should handle inserting at the end', () => {
-    const snippet = '<span>\n  <strong>second</strong>\n</span>';
-    const code = `<div>\n  <h1>\n    <span>added</span>Title\n  </h1>\n</div>\n`;
-    expect(
-      formatAndInsert({ code, cursor: { line: 5, ch: 0 }, snippet })
-    ).toEqual({
-      cursor: { line: 7, ch: 7 },
-      code: `<div>\n  <h1>\n    <span>added</span>Title\n  </h1>\n</div>\n<span>\n  <strong>second</strong>\n</span>\n`,
-    });
-  });
-
-  it('should handle inserting at the end after multiple new lines', () => {
-    const snippet = '<span>\n  <strong>second</strong>\n</span>\n';
-    const code = `<div>\n  <h1>\n    <span>added</span>Title\n  </h1>\n</div>\n\n\n\n`;
-    expect(
-      formatAndInsert({ code, cursor: { line: 8, ch: 0 }, snippet })
-    ).toEqual({
-      cursor: { line: 9, ch: 0 },
-      code: `<div>\n  <h1>\n    <span>added</span>Title\n  </h1>\n</div>\n\n<span>\n  <strong>second</strong>\n</span>\n`,
-    });
-  });
-});