Hotwire Discussion

Cannot minify turbo.js (v7.0.0-beta.5)

turbo.js contains a template literal (see below). It appears neither UglifyJS nor terser can minify this code. Resulting in a minified javascript file spanning multiple lines. This is causing some problems with my source maps which assume everything is on one line.

Does anyone know how to configure either UglifyJS or terser to minify this code? If it’s technically impossible, it might be worth reconsidering this template literal.

(() => {
  let element = document.currentScript;
  if (!element) return;
  if (element.hasAttribute("data-turbo-suppress-warning")) return;
  while (element = element.parentElement) {
    if (element == document.body) {
      return console.warn(unindent`
        You are loading Turbo from a <script> element inside the <body> element. This is probably not what you meant to do!

        Load your application’s JavaScript bundle inside the <head> element instead. <script> elements in <body> are evaluated with each page change.

        For more information, see: https://turbo.hotwire.dev/handbook/building#working-with-script-elements

        ——
        Suppress this warning by adding a "data-turbo-suppress-warning" attribute to: %s
      `, element.outerHTML);
    }
  }
})();

Run this in rails console to see what I mean. The expected result when uglifying a Javascript file is to get back one line, but turbo.es2017-esm.js returns 28 lines.

# bundle add uglifier turbo-rails
path = "node_modules/@hotwired/turbo/dist/turbo.es2017-esm.js"
Uglifier.new(harmony: true).compile(File.read(path)).count("\n") # 28 lines

How are you importing turbo into your project? Asset pipeline, webpacker, something else?

Good question. I just realized I added both the turbo-rails gem and the @hotwired/turbo NPM package. In the end though, it’s the library included in the gem that I’m really using it.

Having said that, I’ve fixed the issue I was experiencing with the source maps and it wasn’t related to Turbo at all. Cloudflare was minifying my Javascript file which broke the link to the source map.

It might still be nice to make turbo.js more minify-able, but the current code doesn’t seem to be causing real problems after all.

The package in node_modules/@hotwired/turbo/dist/turbo.es5-umd.js is more minify-able.

(function () {
        var element = document.currentScript;
        if (!element)
            return;
        if (element.hasAttribute("data-turbo-suppress-warning"))
            return;
        while (element = element.parentElement) {
            if (element == document.body) {
                return console.warn(unindent(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n        You are loading Turbo from a <script> element inside the <body> element. This is probably not what you meant to do!\n\n        Load your application\u2019s JavaScript bundle inside the <head> element instead. <script> elements in <body> are evaluated with each page change.\n\n        For more information, see: https://turbo.hotwire.dev/handbook/building#working-with-script-elements\n\n        \u2014\u2014\n        Suppress this warning by adding a \"data-turbo-suppress-warning\" attribute to: %s\n      "], ["\n        You are loading Turbo from a <script> element inside the <body> element. This is probably not what you meant to do!\n\n        Load your application\u2019s JavaScript bundle inside the <head> element instead. <script> elements in <body> are evaluated with each page change.\n\n        For more information, see: https://turbo.hotwire.dev/handbook/building#working-with-script-elements\n\n        \u2014\u2014\n        Suppress this warning by adding a \"data-turbo-suppress-warning\" attribute to: %s\n      "]))), element.outerHTML);
            }
        }
    })();

FYI, for the moment I’d recommend using @hotwired/turbo over @hotwired/turbo-rails npm package. (see NPM Package Version Bug? · Issue #181 · hotwired/turbo-rails · GitHub)

1 Like

FYI, for the moment I’d recommend using @hotwired/turbo over @hotwired/turbo-rails npm package. (see NPM Package Version Bug? · Issue #181 · hotwired/turbo-rails · GitHub )

The latest release of @hotwired/turbo-rails uses the correct version now.

1 Like