Deprecation testing and zero runtime cost in prod

docs/content/getting-started.md

@@ -138,3 +138,7 @@ In your `tsconfig.json`, set the `types` array under the `compilerOptions` like
 ```
 
 Of course, customize the array based on the `@types/` packages you have installed for your project.
+
+## Silencing warnings
+
+Like React, Primer Components emits warnings to the JavaScript console under certain conditions, like using deprecated components or props. Similar to React, you can silence these warnings by setting the `NODE_ENV` environment variable to `production` during bundling.

jest.config.js

@@ -2,5 +2,5 @@ module.exports = {
   cacheDirectory: '.test',
   collectCoverage: true,
   collectCoverageFrom: ['src/*.js'],
-  setupFilesAfterEnv: ['<rootDir>/src/utils/test-matchers.js']
+  setupFilesAfterEnv: ['<rootDir>/src/utils/test-matchers.js', '<rootDir>/src/utils/test-deprecations.js']
 }

package.json

@@ -93,6 +93,7 @@
     "rollup-plugin-commonjs": "10.1.0",
     "rollup-plugin-terser": "5.3.0",
     "rollup-plugin-visualizer": "4.0.4",
+    "semver": "7.3.2",
     "styled-components": "4.4.0"
   },
   "peerDependencies": {

src/Flash.js

@@ -5,7 +5,7 @@ import {variant} from 'styled-system'
 import {COMMON, get} from './constants'
 import theme from './theme'
 import sx from './sx'
-import deprecate from './utils/deprecate'
+import {useDeprecation} from './utils/deprecate'
 
 const schemeMap = {
   red: 'danger',
@@ -44,14 +44,17 @@ const StyledFlash = styled.div`
 `
 
 const Flash = ({variant, scheme, ...props}) => {
+  const deprecate = useDeprecation({
+    name: 'Flash "scheme" prop',
+    version: '20.0.0',
+    message: 'Use the variant prop instead. See https://primer.style/components/Flash for more details.'
+  })
+
   if (scheme) {
-    deprecate({
-      name: 'The scheme prop',
-      version: '20.0.0',
-      message: 'Use the variant prop instead. See https://primer.style/components/Flash for more details.'
-    })
+    deprecate()
     variant = schemeMap[scheme]
-  } // deprecate 20.0.0
+  }
+
   return <StyledFlash variant={variant} {...props} />
 }
 

src/__tests__/Flash.js

@@ -5,6 +5,7 @@ import theme, {colors} from '../theme'
 import {render, behavesAsComponent, checkExports} from '../utils/testing'
 import {render as HTMLRender, cleanup} from '@testing-library/react'
 import {axe, toHaveNoViolations} from 'jest-axe'
+import {Deprecations} from '../utils/deprecate'
 import 'babel-polyfill'
 expect.extend(toHaveNoViolations)
 
@@ -28,6 +29,11 @@ describe('Flash', () => {
     expect(render(<Flash full />)).toHaveStyleRule('border-width', '1px 0px')
   })
 
+  it('respects the deprecated "scheme" prop', () => {
+    expect(render(<Flash scheme="green" theme={theme} />)).toHaveStyleRule('background-color', colors.green[1])
+    expect(Deprecations.getDeprecations()).toHaveLength(1)
+  })
+
   it('respects the "variant" prop', () => {
     expect(render(<Flash variant="warning" theme={theme} />)).toHaveStyleRule('background-color', colors.yellow[1])
     expect(render(<Flash variant="danger" theme={theme} />)).toHaveStyleRule('background-color', '#FFE3E6')

src/utils/deprecate.js

@@ -1,5 +1,68 @@
 /* eslint-disable no-console */
+import {useRef, useCallback} from 'react'
 
-export default function deprecate({name, message, version}) {
-  console.warn(`WARNING! ${name} is deprecated and will be removed in version ${version}. ${message}`)
+const noop = () => {}
+// eslint-disable-next-line import/no-mutable-exports
+let deprecate = null
+
+if (__DEV__) {
+  deprecate = ({name, message, version}) => {
+    Deprecations.deprecate({name, message, version})
+  }
+} else {
+  deprecate = noop
+}
+
+export {deprecate}
+
+// eslint-disable-next-line import/no-mutable-exports
+let useDeprecation = null
+
+if (__DEV__) {
+  useDeprecation = ({name, message, version}) => {
+    const ref = useRef(false)
+    const logDeprecation = useCallback(() => {
+      if (!ref.current) {
+        ref.current = true
+        deprecate({name, message, version})
+      }
+    }, [name, message, version])
+
+    return logDeprecation
+  }
+} else {
+  useDeprecation = () => {
+    return noop
+  }
+}
+
+export {useDeprecation}
+
+export class Deprecations {
+  static get() {
+    if (!Deprecations.instance) {
+      Deprecations.instance = new Deprecations()
+    }
+
+    return Deprecations.instance
+  }
+
+  constructor() {
+    this.deprecations = []
+  }
+
+  static deprecate({name, message, version}) {
+    const msg = `WARNING! ${name} is deprecated and will be removed in version ${version}. ${message}`
+    console.warn(msg)
+
+    this.get().deprecations.push({name, message, version})
+  }
+
+  static getDeprecations() {
+    return this.get().deprecations
+  }
+
+  static clearDeprecations() {
+    this.get().deprecations.length = 0
+  }
 }

src/utils/test-deprecations.js

@@ -0,0 +1,18 @@
+import semver from 'semver'
+import {Deprecations} from '../utils/deprecate'
+
+const ourVersion = require('../../package.json').version
+
+beforeEach(() => {
+  Deprecations.clearDeprecations()
+})
+
+afterEach(() => {
+  const deprecations = Deprecations.getDeprecations()
+
+  for (const dep of deprecations) {
+    if (semver.gte(ourVersion, dep.version)) {
+      throw new Error(`Found a deprecation that should be removed in ${dep.version}`)
+    }
+  }
+})

yarn.lock

@@ -10125,6 +10125,11 @@ semver@7.0.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"
   integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
 
+semver@7.3.2:
+  version "7.3.2"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.2.tgz#604962b052b81ed0786aae84389ffba70ffd3938"
+  integrity sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==
+
 semver@^6.0.0, semver@^6.1.2, semver@^6.2.0, semver@^6.3.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"