API

[chrisdmacrae]

The problem

Importmaps make the API gross, unfortunately.

We need to resolve controllers from a folder inside app/components, such as app/components/hot_components OR manually resolve each component controller in an importmap manifest js file.

With jsbundling this is not an issue because we generate a manifest file that does relative imports.

This is because importmaps do conventional magic with the Rails asset pipeline to resolve a custom module identifier to a compiled asset, and the conventional magic is based on conventional magic of the Rails asset pipeline.

E.g, given the following Rails app structure:

app/
  assets/
    config/
      manifest.js
  javascript/
    controllers/
      index.js
      example_controller.js
    application.js
config/
  importmap.rb

---

// app/assets/config/manifest.js
//= link_tree ../../javascript .js

This results in the following structure in public/assets:

application.js
controllers/
  index.js
  example_controller.js

---

config/importmap.rb

pin_all_from 'app/javascript/controllers', under: 'controllers'

This results in the following importmap:

{
  "application": "/assets/application-12345.js
  "controllers/example_component: "/assets/controllers/example_component_controller-12345.js"
  "controllers": "/assets/controllers/index-12345.js"
}

---

This means that given a root folder in app, like app/components you can only have root JS assets in public/assets. Such as app/components/example_controller.js resolving to /public/assets/example_controller.js.

There is no way to configure this differently.

Given an asset in the root of public/assets, it cannot be namespaces in importmap. An importmap namespace must be equivalent to the folder for no fucking reason other than bad API design.

E.g.,

The following does not work:

pin_all_from 'app/components', under: 'components'

Because app/components does not output to public/assets/components.

The Scope

Decide what the API should be to resolve the problem above.

Some options:

1. A components/hot_components namespace

app/
  components/
   hot_components/
     example_component.rb
     example_component.html.erb
     example_component.css
     example_component.js
     example_component_controller.js

2. Namespaced hot components

app/
  components/
   example/
     component.rb
     component.html.erb
     component.css
     component.js
     component_controller.js

3. An importmap manifest; given a bunch of non-namespaced components, we generate an individual import for each component in a manifest file:

app/
  components/
    example_component.rb
    example_component.html.erb
    example_component.css
    example_component.js
    example_component_controller.js

And app/javascripts/controllers/components.js:

import { application} from "application"

import ExampleComponentController from "example-component"
application.register('example-component', ExampleComponentController)