that tree shaking sure is aggressive

packages/lexical-playground/src/Settings.tsx

@@ -6,10 +6,10 @@
  *
  */
 
-import * as React from 'react';
-import {useMemo, useState} from 'react';
+import {CAN_USE_BEFORE_INPUT} from '@lexical/utils';
+import {useEffect, useMemo, useState} from 'react';
 
-import {isDevPlayground} from './appSettings';
+import {INITIAL_SETTINGS, isDevPlayground} from './appSettings';
 import {useSettings} from './context/SettingsContext';
 import Switch from './ui/Switch';
 
@@ -32,6 +32,13 @@ export default function Settings(): JSX.Element {
       shouldUseLexicalContextMenu,
     },
   } = useSettings();
+  useEffect(() => {
+    if (INITIAL_SETTINGS.disableBeforeInput && CAN_USE_BEFORE_INPUT) {
+      console.error(
+        `Legacy events are enabled (disableBeforeInput) but CAN_USE_BEFORE_INPUT is true`,
+      );
+    }
+  }, []);
   const [showSettings, setShowSettings] = useState(false);
   const [isSplitScreen, search] = useMemo(() => {
     const parentWindow = window.parent;

packages/lexical-playground/src/appSettings.ts

@@ -27,8 +27,13 @@ export const DEFAULT_SETTINGS = {
   showTreeView: true,
   tableCellBackgroundColor: true,
   tableCellMerge: true,
+} as const;
+
+// These are mutated in setupEnv
+export const INITIAL_SETTINGS: Record<SettingName, boolean> = {
+  ...DEFAULT_SETTINGS,
 };
 
 export type SettingName = keyof typeof DEFAULT_SETTINGS;
 
-export type Settings = typeof DEFAULT_SETTINGS;
+export type Settings = typeof INITIAL_SETTINGS;

packages/lexical-playground/src/context/SettingsContext.tsx

@@ -18,7 +18,7 @@ import {
   useState,
 } from 'react';
 
-import {DEFAULT_SETTINGS} from '../appSettings';
+import {DEFAULT_SETTINGS, INITIAL_SETTINGS} from '../appSettings';
 
 type SettingsContextShape = {
   setOption: (name: SettingName, value: boolean) => void;
@@ -29,26 +29,22 @@ const Context: React.Context<SettingsContextShape> = createContext({
   setOption: (name: SettingName, value: boolean) => {
     return;
   },
-  settings: DEFAULT_SETTINGS,
+  settings: INITIAL_SETTINGS,
 });
 
 export const SettingsContext = ({
   children,
 }: {
   children: ReactNode;
 }): JSX.Element => {
-  const [settings, setSettings] = useState(DEFAULT_SETTINGS);
+  const [settings, setSettings] = useState(INITIAL_SETTINGS);
 
   const setOption = useCallback((setting: SettingName, value: boolean) => {
     setSettings((options) => ({
       ...options,
-      [setting as string]: value,
+      [setting]: value,
     }));
-    if (DEFAULT_SETTINGS[setting] === value) {
-      setURLParam(setting, null);
-    } else {
-      setURLParam(setting, value);
-    }
+    setURLParam(setting, value);
   }, []);
 
   const contextValue = useMemo(() => {
@@ -65,16 +61,10 @@ export const useSettings = (): SettingsContextShape => {
 function setURLParam(param: SettingName, value: null | boolean) {
   const url = new URL(window.location.href);
   const params = new URLSearchParams(url.search);
-  if (value !== null) {
-    if (params.has(param)) {
-      params.set(param, String(value));
-    } else {
-      params.append(param, String(value));
-    }
+  if (value !== DEFAULT_SETTINGS[param]) {
+    params.set(param, String(value));
   } else {
-    if (params.has(param)) {
-      params.delete(param);
-    }
+    params.delete(param);
   }
   url.search = params.toString();
   window.history.pushState(null, '', url.toString());

packages/lexical-playground/src/index.tsx

@@ -6,15 +6,21 @@
  *
  */
 
+// setupEnv must load before App because lexical computes CAN_USE_BEFORE_INPUT
+// at import time (disableBeforeInput is used to test legacy events)
+// eslint-disable-next-line simple-import-sort/imports
+import setupEnv from './setupEnv';
 import './index.css';
 
 import * as React from 'react';
 import {createRoot} from 'react-dom/client';
 
 import App from './App';
-import setupEnv from './setupEnv';
 
-setupEnv();
+if (setupEnv.disableBeforeInput) {
+  // vite is really aggressive about tree-shaking, this
+  // ensures that the side-effects of importing setupEnv happens
+}
 
 // Handle runtime errors
 const showErrorOverlay = (err: Event) => {

packages/lexical-playground/src/setupEnv.ts

@@ -6,25 +6,29 @@
  *
  */
 
-import {DEFAULT_SETTINGS, Settings} from './appSettings';
+import {INITIAL_SETTINGS, Settings} from './appSettings';
 
-export default function setupEnv() {
+// Export a function so this is not tree-shaken,
+// but evaluate it immediately so it executes before
+// lexical computes CAN_USE_BEFORE_INPUT
+export default (() => {
   // override default options with query parameters if any
   const urlSearchParams = new URLSearchParams(window.location.search);
 
-  for (const param of Object.keys(DEFAULT_SETTINGS)) {
+  for (const param of Object.keys(INITIAL_SETTINGS)) {
     if (urlSearchParams.has(param)) {
       try {
         const value = JSON.parse(urlSearchParams.get(param) ?? 'true');
-        DEFAULT_SETTINGS[param as keyof Settings] = Boolean(value);
+        INITIAL_SETTINGS[param as keyof Settings] = Boolean(value);
       } catch (error) {
         console.warn(`Unable to parse query parameter "${param}"`);
       }
     }
   }
 
-  if (DEFAULT_SETTINGS.disableBeforeInput) {
+  if (INITIAL_SETTINGS.disableBeforeInput) {
     // @ts-expect-error
     delete window.InputEvent.prototype.getTargetRanges;
   }
-}
+  return INITIAL_SETTINGS;
+})();