diff --git a/sandpack-client/.bundler b/sandpack-client/.bundler index 4ea7d113..a018049f 100644 --- a/sandpack-client/.bundler +++ b/sandpack-client/.bundler @@ -1,3 +1,3 @@ // Manually generated file to trigger new releases based on the bundler changes. // The following value is the commit hash from codesandbox-client -b7d51d076df01577313c724ab54419ce41667d17 +f64b210d3832ce8558516bcda9bebd543400c9d9 diff --git a/sandpack-react/rollup.config.js b/sandpack-react/rollup.config.js index e5ac47e7..c5ce1c1b 100644 --- a/sandpack-react/rollup.config.js +++ b/sandpack-react/rollup.config.js @@ -4,6 +4,8 @@ const replace = require("@rollup/plugin-replace"); const typescript = require("@rollup/plugin-typescript"); const filesize = require("rollup-plugin-filesize"); +const sandpackClientPkg = require("../sandpack-client/package.json"); + const pkg = require("./package.json"); const generateUnstyledTypes = require("./scripts/rollup-generate-unstyled-types"); const removeCss = require("./scripts/rollup-remove-css-transformer"); @@ -28,6 +30,7 @@ const configBase = [ values: { "process.env.TEST_ENV": "false", "process.env.SANDPACK_UNSTYLED_COMPONENTS": `"false"`, + "process.env.SANDPACK_CLIENT_VERSION": `"${sandpackClientPkg.version}"`, }, }), typescript({ tsconfig: "./tsconfig.json" }), diff --git a/sandpack-react/src/utils/useAsyncSandpackId.ts b/sandpack-react/src/utils/useAsyncSandpackId.ts index 312bb281..a55c4c46 100644 --- a/sandpack-react/src/utils/useAsyncSandpackId.ts +++ b/sandpack-react/src/utils/useAsyncSandpackId.ts @@ -19,6 +19,8 @@ export const useSandpackId = () => { */ const MAX_ID_LENGTH = 9; +const sandpackClientVersion = process.env.SANDPACK_CLIENT_VERSION; + export const useAsyncSandpackId = (files: SandpackBundlerFiles) => { if (typeof useReactId === "function") { /* eslint-disable-next-line react-hooks/rules-of-hooks */ @@ -27,7 +29,9 @@ export const useAsyncSandpackId = (files: SandpackBundlerFiles) => { const allCode = Object.entries(files) .map((path, code) => path + "|" + code) .join("|||"); - const sha = await generateShortId(allCode + reactDomId); + const sha = await generateShortId( + allCode + reactDomId + sandpackClientVersion + ); return ensureLength( sha.replace(/:/g, "sp").replace(/[^a-zA-Z]/g, ""),