Add code splitting (#32)

* feat: add code splitting (#16)

Author: csvenke

jest.config.js

@@ -14,5 +14,10 @@ module.exports = {
       statements: 90,
     },
   },
-  collectCoverageFrom: ['src/@(components|utils)/**/*.@(ts|tsx)']
+  collectCoverageFrom: ['src/@(components|utils)/**/*.@(ts|tsx)'],
+  globals: {
+    'ts-jest': {
+      'tsConfigFile': './tsconfig.jest.json',
+    },
+  },
 };

package-lock.json

@@ -15,7 +15,7 @@
   },
   "main": "index.cjs.js",
   "module": "index.esm.js",
-  "types": "types/index.d.ts",
+  "types": "index.d.ts",
   "private": false,
   "license": "MIT",
   "keywords": [
@@ -61,6 +61,7 @@
     "react-styleguidist": "^7.1.3",
     "react": "^16.4.1",
     "rimraf": "^2.6.2",
+    "rollup-plugin-commonjs": "^9.1.4",
     "rollup-plugin-filesize": "^4.0.1",
     "rollup-plugin-node-resolve": "^3.3.0",
     "rollup-plugin-terser": "^1.0.1",
@@ -81,12 +82,12 @@
     "clean:build": "rimraf ./lib && rimraf ./build",
     "contributors:add": "all-contributors add",
     "contributors:generate": "all-contributors generate",
-    "copy:build": "cp package.json lib/ && cp README.md lib/ && cp LICENSE lib/",
+    "copy:build": "cp package.json lib/ && cp README.md lib/ && cp LICENSE lib/ && cp src/index.d.ts lib/",
     "deploy": "npm run build && cd lib && npm publish && cd ..",
     "docs:server": "styleguidist server",
     "docs": "styleguidist build",
     "lint:fix": "npm run lint:write --fix \"src/**/*.{ts,tsx}\"",
-    "lint:write": "tslint -p tsconfig.build.json -c tslint.json",
+    "lint:write": "tslint -p tsconfig.json -c tslint.json",
     "lint": "npm run lint:write  \"src/**/*.{ts,tsx}\"",
     "prettier:write": "prettier -c .prettierrc --write",
     "prettier": "npm run prettier:write \"src/**/*.{ts,tsx}\"",

package.json

@@ -3,21 +3,23 @@ import { uglify } from 'rollup-plugin-uglify';
 import { terser } from 'rollup-plugin-terser';
 import resolve from 'rollup-plugin-node-resolve';
 import filesize from 'rollup-plugin-filesize';
+import commonjs from 'rollup-plugin-commonjs';
 import pkg from './package.json';
 
-const createConfig = ({ output, plugins } = {}) => ({
+const createConfig = ({ output, plugins, ...restConfig } = {}) => ({
   input: 'src/index.ts',
   output,
   external: ['react', 'prop-types', 'tslib'],
   plugins: [
-    resolve(),
     typescript({
-      useTsconfigDeclarationDir: true,
-      tsconfig: './tsconfig.build.json',
+      tsconfig: './tsconfig.json',
       typescript: require('typescript'),
     }),
+    commonjs(),
+    resolve(),
     ...plugins,
   ],
+  ...restConfig,
 });
 
 export default [
@@ -29,4 +31,22 @@ export default [
     output: { file: `lib/${pkg.module}`, format: 'esm' },
     plugins: [terser(), filesize()],
   }),
+  createConfig({
+    experimentalCodeSplitting: true,
+    optimizeChunks: true,
+    input: [
+      'src/components/List/List.tsx',
+      'src/components/Show/Show.tsx',
+      'src/components/ShowAsync/ShowAsync.tsx',
+      'src/components/Switch/Switch.tsx',
+      'src/components/Switch/SwitchCase.tsx',
+      'src/components/Switch/SwitchDefault.tsx',
+    ],
+    output: {
+      dir: 'lib',
+      format: 'cjs',
+      exports: 'named',
+    },
+    plugins: [uglify()],
+  }),
 ];

rollup.config.js

@@ -0,0 +1,114 @@
+/// <reference types="react" />
+
+interface ICoreProps {
+  /** Shorthand for primary content. */
+  render?: () => React.ReactNode;
+
+  /** Primary content. */
+  children?: any;
+}
+
+declare module 'react-semantic-render/List' {
+  interface IListProps {
+    /** Array to map. */
+    items: any[];
+    /** Shorthand for primary content. */
+    render?: (item?: any, index?: number, array?: any[]) => React.ReactNode;
+    /** Primary content. */
+    children?: any;
+  }
+
+  /**
+   * Renders content from specified callback function from either `render` or `children` on each element of `items`.
+   */
+  export const List: React.SFC<IListProps>;
+
+  export default List;
+}
+
+declare module 'react-semantic-render/Show' {
+  interface IShowProps extends ICoreProps {
+    /** Conditional statement.  */
+    when: boolean;
+  }
+
+  /**
+   * Renders content if `when` equals true.
+   */
+  export const Show: React.SFC<IShowProps>;
+
+  export default Show;
+}
+
+declare module 'react-semantic-render/ShowAsync' {
+  const initialState: {
+    status: string;
+    value: string;
+  };
+
+  interface IShowAsyncProps {
+    /** The promise. */
+    when: Promise<any>;
+    /** Render content when promise is pending. */
+    pending?: () => React.ReactNode;
+    /** Render content when promise is rejected. */
+    rejected?: (error?: any) => React.ReactNode;
+    /** Shorthand for primary content. */
+    render?: (value?: any) => React.ReactNode;
+    /** Primary content. Renders content when promise is resolved. */
+    children?: any;
+  }
+
+  type IShowAsyncState = Readonly<typeof initialState>;
+
+  /**
+   * Renders content when status of specified promise is pending, resolved or rejected.
+   */
+  export class ShowAsync extends React.Component<IShowAsyncProps, IShowAsyncState> {}
+  export default ShowAsync;
+}
+
+declare module 'react-semantic-render/Switch' {
+  interface ISwitchProps {
+    /** Conditional statement. */
+    value: any;
+    /** Primary content. */
+    children: React.ReactNode;
+  }
+
+  interface ISwitchCaseProps extends ICoreProps {
+    /** Conditional statement. */
+    value: any;
+  }
+
+  /**
+   * Helper component that is accessed from `Switch` component.
+   */
+  const SwitchCase: React.SFC<ISwitchCaseProps>;
+
+  /**
+   * Helper component that is accessed from `Switch` component.
+   */
+  const SwitchDefault: React.SFC<ICoreProps>;
+
+  type SwitchComponent = React.SFC<ISwitchProps> & {
+    Case?: typeof SwitchCase;
+    Default?: typeof SwitchDefault;
+  };
+
+  /**
+   * Renders content from first `Switch.Case` that matches `value`, else `Switch.Default` if it exists.
+   */
+  export const Switch: SwitchComponent;
+
+  export default Switch;
+}
+
+declare module 'react-semantic-render' {
+  import List from 'react-semantic-render/List';
+  import Show from 'react-semantic-render/Show';
+  import ShowAsync from 'react-semantic-render/ShowAsync';
+  import Switch from 'react-semantic-render/Switch';
+
+  export { List, Show, ShowAsync, Switch };
+}

src/index.d.ts

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "commonjs"
+  }
+}

tsconfig.build.json

@@ -2,8 +2,8 @@
   "compilerOptions": {
     "baseUrl": ".",
     "jsx": "react",
-    "lib": ["dom", "es2015"],
-    "module": "commonjs",
+    "lib": ["dom", "es2015", "es2016", "es2017"],
+    "module": "es2015",
     "moduleResolution": "node",
     "outDir": "lib/",
     "target": "es5",