From 37de329d8ee245b07ba183addc614d4d803465fb Mon Sep 17 00:00:00 2001 From: Daniel Jackson Date: Fri, 26 Jan 2024 13:43:06 +0100 Subject: [PATCH 1/4] Remove babel, not needed with esbuild --- babel.config.js | 82 ---------------------------------------------- esbuild.config.js | 32 ------------------ esbuild.config.mjs | 60 +++++++++++++++++++++++++++++++++ package.json | 6 ++-- yarn.lock | 14 +++++++- 5 files changed, 77 insertions(+), 117 deletions(-) delete mode 100644 babel.config.js delete mode 100644 esbuild.config.js create mode 100644 esbuild.config.mjs diff --git a/babel.config.js b/babel.config.js deleted file mode 100644 index 60f9b5c6..00000000 --- a/babel.config.js +++ /dev/null @@ -1,82 +0,0 @@ -module.exports = function(api) { - var validEnv = ['development', 'test', 'production'] - var currentEnv = api.env() - var isDevelopmentEnv = api.env('development') - var isProductionEnv = api.env('production') - var isTestEnv = api.env('test') - - if (!validEnv.includes(currentEnv)) { - throw new Error( - 'Please specify a valid `NODE_ENV` or ' + - '`BABEL_ENV` environment variables. Valid values are "development", ' + - '"test", and "production". Instead, received: ' + - JSON.stringify(currentEnv) + - '.' - ) - } - - return { - presets: [ - isTestEnv && [ - '@babel/preset-env', - { - targets: { - node: 'current' - } - } - ], - (isProductionEnv || isDevelopmentEnv) && [ - '@babel/preset-env', - { - forceAllTransforms: true, - useBuiltIns: 'entry', - corejs: 3, - modules: false, - exclude: ['transform-typeof-symbol'] - } - ] - ].filter(Boolean), - plugins: [ - 'babel-plugin-macros', - '@babel/plugin-syntax-dynamic-import', - isTestEnv && 'babel-plugin-dynamic-import-node', - '@babel/plugin-transform-destructuring', - [ - '@babel/plugin-transform-class-properties', - { - loose: true - } - ], - [ - '@babel/plugin-transform-object-rest-spread', - { - useBuiltIns: true - } - ], - [ - '@babel/plugin-transform-private-methods', - { - loose: true - } - ], - [ - '@babel/plugin-transform-private-property-in-object', - { - loose: true - } - ], - [ - '@babel/plugin-transform-runtime', - { - helpers: false - } - ], - [ - '@babel/plugin-transform-regenerator', - { - async: false - } - ] - ].filter(Boolean) - } -} diff --git a/esbuild.config.js b/esbuild.config.js deleted file mode 100644 index 00ecd269..00000000 --- a/esbuild.config.js +++ /dev/null @@ -1,32 +0,0 @@ -// From https://github.com/rails/jsbundling-rails/issues/8#issuecomment-1403699565 -// Feel free to adapt as we need - -const path = require('path') -require('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) -} - -require("esbuild").context({ - entryPoints: ["application.js"], - bundle: process.argv.includes("--bundle"), - sourcemap: process.argv.includes("--sourcemap"), - outdir: path.join(process.cwd(), "app/assets/builds"), - absWorkingDir: path.join(process.cwd(), "app/javascript"), - plugins: [], - define, - minify: process.argv.includes("--minify") -}).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)) diff --git a/esbuild.config.mjs b/esbuild.config.mjs new file mode 100644 index 00000000..ab9675fc --- /dev/null +++ b/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.ESBUILD_RAILS_ENV"] = JSON.stringify("development") +} else { + define["window.ESBUILD_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)) diff --git a/package.json b/package.json index 30dfe310..bd2dca0e 100644 --- a/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index e25d0b61..005e5602 100644 --- a/yarn.lock +++ b/yarn.lock @@ -956,6 +956,11 @@ confusing-browser-globals@^1.0.10: resolved "https://registry.yarnpkg.com/confusing-browser-globals/-/confusing-browser-globals-1.0.11.tgz#ae40e9b57cdd3915408a2805ebd3a5585608dc81" integrity sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA== +core-js@^3.35.1: + version "3.35.1" + resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.35.1.tgz#9c28f8b7ccee482796f8590cc8d15739eaaf980c" + integrity sha512-IgdsbxNyMskrTFxa9lWHyMwAJU5gXOPP+1yO+K59d50VLVAIDAbs7gIv705KzALModfK3ZrSZTPNpC0PQgIZuw== + cross-spawn@^7.0.0, cross-spawn@^7.0.2: version "7.0.3" resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6" @@ -1180,6 +1185,13 @@ es-to-primitive@^1.2.1: is-date-object "^1.0.1" is-symbol "^1.0.2" +esbuild-rails@^1.0.7: + version "1.0.7" + resolved "https://registry.yarnpkg.com/esbuild-rails/-/esbuild-rails-1.0.7.tgz#3c8f76dc891d5b2105cb683ace0a15d11c91a973" + integrity sha512-6LuKQnYY32fisBSJoMeDQm1V4MB17P95oV8Er145j77Yr7sDE6TpKKtXeprApN3YxE2rQUeU3il4LR3GHh5fIw== + dependencies: + fast-glob "^3.2.12" + esbuild@^0.19.11: version "0.19.12" resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.19.12.tgz#dc82ee5dc79e82f5a5c3b4323a2a641827db3e04" @@ -1391,7 +1403,7 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3: resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525" integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q== -fast-glob@^3.3.0, fast-glob@^3.3.2: +fast-glob@^3.2.12, fast-glob@^3.3.0, fast-glob@^3.3.2: version "3.3.2" resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129" integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow== From 4b4e1aae86d940f0421f71cd94f5984dd200dcfe Mon Sep 17 00:00:00 2001 From: Daniel Jackson Date: Fri, 26 Jan 2024 13:43:20 +0100 Subject: [PATCH 2/4] Only set stimulus debug in dev mode --- app/javascript/controllers/application.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/app/javascript/controllers/application.js b/app/javascript/controllers/application.js index 20a50211..ba17d137 100644 --- a/app/javascript/controllers/application.js +++ b/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; From 5eb6813a39faf49f7080941ab932381f97183b75 Mon Sep 17 00:00:00 2001 From: Daniel Jackson Date: Fri, 26 Jan 2024 13:43:32 +0100 Subject: [PATCH 3/4] Remove old console log --- app/javascript/controllers/slider_controller.js | 1 - 1 file changed, 1 deletion(-) diff --git a/app/javascript/controllers/slider_controller.js b/app/javascript/controllers/slider_controller.js index 023b1768..fac47734 100644 --- a/app/javascript/controllers/slider_controller.js +++ b/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, From ddac7e8b9ceb27d2f63b2b6def13e6ca0a80c864 Mon Sep 17 00:00:00 2001 From: Daniel Jackson Date: Fri, 26 Jan 2024 13:45:06 +0100 Subject: [PATCH 4/4] Fix so rails env is passed to window correctly --- esbuild.config.mjs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/esbuild.config.mjs b/esbuild.config.mjs index ab9675fc..ffabd119 100644 --- a/esbuild.config.mjs +++ b/esbuild.config.mjs @@ -17,9 +17,9 @@ if (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.ESBUILD_RAILS_ENV"] = JSON.stringify("development") + define["window.RAILS_ENV"] = JSON.stringify("development") } else { - define["window.ESBUILD_RAILS_ENV"] = JSON.stringify(process.env.RAILS_ENV) + define["window.RAILS_ENV"] = JSON.stringify(process.env.RAILS_ENV) } esbuild.context({