From 2a8ab2311fbc78429ff0532a65365c3a34a22432 Mon Sep 17 00:00:00 2001 From: Danilo Woznica Date: Tue, 10 Sep 2024 10:48:37 +0100 Subject: [PATCH 1/3] fix(sw): support fixed id value --- sandpack-react/src/Playground.stories.tsx | 4 +++ .../src/contexts/utils/useClient.ts | 30 +++++++++++++++---- .../src/utils/useAsyncSandpackId.ts | 6 ++-- 3 files changed, 32 insertions(+), 8 deletions(-) diff --git a/sandpack-react/src/Playground.stories.tsx b/sandpack-react/src/Playground.stories.tsx index c388c902..e31305dc 100644 --- a/sandpack-react/src/Playground.stories.tsx +++ b/sandpack-react/src/Playground.stories.tsx @@ -7,6 +7,8 @@ export default { title: "Intro/Playground", }; +localStorage.setItem("SANDPACK_INTERNAL:URL-CONSISTENT-ID", "123123123"); + export const Basic: React.FC = () => { return (
@@ -14,6 +16,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 index 90828e7a..bf419993 100644 --- a/sandpack-react/src/contexts/utils/useClient.ts +++ b/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, } ); diff --git a/sandpack-react/src/utils/useAsyncSandpackId.ts b/sandpack-react/src/utils/useAsyncSandpackId.ts index 312bb281..3bd42b40 100644 --- a/sandpack-react/src/utils/useAsyncSandpackId.ts +++ b/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); } }; From 7a6be6e9b9164959ae352120e3ed7b826895e192 Mon Sep 17 00:00:00 2001 From: Danilo Woznica Date: Tue, 10 Sep 2024 11:04:01 +0100 Subject: [PATCH 2/3] refactor --- sandpack-react/src/Playground.stories.tsx | 2 -- .../src/contexts/utils/useClient.ts | 24 +++++++------------ 2 files changed, 9 insertions(+), 17 deletions(-) diff --git a/sandpack-react/src/Playground.stories.tsx b/sandpack-react/src/Playground.stories.tsx index e31305dc..96aa90ff 100644 --- a/sandpack-react/src/Playground.stories.tsx +++ b/sandpack-react/src/Playground.stories.tsx @@ -7,8 +7,6 @@ export default { title: "Intro/Playground", }; -localStorage.setItem("SANDPACK_INTERNAL:URL-CONSISTENT-ID", "123123123"); - export const Basic: React.FC = () => { return (
diff --git a/sandpack-react/src/contexts/utils/useClient.ts b/sandpack-react/src/contexts/utils/useClient.ts index bf419993..414c4dd4 100644 --- a/sandpack-react/src/contexts/utils/useClient.ts +++ b/sandpack-react/src/contexts/utils/useClient.ts @@ -120,9 +120,7 @@ export const useClient: UseClient = ( const debounceHook = useRef(); const prevEnvironment = useRef(filesState.environment); - const experimental_stableServiceWorkerId = useAsyncSandpackId( - filesState.files - ); + const asyncSandpackId = useAsyncSandpackId(filesState.files); /** * Callbacks @@ -163,23 +161,19 @@ export const useClient: UseClient = ( } 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` - ); + 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; } - if (options?.experimental_enableStableServiceWorkerId) { - return await experimental_stableServiceWorkerId(); - } - - return undefined; + return await asyncSandpackId(); }; const client = await loadSandpackClient( From 898d658e9ca410ed9e4a9da154e91422eb7ab325 Mon Sep 17 00:00:00 2001 From: Danilo Woznica Date: Tue, 10 Sep 2024 11:04:45 +0100 Subject: [PATCH 3/3] revert --- sandpack-react/src/contexts/utils/useClient.ts | 5 +---- sandpack-react/src/utils/useAsyncSandpackId.ts | 6 +++--- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/sandpack-react/src/contexts/utils/useClient.ts b/sandpack-react/src/contexts/utils/useClient.ts index 414c4dd4..13c70272 100644 --- a/sandpack-react/src/contexts/utils/useClient.ts +++ b/sandpack-react/src/contexts/utils/useClient.ts @@ -19,10 +19,7 @@ import type { SandpackStatus, } from "../.."; import { generateRandomId } from "../../utils/stringUtils"; -import { - MAX_SANDPACK_ID_LENGTH, - useAsyncSandpackId, -} from "../../utils/useAsyncSandpackId"; +import { useAsyncSandpackId } from "../../utils/useAsyncSandpackId"; import type { FilesState } from "./useFiles"; diff --git a/sandpack-react/src/utils/useAsyncSandpackId.ts b/sandpack-react/src/utils/useAsyncSandpackId.ts index 3bd42b40..312bb281 100644 --- a/sandpack-react/src/utils/useAsyncSandpackId.ts +++ b/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 */ -export const MAX_SANDPACK_ID_LENGTH = 9; +const MAX_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_SANDPACK_ID_LENGTH + MAX_ID_LENGTH ); }; } else { - return () => ensureLength(generateRandomId(), MAX_SANDPACK_ID_LENGTH); + return () => ensureLength(generateRandomId(), MAX_ID_LENGTH); } };