diff --git a/MIGRATION.md b/MIGRATION.md index 0491f4f71c9..e6c0919ea7d 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -117,11 +117,21 @@ ### Correct globs in main.js -In 5.3 we introduced the `main.js` file with an `entries` property. This property was documented as a "glob" pattern. This was our intention, however the implementation allowed for non valid globs to be specified and work. In fact we promoted invalid globs in our documentation and CLI templates. +In 5.3 we introduced the `main.js` file with an `stories` property. This property was documented as a "glob" pattern. This was our intention, however the implementation allowed for non valid globs to be specified and work. In fact we promoted invalid globs in our documentation and CLI templates. We've corrected this, the CLI templates have been changed to valid globs. -We've also changed the code that resolves these globs, so that invalid globs will log a warning. They will break in the future, so if you see this warning, please ensue you're specifying a valid glob. +We've also changed the code that resolves these globs, so that invalid globs will log a warning. They will break in the future, so if you see this warning, please ensure you're specifying a valid glob. + +Example of an **invalid** glob: +``` +stories: ['./**/*.stories.(ts|js)'] +``` + +Example of an **valid** glob: +``` +stories: ['./**/*.stories.@(ts|js)'] +``` ### Zero config typescript diff --git a/lib/core/package.json b/lib/core/package.json index ac41b9ae836..e73e21e6a56 100644 --- a/lib/core/package.json +++ b/lib/core/package.json @@ -74,6 +74,7 @@ "chalk": "^4.0.0", "cli-table3": "0.6.0", "commander": "^5.0.0", + "micromatch": "^4.0.2", "core-js": "^3.0.1", "css-loader": "^3.5.3", "detect-port": "^1.3.0", @@ -96,7 +97,6 @@ "ip": "^1.1.5", "json5": "^2.1.1", "lazy-universal-dotenv": "^3.0.1", - "nanomatch": "^1.2.13", "node-fetch": "^2.6.0", "pkg-dir": "^4.2.0", "pnp-webpack-plugin": "1.6.4", diff --git a/lib/core/src/server/preview/entries.js b/lib/core/src/server/preview/entries.js index 040ea5dd40a..2242434867e 100644 --- a/lib/core/src/server/preview/entries.js +++ b/lib/core/src/server/preview/entries.js @@ -63,9 +63,12 @@ export async function createPreviewEntry(options) { if (files.length === 0) { logger.warn(dedent` - We found no files matching any of the following globs: - - ${stories.join('\n')} + We found no files matching any of the following globs: + + ${stories.join('\n')} + + Maybe your glob was invalid? + see: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#correct-globs-in-main-js `); } else { logger.info(`=> Adding stories defined in "${path.join(configDir, 'main.js')}".`); diff --git a/lib/core/src/server/preview/to-require-context.js b/lib/core/src/server/preview/to-require-context.js index cc4b81a0c03..0245a3b2a0d 100644 --- a/lib/core/src/server/preview/to-require-context.js +++ b/lib/core/src/server/preview/to-require-context.js @@ -1,5 +1,5 @@ import globBase from 'glob-base'; -import { makeRe } from 'nanomatch'; +import { makeRe } from 'micromatch'; const isObject = (val) => val != null && typeof val === 'object' && Array.isArray(val) === false; export const toRequireContext = (input) => { diff --git a/lib/core/src/server/preview/to-require-context.test.js b/lib/core/src/server/preview/to-require-context.test.js index ca721e4c75f..b7d1d2acfc7 100644 --- a/lib/core/src/server/preview/to-require-context.test.js +++ b/lib/core/src/server/preview/to-require-context.test.js @@ -2,6 +2,51 @@ import path from 'path'; import { toRequireContext } from './to-require-context'; const testCases = [ + { + glob: '**/*.stories.tsx', + validPaths: [ + './Icon.stories.tsx', + './src/Icon.stories.tsx', + './src/components/Icon.stories.tsx', + './src/components/Icon.stories/Icon.stories.tsx', + ], + invalidPaths: [ + './stories.tsx', + './Icon.stories.ts', + './Icon.stories.js', + './src/components/stories.tsx', + './src/components/Icon.stories/stories.tsx', + './src/components/Icon.stories.ts', + './src/components/Icon.stories.js', + ], + }, + // INVALID GLOB + { + glob: '../src/stories/**/*.stories.(js|mdx)', + validPaths: [ + '../src/stories/components/Icon.stories.js', + '../src/stories/Icon.stories.js', + '../src/stories/Icon.stories.mdx', + '../src/stories/components/Icon/Icon.stories.js', + '../src/stories/components/Icon.stories/Icon.stories.mdx', + ], + invalidPaths: [ + './stories.js', + './src/stories/Icon.stories.js', + './Icon.stories.js', + '../src/Icon.stories.mdx', + '../src/stories/components/Icon/Icon.stories.ts', + '../src/stories/components/Icon/Icon.mdx', + ], + }, + { + glob: 'dirname/../stories/*.stories.*', + validPaths: [ + './dirname/../stories/App.stories.js', + './dirname/../stories/addon-centered.stories.js', + ], + invalidPaths: ['./dirname/../stories.js', './dirname/../App.stories.js'], + }, { glob: '../src/stories/**/@(*.stories.js|*.stories.mdx)', validPaths: [ @@ -56,6 +101,7 @@ const testCases = [ '../src/stories/components/Icon/Icon.mdx', ], }, + // INVALID GLOB { glob: '../src/stories/**/*.stories.[tj]sx', validPaths: [ diff --git a/yarn.lock b/yarn.lock index e9ad4e68a19..17cf4166093 100644 --- a/yarn.lock +++ b/yarn.lock @@ -22955,7 +22955,7 @@ nan@^2.12.1, nan@^2.13.2, nan@^2.14.0: resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.1.tgz#d7be34dfa3105b91494c3147089315eff8874b01" integrity sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw== -nanomatch@^1.2.13, nanomatch@^1.2.9: +nanomatch@^1.2.9: version "1.2.13" resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119" integrity sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==