Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix issue with sb init on the Vue CLI #4535

Merged
merged 2 commits into from
Oct 25, 2018
Merged

Fix issue with sb init on the Vue CLI #4535

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
83c6ded
Revert to installing `babel-preset-vue` from view installer.
tmeasday Oct 24, 2018
9715b34
Install @babel/core latest in vue
tmeasday Oct 24, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
33 changes: 30 additions & 3 deletions lib/cli/generators/VUE/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,29 @@
import mergeDirs from 'merge-dirs';
import path from 'path';
import { getVersions, getPackageJson, writePackageJson, installBabel } from '../../lib/helpers';
import {
getVersions,
getPackageJson,
writePackageJson,
installBabel,
addToDevDependenciesIfNotPresent,
} from '../../lib/helpers';

export default async npmOptions => {
const [storybookVersion, actionsVersion, linksVersion, addonsVersion] = await getVersions(
const [
storybookVersion,
actionsVersion,
linksVersion,
addonsVersion,
babelPresetVersion,
babelCoreVersion,
] = await getVersions(
npmOptions,
'@storybook/vue',
'@storybook/addon-actions',
'@storybook/addon-links',
'@storybook/addons'
'@storybook/addons',
'babel-preset-vue',
'@babel/core'
);

mergeDirs(path.resolve(__dirname, 'template'), '.', 'overwrite');
Expand All @@ -22,6 +37,18 @@ export default async npmOptions => {
packageJson.devDependencies['@storybook/addon-links'] = linksVersion;
packageJson.devDependencies['@storybook/addons'] = addonsVersion;

// We should probably just not even be using this directly, see: https://github.com/storybooks/storybook/issues/4475#issuecomment-432141296
addToDevDependenciesIfNotPresent(packageJson, 'babel-preset-vue', babelPresetVersion);

const packageBabelCoreVersion =
packageJson.dependencies['babel-core'] || packageJson.devDependencies['babel-core'];

// This seems to be the version installed by the Vue CLI, and it is not handled by
// installBabel below. For some reason it leads to the wrong version of @babel/core (a beta)
// being installed
if (packageBabelCoreVersion === '7.0.0-bridge.0') {
addToDevDependenciesIfNotPresent(packageJson, '@babel/core', babelCoreVersion);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So this leads to both babel-core and @babel/core being installed?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Where the vue app uses babel-core and storybook uses @babel/core?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this problematic? I don't know enough to understand the implications here.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

babel-core@7.0.0-bridge.0 is just a shim in front of @babel/core.

I don't really know why the Vue CLI installs it as it appears to use babel7.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The issue (seems to my limited eyes) to be that babel-core@7.0.0-bridge.0 depends on @babel/core@7.0.0-0 (note the -0), which leads to this weird beta version of @babel/core being installed. This overrides that.

I feel like this is a mistake in the vue CLI 🤷‍♂️

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool, that maybe makes sense.

}
await installBabel(npmOptions, packageJson);

packageJson.scripts = packageJson.scripts || {};
Expand Down
8 changes: 7 additions & 1 deletion lib/cli/lib/helpers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@ export function paddedLog(message) {

export function getChars(char, amount) {
let line = '';
for (let lc = 0; lc < amount; lc++) { // eslint-disable-line
for (let lc = 0; lc < amount; lc += 1) {
line += char;
}

Expand Down Expand Up @@ -227,3 +227,9 @@ export async function installBabel(npmOptions, packageJson) {
);
}
}

export function addToDevDependenciesIfNotPresent(packageJson, name, packageVersion) {
if (!packageJson.dependencies[name] && !packageJson.devDependencies[name]) {
packageJson.devDependencies[name] = packageVersion;
}
}