add sourcemaps in dev mode

Author: nasdan

package-lock.json

@@ -0,0 +1,3 @@
+# @lemoncode/react-image-focal-point
+
+[Vite css modules issue](https://github.com/vitejs/vite/issues/1579)

packages/react-image-focal-point/README.md

@@ -1,12 +1,20 @@
-module.exports = {
+export default {
   rootDir: '../../',
   verbose: true,
-  preset: 'ts-jest',
+  transform: {
+    '^.+\\.tsx?$': [
+      'ts-jest',
+      {
+        useESM: true,
+      },
+    ],
+  },
+  extensionsToTreatAsEsm: ['.ts'],
   restoreMocks: true,
   testEnvironment: 'jsdom',
   moduleDirectories: ['<rootDir>/src', 'node_modules'],
   setupFilesAfterEnv: ['<rootDir>/config/test/setup.ts'],
   moduleNameMapper: {
-    "\\.css$": "<rootDir>/config/test/file.mock.js",
+    '\\.css$': '<rootDir>/config/test/file.mock.js',
   },
 };

packages/react-image-focal-point/config/test/jest.js

@@ -16,8 +16,9 @@
     "./style.css": "./dist/style.css"
   },
   "types": "./dist/index.d.ts",
+  "type": "module",
   "scripts": {
-    "start": "run-p \"build:js -- --watch\" \"types -- --watch\"",
+    "start": "cross-env NODE_ENV=development run-p \"build:js -- --watch\" \"types -- --watch\"",
     "build": "npm run clean && npm run build:js  && npm run types",
     "build:js": "vite build",
     "types": "tsc --emitDeclarationOnly",
@@ -54,6 +55,7 @@
     "@types/jest": "^29.4.0",
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
+    "cross-env": "^7.0.3",
     "jest": "^29.4.1",
     "jest-environment-jsdom": "^29.4.1",
     "npm-run-all": "^4.1.5",

packages/react-image-focal-point/package.json

@@ -1,26 +1,27 @@
-import { defineConfig } from "vite";
+import { defineConfig } from 'vite';
 
 export default defineConfig({
   build: {
+    sourcemap: process.env.NODE_ENV === 'development',
     emptyOutDir: false,
     lib: {
-      entry: "src/index.ts",
-      name: "ReactImageFocalPoint",
-      fileName: (format) => `react-image-focal-point.${format}.js`,
-      formats: ["es", "cjs"],
+      entry: 'src/index.ts',
+      name: 'ReactImageFocalPoint',
+      fileName: format => `react-image-focal-point.${format}.js`,
+      formats: ['es', 'cjs'],
     },
     rollupOptions: {
-      external: ["react"],
+      external: ['react'],
       output: {
         globals: {
-          react: "React",
+          react: 'React',
         },
       },
     },
   },
   css: {
     modules: {
-      localsConvention: "camelCase",
+      localsConvention: 'camelCase',
     },
   },
 });