migrated build to rollup/npm

enabled react-jsx in runtime

Author: stripearmy

dist/css/styles.css

@@ -1,18 +1,16 @@
-import { default as default_2 } from 'react';
-
-export declare const STRPCounter: default_2.FC<STRPCounterProps>;
-
-declare type STRPCounterProps = {
+import React from 'react';
+import './css/styles.css';
+export interface STRPCounterProps {
     value: number | string;
     fontSize?: string;
     minLength?: number;
     rollingMode?: boolean;
     delimiter?: string | false;
     decimalSeparator?: string | false;
-    unitLabel?: string | default_2.ReactNode;
+    unitLabel?: string | React.ReactNode;
     unitLabelPosition?: 'left' | 'right';
     stepDuration?: number;
     easing?: string | false;
-};
-
-export { }
+}
+declare const STRPCounter: React.FC<STRPCounterProps>;
+export default STRPCounter;

dist/react-strp-counter.css

@@ -0,0 +1,5 @@
+import STRPCounter from './STRPCounter';
+export default STRPCounter;
+export { STRPCounter };
+export type { STRPCounterProps } from './STRPCounter';
+export * from './STRPCounter';

dist/index.d.ts renamed to dist/types/STRPCounter.d.ts

@@ -2,14 +2,48 @@
   "name": "react-strp-counter",
   "author": "Arsen Mkrtchyan (stripearmy)",
   "private": false,
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "A lightweight counter that relies on CSS to rearrange numbers and doesn't rerender Elements",
-  "type": "module",
-  "main": "dist/react-strp-counter.umd.js",
-  "module": "dist/react-strp-counter.es.js",
-  "types": "dist/index.d.ts",
   "repository": "https://github.com/stripearmy/react-strp-counter.git",
-  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/react-strp-counter.esm.js",
+      "require": "./dist/react-strp-counter.js",
+      "types": "./dist/types/index.d.ts"
+    },
+    "./css": "./dist/css/index.js",
+    "./styles.css": "./dist/css/styles.css"
+  },
+  "main": "dist/react-strp-counter.js",
+  "module": "dist/react-strp-counter.esm.js",
+  "types": "dist/types/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "clean": "rm -rf dist",
+    "build": "npx rollup -c",
+    "prepare": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^24.0.1",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-terser": "^0.4.3",
+    "@rollup/plugin-typescript": "^11.0.0",
+    "@types/node": "^20.11.0",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "rollup": "^3.29.4",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "tslib": "^2.6.2",
+    "typescript": "^4.9.5"
+  },
   "keywords": [
     "react",
     "counter",
@@ -34,47 +68,5 @@
     "css odometer",
     "react odomteter"
   ],
-  "files": [
-    "dist",
-    "styles"
-  ],
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/react-strp-counter.umd.js"
-    },
-    "./css": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/react-strp-counter.css"
-    }
-  },
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "lint": "eslint .",
-    "preview": "vite preview"
-  },
-  "peerDependencies": {
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.21.0",
-    "@types/node": "^22.13.10",
-    "@types/react": "^19.0.10",
-    "@types/react-dom": "^19.0.4",
-    "@vitejs/plugin-react": "^4.3.4",
-    "eslint": "^9.21.0",
-    "eslint-plugin-react-hooks": "^5.1.0",
-    "eslint-plugin-react-refresh": "^0.4.19",
-    "globals": "^15.15.0",
-    "prettier": "3.5.3",
-    "typescript": "~5.7.2",
-    "typescript-eslint": "^8.24.1",
-    "vite": "^6.2.0",
-    "vite-plugin-static-copy": "^2.3.0",
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0",
-    "vite-plugin-dts": "^4.5.3"
-  }
+  "license": "MIT"
 }

dist/types/index.d.ts

@@ -0,0 +1,49 @@
+import path from 'path';
+import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import typescript from '@rollup/plugin-typescript';
+import postcss from 'rollup-plugin-postcss';
+import terser from '@rollup/plugin-terser';
+import copy from 'rollup-plugin-copy';
+
+export default {
+    input: 'src/index.ts',
+    output: [
+        {
+            file: 'dist/react-strp-counter.js',
+            format: 'cjs',
+            exports: 'named',
+            sourcemap: false
+        },
+        {
+            file: 'dist/react-strp-counter.esm.js',
+            format: 'esm',
+            exports: 'named',
+            sourcemap: false
+        }
+    ],
+    plugins: [
+        resolve(),
+        commonjs(),
+        typescript({
+            tsconfig: './tsconfig.json',
+            jsx: 'react',
+            declaration: true,
+            declarationDir: 'dist/types'
+        }),
+        postcss({
+            extract: path.resolve('dist/css/styles.css'),
+            minimize: true
+        }),
+        copy({
+            targets: [
+                {
+                    src: 'src/css/index.js',
+                    dest: 'dist/css'
+                }
+            ]
+        }),
+        terser()
+    ],
+    external: ['react', 'react-dom', 'react/jsx-runtime']
+};

package.json

@@ -1,4 +1,3 @@
-import "./styles/react-strp-counter.css";
 import type {ReactNode} from "react";
 
 interface STRPCounterProps {

rollup.config.js

@@ -1,6 +1,7 @@
 import React, {useEffect, useRef} from 'react';
+import './css/styles.css';
 
-export type STRPCounterProps = {
+export interface STRPCounterProps {
     value: number | string;
     fontSize?: string;
     minLength?: number;
@@ -11,7 +12,7 @@ export type STRPCounterProps = {
     unitLabelPosition?: 'left' | 'right';
     stepDuration?: number;
     easing?: string | false,
-};
+}
 
 const formatNumber = (
     value: number | string,
@@ -66,7 +67,6 @@ const STRPCounter: React.FC<STRPCounterProps> = ({
                                                      stepDuration = 0.05,
                                                      easing = 'cubic-bezier(0.33,0.81,0.1,1.02)',
                                                  }) => {
-    import('./styles/styles.css');
 
     const formatted = formatNumber(value, minLength, delimiter, decimalSeparator);
     const refs = useRef<(HTMLDivElement | null)[]>([]);