Default to Running Studio Without Strict Mode (#426)

This PR adds a flag that will render Studio in React Strict Mode. Now,
Studio runs without React Strict Mode by default, but can be specified
to run in Strict Mode by adding `strict` as an argument to the empty
`--` flag (i.e. `npx studio -- strict`). This was also added to the
`dev` command in the test site, but not the e2e-tests.

Since we are trying to access an env variable to determine a conditional
render in Studio client-side, we cannot access `process.env` directly.
Vite offers `import.meta.env` as a way for client-side modules to access
env vars, but they must be prefixed with `VITE_`. This is why the env
var is called `VITE_STUDIO_STRICT`.

J=SLAP-2966
TEST=manual

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"

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[];
 }

packages/studio/bin/studio.ts

@@ -16,6 +16,7 @@ cli
   .option("--port <port>", "[number] port to run studio")
   .option("--root <directory>", `[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,
       }

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" ? (
+    <React.StrictMode>
+      <AppWithLazyLoading />
+    </React.StrictMode>
+  ) : (
+    <AppWithLazyLoading />
+  );
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
-  <React.StrictMode>
-    <AppWithLazyLoading />
-  </React.StrictMode>
+  WrappedApp
 );