CLI: Add Yarn 2 compatibility #9866

gaetanmaisse · 2020-02-15T16:05:57Z

Issue:
Part of #9527

What I did

Make SB CLI compatible with Yarn 2 by handling command used to fetch package versions on NPM registry. => Will need a refactoring, much easier to do if I migrate the package to TS first.
Add tests to check CLI and Yarn 2 compatibility: These tests mimic the ones done to test SB CLI with "classic" yarn. However, some magic setup and package.json customization are needed in order to make Yarn 2 works inside a Yarn v1 workspace.

⚠️ CLI is working with Yarn 2 but it does not mean that running yarn sb init will not fails because all frameworks or the SB integration are currently not compatible with Yarn 2. Especially projects using:

Angular as Angular is not working with Yarn 2
Marko => Cause: Error: Unable to load tag ([.yarn/berry/cache/marko-npm-4.18.46-d693c4c719-2.zip/node_modules/marko/src/core-tags/cache/marko.json → <cached-fragment>])
React Static => Error: Couldn't find preset "./babel-preset.js" relative to directory ".yarn/berry/cache/react-static-npm-5.9.12-e804e3b66e-2.zip/node_modules/react-static"
Vue => https://github.com/nickmessing/babel-plugin-jsx-event-modifiers is not compatible with Yarn 2, it is deprecated too, so we will need to do something about it

How to test

I add a new GitHub Actions workflow running tests related to SB CLI with Yarn 2.
It should be 🟢.

…ir own functions Preparatory refactoring to simplify future compatibility with Yarn 2.

gaetanmaisse · 2020-02-16T08:29:35Z

lib/cli/src/generators/MITHRIL/index.js

@@ -35,6 +42,7 @@ export default async (npmOptions, { storyFormat = 'csf' }) => {
    `@storybook/mithril@${storybookVersion}`,
    `@storybook/addon-actions@${actionsVersion}`,
    `@storybook/addon-links@${linksVersion}`,
+    `@storybook/addon-knobs@${knobsVersion}`,


I added knobs because it is listed in addons of the configuration: https://github.com/storybookjs/storybook/blob/3dd714d3532687d958c41e093187b84ffca603ee/lib/cli/src/generators/MITHRIL/template-csf/.storybook/main.js but it is not used in template stories so maybe it should be deleted from configuration instead? 🤷‍♂

At the opposite @storybook/addon-links is added and used in template stories but is not declared in addons config, so we can maybe remove it?

gaetanmaisse · 2020-02-16T08:29:58Z

lib/cli/src/generators/METEOR/index.js

@@ -43,6 +45,7 @@ export default async (npmOptions, { storyFormat = 'csf' }) => {
    `@storybook/react@${storybookVersion}`,
    `@storybook/addon-actions@${actionsVersion}`,
    `@storybook/addon-links@${linksVersion}`,
+    `@storybook/addon-knobs@${knobsVersion}`,


Same as https://github.com/storybookjs/storybook/pull/9866/files#r379884879 for Mithril

Before, it was assumed that "When working with `create-react-app@>=2.0.0`, we know `babel-loader` is installed." But `babel` is a peer dependency of `@storybook/core` (itself dep of `@storybook/react`) and so it must be added to the project's `package.json`

These tests mimic the ones done to test SB CLI with "classic" yarn. However, some magic setup and `package.json` customization are needed in order to make Yarn 2 works inside a Yarn v1 workspace.

…I with Yarn 2

`riot-tmpl` is a peerDependency of `riot-compiler`

…s it is listed in SB config template https://github.com/storybookjs/storybook/blob/3dd714d3532687d958c41e093187b84ffca603ee/lib/cli/src/generators/METEOR/template-csf/.storybook/main.js

…as it is listed in SB config template https://github.com/storybookjs/storybook/blob/3dd714d3532687d958c41e093187b84ffca603ee/lib/cli/src/generators/MITHRIL/template-csf/.storybook/main.js

gaetanmaisse · 2020-02-18T18:17:26Z

@Hypnosphi there are 2 broken TeamCity checks, should I mind or rely on all other checks only?

ndelangen · 2020-02-18T19:00:21Z

@gaetanmaisse you can ignore the TeamCity checks for now.

gaetanmaisse added cli compatibility with other tools yarn / npm Yarn / npm acting weird labels Feb 15, 2020

gaetanmaisse mentioned this pull request Feb 15, 2020

Yarn 2: Support Yarn v2 "Berry" #9527

Closed

gaetanmaisse force-pushed the yarn-2-cli-sb-init-compatibility branch from 362dcbc to 65ec39f Compare February 15, 2020 16:30

gaetanmaisse added the feature request label Feb 15, 2020

gaetanmaisse added 2 commits February 16, 2020 09:23

refactor: extract npm and yarn processing from latestVersion in the…

59fbd10

…ir own functions Preparatory refactoring to simplify future compatibility with Yarn 2.

feat: make SB CLI compatible with yarn 2

e46fecf

gaetanmaisse force-pushed the yarn-2-cli-sb-init-compatibility branch from 65ec39f to 03ccdc8 Compare February 16, 2020 08:23

gaetanmaisse commented Feb 16, 2020

View reviewed changes

gaetanmaisse added 8 commits February 16, 2020 16:10

test(cli): add tests to check Yarn 2 compatibility

9e4f216

These tests mimic the ones done to test SB CLI with "classic" yarn. However, some magic setup and `package.json` customization are needed in order to make Yarn 2 works inside a Yarn v1 workspace.

test(cli): add GitHub Actions workflow running tests related to SB CL…

f0c2cb6

…I with Yarn 2

fix(ember): add package, resolved in server src, in peerDependencies

de1b0e3

test(cli): add missing dep in riot fixture

f41ac2b

`riot-tmpl` is a peerDependency of `riot-compiler`

fix(cli): add peerDeps of @storybook/ember in sb init on Ember project

ef98652

fix(cli): add @storybook/addon-knobs in sb init on Meteor project a…

f119fdf

…s it is listed in SB config template https://github.com/storybookjs/storybook/blob/3dd714d3532687d958c41e093187b84ffca603ee/lib/cli/src/generators/METEOR/template-csf/.storybook/main.js

fix(cli): add @storybook/addon-knobs in sb init on Mithril project …

e629f50

…as it is listed in SB config template https://github.com/storybookjs/storybook/blob/3dd714d3532687d958c41e093187b84ffca603ee/lib/cli/src/generators/MITHRIL/template-csf/.storybook/main.js

gaetanmaisse force-pushed the yarn-2-cli-sb-init-compatibility branch from 03ccdc8 to e629f50 Compare February 16, 2020 15:10

gaetanmaisse added this to the 6.0.0 milestone Feb 16, 2020

gaetanmaisse marked this pull request as ready for review February 16, 2020 15:26

gaetanmaisse requested review from danielduan, ndelangen, shilman and stijnkoopal as code owners February 16, 2020 15:26

gaetanmaisse merged commit 781a472 into next Feb 18, 2020

gaetanmaisse deleted the yarn-2-cli-sb-init-compatibility branch February 18, 2020 19:59

dependencies bot mentioned this pull request Jan 15, 2021

Update 3 dependencies from npm #2912

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CLI: Add Yarn 2 compatibility #9866

CLI: Add Yarn 2 compatibility #9866

gaetanmaisse commented Feb 15, 2020 •

edited

Loading

gaetanmaisse Feb 16, 2020

gaetanmaisse Feb 16, 2020

gaetanmaisse commented Feb 18, 2020

ndelangen commented Feb 18, 2020

CLI: Add Yarn 2 compatibility #9866

CLI: Add Yarn 2 compatibility #9866

Conversation

gaetanmaisse commented Feb 15, 2020 • edited Loading

What I did

How to test

gaetanmaisse Feb 16, 2020

Choose a reason for hiding this comment

gaetanmaisse Feb 16, 2020

Choose a reason for hiding this comment

gaetanmaisse commented Feb 18, 2020

ndelangen commented Feb 18, 2020

gaetanmaisse commented Feb 15, 2020 •

edited

Loading