How Do I get rails-only information into my bundle?

[benlieb]

We have a lot of constants we would like available in our javascript bundle, but we'd rather not duplicate them manually.

I've tried this a number of ways, and none of them quite work. Since this library is meant to be rails-friendly, what is the recommended way of doing this?

I tried to create

assets/javascripts/rails-constants.js.erb which is accessible from http://localhost:3000/assets/rails-constants-0ac54660d36cd34c7e89b718a2521795e9a894af62143d83adcf0a786ee8badf.js

The contents look something like:

export const CIRCLE_VISIBILITY_TYPES = {"OPEN":"open","PUBLIC":"public","EXPERT":"expert","SOLO":"solo","PRIVATE":"private"};

This is accessible as a module via:

<script type="importmap">
  {
    "imports": {
      "railsConstants": "http://localhost:3000/assets/rails-constants-0ac54660d36cd34c7e89b718a2521795e9a894af62143d83adcf0a786ee8badf.js"
    }
  }
</script>

But I can't seem to get this module to be recognized by my webpack bundle:

const options = {
  // https://github.com/webpack/webpack/issues/17123
  target: 'web',
  externals: {
    railsConstants: 'railsConstants',
  },
  resolve: {
    extensions: [
      '.jpg',
      '.jpeg',
      '.png',
      '.gif',
      '.tiff',
      '.ico',
      '.svg',
      '.eot',
      '.otf',
      '.ttf',
      '.woff',
      '.woff2',
      '.tsx',
      '.ts',
      '.js',
      '.jsx',
      '.css',
      '.scss',
      '.sass',
    ],
  },

};

module.exports = merge(webpackConfig, options);

Maybe I'm making it harder than it needs to be?

What is the best way to do this?

[Judahmeek]

@benlieb when you make a file external, webpack doesn't do any processing on it.

So you would want to confirm that the file is already readable by the browser, which export const is not.

I'd recommend using JSON format.

[benlieb]

It should be readable by the browser as import map or module.

[benlieb]

I'd love to figure this out though, it's a huge problem for us. I just want rails constants available as a module in JS. Seems like a common need.

[benlieb]

I don't need to use external if it won't work. I just need to know how to get rails constants into my bundle.

[Judahmeek]

Externals should work fine.

Double check that your externalsType matches what you want.

From the information you've given so far, I assume that you would want to use

externals: {
    railsConstants: 'module railsConstants',
  },

or

externalsType: 'module',
externals: {
    railsConstants: 'railsConstants',
  },

rather than the default externalsType of var.

[benlieb]

Thanks for the continued info on this. My scope has actually narrowed even further since this post. I realize that it has to work in tests as well, which won't have access to the browser environment anyway.

I've decided on doing a mostly manual approach for now, making a service that will look for .js.erb files, and parse them into my app/javascript directory:

# renders everyting in javascript/erb/source into javascripts/erb/rendered
class ErbJsRenderer
  def initialize(rake_command)
    @rake_command = rake_command
    @base_path = 'app/javascript/erb' # TODO: set to tmp dir in test env
    @source_path = "#{@base_path}/source"
    @rendered_path = "#{@base_path}/rendered"
  end

  def render_all
    # get everyting in javascript/erb/source
    Dir.glob("#{@source_path}/*").each do |erb_file|
      render_file erb_file
    end
  end

  def render_file(erb_file)
    result = "// =================================================================\n"
    result += "// === THIS IS AN AUTO-GENERATED FILE\n"
    result += "// === DO NOT EDIT THIS FILE DIRECTLY\n"
    result += "// === Run `rails #{@rake_command}` to regenerate this file\n"
    result += "// =================================================================\n"

    erb_raw = File.read(erb_file)
    result += ERB.new(erb_raw).result(binding)

    filename = File.basename(erb_file, File.extname(erb_file))
    writefile = "#{@rendered_path}/#{filename}"

    return unless Rails.env.development?

    File.write(writefile, result)
    puts "Wrote to #{writefile}"
  end
end

rails-constants.js.erb:

const CIRCLE_VISIBILITY_TYPES = <%= 
  Circle.visibility_types.keys.reduce({}){ |memo, key| 
      memo[key.upcase]=key; memo
  }.to_json
%>;

export default {
  CIRCLE_VISIBILITY_TYPES,
  assets: {
  },
};

This is not ideal because it requires a manual step. But it's the best I have for now, and I need to move on. I might be able to automate this somehow in the future.

It would wonderful if Shakapacker had an out-of-the-box solution to getting rails-based information into the javascript bundle, especially since it's meant to be a bridge between rails and the js bundle. And it may already, but I haven't found it.

Anyway, thanks again!

[jpwilksch]

@benlieb Have you looked at the Gon gem? Very handy for this sort of thing.

[benlieb]

@jpwilksch I didn't know about Gon but it doesn't quite fit my needs, as it requires a network call. I need this to work during JS unit testing as well ideally.

Plus the whole api forces you to marry Gon in it's approach (using the word gon to access variables etc. I try to avoid that.

Thanks for the recommendation though,