Merge pull request #215 from lnu-norge/esbuild-enchantments

Esbuild enchantments

app/javascript/controllers/application.js

@@ -2,8 +2,12 @@ import { Application } from '@hotwired/stimulus';
 
 const application = Application.start();
 
-// Configure Stimulus development experience
-application.debug = true;
+// This should only be set if we are in debug mode
+if (window.RAILS_ENV === "development") {
+    // Configure Stimulus development experience
+    application.debug = true;
+}
+
 window.Stimulus = application;
 
 

app/javascript/controllers/slider_controller.js

@@ -11,7 +11,6 @@ export default class extends Controller {
   }
 
   connect() {
-    console.log("height", this.heightValue)
     const slider = this.sliderTarget
     new Splide(slider, {
       heightRatio: this.coverValue ? 2/3 : false,

esbuild.config.mjs

@@ -0,0 +1,60 @@
+// From https://github.com/rails/jsbundling-rails/issues/8#issuecomment-1403699565
+// Feel free to adapt as we need
+
+import path from 'path'
+import esbuild from 'esbuild'
+import railsPlugin from 'esbuild-rails'
+import dotenv from 'dotenv'
+dotenv.config()
+
+// Add ENV variables needed for JS here (if you don't inject them from ruby instead)
+const define = {}
+
+if (process.env.POSTHOG_API_KEY) {
+    define["window.POSTHOG_API_KEY"] = JSON.stringify(process.env.POSTHOG_API_KEY)
+}
+
+
+if (process.env.RAILS_ENV !== "production" || process.env.RAILS_ENV !== "test") {
+    // If nothing else set, we are probably in dev
+    define["window.RAILS_ENV"] = JSON.stringify("development")
+} else {
+    define["window.RAILS_ENV"] = JSON.stringify(process.env.RAILS_ENV)
+}
+
+esbuild.context({
+    // Always bundle
+    bundle:  true,
+    // Path to application.js folder
+    absWorkingDir: path.join(process.cwd(), "app/javascript"),
+    // Application.js file, used by Rails to bundle all JS Rails code
+    entryPoints: ["application.js"],
+    // Compresses bundle
+    // More information: https://esbuild.github.io/api/#minify
+    minify: process.argv.includes("--minify"),
+    // Adds mapping information so web browser console can map bundle errors to the corresponding
+    // code line and column in the real code
+    // More information: https://esbuild.github.io/api/#sourcemap
+    sourcemap: process.argv.includes("--sourcemap"),
+    // Destination of JS bundle, points to the Rails JS Asset folder
+    outdir: path.join(process.cwd(), "app/assets/builds"),
+    // Remove unused JS methods
+    treeShaking: true,
+    plugins: [
+        // Plugin to easily import Rails JS files, such as Stimulus controllers and channels
+        // https://github.com/excid3/esbuild-rails
+        railsPlugin()
+    ],
+    // Variables passed to scripts, defined up above
+    define
+}).then(context => {
+    if (process.argv.includes("--watch")) {
+        // Enable watch mode
+        context.watch()
+    } else {
+        // Build once and exit if not in watch mode
+        context.rebuild().then(result => {
+            context.dispose()
+        })
+    }
+}).catch(() => process.exit(1))

package.json

@@ -7,8 +7,8 @@
     "yarn": "1.22.21"
   },
   "scripts": {
-    "build": "node esbuild.config.js --bundle --minify --sourcemap",
-    "build:dev": "node esbuild.config.js --bundle --minify --sourcemap --watch",
+    "build": "node esbuild.config.mjs --minify --sourcemap",
+    "build:dev": "node esbuild.config.mjs --minify --sourcemap --watch",
     "build:css": "postcss app/assets/stylesheets/application.css -o ./app/assets/builds/application.css"
   },
   "dependencies": {
@@ -20,6 +20,7 @@
     "@rails/ujs": "^7.1.2",
     "@splidejs/splide": "^3.6.4",
     "dotenv": "^16.4.1",
+    "esbuild-rails": "^1.0.7",
     "mapbox-gl": "^2.4.1",
     "postcss-cli": "^11.0.0",
     "tom-select": "^2.0.0",
@@ -28,6 +29,7 @@
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.7",
     "autoprefixer": "^10.4.17",
+    "core-js": "^3.35.1",
     "esbuild": "^0.19.11",
     "eslint": "^7.32.0",
     "eslint-config-airbnb-base": "^14.2.1",