⚡️ Modernize

.circleci/config.yml

@@ -2,7 +2,7 @@ version: 2
 jobs:
   build:
     docker:
-      - image: circleci/node:8.10
+      - image: circleci/node:10
     steps:
       - checkout
       - restore_cache:

.gitignore

@@ -2,6 +2,7 @@
 /commonjs/
 /esm/
 /standalone/
+/build
 
 # IDE
 .vscode/

.storybook/config.js

@@ -1,12 +1,3 @@
 import { configure } from '@storybook/react'
-import { setOptions } from '@storybook/addon-options'
 
-setOptions({
-  showDownPanel: false
-})
-
-function loadStories() {
-  require('../tools/stories')
-}
-
-configure(loadStories, module)
+configure(require.context('../stories', true, /\.stories\.tsx$/), module)

.storybook/webpack.config.js

@@ -0,0 +1,26 @@
+const webpack = require('webpack')
+const pkg = require('../package.json')
+
+module.exports = {
+  mode: 'development',
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js']
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        exclude: /node_modules/,
+        loader: 'ts-loader'
+      }
+    ]
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: JSON.stringify('production'),
+        VERSION: JSON.stringify(pkg.version)
+      }
+    })
+  ]
+}

README.md

@@ -18,7 +18,7 @@ It works by taking control of the analytics.js load process to only load destina
 - Fine grained control of tools or categories used for tracking.
 - 30s setup with a drop in script tag.
 - Or fully customizable UI/UX through React components.
-- EU traffic detection through [@segment/in-eu][inEU].
+- EU traffic detection through [@segment/in-eu][ineu].
 - Ability for visitors to reconsent and change preferences.
 - Automatically updates to reflect the destinations you have enabled in Segment.
 
@@ -30,7 +30,7 @@ To get started, make sure you're using the latest version of the [analytics.js s
 
 ### Standalone Script
 
-The standalone script is a prebuilt bundle that uses the [ConsentManager][] React component with [Inferno][] (a lightweight React alternative). It's best for if you want to get up and running quickly or you don't have a preexisting React setup.
+The standalone script is a prebuilt bundle that uses the [ConsentManager][] React component with [Preact][] (a lightweight React alternative). It's best for if you want to get up and running quickly or you don't have a preexisting React setup.
 
 Include the consent manager script tag after your analytic.js snippet and add your own custom copy. The standalone script can be configured in one of two ways, via data attributes for simple usage or via a global callback function for advanced usage. Both methods allow the consent manager script to be loaded async.
 
@@ -67,13 +67,13 @@ The following global variables are also exposed:
 - `consentManager.version` - Version of the consent manager.
 - `consentManager.openConsentManager()` - Opens the consent manager preferences dialog.
 - `consentManager.doNotTrack()` - Utility function that returns the user's Do Not Track preference (normalises the cross browser API differences). Returns `true`, `false` or `null` (no preference specified).
-- `consentManager.inEU()` - The [@segment/in-eu][inEU] `inEU()` function.
+- `consentManager.inEU()` - The [@segment/in-eu][ineu] `inEU()` function.
 
 #### Data Attributes
 
 The `shouldRequireConsent` option isn't supported and the `otherWriteKeys` option should be a comma separated list.
 
-*Note: the data attributes [won't work in Internet Explorer][currentScript] (Edge works fine though).*
+_Note: the data attributes [won't work in Internet Explorer][currentscript] (Edge works fine though)._
 
 ```html
 <script
@@ -95,11 +95,11 @@ The `shouldRequireConsent` option isn't supported and the `otherWriteKeys` optio
 
 All the options are supported. The callback function also receives these exports:
 
-- `React` - Reference to the [Inferno][] library (the API is React compatible). Useful for if you need to use virtual DOM in your content.
+- `React` - Reference to the [Preact][] library (the API is React compatible). Useful for if you need to use virtual DOM in your content.
 - `version` - Version of the consent manager.
 - `openConsentManager()` - Opens the consent manager preferences dialog.
 - `doNotTrack()` - Utility function that returns the user's Do Not Track preference (normalises the cross browser API differences). Returns `true`, `false` or `null` (no preference specified).
-- `inEU()` - The [@segment/in-eu][inEU] `inEU()` function.
+- `inEU()` - The [@segment/in-eu][ineu] `inEU()` function.
 
 ```html
 <script>
@@ -114,16 +114,18 @@ All the options are supported. The callback function also receives these exports
       ' ',
       React.createElement(
         'a',
-        {href: '/docs/legal/website-data-collection-policy/', target: '_blank'},
+        { href: '/docs/legal/website-data-collection-policy/', target: '_blank' },
         'Website Data Collection Policy'
       ),
       '.'
     )
     var bannerSubContent = 'You can change your preferences at any time.'
     var preferencesDialogTitle = 'Website Data Collection Preferences'
-    var preferencesDialogContent = 'We use data collected by cookies and JavaScript libraries to improve your browsing experience, analyze site traffic, deliver personalized advertisements, and increase the overall performance of our site.'
+    var preferencesDialogContent =
+      'We use data collected by cookies and JavaScript libraries to improve your browsing experience, analyze site traffic, deliver personalized advertisements, and increase the overall performance of our site.'
     var cancelDialogTitle = 'Are you sure you want to cancel?'
-    var cancelDialogContent = 'Your preferences have not been saved. By continuing to use our website, you՚re agreeing to our Website Data Collection Policy.'
+    var cancelDialogContent =
+      'Your preferences have not been saved. By continuing to use our website, you՚re agreeing to our Website Data Collection Policy.'
 
     return {
       container: '#target-container',
@@ -163,7 +165,7 @@ The write key analytics.js should be loaded with.
 Type: `array<string>`<br>
 Default: `[]`
 
-Other write keys that you want to load destination information for. This is useful for including your server-side destinations in the consent manager, so that you can easily apply the user's tracking preferences to your server-side analytics too. *No data will be sent to these write keys.*
+Other write keys that you want to load destination information for. This is useful for including your server-side destinations in the consent manager, so that you can easily apply the user's tracking preferences to your server-side analytics too. _No data will be sent to these write keys._
 
 ##### shouldRequireConsent
 
@@ -242,25 +244,27 @@ The content of the cancel dialog.
 
 ```javascript
 import React from 'react'
-import {ConsentManager, openConsentManager} from '@segment/consent-manager'
+import { ConsentManager, openConsentManager } from '@segment/consent-manager'
 import inEU from '@segment/in-eu'
 
 export default function() {
   const bannerContent = (
     <span>
-      We use cookies (and other similar technologies) to collect data to improve
-      your experience on our site. By using our website, you’re agreeing to the
-      collection of data as described in our{' '}
+      We use cookies (and other similar technologies) to collect data to improve your experience on
+      our site. By using our website, you’re agreeing to the collection of data as described in our{' '}
       <a href="/docs/legal/website-data-collection-policy/" target="_blank">
         Website Data Collection Policy
-      </a>.
+      </a>
+      .
     </span>
   )
   const bannerSubContent = 'You can change your preferences at any time.'
   const preferencesDialogTitle = 'Website Data Collection Preferences'
-  const preferencesDialogContent = 'We use data collected by cookies and JavaScript libraries to improve your browsing experience, analyze site traffic, deliver personalized advertisements, and increase the overall performance of our site.'
+  const preferencesDialogContent =
+    'We use data collected by cookies and JavaScript libraries to improve your browsing experience, analyze site traffic, deliver personalized advertisements, and increase the overall performance of our site.'
   const cancelDialogTitle = 'Are you sure you want to cancel?'
-  const cancelDialogContent = 'Your preferences have not been saved. By continuing to use our website, you՚re agreeing to our Website Data Collection Policy.'
+  const cancelDialogContent =
+    'Your preferences have not been saved. By continuing to use our website, you՚re agreeing to our Website Data Collection Policy.'
 
   return (
     <div>
@@ -306,7 +310,7 @@ The write key analytics.js should be loaded with.
 Type: `array<string>`<br>
 Default: `[]`
 
-Other write keys that you want to load destination information for. This is useful for including your server-side destinations in the consent manager, so that you can easily apply the user's tracking preferences to your server-side analytics too. *No data will be sent to these write keys.*
+Other write keys that you want to load destination information for. This is useful for including your server-side destinations in the consent manager, so that you can easily apply the user's tracking preferences to your server-side analytics too. _No data will be sent to these write keys._
 
 ##### shouldRequireConsent
 
@@ -344,6 +348,7 @@ Type: `array<object>`<br>
 Default: `[]`
 
 Destinations enabled for the provided write keys. Each destination contains these properties:
+
 ```
 {
   id,
@@ -366,7 +371,7 @@ New destinations that have been enabled since the user last gave consent.
 Type: `object`<br>
 Default: `{}`
 
-The current preferences in state. By default if should be in the format of `{destinationId: true|false}`, but if you're using [mapCustomPreferences][] the object map can be in any format you want. *Note: this isn't the saved preferences.*
+The current preferences in state. By default if should be in the format of `{destinationId: true|false}`, but if you're using [mapCustomPreferences][] the object map can be in any format you want. _Note: this isn't the saved preferences._
 
 ##### isConsentRequired
 
@@ -399,12 +404,12 @@ For a more detailed/advanced example, checkout the [ConsentManager implementatio
 
 ```javascript
 import React from 'react'
-import {ConsentManagerBuilder} from '@segment/consent-manager'
+import { ConsentManagerBuilder } from '@segment/consent-manager'
 
 export default function() {
   return (
     <ConsentManagerBuilder writeKey="<your-segment-write-key>">
-      {({destinations, preferences, setPreferences, saveConsent}) => (
+      {({ destinations, preferences, setPreferences, saveConsent }) => (
         <div>
           <h2>Tracking tools</h2>
           <ul>
@@ -447,24 +452,22 @@ export default function() {
 - `openConsentManager()` - Opens the [ConsentManager][] preferences dialog.
 - `doNotTrack()` - Returns the user's Do Not Track preference (normalises the cross browser API differences). Returns `true`, `false` or `null` (no preference specified).
 
-
 ## License
 
 consent-manager is released under the MIT license.
 
 Copyright © 2018, Segment.io, Inc.
 
-
 [analytics.js snippet]: https://segment.com/docs/sources/website/analytics.js/quickstart/#step-1-copy-the-snippet
-[Inferno]: https://infernojs.org/
-[currentScript]: https://caniuse.com/#feat=document-currentscript
-[inEU]: https://github.com/segmentio/in-eu
-[ConsentManager]: #consentmanager
-[ConsentManagerBuilder]: #consentmanagerbuilder
+[preact]: https://preactjs.com
+[currentscript]: https://caniuse.com/#feat=document-currentscript
+[ineu]: https://github.com/segmentio/in-eu
+[consentmanager]: #consentmanager
+[consentmanagerbuilder]: #consentmanagerbuilder
 [top-domain]: https://github.com/segmentio/top-domain
-[mapCustomPreferences]: #mapcustompreferences
-[shouldRequireConsent]: #shouldrequireconsent-1
+[mapcustompreferences]: #mapcustompreferences
+[shouldrequireconsent]: #shouldrequireconsent-1
 [preferences]: #preferences
-[setPreferences]: #setpreferences
-[ConsentManager implementation]: src/consent-manager
-[CSS selector]: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
+[setpreferences]: #setpreferences
+[consentmanager implementation]: src/consent-manager
+[css selector]: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector