Merge branches 'main' and 'fix/sw-consistent-id' of https://github.co…

…m/codesandbox/sandpack into fix/sw-consistent-id
codesandbox · Sep 10, 2024 · a49d0e5 · a49d0e5
2 parents 0ae65cc + 898d658
commit a49d0e5
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 7 deletions.
diff --git a/sandpack-react/src/Playground.stories.tsx b/sandpack-react/src/Playground.stories.tsx
@@ -14,6 +14,8 @@ export const Basic: React.FC = () => {
  options={{
  showTabs: true,
  closableTabs: true,
+ experimental_enableServiceWorker: true,
+ experimental_enableStableServiceWorkerId: true,
  }}
  // customSetup={{
  // dependencies: {

diff --git a/sandpack-react/src/contexts/utils/useClient.ts b/sandpack-react/src/contexts/utils/useClient.ts
@@ -117,9 +117,7 @@ export const useClient: UseClient = (
  const debounceHook = useRef<number | undefined>();
  const prevEnvironment = useRef(filesState.environment);
 
- const experimental_stableServiceWorkerId = useAsyncSandpackId(
- filesState.files
- );
+ const asyncSandpackId = useAsyncSandpackId(filesState.files);
 
  /**
  * Callbacks
@@ -159,6 +157,22 @@ export const useClient: UseClient = (
  }, timeOut);
  }
 
+ const getStableServiceWorkerId = async () => {
+ if (options?.experimental_enableStableServiceWorkerId) {
+ const key = `SANDPACK_INTERNAL:URL-CONSISTENT-ID`;
+ let fixedId = localStorage.getItem(key);
+
+ if (!fixedId) {
+ fixedId = await asyncSandpackId();
+ localStorage.setItem(key, fixedId);
+ }
+
+ return fixedId;
+ }
+
+ return await asyncSandpackId();
+ };
+
  const client = await loadSandpackClient(
  iframe,
  {
@@ -180,10 +194,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,
  }
  );