@storybook/cli 7.0.0-alpha.1 → 7.0.0-alpha.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/automigrate/fixes/angular12.js +2 -2
- package/dist/cjs/automigrate/fixes/builder-vite.js +2 -2
- package/dist/cjs/automigrate/fixes/cra5.js +2 -2
- package/dist/cjs/automigrate/fixes/eslint-plugin.js +3 -3
- package/dist/cjs/automigrate/fixes/index.js +3 -1
- package/dist/cjs/automigrate/fixes/mainjsFramework.js +3 -3
- package/dist/cjs/automigrate/fixes/npm7.js +59 -0
- package/dist/cjs/automigrate/fixes/vue3.js +2 -2
- package/dist/cjs/automigrate/fixes/webpack5.js +5 -5
- package/dist/cjs/automigrate/index.js +9 -3
- package/dist/cjs/babel-config.js +5 -4
- package/dist/cjs/dev.js +3 -5
- package/dist/cjs/frameworks/angular/Button.stories.ts +6 -4
- package/dist/cjs/frameworks/angular/Header.stories.ts +2 -2
- package/dist/cjs/frameworks/angular/Page.stories.ts +3 -3
- package/dist/cjs/frameworks/html/ts/Button.stories.ts +3 -3
- package/dist/cjs/frameworks/html/ts/Button.ts +6 -2
- package/dist/cjs/frameworks/html/ts/Header.stories.ts +3 -3
- package/dist/cjs/frameworks/html/ts/Page.stories.ts +2 -2
- package/dist/cjs/frameworks/html/ts/Page.ts +4 -4
- package/dist/cjs/frameworks/react/ts/Button.stories.tsx +2 -2
- package/dist/cjs/frameworks/react/ts/Header.stories.tsx +2 -2
- package/dist/cjs/frameworks/react/ts/Page.stories.tsx +2 -2
- package/dist/cjs/frameworks/web-components/ts/Button.stories.ts +2 -2
- package/dist/cjs/frameworks/web-components/ts/Header.stories.ts +2 -2
- package/dist/cjs/frameworks/web-components/ts/Page.stories.ts +2 -2
- package/dist/cjs/generate.js +1 -1
- package/dist/cjs/generators/ANGULAR/index.js +24 -1
- package/dist/cjs/generators/REACT_SCRIPTS/index.js +4 -4
- package/dist/cjs/generators/SVELTE/index.js +8 -14
- package/dist/cjs/generators/baseGenerator.js +42 -41
- package/dist/cjs/generators/configure.js +19 -21
- package/dist/cjs/generators/types.js +5 -0
- package/dist/cjs/helpers.js +10 -12
- package/dist/cjs/initiate.js +2 -1
- package/dist/cjs/js-package-manager/JsPackageManager.js +2 -2
- package/dist/cjs/js-package-manager/NPMProxy.js +18 -2
- package/dist/cjs/repro-generators/configs.js +22 -24
- package/dist/cjs/repro-generators/scripts.js +23 -13
- package/dist/cjs/repro.js +3 -3
- package/dist/cjs/versions.js +75 -73
- package/dist/esm/automigrate/fixes/angular12.js +2 -2
- package/dist/esm/automigrate/fixes/builder-vite.js +2 -2
- package/dist/esm/automigrate/fixes/cra5.js +2 -2
- package/dist/esm/automigrate/fixes/eslint-plugin.js +3 -3
- package/dist/esm/automigrate/fixes/index.js +3 -1
- package/dist/esm/automigrate/fixes/mainjsFramework.js +3 -3
- package/dist/esm/automigrate/fixes/npm7.js +59 -0
- package/dist/esm/automigrate/fixes/vue3.js +2 -2
- package/dist/esm/automigrate/fixes/webpack5.js +5 -5
- package/dist/esm/automigrate/index.js +9 -3
- package/dist/esm/babel-config.js +5 -4
- package/dist/esm/dev.js +3 -5
- package/dist/esm/frameworks/angular/Button.stories.ts +6 -4
- package/dist/esm/frameworks/angular/Header.stories.ts +2 -2
- package/dist/esm/frameworks/angular/Page.stories.ts +3 -3
- package/dist/esm/frameworks/html/ts/Button.stories.ts +3 -3
- package/dist/esm/frameworks/html/ts/Button.ts +6 -2
- package/dist/esm/frameworks/html/ts/Header.stories.ts +3 -3
- package/dist/esm/frameworks/html/ts/Page.stories.ts +2 -2
- package/dist/esm/frameworks/html/ts/Page.ts +4 -4
- package/dist/esm/frameworks/react/ts/Button.stories.tsx +2 -2
- package/dist/esm/frameworks/react/ts/Header.stories.tsx +2 -2
- package/dist/esm/frameworks/react/ts/Page.stories.tsx +2 -2
- package/dist/esm/frameworks/web-components/ts/Button.stories.ts +2 -2
- package/dist/esm/frameworks/web-components/ts/Header.stories.ts +2 -2
- package/dist/esm/frameworks/web-components/ts/Page.stories.ts +2 -2
- package/dist/esm/generate.js +1 -1
- package/dist/esm/generators/ANGULAR/index.js +24 -1
- package/dist/esm/generators/REACT_SCRIPTS/index.js +4 -4
- package/dist/esm/generators/SVELTE/index.js +8 -14
- package/dist/esm/generators/baseGenerator.js +42 -41
- package/dist/esm/generators/configure.js +19 -21
- package/dist/esm/generators/types.js +5 -0
- package/dist/esm/helpers.js +10 -12
- package/dist/esm/initiate.js +2 -1
- package/dist/esm/js-package-manager/JsPackageManager.js +2 -2
- package/dist/esm/js-package-manager/NPMProxy.js +18 -2
- package/dist/esm/repro-generators/configs.js +22 -24
- package/dist/esm/repro-generators/scripts.js +23 -13
- package/dist/esm/repro.js +3 -3
- package/dist/esm/versions.js +75 -73
- package/dist/types/automigrate/fixes/npm7.d.ts +9 -0
- package/dist/types/generators/ANGULAR/index.d.ts +1 -1
- package/dist/types/generators/AURELIA/index.d.ts +1 -1
- package/dist/types/generators/EMBER/index.d.ts +1 -1
- package/dist/types/generators/HTML/index.d.ts +1 -1
- package/dist/types/generators/MARIONETTE/index.d.ts +1 -1
- package/dist/types/generators/MARKO/index.d.ts +1 -1
- package/dist/types/generators/MITHRIL/index.d.ts +1 -1
- package/dist/types/generators/PREACT/index.d.ts +1 -1
- package/dist/types/generators/RAX/index.d.ts +1 -1
- package/dist/types/generators/REACT/index.d.ts +1 -1
- package/dist/types/generators/REACT_SCRIPTS/index.d.ts +1 -1
- package/dist/types/generators/RIOT/index.d.ts +1 -1
- package/dist/types/generators/SERVER/index.d.ts +1 -1
- package/dist/types/generators/SFC_VUE/index.d.ts +1 -1
- package/dist/types/generators/SVELTE/index.d.ts +1 -1
- package/dist/types/generators/VUE/index.d.ts +1 -1
- package/dist/types/generators/VUE3/index.d.ts +1 -1
- package/dist/types/generators/WEB-COMPONENTS/index.d.ts +1 -1
- package/dist/types/generators/WEBPACK_REACT/index.d.ts +1 -1
- package/dist/types/generators/baseGenerator.d.ts +3 -20
- package/dist/types/generators/configure.d.ts +2 -1
- package/dist/types/generators/types.d.ts +37 -0
- package/dist/types/helpers.d.ts +1 -1
- package/dist/types/initiate.d.ts +1 -15
- package/dist/types/js-package-manager/NPMProxy.d.ts +4 -0
- package/dist/types/repro-generators/configs.d.ts +1 -4
- package/dist/types/repro-generators/scripts.d.ts +1 -1
- package/dist/types/versions.d.ts +3 -1
- package/package.json +11 -9
|
@@ -16,25 +16,21 @@ var _baseGenerator = require("../baseGenerator");
|
|
|
16
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
17
|
|
|
18
18
|
const generator = async (packageManager, npmOptions, options) => {
|
|
19
|
-
let
|
|
19
|
+
let svelteOptions;
|
|
20
20
|
let commonJs = false; // svelte.config.js ?
|
|
21
21
|
|
|
22
22
|
if (_fsExtra.default.existsSync('./svelte.config.js')) {
|
|
23
23
|
_nodeLogger.logger.info("Configuring preprocessor from 'svelte.config.js'");
|
|
24
24
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
preprocess: '%%require("../svelte.config.js").preprocess%%'
|
|
28
|
-
}
|
|
25
|
+
svelteOptions = {
|
|
26
|
+
preprocess: '%%require("../svelte.config.js").preprocess%%'
|
|
29
27
|
};
|
|
30
28
|
} else if (_fsExtra.default.existsSync('./svelte.config.cjs')) {
|
|
31
29
|
_nodeLogger.logger.info("Configuring preprocessor from 'svelte.config.cjs'");
|
|
32
30
|
|
|
33
31
|
commonJs = true;
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
preprocess: '%%require("../svelte.config.cjs").preprocess%%'
|
|
37
|
-
}
|
|
32
|
+
svelteOptions = {
|
|
33
|
+
preprocess: '%%require("../svelte.config.cjs").preprocess%%'
|
|
38
34
|
};
|
|
39
35
|
} else {
|
|
40
36
|
// svelte-preprocess dependencies ?
|
|
@@ -43,10 +39,8 @@ const generator = async (packageManager, npmOptions, options) => {
|
|
|
43
39
|
if (packageJson.devDependencies && packageJson.devDependencies['svelte-preprocess']) {
|
|
44
40
|
_nodeLogger.logger.info("Configuring preprocessor with 'svelte-preprocess'");
|
|
45
41
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
preprocess: '%%require("svelte-preprocess")()%%'
|
|
49
|
-
}
|
|
42
|
+
svelteOptions = {
|
|
43
|
+
preprocess: '%%require("svelte-preprocess")()%%'
|
|
50
44
|
};
|
|
51
45
|
}
|
|
52
46
|
}
|
|
@@ -54,7 +48,7 @@ const generator = async (packageManager, npmOptions, options) => {
|
|
|
54
48
|
await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'svelte', {
|
|
55
49
|
extraPackages: ['svelte', 'svelte-loader'],
|
|
56
50
|
extensions: ['js', 'jsx', 'ts', 'tsx', 'svelte'],
|
|
57
|
-
|
|
51
|
+
framework: svelteOptions,
|
|
58
52
|
commonJs
|
|
59
53
|
});
|
|
60
54
|
};
|
|
@@ -9,7 +9,7 @@ require("core-js/modules/es.promise.js");
|
|
|
9
9
|
|
|
10
10
|
var _fsExtra = _interopRequireDefault(require("fs-extra"));
|
|
11
11
|
|
|
12
|
-
var _tsDedent =
|
|
12
|
+
var _tsDedent = require("ts-dedent");
|
|
13
13
|
|
|
14
14
|
var _project_types = require("../project_types");
|
|
15
15
|
|
|
@@ -34,6 +34,7 @@ const defaultOptions = {
|
|
|
34
34
|
addBabel: true,
|
|
35
35
|
addESLint: false,
|
|
36
36
|
extraMain: undefined,
|
|
37
|
+
framework: undefined,
|
|
37
38
|
extensions: undefined,
|
|
38
39
|
commonJs: false
|
|
39
40
|
};
|
|
@@ -54,33 +55,39 @@ const getBuilderDetails = builder => {
|
|
|
54
55
|
return builder;
|
|
55
56
|
};
|
|
56
57
|
|
|
57
|
-
const
|
|
58
|
+
const wrapForPnp = packageName => `%%path.dirname(require.resolve(path.join('${packageName}', 'package.json')))%%`;
|
|
59
|
+
|
|
60
|
+
const getFrameworkDetails = (renderer, builder, pnp) => {
|
|
58
61
|
const frameworkPackage = `@storybook/${renderer}-${builder}`;
|
|
62
|
+
const frameworkPackagePath = pnp ? wrapForPnp(frameworkPackage) : frameworkPackage;
|
|
59
63
|
const rendererPackage = `@storybook/${renderer}`;
|
|
64
|
+
const rendererPackagePath = pnp ? wrapForPnp(rendererPackage) : rendererPackage;
|
|
65
|
+
const builderPackage = getBuilderDetails(builder);
|
|
66
|
+
const builderPackagePath = pnp ? wrapForPnp(builderPackage) : builderPackage;
|
|
60
67
|
const isKnownFramework = !!_versions.default[frameworkPackage];
|
|
61
68
|
const isKnownRenderer = !!_versions.default[rendererPackage];
|
|
62
|
-
const builderPackage = getBuilderDetails(builder);
|
|
63
69
|
|
|
64
70
|
if (renderer === 'angular') {
|
|
65
71
|
return {
|
|
66
|
-
|
|
67
|
-
|
|
72
|
+
packages: [rendererPackage],
|
|
73
|
+
framework: rendererPackagePath,
|
|
68
74
|
type: 'framework'
|
|
69
75
|
};
|
|
70
76
|
}
|
|
71
77
|
|
|
72
78
|
if (isKnownFramework) {
|
|
73
79
|
return {
|
|
74
|
-
|
|
75
|
-
|
|
80
|
+
packages: [frameworkPackage],
|
|
81
|
+
framework: frameworkPackagePath,
|
|
76
82
|
type: 'framework'
|
|
77
83
|
};
|
|
78
84
|
}
|
|
79
85
|
|
|
80
86
|
if (isKnownRenderer) {
|
|
81
87
|
return {
|
|
82
|
-
|
|
83
|
-
builder:
|
|
88
|
+
packages: [rendererPackage, builderPackage],
|
|
89
|
+
builder: builderPackagePath,
|
|
90
|
+
renderer: rendererPackagePath,
|
|
84
91
|
type: 'renderer'
|
|
85
92
|
};
|
|
86
93
|
}
|
|
@@ -94,7 +101,8 @@ const hasInteractiveStories = framework => ['react', 'angular', 'preact', 'svelt
|
|
|
94
101
|
|
|
95
102
|
async function baseGenerator(packageManager, npmOptions, {
|
|
96
103
|
language,
|
|
97
|
-
builder = _project_types.CoreBuilder.Webpack5
|
|
104
|
+
builder = _project_types.CoreBuilder.Webpack5,
|
|
105
|
+
pnp
|
|
98
106
|
}, renderer, options = defaultOptions) {
|
|
99
107
|
const {
|
|
100
108
|
extraAddons: extraAddonPackages,
|
|
@@ -107,11 +115,10 @@ async function baseGenerator(packageManager, npmOptions, {
|
|
|
107
115
|
extraMain,
|
|
108
116
|
extensions
|
|
109
117
|
} = Object.assign({}, defaultOptions, options); // added to main.js
|
|
110
|
-
// make sure to update `canUsePrebuiltManager` in dev-server.js and build-manager-config/main.js when this list changes
|
|
111
118
|
|
|
112
|
-
const addons = ['@storybook/addon-links', '@storybook/addon-essentials']; // added to package.json
|
|
119
|
+
const addons = ['@storybook/addon-links', '@storybook/addon-essentials', ...stripVersions(extraAddonPackages)]; // added to package.json
|
|
113
120
|
|
|
114
|
-
const addonPackages = [
|
|
121
|
+
const addonPackages = ['@storybook/addon-links', '@storybook/addon-essentials', ...extraAddonPackages];
|
|
115
122
|
|
|
116
123
|
if (hasInteractiveStories(renderer)) {
|
|
117
124
|
addons.push('@storybook/addon-interactions');
|
|
@@ -123,54 +130,48 @@ async function baseGenerator(packageManager, npmOptions, {
|
|
|
123
130
|
const packageJson = packageManager.retrievePackageJson();
|
|
124
131
|
const installedDependencies = new Set(Object.keys(Object.assign({}, packageJson.dependencies, packageJson.devDependencies)));
|
|
125
132
|
const {
|
|
126
|
-
|
|
133
|
+
packages: frameworkPackages,
|
|
127
134
|
type,
|
|
128
|
-
|
|
129
|
-
|
|
135
|
+
// @ts-ignore
|
|
136
|
+
renderer: rendererInclude,
|
|
137
|
+
// deepscan-disable-line UNUSED_DECL
|
|
138
|
+
framework: frameworkInclude,
|
|
139
|
+
builder: builderInclude
|
|
140
|
+
} = getFrameworkDetails(renderer, builder, pnp); // TODO: We need to start supporting this at some point
|
|
130
141
|
|
|
131
142
|
if (type === 'renderer') {
|
|
132
|
-
|
|
133
|
-
language,
|
|
134
|
-
builder,
|
|
135
|
-
renderer,
|
|
136
|
-
builderPackage,
|
|
137
|
-
frameworkPackage,
|
|
138
|
-
type
|
|
139
|
-
});
|
|
140
|
-
throw new Error((0, _tsDedent.default)`
|
|
143
|
+
throw new Error((0, _tsDedent.dedent)`
|
|
141
144
|
Sorry, for now, you can not do this, please use a framework such as @storybook/react-webpack5
|
|
142
145
|
|
|
143
146
|
https://github.com/storybookjs/storybook/issues/18360
|
|
144
147
|
`);
|
|
145
148
|
}
|
|
146
149
|
|
|
147
|
-
const packages = ['
|
|
150
|
+
const packages = ['storybook', ...frameworkPackages, ...addonPackages, ...extraPackages, ...yarn2ExtraPackages].filter(Boolean).filter(packageToInstall => !installedDependencies.has((0, _jsPackageManager.getPackageDetails)(packageToInstall)[0]));
|
|
148
151
|
const versionedPackages = await packageManager.getVersionedPackages(packages);
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
});
|
|
152
|
-
const mainOptions = type !== 'framework' ? Object.assign({
|
|
153
|
-
core: {
|
|
154
|
-
builder: builderPackage
|
|
155
|
-
}
|
|
156
|
-
}, extraMain) : extraMain;
|
|
157
|
-
(0, _configure.configure)(renderer, Object.assign({
|
|
152
|
+
await _fsExtra.default.ensureDir('./.storybook');
|
|
153
|
+
await (0, _configure.configureMain)(Object.assign({
|
|
158
154
|
framework: {
|
|
159
|
-
name:
|
|
160
|
-
options: {}
|
|
155
|
+
name: frameworkInclude,
|
|
156
|
+
options: options.framework || {}
|
|
161
157
|
},
|
|
162
|
-
addons:
|
|
158
|
+
addons: pnp ? addons.map(wrapForPnp) : addons,
|
|
163
159
|
extensions,
|
|
164
160
|
commonJs: options.commonJs
|
|
165
|
-
},
|
|
161
|
+
}, extraMain, type !== 'framework' ? {
|
|
162
|
+
core: {
|
|
163
|
+
builder: builderInclude
|
|
164
|
+
}
|
|
165
|
+
} : {}));
|
|
166
|
+
await (0, _configure.configurePreview)(renderer, options.commonJs);
|
|
166
167
|
|
|
167
168
|
if (addComponents) {
|
|
168
169
|
(0, _helpers.copyComponents)(renderer, language);
|
|
169
170
|
} // FIXME: temporary workaround for https://github.com/storybookjs/storybook/issues/17516
|
|
170
171
|
|
|
171
172
|
|
|
172
|
-
if (
|
|
173
|
-
const previewHead = (0, _tsDedent.
|
|
173
|
+
if (frameworkPackages.includes('@storybook/builder-vite')) {
|
|
174
|
+
const previewHead = (0, _tsDedent.dedent)`
|
|
174
175
|
<script>
|
|
175
176
|
window.global = window;
|
|
176
177
|
</script>
|
|
@@ -3,11 +3,14 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.configureMain = configureMain;
|
|
7
|
+
exports.configurePreview = configurePreview;
|
|
8
|
+
|
|
9
|
+
require("core-js/modules/es.promise.js");
|
|
7
10
|
|
|
8
11
|
var _fsExtra = _interopRequireDefault(require("fs-extra"));
|
|
9
12
|
|
|
10
|
-
var _tsDedent =
|
|
13
|
+
var _tsDedent = require("ts-dedent");
|
|
11
14
|
|
|
12
15
|
const _excluded = ["addons", "extensions", "commonJs"];
|
|
13
16
|
|
|
@@ -15,7 +18,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
15
18
|
|
|
16
19
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
17
20
|
|
|
18
|
-
function configureMain(_ref) {
|
|
21
|
+
async function configureMain(_ref) {
|
|
19
22
|
let {
|
|
20
23
|
addons,
|
|
21
24
|
extensions = ['js', 'jsx', 'ts', 'tsx'],
|
|
@@ -23,24 +26,27 @@ function configureMain(_ref) {
|
|
|
23
26
|
} = _ref,
|
|
24
27
|
custom = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
25
28
|
|
|
26
|
-
const prefix = _fsExtra.default.
|
|
29
|
+
const prefix = (await _fsExtra.default.pathExists('./src')) ? '../src' : '../stories';
|
|
27
30
|
const config = Object.assign({
|
|
28
31
|
stories: [`${prefix}/**/*.stories.mdx`, `${prefix}/**/*.stories.@(${extensions.join('|')})`],
|
|
29
32
|
addons
|
|
30
33
|
}, custom); // replace escaped values and delimiters
|
|
31
34
|
|
|
32
|
-
const stringified = `module.exports = ${JSON.stringify(config, null, 2).replace(/\\"/g, '"').replace(/['"]%%/g, '').replace(/%%['"]
|
|
33
|
-
|
|
34
|
-
|
|
35
|
+
const stringified = `module.exports = ${JSON.stringify(config, null, 2).replace(/\\"/g, '"').replace(/['"]%%/g, '').replace(/%%['"]/g, '').replace(/\\n/g, '\r\n')}`; // main.js isn't actually JSON, but we used JSON.stringify to convert the runtime-object into code.
|
|
36
|
+
// un-stringify the value for referencing packages by string
|
|
37
|
+
// .replaceAll(/"(path\.dirname\(require\.resolve\(path\.join\('.*\))"/g, (_, a) => a)}`;
|
|
35
38
|
|
|
36
|
-
_fsExtra.default.
|
|
39
|
+
await _fsExtra.default.writeFile(`./.storybook/main.${commonJs ? 'cjs' : 'js'}`, (0, _tsDedent.dedent)`
|
|
40
|
+
const path = require('path');
|
|
41
|
+
${stringified}
|
|
42
|
+
`, {
|
|
37
43
|
encoding: 'utf8'
|
|
38
44
|
});
|
|
39
45
|
}
|
|
40
46
|
|
|
41
47
|
const frameworkToPreviewParts = {
|
|
42
48
|
angular: {
|
|
43
|
-
prefix: (0, _tsDedent.
|
|
49
|
+
prefix: (0, _tsDedent.dedent)`
|
|
44
50
|
import { setCompodocJson } from "@storybook/addon-docs/angular";
|
|
45
51
|
import docJson from "../documentation.json";
|
|
46
52
|
setCompodocJson(docJson);
|
|
@@ -50,18 +56,18 @@ const frameworkToPreviewParts = {
|
|
|
50
56
|
}
|
|
51
57
|
};
|
|
52
58
|
|
|
53
|
-
function configurePreview(framework, commonJs) {
|
|
59
|
+
async function configurePreview(framework, commonJs) {
|
|
54
60
|
const {
|
|
55
61
|
prefix = '',
|
|
56
62
|
extraParameters = ''
|
|
57
63
|
} = frameworkToPreviewParts[framework] || {};
|
|
58
64
|
const previewPath = `./.storybook/preview.${commonJs ? 'cjs' : 'js'}`; // If the framework template included a preview then we have nothing to do
|
|
59
65
|
|
|
60
|
-
if (_fsExtra.default.
|
|
66
|
+
if (await _fsExtra.default.pathExists(previewPath)) {
|
|
61
67
|
return;
|
|
62
68
|
}
|
|
63
69
|
|
|
64
|
-
const preview = (0, _tsDedent.
|
|
70
|
+
const preview = (0, _tsDedent.dedent)`
|
|
65
71
|
${prefix}
|
|
66
72
|
export const parameters = {
|
|
67
73
|
actions: { argTypesRegex: "^on[A-Z].*" },
|
|
@@ -73,15 +79,7 @@ function configurePreview(framework, commonJs) {
|
|
|
73
79
|
},
|
|
74
80
|
${extraParameters}
|
|
75
81
|
}`.replace(' \n', '').trim();
|
|
76
|
-
|
|
77
|
-
_fsExtra.default.writeFileSync(previewPath, preview, {
|
|
82
|
+
await _fsExtra.default.writeFile(previewPath, preview, {
|
|
78
83
|
encoding: 'utf8'
|
|
79
84
|
});
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
function configure(framework, mainOptions) {
|
|
83
|
-
_fsExtra.default.ensureDirSync('./.storybook');
|
|
84
|
-
|
|
85
|
-
configureMain(mainOptions);
|
|
86
|
-
configurePreview(framework, mainOptions.commonJs);
|
|
87
85
|
}
|
package/dist/cjs/helpers.js
CHANGED
|
@@ -189,51 +189,49 @@ function copyTemplate(templateRoot) {
|
|
|
189
189
|
});
|
|
190
190
|
}
|
|
191
191
|
|
|
192
|
-
function copyComponents(framework, language) {
|
|
192
|
+
async function copyComponents(framework, language) {
|
|
193
193
|
const languageFolderMapping = {
|
|
194
194
|
javascript: 'js',
|
|
195
195
|
typescript: 'ts'
|
|
196
196
|
};
|
|
197
197
|
|
|
198
|
-
const componentsPath = () => {
|
|
198
|
+
const componentsPath = async () => {
|
|
199
199
|
const frameworkPath = `frameworks/${framework}`;
|
|
200
200
|
|
|
201
201
|
const languageSpecific = _path.default.resolve(__dirname, `${frameworkPath}/${languageFolderMapping[language]}`);
|
|
202
202
|
|
|
203
|
-
if (_fsExtra.default.
|
|
203
|
+
if (await _fsExtra.default.pathExists(languageSpecific)) {
|
|
204
204
|
return languageSpecific;
|
|
205
205
|
}
|
|
206
206
|
|
|
207
207
|
const jsFallback = _path.default.resolve(__dirname, `${frameworkPath}/${languageFolderMapping.javascript}`);
|
|
208
208
|
|
|
209
|
-
if (_fsExtra.default.
|
|
209
|
+
if (await _fsExtra.default.pathExists(jsFallback)) {
|
|
210
210
|
return jsFallback;
|
|
211
211
|
}
|
|
212
212
|
|
|
213
213
|
const frameworkRootPath = _path.default.resolve(__dirname, frameworkPath);
|
|
214
214
|
|
|
215
|
-
if (_fsExtra.default.
|
|
215
|
+
if (await _fsExtra.default.pathExists(frameworkRootPath)) {
|
|
216
216
|
return frameworkRootPath;
|
|
217
217
|
}
|
|
218
218
|
|
|
219
219
|
throw new Error(`Unsupported framework: ${framework}`);
|
|
220
220
|
};
|
|
221
221
|
|
|
222
|
-
const targetPath = () => {
|
|
223
|
-
if (_fsExtra.default.
|
|
222
|
+
const targetPath = async () => {
|
|
223
|
+
if (await _fsExtra.default.pathExists('./src')) {
|
|
224
224
|
return './src/stories';
|
|
225
225
|
}
|
|
226
226
|
|
|
227
227
|
return './stories';
|
|
228
228
|
};
|
|
229
229
|
|
|
230
|
-
const destinationPath = targetPath();
|
|
231
|
-
|
|
232
|
-
_fsExtra.default.copySync(componentsPath(), destinationPath, {
|
|
230
|
+
const destinationPath = await targetPath();
|
|
231
|
+
await _fsExtra.default.copy(await componentsPath(), destinationPath, {
|
|
233
232
|
overwrite: true
|
|
234
233
|
});
|
|
235
|
-
|
|
236
|
-
_fsExtra.default.copySync(_path.default.resolve(__dirname, 'frameworks/common'), destinationPath, {
|
|
234
|
+
await _fsExtra.default.copy(_path.default.resolve(__dirname, 'frameworks/common'), destinationPath, {
|
|
237
235
|
overwrite: true
|
|
238
236
|
});
|
|
239
237
|
}
|
package/dist/cjs/initiate.js
CHANGED
|
@@ -81,7 +81,8 @@ const installStorybook = (projectType, packageManager, options) => {
|
|
|
81
81
|
language,
|
|
82
82
|
builder: options.builder || (0, _detect.detectBuilder)(packageManager),
|
|
83
83
|
linkable: !!options.linkable,
|
|
84
|
-
commonJs: options.commonJs
|
|
84
|
+
commonJs: options.commonJs,
|
|
85
|
+
pnp: options.usePnp
|
|
85
86
|
};
|
|
86
87
|
|
|
87
88
|
const runGenerator = async () => {
|
|
@@ -221,8 +221,8 @@ class JsPackageManager {
|
|
|
221
221
|
var _options$port;
|
|
222
222
|
|
|
223
223
|
const sbPort = (_options$port = options === null || options === void 0 ? void 0 : options.port) !== null && _options$port !== void 0 ? _options$port : 6006;
|
|
224
|
-
const storybookCmd = options !== null && options !== void 0 && options.staticFolder ? `npx
|
|
225
|
-
const buildStorybookCmd = options !== null && options !== void 0 && options.staticFolder ? `npx
|
|
224
|
+
const storybookCmd = options !== null && options !== void 0 && options.staticFolder ? `npx storybook dev -p ${sbPort} -s ${options.staticFolder}` : `npx storybook dev -p ${sbPort}`;
|
|
225
|
+
const buildStorybookCmd = options !== null && options !== void 0 && options.staticFolder ? `npx storybook build -s ${options.staticFolder}` : `npx storybook build`;
|
|
226
226
|
const preCommand = options !== null && options !== void 0 && options.preCommand ? this.getRunCommand(options.preCommand) : undefined;
|
|
227
227
|
this.addScripts({
|
|
228
228
|
storybook: [preCommand, storybookCmd].filter(Boolean).join(' && '),
|
|
@@ -30,10 +30,26 @@ class NPMProxy extends _JsPackageManager.JsPackageManager {
|
|
|
30
30
|
return `npm run ${command}`;
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
+
getNpmVersion() {
|
|
34
|
+
return this.executeCommand('npm', ['--version']);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
hasLegacyPeerDeps() {
|
|
38
|
+
const result = this.executeCommand('npm', ['config', 'get', 'legacy-peer-deps', '--location=project']);
|
|
39
|
+
return result.trim() === 'true';
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
setLegacyPeerDeps() {
|
|
43
|
+
this.executeCommand('npm', ['config', 'set', 'legacy-peer-deps=true', '--location=project']);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
needsLegacyPeerDeps(version) {
|
|
47
|
+
return _semver.default.gte(version, '7.0.0') && !this.hasLegacyPeerDeps();
|
|
48
|
+
}
|
|
49
|
+
|
|
33
50
|
getInstallArgs() {
|
|
34
51
|
if (!this.installArgs) {
|
|
35
|
-
|
|
36
|
-
this.installArgs = _semver.default.gte(version, '7.0.0') ? ['install', '--legacy-peer-deps'] : ['install'];
|
|
52
|
+
this.installArgs = this.needsLegacyPeerDeps(this.getNpmVersion()) ? ['install', '--legacy-peer-deps'] : ['install'];
|
|
37
53
|
}
|
|
38
54
|
|
|
39
55
|
return this.installArgs;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.web_components_typescript = exports.web_components_lit2 = exports.web_components = exports.vue3 = exports.vue = exports.
|
|
6
|
+
exports.web_components_typescript = exports.web_components_lit2 = exports.web_components = exports.vue3 = exports.vue = exports.svelte = exports.sfcVue = exports.react_typescript = exports.react_legacy_root_api = exports.react_in_yarn_workspace = exports.react = exports.preact = exports.html = exports.cra_typescript = exports.cra = exports.angular_modern_inline_rendering = exports.angular130 = exports.angular13 = exports.angular12 = exports.angular = void 0;
|
|
7
7
|
|
|
8
8
|
/* eslint-disable camelcase */
|
|
9
9
|
const fromDeps = (...args) => ['mkdir {{appName}}', 'cd {{appName}}', // Create `yarn.lock` to force Yarn to consider adding deps in this directory
|
|
@@ -67,15 +67,14 @@ const react_typescript = {
|
|
|
67
67
|
path: '.babelrc',
|
|
68
68
|
contents: '{ "presets": ["@babel/preset-react", "@babel/preset-typescript"] }'
|
|
69
69
|
}]
|
|
70
|
-
};
|
|
70
|
+
}; // export const vite_react: Parameters = {
|
|
71
|
+
// renderer: 'react',
|
|
72
|
+
// name: 'vite_react',
|
|
73
|
+
// version: 'latest',
|
|
74
|
+
// generator: 'npx -p create-vite@{{version}} create-vite {{appName}} --template react-ts',
|
|
75
|
+
// };
|
|
76
|
+
|
|
71
77
|
exports.react_typescript = react_typescript;
|
|
72
|
-
const vite_react = {
|
|
73
|
-
renderer: 'react',
|
|
74
|
-
name: 'vite_react',
|
|
75
|
-
version: 'latest',
|
|
76
|
-
generator: 'npx -p create-vite@{{version}} create-vite {{appName}} --template react-ts'
|
|
77
|
-
};
|
|
78
|
-
exports.vite_react = vite_react;
|
|
79
78
|
const react_in_yarn_workspace = {
|
|
80
79
|
renderer: 'react',
|
|
81
80
|
name: 'react_in_yarn_workspace',
|
|
@@ -89,18 +88,8 @@ const baseAngular = {
|
|
|
89
88
|
renderer: 'angular',
|
|
90
89
|
name: 'angular',
|
|
91
90
|
version: 'latest',
|
|
92
|
-
generator: `npx -p @angular/cli@{{version}} ng new {{appName}} --routing=true --minimal=true --style=scss --
|
|
91
|
+
generator: `npx -p @angular/cli@{{version}} ng new {{appName}} --routing=true --minimal=true --style=scss --skip-install=true --strict`
|
|
93
92
|
};
|
|
94
|
-
const angular10 = Object.assign({}, baseAngular, {
|
|
95
|
-
name: 'angular10',
|
|
96
|
-
version: 'v10-lts'
|
|
97
|
-
});
|
|
98
|
-
exports.angular10 = angular10;
|
|
99
|
-
const angular11 = Object.assign({}, baseAngular, {
|
|
100
|
-
name: 'angular11',
|
|
101
|
-
version: 'v11-lts'
|
|
102
|
-
});
|
|
103
|
-
exports.angular11 = angular11;
|
|
104
93
|
const angular12 = Object.assign({}, baseAngular, {
|
|
105
94
|
name: 'angular12',
|
|
106
95
|
version: 'v12-lts'
|
|
@@ -121,8 +110,7 @@ const angular_modern_inline_rendering = Object.assign({}, baseAngular, {
|
|
|
121
110
|
additionalDeps: ['jest@27', '@storybook/test-runner'],
|
|
122
111
|
mainOverrides: {
|
|
123
112
|
features: {
|
|
124
|
-
storyStoreV7: true
|
|
125
|
-
modernInlineRender: true
|
|
113
|
+
storyStoreV7: true
|
|
126
114
|
}
|
|
127
115
|
}
|
|
128
116
|
});
|
|
@@ -140,14 +128,24 @@ const web_components = {
|
|
|
140
128
|
exports.web_components = web_components;
|
|
141
129
|
const web_components_typescript = Object.assign({}, web_components, {
|
|
142
130
|
name: 'web_components_typescript',
|
|
143
|
-
typescript: true
|
|
131
|
+
typescript: true,
|
|
132
|
+
additionalDeps: ['@babel/preset-typescript'],
|
|
133
|
+
additionalFiles: [{
|
|
134
|
+
path: '.babelrc',
|
|
135
|
+
contents: '{ "presets": ["@babel/preset-typescript"] }'
|
|
136
|
+
}]
|
|
144
137
|
});
|
|
145
138
|
exports.web_components_typescript = web_components_typescript;
|
|
146
139
|
const web_components_lit2 = Object.assign({}, web_components, {
|
|
147
140
|
version: 'next',
|
|
148
141
|
name: 'web_components_lit2',
|
|
149
142
|
generator: fromDeps('lit'),
|
|
150
|
-
typescript: true
|
|
143
|
+
typescript: true,
|
|
144
|
+
additionalDeps: ['@babel/preset-typescript'],
|
|
145
|
+
additionalFiles: [{
|
|
146
|
+
path: '.babelrc',
|
|
147
|
+
contents: '{ "presets": ["@babel/preset-typescript"] }'
|
|
148
|
+
}]
|
|
151
149
|
}); // #endregion
|
|
152
150
|
// #region vue
|
|
153
151
|
|
|
@@ -41,11 +41,12 @@ const exec = async (command, options = {}, {
|
|
|
41
41
|
logger.debug(command);
|
|
42
42
|
return new Promise((resolve, reject) => {
|
|
43
43
|
const defaultOptions = {
|
|
44
|
-
silent:
|
|
44
|
+
silent: false
|
|
45
45
|
};
|
|
46
46
|
|
|
47
47
|
const child = _shelljs.default.exec(command, Object.assign({}, defaultOptions, options, {
|
|
48
|
-
async: true
|
|
48
|
+
async: true,
|
|
49
|
+
silent: false
|
|
49
50
|
}));
|
|
50
51
|
|
|
51
52
|
child.stderr.pipe(process.stderr);
|
|
@@ -170,28 +171,37 @@ const addAdditionalFiles = async ({
|
|
|
170
171
|
additionalFiles,
|
|
171
172
|
cwd
|
|
172
173
|
}) => {
|
|
173
|
-
if (!additionalFiles || additionalFiles.length === 0) {
|
|
174
|
-
return;
|
|
175
|
-
}
|
|
176
|
-
|
|
177
174
|
logger.info(`⤵️ Adding required files`);
|
|
178
|
-
additionalFiles.
|
|
175
|
+
await Promise.all(additionalFiles.map(async file => {
|
|
179
176
|
await (0, _fsExtra.outputFile)(_path.default.resolve(cwd, file.path), file.contents, {
|
|
180
177
|
encoding: 'UTF-8'
|
|
181
178
|
});
|
|
182
|
-
});
|
|
179
|
+
}));
|
|
183
180
|
};
|
|
184
181
|
|
|
185
182
|
const initStorybook = async ({
|
|
186
183
|
cwd,
|
|
187
184
|
autoDetect = true,
|
|
188
185
|
name,
|
|
189
|
-
e2e
|
|
186
|
+
e2e,
|
|
187
|
+
pnp
|
|
190
188
|
}) => {
|
|
191
|
-
const
|
|
192
|
-
|
|
189
|
+
const flags = ['--yes'];
|
|
190
|
+
|
|
191
|
+
if (!autoDetect) {
|
|
192
|
+
flags.push(`--type ${name}`);
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
if (e2e) {
|
|
196
|
+
flags.push('--linkable');
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
if (pnp) {
|
|
200
|
+
flags.push('--use-pnp');
|
|
201
|
+
}
|
|
202
|
+
|
|
193
203
|
const sbCLICommand = useLocalSbCli ? `node ${_path.default.join(__dirname, '../../esm/generate')}` : `yarn dlx -p @storybook/cli sb`;
|
|
194
|
-
const command = `${sbCLICommand} init
|
|
204
|
+
const command = `${sbCLICommand} init ${flags.join(' ')}`;
|
|
195
205
|
await exec(command, {
|
|
196
206
|
cwd
|
|
197
207
|
}, {
|
|
@@ -283,7 +293,7 @@ const createAndInit = async (cwd, _ref, {
|
|
|
283
293
|
}));
|
|
284
294
|
await doTask(addAdditionalFiles, Object.assign({}, options, {
|
|
285
295
|
cwd
|
|
286
|
-
}));
|
|
296
|
+
}), !!options.additionalFiles);
|
|
287
297
|
|
|
288
298
|
if (e2e) {
|
|
289
299
|
await doTask(addPackageResolutions, options);
|
package/dist/cjs/repro.js
CHANGED
|
@@ -19,7 +19,7 @@ var _chalk = _interopRequireDefault(require("chalk"));
|
|
|
19
19
|
|
|
20
20
|
var _boxen = _interopRequireDefault(require("boxen"));
|
|
21
21
|
|
|
22
|
-
var _tsDedent =
|
|
22
|
+
var _tsDedent = require("ts-dedent");
|
|
23
23
|
|
|
24
24
|
var _scripts = require("./repro-generators/scripts");
|
|
25
25
|
|
|
@@ -51,7 +51,7 @@ const repro = async ({
|
|
|
51
51
|
local,
|
|
52
52
|
pnp
|
|
53
53
|
}) => {
|
|
54
|
-
logger.info((0, _boxen.default)((0, _tsDedent.
|
|
54
|
+
logger.info((0, _boxen.default)((0, _tsDedent.dedent)`
|
|
55
55
|
🤗 Welcome to ${_chalk.default.yellow('sb repro')}! 🤗
|
|
56
56
|
|
|
57
57
|
Create a ${_chalk.default.green('new project')} to minimally reproduce Storybook issues.
|
|
@@ -151,7 +151,7 @@ const repro = async ({
|
|
|
151
151
|
await initGitRepo(cwd);
|
|
152
152
|
}
|
|
153
153
|
|
|
154
|
-
logger.info((0, _boxen.default)((0, _tsDedent.
|
|
154
|
+
logger.info((0, _boxen.default)((0, _tsDedent.dedent)`
|
|
155
155
|
🎉 Your Storybook reproduction project is ready to use! 🎉
|
|
156
156
|
|
|
157
157
|
${_chalk.default.yellow(`cd ${selectedDirectory}`)}
|