fix: module

Author: ShaunLWM

package.json

@@ -1,8 +1,13 @@
 {
 	"name": "react-animated-heart",
-	"version": "0.0.7",
+	"version": "0.0.8-beta.6",
 	"description": "Simple Twitter-like animated heart",
-	"main": "dist/index.js",
+	"main": "dist/cjs/index.js",
+	"module": "dist/esm/index.js",
+	"files": [
+		"dist"
+	],
+	"types": "dist/index.d.ts",
 	"private": false,
 	"repository": "git@github.com:ShaunLWM/react-animated-heart.git",
 	"author": "ShaunLWM",
@@ -16,40 +21,22 @@
 		"exploding button"
 	],
 	"dependencies": {
-		"goober": "^2.1.9",
-		"react": "^17.0.2",
-		"react-dom": "^17.0.2",
-		"react-scripts": "4.0.3"
+		"goober": "^2.1.13",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"typescript": "^4.7.4"
 	},
 	"scripts": {
-		"start": "react-scripts start",
-		"build": "react-scripts build",
-		"test": "react-scripts test",
-		"eject": "react-scripts eject",
-		"publish:npm": "rm -rf dist && mkdir dist && babel src/components -d dist --copy-files"
-	},
-	"eslintConfig": {
-		"extends": "react-app"
-	},
-	"browserslist": {
-		"production": [
-			">0.2%",
-			"not dead",
-			"not op_mini all"
-		],
-		"development": [
-			"last 1 chrome version",
-			"last 1 firefox version",
-			"last 1 safari version"
-		]
+		"rollup": "rollup -c",
+		"prepublishOnly": "npm run rollup"
 	},
 	"devDependencies": {
-		"@babel/cli": "^7.13.14",
-		"@babel/preset-react": "^7.13.13"
-	},
-	"babel": {
-		"presets": [
-			"@babel/preset-react"
-		]
+		"@rollup/plugin-commonjs": "^21.0.1",
+		"@rollup/plugin-node-resolve": "^13.0.6",
+		"@rollup/plugin-typescript": "^8.3.0",
+		"@types/react": "^18.0.38",
+		"rollup": "^2.60.0",
+		"rollup-plugin-dts": "^4.0.1",
+		"tslib": "^2.5.0"
 	}
 }

rollup.config.js

@@ -0,0 +1,35 @@
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import typescript from "@rollup/plugin-typescript";
+import dts from "rollup-plugin-dts";
+
+const packageJson = require("./package.json");
+
+// eslint-disable-next-line import/no-anonymous-default-export
+export default [
+  {
+    input: "src/index.tsx",
+    output: [
+      {
+        file: packageJson.main,
+        format: "cjs",
+        sourcemap: true,
+      },
+      {
+        file: packageJson.module,
+        format: "esm",
+        sourcemap: true,
+      },
+    ],
+    plugins: [
+      resolve(),
+      commonjs(),
+      typescript({ tsconfig: "./tsconfig.json" }),
+    ],
+  },
+  {
+    input: "dist/esm/index.d.ts",
+    output: [{ file: "dist/index.d.ts", format: "esm" }],
+    plugins: [dts()],
+  },
+];

src/components/index.js src/index.tsxsrc/components/index.js renamed to src/index.tsx

@@ -1,9 +1,15 @@
-import React from "react";
+import { createElement } from "react";
 import { setup, styled } from "goober";
 
-setup(React.createElement);
+setup(createElement);
 
-const HeartUI = styled('div')(({ isClick, styles }) => [
+export interface HeartProp {
+	isClick: boolean;
+	styles?: any;
+	onClick: () => void;
+}
+
+const HeartUI = (styled('div') as any)(({ isClick, styles }: Partial<HeartProp>) => [
 	{
 		width: '100px',
 		height: '100px',
@@ -18,6 +24,6 @@ const HeartUI = styled('div')(({ isClick, styles }) => [
 	styles
 ]);
 
-export default function Heart({ isClick, onClick, styles }) {
+export default function Heart({ isClick, onClick, styles }: HeartProp) {
 	return <HeartUI isClick={isClick} onClick={onClick} styles={styles} />;
 }

tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "es5", 
+    "esModuleInterop": true, 
+    "forceConsistentCasingInFileNames": true,
+    "strict": true, 
+    "skipLibCheck": true,
+    "jsx": "react-jsx", 
+    "module": "ESNext",  
+    "declaration": true,
+    "declarationDir": "types",
+    "sourceMap": true,
+    "outDir": "dist",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "emitDeclarationOnly": true,
+  }
+}