importmap-view-component-stimulus - GitLite

KO | EN

gitlite — search

#c #open-source #reactjs #shell #typescript #pytorch #containers #self-hosted #awesome #linux

importmap-view-component-stimulus

(★ 14)

Example to replicate "Rails 7 View Component Stimulus" problem

File Explorer

ZIP Download

- - application_controller.rb
  - pages_controller.rb
- - application_helper.rb
  - pages_helper.rb
- - application.js
- - application_job.rb
- - application_mailer.rb
- - application_record.rb
- bundle
- dev
- importmap
- rails
- rake
- setup
- - development.rb
  - production.rb
  - test.rb
- - assets.rb
  - content_security_policy.rb
  - filter_parameter_logging.rb
  - inflections.rb
  - permissions_policy.rb
- - en.yml
- application.rb
- boot.rb
- cable.yml
- credentials.yml.enc
- database.yml
- environment.rb
- importmap.rb
- puma.rb
- routes.rb
- storage.yml
- tailwind.config.js
- seeds.rb
- fails.png
- fails2.png
- fails3.png
- works.png
- - .keep
- - .keep
- .keep
- 404.html
- 422.html
- 500.html
- apple-touch-icon-precomposed.png
- apple-touch-icon.png
- favicon.ico
- robots.txt
- .keep
- - example_component_test.rb
- - .keep
  - pages_controller_test.rb
- - .keep
- - .keep
- - .keep
- - .keep
- - .keep
- application_system_test_case.rb
- test_helper.rb
- - .keep
- - .keep
- .keep
- - .keep
- .keep
.gitattributes
.gitignore
.ruby-version
config.ru
Gemfile
Gemfile.lock
Procfile.dev
Rakefile
README.md

# Use via CDN

jsDelivr

jsDelivr serves any public GitHub repository as a CDN with zero setup. Pick a version and a file to get a ready-to-paste link and snippet.

Version

File

Link

Example

Command Glossary

Commands referenced in this DOCs, explained below.

🔍

`bundle`

View Details ▼

Dependency manager for the Ruby programming language.

bundle install

Install all gems defined in the `Gemfile` expected in the working directory:

bundle exec {{command}} {{arguments}}

Execute a command in the context of the current bundle:

bundle update

Update all gems by the rules defined in the `Gemfile` and regenerate `Gemfile.lock`:

🔍

`rails new`

View Details ▼

Create a new Rails application.

rails new blog

Create a Rails app named `blog` in the current directory:

rails new {{app_name}} --api

Create a Rails app with API-only configuration:

rails new {{app_name}} {{[-d|--database]}} postgresql

Create a Rails app with `postgresql` as the database:

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

This is a test app to replicate the setup that allows you to use importmaps-backed vanilla `rails new` Rails 7 app with the View Components generated with `--stimulus` flag.

The `main` branch contains a workaround that allows both default Stimulus controllers, and the Stimulus controllers generated by View Component to co-exist.

Run the app locally:

- clone this repo
- `bundle && dev/bin`
- point the browser to `localhost:3000`

The `fail` branch demonstrates that the obvious way to pin component's Stimulus controllers in `importmap.rb` and register them in `manifest.js` doesn't work and leads to the _"Importmap skipped missing path"_ error.

## Current workaround

Currently, in order for the `components/example_component_controller.js` to work, the `components` folder **needs to be nested**.
If we place `components` inside `app/frontend` and add the following configuration, controllers work as expected:

```rb
# importmap.rb

pin 'application', preload: true
pin '@hotwired/turbo-rails', to: 'turbo.min.js', preload: true
pin '@hotwired/stimulus', to: 'stimulus.min.js', preload: true
pin '@hotwired/stimulus-loading', to: 'stimulus-loading.js', preload: true
pin_all_from 'app/javascript/controllers', under: 'controllers'
# New configuration
pin_all_from 'app/frontend/components', under: 'controllers', to: 'components'
```

```rb
# application.rb

config.eager_load_paths << Rails.root.join('app/frontend/components')
config.importmap.cache_sweepers << Rails.root.join('app/frontend')
config.assets.paths << Rails.root.join('app/frontend')
config.view_component.view_component_path = 'app/frontend/components'
```

```js
// manifest.js

//= link_tree ../images
//= link_directory ../stylesheets .css
//= link_tree ../../javascript .js
//= link_tree ../builds
// New configuration
//= link_tree ../../frontend/components .js
```

![Both controllers are functioning](https://raw.githubusercontent.com/progapandist/importmap-view-component-stimulus/main/docs/works.png)

This workaround is not ideal, as it requires us messing with the Rails' `eager_load_paths`, even though it should not be the case for folders under `app`.

## Without the workaround

Here's the same app's configuration, but without the workaround (components are under `app/components`). There are no changes to `application.rb` and the controllers are loaded like so:

```rb
# importmap.rb

pin 'application', preload: true
pin '@hotwired/turbo-rails', to: 'turbo.min.js', preload: true
pin '@hotwired/stimulus', to: 'stimulus.min.js', preload: true
pin '@hotwired/stimulus-loading', to: 'stimulus-loading.js', preload: true
pin_all_from 'app/javascript/controllers', under: 'controllers'
# New configuration
pin_all_from 'app/components', under: 'components'
```

```js
// manifest.js

//= link_tree ../images
//= link_directory ../stylesheets .css
//= link_tree ../../javascript .js
//= link_tree ../../components .js
//= link_tree ../builds
```

```js
// app/javascript/controllers/index.js

// Import and register all your controllers from the importmap under controllers/*

import { application } from "controllers/application";

// Eager load all controllers defined in the import map under controllers/**/*_controller
import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading";
eagerLoadControllersFrom("controllers", application);

// Added line
eagerLoadControllersFrom("components", application);
```

As you can see, in this case the View Component's Stimulus controllers are not loaded.

![Only vanilla controllers work](https://raw.githubusercontent.com/progapandist/importmap-view-component-stimulus/main/docs/fails.png)
![Controllers from app/components not loaded](https://raw.githubusercontent.com/progapandist/importmap-view-component-stimulus/main/docs/fails2.png)
![Error in server logs](https://raw.githubusercontent.com/progapandist/importmap-view-component-stimulus/main/docs/fails3.png)