Integrate Rails JS bundling

[rosle]

#310

What happened

As Rails moving away from webpacker gem. We need to get our template up-to-date.

For applications currently using Webpacker, the first recommendation is to switch to jsbundling-rails with Webpack (or another bundler).

• Completely removed webpacker
• Integrate with jsbundling-rails with esbuild

Insight

yarn run build will bundle our scripts to the app/assets/builds

though the script works perfectly with

"scripts": {
  "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds"
}

I decided to separate the build script out to app/javascript/build.js, this will allow us to customize the esbuild easier.

Typescript

For Typescript, it has built-in support from esbuid. So we don't need to do anything. After the project is created, just simply rename files to .ts and it should work. 👍

To make the template fully support Typescript (auto-generate .ts file in the first place), I'm thinking of renaming the file with the script below.

Dir.glob('app/javascript/**/*.js').each { |file| File.rename(file, file.sub('.js', '.ts')) }
gsub_file 'package.json', '.js', '.ts'

This works but I have problem on the test. It is more confused because the template is applying on .js file but in the expectation, we validate against the .ts file.

I would prefer to revisit this issue later, maybe we can just rename all files to .ts everywhere in the template in the first place but this will have effect that If we run install script from other gems, they might look for .js to modify but it doesn't exist anymore.

Proof Of Work

Site is working.

Tested with Typescript, it's working correctly.

[olivierobert]

Overall, this looks great. I just have one minor concern/question.

[olivierobert]

I am not sure why this needs to be done in inject instead of being in the manifest file application.js ? 🤔

I am also a bit concerned about the naming of global.js as what else should go in there? Why not just name it `'app/javascript/i18n.js'?

[rosle]

Oh ok, forget about this, I should have include in comment or PR description. So there is an issue when I tried to make I18n-js works. I will try to demo step by step.

Without inject, when starting the rails app, there is an error involving with the I18n, say if I have this application.ts

import './vendor/';
import './translations/translations';

import './initializers/';
import './screens/';

console.log(I18n.t('hello'));

We can fix this issue by importing I18n where we need

import I18n from 'i18n-js';

But still, there will be an error on the auto-generate translation file -> /translations/translations.js This file is auto-generated from i18n js task, so we can't modify it.

So I've been looking for the old webpack config and found that we actually had it defined on ProvidePlugin to automatically loaded it everywhere.

const webpack = require('webpack');
      const plugins = [
        new webpack.ProvidePlugin({
          // Translations
          I18n: 'i18n-js',
        })
      ];
      
environment.config.set('plugins', plugins);

Then I use esbuild inject to have this same behaviour. This will load the module globally to make I18n works in the translations. That's why I named it global, so we can inject more things we need there.

Let me recheck again with the asset pipeline, maybe we can make it available -> https://github.com/fnando/i18n-js/tree/v3.9.0#rails-app-with-asset-pipeline (I've tried this but not working. But I have a new idea, maybe we can modify app/assets/config/manifest.js to load it 🤔 )

[rosle]

Tried adding require on the sprocket's app/assets/config/manifest.js but not working. As I checked, It actually does not add it to compiled application.js. Now it all depends on the esbuild to compile. Seems the app/assets/config/manifest.js can only contains link.

[olivierobert]

Thank you for all the details. We shall go with this approach then ✌️

[olivierobert]

Thank you for all the details. We shall go with this approach then ✌️

[junan]

LGTM 👍