github(workflows): add package size checks, add auto demo deploy #1048
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| name: Push | ||
|
|
||
| on: | ||
| push: | ||
| branches: [master] | ||
|
|
||
| jobs: | ||
| build: | ||
| runs-on: ubuntu-latest | ||
| steps: | ||
| - uses: actions/checkout@v2 # checkout visx + this commit | ||
| - uses: actions/setup-node@v1 | ||
| with: | ||
| node-version: '12' | ||
|
|
||
| - name: Get yarn cache directory path | ||
| id: yarn-cache-dir-path | ||
| run: echo "::set-output name=dir::$(yarn cache dir)" | ||
| - uses: actions/cache@v1 | ||
| id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`) | ||
| with: | ||
| path: ${{ steps.yarn-cache-dir-path.outputs.dir }} | ||
| key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} | ||
| restore-keys: | | ||
| ${{ runner.os }}-yarn- | ||
|
|
||
| - name: 📡 Install dependencies | ||
| run: yarn install --frozen-lockfile --ignore-engines | ||
|
|
||
| - name: 🛠 Build packages | ||
| run: yarn build | ||
|
|
||
| - name: 📐 Commit package sizes | ||
| run: | | ||
| yarn build:sizes | ||
| git config user.name github-actions | ||
| git config user.email github-actions@github.com | ||
| git add . | ||
| git commit -m "build(${GITHUB_SHA}): auto-commit package sizes" | ||
| git push | ||
|
|
||
| - name: 🚀 Build and deploy gallery | ||
| # below we | ||
| # - setup git credentials provided via actions/checkout@v2 | ||
| # - initialize gh-pages-branch as an orphan branch so we don't build history | ||
| # - checkout the current commit and create gh-pages-root-dir/ as a new worktree | ||
| # - outside that directory HEAD is detached at $GITHUB_SHA | ||
| # - within that directory we are on the gh-pages-branch we just initialized | ||
| # *worktree initialization should be in a root dir, otherwise the worktree inherits nested directories | ||
| # - build the static next.js site and copy the output into gh-pages-root-dir/ | ||
| # - we can't output directly into gh-pages-root-dir/ because next wipes the folder including .git | ||
| # - commit the demo site within gh-pages-root-dir/ onto the gh-pages-branch | ||
| # - push gh-pages-branch to visx as gh-pages. we overwrite history every time so it must be forced | ||
| run: | | ||
| git config user.name github-actions | ||
| git config user.email github-actions@github.com | ||
| git checkout --orphan gh-pages-branch | ||
| git reset --hard | ||
| touch .nojekyll | ||
| git add .nojekyll | ||
| git commit -m "bot(${GITHUB_SHA}): initialize gh-pages branch" | ||
| git checkout "$GITHUB_SHA" | ||
| git worktree add gh-pages-root-dir gh-pages-branch | ||
| cd ./packages/visx-demo/ | ||
| yarn build | ||
| mv -v out/* ../../gh-pages-root-dir/ | ||
| cd ../../gh-pages-root-dir/ | ||
| git add . | ||
| git commit -m "bot(${GITHUB_SHA}): build gh-pages" | ||
| git push -f "https://$GITHUB_ACTOR:$GITHUB_TOKEN@github.com/$GITHUB_REPOSITORY.git" HEAD:gh-pages | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,5 @@ | ||
| export default function userPrefersReducedMotion() { | ||
| const prefersReducedMotionQuery = | ||
| typeof window === 'undefined' ? false : window.matchMedia('(prefers-reduced-motion: reduce)'); | ||
| return !prefersReducedMotionQuery || !!prefersReducedMotionQuery.matches; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,124 @@ | ||
| import fs from 'fs'; | ||
| import size from 'filesize'; | ||
| import chalk from 'chalk'; | ||
| import fetch from 'node-fetch'; | ||
| import upsertPullRequestComment from './upsertPullRequestComment'; | ||
| import { PACKAGE_SIZES_FILENAME } from './computeBuildSizes'; | ||
|
|
||
| type StatMap = { | ||
| [pkg: string]: { | ||
| [dir: string]: number; | ||
| }; | ||
| }; | ||
|
|
||
| function calculateDiff(prev: number, next: number): number { | ||
| return (next - prev) / prev; | ||
| } | ||
|
|
||
| function formatDiff(diff: number): string { | ||
| const sum = diff * 100; | ||
| const percent = sum.toFixed(1); | ||
|
|
||
| // Smaller | ||
| if (percent.startsWith('-')) { | ||
| return `${sum < -10 ? ':small_red_triangle_down: ' : ''}${percent}%`; | ||
| } | ||
|
|
||
| // Larger | ||
| return `${sum > 10 ? ':small_red_triangle: ' : ''}+${percent}%`; | ||
| } | ||
|
|
||
| async function compareBuildSizes() { | ||
| const nextSizes: StatMap = JSON.parse(fs.readFileSync(PACKAGE_SIZES_FILENAME, 'utf8')); | ||
| let prevSizes: StatMap = {}; | ||
| let sameBuild = false; | ||
|
|
||
| try { | ||
| const masterFileSizesRequest = await fetch( | ||
| `https://raw.githubusercontent.com/airbnb/visx/master/${PACKAGE_SIZES_FILENAME}`, | ||
| ); | ||
|
|
||
| prevSizes = await masterFileSizesRequest.json(); | ||
| } catch (error) { | ||
| console.log(`Could not fetch file ${PACKAGE_SIZES_FILENAME} from master. Aborting.`); | ||
| console.log(error.message); | ||
|
|
||
| prevSizes = nextSizes; | ||
| sameBuild = true; | ||
| } | ||
|
|
||
| function getPrevSize(name: string, type: string) { | ||
| return (prevSizes[name] && prevSizes[name][type]) || 0; | ||
| } | ||
|
|
||
| const output: string[] = [ | ||
| '### Size Changes', | ||
| '| Package | Diff | ESM | Prev ESM | CJS | Prev CJS |', | ||
| '| --- | ---: | ---: | ---: | ---: | ---: |', | ||
| ]; | ||
| const rows: string[] = []; | ||
|
|
||
| Object.entries(nextSizes).forEach(([pkgName, stats]) => { | ||
| const prevEsm = getPrevSize(pkgName, 'esm'); | ||
| const prevLib = getPrevSize(pkgName, 'lib'); | ||
| const diff = calculateDiff(prevEsm, stats.esm); | ||
|
|
||
| if (!isFinite(diff) || diff === 0 || diff === 0.0) { | ||
| return; | ||
| } | ||
|
|
||
| const row = [ | ||
| pkgName, | ||
| formatDiff(diff), | ||
| size(stats.esm), | ||
| prevEsm === 0 ? 'N/A' : size(prevEsm), | ||
| size(stats.lib), | ||
| prevLib === 0 ? 'N/A' : size(prevLib), | ||
| ]; | ||
|
|
||
| rows.push(`| ${row.join(' | ')} |`); | ||
| }); | ||
|
|
||
| // Don't post anything if no changes | ||
| if (rows.length === 0) { | ||
| return; | ||
| } | ||
|
|
||
| // Sort rows before joining to output | ||
| rows.sort(); | ||
|
|
||
| output.push(...rows); | ||
| output.push('> Compared to master. File sizes are unminified and ungzipped.'); | ||
|
|
||
| // Show dumps for easier debugging | ||
| if (!sameBuild) { | ||
| output.push(`<details> | ||
| <summary>View raw build stats</summary> | ||
|
|
||
| #### Previous (master) | ||
| \`\`\`json | ||
| ${JSON.stringify(prevSizes, null, 2)} | ||
| \`\`\` | ||
|
|
||
| #### Current | ||
| \`\`\`json | ||
| ${JSON.stringify(nextSizes, null, 2)} | ||
| \`\`\` | ||
| </details>`); | ||
| } | ||
|
|
||
| // Leave a comment on the PR | ||
| const breakdown = output.join('\n'); | ||
|
|
||
| try { | ||
| await upsertPullRequestComment('### Size Changes', breakdown); | ||
| } catch (error) { | ||
| console.log('Could not post size stats', breakdown); | ||
| console.error(error); | ||
| } | ||
| } | ||
|
|
||
| compareBuildSizes().catch(error => { | ||
| console.error(chalk.red(error.message)); | ||
| process.exitCode = 1; | ||
| }); |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I usually use this package to handle deployment to github pages.
Would it simplify the script here?
https://www.npmjs.com/package/gh-pages
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Currently we deploy to
gh-pageswith a simple script in@visx/demothat is similar to these commands. the complexity comes from the creation of a new git worktree without history in the action environment.tbh I spent so much time on this already I'd rather just leave it. I tried a
gh-pagesaction someone made and it worked, but it requires special handling of credentials which then causes the package size commit to fail. so would have to duplicate theyarn && yarn buildsteps multiple times which isn't ideal.