fix: decrease bundle size and remove extra deps

add injectUniqueKeyframe function + tests

README.md

@@ -18,13 +18,13 @@
 ## Installation
 
 ```
-yarn add react-beacon-hint
+yarn add @floating-ui/react framer-motion react-beacon-hint
 ```
 
 or
 
 ```
-npm i react-beacon-hint
+npm i @floating-ui/react framer-motion react-beacon-hint
 ```
 
 ## Inspiration
@@ -43,4 +43,4 @@ All developers who wish to contribute through code or issues, take a look at the
 
 ## License
 
-This project is licensed under the MIT License - see the [LICENSE.md](https://github.com/moh3n9595/react-beacon-hint/blob/master/LICENSE) file for details
+This project is licensed under the MIT License - see the [LICENSE.md](https://github.com/moh3n9595/react-beacon-hint/blob/master/LICENSE) file for details.

example/src/App.tsx

@@ -1,6 +1,7 @@
 import {flip, FloatingTree, limitShift, offset, shift} from '@floating-ui/react';
 import {useEffect, useState} from 'react';
 import {FillBeacon, Floating, OutlineBeacon, Popover} from 'react-beacon-hint';
+import 'react-beacon-hint/lib/style.css';
 import './App.scss';
 
 function App() {

example/src/index.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 
-import '@styles';
 import App from './App';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(

example/vite.config.ts

@@ -6,9 +6,6 @@ import {defineConfig} from 'vite';
 export default defineConfig({
 	plugins: [react()],
 	resolve: {
-		alias: [
-			{find: 'react-beacon-hint', replacement: path.resolve(__dirname, '..')},
-			{find: '@styles', replacement: path.resolve(__dirname, '../lib/style.css')},
-		],
+		alias: [{find: 'react-beacon-hint', replacement: path.resolve(__dirname, '..')}],
 	},
 });

package.json

@@ -9,9 +9,7 @@
 		"example"
 	],
 	"scripts": {
-		"postinstall": "husky install",
-		"prepack": "pinst --disable",
-		"postpack": "pinst --enable",
+		"install:husky": "husky install",
 		"build": "vite build",
 		"dev": "concurrently --kill-others -n Component,Test,Example \"vite build --watch\" \"yarn test:watch\" \"yarn workspace example dev\"",
 		"test:watch": "vitest",
@@ -28,6 +26,10 @@
 		".": {
 			"import": "./lib/react-beacon-hint.es.js",
 			"require": "./lib/react-beacon-hint.umd.js"
+		},
+		"./lib/style.css": {
+			"import": "./lib/style.css",
+			"require": "./lib/style.css"
 		}
 	},
 	"keywords": [
@@ -59,11 +61,12 @@
 	"devDependencies": {
 		"@commitlint/cli": "^17.3.0",
 		"@commitlint/config-conventional": "^17.3.0",
+		"@floating-ui/react": "^0.15.1",
 		"@testing-library/jest-dom": "^5.16.5",
 		"@testing-library/react": "^13.4.0",
 		"@testing-library/user-event": "^14.4.3",
+		"@types/jsdom": "^20.0.1",
 		"@types/react": "^18.0.26",
-		"@types/styled-components": "^5.1.26",
 		"@typescript-eslint/eslint-plugin": "^5.47.1",
 		"@typescript-eslint/parser": "^5.47.1",
 		"@vitejs/plugin-react": "^3.0.0",
@@ -76,9 +79,9 @@
 		"eslint-plugin-prettier": "^4.2.1",
 		"eslint-plugin-react": "^7.31.11",
 		"eslint-plugin-unused-imports": "^2.0.0",
+		"framer-motion": "8.0.2",
 		"husky": "^8.0.2",
 		"jsdom": "^20.0.3",
-		"pinst": "^3.0.0",
 		"prettier": "^2.8.1",
 		"react": "^18.2.0",
 		"sass": "^1.57.1",
@@ -91,15 +94,11 @@
 		"vitest": "^0.26.2"
 	},
 	"peerDependencies": {
-		"react": "^18.2.0"
+		"@floating-ui/react": ">=0.15",
+		"framer-motion": ">=6.5",
+		"react": ">=16.8"
 	},
 	"dependencies": {
-		"@floating-ui/react": "^0.15.1",
-		"color-alpha": "^1.1.3",
-		"framer-motion": "^8.0.2",
-		"styled-components": "^5.3.6"
-	},
-	"resolutions": {
-		"styled-components": "^5"
+		"color-alpha": "^1.1.3"
 	}
 }

src/arrow/index.test.tsx

@@ -1,4 +1,4 @@
-import Arrow from '.';
+import {Arrow} from '.';
 import {render, screen} from '../test/utils';
 import {ArrowProps} from '../@types';
 

src/arrow/index.tsx

@@ -18,4 +18,5 @@ const Arrow = forwardRef<HTMLSpanElement, ArrowProps>(({size = 12, className = '
 });
 
 Arrow.displayName = 'Arrow';
-export default memo(Arrow);
+const MemoizedArrow = memo(Arrow);
+export {MemoizedArrow as Arrow};

src/beacons/fill/index.tsx

@@ -1,13 +1,19 @@
 import colorAlpha from 'color-alpha';
-import {memo} from 'react';
-import styled, {keyframes} from 'styled-components';
+import {memo, useLayoutEffect, useState} from 'react';
 import {BeaconProps} from '../../@types';
 import styles from './index.module.scss';
 import defaultStyles from '../index.module.scss';
+import {injectUniqueKeyframe} from '../../utils/cssInjector';
+
+const styleEl = document.createElement('style');
+document.head.appendChild(styleEl);
 
 const FillBeacon = ({size = 18, color = 'rgb(255, 0, 68)', className = '', style = {}}: BeaconProps) => {
-	const animation = keyframes`
-		0% {
+	const [animation, setAnimation] = useState('none');
+
+	useLayoutEffect(() => {
+		const {animationName} = injectUniqueKeyframe(
+			`0% {
 			transform: scale(0.95);
 			box-shadow: 0 0 0 0 ${colorAlpha(color, 0.7)};
 		}
@@ -18,13 +24,12 @@ const FillBeacon = ({size = 18, color = 'rgb(255, 0, 68)', className = '', style
 		100% {
 			transform: scale(0.95);
 			box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
-		}
-	`;
+		}`,
+			color,
+		);
 
-	const Pulse = styled.span`
-		animation-name: ${animation};
-		border-radius: ${size}px;
-	`;
+		setAnimation(animationName);
+	}, [color]);
 
 	return (
 		<span
@@ -33,7 +38,7 @@ const FillBeacon = ({size = 18, color = 'rgb(255, 0, 68)', className = '', style
 			data-testid='fill-beacon'
 		>
 			<button type='button' style={{width: size, height: size}}>
-				<Pulse className='pulse' style={{backgroundColor: color}} />
+				<span className='pulse' style={{backgroundColor: color, animationName: animation, borderRadius: size}} />
 			</button>
 		</span>
 	);

src/floating/index.tsx

@@ -16,7 +16,7 @@ import {
 import {AnimatePresence, motion} from 'framer-motion';
 import {forwardRef, Fragment, memo, useImperativeHandle, useLayoutEffect, useMemo, useState} from 'react';
 import {FloatingProps} from '../@types';
-import Arrow from '../arrow';
+import {Arrow} from '../arrow';
 
 export interface FloatingRef {
 	update: () => void;

src/test/setup.ts

@@ -1 +1,5 @@
 import '@testing-library/jest-dom';
+
+import {JSDOM} from 'jsdom';
+const dom = new JSDOM();
+global.document = dom.window.document;

src/utils/cssInjector.ts

@@ -0,0 +1,35 @@
+const styleEl = document.createElement('style');
+styleEl.setAttribute('data-testid', 'injectUniqueKeyframe');
+document.head.appendChild(styleEl);
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+const styleSheet = styleEl.sheet!;
+
+export const injectUniqueKeyframe = (keyframe: string, name: string) => {
+	// eslint-disable-next-line no-useless-escape
+	const escapedName = name.replace(/[\(|\)|\,|\ |\#|\%]/g, '');
+	const animationName = `animation-${escapedName}`;
+	const keyframes = `
+		@keyframes ${animationName} {
+			${keyframe}
+		}`;
+
+	styleSheet?.insertRule(keyframes, styleSheet?.cssRules?.length);
+	const uniqueRules: string[] = [];
+	const uniqueIndexes: number[] = [];
+	for (let index = 0; index < styleSheet?.cssRules?.length; index++) {
+		if (
+			typeof styleSheet?.cssRules[index]?.cssText === 'string' &&
+			!uniqueRules.includes(styleSheet?.cssRules[index]?.cssText)
+		) {
+			uniqueRules.push(styleSheet?.cssRules[index]?.cssText);
+			uniqueIndexes.push(index);
+		}
+	}
+	for (let index = 0; index < styleSheet?.cssRules?.length; index++) {
+		if (!uniqueIndexes.includes(index)) {
+			styleSheet?.deleteRule(index);
+		}
+	}
+
+	return {animationName, rulesLength: styleSheet?.cssRules?.length};
+};

src/utils/index.test.tsx

@@ -0,0 +1,28 @@
+import {injectUniqueKeyframe} from './cssInjector';
+
+describe('injectUniqueKeyframe', () => {
+	it('should set keyframes', () => {
+		const firstRule = 'first-test';
+		const secondRule = 'second-rule';
+		const keyframe = `0% {
+			transform: scale(0.5);
+			box-shadow: 0 0 0 0 red;
+		}
+		100% {
+			transform: scale(0.95);
+			box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+		}`;
+
+		const {rulesLength: firstAnimationNameRulesLength} = injectUniqueKeyframe(keyframe, firstRule);
+		expect(firstAnimationNameRulesLength).toBe(1);
+
+		const {rulesLength: secondAnimationNameRulesLength} = injectUniqueKeyframe(keyframe, secondRule);
+		expect(secondAnimationNameRulesLength).toBe(2);
+
+		const {rulesLength: thirdAnimationNameRulesLength} = injectUniqueKeyframe(keyframe, secondRule);
+		expect(thirdAnimationNameRulesLength).toBe(2);
+
+		const {rulesLength: fourthAnimationNameRulesLength} = injectUniqueKeyframe(keyframe, firstRule);
+		expect(fourthAnimationNameRulesLength).toBe(2);
+	});
+});

vite.config.ts

@@ -31,6 +31,9 @@ export default defineConfig({
 				globals: {
 					react: 'React',
 					'react-dom': 'ReactDom',
+					'styled-components': 'styled',
+					'@floating-ui/react': 'FloatingUIReactDOM',
+					'framer-motion': 'Motion',
 				},
 			},
 		},