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/PR related to examples 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

leerob commented Jun 7, 2021 •

edited

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

Bug

Feature

Documentation / Examples

leerob commented Jun 7, 2021 • edited

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

leerob commented Jun 7, 2021 •

edited