diff --git a/apps/test-site/package.json b/apps/test-site/package.json index b1a1b1080..33cd5235f 100644 --- a/apps/test-site/package.json +++ b/apps/test-site/package.json @@ -34,7 +34,7 @@ "tailwindcss": "^3.3.4" }, "scripts": { - "dev": "studio", + "dev": "studio -- strict", "localData": "yext pages generate-test-data -a", "start": "craco start", "build-test-site": "craco build" diff --git a/packages/studio-plugin/src/types/CliArgs.ts b/packages/studio-plugin/src/types/CliArgs.ts index 6d2acbec6..8f0878cac 100644 --- a/packages/studio-plugin/src/types/CliArgs.ts +++ b/packages/studio-plugin/src/types/CliArgs.ts @@ -5,6 +5,8 @@ export interface CliArgs { root?: string; // Any arguments present after double dashes when invoking studio, e.g. // `npx studio -- args like these` will result in ['args', 'like', 'these'] - // Not currently used for anything but always provided by the cac package + // This option is always provided by the cac package, and we only use it to + // configure Studio to run in React Strict Mode for internal development by + // using `-- strict`. "--"?: string[]; } diff --git a/packages/studio/bin/studio.ts b/packages/studio/bin/studio.ts index 43de13867..1b4705836 100755 --- a/packages/studio/bin/studio.ts +++ b/packages/studio/bin/studio.ts @@ -16,6 +16,7 @@ cli .option("--port ", "[number] port to run studio") .option("--root ", `[string] path to the root directory`) .action((options: CliArgs) => { + const useStrictMode: boolean = options["--"]?.includes("strict") ?? false; spawnSync( "npx", [ @@ -32,6 +33,7 @@ cli env: { ...process.env, YEXT_STUDIO_ARGS: JSON.stringify(options), + VITE_STUDIO_STRICT: String(useStrictMode), }, shell: true, } diff --git a/packages/studio/src/main.tsx b/packages/studio/src/main.tsx index 189477dc7..32b09d475 100644 --- a/packages/studio/src/main.tsx +++ b/packages/studio/src/main.tsx @@ -18,9 +18,15 @@ if (import.meta.hot) { void hotReloadGitData(hmrPayload); }); } +const WrappedApp = + import.meta.env.VITE_STUDIO_STRICT === "true" ? ( + + + + ) : ( + + ); ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( - - - + WrappedApp );