Coder Social home page Coder Social logo

ember-asset-size-action's Introduction

Ember Asset Size

This action will calculate the diff in asset size for your main JS files and CSS files for each PR. It will then comment with the change in asset size on each PR.

Example usage

Create a file named .github/workflows/ember-assets.yml in your repo and add the following:

name: Ember Asset Sizes

on: [pull_request]

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
      with:
        fetch-depth: 0
    - uses: mainmatter/ember-asset-size-action@v3
      with:
        repo-token: "${{ secrets.GITHUB_TOKEN }}"

By default ember-asset-size-action will update the existing comment when the PR has been updated in any way.

If you want to disable this behaviour and have the action create a new comment every time, you can pass the input update-comments with a value false.

- uses: mainmatter/ember-asset-size-action@v3
  with:
    repo-token: "${{ secrets.GITHUB_TOKEN }}"
    update-comments: "no" # apparently booleans don't work as expected

Note: as this action requires access to the "base" commit of a PR branch we need to fetch the whole repo by adding fetch-depth: 0 to the actions/checkout configuration.

If you would like to follow discussion on this problem you can find the issue on github here: actions/checkout#93

Running Github Action on demand with labels

If running this Github Action on every push is not suitable, you can configure it to run only when a certain label is attached to pull request, for example when you add the ember-asset-size label:

on:
  pull_request:
    types: [opened, synchronize, labeled] # necessary to watch for when the label is added

jobs:
  build:
    if: ${{ contains(github.event.pull_request.labels.*.name, 'ember-asset-size') }}

    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
      with:
        fetch-depth: 0
    - uses: mainmatter/ember-asset-size-action@v3
      with:
        repo-token: "${{ secrets.GITHUB_TOKEN }}"

This technique isn't anything special to ember-asset-size-tracking, it is a feature of GitHub actions, and you can read more about it in their official documentation

Configuring your private npm package registry token

If your app depends on private npm packages, you will need to make sure that you have the correct NPM_TOKEN available to your repo so that the npm install or yarn install step will succeed.

More details on how to configure your npm registry token.

The following example allows you to not commit the .npmrc to your repo, and instead creates it just before it is needed.

name: Ember Asset Sizes

on: [pull_request]

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
      with:
        fetch-depth: 0
    - run: echo //registry.npmjs.org/:_authToken=$\{NPM_TOKEN\} >> .npmrc
    - uses: mainmatter/ember-asset-size-action@v3
      env:
        NPM_TOKEN: "${{ secrets.YOUR_REPO_NPM_TOKEN }}"
      with:
        repo-token: "${{ secrets.GITHUB_TOKEN }}"

Displaying total asset sizes differences

If you'd like the PR comment to display the diff between the total asset sizes (JS & CSS) for the PR's build against the base branch, you can use the show-total-size-diff option:

- uses: simplabs/ember-asset-size-action@v3
  with:
    repo-token: "${{ secrets.GITHUB_TOKEN }}"
    show-total-size-diff: "yes"

License

Ember Simple Auth is developed by and © Mainmatter GmbH and contributors. It is released under the MIT License.

ember-asset-size-action's People

Contributors

mansona avatar renovate[bot] avatar btecu avatar techn1x avatar yanglinz avatar dependabot[bot] avatar mydea avatar marcoow avatar nullvoxpopuli avatar raido avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.