fix(sw): support fixed id value

sandpack-react/src/Playground.stories.tsx

@@ -7,13 +7,17 @@ export default {
   title: "Intro/Playground",
 };
 
+localStorage.setItem("SANDPACK_INTERNAL:URL-CONSISTENT-ID", "123123123");
+
 export const Basic: React.FC = () => {
   return (
     <div style={{ height: "400vh" }}>
       <Sandpack
         options={{
           showTabs: true,
           closableTabs: true,
+          experimental_enableServiceWorker: true,
+          experimental_enableStableServiceWorkerId: true,
         }}
         // customSetup={{
         //   dependencies: {

sandpack-react/src/contexts/utils/useClient.ts

@@ -19,7 +19,10 @@ import type {
   SandpackStatus,
 } from "../..";
 import { generateRandomId } from "../../utils/stringUtils";
-import { useAsyncSandpackId } from "../../utils/useAsyncSandpackId";
+import {
+  MAX_SANDPACK_ID_LENGTH,
+  useAsyncSandpackId,
+} from "../../utils/useAsyncSandpackId";
 
 import type { FilesState } from "./useFiles";
 
@@ -159,6 +162,26 @@ export const useClient: UseClient = (
         }, timeOut);
       }
 
+      const getStableServiceWorkerId = async () => {
+        const key = `SANDPACK_INTERNAL:URL-CONSISTENT-ID`;
+        const fixedId = localStorage.getItem(key);
+        if (fixedId) {
+          if (fixedId.length !== MAX_SANDPACK_ID_LENGTH) {
+            throw new Error(
+              `${key} must be ${MAX_SANDPACK_ID_LENGTH} characters long`
+            );
+          }
+
+          return fixedId;
+        }
+
+        if (options?.experimental_enableStableServiceWorkerId) {
+          return await experimental_stableServiceWorkerId();
+        }
+
+        return undefined;
+      };
+
       const client = await loadSandpackClient(
         iframe,
         {
@@ -180,10 +203,7 @@ export const useClient: UseClient = (
           teamId,
           experimental_enableServiceWorker:
             !!options?.experimental_enableServiceWorker,
-          experimental_stableServiceWorkerId:
-            options?.experimental_enableStableServiceWorkerId
-              ? await experimental_stableServiceWorkerId()
-              : undefined,
+          experimental_stableServiceWorkerId: await getStableServiceWorkerId(),
           sandboxId,
         }
       );

sandpack-react/src/utils/useAsyncSandpackId.ts

@@ -17,7 +17,7 @@ export const useSandpackId = () => {
  * For example, this id will be used to mount SW in the iframe
  * so, to keep the URL valid, this must be an 9 character long string
  */
-const MAX_ID_LENGTH = 9;
+export const MAX_SANDPACK_ID_LENGTH = 9;
 
 export const useAsyncSandpackId = (files: SandpackBundlerFiles) => {
   if (typeof useReactId === "function") {
@@ -31,11 +31,11 @@ export const useAsyncSandpackId = (files: SandpackBundlerFiles) => {
 
       return ensureLength(
         sha.replace(/:/g, "sp").replace(/[^a-zA-Z]/g, ""),
-        MAX_ID_LENGTH
+        MAX_SANDPACK_ID_LENGTH
       );
     };
   } else {
-    return () => ensureLength(generateRandomId(), MAX_ID_LENGTH);
+    return () => ensureLength(generateRandomId(), MAX_SANDPACK_ID_LENGTH);
   }
 };