-
Notifications
You must be signed in to change notification settings - Fork 715
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
github(workflows): add package size checks, add auto demo deploy (#1048)
* internal(deps): add deps for ts-node and filesize computation * internal(node): add tsconfig for node * build: add computeBuildSizes script * build: add compareBuildSizes, upsertPullRequestComment scripts * build: update computeBuildSizes output file * build: add deploy-demo script * github(workflows/ci): add Package sizes + Deploy gallery steps * github(workflows/ci): add pull_request checks to happo, package sizes * deps(dev): add @types/node-fetch * deps: update yarn.lock * type(scripts/upsertPullRequestComment): fix comment type * github(workflows): separate CI into push + pull_request * deps(dev): add @octokit/rest * fix(workflows/pull_request): add needed variables for upsertPullRequestComment * commit to kick workflow * github(workflows): fix package size report job * github(workflow): fix GITHUB_REPOSITORY/ACTOR variable syntax * fix(scripts/upsertPullRequestComment): better types * fix(scripts/compareBuildSizes): log errors * debug(scripts//upsertPullRequestComment): add more debug logs * debug(scripts/upsertPullRequestComment): add more debug logs * fix(/workflows/pull_request): remove debug logging * github(workflows): update branches for testing * fix(workflows/push) * fix(scripts/upsertPullRequestComment): fix bot user login check * deps(demo, annotation, tooltip): react-measure@2.0.3 * fix(demo/axis,pattern,xychart): fix window check for ssr * fix(/workflows/push): rewrite gallery deploy job to fix credentials * fix(workflows/push/gallery): try to fix credentials * fix(github/workflows/push): try https for gallery push * fix(workflows/push): tweak https syntax * fix(workflows/push): try github-pages-deploy-action * fix(workflows/push): don't use working-directory with uses * fix(workflows/push): try changing persist-credentials mid-workflow * fix(workflows/push): more changes * fix(workflows/push): try worktree approach * fix(workflows/push): build gallery on master * fix(workflows/push): add out/ contents pre-commit * fix(workflows/push): fix credentials * fix(workflows/push): try not master * fix(workflows/push): try not master take 2 * fix(workflows/push): we have a winner * fix(workflows/push,pull_request): final final * fix(workflows/push): match 📡 emoji across workflows 🙄 * type(scripts/upsertPullRequestComment): fix types
- Loading branch information
1 parent
a65c635
commit 3d8a245
Showing
14 changed files
with
564 additions
and
30 deletions.
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
3 changes: 2 additions & 1 deletion
3
packages/visx-demo/src/sandboxes/visx-xychart/userPrefersReducedMotion.ts
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 = window?.matchMedia('(prefers-reduced-motion: reduce)'); | ||
| 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.