CINXE.COM

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta charset="utf-8"> <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"> <meta content="True" name="HandheldFriendly"> <meta content="480" name="MobileOptimized"> <meta content="width=480, initial-scale=0.6" name="viewport"> <meta content="constant integration culture code" name="keywords"> <meta content="Orta Therox" name="author"> <meta content="summary" name="twitter:card"> <meta content="@orta" name="twitter:creator"> <meta content="Danger JS" name="twitter:title"> <meta content="Apply cultural rules during your CI process." name="twitter:description"> <meta content="http://danger.systems/js/index.html" name="twitter:url"> <meta content="/images/square-ffd55d21.png" property="og:image"> <meta content="http://danger.systems/js/index.html" property="og:url"> <title>Danger JS</title> <link href="/stylesheets/style-js-19bad8b5.css" rel="stylesheet"> <link href="/stylesheets/highlight-js-1d44ae6e.css" rel="stylesheet"> </head> <body class="js js_index"> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script><style type="text/css">section { padding: 20px; margin: 0 auto; max-width: 1040px; } .svg { width: 100% } .code_chunk { max-width: 100%; overflow-y: scroll; } .messaging code, .examples .code_chunk { display:block; border-left: 2px #eee solid; padding-left: 12px; margin-top: 8px; } .examples .code_chunk { margin-bottom: 20px; font-size: 14px; } .home-header { display:flex; justify-content: space-between; margin-top: 20px; } .home-header img { position: relative; top: 6px; margin-right: 4px; } p > code { background-color: #eee; } div.third_party_readme { padding-left: 20px; border-left: 2px #ddd solid; }</style> <div class="homepage"> <section><article class="home-header"><code><a href='/js/guides'>Guides</a>, <a href='/js/usage'>Usage</a>, <a href='/js/tutorials'>Tutorials</a>, <a href='/js/reference'>Reference</a> & <a href="https://www.typescriptlang.org/play/index.html#code/PTAEBUAsEsGdTqAhqADgGyQTwOYCcB7AVwDsATUAd0gFM8bQtjQBjJE0GgDwwPtAAutUABF2OOqABSAZQBQIUAEEACgElk5ULEhJ+LAmQawkAWww1YAOlAB5EiwZCG9CumglLoAEY10BSlAAIjJxOiCFMHYKINQkISDkfhwCT0FaDiYiVnZtAT0BQQJOHn9+SjxoAQ8cSNA8InQvADM+UTC8Zugm6zk5aHM+QoBvUFCSCTwAGlBmpG6Z0z0AazIAkhnKPQ3QU0sTCVAAX1nCU2DxyYiB1CHQACpkeDihU4Jz2PjICLrVDXpmnQaA4aAAuUCQAQCVCwUEgS50KywLCwAQ0UywYAAK0xAKBIKskNM6D6BhIqLQeFAAF4xh0rDgqpAiN4rKg8H1FAAxDwUYiFaDNbTvBhxPDVFiNPSzbpeXQANwYLF0ExoFA86UQKgASqA5GSKWtJXsSPlqqkaXTVXgGVUrF0mgBZeLKgAUQXu92A9yspjIQQAlPrUhTlWF-DhLQibYyBPbZc6BG6ggBhAASSgAcgBxACiABlbNnff6gwbCnEWMskBIpLALbTo7a4w6aInk5XqxIrDjUoHg+TCv4q62o-TY-GnS7IO6sNsrMPlkEZp8qzWaABaRc9+skft1bWNSycsBQdjLWYEdDLeCtKlLZY1MYEFisFUSWD9IWuo1EE1m6BUisNUqjVANQGGORQGg3Z9nXd0zxIG9QA3UAAHUGFBWgCnBYgqQAbV-f89GgdhYAAXVdSFoThYBKHoqwKlA5wjWsPgcGAAMAEJ+yOE9QG1dFeTQGgCAsIpQCIVBQjRUBF1bT9BVAV1O3XOsgNMQxBWgNVQAAMj00AuPk2VfS0rowIgqCYK2PASAQmB4B1XZzJ0ihVO7Xsdm8IhChIAhCmcOSX2WVteP4tCMnSIEkgYJBUFQDcw1VeBogQQoiHgfzChQZyljwZZdKQeABEqeVSPQGZuFQGgWAEOpnH4ARil8UB0yzPNC2zN8wl6ctBDKirnNpdkrG8QwsCsDwWHQIgjFgd1SugcqkHQfslNdLjkokCNgLIUCKAMoylpW9AdXAyDoLmbp3UzYp2pzAsi2QMgjDIKxwrqO7QGcxBmuKWAlnQdAJNsvB2BytA9BrcHUEgUA2gEShigIIVYD-fKsC-ZTRvGshJqaCZXmpEnQAABgu6zrvQd0VCaYq4te5AxksFhKlQc0OGaxg8J+7UPqDPjFCUdAthRThySIco4tgWBoBwDh6z2VInGKXLtRmJSqlS7GVJtYq5YVmgGBJ2kSEadBKeg-q9iEQxLVG6oBCaKaHFm+b3TQtQVEDUAAH4qG2UBwWp6zbcgQxafp2AZcNxWRRViS9jwQ4hC1DXND5DnAJIVb0CwBA3bm0VRPE6gAYjxoKHocqaEoAW5D4upc0lprdEhzBfBB3R4F8YFtBoeqNqbWNmVZOB0ZoBckC76xCZwYnSYpqzoNs+ygigdPny8bKISQRVNALzu-GscKgA" target="_blank">Playground</a> Looking for <a href="/ruby"><img src="/images/rubygems_logo-c4316f34.svg" width="20" height="20"></a> or <a href="/swift"><img src="/images/sw_logo-9d1fcd3b.svg" width="20" height="20"></a>?</code><code style="text-align:right;">a project from <a target="_blank" href="http://orta.io">orta therox</a>, and <a target="_blank" href="https://github.com/orgs/danger/people">the Danger org contributors</a>.</code></article></section><section><article><center><img src="/images/js/danger-logo-hero@2x-676f4223.png" id="header" width="600" height="191" alt="Danger logo hero@2x"></center></article><div class="wide-row-thin-col"> <article style="padding:10px;"><h1 class="vibrant">What is Danger JS?</h1> Danger runs during your CI process, and gives teams the chance to automate common code review chores. This provides another logical step in your build, through this Danger can help lint your rote tasks in daily code review. You can use Danger to codify your teams norms. Leaving humans to think about harder problems. This happens by Danger leaving messages inside your PRs based on rules that you create with JavaScript or TypeScript. Over time, as rules are adhered to, the message is amended to reflect the current state of the code review. </article><article style="padding:10px;"><a href="/images/dangerjs-screenshot-2e2a9281.png"><img src="/images/dangerjs-screenshot-2e2a9281.png" style="max-width:100%; margin-top: 70px;"></a></article> </div></section><section><article style="padding:20px 0 80px;"><?xml version="1.0" encoding="UTF-8"?> <svg width="100%" height="118px" viewbox="0 0 879 118" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">  <title>after</title> <desc>Created with Sketch.</desc> <defs> <style xmlns="http://www.w3.org/2000/svg" type="text/css"> @import url('/fonts/horta-webfont-bfd8d12c.woff2'); text { font-family: "Horta"; } </style> </defs> <g id="-" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="About" transform="translate(-62.000000, -1203.000000)"> <g id="after" transform="translate(62.000000, 1203.000000)"> <path d="M100,22.8670474 L128.662115,22.8670474 L125.78451,13.8260438 C125.677481,13.4897313 125.8709,13.1326758 126.216554,13.0285272 C126.398141,12.9738201 126.595215,12.9985409 126.756596,13.0962894 L146.690977,27.6173513 C146.998159,27.8034011 147.092176,28.1965115 146.900945,28.4954049 C146.873834,28.5377834 146.841692,28.5769236 146.805186,28.6120095 L129.092403,43.1903857 C128.835001,43.4378104 128.420174,43.4353626 128.165877,43.1849035 C128.015752,43.0370632 127.949134,42.827287 127.98737,42.6228146 L129.523281,34.4076181 C129.522679,34.4078859 100,34.4076181 100,34.4076181 L100,22.8670474 Z" id="Arrow-33-shape-Copy-5" fill="#5a2d29"></path> <path d="M257,22.8670474 L285.662115,22.8670474 L282.78451,13.8260438 C282.677481,13.4897313 282.8709,13.1326758 283.216554,13.0285272 C283.398141,12.9738201 283.595215,12.9985409 283.756596,13.0962894 L303.690977,27.6173513 C303.998159,27.8034011 304.092176,28.1965115 303.900945,28.4954049 C303.873834,28.5377834 303.841692,28.5769236 303.805186,28.6120095 L286.092403,43.1903857 C285.835001,43.4378104 285.420174,43.4353626 285.165877,43.1849035 C285.015752,43.0370632 284.949134,42.827287 284.98737,42.6228146 L286.523281,34.4076181 C286.522679,34.4078859 257,34.4076181 257,34.4076181 L257,22.8670474 Z" id="Arrow-33-shape-Copy-11" fill="#5a2d29"></path> <path d="M414,22.8670474 L442.662115,22.8670474 L439.78451,13.8260438 C439.677481,13.4897313 439.8709,13.1326758 440.216554,13.0285272 C440.398141,12.9738201 440.595215,12.9985409 440.756596,13.0962894 L460.690977,27.6173513 C460.998159,27.8034011 461.092176,28.1965115 460.900945,28.4954049 C460.873834,28.5377834 460.841692,28.5769236 460.805186,28.6120095 L443.092403,43.1903857 C442.835001,43.4378104 442.420174,43.4353626 442.165877,43.1849035 C442.015752,43.0370632 441.949134,42.827287 441.98737,42.6228146 L443.523281,34.4076181 C443.522679,34.4078859 414,34.4076181 414,34.4076181 L414,22.8670474 Z" id="Arrow-33-shape-Copy-12" fill="#5a2d29"></path> <path d="M732,22.8670474 L760.662115,22.8670474 L757.78451,13.8260438 C757.677481,13.4897313 757.8709,13.1326758 758.216554,13.0285272 C758.398141,12.9738201 758.595215,12.9985409 758.756596,13.0962894 L778.690977,27.6173513 C778.998159,27.8034011 779.092176,28.1965115 778.900945,28.4954049 C778.873834,28.5377834 778.841692,28.5769236 778.805186,28.6120095 L761.092403,43.1903857 C760.835001,43.4378104 760.420174,43.4353626 760.165877,43.1849035 C760.015752,43.0370632 759.949134,42.827287 759.98737,42.6228146 L761.523281,34.4076181 C761.522679,34.4078859 732,34.4076181 732,34.4076181 L732,22.8670474 Z" id="Arrow-33-shape-Copy-14" fill="#5a2d29"></path> <path d="M103,96.8670474 L151.662115,96.8670474 L148.78451,87.8260438 C148.677481,87.4897313 148.8709,87.1326758 149.216554,87.0285272 C149.398141,86.9738201 149.595215,86.9985409 149.756596,87.0962894 L169.690977,101.617351 C169.998159,101.803401 170.092176,102.196511 169.900945,102.495405 C169.873834,102.537783 169.841692,102.576924 169.805186,102.61201 L152.092403,117.190386 C151.835001,117.43781 151.420174,117.435363 151.165877,117.184904 C151.015752,117.037063 150.949134,116.827287 150.98737,116.622815 L152.523281,108.407618 C152.522679,108.407886 103,108.407618 103,108.407618 L103,96.8670474 Z" id="Arrow-33-shape-Copy-8" fill="#5a2d29" transform="translate(136.500000, 102.187181) scale(-1, 1) translate(-136.500000, -102.187181) "></path> <g id="" transform="translate(0.000000, 1.000000)"> <g id="Small-Button"> <rect id="Background" stroke="#9B9B9B" stroke-width="2" x="1" y="1" width="88" height="53" rx="8"></rect> <text id="Text" font-family="Horta, AvantGardeGothicITCW01Dm, Avant Garde Gothic ITCW01Dm" font-size="20" font-weight="normal" fill="#9B9B9B"> <tspan x="28" y="26">PUSH</tspan> <tspan x="28" y="46">CODE</tspan> </text> </g> </g> <g id="" transform="translate(157.000000, 1.000000)"> <g id="Small-Button"> <rect id="Background" stroke="#9B9B9B" stroke-width="2" x="1" y="1" width="88" height="53" rx="8"></rect> <text id="Text" font-family="Horta, AvantGardeGothicITCW01Dm, Avant Garde Gothic ITCW01Dm" font-size="20" font-weight="normal" fill="#9B9B9B"> <tspan x="32" y="34">LINT</tspan> </text> </g> </g> <g id="" transform="translate(314.000000, 0.000000)"> <g id="Small-Button"> <rect id="Background" stroke="#9B9B9B" stroke-width="2" x="1" y="1" width="88" height="53" rx="8"></rect> <text id="Text" font-family="Horta, AvantGardeGothicITCW01Dm, Avant Garde Gothic ITCW01Dm" font-size="20" font-weight="normal" fill="#9B9B9B"> <tspan x="27" y="34">TESTS</tspan> </text> </g> </g> <g id="" transform="translate(471.000000, 0.000000)"> <g id="Small-Button"> <rect id="Background" stroke="#9B9B9B" stroke-width="2" x="1" y="1" width="88" height="53" rx="8"></rect> <text id="Text" font-family="Horta, AvantGardeGothicITCW01Dm, Avant Garde Gothic ITCW01Dm" font-size="20" font-weight="normal" fill="#9B9B9B"> <tspan x="22" y="34">DANGER</tspan> </text> </g> </g> <g id="" transform="translate(789.000000, 0.000000)"> <g id="Small-Button"> <rect id="Background" stroke="#9B9B9B" stroke-width="2" x="1" y="1" width="88" height="53" rx="8"></rect> <text id="Text" font-family="Horta, AvantGardeGothicITCW01Dm, Avant Garde Gothic ITCW01Dm" font-size="20" font-weight="normal" fill="#9B9B9B"> <tspan x="24" y="24">HUMAN</tspan> <tspan x="21.5" y="42">REVIEWS</tspan> </text> </g> </g> <path d="M762.973102,91.4462339 C775.188326,100.603308 794.994538,96.8620004 794.994538,96.8620004 C794.994538,96.8620004 817.110611,100.394892 816.881134,100.761277 C816.848601,100.813225 808.318765,106.250548 808.318765,106.250548 C808.318042,106.250876 773.440552,113.158013 759.603141,101.12213 C745.74727,89.0958906 745.000079,67.9993592 745,68 C745.000079,67.9997343 750.779467,82.2767664 762.973102,91.4462339 Z" id="Arrow-33-shape-Copy-10" fill="#5a2d29" transform="translate(780.941454, 88.111696) scale(-1, 1) translate(-780.941454, -88.111696) "></path> <path d="M450.973102,91.4462339 C463.188326,100.603308 482.994538,96.8620004 482.994538,96.8620004 C482.994538,96.8620004 505.110611,100.394892 504.881134,100.761277 C504.848601,100.813225 496.318765,106.250548 496.318765,106.250548 C496.318042,106.250876 461.440552,113.158013 447.603141,101.12213 C433.74727,89.0958906 433.000079,67.9993592 433,68 C433.000079,67.9997343 438.779467,82.2767664 450.973102,91.4462339 Z" id="Arrow-33-shape-Copy-15" fill="#5a2d29" transform="translate(468.941454, 88.111696) scale(-1, 1) translate(-468.941454, -88.111696) "></path> <path d="M298.973102,91.4462339 C311.188326,100.603308 330.994538,96.8620004 330.994538,96.8620004 C330.994538,96.8620004 353.110611,100.394892 352.881134,100.761277 C352.848601,100.813225 344.318765,106.250548 344.318765,106.250548 C344.318042,106.250876 309.440552,113.158013 295.603141,101.12213 C281.74727,89.0958906 281.000079,67.9993592 281,68 C281.000079,67.9997343 286.779467,82.2767664 298.973102,91.4462339 Z" id="Arrow-33-shape-Copy-17" fill="#5a2d29" transform="translate(316.941454, 88.111696) scale(-1, 1) translate(-316.941454, -88.111696) "></path> <path d="M147.973102,91.4462339 C160.188326,100.603308 179.994538,96.8620004 179.994538,96.8620004 C179.994538,96.8620004 202.110611,100.394892 201.881134,100.761277 C201.848601,100.813225 193.318765,106.250548 193.318765,106.250548 C193.318042,106.250876 158.440552,113.158013 144.603141,101.12213 C130.74727,89.0958906 130.000079,67.9993592 130,68 C130.000079,67.9997343 135.779467,82.2767664 147.973102,91.4462339 Z" id="Arrow-33-shape-Copy-18" fill="#5a2d29" transform="translate(165.941454, 88.111696) scale(-1, 1) translate(-165.941454, -88.111696) "></path> <rect id="Rectangle-Copy" fill="#5a2d29" x="168" y="97" width="615" height="11.5"></rect> <polygon id="Triangle-Copy-2" fill="#5a2d29" points="705 19 722 53 688 53"></polygon> <polygon id="Triangle-Copy-3" fill="#5a2d29" points="705 34 688 0 722 0"></polygon> <path d="M573,21.8670474 L601.662115,21.8670474 L598.78451,12.8260438 C598.677481,12.4897313 598.8709,12.1326758 599.216554,12.0285272 C599.398141,11.9738201 599.595215,11.9985409 599.756596,12.0962894 L619.690977,26.6173513 C619.998159,26.8034011 620.092176,27.1965115 619.900945,27.4954049 C619.873834,27.5377834 619.841692,27.5769236 619.805186,27.6120095 L602.092403,42.1903857 C601.835001,42.4378104 601.420174,42.4353626 601.165877,42.1849035 C601.015752,42.0370632 600.949134,41.827287 600.98737,41.6228146 L602.523281,33.4076181 C602.522679,33.4078859 573,33.4076181 573,33.4076181 L573,21.8670474 Z" id="Arrow-33-shape-Copy-13" fill="#5a2d29"></path> <g id="Group-3" transform="translate(632.000000, 15.000000)"> <ellipse id="Oval-Copy-2" fill="#FA1C7E" cx="12" cy="12" rx="12" ry="12"></ellipse> <path d="M3.62974094,20.5987747 C1.39067335,18.418845 0,15.3718271 0,12 C0,5.372583 5.372583,0 12,0 C15.3718271,0 18.418845,1.39067335 20.5987747,3.62974094 L3.62974094,20.5987747 Z" id="Combined-Shape" fill="#87CA85"></path> </g> </g> </g> </g> </svg> </article><div class="wide-row-thin-col"> <article style="padding:10px;"><h1 class="vibrant">How does it work?</h1> Danger is a NPM module that evals a <code>Dangerfile</code>. You set up a <code>Dangerfile</code> per-project. The <code>Dangerfile</code> contains a collection of home-grown rules specific to your project as a <code>dangerfile.js</code> or <code>dangerfile.ts</code>. Danger can be installed via NPM or Yarn. Use <code>yarn add danger -D</code> to add it to your <code>package.json</code>. You can <a href='/js/guides/getting_started'>integrate Danger</a> into your own project using AppCenter, Bamboo, BitbucketPipelines, Bitrise, BuddyBuild, BuddyWorks, Buildkite, Circle, Cirrus, CodeBuild, Codefresh, Codemagic, Codeship, Concourse, DockerCloud, Drone, GitHubActions, GitLabCI, Jenkins, Netlify, Nevercode, Screwdriver, Semaphore, Surf, TeamCity, Travis, VSTS. You would then need to generate a GitHub access token or a BitBucket Server user, and expose some credentials as ENV vars. Then add `yarn danger ci` to your CI test run. The <a href='/js/guides/getting_started'>Getting Started</a> guide covers this in more detail.</article><article class="messaging" style="padding:10px;"><h1 class="vibrant">聽</h1> <div class="highlight"><pre class="highlight javascript"><code>// Import the feedback functions import { message, warn, fail, markdown } from "danger" // Add a message to the table message("You have added 2 more modules to the app") // Adds a warning to the table warn("You have not included a CHANGELOG entry.") // Declares a blocking fail(`ESLint has failed with ${fails} fails.`) // Show markdown under the table: markdown("## New module Danger" + dangerYarnInfo) </code></pre></div></article> </div> <div><a class='clicky_button' href='/js/guides/getting_started'>Get Started</a></div></section><section class="examples"><article><h1 class="vibrant">What does this Look like?</h1></article><div class="split"> <div class="thirty"><ul> <li class="changelogs" data-repos="danger/danger-js"><a>Enforce changelogs</a></li> <li class="prose" data-repos="danger/danger-js"><a>Keep Lockfile up to date</a></li> <li class="merge" data-repos="ReactiveX/rxjs"><a>Encourage smaller PRs</a></li> <li class="focus" data-repos="artsy/emission"><a>Ensure PRs have assignees</a></li> <li class="testing" data-repos="apollographql/apollo-client"><a>Encourage more testing</a></li> <li class="docs" data-repos="facebook/react-native"><a>Highlight documentation updates</a></li> <li class="show-info" data-repos="ReactiveX/rxjs"><a>Show useful info on a PR</a></li> <li class="flow" data-repos="apache/incubator-weex"><a>Ensure Project Consistency</a></li> <li class="semver" data-repos="styled-components/styled-components"><a>Highlight SemVer breakages</a></li> </ul></div> <div class="seventy"> <div class="code_chunk"> <div class="changelogs"><div class="highlight"><pre>// Add a CHANGELOG entry for app changes const hasChangelog = danger.git.modified_files.includes("changelog.md") const isTrivial = (danger.github.pr.body + danger.github.pr.title).includes("#trivial") if (!hasChangelog && !isTrivial) { warn("Please add a changelog entry for your changes.") } </pre></div></div> <div class="prose"><div class="highlight"><pre>const packageChanged = danger.git.modified_files.includes('package.json'); const lockfileChanged = danger.git.modified_files.includes('yarn.lock'); if (packageChanged && !lockfileChanged) { const message = 'Changes were made to package.json, but not to yarn.lock'; const idea = 'Perhaps you need to run `yarn install`?'; warn(`${message} - <i>${idea}</i>`); } </pre></div></div> <div class="merge"><div class="highlight"><pre>var bigPRThreshold = 600; if (danger.github.pr.additions + danger.github.pr.deletions > bigPRThreshold) { warn(':exclamation: Big PR (' + ++errorCount + ')'); markdown('> (' + errorCount + ') : Pull Request size seems relatively large. If Pull Request contains multiple changes, split each into separate PR will helps faster, easier review.'); } </pre></div></div> <div class="focus"><div class="highlight"><pre>// Always ensure we assign someone, so that our Slackbot can do its work correctly if (pr.assignee === null) { fail("Please assign someone to merge this PR, and optionally include people who should review.") } </pre></div></div> <div class="testing"><div class="highlight"><pre>const hasAppChanges = modifiedAppFiles.length > 0; const testChanges = modifiedAppFiles.filter(filepath => filepath.includes('test'), ); const hasTestChanges = testChanges.length > 0; // Warn if there are library changes, but not tests if (hasAppChanges && !hasTestChanges) { warn( "There are library changes, but not tests. That's OK as long as you're refactoring existing code", ); } </pre></div></div> <div class="docs"><div class="highlight"><pre>// Check that every file touched has a corresponding test file const correspondingTestsForAppFiles = touchedAppOnlyFiles.map(f => { const newPath = path.dirname(f) const name = path.basename(f).replace(".ts", "-tests.ts") return `${newPath}/__tests__/${name}` }) // New app files should get new test files // Allow warning instead of failing if you say "Skip New Tests" inside the body, make it explicit. const testFilesThatDontExist = correspondingTestsForAppFiles.filter(f => fs.existsSync(f)) if (testFilesThatDontExist.length > 0) { const callout = acceptedNoTests ? warn : fail const output = `Missing Test Files: ${testFilesThatDontExist.map(f => ` - [] \`${f}\``).join("\n")} If these files are supposed to not exist, please update your PR body to include "Skip New Tests". ` callout(output) } </pre></div></div> <div class="show-info"><div class="highlight"><pre>var globalFile = 'Rx.js'; var minFile = 'Rx.min.js'; function sizeDiffBadge(name, value) { var color = 'lightgrey'; if (value > 0) { color = 'red'; } else if (value < 0) { color = 'green'; } return 'https://img.shields.io/badge/' + name + '-' + getFormattedKB(getKB(value)) + 'KB-' + color + '.svg?style=flat-square'; } //post size of build schedule(new Promise(function (res) { getSize('./dist/cjs', function (e, result) { var localGlobalFile = path.resolve('./dist/global', globalFile); var localMinFile = path.resolve('./dist/global', minFile); //get sizes of PR build var global = fs.statSync(localGlobalFile); var global_gzip = gzipSize.sync(fs.readFileSync(localGlobalFile, 'utf8')); var min = fs.statSync(localMinFile); var min_gzip = gzipSize.sync(fs.readFileSync(localMinFile, 'utf8')); // [...] var sizeMessage = '<img src="https://img.shields.io/badge/Size%20Diff%20%28' + releaseVersion + '%29--lightgrey.svg?style=flat-square"/> '; sizeMessage += '<img src="' + sizeDiffBadge('Global', global.size - bundleGlobal.size) + '"/> '; sizeMessage += '<img src="' + sizeDiffBadge('Global(gzip)', global_gzip - bundle_global_gzip) + '"/> '; sizeMessage += '<img src="' + sizeDiffBadge('Min', min.size - bundleMin.size) + '"/> '; sizeMessage += '<img src="' + sizeDiffBadge('Min (gzip)', min_gzip - bundle_min_gzip) + '"/> '; message(sizeMessage); markdown('> CJS: **' + getKB(result) + '**KB, global: **' + getKB(global.size) + '**KB (gzipped: **' + getKB(global_gzip) + '**KB), min: **' + getKB(min.size) + '**KB (gzipped: **' + getKB(min_gzip) + '**KB)'); res(); }); })); </pre></div></div> <div class="flow"><div class="highlight"><pre>const jsFiles = danger.git.created_files.filter(path => path.endsWith("js")); function absolute (relPath) { return path.resolve(__dirname, relPath) } const flowIgnorePaths = [ 'node_modules','test', 'build', 'examples', 'doc', 'android', 'ios', 'bin', 'dist', 'flow-typed' ].map(function (rel) { return absolute(rel) }); // new js files should have `@flow` at the top const unFlowedFiles = jsFiles.filter(filepath => { let i = 0 const len = flowIgnorePaths.length while (i < len) { const p = flowIgnorePaths[i] if (absolute(filepath).indexOf(p) > -1) { // ignore this file because it's in the flow-ignore-paths. return false; } i++ } const content = fs.readFileSync(filepath); return !content.includes("@flow"); }); if (unFlowedFiles.length > 0) { warn( `These new JS files do not have Flow enabled: ${unFlowedFiles.join(", ")}` ); } </pre></div></div> <div class="semver"><div class="highlight"><pre>// Changes to these files may need SemVer bumps const semverBumpFiles = ['ThemeProvider.js', 'StyledComponent.js', 'StyledNativeComponent.js'] semverBumpFiles.forEach(file => { if (jsModifiedFiles.includes(file)) { warn('Changes to #{file} might be SemVer major changes.') } }) </pre></div></div> </div> <ref></ref> </div> </div></section><section><article><h1 class="vibrant">Lots of documentation</h1> <div class="wide-row-thin-col"> <div style="flex:1; padding: 10px; max-width: 50%;"> <h3><a href='/js/guides/getting_started'>Getting Started with Danger JS</a></h3> Step one on using Danger in your application. Start here. <a href='/js/guides/getting_started'>Read more</a> </div> <div style="flex:1; padding: 10px; max-width: 50%;"> <h3><a href='/js/changelog'>CHANGELOG</a></h3> What's been changing in the codebase. <a href='/js/changelog'>Read more</a> </div> <div style="flex:1; padding: 10px; max-width: 50%;"> <h3><a href='/js/usage/extending-danger'>Extending Danger</a></h3> How to take your rules, and make them accessible to more people by writing a Danger plugin. <a href='/js/usage/extending-danger'>Read more</a> </div> </div> <div class="wide-row-thin-col"> <div style="flex:1; padding: 10px; max-width: 50%;"> <h3><a href='/js/tutorials/node-app'>Danger in a Node App</a></h3> An example where you work in a team on a node app, and some of the common Danger rules for working together. <a href='/js/tutorials/node-app'>Read more</a> </div> <div style="flex:1; padding: 10px; max-width: 50%;"> <h3><a href='/js/tutorials/node-library'>Danger + Node Library</a></h3> An example where you work on an OSS node library, so you're trying to improve overall contributions from light contributors. <a href='/js/tutorials/node-library'>Read more</a> </div> <div style="flex:1; padding: 10px; max-width: 50%;"> <h3><a href='/js/guides/the_dangerfile'>About the Dangerfile</a></h3> Step two on using Danger in your app, how to work locally and nuances around working with files. <a href='/js/guides/the_dangerfile'>Read more</a> </div> </div> <div class="wide-row-thin-col"> <div style="flex:1; padding: 10px; max-width: 50%;"> <h3><a href='/js/usage/culture'>Cultural Changes</a></h3> Discussing introducing Danger into a team, how you can use it to provide positive feedback and encourage adoption of new rules. <a href='/js/usage/culture'>Read more</a> </div> <div style="flex:1; padding: 10px; max-width: 50%;"> <h3><a href='/js/tutorials/dependencies'>Danger + Dependencies</a></h3> An example of how can you use Danger to keep your dependencies in check. <a href='/js/tutorials/dependencies'>Read more</a> </div> <div style="flex:1; padding: 10px; max-width: 50%;"> <h3><a href='/js/usage/danger-process'>Danger in my Language</a></h3> How to use `danger process` to create a Danger runner for any language. <a href='/js/usage/danger-process'>Read more</a> </div> </div> <div class="wide-row-thin-col"> <div style="flex:1; padding: 10px; max-width: 50%;"> <h3><a href='/js/tutorials/transpilation'>Danger + Transpilation</a></h3> How Danger's TypeScript/Babel integration works. <a href='/js/tutorials/transpilation'>Read more</a> </div> <div style="flex:1; padding: 10px; max-width: 50%;"> <h3><a href='/js/guides/faq'>FAQ</a></h3> Common questions that come up in our GitHub issues. <a href='/js/guides/faq'>Read more</a> </div> <div style="flex:1; padding: 10px; max-width: 50%;"> <h3><a href='/js/usage/bitbucket_cloud'>Danger + BitBucket Cloud</a></h3> An overview of using Danger with BitBucket Cloud, and some examples <a href='/js/usage/bitbucket_cloud'>Read more</a> </div> </div> <div class="wide-row-thin-col"> <div style="flex:1; padding: 10px; max-width: 50%;"> <h3><a href='/js/usage/bitbucket_server'>Danger + BitBucket Server</a></h3> An overview of using Danger with BitBucket Server, and some examples <a href='/js/usage/bitbucket_server'>Read more</a> </div> <div style="flex:1; padding: 10px; max-width: 50%;"> <h3><a href='/js/usage/gitlab'>Danger + GitLab</a></h3> An overview of using Danger with GitLab, and some examples <a href='/js/usage/gitlab'>Read more</a> </div> <div style="flex:1; padding: 10px; max-width: 50%;"> <h3><a href='/js/tutorials/fast-feedback'>Fast Feedback via Danger Local</a></h3> How to use Danger to get per-commit feedback <a href='/js/tutorials/fast-feedback'>Read more</a> </div> </div> <div class="wide-row-thin-col"><div style="flex:1; padding: 10px; max-width: 50%;"> <h3><a href='/js/guides/peril'>Peril</a></h3> When there's not enough Danger in your life <a href='/js/guides/peril'>Read more</a> </div></div></article></section><section><article><h1 class="vibrant">Awesome plugins</h1></article><section class="search_info"><article class="examples"><ul> <li class="clickable" data-key="danger-plugin-code-coverage"><a href='/js/plugins/danger-plugin-code-coverage'>danger-plugin-code-coverage</a></li> <li class="clickable" data-key="danger-plugin-linear-history"><a href='/js/plugins/danger-plugin-linear-history'>danger-plugin-linear-history</a></li> <li class="clickable" data-key="danger-plugin-coverage"><a href='/js/plugins/danger-plugin-coverage'>danger-plugin-coverage</a></li> <li class="clickable" data-key="danger-plugin-kirinus"><a href='/js/plugins/danger-plugin-kirinus'>danger-plugin-kirinus</a></li> <li class="clickable" data-key="danger-plugin-jest-codecov"><a href='/js/plugins/danger-plugin-jest-codecov'>danger-plugin-jest-codecov</a></li> <li class="clickable" data-key="danger-plugin-ktlint-report"><a href='/js/plugins/danger-plugin-ktlint-report'>danger-plugin-ktlint-report</a></li> <li class="clickable" data-key="danger-plugin-circleci"><a href='/js/plugins/danger-plugin-circleci'>danger-plugin-circleci</a></li> <li class="clickable" data-key="danger-plugin-wrapper-ts"><a href='/js/plugins/danger-plugin-wrapper-ts'>danger-plugin-wrapper-ts</a></li> <li class="clickable" data-key="danger-plugin-lint-report"><a href='/js/plugins/danger-plugin-lint-report'>danger-plugin-lint-report</a></li> <li class="clickable" data-key="danger-plugin-mentor"><a href='/js/plugins/danger-plugin-mentor'>danger-plugin-mentor</a></li> <li class="clickable" data-key="danger-plugin-lerna"><a href='/js/plugins/danger-plugin-lerna'>danger-plugin-lerna</a></li> <li class="clickable" data-key="danger-plugin-alex"><a href='/js/plugins/danger-plugin-alex'>danger-plugin-alex</a></li> <li class="clickable" data-key="danger-plugin-pull-request"><a href='/js/plugins/danger-plugin-pull-request'>danger-plugin-pull-request</a></li> <li class="clickable" data-key="danger-plugin-npm-check-updates"><a href='/js/plugins/danger-plugin-npm-check-updates'>danger-plugin-npm-check-updates</a></li> <li class="clickable" data-key="danger-plugin-istanbul-coverage"><a href='/js/plugins/danger-plugin-istanbul-coverage'>danger-plugin-istanbul-coverage</a></li> <li class="clickable" data-key="danger-plugin-keepachangelog"><a href='/js/plugins/danger-plugin-keepachangelog'>danger-plugin-keepachangelog</a></li> <li class="clickable" data-key="danger-plugin-simple-collection"><a href='/js/plugins/danger-plugin-simple-collection'>danger-plugin-simple-collection</a></li> <li class="clickable" data-key="danger-plugin-no-console-ext"><a href='/js/plugins/danger-plugin-no-console-ext'>danger-plugin-no-console-ext</a></li> <li class="clickable" data-key="danger-plugin-checkstyle"><a href='/js/plugins/danger-plugin-checkstyle'>danger-plugin-checkstyle</a></li> <li class="clickable" data-key="danger-plugin-jira-issue-gitlab"><a href='/js/plugins/danger-plugin-jira-issue-gitlab'>danger-plugin-jira-issue-gitlab</a></li> <li class="clickable" data-key="danger-plugin-rally"><a href='/js/plugins/danger-plugin-rally'>danger-plugin-rally</a></li> <li class="clickable" data-key="danger-plugin-gifs"><a href='/js/plugins/danger-plugin-gifs'>danger-plugin-gifs</a></li> <li class="clickable" data-key="danger-plugin-yarn"><a href='/js/plugins/danger-plugin-yarn'>danger-plugin-yarn</a></li> <li class="clickable" data-key="danger-plugin-slack"><a href='/js/plugins/danger-plugin-slack'>danger-plugin-slack</a></li> <li class="clickable" data-key="danger-plugin-lighthouse"><a href='/js/plugins/danger-plugin-lighthouse'>danger-plugin-lighthouse</a></li> <li class="clickable" data-key="danger-plugin-duplicate-packages"><a href='/js/plugins/danger-plugin-duplicate-packages'>danger-plugin-duplicate-packages</a></li> <li class="clickable" data-key="danger-plugin-no-console"><a href='/js/plugins/danger-plugin-no-console'>danger-plugin-no-console</a></li> <li class="clickable" data-key="danger-plugin-toolbox"><a href='/js/plugins/danger-plugin-toolbox'>danger-plugin-toolbox</a></li> <li class="clickable" data-key="danger-plugin-complete-pr"><a href='/js/plugins/danger-plugin-complete-pr'>danger-plugin-complete-pr</a></li> <li class="clickable" data-key="danger-plugin-fixme"><a href='/js/plugins/danger-plugin-fixme'>danger-plugin-fixme</a></li> <li class="clickable" data-key="danger-plugin-labels"><a href='/js/plugins/danger-plugin-labels'>danger-plugin-labels</a></li> <li class="clickable" data-key="danger-plugin-pr-guide"><a href='/js/plugins/danger-plugin-pr-guide'>danger-plugin-pr-guide</a></li> <li class="clickable" data-key="danger-plugin-flow"><a href='/js/plugins/danger-plugin-flow'>danger-plugin-flow</a></li> <li class="clickable" data-key="danger-plugin-commit-lint"><a href='/js/plugins/danger-plugin-commit-lint'>danger-plugin-commit-lint</a></li> <li class="clickable" data-key="danger-plugin-gitlab-slack"><a href='/js/plugins/danger-plugin-gitlab-slack'>danger-plugin-gitlab-slack</a></li> <li class="clickable" data-key="danger-plugin-flow-typed"><a href='/js/plugins/danger-plugin-flow-typed'>danger-plugin-flow-typed</a></li> <li class="clickable" data-key="danger-plugin-deprecate"><a href='/js/plugins/danger-plugin-deprecate'>danger-plugin-deprecate</a></li> <li class="clickable" data-key="danger-plugin-typetalk"><a href='/js/plugins/danger-plugin-typetalk'>danger-plugin-typetalk</a></li> <li class="clickable" data-key="danger-plugin-wordcheck"><a href='/js/plugins/danger-plugin-wordcheck'>danger-plugin-wordcheck</a></li> <li class="clickable" data-key="danger-plugin-conventional-commitlint"><a href='/js/plugins/danger-plugin-conventional-commitlint'>danger-plugin-conventional-commitlint</a></li> <li class="clickable" data-key="danger-plugin-xcode-report"><a href='/js/plugins/danger-plugin-xcode-report'>danger-plugin-xcode-report</a></li> <li class="clickable" data-key="danger-plugin-artifact-size"><a href='/js/plugins/danger-plugin-artifact-size'>danger-plugin-artifact-size</a></li> <li class="clickable" data-key="danger-plugin-jira-issue"><a href='/js/plugins/danger-plugin-jira-issue'>danger-plugin-jira-issue</a></li> <li class="clickable" data-key="danger-plugin-jest"><a href='/js/plugins/danger-plugin-jest'>danger-plugin-jest</a></li> <li class="clickable" data-key="danger-plugin-todos"><a href='/js/plugins/danger-plugin-todos'>danger-plugin-todos</a></li> <li class="clickable" data-key="danger-plugin-tslint"><a href='/js/plugins/danger-plugin-tslint'>danger-plugin-tslint</a></li> <li class="clickable" data-key="danger-plugin-no-test-shortcuts"><a href='/js/plugins/danger-plugin-no-test-shortcuts'>danger-plugin-no-test-shortcuts</a></li> <li class="clickable" data-key="danger-plugin-stylelint"><a href='/js/plugins/danger-plugin-stylelint'>danger-plugin-stylelint</a></li> <li class="clickable" data-key="danger-plugin-spellcheck"><a href='/js/plugins/danger-plugin-spellcheck'>danger-plugin-spellcheck</a></li> <li class="clickable" data-key="danger-plugin-review-aggregator"><a href='/js/plugins/danger-plugin-review-aggregator'>danger-plugin-review-aggregator</a></li> <li class="clickable" data-key="danger-plugin-review-eslint-parser"><a href='/js/plugins/danger-plugin-review-eslint-parser'>danger-plugin-review-eslint-parser</a></li> <li class="clickable" data-key="danger-plugin-npm-outdated"><a href='/js/plugins/danger-plugin-npm-outdated'>danger-plugin-npm-outdated</a></li> <li class="clickable" data-key="danger-plugin-npm-audit"><a href='/js/plugins/danger-plugin-npm-audit'>danger-plugin-npm-audit</a></li> <li class="clickable" data-key="danger-plugin-codecov"><a href='/js/plugins/danger-plugin-codecov'>danger-plugin-codecov</a></li> <li class="clickable" data-key="danger-plugin-node-dependencies"><a href='/js/plugins/danger-plugin-node-dependencies'>danger-plugin-node-dependencies</a></li> <li class="clickable" data-key="danger-plugin-eslint"><a href='/js/plugins/danger-plugin-eslint'>danger-plugin-eslint</a></li> </ul></article></section><section><div class="third_party_readme"><div class="plugins_search_results"></div></div></section></section> </div> <script>$(function() { /// Generic-ish Example Highlight Code $(".search_info ul li").click(function(event) { event.preventDefault() var $this = $(this) $this.parent().children().removeClass("highlighted") $this.addClass("highlighted") var url = "/js/plugins/" + $(this).data("key") + "_embed.html" $.get(url, function(html) { $(".plugins_search_results").empty() $(".plugins_search_results").append(html) }) }) /// Generic-ish Example Highlight Code $("section.examples ul li").mouseover(function(event) { event.preventDefault() // Set the corresponding code var klass = $(this).attr("class").replace(" highlighted", "") // Set selection $(this).parent().children().removeClass("scope_code").removeClass("highlighted") $(this).addClass("highlighted") var parent = $(this).parents("section") // Is this selector for switching existing code samples? if ($(this).data("repos")) { $("div.code_chunk > div", parent).css("display", "none") $("div.code_chunk div." + klass, parent).css("display", "block") } else if( $(this).data("url") ) { $.get( $(this).data("url"), function(html) { $("div.code_chunk", parent).empty() $("div.code_chunk", parent).append(html) }) } // Figure out the reference text var urls = $(this).data("repos") && $(this).data("repos").split(", ") var prs = "" //$(this).data("prs").split(", ") var toGithubLink = function(ref) { var branch = (ref.indexOf("#") > -1) ? ref.split("#")[1] : "master" var repo = ref.split("#")[0] return "<a href='https://github.com/" + repo + "' target='_blank'>" + repo + "</a>" } var showArray = function(array) { if (!array) { return false } if (array.length > 1) { return true } if (array.length == 0) { return false } return array[0].length > 0 } // Set the reference text under the code for people to inspect var text = "" if (showArray(urls)) { text += "Repo: " + urls.map(toGithubLink).join(", ") } if (showArray(urls) && showArray(prs)) { text += " " } if (showArray(prs)) { text += "@see_pr "+ prs.map(toGithubLink).join(", ") } $("ref", parent).html(text) }) // Set the selection to be the first $("section.examples ul li:first-child").trigger('mouseenter') });</script> <footer><article><h3>Danger</h3> <ul> <li><a href="https://github.com/danger/danger-js" target="_blank"><img class="lang-logo" src="/images/js_logo-17d192a8.svg">danger/danger-js</a></li> <li><a href="https://github.com/danger/danger" target="_blank"><img class="lang-logo" src="/images/rubygems_logo-c4316f34.svg">danger/danger</a></li> <li><a href="https://github.com/danger/swift" target="_blank"><img class="lang-logo" src="/images/sw_logo-9d1fcd3b.svg">danger/swift</a></li> <li><a href="https://github.com/danger/peril" target="_blank">danger/peril</a></li> <li><a href='/js/js-vs-ruby'>JS vs Ruby</a></li> <li><a href="https://spectrum.chat/danger" target="_blank">Support via Spectrum</a></li> </ul> <h3>Twitter</h3> <ul> <li><a href="https://twitter.com/DangerSystems" target="_blank">@DangerSystems</a></li> <li><a href="https://twitter.com/orta" target="_blank">@orta</a></li> </ul></article><article><h3>Guides</h3> <ul> <li><a href='/js/guides/getting_started'>Getting Started with Danger JS</a></li> <li><a href='/js/guides/the_dangerfile'>About the Dangerfile</a></li> <li><a href='/js/guides/faq'>FAQ</a></li> <li><a href='/js/guides/peril'>Peril</a></li> </ul></article><article><h3>Misc</h3> <ul> <li><a href='/js/reference'>DSL Reference</a></li> <li><a href='/js/changelog'>CHANGELOG</a></li> <li><a href="https://github.com/danger/design" target="_blank">Media Kit</a></li> <li><a href="https://github.com/danger/danger-js#license-contributors-guidelines-and-code-of-conduct" target="_blank">COC / Moya CC</a></li> <li><a href="https://github.com/danger/danger-js#this-thing-is-broken-i-should-help-improve-it" target="_blank">Help Out Building Danger</a></li> <li><a href='/js/about'>About this Site</a></li> </ul></article></footer><article><center><a href="/images/dm-opinions2-ad07b6ab.png"><img height="244" src="/images/dm-opinions2-ad07b6ab.png" width="203"></a></center></article> </body> </html><html><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-81285417-2', 'auto'); ga('send', 'pageview'); ga('send', 'danger-js'); </script></html>