From b7f8a6904647bbceb38360636e5aefde2e409d19 Mon Sep 17 00:00:00 2001 From: eric-burel Date: Wed, 28 Oct 2020 08:56:42 +0100 Subject: [PATCH 1/5] demo module path aliases in with-storybook --- examples/with-storybook/components/index.js | 3 ++- examples/with-storybook/jsconfig.json | 9 +++++++++ examples/with-storybook/utils/sayHello.js | 5 +++++ 3 files changed, 16 insertions(+), 1 deletion(-) create mode 100644 examples/with-storybook/jsconfig.json create mode 100644 examples/with-storybook/utils/sayHello.js diff --git a/examples/with-storybook/components/index.js b/examples/with-storybook/components/index.js index 8f5129010b9b0..73021b813f657 100644 --- a/examples/with-storybook/components/index.js +++ b/examples/with-storybook/components/index.js @@ -1,3 +1,4 @@ +import sayHello from '@/sayHello' export default function Home() { - return
Hello World
+ return
{sayHello()}
} diff --git a/examples/with-storybook/jsconfig.json b/examples/with-storybook/jsconfig.json new file mode 100644 index 0000000000000..ed048cf72bb05 --- /dev/null +++ b/examples/with-storybook/jsconfig.json @@ -0,0 +1,9 @@ +// tsconfig.json or jsconfig.json +{ + "compilerOptions": { + "baseUrl": ".", + "paths": { + "@/*": ["utils/*"] + } + } +} diff --git a/examples/with-storybook/utils/sayHello.js b/examples/with-storybook/utils/sayHello.js new file mode 100644 index 0000000000000..9741b5c9c7632 --- /dev/null +++ b/examples/with-storybook/utils/sayHello.js @@ -0,0 +1,5 @@ +// Dummy function used demo module paths aliases +// @see https://nextjs.org/docs/advanced-features/module-path-aliases +export default function sayHello() { + return 'Hello World' +} From 100c7e2abd094bbfd862aae64ff8cd1797d3456c Mon Sep 17 00:00:00 2001 From: eric-burel Date: Wed, 28 Oct 2020 08:59:15 +0100 Subject: [PATCH 2/5] add @next/plugin-storybook to storybook example --- examples/with-storybook/.storybook/main.js | 6 +++++- examples/with-storybook/package.json | 1 + 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/examples/with-storybook/.storybook/main.js b/examples/with-storybook/.storybook/main.js index bb74a535b057d..4b26c647047a9 100644 --- a/examples/with-storybook/.storybook/main.js +++ b/examples/with-storybook/.storybook/main.js @@ -1,4 +1,8 @@ module.exports = { stories: ['../stories/*.stories.@(ts|tsx|js|jsx|mdx)'], - addons: ['@storybook/addon-actions', '@storybook/addon-links'], + addons: [ + '@storybook/addon-actions', + '@storybook/addon-links', + '@next/plugin-storybook', + ], } diff --git a/examples/with-storybook/package.json b/examples/with-storybook/package.json index fd39acc6948a4..6af83c1baf476 100644 --- a/examples/with-storybook/package.json +++ b/examples/with-storybook/package.json @@ -16,6 +16,7 @@ }, "license": "MIT", "devDependencies": { + "@next/plugin-storybook": "10.0.0", "@storybook/addon-actions": "6.0.5", "@storybook/addon-links": "6.0.5", "@storybook/addons": "6.0.5", From 6b468de78fd2078657f7c4d8fcacc66d17df5de4 Mon Sep 17 00:00:00 2001 From: eric-burel Date: Wed, 28 Oct 2020 08:59:30 +0100 Subject: [PATCH 3/5] provide fixed TS version of next-plugin-storybook --- packages/next-plugin-storybook/preset.ts | 63 ++++++++++++++++++++++++ 1 file changed, 63 insertions(+) create mode 100644 packages/next-plugin-storybook/preset.ts diff --git a/packages/next-plugin-storybook/preset.ts b/packages/next-plugin-storybook/preset.ts new file mode 100644 index 0000000000000..031d30f6e6d4f --- /dev/null +++ b/packages/next-plugin-storybook/preset.ts @@ -0,0 +1,63 @@ +import { PHASE_PRODUCTION_BUILD } from 'next/constants' +import { findPagesDir } from 'next/lib/find-pages-dir' +import loadConfig from 'next/next-server/server/config' +import getWebpackConfig from 'next/build/webpack-config' + +const CWD = process.cwd() + +async function webpackFinal(config) { + const pagesDir = findPagesDir(CWD) + const nextConfig = await loadConfig(PHASE_PRODUCTION_BUILD, CWD) + const nextWebpackConfig = await getWebpackConfig(CWD, { + pagesDir, + entrypoints: {}, + isServer: false, + target: 'server', + config: nextConfig, + buildId: 'storybook', + rewrites: [], + }) + + config.plugins = [...config.plugins, ...nextWebpackConfig.plugins] + + config.resolve = { + ...config.resolve, + ...nextWebpackConfig.resolve, + } + + config.module.rules = [ + ...config.module.rules.filter((rule) => { + // the rules we're filtering use RegExp for the test + if (!(rule.test instanceof RegExp)) return true + // use Next.js' built-in CSS + if (rule.test.test('hello.css')) { + return false + } + // use next-babel-loader instead of storybook's babel-loader + if ( + rule.test.test('hello.js') && + Array.isArray(rule.use) && + rule.use[0].loader === 'babel-loader' + ) { + return false + } + return true + }), + ...nextWebpackConfig.module.rules.map((rule) => { + // we need to resolve next-babel-loader since it's not available + // relative with storybook's config + if (rule.use && rule.use.loader === 'next-babel-loader') { + rule.use.loader = require.resolve( + 'next/dist/build/webpack/loaders/next-babel-loader' + ) + } + return rule + }), + ] + + return config +} + +module.exports = { + webpackFinal, +} From 1b04b26dd8a36dc42ca3d6713d3e2f715056dd5f Mon Sep 17 00:00:00 2001 From: eric-burel Date: Wed, 28 Oct 2020 09:07:38 +0100 Subject: [PATCH 4/5] draft setup of a tsconfig --- packages/next-plugin-storybook/package.json | 9 ++- packages/next-plugin-storybook/preset.js | 62 -------------------- packages/next-plugin-storybook/tsconfig.json | 13 ++++ 3 files changed, 21 insertions(+), 63 deletions(-) delete mode 100644 packages/next-plugin-storybook/preset.js create mode 100644 packages/next-plugin-storybook/tsconfig.json diff --git a/packages/next-plugin-storybook/package.json b/packages/next-plugin-storybook/package.json index 0aa11303f2a83..f4a6a7d257f95 100644 --- a/packages/next-plugin-storybook/package.json +++ b/packages/next-plugin-storybook/package.json @@ -1,5 +1,8 @@ { "name": "@next/plugin-storybook", + "exports": { + "./": "./dist/" + }, "version": "10.0.0", "repository": { "url": "vercel/next.js", @@ -7,5 +10,9 @@ }, "peerDependencies": { "next": "*" - } + }, + "scripts": { + "build": "yarn tsc -d -w -p tsconfig.json" + }, + "dependencies": {} } diff --git a/packages/next-plugin-storybook/preset.js b/packages/next-plugin-storybook/preset.js deleted file mode 100644 index 83b84429c4721..0000000000000 --- a/packages/next-plugin-storybook/preset.js +++ /dev/null @@ -1,62 +0,0 @@ -const { PHASE_PRODUCTION_BUILD } = require('next/constants') -const { findPagesDir } = require('next/dist/lib/find-pages-dir') -const loadConfig = require('next/dist/next-server/server/config').default -const getWebpackConfig = require('next/dist/build/webpack-config').default - -const CWD = process.cwd() - -async function webpackFinal(config) { - const pagesDir = findPagesDir(CWD) - const nextConfig = await loadConfig(PHASE_PRODUCTION_BUILD, CWD) - const nextWebpackConfig = await getWebpackConfig(CWD, { - pagesDir, - entrypoints: {}, - isServer: false, - target: 'server', - config: nextConfig, - buildId: 'storybook', - }) - - config.plugins = [...config.plugins, ...nextWebpackConfig.plugins] - - config.resolve = { - ...config.resolve, - ...nextWebpackConfig.resolve, - } - - config.module.rules = [ - ...config.module.rules.filter((rule) => { - // the rules we're filtering use RegExp for the test - if (!rule.test instanceof RegExp) return true - // use Next.js' built-in CSS - if (rule.test.test('hello.css')) { - return false - } - // use next-babel-loader instead of storybook's babel-loader - if ( - rule.test.test('hello.js') && - Array.isArray(rule.use) && - rule.use[0].loader === 'babel-loader' - ) { - return false - } - return true - }), - ...nextWebpackConfig.module.rules.map((rule) => { - // we need to resolve next-babel-loader since it's not available - // relative with storybook's config - if (rule.use && rule.use.loader === 'next-babel-loader') { - rule.use.loader = require.resolve( - 'next/dist/build/webpack/loaders/next-babel-loader' - ) - } - return rule - }), - ] - - return config -} - -module.exports = { - webpackFinal, -} diff --git a/packages/next-plugin-storybook/tsconfig.json b/packages/next-plugin-storybook/tsconfig.json new file mode 100644 index 0000000000000..fe1fe67769dad --- /dev/null +++ b/packages/next-plugin-storybook/tsconfig.json @@ -0,0 +1,13 @@ +{ + "compilerOptions": { + "outDir": "dist/", + "module": "commonjs", + "sourceMap": true, + "esModuleInterop": true, + "target": "es2015", + "downlevelIteration": true, + "preserveWatchOutput": true + }, + "include": ["**/*.ts"], + "exclude": ["node_modules", "dist", "./*.d.ts"] +} From 6d32d2a09dddda0c4bd537825cb69e0de0761598 Mon Sep 17 00:00:00 2001 From: eric-burel Date: Fri, 18 Dec 2020 09:42:22 +0100 Subject: [PATCH 5/5] add node typings to storybook packages and load constants from local TS file instead of plugin --- packages/next-plugin-storybook/package.json | 5 ++- packages/next-plugin-storybook/preset.ts | 2 +- yarn.lock | 45 ++++++++++++++++++++- 3 files changed, 49 insertions(+), 3 deletions(-) diff --git a/packages/next-plugin-storybook/package.json b/packages/next-plugin-storybook/package.json index 469b7638647d8..1a658cc7335f0 100644 --- a/packages/next-plugin-storybook/package.json +++ b/packages/next-plugin-storybook/package.json @@ -14,5 +14,8 @@ "scripts": { "build": "yarn tsc -d -w -p tsconfig.json" }, - "dependencies": {} + "dependencies": {}, + "devDependencies": { + "@types/node": "14.14.14" + } } diff --git a/packages/next-plugin-storybook/preset.ts b/packages/next-plugin-storybook/preset.ts index 031d30f6e6d4f..30d488d56b18e 100644 --- a/packages/next-plugin-storybook/preset.ts +++ b/packages/next-plugin-storybook/preset.ts @@ -1,4 +1,4 @@ -import { PHASE_PRODUCTION_BUILD } from 'next/constants' +import { PHASE_PRODUCTION_BUILD } from '../next/next-server/lib/constants' import { findPagesDir } from 'next/lib/find-pages-dir' import loadConfig from 'next/next-server/server/config' import getWebpackConfig from 'next/build/webpack-config' diff --git a/yarn.lock b/yarn.lock index 3fa154a323e2b..7d8fa4c8bbdec 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2798,6 +2798,11 @@ version "13.1.4" resolved "https://registry.yarnpkg.com/@types/node/-/node-13.1.4.tgz#4cfd90175a200ee9b02bd6b1cd19bc349741607e" +"@types/node@14.14.14": + version "14.14.14" + resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.14.tgz#f7fd5f3cc8521301119f63910f0fb965c7d761ae" + integrity sha512-UHnOPWVWV1z+VV8k6L1HhG7UbGBgIdghqF3l9Ny9ApPghbjICXkUJSd/b9gOgQfjM1r+37cipdw/HJ3F6ICEnQ== + "@types/node@^10.1.0": version "10.17.13" resolved "https://registry.yarnpkg.com/@types/node/-/node-10.17.13.tgz#ccebcdb990bd6139cd16e84c39dc2fb1023ca90c" @@ -4122,7 +4127,25 @@ browserify-zlib@^0.2.0: dependencies: pako "~1.0.5" -browserslist@4.14.6, browserslist@^1.3.6, browserslist@^1.5.2, browserslist@^1.7.6, browserslist@^4.0.0, browserslist@^4.12.0, browserslist@^4.14.7, browserslist@^4.3.6, browserslist@^4.6.4, browserslist@^4.8.3, browserslist@^4.8.5: +browserslist@4.14.6: + version "4.14.6" + resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.14.6.tgz#97702a9c212e0c6b6afefad913d3a1538e348457" + integrity sha512-zeFYcUo85ENhc/zxHbiIp0LGzzTrE2Pv2JhxvS7kpUb9Q9D38kUX6Bie7pGutJ/5iF5rOxE7CepAuWD56xJ33A== + dependencies: + caniuse-lite "^1.0.30001154" + electron-to-chromium "^1.3.585" + escalade "^3.1.1" + node-releases "^1.1.65" + +browserslist@^1.3.6, browserslist@^1.5.2, browserslist@^1.7.6: + version "1.7.7" + resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.7.7.tgz#0bd76704258be829b2398bb50e4b62d1a166b0b9" + integrity sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk= + dependencies: + caniuse-db "^1.0.30000639" + electron-to-chromium "^1.2.7" + +browserslist@^4.0.0, browserslist@^4.12.0, browserslist@^4.14.7, browserslist@^4.3.6, browserslist@^4.6.4, browserslist@^4.8.3, browserslist@^4.8.5: version "4.14.7" resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.14.7.tgz#c071c1b3622c1c2e790799a37bb09473a4351cb6" integrity sha512-BSVRLCeG3Xt/j/1cCGj1019Wbty0H+Yvu2AOuZSuoaUWn3RatbL33Cxk+Q4jRMRAbOm0p7SLravLjpnT6s0vzQ== @@ -4444,11 +4467,21 @@ caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634: version "1.0.30001023" resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30001023.tgz#f856f71af16a5a44e81f1fcefc1673912a43da72" +caniuse-db@^1.0.30000639: + version "1.0.30001168" + resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30001168.tgz#68dd167176aafa234c5969afe65442d918525cd8" + integrity sha512-Nq5zfHhWwS+TlfmNVzlIZqAv790nYSoyNMsfIL/Xd8YUGhYkhlUNLzykOdvQ8TJLVWgmhrG1erYwNevS9hsoxQ== + caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001020, caniuse-lite@^1.0.30001093, caniuse-lite@^1.0.30001113, caniuse-lite@^1.0.30001157: version "1.0.30001157" resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001157.tgz" integrity sha512-gOerH9Wz2IRZ2ZPdMfBvyOi3cjaz4O4dgNwPGzx8EhqAs4+2IL/O+fJsbt+znSigujoZG8bVcIAUM/I/E5K3MA== +caniuse-lite@^1.0.30001154: + version "1.0.30001168" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001168.tgz#6fcd098c139d003b9bd484cbb9ca26cb89907f9a" + integrity sha512-P2zmX7swIXKu+GMMR01TWa4csIKELTNnZKc+f1CjebmZJQtTAEXmpQSoKVJVVcvPGAA0TEYTOUp3VehavZSFPQ== + capitalize@1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/capitalize/-/capitalize-1.0.0.tgz#dc802c580aee101929020d2ca14b4ca8a0ae44be" @@ -6263,6 +6296,11 @@ ejs@^2.6.1: version "2.7.4" resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.7.4.tgz#48661287573dcc53e366c7a1ae52c3a120eec9ba" +electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.585: + version "1.3.629" + resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.629.tgz#a08d13b64d90e3c77ec5b9bffa3efbc5b4a00969" + integrity sha512-iSPPJtPvHrMAvYOt+9cdbDmTasPqwnwz4lkP8Dn200gDNUBQOLQ96xUsWXBwXslAo5XxdoXAoQQ3RAy4uao9IQ== + electron-to-chromium@^1.3.591: version "1.3.596" resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.596.tgz#c7ed98512c7ff36ddcbfed9e54e6355335c35257" @@ -11152,6 +11190,11 @@ node-notifier@^5.4.2: shellwords "^0.1.1" which "^1.3.0" +node-releases@^1.1.65: + version "1.1.67" + resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.67.tgz#28ebfcccd0baa6aad8e8d4d8fe4cbc49ae239c12" + integrity sha512-V5QF9noGFl3EymEwUYzO+3NTDpGfQB4ve6Qfnzf3UNydMhjQRVPR1DZTuvWiLzaFJYw2fmDwAfnRNEVb64hSIg== + node-releases@^1.1.66: version "1.1.66" resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.66.tgz#609bd0dc069381015cd982300bae51ab4f1b1814"