add build logic

.gitignore

@@ -29,3 +29,5 @@ yarn-error.log*
 
 automation/.nyc_output/
 .devcontainer
+
+dist

package.json

@@ -2,7 +2,15 @@
   "name": "@vegaprotocol/react-utils",
   "version": "0.1.0",
   "private": true,
+  "exports": {
+    ".": "./dist/modern.js",
+    "./dist/": "./dist/"
+  },
+  "main": "./dist/legacy.js",
+  "module": "./dist/module.js",
+  "types": "./dist/types/index.d.ts",
   "dependencies": {
+    "@babel/plugin-transform-runtime": "^7.15.0",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
@@ -18,6 +26,8 @@
     "web-vitals": "^1.0.1"
   },
   "scripts": {
+    "build": "rollup -c && yarn build:types",
+    "build:types": "tsc",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "storybook": "start-storybook -p 6006 -s public",
@@ -52,11 +62,23 @@
     ]
   },
   "devDependencies": {
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^20.0.0",
+    "@rollup/plugin-node-resolve": "^13.0.4",
+    "@rollup/plugin-typescript": "^8.2.5",
     "@storybook/addon-actions": "^6.3.8",
     "@storybook/addon-essentials": "^6.3.8",
     "@storybook/addon-links": "^6.3.8",
     "@storybook/node-logger": "^6.3.8",
     "@storybook/preset-create-react-app": "^3.2.0",
-    "@storybook/react": "^6.3.8"
+    "@storybook/react": "^6.3.8",
+    "postcss": "8.3.6",
+    "rollup": "^2.56.3",
+    "rollup-plugin-postcss": "^4.0.1",
+    "rollup-plugin-terser": "^7.0.2"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0"
   }
-}
+}

rollup.config.js

@@ -0,0 +1,91 @@
+import { babel, getBabelOutputPlugin } from "@rollup/plugin-babel";
+import commonjs from "@rollup/plugin-commonjs";
+import { nodeResolve } from "@rollup/plugin-node-resolve";
+import path from "path";
+import postcss from "rollup-plugin-postcss";
+import { terser } from "rollup-plugin-terser";
+
+import * as meta from "./package.json";
+console.log(meta);
+
+const extensions = [".js", ".jsx", ".ts", ".tsx"];
+
+const globals = {
+  react: "React",
+  "react-dom": "ReactDOM",
+};
+
+const config = {
+  input: "src/index.ts",
+  external: [/@babel\/runtime/, ...Object.keys(globals)],
+  output: [
+    {
+      file: meta.exports["."],
+      format: "es",
+      plugins: [
+        getBabelOutputPlugin({
+          presets: [
+            [
+              "@babel/preset-env",
+              {
+                targets: { esmodules: true },
+                bugfixes: true,
+                loose: true,
+                debug: false,
+              },
+            ],
+          ],
+        }),
+      ],
+    },
+    {
+      file: meta.module,
+      format: "es",
+      plugins: [
+        getBabelOutputPlugin({
+          presets: [
+            [
+              "@babel/preset-env",
+              {
+                targets: { esmodules: true },
+                bugfixes: false,
+                loose: true,
+                debug: false,
+              },
+            ],
+          ],
+        }),
+      ],
+    },
+    {
+      file: meta.main,
+      format: "cjs",
+      globals,
+      plugins: [
+        getBabelOutputPlugin({
+          presets: ["@babel/preset-env"],
+        }),
+      ],
+    },
+  ],
+  plugins: [
+    nodeResolve({ extensions }),
+    commonjs(),
+    postcss({
+      autoModules: true,
+      extract: path.resolve("dist/style.css"),
+    }),
+    babel({
+      extensions,
+      plugins: ["@babel/plugin-transform-runtime"],
+      presets: [
+        "@babel/preset-react",
+        ["@babel/preset-typescript", { allExtensions: true, isTSX: true }],
+      ],
+      babelHelpers: "runtime",
+    }),
+    terser(),
+  ],
+};
+
+export default config;