Added dummy tests.

.eslintrc

@@ -6,6 +6,11 @@
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:jest/recommended",
-    "next/core-web-vitals"
-  ]
+    "plugin:react/recommended"
+  ],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
 }

.prettierrc

@@ -1,5 +1,5 @@
 {
-  "printWidth": 80,
+  "printWidth": 120,
   "trailingComma": "all",
   "semi": true,
   "singleQuote": true

example/public/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <!-- <meta name="theme-color" content="#000000" /> -->
+    <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created using create-react-app"

example/src/App.css

@@ -3,7 +3,7 @@
 }
 
 .ColorSection {
-  height: 50vh;
+  height: 33vh;
   width: 100vw;
   display: grid;
   justify-content: center;

example/src/App.tsx

@@ -10,7 +10,7 @@ import { useMetaTheme } from 'meta-theme-swap';
 
 function ColoredSection({ color }: { color: string }) {
   const ref = useRef<HTMLDivElement>(null);
-  useMetaTheme(ref, color, 1, "300ms");
+  useMetaTheme(ref, color);
   return (
     <div id={color} className="ColorSection" style={{ backgroundColor: color }} ref={ref}>
       {color}
@@ -21,10 +21,26 @@ function ColoredSection({ color }: { color: string }) {
 function App() {
   return (
     <div className="App">
+      <ColoredSection color="#00ff00" />
+      <ColoredSection color="#0000ff" />
+      <ColoredSection color="#000000" />
+      <ColoredSection color="#ffff00" />
+      <ColoredSection color="#00ffff" />
+      <ColoredSection color="#ff00ff" />
+      <ColoredSection color="#ff0000" />
+      <ColoredSection color="#00ff00" />
+      <ColoredSection color="#0000ff" />
+      <ColoredSection color="#000000" />
+      <ColoredSection color="#ffff00" />
+      <ColoredSection color="#00ffff" />
+      <ColoredSection color="#ff00ff" />
       <ColoredSection color="#ff0000" />
       <ColoredSection color="#00ff00" />
       <ColoredSection color="#0000ff" />
       <ColoredSection color="#000000" />
+      <ColoredSection color="#ffff00" />
+      <ColoredSection color="#00ffff" />
+      <ColoredSection color="#ff00ff" />
     </div>
   );
 }

jest.config.js

@@ -1,7 +1,8 @@
 module.exports = {
+  roots: ["<rootDir>/src"],
   transform: {
-    '^.+\\.(t|j)s$': 'ts-jest',
+    '^.+\\.tsx?$': 'ts-jest',
   },
-  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(t|j)s$',
-  moduleFileExtensions: ['ts', 'js', 'json', 'node'],
+  testRegex: '(/__tests__/.*|(\\.|/))\\.test.tsx?$',
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
 };

package.json

@@ -18,7 +18,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/hebertcisco/ts-npm-package-boilerplate.git"
+    "url": "git+https://github.com/evankirkiles/meta-theme-swap.git"
   },
   "keywords": [
     "boilerplate",
@@ -27,9 +27,9 @@
   "author": "Evan Kirkiles",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/hebertcisco/ts-npm-package-boilerplate/issues"
+    "url": "https://github.com/evankirkiles/meta-theme-swap/issues"
   },
-  "homepage": "https://github.com/hebertcisco/ts-npm-package-boilerplate#readme",
+  "homepage": "https://github.com/evankirkiles/meta-theme-swap#readme",
   "devDependencies": {
     "@testing-library/react": "^14.0.0",
     "@types/jest": "29.4.0",