Use Microbundle for building

.gitignore

@@ -1,3 +1,6 @@
 dist/
 node_modules/
 npm-debug.log
+.docz/
+.rts2_cache_*
+yarn-error.log

.prettierrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  trailingComma: 'es5',
+  tabWidth: 2,
+  semi: false,
+  singleQuote: true,
+  jsxSingleQuote: true,
+  bracketSpacing: false,
+}

.travis.yml

@@ -1,3 +1,13 @@
 language: node_js
 node_js:
-- "stable"
+- "stable"
+- "lts"
+
+deploy:
+  provider: pages
+  skip-cleanup: true
+  github-token: $GITHUB_TOKEN
+  local-dir: docs
+  keep-history: true
+  on:
+    branch: master

docs/examples.mdx

@@ -0,0 +1,85 @@
+---
+name: Examples
+---
+
+import compose from "recompose/compose";
+import {useState, useEffect} from 'react';
+import defaultProps from "recompose/defaultProps";
+import {withSpinner} from "../src/index.tsx";
+import {PropsTable, Playground} from "docz";
+
+# withSpinner
+
+## Properties
+
+<PropsTable of={withSpinner} />
+
+## Basic usage
+
+<Playground>
+{() => {
+		const Loading = () => <span>Loading...</span>;
+
+		const Component = compose(
+      defaultProps({data: {loading: true}}),
+			withSpinner({spinnerComponent: Loading}),
+    )(() => <div></div>)
+
+    return (
+    		<Component />
+    )
+}}
+</Playground>
+
+## Not loading
+
+<Playground>
+{() => {
+		const Loading = () => <span>Loading...</span>;
+
+		const Component = compose(
+      defaultProps({data: {loading: false}}),
+			withSpinner({spinnerComponent: Loading}),
+    )(() => <div>Done loading!</div>)
+
+    return (
+    		<Component />
+    )
+}}
+</Playground>
+
+## After time
+
+<Playground>
+{() => {
+		const Loading = () => <span>Loading...</span>
+    const DisplayComponent = ({data}) => <div>loading: {data.loading.toString()}, item: {data.item.id}</div>
+
+	  function Parent(WrappedComponent) {
+			const [loading, setLoading] = useState(true)
+			const [item, setItem] = useState(null)
+
+			useEffect(() => {
+				const timeoutId = setTimeout(() => {
+					setItem({id: 1})
+					setLoading(false)
+				}, 3000)
+
+				return function cleanup() {
+					clearTimeout(timeoutId)
+				}
+			});
+
+			return <WrappedComponent data={{loading, item}} />
+		}
+
+		const Component = compose(
+      WrappedComponent => () => Parent(WrappedComponent),
+      withSpinner({spinnerComponent: Loading}),
+    )(DisplayComponent)
+
+		return (
+			<Component />
+		)
+}}
+</Playground>

docs/index.mdx

@@ -0,0 +1,20 @@
+---
+me: Getting Started
+route: /
+order: 1
+---
+
+import { Link } from 'docz'
+
+# react-with-spinner
+React HOC for displaying a Spinner component while loading.
+
+## Installation
+
+```sh
+yarn add react-with-spinner
+npm install --save react-with-spinner
+```
+
+## Examples
+<Link to="/docs-examples#basic-usage">Checkout the examples</Link>.

doczrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  typescript: true
+};

jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  preset: 'ts-jest',
+}

package.json

@@ -1,34 +1,52 @@
 {
   "name": "react-with-spinner",
-  "version": "1.0.0",
-  "description": "",
-  "main": "dist/src/index.js",
-  "types": "dist/src/index.d.ts",
+  "version": "1.1.0",
+  "description": "React HOC for displaying a Spinner component while loading.",
   "scripts": {
-    "build": "tscomp build",
-    "watch": "tscomp watch",
-    "test": "tscomp test",
-    "prepublish": "npm run build"
+    "prepare": "npm run build",
+    "build": "microbundle build",
+    "watch": "microbundle watch",
+    "test": "jest test",
+    "start:docs": "docz dev",
+    "build:docs": "docz build"
   },
+  "main": "dist/react-with-spinner.js",
+  "umd:main": "dist/react-with-spinner.umd.js",
+  "module": "dist/react-with-spinner.es.js",
+  "types": "dist/",
+  "files": [
+    "dist",
+    "package.json",
+    "LICENSE-APACHE",
+    "LICENSE-MIT",
+    "README.md",
+    "CHANGELOG.md"
+  ],
   "repository": "https://github.com/beanloop/react-with-spinner.git",
   "author": "Beanloop AB",
   "license": "MIT",
   "devDependencies": {
     "@types/cheerio": "^0.22.8",
-    "@types/jest": "^19.2.3",
-    "@types/ramda": "^0.25.36",
+    "@types/enzyme": "^3.9.0",
+    "@types/enzyme-adapter-react-16": "^1.0.5",
+    "@types/jest": "^24.0.11",
+    "@types/jsdom": "^2.0.32",
+    "@types/ramda": "^0.26.3",
     "@types/react": "^16.4.8",
     "@types/recompose": "^0.26.4",
+    "docz": "^0.13.7",
+    "docz-theme-default": "^0.13.7",
     "enzyme": "^3.4.0",
-    "enzyme-adapter-react-16": "^1.1.1",
-    "enzyme-adapter-react-16.3": "^1.0.0",
+    "enzyme-adapter-react-16": "^1.11.2",
     "enzyme-to-json": "^3.3.4",
+    "jest": "^24.5.0",
     "jsdom": "^9.12.0",
+    "microbundle": "^0.11.0",
     "prop-types": "^15.6.2",
-    "react": "^16.4.2",
+    "react": "^16.8.4",
     "react-addons-test-utils": "^15.4.2",
-    "react-dom": "^16.4.2",
-    "tscomp": "^0.9.1",
+    "react-dom": "^16.8.4",
+    "ts-jest": "^24.0.0",
     "tslint": "^4.0.2",
     "tslint-config-beanloop": "^0.1.0",
     "typescript": "^3.0.1"

src/__snapshots__/index.test.tsx.snap

@@ -70,7 +70,7 @@ exports[`withSpinner should render spinner if loading is true 1`] = `
 `;
 
 exports[`withSpinner should render spinner in 100 ms and after render component 1`] = `
-<_class>
+<class_1>
   <withSpinner(DisplayComponent)
     data={
       Object {
@@ -99,11 +99,11 @@ exports[`withSpinner should render spinner in 100 ms and after render component
       </div>
     </DisplayComponent>
   </withSpinner(DisplayComponent)>
-</_class>
+</class_1>
 `;
 
 exports[`withSpinner should support custom nested loading property 1`] = `
-<_class3>
+<class_3>
   <withSpinner(DisplayComponent)
     result={
       Object {
@@ -131,10 +131,11 @@ exports[`withSpinner should support custom nested loading property 1`] = `
       <div>
         loading: 
         false
-        , item: 
+        , item:
+
         1
       </div>
     </DisplayComponent>
   </withSpinner(DisplayComponent)>
-</_class3>
+</class_3>
 `;

src/index.d.ts

@@ -1,49 +1,59 @@
 /// <reference types="react" />
-import { ReactType } from 'react';
+import {ReactType, ComponentType} from 'react'
 export declare type Properties = {
-    /**
-     * Property to look for, if prop.loading is true then the [spinnerComponent]
-     * will get rendered.
-     * Defaults to 'data'.
-     */
-    prop?: string | Array<string>;
-    /**
-     * Timeout in milliseconds, the [spinnerComponent] wont get rendered
-     * before the timeout.
-     * Defaults to 100.
-     */
-    timeout?: number;
-    /**
-     * If the HOC should handle errors, if true the [errorComponent] will be rendered.
-     * Defaults to true.
-     */
-    handleError?: boolean;
-    /**
-     * Component to be rendered if an error occurs.
-     * Defaults to null.
-     */
-    errorComponent?: ReactType;
-    /**
-     * If the HOC should take partial data into account.
-     * Defaults to false.
-     */
-    partial?: boolean;
-    /**
-     * Component that should be rendered while loading.
-     * Defaults to a React Toolbox ProgressBar component.
-     */
-    spinnerComponent?: ReactType;
-    /**
-     * Extra props that should be passed to the [spinnerComponent].
-     */
-    spinnerProps?: Object;
-    /**
-     * Function that can be used to skip rendering the [errorComponent].
-     * If it returns true the [errorComponent] will not get rendered.
-     * This can for example be used to skip rendering the [errorComponent]
-     * for validation errors.
-     */
-    skipErrors?: (data: any) => boolean;
-    emptyComponent?: ReactType;
-};
-export declare const withSpinner: ({prop, timeout, handleError, partial, skipErrors, spinnerProps, errorComponent: ErrorComponent, spinnerComponent: Spinner, emptyComponent: EmptyComponent}?: Properties) => any;
+  /**
+   * Property to look for, if prop.loading is true then the [spinnerComponent]
+   * will get rendered.
+   * Defaults to 'data'.
+   */
+  prop?: string | Array<string>
+  /**
+   * Timeout in milliseconds, the [spinnerComponent] wont get rendered
+   * before the timeout.
+   * Defaults to 100.
+   */
+  timeout?: number
+  /**
+   * If the HOC should handle errors, if true the [errorComponent] will be rendered.
+   * Defaults to true.
+   */
+  handleError?: boolean
+  /**
+   * Component to be rendered if an error occurs.
+   * Defaults to null.
+   */
+  errorComponent?: ReactType
+  /**
+   * If the HOC should take partial data into account.
+   * Defaults to false.
+   */
+  partial?: boolean
+  /**
+   * Component that should be rendered while loading.
+   * Defaults to a React Toolbox ProgressBar component.
+   */
+  spinnerComponent?: ReactType
+  /**
+   * Extra props that should be passed to the [spinnerComponent].
+   */
+  spinnerProps?: Object
+  /**
+   * Function that can be used to skip rendering the [errorComponent].
+   * If it returns true the [errorComponent] will not get rendered.
+   * This can for example be used to skip rendering the [errorComponent]
+   * for validation errors.
+   */
+  skipErrors?: (data: any) => boolean
+  emptyComponent?: ReactType
+}
+export declare const withSpinner: ({
+  prop,
+  timeout,
+  handleError,
+  partial,
+  skipErrors,
+  spinnerProps,
+  errorComponent: ErrorComponent,
+  spinnerComponent: Spinner,
+  emptyComponent: EmptyComponent,
+}?: Properties) => ComponentType<any>