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

Add [with-storybook-typescript] example #14398

Merged
merged 7 commits into from
Jun 25, 2020
Merged

Add [with-storybook-typescript] example #14398

merged 7 commits into from
Jun 25, 2020

Conversation

zxzl
Copy link
Contributor

@zxzl zxzl commented Jun 21, 2020 •
edited
Loading

Basically this PR adds Next.js 's default TypeScript setting and integrates @storybook/preset-typescript into original with-storybook example.

However, I thought it may save time for someone who are planning to use storybook with next.js and TypeScript :)

@ijjk ijjk added the examples Issue was opened via the examples template. label Jun 21, 2020
@ijjk
Copy link
Member

ijjk commented Jun 21, 2020

Stats from current PR

Default Server Mode (Decrease detected ✓)
General
vercel/next.js canary zxzl/next.js with-storybook-typescript Change
buildDuration 12.9s 13.1s ⚠️ +205ms
nodeModulesSize 67 MB 67 MB ✓
Page Load Tests Overall decrease ⚠️
vercel/next.js canary zxzl/next.js with-storybook-typescript Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.306 2.229 -0.08
/ avg req/sec 1084.36 1121.55 ⚠️ +37.19
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.423 1.472 ⚠️ +0.05
/error-in-render avg req/sec 1756.73 1698.15 -58.58
Client Bundles (main, webpack, commons)
vercel/next.js canary zxzl/next.js with-storybook-typescript Change
main-HASH.js gzip 6.51 kB 6.51 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
19b7e98f51cc..75a9.js gzip 10.5 kB 10.5 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 56.9 kB 56.9 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary zxzl/next.js with-storybook-typescript Change
main-HASH.module.js gzip 5.6 kB 5.6 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
19b7e98f51cc..dule.js gzip 6.92 kB 6.92 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 52.4 kB 52.4 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary zxzl/next.js with-storybook-typescript Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB ✓
Overall change 26.3 kB 26.3 kB ✓
Client Build Manifests
vercel/next.js canary zxzl/next.js with-storybook-typescript Change
_buildManifest.js gzip 267 B 267 B ✓
_buildManife..dule.js gzip 272 B 272 B ✓
Overall change 539 B 539 B ✓
Rendered Page Sizes
vercel/next.js canary zxzl/next.js with-storybook-typescript Change
index.html gzip 955 B 955 B ✓
link.html gzip 961 B 961 B ✓
withRouter.html gzip 948 B 948 B ✓
Overall change 2.86 kB 2.86 kB ✓
Serverless Mode
General
vercel/next.js canary zxzl/next.js with-storybook-typescript Change
buildDuration 13.9s 13.9s ⚠️ +17ms
nodeModulesSize 67 MB 67 MB ✓
Client Bundles (main, webpack, commons)
vercel/next.js canary zxzl/next.js with-storybook-typescript Change
main-HASH.js gzip 6.51 kB 6.51 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
19b7e98f51cc..75a9.js gzip 10.5 kB 10.5 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 56.9 kB 56.9 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary zxzl/next.js with-storybook-typescript Change
main-HASH.module.js gzip 5.6 kB 5.6 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
19b7e98f51cc..dule.js gzip 6.92 kB 6.92 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 52.4 kB 52.4 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary zxzl/next.js with-storybook-typescript Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB ✓
Overall change 26.3 kB 26.3 kB ✓
Client Build Manifests
vercel/next.js canary zxzl/next.js with-storybook-typescript Change
_buildManifest.js gzip 267 B 267 B ✓
_buildManife..dule.js gzip 272 B 272 B ✓
Overall change 539 B 539 B ✓
Serverless bundles
vercel/next.js canary zxzl/next.js with-storybook-typescript Change
_error.js 875 kB 875 kB ✓
404.html 4.17 kB 4.17 kB ✓
hooks.html 3.79 kB 3.79 kB ✓
index.js 875 kB 875 kB ✓
link.js 914 kB 914 kB ✓
routerDirect.js 906 kB 906 kB ✓
withRouter.js 906 kB 906 kB ✓
Overall change 4.48 MB 4.48 MB ✓
Commit: a2a3566

@ijjk
Copy link
Member

ijjk commented Jun 21, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General
vercel/next.js canary zxzl/next.js with-storybook-typescript Change
buildDuration 10.9s 11s ⚠️ +24ms
nodeModulesSize 67 MB 67 MB ✓
Page Load Tests Overall increase ✓
vercel/next.js canary zxzl/next.js with-storybook-typescript Change
/ failed reqs 0 0 ✓
/ total time (seconds) 1.867 1.791 -0.08
/ avg req/sec 1338.83 1395.67 ⚠️ +56.84
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.17 1.132 -0.04
/error-in-render avg req/sec 2136.37 2209.19 ⚠️ +72.82
Client Bundles (main, webpack, commons)
vercel/next.js canary zxzl/next.js with-storybook-typescript Change
main-HASH.js gzip 6.51 kB 6.51 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
19b7e98f51cc..75a9.js gzip 10.5 kB 10.5 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 56.9 kB 56.9 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary zxzl/next.js with-storybook-typescript Change
main-HASH.module.js gzip 5.6 kB 5.6 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
19b7e98f51cc..dule.js gzip 6.92 kB 6.92 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 52.4 kB 52.4 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary zxzl/next.js with-storybook-typescript Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB ✓
Overall change 26.3 kB 26.3 kB ✓
Client Build Manifests
vercel/next.js canary zxzl/next.js with-storybook-typescript Change
_buildManifest.js gzip 267 B 267 B ✓
_buildManife..dule.js gzip 272 B 272 B ✓
Overall change 539 B 539 B ✓
Rendered Page Sizes
vercel/next.js canary zxzl/next.js with-storybook-typescript Change
index.html gzip 955 B 955 B ✓
link.html gzip 961 B 961 B ✓
withRouter.html gzip 948 B 948 B ✓
Overall change 2.86 kB 2.86 kB ✓
Serverless Mode
General
vercel/next.js canary zxzl/next.js with-storybook-typescript Change
buildDuration 11.6s 11.6s ⚠️ +30ms
nodeModulesSize 67 MB 67 MB ✓
Client Bundles (main, webpack, commons)
vercel/next.js canary zxzl/next.js with-storybook-typescript Change
main-HASH.js gzip 6.51 kB 6.51 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
19b7e98f51cc..75a9.js gzip 10.5 kB 10.5 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 56.9 kB 56.9 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary zxzl/next.js with-storybook-typescript Change
main-HASH.module.js gzip 5.6 kB 5.6 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
19b7e98f51cc..dule.js gzip 6.92 kB 6.92 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 52.4 kB 52.4 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary zxzl/next.js with-storybook-typescript Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB ✓
Overall change 26.3 kB 26.3 kB ✓
Client Build Manifests
vercel/next.js canary zxzl/next.js with-storybook-typescript Change
_buildManifest.js gzip 267 B 267 B ✓
_buildManife..dule.js gzip 272 B 272 B ✓
Overall change 539 B 539 B ✓
Serverless bundles
vercel/next.js canary zxzl/next.js with-storybook-typescript Change
_error.js 875 kB 875 kB ✓
404.html 4.17 kB 4.17 kB ✓
hooks.html 3.79 kB 3.79 kB ✓
index.js 875 kB 875 kB ✓
link.js 914 kB 914 kB ✓
routerDirect.js 906 kB 906 kB ✓
withRouter.js 906 kB 906 kB ✓
Overall change 4.48 MB 4.48 MB ✓
Commit: ed5af0e

@lfades lfades self-assigned this Jun 24, 2020
lfades
lfades reviewed Jun 24, 2020
View reviewed changes
examples/with-storybook-typescript/package.json
Comment on lines +27 to +28
"fork-ts-checker-webpack-plugin": "5.0.4",
"ts-loader": "7.0.5",
Copy link
Member

Choose a reason for hiding this comment

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

Why are these 2 packages added?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It was required by @storybook/preset-typescript (https://github.com/storybookjs/presets/tree/master/packages/preset-typescript#installation)

lfades
lfades approved these changes Jun 25, 2020
View reviewed changes
Copy link
Member

@lfades lfades left a comment

Choose a reason for hiding this comment

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

Everything looks good, thank you!

@ijjk
Copy link
Member

ijjk commented Jun 25, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General
vercel/next.js canary zxzl/next.js with-storybook-typescript Change
buildDuration 12.3s 12.5s ⚠️ +175ms
nodeModulesSize 67.2 MB 67.2 MB ✓
Page Load Tests Overall increase ✓
vercel/next.js canary zxzl/next.js with-storybook-typescript Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.035 2.069 ⚠️ +0.03
/ avg req/sec 1228.77 1208.41 -20.36
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.386 1.225 -0.16
/error-in-render avg req/sec 1803.82 2041.2 ⚠️ +237.38
Client Bundles (main, webpack, commons)
vercel/next.js canary zxzl/next.js with-storybook-typescript Change
main-HASH.js gzip 6.5 kB 6.5 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
19b7e98f51cc..834a.js gzip 10.7 kB 10.7 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 57.1 kB 57.1 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary zxzl/next.js with-storybook-typescript Change
main-HASH.module.js gzip 5.59 kB 5.59 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
19b7e98f51cc..dule.js gzip 7.07 kB 7.07 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 52.5 kB 52.5 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary zxzl/next.js with-storybook-typescript Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB ✓
Overall change 26.3 kB 26.3 kB ✓
Client Build Manifests
vercel/next.js canary zxzl/next.js with-storybook-typescript Change
_buildManifest.js gzip 267 B 267 B ✓
_buildManife..dule.js gzip 272 B 272 B ✓
Overall change 539 B 539 B ✓
Rendered Page Sizes
vercel/next.js canary zxzl/next.js with-storybook-typescript Change
index.html gzip 956 B 956 B ✓
link.html gzip 960 B 960 B ✓
withRouter.html gzip 947 B 947 B ✓
Overall change 2.86 kB 2.86 kB ✓
Serverless Mode
General
vercel/next.js canary zxzl/next.js with-storybook-typescript Change
buildDuration 13.4s 14.2s ⚠️ +816ms
nodeModulesSize 67.2 MB 67.2 MB ✓
Client Bundles (main, webpack, commons)
vercel/next.js canary zxzl/next.js with-storybook-typescript Change
main-HASH.js gzip 6.5 kB 6.5 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
19b7e98f51cc..834a.js gzip 10.7 kB 10.7 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 57.1 kB 57.1 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary zxzl/next.js with-storybook-typescript Change
main-HASH.module.js gzip 5.59 kB 5.59 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
19b7e98f51cc..dule.js gzip 7.07 kB 7.07 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 52.5 kB 52.5 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary zxzl/next.js with-storybook-typescript Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB ✓
Overall change 26.3 kB 26.3 kB ✓
Client Build Manifests
vercel/next.js canary zxzl/next.js with-storybook-typescript Change
_buildManifest.js gzip 267 B 267 B ✓
_buildManife..dule.js gzip 272 B 272 B ✓
Overall change 539 B 539 B ✓
Serverless bundles
vercel/next.js canary zxzl/next.js with-storybook-typescript Change
_error.js 875 kB 875 kB ✓
404.html 4.17 kB 4.17 kB ✓
hooks.html 3.79 kB 3.79 kB ✓
index.js 876 kB 876 kB ✓
link.js 916 kB 916 kB ✓
routerDirect.js 908 kB 908 kB ✓
withRouter.js 908 kB 908 kB ✓
Overall change 4.49 MB 4.49 MB ✓
Commit: 9680cd5

@kodiakhq kodiakhq bot merged commit c8dbc7e into vercel:canary Jun 25, 2020
rokinsky pushed a commit to rokinsky/next.js that referenced this pull request Jul 11, 2020
@zxzl @rokinsky
Add [with-storybook-typescript] example (vercel#14398)
09beffd 
Basically this PR adds Next.js 's default TypeScript setting and integrates [@storybook/preset-typescript](https://github.com/storybookjs/presets/tree/master/packages/preset-typescript) into original [with-storybook](https://github.com/vercel/next.js/tree/canary/examples/with-storybook) example. 

However, I thought it may save time for someone who are planning to use storybook with next.js and TypeScript :)
@vercel vercel locked as resolved and limited conversation to collaborators Jan 30, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@lfades lfades lfades approved these changes

@chibicode chibicode Awaiting requested review from chibicode

@ijjk ijjk Awaiting requested review from ijjk

@Timer Timer Awaiting requested review from Timer

@timneutkens timneutkens Awaiting requested review from timneutkens

Assignees

@lfades lfades

Labels
examples Issue was opened via the examples template.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@zxzl @ijjk @lfades