Skip to content

Commit f2c8e83

Browse files
pomberpomber
authored
Merge pull request #159 from code-hike/export-internal
Export internals
2 parents 8b2228f + 6e65f8e commit f2c8e83

File tree

13 files changed

+435
-0
lines changed

13 files changed

+435
-0
lines changed

‎.github/workflows/bundle_analysis.yml

+127
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
name: 'Bundle Analysis'
2+
3+
on:
4+
pull_request:
5+
push:
6+
branches:
7+
- next # change this if your default branch is named differently
8+
workflow_dispatch:
9+
10+
defaults:
11+
run:
12+
# change this if your nextjs app does not live at the root of the repo
13+
working-directory: .
14+
15+
jobs:
16+
analyze:
17+
runs-on: ubuntu-latest
18+
steps:
19+
- uses: actions/checkout@v2
20+
21+
- name: Use Node.js 14.x
22+
uses: actions/setup-node@v1
23+
with:
24+
node-version: 14.x
25+
26+
- name: Cache node modules
27+
uses: actions/cache@v1
28+
with:
29+
path: node_modules
30+
key: yarn-deps-${{ hashFiles('yarn.lock') }}
31+
restore-keys: |
32+
yarn-deps-${{ hashFiles('yarn.lock') }}
33+
34+
- name: Build library
35+
run: |
36+
yarn install --frozen-lockfile 2>&1 | grep -v '^[warning|info]'
37+
yarn build:lib
38+
39+
- name: Restore next build
40+
uses: actions/cache@v2
41+
id: restore-build-cache
42+
env:
43+
cache-name: cache-next-build
44+
with:
45+
# if you use a custom build directory, replace all instances of `.next` in this file with your build directory
46+
# ex: if your app builds to `dist`, replace `.next` with `dist`
47+
path: ./examples/bundle-test/.next/cache
48+
# change this if you prefer a more strict cache
49+
key: ${{ runner.os }}-build-${{ env.cache-name }}
50+
51+
- name: Build next.js app
52+
working-directory: ./examples/bundle-test
53+
# change this if your site requires a custom build command
54+
run: yarn build
55+
56+
# Here's the first place where next-bundle-analysis' own script is used
57+
# This step pulls the raw bundle stats for the current bundle
58+
- name: Analyze bundle
59+
working-directory: ./examples/bundle-test
60+
run: npx -p nextjs-bundle-analysis report
61+
62+
- name: Upload bundle
63+
uses: actions/upload-artifact@v2
64+
with:
65+
name: bundle
66+
path: ./examples/bundle-test/.next/analyze/__bundle_analysis.json
67+
68+
- name: Download base branch bundle stats
69+
uses: dawidd6/action-download-artifact@v2
70+
if: success() && github.event.number
71+
with:
72+
workflow: nextjs_bundle_analysis.yml
73+
branch: ${{ github.event.pull_request.base.ref }}
74+
path: ./examples/bundle-test/.next/analyze/base
75+
76+
# And here's the second place - this runs after we have both the current and
77+
# base branch bundle stats, and will compare them to determine what changed.
78+
# There are two configurable arguments that come from package.json:
79+
#
80+
# - budget: optional, set a budget (bytes) against which size changes are measured
81+
# it's set to 350kb here by default, as informed by the following piece:
82+
# https://infrequently.org/2021/03/the-performance-inequality-gap/
83+
#
84+
# - red-status-percentage: sets the percent size increase where you get a red
85+
# status indicator, defaults to 20%
86+
#
87+
# Either of these arguments can be changed or removed by editing the `nextBundleAnalysis`
88+
# entry in your package.json file.
89+
- name: Compare with base branch bundle
90+
working-directory: ./examples/bundle-test
91+
if: success() && github.event.number
92+
run: ls -laR .next/analyze/base && npx -p nextjs-bundle-analysis compare
93+
94+
- name: Get comment body
95+
working-directory: ./examples/bundle-test
96+
id: get-comment-body
97+
if: success() && github.event.number
98+
run: |
99+
body=$(cat .next/analyze/__bundle_analysis_comment.txt)
100+
body="${body//'%'/'%25'}"
101+
body="${body//$'\n'/'%0A'}"
102+
body="${body//$'\r'/'%0D'}"
103+
echo ::set-output name=body::$body
104+
105+
- name: Find Comment
106+
uses: peter-evans/find-comment@v1
107+
if: success() && github.event.number
108+
id: fc
109+
with:
110+
issue-number: ${{ github.event.number }}
111+
body-includes: '<!-- __NEXTJS_BUNDLE -->'
112+
113+
- name: Create Comment
114+
uses: peter-evans/[email protected]
115+
if: success() && github.event.number && steps.fc.outputs.comment-id == 0
116+
with:
117+
issue-number: ${{ github.event.number }}
118+
body: ${{ steps.get-comment-body.outputs.body }}
119+
120+
- name: Update Comment
121+
uses: peter-evans/[email protected]
122+
if: success() && github.event.number && steps.fc.outputs.comment-id != 0
123+
with:
124+
issue-number: ${{ github.event.number }}
125+
body: ${{ steps.get-comment-body.outputs.body }}
126+
comment-id: ${{ steps.fc.outputs.comment-id }}
127+
edit-mode: replace

‎examples/bundle-test/.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
.next

‎examples/bundle-test/next.config.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
const { remarkCodeHike } = require("@code-hike/mdx")
2+
const theme = require("shiki/themes/nord.json")
3+
4+
const withMDX = require("@next/mdx")({
5+
extension: /\.mdx?$/,
6+
options: {
7+
remarkPlugins: [[remarkCodeHike, { theme }]],
8+
},
9+
})
10+
11+
module.exports = withMDX({
12+
pageExtensions: ["ts", "tsx", "js", "jsx", "md", "mdx"],
13+
})

‎examples/bundle-test/package.json

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "bundle-test",
3+
"private": true,
4+
"version": "0.0.0",
5+
"scripts": {
6+
"build": "next build"
7+
},
8+
"dependencies": {
9+
"@code-hike/mdx": "^0.3.0",
10+
"@mdx-js/loader": "^2.0.0",
11+
"@next/mdx": "^12.1.0",
12+
"next": "^12.1.0",
13+
"react": "^17.0.2",
14+
"react-dom": "^17.0.2"
15+
},
16+
"nextBundleAnalysis": {
17+
"budget": 358400,
18+
"budgetPercentIncreaseRed": 20,
19+
"showDetails": true
20+
}
21+
}

‎examples/bundle-test/pages/_app.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import "@code-hike/mdx/styles"
2+
3+
function MyApp({ Component, pageProps }) {
4+
return <Component {...pageProps} />
5+
}
6+
7+
export default MyApp

‎examples/bundle-test/pages/js-page.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export default function Page() {
2+
return (
3+
<div>
4+
<h1>Hello</h1>
5+
Lorem ipsum dolor sit amet.
6+
</div>
7+
)
8+
}

‎examples/bundle-test/pages/just-code.mdx

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Hello world
2+
3+
```js focus=2,4[10:13]
4+
function lorem(ipsum, dolor = 1) {
5+
const sit = ipsum == null ? 0 : ipsum.sit
6+
dolor = sit - amet(dolor)
7+
return sit ? consectetur(ipsum) : []
8+
}
9+
```

‎examples/bundle-test/pages/no-ch-mdx.mdx

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Hello
2+
3+
Lorem ipsum dolor sit amet.

‎examples/bundle-test/pages/scrollycoding-preview.mdx

+154
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
# Scrollycoding with preview
2+
3+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
4+
5+
Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
6+
7+
<CH.Scrollycoding preset="https://codesandbox.io/s/w5wfe">
8+
9+
## Step 1
10+
11+
Lorem ipsum dolor sit amet, consectetur adipiscing something about points, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
12+
13+
> Nova in illis at dabat legi harundine non, ova miratur? _Quid in_ sole aer
14+
> ad diffusa illis voluisti fidensque coniugiale laniata curam. Aras rivus
15+
> eripuit, qua fistula haec partus; serpens, negat.
16+
17+
Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget.
18+
19+
Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus.
20+
21+
```jsx src/App.js
22+
import { motion } from "framer-motion"
23+
24+
export default function App() {
25+
const bg = "hsl(20, 100%, 50%)"
26+
return (
27+
<motion.div
28+
className="swatch"
29+
animate={{ backgroundColor: bg }}
30+
transition={{ duration: 1 }}
31+
/>
32+
)
33+
}
34+
```
35+
36+
---
37+
38+
## Step 2
39+
40+
Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in.
41+
42+
Praesent elementum facilisis leo vel fringilla est ullamcorper eget.
43+
44+
Id aliquet risus feugiat in ante metus dictum at tempor. Sed blandit libero volutpat sed cras. Sed odio morbi quis commodo odio aenean sed adipiscing. Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in. Nibh cras pulvinar mattis nunc sed. Luctus accumsan tortor posuere ac ut consequat semper viverra. Fringilla ut morbi tincidunt augue interdum velit euismod.
45+
46+
Morbi quis commodo.
47+
48+
```jsx src/App.js focus=1,4,6:10
49+
import { motion } from "framer-motion"
50+
51+
export default function App() {
52+
const bg = "hsl(110, 100%, 50%)"
53+
return (
54+
<motion.div
55+
className="swatch"
56+
animate={{ backgroundColor: bg }}
57+
transition={{ duration: 1 }}
58+
/>
59+
)
60+
}
61+
```
62+
63+
---
64+
65+
## Step 3
66+
67+
Id aliquet risus feugiat in ante metus dictum at tempor. Sed blandit libero volutpat sed cras. Sed odio morbi quis commodo odio aenean sed adipiscing. Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu.
68+
69+
- Nisi lacus sed viverra tellus in
70+
- Nibh cras pulvinar mattis nunc sed
71+
- Luctus accumsan tortor posuere ac
72+
73+
Ut consequat semper viverra. Fringilla ut morbi tincidunt augue interdum velit euismod.
74+
75+
```jsx src/App.js focus=1,4,6:10
76+
import { motion } from "framer-motion"
77+
78+
export default function App() {
79+
const bg = "hsl(200, 100%, 50%)"
80+
return (
81+
<motion.div
82+
className="swatch"
83+
animate={{ backgroundColor: bg }}
84+
transition={{ duration: 1 }}
85+
/>
86+
)
87+
}
88+
```
89+
90+
---
91+
92+
## Step 4
93+
94+
Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in. Venenatis cras sed felis eget velit. Consectetur libero id faucibus nisl tincidunt.
95+
96+
Sed blandit libero volutpat sed cras.
97+
98+
- Nisi lacus sed viverra tellus in
99+
- Nibh cras pulvinar mattis nunc sed
100+
101+
Gravida in fermentum et sollicitudin ac orci phasellus egestas tellus. Volutpat consequat mauris nunc congue nisi vitae.
102+
103+
```jsx src/App.js focus=1,4,6:10
104+
import { motion } from "framer-motion"
105+
106+
export default function App() {
107+
const bg = "hsl(290, 100%, 50%)"
108+
return (
109+
<motion.div
110+
className="swatch"
111+
animate={{ backgroundColor: bg }}
112+
transition={{ duration: 1 }}
113+
/>
114+
)
115+
}
116+
```
117+
118+
---
119+
120+
## Step 5
121+
122+
Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in.
123+
124+
Praesent elementum facilisis leo vel fringilla est ullamcorper eget.
125+
126+
Id aliquet risus feugiat in ante metus dictum at tempor. Sed blandit libero volutpat sed cras. Sed odio morbi quis commodo odio aenean sed adipiscing. Velit euismod in pellentesque massa placerat.
127+
128+
Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in. Nibh cras pulvinar mattis nunc sed. Luctus accumsan tortor posuere ac ut consequat semper viverra.
129+
130+
- Fringilla ut morbi tincidunt augue interdum velit euismod.
131+
- Luctus accumsan tortor posuere ac ut consequat semper viverra.
132+
133+
Morbi quis commodo.
134+
135+
```jsx src/App.js focus=1,4,6:10
136+
import { motion } from "framer-motion"
137+
138+
export default function App() {
139+
const bg = "hsl(10, 100%, 50%)"
140+
return (
141+
<motion.div
142+
className="swatch"
143+
animate={{ backgroundColor: bg }}
144+
transition={{ duration: 1 }}
145+
/>
146+
)
147+
}
148+
```
149+
150+
</CH.Scrollycoding>
151+
152+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
153+
154+
Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.

0 commit comments

Comments
 (0)