Types, Optinal Speed

global.d.ts

@@ -0,0 +1 @@
+declare module '*.css';

package.json

@@ -1,18 +1,19 @@
 {
   "name": "react-type-animation",
-  "version": "1.1.3",
+  "version": "2.0.0",
   "description": "React typing animation based on typical.",
   "author": "max37",
   "license": "MIT",
   "repository": "maxeth/react-type-animation",
-  "main": "dist/index.js",
-  "module": "dist/index.es.js",
-  "jsnext:main": "dist/index.es.js",
-  "engines": {
-    "node": ">=8",
-    "npm": ">=5"
-  },
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.es.js",
+  "jsnext:main": "dist/esm/index.es.js",
+  "files": [
+    "dist"
+  ],
+  "types": "dist/index.d.ts",
   "scripts": {
+    "rollup": "rollup -c",
     "build": "rollup -c",
     "start": "rollup -c -w",
     "prepare": "npm run build",
@@ -37,7 +38,12 @@
     "react-dom": ">= 15.0.0"
   },
   "devDependencies": {
+    "@rollup/plugin-babel": "^5.3.1",
+    "@rollup/plugin-commonjs": "^22.0.2",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@rollup/plugin-typescript": "^8.3.4",
     "@svgr/rollup": "^2.4.1",
+    "@types/react": "^18.0.16",
     "babel-core": "^6.26.3",
     "babel-eslint": "^8.2.5",
     "babel-plugin-external-helpers": "^6.22.0",
@@ -57,17 +63,15 @@
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
     "react-scripts": "^1.1.4",
-    "rollup": "^0.64.1",
-    "rollup-plugin-babel": "^3.0.7",
-    "rollup-plugin-commonjs": "^9.1.3",
-    "rollup-plugin-node-resolve": "^3.3.0",
+    "rollup": "^2.77.2",
+    "rollup-plugin-dts": "^4.2.2",
     "rollup-plugin-peer-deps-external": "^2.2.0",
     "rollup-plugin-postcss": "^1.6.2",
-    "rollup-plugin-url": "^1.4.0"
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-url": "^1.4.0",
+    "tslib": "^2.4.0",
+    "typescript-plugin-css-modules": "^3.4.0"
   },
-  "files": [
-    "dist"
-  ],
   "dependencies": {
     "@camwiegert/typical": "^0.1.1"
   }

rollup.config.js

@@ -1,39 +1,53 @@
-import babel from 'rollup-plugin-babel';
-import commonjs from 'rollup-plugin-commonjs';
+import babel from '@rollup/plugin-babel';
+import commonjs from '@rollup/plugin-commonjs';
 import external from 'rollup-plugin-peer-deps-external';
 import postcss from 'rollup-plugin-postcss';
-import resolve from 'rollup-plugin-node-resolve';
+import resolve from '@rollup/plugin-node-resolve';
 import url from 'rollup-plugin-url';
 import svgr from '@svgr/rollup';
+import { terser } from 'rollup-plugin-terser';
+import dts from 'rollup-plugin-dts';
 
-import pkg from './package.json';
+import packageJson from './package.json';
+import typescript from '@rollup/plugin-typescript';
 
-export default {
-  input: 'src/index.js',
-  output: [
-    {
-      file: pkg.main,
-      format: 'cjs',
-      sourcemap: true
-    },
-    {
-      file: pkg.module,
-      format: 'es',
-      sourcemap: true
-    }
-  ],
-  plugins: [
-    external(),
-    postcss({
-      modules: true
-    }),
-    url(),
-    svgr(),
-    babel({
-      exclude: 'node_modules/**',
-      plugins: ['external-helpers']
-    }),
-    resolve(),
-    commonjs()
-  ]
-};
+export default [
+  {
+    input: 'src/index.ts',
+    output: [
+      {
+        file: packageJson.main,
+        format: 'cjs',
+        sourcemap: true
+      },
+      {
+        file: packageJson.module,
+        format: 'esm',
+        sourcemap: true
+      }
+    ],
+    plugins: [
+      external(),
+      postcss({
+        modules: true
+      }),
+      url(),
+      svgr(),
+      babel({
+        exclude: 'node_modules/**',
+        plugins: ['external-helpers']
+      }),
+      typescript({
+        tsconfig: './tsconfig.json'
+      }),
+      resolve(),
+      commonjs()
+      //      terser()
+    ]
+  },
+  {
+    input: 'dist/esm/index.d.ts',
+    output: [{ file: 'dist/index.d.ts', format: 'esm' }],
+    plugins: [dts()]
+  }
+];

src/components/TypeAnimation/index.tsx

@@ -0,0 +1,184 @@
+import React, { useRef, useEffect, memo, HtmlHTMLAttributes } from 'react';
+import { type, type as typeloop } from '../../typical';
+
+import styles from './index.module.css';
+
+type Speed =
+  | 0
+  | 1
+  | 2
+  | 3
+  | 4
+  | 5
+  | 6
+  | 7
+  | 8
+  | 9
+  | 10
+  | 11
+  | 12
+  | 13
+  | 14
+  | 15
+  | 16
+  | 17
+  | 18
+  | 19
+  | 20
+  | 21
+  | 22
+  | 23
+  | 24
+  | 25
+  | 26
+  | 27
+  | 28
+  | 29
+  | 30
+  | 31
+  | 32
+  | 33
+  | 34
+  | 35
+  | 36
+  | 37
+  | 38
+  | 39
+  | 40
+  | 41
+  | 42
+  | 43
+  | 44
+  | 45
+  | 46
+  | 47
+  | 48
+  | 49
+  | 50
+  | 51
+  | 52
+  | 53
+  | 54
+  | 55
+  | 56
+  | 57
+  | 58
+  | 59
+  | 60
+  | 61
+  | 62
+  | 63
+  | 64
+  | 65
+  | 66
+  | 67
+  | 68
+  | 69
+  | 70
+  | 71
+  | 72
+  | 73
+  | 74
+  | 75
+  | 76
+  | 77
+  | 78
+  | 79
+  | 80
+  | 81
+  | 82
+  | 83
+  | 84
+  | 85
+  | 86
+  | 87
+  | 88
+  | 89
+  | 90
+  | 91
+  | 92
+  | 93
+  | 94
+  | 95
+  | 96
+  | 97
+  | 98
+  | 99
+  | 100;
+
+interface TypeAnimationProps {
+  sequence: Array<
+    string | number | ((element: HTMLElement | null) => void | Promise<void>)
+  >;
+  repeat?: number;
+  wrapper?:
+    | 'p'
+    | 'div'
+    | 'span'
+    | 'strong'
+    | 'a'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'aside'
+    | 'b';
+  cursor?: boolean;
+  speed?: Speed;
+}
+
+const TypeAnimation: React.FC<TypeAnimationProps &
+  HtmlHTMLAttributes<HTMLElement['style']>> = ({
+  sequence,
+  repeat,
+  className,
+  speed = 40,
+  wrapper = 'div',
+  cursor = true,
+  style
+}) => {
+  speed = Math.abs(speed - 100) as Speed;
+  const typeRef = useRef(null);
+  let baseStyle = styles.type;
+
+  let finalClassName;
+
+  if (className && className.length > 0) {
+    if (!cursor) {
+      finalClassName = className;
+    } else {
+      finalClassName = `${baseStyle} ${className}`;
+    }
+  } else {
+    if (!cursor) {
+      finalClassName = '';
+    } else {
+      finalClassName = baseStyle;
+    }
+  }
+
+  useEffect(() => {
+    if (repeat === Infinity) {
+      type(typeRef.current, speed, ...sequence, typeloop);
+    } else if (typeof repeat === 'number') {
+      type(
+        typeRef.current,
+        speed,
+        ...Array(repeat)
+          .fill(sequence)
+          .flat()
+      );
+    } else {
+      type(typeRef.current, speed, ...sequence);
+    }
+  });
+
+  const Wrapper = wrapper;
+  return <Wrapper style={style} className={finalClassName} ref={typeRef} />;
+};
+
+export default memo(TypeAnimation, (_, __) => {
+  return true; // IMMUTABLE!
+});

src/components/index.ts

@@ -0,0 +1 @@
+export { default as TypeAnimation } from './TypeAnimation';

src/index.ts

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