build: 🔨 Fix rollup config, update package.json & add test project

package.json

@@ -1,26 +1,40 @@
 {
   "name": "figma-react-hooks",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
+  "version": "0.1.0",
+  "description": "Custom React hooks for the available Figma plugin UI actions",
+  "main": "dist/bundle.js",
+  "module": "dist/bundle.esm.js",
   "scripts": {
     "build": "rollup -c",
-    "dev": "rollup -c -w"
+    "dev": "rollup -c -w",
+    "prepublishOnly": "npm run build"
   },
-  "keywords": [],
+  "keywords": [
+    "React",
+    "Hooks",
+    "Figma"
+  ],
   "author": "Michael Meyer",
   "license": "MIT",
   "peerDependencies": {
-    "react": "^16.8.0"
+    "react": "^16.8.0 || ^17.0.0"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^20.0.0",
+    "@rollup/plugin-node-resolve": "^13.0.4",
     "@rollup/plugin-typescript": "^8.2.5",
     "@types/rollup": "^0.54.0",
     "rollup": "^2.56.2",
     "rollup-plugin-auto-external": "^2.0.0",
     "rollup-plugin-livereload": "^2.0.5",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-terser": "^7.0.2",
     "typescript": "^4.3.5"
+  },
+  "bugs": {
+    "url": "https://github.com/mtmeyer/figma-react-hooks/issues"
+  },
+  "homepage": {
+    "url": "https://github.com/mtmeyer/figma-react-hooks#readme"
   }
 }

rollup.config.js

@@ -1,27 +1,39 @@
-// import resolve from '@rollup/plugin-node-resolve';
+import resolve from '@rollup/plugin-node-resolve';
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
 import commonjs from '@rollup/plugin-commonjs';
 import livereload from 'rollup-plugin-livereload';
 import { terser } from 'rollup-plugin-terser';
 import typescript from '@rollup/plugin-typescript';
-import autoExternal from 'rollup-plugin-auto-external';
+// import autoExternal from 'rollup-plugin-auto-external';
 
 const production = !process.env.ROLLUP_WATCH;
+const packageJson = require('./package.json');
 
 export default [
   {
     input: 'src/index.ts',
-    output: {
-      name: 'bundle',
-      file: 'dist/bundle.js',
-      format: 'umd'
-    },
+    output: [
+      {
+        file: packageJson.main,
+        format: 'cjs',
+        sourcemap: true
+      },
+      {
+        file: packageJson.module,
+        format: 'esm',
+        sourcemap: true
+      }
+    ],
     plugins: [
-      autoExternal(),
+      // autoExternal(),
+      peerDepsExternal(),
 
-      typescript({ sourceMap: !production }),
+      resolve(),
 
       commonjs(),
 
+      typescript({ sourceMap: !production }),
+
       // If dev mode, serve and livereload
       !production && serve(),
       !production && livereload('dist'),

src/index.ts

@@ -1,16 +1,4 @@
-import { useEffect } from 'react';
+import useOnMessage from './useOnMessage';
+import usePostMessage from './usePostMessage';
 
-export function usePostMessage(object: any, options = '*'): void {
-  parent.postMessage({ pluginMessage: object }, options);
-}
-
-export function useOnMessage(inputFunction?: (data: any) => void): any {
-  useEffect(() => {
-    window.onmessage = (event) => {
-      let data = event.data.pluginMessage;
-      if (inputFunction) {
-        inputFunction(data);
-      }
-    };
-  }, []);
-}
+export { useOnMessage, usePostMessage };

src/useOnMessage.ts

@@ -0,0 +1,12 @@
+import { useEffect } from 'react';
+
+export default function useOnMessage(inputFunction?: (data: any) => void): any {
+  useEffect(() => {
+    window.onmessage = (event) => {
+      let data = event.data.pluginMessage;
+      if (inputFunction) {
+        inputFunction(data);
+      }
+    };
+  }, []);
+}

src/usePostMessage.ts

@@ -0,0 +1,3 @@
+export default function usePostMessage(object: any, options = '*'): void {
+  parent.postMessage({ pluginMessage: object }, options);
+}

test-project/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "plugins": ["@babel/plugin-transform-runtime"]
+}