feat(js): use webpack to bundle and minify the code

.babelrc.json

@@ -0,0 +1,11 @@
+{
+  "presets": [
+    [
+      "@babel/env",
+      {
+        "useBuiltIns": "usage",
+        "corejs": "3.18"
+      }
+    ]
+  ]
+}

.eslintrc.json

@@ -0,0 +1,11 @@
+{
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "parser": "@babel/eslint-parser",
+  "extends": [
+    "airbnb-base",
+    "plugin:prettier/recommended"
+  ]
+}

.gitignore

@@ -19,6 +19,10 @@ venv/
 nosetests.xml
 htmlcov
 
+# npm
+node_modules/
+npm-debug.log*
+
 # testing
 tests/*.db
 tests/var

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "arrowParens": "always",
+  "quoteProps": "consistent",
+  "singleQuote": true
+}

CHANGELOG.md

@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## Unreleased
+### Changed
+- Use Webpack to bundle and minify the JavaScript code
 
 ## 0.1.0 - 2021-10-14
 

MANIFEST.in

@@ -1,4 +1,5 @@
 include LICENSE *.md
-recursive-include wagtail_maps *
+graft wagtail_maps
+prune wagtail_maps/static_src
 global-exclude __pycache__
 global-exclude *.py[co]

package.json

@@ -0,0 +1,38 @@
+{
+  "name": "wagtail-maps",
+  "version": "0.1.0",
+  "description": "Create and display maps with points in Wagtail",
+  "private": true,
+  "browserslist": [
+    "Firefox ESR",
+    "last 2 Chrome versions",
+    "last 2 ChromeAndroid versions",
+    "last 2 Edge versions",
+    "last 1 Firefox version",
+    "last 2 iOS versions",
+    "last 2 Safari versions"
+  ],
+  "dependencies": {
+    "core-js": "^3.18.3"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.15.8",
+    "@babel/eslint-parser": "^7.15.8",
+    "@babel/preset-env": "^7.15.8",
+    "autoprefixer": "^10.3.7",
+    "babel-loader": "^8.2.2",
+    "eslint": "^7.32.0",
+    "eslint-config-airbnb-base": "^14.2.1",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-import-resolver-node": "^0.3.6",
+    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-prettier": "^4.0.0",
+    "prettier": "^2.4.1",
+    "webpack": "^5.58.2",
+    "webpack-cli": "^4.9.0"
+  },
+  "scripts": {
+    "watch": "webpack --config ./webpack.config.js --mode development --progress --watch",
+    "build": "webpack --config ./webpack.config.js --mode production"
+  }
+}

wagtail_maps/admin.py

@@ -17,8 +17,8 @@ class MapAdmin(ModelAdmin):
     model = Map
     menu_icon = 'map'
     list_display = ('name', 'points_count')
-    form_view_extra_css = ['wagtail_maps/admin-form.css']
-    form_view_extra_js = ['wagtail_maps/admin-form.js']
+    form_view_extra_css = ['wagtail_maps/css/admin-form.css']
+    form_view_extra_js = ['wagtail_maps/js/admin-form.js']
 
     panels = [
         FieldPanel('name', classname='title'),

wagtail_maps/static/wagtail_maps/js/admin-form.js

@@ -0,0 +1,2 @@
+(()=>{function e(e){return e===Number(e).toString()}function t(e,t){return e+t}document.addEventListener("DOMContentLoaded",(()=>{const n=document.getElementById("id_center_latitude"),u=document.getElementById("id_center_longitude"),d=document.getElementById("map-center-calculate"),l=d.nextElementSibling;d.addEventListener("click",(()=>{const d=[],c=[];l.setAttribute("hidden",""),[].slice.call(document.querySelectorAll("#id_points-FORMS > li:not(.deleted)")).forEach((function(t){const n=t.querySelector("[name$=-latitude]").value,u=t.querySelector("[name$=-longitude]").value;e(n)&&e(u)&&(d.push(Number(n)),c.push(Number(u)))})),d.length?(n.value=d.reduce(t)/d.length,u.value=c.reduce(t)/c.length):l.removeAttribute("hidden")}))}))})();
+//# sourceMappingURL=admin-form.js.map

webpack.config.js

@@ -0,0 +1,27 @@
+const path = require('path');
+
+module.exports = {
+  entry: {
+    'admin-form': './wagtail_maps/static_src/admin-form.js',
+  },
+  output: {
+    filename: '[name].js',
+    path: path.resolve(__dirname, 'wagtail_maps/static/wagtail_maps/js'),
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        use: { loader: 'babel-loader' },
+      },
+    ],
+  },
+  devtool: 'source-map',
+  stats: {
+    chunks: false,
+    hash: false,
+    colors: true,
+    reasons: false,
+    version: false,
+  },
+};