feat: introduce code splitting to component library

Author: HarveyD

package.json

@@ -2,7 +2,6 @@
   "name": "react-component-library",
   "version": "1.0.0",
   "main": "build/index.js",
-  "module": "build/index.esm.js",
   "files": [
     "build"
   ],

rollup.config.js

@@ -1,26 +1,20 @@
 import peerDepsExternal from "rollup-plugin-peer-deps-external";
-import resolve from "rollup-plugin-node-resolve";
-import commonjs from "rollup-plugin-commonjs";
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
 import typescript from "rollup-plugin-typescript2";
 import sass from "rollup-plugin-sass";
 import copy from "rollup-plugin-copy";
 
-import packageJson from "./package.json";
-
 export default {
-  input: "src/index.ts",
+  input: ["src/index.ts", "src/TestComponent/index.ts"],
   output: [
     {
-      file: packageJson.main,
+      dir: "build",
       format: "cjs",
       sourcemap: true
-    },
-    {
-      file: packageJson.module,
-      format: "esm",
-      sourcemap: true
     }
   ],
+  preserveModules: true, // Important if we want to code split
   plugins: [
     peerDepsExternal(),
     resolve(),

src/TestComponent/index.ts

@@ -0,0 +1,3 @@
+import TestComponent from "./TestComponent";
+
+export default TestComponent;

src/index.ts

@@ -1,3 +1,3 @@
-import TestComponent from "./TestComponent/TestComponent";
+import TestComponent from "./TestComponent";
 
 export { TestComponent };