Improve esbuild bundle script to watch css changes and output sourcemaps

bundle.mjs

@@ -0,0 +1,46 @@
+import * as esbuild from 'esbuild';
+import fs from 'fs';
+
+const plugins = [{
+  name: 'my-plugin',
+  setup(build) {
+    let count = 0;
+    build.onEnd(({ errors, warnings }) => {
+      count++;
+      const message = errors.length === 0 && warnings.length === 0
+        ? 'Build completed.'
+        : `Build completed with ${errors.length} error(s) and ${warnings.length} warning(s).`;
+        console.log(`[BUILD #${count.toString().padStart(3, '0')}]:`, message);    });
+  },
+}];
+
+const buildOptions = {
+  bundle: true,
+  entryPoints: ['./src/js/L.PM.js'],
+  loader: {
+    '.js': 'jsx',
+    '.css': 'css',
+    '.svg': 'dataurl' },
+  minify: true,
+  outfile: './dist/leaflet-geoman.js',
+  //plugins: plugins,
+  sourcemap: true,
+}
+
+const ctx = await esbuild.context({ ...buildOptions, plugins });
+
+if (process.env.DEV) {
+  await ctx.watch();
+  console.log('watching...');
+    const { host, port } = await ctx.serve({
+      port: 5500,
+      servedir: '.',
+      fallback: "./index.html"
+    });
+  console.log(`Serving app at ${host}:${port}.`);
+} else {
+  await ctx.rebuild();
+  ctx.dispose();
+  fs.copyFileSync('leaflet-geoman.d.ts', './dist/leaflet-geoman.d.ts');
+  fs.copyFileSync('./dist/leaflet-geoman.js', './dist/leaflet-geoman.min.js');
+}

demo/customcontrols.html

@@ -28,9 +28,9 @@ <h2>Custom Controls in the Toolbar</h2>
       </article>
     </div>
     <script src="https://unpkg.com/leaflet@latest/dist/leaflet.js"></script>
-    <script src="../dist/leaflet-geoman.min.js"></script>
+    <script src="../dist/leaflet-geoman.js"></script>
     <!-- You can change from the local source to the cdn: -->
-    <!-- <script src="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.min.js"></script>   -->
+    <!-- <script src="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.js"></script>   -->
     <script src="customcontrols.js"></script>
   </body>
 </html>

demo/events.html

@@ -21,9 +21,9 @@ <h2>Overview of the available events (Console)</h2>
       </article>
     </div>
     <script src="https://unpkg.com/leaflet@latest/dist/leaflet.js"></script>
-    <script src="../dist/leaflet-geoman.min.js"></script>
+    <script src="../dist/leaflet-geoman.js"></script>
     <!-- You can change from the local source to the cdn: -->
-    <!-- <script src="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.min.js"></script>   -->
+    <!-- <script src="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.js"></script>   -->
     <script src="events.js"></script>
   </body>
 </html>

demo/index-canvas.html

@@ -40,9 +40,9 @@ <h2>Editing A Layer Group</h2>
       </article>
     </div>
     <script src="https://unpkg.com/leaflet@latest/dist/leaflet.js"></script>
-    <script src="../dist/leaflet-geoman.min.js"></script>
+    <script src="../dist/leaflet-geoman.js"></script>
     <!-- You can change from the local source to the cdn: -->
-    <!-- <script src="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.min.js"></script>   -->
+    <!-- <script src="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.js"></script>   -->
     <script src="demo-canvas.js"></script>
   </body>
 </html>

demo/index.html

@@ -40,9 +40,9 @@ <h2>Editing A Layer Group</h2>
       </article>
     </div>
     <script src="https://unpkg.com/leaflet@latest/dist/leaflet.js"></script>
-    <script src="../dist/leaflet-geoman.min.js"></script>
+    <script src="../dist/leaflet-geoman.js"></script>
     <!-- You can change from the local source to the cdn: -->
-    <!-- <script src="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.min.js"></script>   -->
+    <!-- <script src="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.js"></script>   -->
     <script src="demo.js"></script>
   </body>
 </html>

index.html

@@ -41,9 +41,9 @@
       <div id="map"></div>
     </div>
     <!--
-            <script src="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.min.js"></script>
+            <script src="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.js"></script>
 
         -->
-    <script src="dist/leaflet-geoman.min.js"></script>
+    <script src="dist/leaflet-geoman.js"></script>
   </body>
 </html>

package.json

@@ -18,7 +18,7 @@
   "files": [
     "dist"
   ],
-  "main": "dist/leaflet-geoman.min.js",
+  "main": "dist/leaflet-geoman.js",
   "types": "dist/leaflet-geoman.d.ts",
   "dependencies": {
     "@turf/boolean-contains": "^6.5.0",
@@ -30,6 +30,7 @@
   },
   "devDependencies": {
     "@types/leaflet": "^1.7.9",
+    "cross-env": "^7.0.3",
     "cypress": "6.9.1",
     "cypress-wait-until": "1.7.1",
     "esbuild": "^0.20.0",
@@ -50,8 +51,8 @@
   },
   "scripts": {
     "start": "npm run dev",
-    "dev": "esbuild ./src/js/L.PM.js --bundle --watch --loader:.svg=dataurl --outfile=dist/leaflet-geoman.min.js",
-    "build": "ts-node bundle.ts",
+    "dev": "cross-env DEV=true ts-node bundle.mjs",
+    "build": "ts-node bundle.mjs",
     "test": "cypress run",
     "cypress": "cypress open",
     "prepare": "npm run build && husky install",

src/assets/translations/index.js

@@ -56,4 +56,4 @@ export default {
   fi,
   ko,
   ky,
-};
+};

src/js/Mixins/Keyboard.js

@@ -10,8 +10,8 @@ const createKeyboardMixins = () => ({
     map.once('unload', this._unbindKeyListenerEvents, this);
   },
   _unbindKeyListenerEvents() {
-      L.DomEvent.off(document, 'keydown keyup', this._onKeyListener, this);
-      L.DomEvent.off(window, 'blur', this._onBlur, this);
+    L.DomEvent.off(document, 'keydown keyup', this._onKeyListener, this);
+    L.DomEvent.off(window, 'blur', this._onBlur, this);
   },
   _onKeyListener(e) {
     let focusOn = 'document';