strict mode

yext · Oct 30, 2023 · bbc69c3 · bbc69c3
1 parent fc31076
commit bbc69c3
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 5 deletions.
diff --git 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
@@ -3,6 +3,8 @@ export interface CliArgs {
   port?: string;
   // The project root for studio.
   root?: string;
+  // Whether or not to run Studio in React Strict Mode
+  strict?: boolean;
   // 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

diff --git a/packages/studio/bin/studio.ts b/packages/studio/bin/studio.ts
@@ -15,7 +15,14 @@ cli
   .command("", "start dev server")
   .option("--port <port>", "[number] port to run studio")
   .option("--root <directory>", `[string] path to the root directory`)
+  .option("--strict", "Runs Studio in React Strict Mode")
   .action((options: CliArgs) => {
+    const YEXT_STUDIO_ARGS = JSON.stringify({
+      "--": options["--"],
+      port: options.port,
+      root: options.root
+    })
+
     spawnSync(
       "npx",
       [
@@ -31,7 +38,8 @@ cli
         stdio: ["ignore", "inherit", "inherit"],
         env: {
           ...process.env,
-          YEXT_STUDIO_ARGS: JSON.stringify(options),
+          YEXT_STUDIO_ARGS,
+          VITE_STUDIO_STRICT: String(options.strict)
         },
         shell: true,
       }

diff --git a/packages/studio/src/main.tsx b/packages/studio/src/main.tsx
@@ -18,9 +18,12 @@ if (import.meta.hot) {
     void hotReloadGitData(hmrPayload);
   });
 }
+const WrappedApp = import.meta.env.VITE_STUDIO_STRICT === "true"
+  ? <React.StrictMode>
+      <AppWithLazyLoading />
+    </React.StrictMode>
+  : <AppWithLazyLoading />
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
-  <React.StrictMode>
-    <AppWithLazyLoading />
-  </React.StrictMode>
+  WrappedApp
 );