docs: add 'Open in StackBlitz' buttons to various examples #25853

d3lm · 2021-06-07T12:49:59Z

This PR adds a Preview section and a Open in StackBlitz button to various examples. I have tested all examples and omitted the ones that require third party API keys, or didn't work. Some examples don't work locally either.

Here's an example:

Bug

Related issues linked using fixes #number
Integration tests added

Feature

Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
Related issues linked using fixes #number
Integration tests added
Documentation added
Examples updated
Telemetry added. In case of a feature if it's used or not.

Documentation / Examples

Make sure the linting passes

examples/analyze-bundles/package.json

leerob · 2021-06-07T13:10:53Z

Would you mind adding this list of broken examples to a new GH issue? 🙏 With instruction that after an example is fixed, to add these docs to it's README as well.

d3lm · 2021-06-07T13:26:31Z

Yep totally, I ll extract them and file a new issue with the examples that don't work.

ijjk · 2021-06-08T20:23:52Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General

	vercel/next.js canary	d3lm/next.js feat/examples/open-in-stackblitz	Change
buildDuration	12.9s	12.8s	-105ms
buildDurationCached	3.2s	3.2s	-11ms
nodeModulesSize	46.5 MB	46.5 MB	✓

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	d3lm/next.js feat/examples/open-in-stackblitz	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.541	2.545	0
/ avg req/sec	983.68	982.14	⚠️ -1.54
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.311	1.325	⚠️ +0.01
/error-in-render avg req/sec	1907.54	1886.56	⚠️ -20.98

Client Bundles (main, webpack, commons)

	vercel/next.js canary	d3lm/next.js feat/examples/open-in-stackblitz	Change
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	20.2 kB	20.2 kB	✓
webpack-HASH.js gzip	804 B	804 B	✓
Overall change	60.3 kB	60.3 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	d3lm/next.js feat/examples/open-in-stackblitz	Change
polyfills-HASH.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages

	vercel/next.js canary	d3lm/next.js feat/examples/open-in-stackblitz	Change
_app-HASH.js gzip	801 B	801 B	✓
_error-HASH.js gzip	3.07 kB	3.07 kB	✓
amp-HASH.js gzip	527 B	527 B	✓
css-HASH.js gzip	334 B	334 B	✓
hooks-HASH.js gzip	890 B	890 B	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	1.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	333 B	333 B	✓
withRouter-HASH.js gzip	330 B	330 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	8.31 kB	8.31 kB	✓

Client Build Manifests

	vercel/next.js canary	d3lm/next.js feat/examples/open-in-stackblitz	Change
_buildManifest.js gzip	392 B	392 B	✓
Overall change	392 B	392 B	✓

Rendered Page Sizes

	vercel/next.js canary	d3lm/next.js feat/examples/open-in-stackblitz	Change
index.html gzip	573 B	573 B	✓
link.html gzip	580 B	580 B	✓
withRouter.html gzip	567 B	567 B	✓
Overall change	1.72 kB	1.72 kB	✓

Serverless Mode (Decrease detected ✓)

General

	vercel/next.js canary	d3lm/next.js feat/examples/open-in-stackblitz	Change
buildDuration	14.6s	14.7s	⚠️ +129ms
buildDurationCached	4.3s	4.3s	-8ms
nodeModulesSize	46.5 MB	46.5 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	d3lm/next.js feat/examples/open-in-stackblitz	Change
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	20.2 kB	20.2 kB	✓
webpack-HASH.js gzip	804 B	804 B	✓
Overall change	60.3 kB	60.3 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	d3lm/next.js feat/examples/open-in-stackblitz	Change
polyfills-HASH.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages

	vercel/next.js canary	d3lm/next.js feat/examples/open-in-stackblitz	Change
_app-HASH.js gzip	801 B	801 B	✓
_error-HASH.js gzip	3.07 kB	3.07 kB	✓
amp-HASH.js gzip	527 B	527 B	✓
css-HASH.js gzip	334 B	334 B	✓
hooks-HASH.js gzip	890 B	890 B	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	1.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	333 B	333 B	✓
withRouter-HASH.js gzip	330 B	330 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	8.31 kB	8.31 kB	✓

Client Build Manifests

	vercel/next.js canary	d3lm/next.js feat/examples/open-in-stackblitz	Change
_buildManifest.js gzip	392 B	392 B	✓
Overall change	392 B	392 B	✓

Serverless bundles Overall decrease ✓

	vercel/next.js canary	d3lm/next.js feat/examples/open-in-stackblitz	Change
_error.js	16.9 kB	16.9 kB	✓
404.html	2.44 kB	2.44 kB	✓
500.html	2.43 kB	2.43 kB	✓
amp.amp.html	10.8 kB	10.8 kB	✓
amp.html	1.63 kB	1.63 kB	✓
css.html	1.81 kB	1.81 kB	✓
hooks.html	1.69 kB	1.69 kB	✓
index.js	17.2 kB	17.2 kB	✓
link.js	17.4 kB	17.4 kB	-2 B
routerDirect.js	17.4 kB	17.4 kB	✓
withRouter.js	17.4 kB	17.4 kB	✓
Overall change	107 kB	107 kB	-2 B

Webpack 4 Mode (Decrease detected ✓)

General

	vercel/next.js canary	d3lm/next.js feat/examples/open-in-stackblitz	Change
buildDuration	11.5s	11.3s	-203ms
buildDurationCached	4.7s	4.7s	⚠️ +6ms
nodeModulesSize	46.5 MB	46.5 MB	✓

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	d3lm/next.js feat/examples/open-in-stackblitz	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.604	2.595	-0.01
/ avg req/sec	960.09	963.25	+3.16
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.293	1.314	⚠️ +0.02
/error-in-render avg req/sec	1933.19	1902.58	⚠️ -30.61

Client Bundles (main, webpack, commons)

	vercel/next.js canary	d3lm/next.js feat/examples/open-in-stackblitz	Change
677f882d2ed8..HASH.js gzip	13.4 kB	13.4 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-HASH.js gzip	7.99 kB	7.99 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
Overall change	61.1 kB	61.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	d3lm/next.js feat/examples/open-in-stackblitz	Change
polyfills-HASH.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

	vercel/next.js canary	d3lm/next.js feat/examples/open-in-stackblitz	Change
_app-HASH.js gzip	1.07 kB	1.07 kB	✓
_error-HASH.js gzip	3.74 kB	3.74 kB	✓
amp-HASH.js gzip	536 B	536 B	✓
css-HASH.js gzip	339 B	339 B	✓
hooks-HASH.js gzip	887 B	887 B	✓
index-HASH.js gzip	227 B	227 B	✓
link-HASH.js gzip	1.63 kB	1.63 kB	✓
routerDirect..HASH.js gzip	303 B	303 B	✓
withRouter-HASH.js gzip	302 B	302 B	✓
e025d2764813..52f.css gzip	125 B	125 B	✓
Overall change	9.17 kB	9.17 kB	✓

Client Build Manifests

	vercel/next.js canary	d3lm/next.js feat/examples/open-in-stackblitz	Change
_buildManifest.js gzip	420 B	420 B	✓
Overall change	420 B	420 B	✓

Rendered Page Sizes

	vercel/next.js canary	d3lm/next.js feat/examples/open-in-stackblitz	Change
index.html gzip	625 B	625 B	✓
link.html gzip	632 B	632 B	✓
withRouter.html gzip	620 B	620 B	✓
Overall change	1.88 kB	1.88 kB	✓

Commit: 6217c33

) This PR adds a `Preview` section and a `Open in StackBlitz` button to various examples. I have tested all examples and omitted the ones that require third party API keys, or didn't work. Some examples don't work locally either. Here's an example: ![image](https://user-images.githubusercontent.com/12571019/121027783-88971280-c7a7-11eb-851a-0ad30cf74b42.png) ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [x] Examples updated - [ ] Telemetry added. In case of a feature if it's used or not. ## Documentation / Examples - [x] Make sure the linting passes

docs: add 'Open in StackBlitz' buttons to various examples

934ae1a

d3lm requested review from divmain, ijjk, leerob, lfades, shuding and timneutkens as code owners June 7, 2021 12:50

ijjk added the examples Issue was opened via the examples template. label Jun 7, 2021

d3lm commented Jun 7, 2021

View reviewed changes

examples/analyze-bundles/package.json Show resolved Hide resolved

leerob approved these changes Jun 7, 2021

View reviewed changes

Merge branch 'canary' into feat/examples/open-in-stackblitz

89eb5e0

This comment has been minimized.

Sign in to view

d3lm mentioned this pull request Jun 7, 2021

Some examples don't work #25854

Closed

20 tasks

ijjk approved these changes Jun 8, 2021

View reviewed changes

Merge branch 'canary' into feat/examples/open-in-stackblitz

6217c33

kodiakhq bot merged commit d2caaea into vercel:canary Jun 8, 2021

d3lm deleted the feat/examples/open-in-stackblitz branch June 9, 2021 06:30

oliviertassinari mentioned this pull request Aug 13, 2021

[examples] Improve integration examples with Next.js mui/material-ui#27331

Merged

vercel locked as resolved and limited conversation to collaborators Jan 28, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs: add 'Open in StackBlitz' buttons to various examples #25853

docs: add 'Open in StackBlitz' buttons to various examples #25853

d3lm commented Jun 7, 2021 •

edited

Loading

leerob commented Jun 7, 2021 •

edited

Loading

This comment has been minimized.

d3lm commented Jun 7, 2021

This comment has been minimized.

ijjk commented Jun 8, 2021

docs: add 'Open in StackBlitz' buttons to various examples #25853

docs: add 'Open in StackBlitz' buttons to various examples #25853

Conversation

d3lm commented Jun 7, 2021 • edited Loading

Bug

Feature

Documentation / Examples

leerob commented Jun 7, 2021 • edited Loading

This comment has been minimized.

d3lm commented Jun 7, 2021

This comment has been minimized.

ijjk commented Jun 8, 2021

Stats from current PR

d3lm commented Jun 7, 2021 •

edited

Loading

leerob commented Jun 7, 2021 •

edited

Loading