Merge branch 'jeppe/react-prerelease-sandboxes' of github.com:storybo…

…okjs/storybook into jeppe/temp-gen-react-prerelease-sandboxes
storybookjs · May 3, 2024 · 40cda2f · 40cda2f
2 parents 03bae80 + 88253e4
commit 40cda2f
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 5 deletions.
diff --git a/code/addons/docs/template/stories/docs2/resolved-react.stories.ts b/code/addons/docs/template/stories/docs2/resolved-react.stories.ts
@@ -45,7 +45,7 @@ export default {
       name: 'ResolvedReact',
     },
     // the version string changes with every release of React/Next.js/Preact, not worth snapshotting
-    chromat: { disable: true },
+    chromatic: { disable: true },
   },
 };
 

diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts
@@ -203,8 +203,19 @@ const baseTemplates = {
   },
   'react-vite/prerelease-ts': {
     name: 'React Prerelease (Vite | TypeScript)',
-    script:
-      'npm create vite --yes {{beforeDir}} -- --template react-ts && cd {{beforeDir}} && yarn add react@beta react-dom@beta',
+    /**
+     * 1. Create a Vite project with the React template
+     * 2. Add React beta versions
+     * 3. Add resolutions for @types/react and @types/react-dom, see https://react.dev/blog/2024/04/25/react-19-upgrade-guide#installing
+     * 4. Add @types/react and @types/react-dom pointing to the beta packages
+     */
+    script: `
+      npm create vite --yes {{beforeDir}} -- --template react-ts && \
+      cd {{beforeDir}} && \
+      yarn add react@beta react-dom@beta && \
+      jq '.resolutions += {"@types/react": "npm:types-react@beta", "@types/react-dom": "npm:types-react-dom@beta"}' package.json > tmp.json && mv tmp.json package.json && \
+      yarn add --dev @types/react@npm:types-react@beta @types/react-dom@npm:types-react-dom@beta
+      `,
     expected: {
       framework: '@storybook/react-vite',
       renderer: '@storybook/react',

diff --git a/scripts/sandbox/generate.ts b/scripts/sandbox/generate.ts
@@ -163,7 +163,7 @@ const runGenerators = async (
           else if (expected.renderer === '@storybook/server') flags = ['--type server'];
 
           const time = process.hrtime();
-          console.log(`🧬 Generating ${name} (${{ dirName }})`);
+          console.log(`🧬 Generating ${name} (${dirName})`);
           await emptyDir(baseDir);
 
           // We do the creation inside a temp dir to avoid yarn container problems

diff --git a/scripts/utils/yarn.ts b/scripts/utils/yarn.ts
@@ -22,6 +22,7 @@ export const addPackageResolutions = async ({ cwd, dryRun }: YarnOptions) => {
   const packageJsonPath = path.join(cwd, 'package.json');
   const packageJson = await readJSON(packageJsonPath);
   packageJson.resolutions = {
+    ...packageJson.resolutions,
     ...storybookVersions,
     'enhanced-resolve': '~5.10.0', // TODO, remove this
     // this is for our CI test, ensure we use the same version as docker image, it should match version specified in `./code/package.json` and `.circleci/config.yml`
@@ -97,7 +98,7 @@ export const configureYarn2ForVerdaccio = async ({
     `yarn config set enableImmutableInstalls false`,
   ];
 
-  if (key.includes('svelte-kit')) {
+  if (key.includes('svelte-kit') || key.includes('prerelease')) {
     // Don't error with INCOMPATIBLE_PEER_DEPENDENCY for SvelteKit sandboxes, it is expected to happen with @sveltejs/vite-plugin-svelte
     command.push(
       `yarn config set logFilters --json '[ { "code": "YN0013", "level": "discard" } ]'`