implementing rollup for bundling

Author: iChristwin

package-lock.json

@@ -22,15 +22,28 @@
     "seedrandom": "^3.0.5"
   },
   "devDependencies": {
+    "@babel/core": "^7.23.6",
+    "@babel/preset-react": "^7.23.3",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "rollup": "^4.9.1"
   },
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "main": "src/index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  }
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "rollup": "rollup -c"
+  },
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "files": [
+    "dist"
+  ]
 }

package.json

@@ -0,0 +1,35 @@
+import babel from "@rollup/plugin-babel";
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import terser from "@rollup/plugin-terser";
+
+export default [
+  {
+    input: "src/index.js",
+    external: ["react", "react-dom", "seedrandom"],
+    output: [
+      {
+        file: "dist/index.cjs",
+        format: "cjs",
+      },
+      {
+        file: "dist/index.js",
+        format: "es",
+        exports: "named",
+      },
+    ],
+    plugins: [
+      babel({
+        exclude: "node_modules/**",
+        presets: ["@babel/preset-react"],
+        babelHelpers: "bundled",
+      }),
+      resolve({
+        moduleDirectories: ["node_modules", "src"],
+        extensions: [".js", ".jsx"],
+      }),
+      commonjs(),
+      terser(),
+    ],
+  },
+];

rollup.config.js

@@ -1,3 +1,4 @@
+import React from "react";
 import {
   Arturito,
   Bulging,

src/components/Eyes.jsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Eyes } from "./Eyes";
 import { Mouth } from "./Mouth";
 import { Texture } from "./Texture";

src/components/M3terHead.jsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import {
   Arturito,
   Bite,

src/components/Mouth.jsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Camo1, Camo2, Dirty1, Dirty2, Dots } from "../parts/Textures";
 
 export const Texture = (props) => {

src/components/Texture.jsx

@@ -1 +1 @@
-export * from './M3terHead'
+export * from "./M3terHead.jsx";

src/components/index.js

@@ -1 +1 @@
-export * from './components'
+export * from "./components";

src/index.js

@@ -1,3 +1,5 @@
+import React from 'react';
+
 export const Arturito = () => {
   return (
     <>

src/parts/Eyes/Arturito.jsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 export const Bulging = () => {
   return (
     <>

src/parts/Eyes/Bulging.jsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 export const Dizzy = () => {
   return (
     <>

src/parts/Eyes/Dizzy.jsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 export const Eva = () => {
   return (
     <>

src/parts/Eyes/Eva.jsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 export const Frame1 = () => {
   return (
     <>

src/parts/Eyes/Frame1.jsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 export const Frame2 = () => {
   return (
     <>

src/parts/Eyes/Frame2.jsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 export const Glow = () => {
   return (
     <>

src/parts/Eyes/Glow.jsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 export const Hal = () => {
   return (
     <>

src/parts/Eyes/Hal.jsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 export const Happy = () => {
   return (
     <>

src/parts/Eyes/Happy.jsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 export const Hearts = () => {
   return (
     <>

src/parts/Eyes/Hearts.jsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 export const Robocop = () => {
   return (
     <>

src/parts/Eyes/Robocop.jsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 export const Round = () => {
   return (
     <>

src/parts/Eyes/Round.jsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 export const RoundFrame1 = () => {
   return (
     <>

src/parts/Eyes/RoundFrame1.jsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 export const RoundFrame2 = () => {
   return (
     <>

src/parts/Eyes/RoundFrame2.jsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 export const Sensor = () => {
   return (
     <>

src/parts/Eyes/Sensor.jsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 export const Shade = () => {
   return (
     <>

src/parts/Eyes/Shade.jsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 export const Arturito = () => {
   return (
     <>

src/parts/Mouths/Arturito.jsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 export const Bite = () => {
   return (
     <>

src/parts/Mouths/Bite.jsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 export const Diagram = () => {
   return (
     <>

src/parts/Mouths/Diagram.jsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 export const Grill1 = () => {
   return (
     <>

src/parts/Mouths/Grill1.jsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 export const Grill2 = () => {
   return (
     <>

src/parts/Mouths/Grill2.jsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 export const Grill3 = () => {
   return (
     <>

src/parts/Mouths/Grill3.jsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 export const Robocop = () => {
   return (
     <>

src/parts/Mouths/Robocop.jsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 export const Smile1 = () => {
   return (
     <>

src/parts/Mouths/Smile1.jsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 export const Smile2 = () => {
   return (
     <>

src/parts/Mouths/Smile2.jsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 export const Square1 = () => {
   return (
     <>

src/parts/Mouths/Square1.jsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 export const Square2 = () => {
   return (
     <>

src/parts/Mouths/Square2.jsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 export const Camo1 = () => {
   return (
     <>

src/parts/Textures/Camo1.jsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 export const Camo2 = () => {
   return (
     <>

src/parts/Textures/Camo2.jsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 export const Dirty1 = () => {
   return (
     <svg

src/parts/Textures/Dirty1.jsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 export const Dirty2 = () => {
   return (
     <>

src/parts/Textures/Dirty2.jsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 export const Dots = () => {
   return (
     <>