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

Update with-styletron example, add debug mode and useStyletron #7290

Merged
merged 5 commits into from
May 14, 2019
Merged

Update with-styletron example, add debug mode and useStyletron #7290

merged 5 commits into from
May 14, 2019
+60 −47

Conversation

tajo
Copy link
Contributor

@tajo tajo commented May 9, 2019

Note, the latest stable Next.js v8.1 breaks React.createContext and this whole example (even before this PR). It's fixed here. So if you are testing this PR, you need to use the latest canary release of Next.js.

yarn dev always works
yarn build && yarn start doesn't with 8.1 (8.0 or canary is fine)

Updated

  • debugging mode in dev mode (maps classNames to the JS source through source maps)
  • useStyletroon hook

@tajo tajo requested a review from lfades as a code owner May 9, 2019 18:06
@github-actions
Copy link
Contributor

github-actions bot commented May 9, 2019

Stats from current PR

Click to expand stats
zeit/next.js canary tajo/next.js with-stylestron-update Change
Build Duration 13.8s 13.9s ⚠️ +104ms
node_modules Size 40 MB 40 MB ✓
Total Bundle (main, webpack, commons) Size 209 kB 209 kB ✓
Total Bundle (main, webpack, commons) gzip Size 68.3 kB 68.3 kB ✓
Client _app Size 2.54 kB 2.54 kB ✓
Client _app gzip Size 1.05 kB 1.05 kB ✓
Client _error Size 8.19 kB 8.19 kB ✓
Client _error gzip Size 3.12 kB 3.12 kB ✓
Client pages/index Size 288 B 288 B ✓
Client pages/index gzip Size 222 B 222 B ✓
Client pages/link Size 4.83 kB 4.83 kB ✓
Client pages/link gzip Size 2.11 kB 2.11 kB ✓
Client pages/routerDirect Size 411 B 411 B ✓
Client pages/routerDirect gzip Size 296 B 296 B ✓
Client pages/withRouter Size 393 B 393 B ✓
Client pages/withRouter gzip Size 280 B 280 B ✓
Client main Size 23.3 kB 23.3 kB ✓
Client main gzip Size 7.63 kB 7.63 kB ✓
Client commons Size 183 kB 183 kB ✓
Client commons gzip Size 59.4 kB 59.4 kB ✓
Client webpack Size 1.49 kB 1.49 kB ✓
Client webpack gzip Size 769 B 769 B ✓
Base Rendered Size 1.34 kB 1.34 kB ✓
Build Dir Size 801 kB 801 kB ✓
Click to expand serverless stats
zeit/next.js canary tajo/next.js with-stylestron-update Change
Build Duration 15s 14.7s -276ms
node_modules Size 40 MB 40 MB ✓
Total Bundle (main, webpack, commons) Size 209 kB 209 kB ✓
Total Bundle (main, webpack, commons) gzip Size 68.3 kB 68.3 kB ⚠️ +1 B
Client _app Size 2.54 kB 2.54 kB ✓
Client _app gzip Size 1.05 kB 1.05 kB ✓
Client _error Size 8.19 kB 8.19 kB ✓
Client _error gzip Size 3.11 kB 3.12 kB ⚠️ +1 B
Client pages/index Size 288 B 288 B ✓
Client pages/index gzip Size 222 B 222 B ✓
Client pages/link Size 4.83 kB 4.83 kB ✓
Client pages/link gzip Size 2.11 kB 2.11 kB ✓
Client pages/routerDirect Size 411 B 411 B ✓
Client pages/routerDirect gzip Size 296 B 296 B ✓
Client pages/withRouter Size 393 B 393 B ✓
Client pages/withRouter gzip Size 280 B 280 B ✓
Client main Size 23.3 kB 23.3 kB ✓
Client main gzip Size 7.63 kB 7.63 kB ⚠️ +1 B
Client commons Size 183 kB 183 kB ✓
Client commons gzip Size 59.4 kB 59.4 kB ✓
Client webpack Size 1.49 kB 1.49 kB ✓
Client webpack gzip Size 769 B 769 B ✓
Serverless pages/link Size 342 kB 342 kB ✓
Serverless pages/link gzip Size 88.7 kB 88.7 kB ⚠️ +2 B
Serverless pages/index Size 333 kB 333 kB ✓
Serverless pages/index gzip Size 86.3 kB 86.3 kB ✓
Serverless pages/_error Size 334 kB 334 kB ✓
Serverless pages/_error gzip Size 86.1 kB 86.1 kB ✓
Serverless pages/routerDirect Size 333 kB 333 kB ✓
Serverless pages/routerDirect gzip Size 86.3 kB 86.3 kB -1 B
Serverless pages/withRouter Size 333 kB 333 kB ✓
Serverless pages/withRouter gzip Size 86.4 kB 86.4 kB ⚠️ +2 B
Build Dir Size 2.37 MB 2.37 MB ✓

@github-actions
Copy link
Contributor

github-actions bot commented May 9, 2019

Stats from current PR

Click to expand stats
zeit/next.js canary tajo/next.js with-stylestron-update Change
Build Duration 14.6s 14.1s -447ms
node_modules Size 40 MB 40 MB ✓
Total Bundle (main, webpack, commons) Size 209 kB 209 kB ✓
Total Bundle (main, webpack, commons) gzip Size 68.3 kB 68.3 kB ✓
Client _app Size 2.54 kB 2.54 kB ✓
Client _app gzip Size 1.05 kB 1.05 kB ✓
Client _error Size 8.19 kB 8.19 kB ✓
Client _error gzip Size 3.12 kB 3.12 kB ✓
Client pages/index Size 288 B 288 B ✓
Client pages/index gzip Size 222 B 222 B ✓
Client pages/link Size 4.83 kB 4.83 kB ✓
Client pages/link gzip Size 2.11 kB 2.11 kB ✓
Client pages/routerDirect Size 411 B 411 B ✓
Client pages/routerDirect gzip Size 296 B 296 B ✓
Client pages/withRouter Size 393 B 393 B ✓
Client pages/withRouter gzip Size 280 B 280 B ✓
Client main Size 23.3 kB 23.3 kB ✓
Client main gzip Size 7.63 kB 7.63 kB ✓
Client commons Size 183 kB 183 kB ✓
Client commons gzip Size 59.4 kB 59.4 kB ✓
Client webpack Size 1.49 kB 1.49 kB ✓
Client webpack gzip Size 769 B 769 B ✓
Base Rendered Size 1.34 kB 1.34 kB ✓
Build Dir Size 801 kB 801 kB ✓
Click to expand serverless stats
zeit/next.js canary tajo/next.js with-stylestron-update Change
Build Duration 15.5s 15.5s ⚠️ +13ms
node_modules Size 40 MB 40 MB ✓
Total Bundle (main, webpack, commons) Size 209 kB 209 kB ✓
Total Bundle (main, webpack, commons) gzip Size 68.3 kB 68.3 kB ✓
Client _app Size 2.54 kB 2.54 kB ✓
Client _app gzip Size 1.05 kB 1.05 kB ✓
Client _error Size 8.19 kB 8.19 kB ✓
Client _error gzip Size 3.12 kB 3.12 kB ✓
Client pages/index Size 288 B 288 B ✓
Client pages/index gzip Size 222 B 222 B ✓
Client pages/link Size 4.83 kB 4.83 kB ✓
Client pages/link gzip Size 2.11 kB 2.11 kB ✓
Client pages/routerDirect Size 411 B 411 B ✓
Client pages/routerDirect gzip Size 296 B 296 B ✓
Client pages/withRouter Size 393 B 393 B ✓
Client pages/withRouter gzip Size 280 B 280 B ✓
Client main Size 23.3 kB 23.3 kB ✓
Client main gzip Size 7.63 kB 7.63 kB ✓
Client commons Size 183 kB 183 kB ✓
Client commons gzip Size 59.4 kB 59.4 kB ✓
Client webpack Size 1.49 kB 1.49 kB ✓
Client webpack gzip Size 769 B 769 B ✓
Serverless pages/link Size 342 kB 342 kB ✓
Serverless pages/link gzip Size 88.7 kB 88.7 kB -1 B
Serverless pages/index Size 333 kB 333 kB ✓
Serverless pages/index gzip Size 86.3 kB 86.3 kB -1 B
Serverless pages/_error Size 334 kB 334 kB ✓
Serverless pages/_error gzip Size 86.1 kB 86.1 kB -1 B
Serverless pages/routerDirect Size 333 kB 333 kB ✓
Serverless pages/routerDirect gzip Size 86.3 kB 86.3 kB -4 B
Serverless pages/withRouter Size 333 kB 333 kB ✓
Serverless pages/withRouter gzip Size 86.4 kB 86.4 kB -1 B
Build Dir Size 2.37 MB 2.37 MB ✓

@github-actions
Copy link
Contributor

github-actions bot commented May 9, 2019

Stats from current PR

Click to expand stats
zeit/next.js canary tajo/next.js with-stylestron-update Change
Build Duration 14.8s 14.3s -553ms
node_modules Size 40 MB 40 MB ✓
Total Bundle (main, webpack, commons) Size 209 kB 209 kB ✓
Total Bundle (main, webpack, commons) gzip Size 68.3 kB 68.3 kB ✓
Client _app Size 2.54 kB 2.54 kB ✓
Client _app gzip Size 1.05 kB 1.05 kB ✓
Client _error Size 8.19 kB 8.19 kB ✓
Client _error gzip Size 3.12 kB 3.12 kB ✓
Client pages/index Size 288 B 288 B ✓
Client pages/index gzip Size 222 B 222 B ✓
Client pages/link Size 4.83 kB 4.83 kB ✓
Client pages/link gzip Size 2.11 kB 2.11 kB ✓
Client pages/routerDirect Size 411 B 411 B ✓
Client pages/routerDirect gzip Size 296 B 296 B ✓
Client pages/withRouter Size 393 B 393 B ✓
Client pages/withRouter gzip Size 280 B 280 B ✓
Client main Size 23.3 kB 23.3 kB ✓
Client main gzip Size 7.63 kB 7.63 kB ✓
Client commons Size 183 kB 183 kB ✓
Client commons gzip Size 59.4 kB 59.4 kB ✓
Client webpack Size 1.49 kB 1.49 kB ✓
Client webpack gzip Size 769 B 769 B ✓
Base Rendered Size 1.34 kB 1.34 kB ✓
Build Dir Size 801 kB 801 kB ✓
Click to expand serverless stats
zeit/next.js canary tajo/next.js with-stylestron-update Change
Build Duration 15.5s 15.2s -238ms
node_modules Size 40 MB 40 MB ✓
Total Bundle (main, webpack, commons) Size 209 kB 209 kB ✓
Total Bundle (main, webpack, commons) gzip Size 68.3 kB 68.3 kB ✓
Client _app Size 2.54 kB 2.54 kB ✓
Client _app gzip Size 1.05 kB 1.05 kB ✓
Client _error Size 8.19 kB 8.19 kB ✓
Client _error gzip Size 3.12 kB 3.12 kB ✓
Client pages/index Size 288 B 288 B ✓
Client pages/index gzip Size 222 B 222 B ✓
Client pages/link Size 4.83 kB 4.83 kB ✓
Client pages/link gzip Size 2.11 kB 2.11 kB ✓
Client pages/routerDirect Size 411 B 411 B ✓
Client pages/routerDirect gzip Size 296 B 296 B ✓
Client pages/withRouter Size 393 B 393 B ✓
Client pages/withRouter gzip Size 280 B 280 B ✓
Client main Size 23.3 kB 23.3 kB ✓
Client main gzip Size 7.63 kB 7.63 kB ✓
Client commons Size 183 kB 183 kB ✓
Client commons gzip Size 59.4 kB 59.4 kB ✓
Client webpack Size 1.49 kB 1.49 kB ✓
Client webpack gzip Size 769 B 769 B ✓
Serverless pages/link Size 342 kB 342 kB ✓
Serverless pages/link gzip Size 88.7 kB 88.7 kB ⚠️ +1 B
Serverless pages/index Size 333 kB 333 kB ✓
Serverless pages/index gzip Size 86.3 kB 86.3 kB ⚠️ +1 B
Serverless pages/_error Size 334 kB 334 kB ✓
Serverless pages/_error gzip Size 86.1 kB 86.1 kB ✓
Serverless pages/routerDirect Size 333 kB 333 kB ✓
Serverless pages/routerDirect gzip Size 86.3 kB 86.3 kB ⚠️ +4 B
Serverless pages/withRouter Size 333 kB 333 kB ✓
Serverless pages/withRouter gzip Size 86.4 kB 86.4 kB ✓
Build Dir Size 2.37 MB 2.37 MB ✓

@github-actions
Copy link
Contributor

Stats from current PR

Click to expand stats
zeit/next.js canary tajo/next.js with-stylestron-update Change
Build Duration 16.7s 16.2s -483ms
node_modules Size 40 MB 40 MB ✓
Total Bundle (main, webpack, commons) Size 209 kB 209 kB ✓
Total Bundle (main, webpack, commons) gzip Size 68.3 kB 68.3 kB ✓
Client _app Size 2.54 kB 2.54 kB ✓
Client _app gzip Size 1.05 kB 1.05 kB ✓
Client _error Size 8.19 kB 8.19 kB ✓
Client _error gzip Size 3.12 kB 3.12 kB ✓
Client pages/index Size 288 B 288 B ✓
Client pages/index gzip Size 222 B 222 B ✓
Client pages/link Size 4.83 kB 4.83 kB ✓
Client pages/link gzip Size 2.11 kB 2.11 kB ✓
Client pages/routerDirect Size 411 B 411 B ✓
Client pages/routerDirect gzip Size 296 B 296 B ✓
Client pages/withRouter Size 393 B 393 B ✓
Client pages/withRouter gzip Size 280 B 280 B ✓
Client main Size 23.3 kB 23.3 kB ✓
Client main gzip Size 7.63 kB 7.63 kB ✓
Client commons Size 183 kB 183 kB ✓
Client commons gzip Size 59.4 kB 59.4 kB ✓
Client webpack Size 1.49 kB 1.49 kB ✓
Client webpack gzip Size 769 B 769 B ✓
Base Rendered Size 1.34 kB 1.34 kB ✓
Build Dir Size 801 kB 801 kB ✓
Click to expand serverless stats
zeit/next.js canary tajo/next.js with-stylestron-update Change
Build Duration 17.2s 17.1s -31ms
node_modules Size 40 MB 40 MB ✓
Total Bundle (main, webpack, commons) Size 209 kB 209 kB ✓
Total Bundle (main, webpack, commons) gzip Size 68.3 kB 68.3 kB -1 B
Client _app Size 2.54 kB 2.54 kB ✓
Client _app gzip Size 1.05 kB 1.05 kB ✓
Client _error Size 8.19 kB 8.19 kB ✓
Client _error gzip Size 3.12 kB 3.11 kB -1 B
Client pages/index Size 288 B 288 B ✓
Client pages/index gzip Size 222 B 222 B ✓
Client pages/link Size 4.83 kB 4.83 kB ✓
Client pages/link gzip Size 2.11 kB 2.11 kB ✓
Client pages/routerDirect Size 411 B 411 B ✓
Client pages/routerDirect gzip Size 296 B 296 B ✓
Client pages/withRouter Size 393 B 393 B ✓
Client pages/withRouter gzip Size 280 B 280 B ✓
Client main Size 23.3 kB 23.3 kB ✓
Client main gzip Size 7.63 kB 7.63 kB -1 B
Client commons Size 183 kB 183 kB ✓
Client commons gzip Size 59.4 kB 59.4 kB ✓
Client webpack Size 1.49 kB 1.49 kB ✓
Client webpack gzip Size 769 B 769 B ✓
Serverless pages/link Size 342 kB 342 kB ✓
Serverless pages/link gzip Size 88.7 kB 88.7 kB -2 B
Serverless pages/index Size 333 kB 333 kB ✓
Serverless pages/index gzip Size 86.3 kB 86.3 kB ⚠️ +1 B
Serverless pages/_error Size 334 kB 334 kB ✓
Serverless pages/_error gzip Size 86.1 kB 86.1 kB ✓
Serverless pages/routerDirect Size 333 kB 333 kB ✓
Serverless pages/routerDirect gzip Size 86.3 kB 86.3 kB ⚠️ +3 B
Serverless pages/withRouter Size 333 kB 333 kB ✓
Serverless pages/withRouter gzip Size 86.4 kB 86.4 kB -4 B
Build Dir Size 2.37 MB 2.37 MB ✓

@tajo tajo mentioned this pull request May 10, 2019
Merged
@github-actions
Copy link
Contributor

Stats from current PR

Click to expand stats
zeit/next.js canary tajo/next.js with-stylestron-update Change
Build Duration 15.9s 15.1s -808ms
node_modules Size 40 MB 40 MB ✓
Total Bundle (main, webpack, commons) Size 209 kB 209 kB ✓
Total Bundle (main, webpack, commons) gzip Size 68.3 kB 68.3 kB ✓
Client _app Size 2.54 kB 2.54 kB ✓
Client _app gzip Size 1.05 kB 1.05 kB ✓
Client _error Size 8.19 kB 8.19 kB ✓
Client _error gzip Size 3.12 kB 3.12 kB ✓
Client pages/index Size 288 B 288 B ✓
Client pages/index gzip Size 222 B 222 B ✓
Client pages/link Size 4.83 kB 4.83 kB ✓
Client pages/link gzip Size 2.11 kB 2.11 kB ✓
Client pages/routerDirect Size 411 B 411 B ✓
Client pages/routerDirect gzip Size 296 B 296 B ✓
Client pages/withRouter Size 393 B 393 B ✓
Client pages/withRouter gzip Size 280 B 280 B ✓
Client main Size 23.3 kB 23.3 kB ✓
Client main gzip Size 7.63 kB 7.63 kB ✓
Client commons Size 183 kB 183 kB ✓
Client commons gzip Size 59.4 kB 59.4 kB ✓
Client webpack Size 1.49 kB 1.49 kB ✓
Client webpack gzip Size 769 B 769 B ✓
Base Rendered Size 1.34 kB 1.34 kB ✓
Build Dir Size 801 kB 801 kB ✓
Click to expand serverless stats
zeit/next.js canary tajo/next.js with-stylestron-update Change
Build Duration 16.2s 16.5s ⚠️ +299ms
node_modules Size 40 MB 40 MB ✓
Total Bundle (main, webpack, commons) Size 209 kB 209 kB ✓
Total Bundle (main, webpack, commons) gzip Size 68.3 kB 68.3 kB ✓
Client _app Size 2.54 kB 2.54 kB ✓
Client _app gzip Size 1.05 kB 1.05 kB ✓
Client _error Size 8.19 kB 8.19 kB ✓
Client _error gzip Size 3.12 kB 3.12 kB ✓
Client pages/index Size 288 B 288 B ✓
Client pages/index gzip Size 222 B 222 B ✓
Client pages/link Size 4.83 kB 4.83 kB ✓
Client pages/link gzip Size 2.11 kB 2.11 kB ✓
Client pages/routerDirect Size 411 B 411 B ✓
Client pages/routerDirect gzip Size 296 B 296 B ✓
Client pages/withRouter Size 393 B 393 B ✓
Client pages/withRouter gzip Size 280 B 280 B ✓
Client main Size 23.3 kB 23.3 kB ✓
Client main gzip Size 7.63 kB 7.63 kB ✓
Client commons Size 183 kB 183 kB ✓
Client commons gzip Size 59.4 kB 59.4 kB ✓
Client webpack Size 1.49 kB 1.49 kB ✓
Client webpack gzip Size 769 B 769 B ✓
Serverless pages/link Size 342 kB 342 kB ✓
Serverless pages/link gzip Size 88.7 kB 88.7 kB ⚠️ +2 B
Serverless pages/index Size 333 kB 333 kB ✓
Serverless pages/index gzip Size 86.3 kB 86.3 kB ⚠️ +3 B
Serverless pages/_error Size 334 kB 334 kB ✓
Serverless pages/_error gzip Size 86.1 kB 86.1 kB ⚠️ +3 B
Serverless pages/routerDirect Size 333 kB 333 kB ✓
Serverless pages/routerDirect gzip Size 86.3 kB 86.3 kB ⚠️ +3 B
Serverless pages/withRouter Size 333 kB 333 kB ✓
Serverless pages/withRouter gzip Size 86.4 kB 86.4 kB ⚠️ +2 B
Build Dir Size 2.37 MB 2.37 MB ✓

@lfades
Copy link
Member

lfades commented May 14, 2019

Hi @tajo, thank you so much for the update 💯

@lfades lfades merged commit 693ba44 into vercel:canary May 14, 2019
@lock lock bot locked as resolved and limited conversation to collaborators May 20, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@lfades lfades lfades approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
2 participants
@tajo @lfades