From e27e9e03fd32cefde4fc176866612d1c3549904b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alberto=20Fern=C3=A1ndez-Capel?= Date: Mon, 27 Nov 2023 15:48:00 +0000 Subject: [PATCH] Import application JS as a module Bun.js generates JS bundles in the ESM format and they need be imported with the `type="module"` attribute. Otherwise the module varibles end up in the global scope. See https://github.com/hotwired/turbo/pull/1077 This commit updates the install generator to add the type="module" attribute to the default `javascript_include_tag`. `defer` is no longer needed, as JS modules are deferred by default. Ref. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#other_differences_between_modules_and_standard_scripts This PR also updates the default config to ensure that all bundlers are configured to output ESM bundles. - bun only supports ESM at the moment https://bun.sh/docs/bundler#format - esbuild is configured to output ESM with the --format=esm flag https://esbuild.github.io/api/#format-esm - webpacker is configured to output ESM bundles with `output.chunkFormat` https://webpack.js.org/configuration/output/#outputchunkformat - rollup is configured to output ESM bundles with `output.format` https://rollupjs.org/configuration-options/#output-format --- lib/install/esbuild/install.rb | 2 +- lib/install/install.rb | 4 ++-- lib/install/rollup/rollup.config.js | 2 +- lib/install/webpack/webpack.config.js | 1 + 4 files changed, 5 insertions(+), 4 deletions(-) diff --git a/lib/install/esbuild/install.rb b/lib/install/esbuild/install.rb index ab91aa7..65bb9df 100644 --- a/lib/install/esbuild/install.rb +++ b/lib/install/esbuild/install.rb @@ -2,7 +2,7 @@ run "yarn add esbuild" say "Add build script" -build_script = "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=/assets" +build_script = "esbuild app/javascript/*.* --bundle --sourcemap --format=esm --outdir=app/assets/builds --public-path=/assets" case `npx -v`.to_f when 7.1...8.0 diff --git a/lib/install/install.rb b/lib/install/install.rb index e4c0b6b..a8e7dfe 100644 --- a/lib/install/install.rb +++ b/lib/install/install.rb @@ -14,10 +14,10 @@ if (app_layout_path = Rails.root.join("app/views/layouts/application.html.erb")).exist? say "Add JavaScript include tag in application layout" insert_into_file app_layout_path.to_s, - %(\n <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>), before: /\s*<\/head>/ + %(\n <%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %>), before: /\s*<\/head>/ else say "Default application.html.erb is missing!", :red - say %( Add <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %> within the tag in your custom layout.) + say %( Add <%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %> within the tag in your custom layout.) end unless (app_js_entrypoint_path = Rails.root.join("app/javascript/application.js")).exist? diff --git a/lib/install/rollup/rollup.config.js b/lib/install/rollup/rollup.config.js index 088fd37..efc952c 100644 --- a/lib/install/rollup/rollup.config.js +++ b/lib/install/rollup/rollup.config.js @@ -4,7 +4,7 @@ export default { input: "app/javascript/application.js", output: { file: "app/assets/builds/application.js", - format: "iife", + format: "esm", inlineDynamicImports: true, sourcemap: true }, diff --git a/lib/install/webpack/webpack.config.js b/lib/install/webpack/webpack.config.js index ba2f173..557a746 100644 --- a/lib/install/webpack/webpack.config.js +++ b/lib/install/webpack/webpack.config.js @@ -10,6 +10,7 @@ module.exports = { output: { filename: "[name].js", sourceMapFilename: "[file].map", + chunkFormat: "module", path: path.resolve(__dirname, "app/assets/builds"), }, plugins: [