fixes build using rollup

.circleci/config.yml

@@ -7,7 +7,7 @@ jobs:
   build:
     docker:
       # specify the version you desire here
-      - image: circleci/node:7.10
+      - image: circleci/node:8
 
       # Specify service dependencies here if necessary
       # CircleCI maintains a library of pre-built images
@@ -22,9 +22,9 @@ jobs:
       # Download and cache dependencies
       - restore_cache:
           keys:
-          - v1-dependencies-{{ checksum "package.json" }}
-          # fallback to using the latest cache if no exact match is found
-          - v1-dependencies-
+            - v1-dependencies-{{ checksum "package.json" }}
+            # fallback to using the latest cache if no exact match is found
+            - v1-dependencies-
 
       - run: yarn install
 
@@ -34,4 +34,4 @@ jobs:
           key: v1-dependencies-{{ checksum "package.json" }}
 
       # run tests!
-      - run: yarn test
+      - run: yarn test:ci

.gitignore

@@ -3,3 +3,4 @@ npm-debug.log
 yarn-error.log
 build
 coverage
+.rpt2_cache

Intercom/Intercom.tsx

@@ -125,7 +125,10 @@ export default class Intercom extends React.PureComponent<Props, never> {
         onClose();
       }
     });
-    intercom('onUnreadCountChange', onUnreadCountChange);
+
+    if (onUnreadCountChange) {
+      intercom('onUnreadCountChange', onUnreadCountChange);
+    }
 
     this.frame = frame;
 

Intercom/components/ImportIsolatedRemote/ImportIsolatedRemote.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {Portal} from '..';
+import Portal from '../Portal';
 import * as styles from './ImportIsolatedRemote.scss';
 
 export interface Props {

README.md

@@ -27,9 +27,9 @@ yarn add intercom-react
   locationKey="/home"
   onOpen={() => {}}
   onClose={() => {}}
-  onUnreadCountChange={(unreadCount) => {}}
-  onInitialization={(intercom) => {}}
->
+  onUnreadCountChange={unreadCount => {}}
+  onInitialization={intercom => {}}
+/>
 ```
 
 * `appId`: the ID of your app.
@@ -48,3 +48,13 @@ Intercom is the support tool of choice for myself and the companies I work for (
 What this means is that if you would get into a situation where you would have to unmount Intercom the three DOM nodes the library mounts (`#intercom-container`, `#intercom-stylesheet` and `#intercom-frame`) will stay mounted, as will the four event listeners the library mounts (2x `beforeunload` and 2x `message`). In other words the existing components are not unmountable.
 
 I wrote this component to create an isolated Intercom component that cleans up after itself when unmounted for a "true" React experience.
+
+## 🏗 Contributing
+
+1.  Make your changes.
+2.  Check your changes in the playground (`yarn playground`).
+3.  Build using `yarn build` and change your playground `Intercom` import to the build by changing the path to `../`.
+4.  Test you changes in/on multiple browsers and devices.
+5.  Add/Alter the appropriate tests.
+6.  Make sure all tests pass (`yarn lint && yarn test`).
+7.  Create a PR.

package.json

@@ -6,29 +6,39 @@
     "type": "git",
     "url": "https://github.com/kvendrik/intercom-react.git"
   },
-  "keywords": ["intercom", "react", "live", "chat", "support"],
-  "main": "build/Intercom/index.js",
+  "keywords": [
+    "intercom",
+    "react",
+    "live",
+    "chat",
+    "support"
+  ],
+  "main": "build/index.js",
+  "module": "build/index.es.js",
   "types": "build/Intercom/index.d.ts",
   "author": "Koen Vendrik <k.vendrik@gmail.com>",
   "license": "MIT",
   "scripts": {
-    "playground":
-      "webpack-dev-server --hot --inline --config ./playground/webpack.config.js",
+    "playground": "webpack-dev-server --hot --inline --config ./playground/webpack.config.js",
     "lint": "yarn lint:ts && yarn lint:tslint && yarn lint:eslint",
     "lint:ts": "tsc --noEmit",
-    "lint:eslint":
-      "eslint Intercom --ext .tsx --ext .ts && eslint playground --ext .tsx --ext .ts",
-    "lint:tslint":
-      "tslint -c tslint.json --project tsconfig.json 'Intercom/**/*.ts' 'Intercom/**/*.tsx' --exclude 'Intercom/**/*.d.ts' && tslint -c tslint.json --project tsconfig.json 'playground/**/*.ts' 'playground/**/*.tsx' --exclude 'playground/**/*.d.ts'",
+    "lint:eslint": "eslint Intercom --ext .tsx --ext .ts && eslint playground --ext .tsx --ext .ts",
+    "lint:tslint": "tslint -c tslint.json --project tsconfig.json 'Intercom/**/*.ts' 'Intercom/**/*.tsx' --exclude 'Intercom/**/*.d.ts' && tslint -c tslint.json --project tsconfig.json 'playground/**/*.ts' 'playground/**/*.tsx' --exclude 'playground/**/*.d.ts'",
     "test": "jest --silent",
+    "test:bundle": "yarn build && bundlesize",
     "test:debug": "jest",
     "test:coverage": "yarn test --coverage",
-    "test:coveralls":
-      "yarn test --coverage --coverageReporters=text-lcov | coveralls",
-    "ci": "yarn lint && yarn test:coveralls && yarn test",
-    "build": "tsc",
+    "test:coveralls": "yarn test --coverage --coverageReporters=text-lcov | coveralls",
+    "test:ci": "yarn lint && yarn test && yarn test:coveralls && yarn test:bundle",
+    "build": "rollup -c",
     "clean": "rm -rf build"
   },
+  "bundlesize": [
+    {
+      "path": "build/index.js",
+      "maxSize": "3 kB"
+    }
+  ],
   "devDependencies": {
     "@types/enzyme": "^3.1.9",
     "@types/jest": "^22.2.3",
@@ -46,6 +56,8 @@
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
+    "bundlesize": "^0.17.0",
+    "coveralls": "^3.0.1",
     "css-loader": "^0.28.11",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
@@ -61,10 +73,13 @@
     "html-webpack-plugin": "^3.2.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^22.4.3",
-    "node-sass": "^4.8.3",
+    "node-sass": "^4.9.4",
     "postcss-loader": "^2.1.4",
     "precss": "^3.1.2",
     "prettier": "^1.12.1",
+    "rollup": "^0.66.6",
+    "rollup-plugin-postcss": "^1.6.2",
+    "rollup-plugin-typescript2": "^0.17.2",
     "sass-loader": "^7.0.1",
     "style-loader": "^0.20.3",
     "ts-jest": "^22.4.6",
@@ -77,7 +92,6 @@
     "webpack-dev-server": "^3.1.3"
   },
   "dependencies": {
-    "coveralls": "^3.0.1",
     "lodash-decorators": "^5.0.1",
     "react": "^16.3.2",
     "react-dom": "^16.3.2"

playground/Playground.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
 
-import Intercom from '../';
+import Intercom from '../Intercom';
 
 export default () => <Intercom appId="fyq3wodw" userData={{}} />;

playground/index.tsx

@@ -1,3 +1,5 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import 'babel-polyfill';
 import * as React from 'react';
 import {render} from 'react-dom';
 

playground/webpack.config.js

@@ -1,21 +1,85 @@
+/* eslint-disable import/no-extraneous-dependencies */
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const config = require('../webpack.config.js');
+const {TsConfigPathsPlugin} = require('awesome-typescript-loader');
+const path = require('path');
 
 const PLAYGROUND_PATH = __dirname;
+const BASENAME = '/';
 
-config.devServer = {
-  contentBase: PLAYGROUND_PATH,
-  port: 9000,
-  compress: true,
-  historyApiFallback: {
-    rewrites: [{from: /^\/[^\.]+$/, to: '/index.html'}],
+module.exports = {
+  mode: 'development',
+  devServer: {
+    contentBase: PLAYGROUND_PATH,
+    port: 9000,
+    compress: true,
+    historyApiFallback: {
+      rewrites: [{from: /^\/[^.]+$/, to: '/index.html'}],
+    },
+  },
+  devtool: 'cheap-module-eval-source-map',
+  entry: {
+    playground: PLAYGROUND_PATH,
+  },
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js', '.jsx'],
+    modules: [path.resolve('./node_modules')],
+    plugins: [
+      new TsConfigPathsPlugin({
+        configFileName: path.resolve(`./tsconfig.json`),
+        compiler: 'typescript',
+      }),
+    ],
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: `${PLAYGROUND_PATH}/index-template.html`,
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.(jpe|jpg|woff|woff2|eot|ttf|svg|otf)(\?.*$|$)/,
+        loader: 'file-loader',
+        options: {
+          name: '[path][name].[ext]',
+          publicPath: BASENAME,
+        },
+      },
+      {
+        test: /\.scss$/,
+        loader: [
+          'style-loader',
+          {
+            loader: 'css-loader',
+            query: {
+              namedExport: true,
+              modules: true,
+              importLoaders: true,
+              localIdentName: '[name]__[local]___[hash:base64:5]',
+            },
+          },
+          'postcss-loader',
+          {
+            loader: 'sass-loader',
+            options: {
+              includePaths: [],
+            },
+          },
+        ],
+      },
+      {
+        test: /\.tsx?$/,
+        loader: 'awesome-typescript-loader',
+        exclude: /(node_modules)/,
+        query: {
+          cacheDirectory: true,
+          presets: ['react', 'es2015'],
+          plugins: [
+            'transform-decorators-legacy',
+            'transform-object-rest-spread',
+          ],
+        },
+      },
+    ],
   },
 };
-config.entry.playground = PLAYGROUND_PATH;
-config.plugins.push(
-  new HtmlWebpackPlugin({
-    template: `${PLAYGROUND_PATH}/index-template.html`,
-  }),
-);
-
-module.exports = config;

rollup.config.js

@@ -0,0 +1,34 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import rollupTypescript from 'rollup-plugin-typescript2';
+import typescript from 'typescript';
+import postcss from 'rollup-plugin-postcss';
+import {
+  main as mainPath,
+  module as modulePath,
+  dependencies,
+} from './package.json';
+
+export default {
+  input: 'Intercom/index.ts',
+  output: [
+    {
+      file: mainPath,
+      format: 'cjs',
+    },
+    {
+      file: modulePath,
+      format: 'es',
+    },
+  ],
+  external: [...Object.keys(dependencies || {})],
+  plugins: [
+    rollupTypescript({
+      tsconfig: './tsconfig.json',
+      typescript,
+    }),
+    postcss({
+      modules: true,
+      namedExports: true,
+    }),
+  ],
+};

tests/build.test.js

@@ -0,0 +1,25 @@
+const {execSync} = require('child_process');
+const fs = require('fs');
+
+function execCommand(command) {
+  execSync(command, {stdio: 'inherit'});
+}
+
+describe('build', () => {
+  beforeAll(() => {
+    execCommand('yarn clean');
+  });
+
+  beforeEach(() => {
+    execCommand('yarn build');
+  });
+
+  afterEach(() => {
+    execCommand('yarn clean');
+  });
+
+  it('generates valid types', () => {
+    expect(fs.existsSync('./build/Intercom/index.d.ts')).toBe(true);
+    execCommand('yarn run tsc --noEmit build/Intercom/**/*.d.ts');
+  });
+});

tsconfig.json

@@ -9,13 +9,16 @@
     "jsx": "react",
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true,
-    "target": "es2016",
-    "lib": ["dom", "es2015", "es2016", "es2017"],
+    "target": "es2015",
+    "module": "ES2015",
     "moduleResolution": "node",
     "rootDir": ".",
     "baseUrl": ".",
-    "outDir": "build",
-    "declaration": true
+    "lib": ["dom", "es2015", "es2016", "es2017"],
+    "declaration": true,
+    "declarationDir": "./build",
+    "outDir": "./build"
   },
+  "include": ["./Intercom/**/*"],
   "exclude": ["node_modules", "playground", "build"]
 }