fix(sandpack-id): generate new bundler id based on client version (#1202)

Author: danilowoz

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

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" }),

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, ""),