fix(*): module bundler for export

Issue: #2

Author: garthenweb

lib/ConnectViewport.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import wrapDisplayName from 'recompose/wrapDisplayName';
+import { wrapDisplayName } from 'recompose';
 
 import { IScroll, IDimensions } from './index';
 import ObserveViewport from './ObserveViewport';

lib/ObserveBoundingClientRect.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-const raf = require('raf');
+import raf from 'raf';
 
 import { shallowEqualRect } from './utils';
 import { IRect } from './types';

lib/ObserveViewport.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-const raf = require('raf');
+import raf from 'raf';
 
 import {
   Consumer,

lib/ViewportProvider.tsx

@@ -1,10 +1,8 @@
 import * as React from 'react';
-const throttle = require('lodash.throttle');
-const debounce = require('lodash.debounce');
-const memoizeOne = require('memoize-one');
-const memoize =
-  typeof memoizeOne === 'function' ? memoizeOne : memoizeOne.default;
-const raf = require('raf');
+import throttle from 'lodash.throttle';
+import debounce from 'lodash.debounce';
+import memoize from 'memoize-one';
+import raf from 'raf';
 
 import {
   shallowEqualScroll,

lib/types.d.ts renamed to lib/modules.d.ts

@@ -3,6 +3,5 @@ declare module 'raf' {
     (tick: Function): NodeJS.Timer;
     cancel: (id: NodeJS.Timer) => void;
   };
-
-  export default raf;
+  export = raf;
 }

package-lock.json

@@ -3,10 +3,12 @@
   "version": "0.3.3",
   "description": "Utility components for working with the viewport in react",
   "main": "dist/index.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
   "scripts": {
     "start": "rm -rf ./.cache && parcel ./examples/index.html --out-dir='examples-dist'",
     "precompile": "rm -rf dist",
-    "compile": "tsc --project ./tsconfig.json",
+    "compile": "rollup -c",
     "test": "jest lib",
     "fmt": "prettier --write \"lib/*.{ts,tsx}\"  \"examples/*.{ts,tsx}\"",
     "prepublish": "npm run compile",
@@ -29,6 +31,8 @@
   ],
   "license": "MIT",
   "devDependencies": {
+    "@types/lodash.debounce": "^4.0.4",
+    "@types/lodash.throttle": "^4.1.4",
     "@types/memoize-one": "^3.1.1",
     "@types/node": "^10.9.2",
     "@types/react": "^16.4.11",
@@ -40,6 +44,8 @@
     "prettier": "^1.14.2",
     "react": "^16.4.2",
     "react-dom": "^16.4.2",
+    "rollup": "^0.66.0",
+    "rollup-plugin-typescript2": "^0.17.0",
     "ts-jest": "^23.1.4",
     "typescript": "^3.0.1"
   },

package.json

@@ -0,0 +1,24 @@
+import typescript from 'rollup-plugin-typescript2';
+import pkg from './package.json';
+export default {
+  input: 'lib/index.ts',
+  output: [
+    {
+      file: pkg.main,
+      format: 'cjs',
+    },
+    {
+      file: pkg.module,
+      format: 'es',
+    },
+  ],
+  external: [
+    ...Object.keys(pkg.dependencies || {}),
+    ...Object.keys(pkg.peerDependencies || {}),
+  ],
+  plugins: [
+    typescript({
+      typescript: require('typescript'),
+    }),
+  ],
+};

rollup.config.js

@@ -1,14 +1,13 @@
 {
   "compilerOptions": {
-    "outDir": "dist",
-    "module": "CommonJS",
+    "declaration": true,
+    "declarationDir": "./dist",
+    "module": "es6",
+    "outDir": "./dist",
     "target": "es5",
     "lib": ["es6", "dom"],
     "sourceMap": true,
     "jsx": "react",
-    "moduleResolution": "node",
-    "rootDir": "lib",
-    "declaration": true,
     "forceConsistentCasingInFileNames": true,
     "noImplicitReturns": true,
     "noImplicitThis": true,
@@ -17,8 +16,7 @@
     "suppressImplicitAnyIndexErrors": true,
     "noUnusedLocals": true,
     "alwaysStrict": true,
-    "experimentalDecorators": true
-
+    "allowSyntheticDefaultImports": true
   },
   "include": [
     "lib/**/*"