rs-activeadmin-searchable_select 4.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/.actrc +20 -0
- data/.claude/commands/fix-tests.md +203 -0
- data/.github/workflows/ci.yml +170 -0
- data/.github/workflows/npm-publish.yml +47 -0
- data/.gitignore +27 -0
- data/.npmignore +58 -0
- data/.rspec +2 -0
- data/.rubocop.yml +67 -0
- data/.yardopts +2 -0
- data/AGENTS.md +39 -0
- data/Appraisals +15 -0
- data/CHANGELOG.md +24 -0
- data/CLAUDE.md +104 -0
- data/Gemfile +11 -0
- data/Gemfile.lock +366 -0
- data/LICENSE.txt +25 -0
- data/README.md +439 -0
- data/Rakefile +4 -0
- data/bin/rspec +17 -0
- data/config/database.yml +16 -0
- data/config.ru +28 -0
- data/docs/activeadmin-4-detailed-reference.md +932 -0
- data/docs/activeadmin-4-gem-migration-guide.md +313 -0
- data/docs/combustion.md +213 -0
- data/docs/for-next-session.md +199 -0
- data/docs/guide-update-your-app.md +213 -0
- data/docs/propshaft-readme.md +121 -0
- data/docs/propshaft-upgrade.md +267 -0
- data/docs/rails-7-asset-pipeline.md +279 -0
- data/docs/setup-activeadmin-app.md +552 -0
- data/docs/setup-activeadmin-gem.md +535 -0
- data/docs/upload-system.md +225 -0
- data/gemfiles/rails_7.x_active_admin_4.x.gemfile +11 -0
- data/gemfiles/rails_7.x_active_admin_4.x.gemfile.lock +371 -0
- data/gemfiles/rails_8.x_active_admin_4.x.gemfile +11 -0
- data/gemfiles/rails_8.x_active_admin_4.x.gemfile.lock +366 -0
- data/lefthook.yml +17 -0
- data/lib/activeadmin/inputs/filters/searchable_select_input.rb +13 -0
- data/lib/activeadmin/inputs/searchable_select_input.rb +11 -0
- data/lib/activeadmin/searchable_select/engine.rb +17 -0
- data/lib/activeadmin/searchable_select/option_collection.rb +119 -0
- data/lib/activeadmin/searchable_select/resource_dsl_extension.rb +56 -0
- data/lib/activeadmin/searchable_select/resource_extension.rb +10 -0
- data/lib/activeadmin/searchable_select/select_input_extension.rb +159 -0
- data/lib/activeadmin/searchable_select/version.rb +5 -0
- data/lib/activeadmin/searchable_select.rb +20 -0
- data/lib/activeadmin-searchable_select.rb +4 -0
- data/lib/generators/active_admin/searchable_select/install/install_generator.rb +217 -0
- data/package-lock.json +18 -0
- data/package.json +45 -0
- data/rs-activeadmin-searchable_select.gemspec +38 -0
- data/sonar-project.properties +25 -0
- data/spec/features/ajax_params_spec.rb +31 -0
- data/spec/features/end_to_end_spec.rb +227 -0
- data/spec/features/filter_input_spec.rb +137 -0
- data/spec/features/form_input_spec.rb +122 -0
- data/spec/features/inline_ajax_setting_spec.rb +26 -0
- data/spec/features/input_errors_spec.rb +76 -0
- data/spec/features/input_html_options_spec.rb +30 -0
- data/spec/features/options_dsl_spec.rb +220 -0
- data/spec/features/production_build_spec.rb +108 -0
- data/spec/internal/app/admin/categories.rb +26 -0
- data/spec/internal/app/admin/dashboard.rb +29 -0
- data/spec/internal/app/admin/option_types.rb +19 -0
- data/spec/internal/app/admin/option_values.rb +30 -0
- data/spec/internal/app/admin/posts.rb +27 -0
- data/spec/internal/app/admin/products.rb +22 -0
- data/spec/internal/app/admin/rgb_colors.rb +25 -0
- data/spec/internal/app/admin/tag_names.rb +21 -0
- data/spec/internal/app/admin/test_ajax_params_category.rb +10 -0
- data/spec/internal/app/admin/test_ajax_params_post.rb +20 -0
- data/spec/internal/app/admin/test_form_post_class.rb +7 -0
- data/spec/internal/app/admin/test_form_post_custom.rb +11 -0
- data/spec/internal/app/admin/test_form_post_resource.rb +11 -0
- data/spec/internal/app/admin/test_form_post_resource_custom.rb +12 -0
- data/spec/internal/app/admin/test_inline_ajax_post.rb +9 -0
- data/spec/internal/app/admin/test_input_html_post.rb +11 -0
- data/spec/internal/app/admin/test_posts_display_text.rb +9 -0
- data/spec/internal/app/admin/test_posts_filter.rb +9 -0
- data/spec/internal/app/admin/test_posts_named.rb +9 -0
- data/spec/internal/app/admin/test_posts_pagination.rb +9 -0
- data/spec/internal/app/admin/test_posts_payload_lambda.rb +11 -0
- data/spec/internal/app/admin/test_posts_payload_proc.rb +9 -0
- data/spec/internal/app/admin/test_posts_scope_lambda.rb +8 -0
- data/spec/internal/app/admin/test_posts_scope_params.rb +8 -0
- data/spec/internal/app/admin/test_posts_scope_user.rb +8 -0
- data/spec/internal/app/admin/test_posts_text_attr.rb +5 -0
- data/spec/internal/app/admin/users.rb +23 -0
- data/spec/internal/app/admin/variants.rb +31 -0
- data/spec/internal/app/assets/config/manifest.js +1 -0
- data/spec/internal/app/assets/javascripts/active_admin.js +2 -0
- data/spec/internal/app/assets/javascripts/searchable_select_test.js +2 -0
- data/spec/internal/app/controllers/application_controller.rb +5 -0
- data/spec/internal/app/css/active_admin_source.css +81 -0
- data/spec/internal/app/js/active_admin.js +17 -0
- data/spec/internal/app/models/article.rb +12 -0
- data/spec/internal/app/models/category.rb +12 -0
- data/spec/internal/app/models/internal/tag_name.rb +14 -0
- data/spec/internal/app/models/internal_tag_name.rb +11 -0
- data/spec/internal/app/models/option_type.rb +12 -0
- data/spec/internal/app/models/option_value.rb +4 -0
- data/spec/internal/app/models/post.rb +15 -0
- data/spec/internal/app/models/product.rb +12 -0
- data/spec/internal/app/models/rgb_color.rb +16 -0
- data/spec/internal/app/models/user.rb +12 -0
- data/spec/internal/app/models/variant.rb +12 -0
- data/spec/internal/build_activeadmin_css.js +115 -0
- data/spec/internal/config/database.yml +7 -0
- data/spec/internal/config/environment.rb +48 -0
- data/spec/internal/config/initializers/active_admin.rb +53 -0
- data/spec/internal/config/initializers/assets.rb +9 -0
- data/spec/internal/config/initializers/searchable_select.rb +6 -0
- data/spec/internal/config/routes.rb +4 -0
- data/spec/internal/config.ru +4 -0
- data/spec/internal/db/schema.rb +63 -0
- data/spec/internal/db/seeds.rb +88 -0
- data/spec/internal/esbuild.config.js +30 -0
- data/spec/internal/inject-jquery.js +4 -0
- data/spec/internal/log/.gitignore +1 -0
- data/spec/internal/package/LICENSE.txt +25 -0
- data/spec/internal/package/README.md +439 -0
- data/spec/internal/package/package.json +45 -0
- data/spec/internal/package/src/index.js +1 -0
- data/spec/internal/package/src/searchable_select/init.js +1 -0
- data/spec/internal/package/src/searchable_select.css +1 -0
- data/spec/internal/package/src/searchable_select.scss +1 -0
- data/spec/internal/package-lock.json +1385 -0
- data/spec/internal/package.json +26 -0
- data/spec/internal/public/favicon.ico +0 -0
- data/spec/internal/spec/internal/app/css/active_admin_source.css +38 -0
- data/spec/internal/spec/internal/log/test.log +0 -0
- data/spec/internal/tailwind-active_admin.config.js +53 -0
- data/spec/rails_helper.rb +86 -0
- data/spec/spec_helper.rb +137 -0
- data/spec/support/active_admin_helpers.rb +17 -0
- data/spec/support/capybara.rb +8 -0
- data/spec/support/models.rb +88 -0
- data/spec/support/pluck_polyfill.rb +12 -0
- data/spec/support/reset_settings.rb +5 -0
- data/src/index.js +77 -0
- data/src/searchable_select/init.js +58 -0
- data/src/searchable_select.css +5 -0
- data/src/searchable_select.css.map +1 -0
- metadata +405 -0
@@ -0,0 +1,267 @@
|
|
1
|
+
# Upgrading from Sprockets to Propshaft
|
2
|
+
|
3
|
+
Propshaft has a smaller scope than Sprockets, therefore migrating to it will also require you to adopt the [jsbundling-rails](https://github.com/rails/jsbundling-rails) and [cssbundling-rails](https://github.com/rails/cssbundling-rails) gems. This guide will assume your project follows Rails 6.1 conventions of using [webpacker](https://github.com/rails/webpacker) to bundle javascript, [sass-rails](https://github.com/rails/sass-rails) to bundle css and [sprockets](https://github.com/rails/sprockets) to digest assets. Finally, you will also need [npx](https://docs.npmjs.com/cli/v7/commands/npx) version 7.1.0 or later installed.
|
4
|
+
|
5
|
+
Propshaft depends on Rails 7, so you will need to upgrade to Rails 7+ before starting the migration.
|
6
|
+
|
7
|
+
## 1. Migrate from Webpacker to jsbundling-rails
|
8
|
+
|
9
|
+
Start by following these steps:
|
10
|
+
|
11
|
+
1. Replace `webpacker` with `jsbundling-rails` in your Gemfile;
|
12
|
+
2. Run `./bin/bundle install`;
|
13
|
+
3. Run `./bin/rails javascript:install:webpack`;
|
14
|
+
4. Remove the file `config/initializers/assets.rb`;
|
15
|
+
5. Remove the file `bin/webpack`;
|
16
|
+
6. Remove the file `bin/webpack-dev-server`;
|
17
|
+
7. Remove the folder `config/webpack` (note: any custom configuration should be migrated to the new `webpack.config.js` file);
|
18
|
+
8. Remove the file `config/webpacker.yml`;
|
19
|
+
9. Replace all instances of `javascript_pack_tag` with `javascript_include_tag` and add `defer: true` to them.
|
20
|
+
|
21
|
+
After you are done you will notice that the install step added various files to your project and updated some of the existing ones.
|
22
|
+
|
23
|
+
**The new 'bin/dev' and 'Procfile.dev' files**
|
24
|
+
|
25
|
+
The `./bin/dev` file is a shell script that uses [foreman](https://github.com/ddollar/foreman) and `Procfile.dev` to start two processes in a single terminal: `rails s` and `yarn build`. The latter replaces `webpack-dev-server` for bundling and watching for changes in javascript files.
|
26
|
+
|
27
|
+
**The 'build' attribute added to package.json**
|
28
|
+
|
29
|
+
This is the command that `yarn build` will use to bundle javascript files.
|
30
|
+
|
31
|
+
**The new 'webpack.config.js' file**
|
32
|
+
|
33
|
+
In `webpacker` this file was hidden inside the gem, but now you can edit it directly. If you had custom configuration in `config/webpack` you can move them to here. Projects with multiple entrypoints will need to adjust the `entry` attribute:
|
34
|
+
|
35
|
+
```js
|
36
|
+
module.exports = {
|
37
|
+
entry: {
|
38
|
+
application: "./app/javascript/application.js",
|
39
|
+
admin: "./app/javascript/admin.js"
|
40
|
+
}
|
41
|
+
}
|
42
|
+
```
|
43
|
+
|
44
|
+
**The 'link_tree' directive added to 'app/assets/manifest.js'**
|
45
|
+
|
46
|
+
This tells Sprockets to include the files in `app/assets/builds` during `assets:precompile`. This is the folder where `yarn build` will place the bundled files, so make sure you commit it to the repository and don't delete it when cleaning assets.
|
47
|
+
|
48
|
+
**What about babel?**
|
49
|
+
|
50
|
+
If you would like to continue using babel for transpiling, you will need to configure it manually. First, open `webpack.config.js` and add this:
|
51
|
+
|
52
|
+
```js
|
53
|
+
module.exports = {
|
54
|
+
module: {
|
55
|
+
rules: [
|
56
|
+
{
|
57
|
+
test: /\.(js)$/,
|
58
|
+
exclude: /node_modules/,
|
59
|
+
use: ['babel-loader']
|
60
|
+
}
|
61
|
+
]
|
62
|
+
}
|
63
|
+
}
|
64
|
+
```
|
65
|
+
|
66
|
+
Then open `package.json` and add this:
|
67
|
+
```json
|
68
|
+
"babel": {
|
69
|
+
"presets": [
|
70
|
+
"./webpack.babel.js"
|
71
|
+
]
|
72
|
+
}
|
73
|
+
```
|
74
|
+
|
75
|
+
Finally, download [webpackers babel preset](https://github.com/rails/webpacker/blob/master/package/babel/preset.js) file and place it in the same directory as `package.json` with the name `webpack.babel.js`.
|
76
|
+
|
77
|
+
**Module resolution**
|
78
|
+
|
79
|
+
Webpacker included the `source_path` (default: `app/javascript/`) into module resolution, so a statement like `import 'channels'` imported `app/javascript/channels/`. After migrating to `jsbundling-rails` this is no longer the case. You will need to update your `webpack.config.js` to include the following if you wish to maintain that behavior:
|
80
|
+
|
81
|
+
```javascript
|
82
|
+
module.exports = {
|
83
|
+
// ...
|
84
|
+
resolve: {
|
85
|
+
modules: ["app/javascript", "node_modules"],
|
86
|
+
},
|
87
|
+
//...
|
88
|
+
}
|
89
|
+
```
|
90
|
+
|
91
|
+
Alternatively, you can change modules to use relative imports, for example:
|
92
|
+
```diff
|
93
|
+
- import 'channels'
|
94
|
+
+ import './channels'
|
95
|
+
```
|
96
|
+
|
97
|
+
### Extracting Sass/SCSS from JavaScript
|
98
|
+
|
99
|
+
In webpacker it is possible to extract Sass/SCSS from JavaScript by enabling `extract_css` in `webpacker.yml`. This allows for including those source files in JavaScript, e.g. `import '../scss/application.scss`
|
100
|
+
|
101
|
+
If you wish to keep this functionality follow these steps:
|
102
|
+
|
103
|
+
1. Run `yarn add mini-css-extract-plugin sass sass-loader css-loader`;
|
104
|
+
2. Update your `webpack.config.js` to require `mini-css-extract-plugin` and configure the loaders (see example below).
|
105
|
+
|
106
|
+
Example `webpack.config.js`:
|
107
|
+
|
108
|
+
```javascript
|
109
|
+
const path = require("path")
|
110
|
+
const webpack = require("webpack")
|
111
|
+
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
|
112
|
+
|
113
|
+
module.exports = {
|
114
|
+
mode: "production",
|
115
|
+
devtool: "source-map",
|
116
|
+
entry: {
|
117
|
+
application: "./app/javascript/application.js"
|
118
|
+
},
|
119
|
+
resolve: {
|
120
|
+
modules: ["app/javascript", "node_modules"],
|
121
|
+
},
|
122
|
+
output: {
|
123
|
+
filename: "[name].js",
|
124
|
+
sourceMapFilename: "[file].map",
|
125
|
+
path: path.resolve(__dirname, "app/assets/builds"),
|
126
|
+
},
|
127
|
+
plugins: [
|
128
|
+
new MiniCssExtractPlugin(),
|
129
|
+
new webpack.optimize.LimitChunkCountPlugin({
|
130
|
+
maxChunks: 1
|
131
|
+
})
|
132
|
+
],
|
133
|
+
module: {
|
134
|
+
rules: [
|
135
|
+
{
|
136
|
+
test: /\.s[ac]ss$/i,
|
137
|
+
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
|
138
|
+
},
|
139
|
+
],
|
140
|
+
},
|
141
|
+
}
|
142
|
+
```
|
143
|
+
|
144
|
+
## 2. Migrate from sass-rails to cssbundling-rails
|
145
|
+
|
146
|
+
Note: if your application used Webpacker's `extract_css` to build your CSS and did not require `sass-rails`, you can skip this section.
|
147
|
+
|
148
|
+
Start by following these steps:
|
149
|
+
|
150
|
+
1. Add `cssbundling-rails` to your Gemfile;
|
151
|
+
2. Run `./bin/bundle install`;
|
152
|
+
3. Run `./bin/rails css:install:sass`.
|
153
|
+
|
154
|
+
After you are done you will notice that the install step updated some files.
|
155
|
+
|
156
|
+
**The new process in 'Procfile.dev'**
|
157
|
+
|
158
|
+
Just like the javascript process, this one will bundle and watch for changes in css files.
|
159
|
+
|
160
|
+
**The 'build:css' attribute added to package.json**
|
161
|
+
|
162
|
+
This is the command `yarn build` will use to bundle css files.
|
163
|
+
|
164
|
+
**The 'link_tree' directive removed from 'app/assets/manifest.js'**
|
165
|
+
|
166
|
+
Now that the CSS files will be placed into `app/assets/build`, Sprockets no longer needs to worry about the `app/assets/stylesheets` folder. If you have any other `link_tree` for css files, remove them too.
|
167
|
+
|
168
|
+
### Configuring multiple entrypoints
|
169
|
+
|
170
|
+
Sprockets will only compile files in the root directories listed in `manifest.js`, but the sass package that `yarn build` uses will also check subfolders, which might cause compilation errors if your scss files are using features like `@import` and variables. This means that if you have multiple entry points in your app, you have some extra work ahead of you.
|
171
|
+
|
172
|
+
Let's assume you have the following structure in your `app/asset/stylesheets` folder:
|
173
|
+
|
174
|
+
```
|
175
|
+
stylesheets/admin.scss
|
176
|
+
stylesheets/admin/source_1.scss
|
177
|
+
stylesheets/admin/source_2.scss
|
178
|
+
stylesheets/application.scss
|
179
|
+
stylesheets/application/source_1.scss
|
180
|
+
stylesheets/application/source_2.scss
|
181
|
+
```
|
182
|
+
|
183
|
+
Start by your separating your entrypoints from your other files, and adjusting all `@import` for the new structure:
|
184
|
+
|
185
|
+
```
|
186
|
+
stylesheets/entrypoints/admin.scss
|
187
|
+
stylesheets/entrypoints/application.scss
|
188
|
+
stylesheets/sources/admin/source_1.scss
|
189
|
+
stylesheets/sources/admin/source_2.scss
|
190
|
+
stylesheets/sources/application/source_1.scss
|
191
|
+
stylesheets/sources/application/source_2.scss
|
192
|
+
```
|
193
|
+
|
194
|
+
Then adjust the `build` attribute in `package.json`:
|
195
|
+
```
|
196
|
+
"build:css": "sass ./app/assets/stylesheets/entrypoints:./app/assets/builds --no-source-map --load-path=node_modules"
|
197
|
+
```
|
198
|
+
|
199
|
+
### Deprecation warnings
|
200
|
+
|
201
|
+
Sass might raise deprecation warnings depending on what features you are using (such as division), but the messages will explain how to fix them. If you are not sure, see more details in the [official documentation](https://sass-lang.com/documentation/breaking-changes).
|
202
|
+
|
203
|
+
## 3. Migrate from Sprockets to Propshaft
|
204
|
+
|
205
|
+
Start by following these steps:
|
206
|
+
|
207
|
+
1. Remove `sprockets`, `sprockets-rails`, and `sass-rails` from the Gemfile and add `propshaft`;
|
208
|
+
2. Run `./bin/bundle install`;
|
209
|
+
3. Check your `Gemfile.lock`, repeat steps 1 and 2 for gems that list `sprockets` or `sprockets-rails` as a dependency;
|
210
|
+
4. Open `config/application.rb` and remove `config.assets.paths << Rails.root.join('app','assets')`;
|
211
|
+
5. Remove `app/assets/config/manifest.js`.
|
212
|
+
6. Replace all asset_helpers (`image_url`, `font_url`) in css files with standard `urls`.
|
213
|
+
7. If you are importing only the frameworks you need (instead of `rails/all`), remove `require "sprockets/railtie"`;
|
214
|
+
|
215
|
+
### Asset paths
|
216
|
+
|
217
|
+
Propshaft will automatically include in its search paths the folders `vendor/assets`, `lib/assets` and `app/assets` of your project and of all the gems in your Gemfile. You can see all included files by using the `reveal` rake task:
|
218
|
+
```
|
219
|
+
rake assets:reveal
|
220
|
+
```
|
221
|
+
|
222
|
+
### Asset helpers
|
223
|
+
|
224
|
+
Propshaft does not rely on asset_helpers (`asset_path`, `asset_url`, `image_url`, etc.) like Sprockets did. Instead, it will search for every `url` function in your css files, and adjust them to include the digest of the assets they reference.
|
225
|
+
|
226
|
+
Go through your css files, and make the necessary adjustments:
|
227
|
+
```diff
|
228
|
+
- background: image_url('hero.jpg');
|
229
|
+
+ background: url('/hero.jpg');
|
230
|
+
```
|
231
|
+
|
232
|
+
Notice that Propshaft's version starts with an `/` and Sprockets' version does not? That's because the latter uses **absolute paths**, and the former uses **relative paths**. To better illustrate that difference, let's assume you have the following structure:
|
233
|
+
|
234
|
+
```
|
235
|
+
assets/stylesheets/theme/main.scss
|
236
|
+
assets/images/hero.jpg
|
237
|
+
```
|
238
|
+
|
239
|
+
In Sprockets, `main.scss` can reference `hero.jpg` like this:
|
240
|
+
```css
|
241
|
+
background: image_url('hero.jpg')
|
242
|
+
```
|
243
|
+
|
244
|
+
Using the same path with `url` in Propshaft will cause it to raise an error, saying it cannot locate `theme/hero.jpg`. That's because Propshaft assumes all paths are relative to the path of the file it's processing. Since it was processing a css file inside the `theme` folder, it will also look for `hero.jpg` in the same folder.
|
245
|
+
|
246
|
+
By adding a `/` at the start of the path we are telling Propshaft to consider this path as an absolute path. While this change in behavior increases the work a bit when upgrading, it makes **external libraries like FontAwesome and Bootstrap themes work out-of-the-box**.
|
247
|
+
|
248
|
+
### Asset content
|
249
|
+
|
250
|
+
It's a common pattern in apps to inline small SVG files and low resolution versions of images that need to be displayed as quickly as possible. In Propshaft, the same line of code works for all environments:
|
251
|
+
```ruby
|
252
|
+
Rails.application.assets.load_path.find('logo.svg').content
|
253
|
+
```
|
254
|
+
|
255
|
+
As Rails escapes html tags in views by default, in order to output a rendered svg you will need to specify rails not to escape the string using [html_safe](https://api.rubyonrails.org/classes/String.html#method-i-html_safe) or [raw](https://api.rubyonrails.org/classes/ActionView/Helpers/OutputSafetyHelper.html#method-i-raw).
|
256
|
+
```ruby
|
257
|
+
Rails.application.assets.load_path.find('logo.svg').content.html_safe
|
258
|
+
raw Rails.application.assets.load_path.find('logo.svg').content
|
259
|
+
```
|
260
|
+
|
261
|
+
### Precompilation in development
|
262
|
+
|
263
|
+
Propshaft uses a dynamic assets resolver in development mode. However, when you run `assets:precompile` locally Propshaft will then switch to a static assets resolver. Therefore, changes to assets will not be observed anymore and you will have to precompile the assets each time changes are made. This is different to Sprockets.
|
264
|
+
|
265
|
+
If you wish to have dynamic assets resolver enabled again, you need to clean your target folder (usually `public/assets`) and propshaft will start serving dynamic content from source. One way to do this is to run `rails assets:clobber`.
|
266
|
+
|
267
|
+
Another way to watch changes in your CSS & JS assets is by running `bin/dev` command instead of `rails server` that not only runs the server but also keeps looking for any changes in the assets and once it detects any changes, it compiles them while the server is running. This is possible because of the `Procfile.dev`.
|
@@ -0,0 +1,279 @@
|
|
1
|
+
## [](https://discuss.rubyonrails.org/t/guide-to-rails-7-and-the-asset-pipeline/80851#intro-1)Intro
|
2
|
+
|
3
|
+
Rails 7 brought with it an overhaul of the Asset Pipeline in the form of multiple new gems that either introduced a new way of handling assets (importmaps-rails), or broke down existing gems (propshaft, jsbundling-rails, cssbundling-rails) into smaller parts that make use of existing standalone tools and therefore support modern features that were previously unavailable.
|
4
|
+
|
5
|
+
## ActiveAdmin Trumbowyg Integration
|
6
|
+
|
7
|
+
**Important**: As of version 2.0, this gem **no longer supports Sprockets**. You must use a modern JavaScript bundler (esbuild, webpack, or similar) with Rails 7+.
|
8
|
+
|
9
|
+
### Installation with Modern Bundlers (esbuild/webpack)
|
10
|
+
|
11
|
+
1. Install the NPM package:
|
12
|
+
```bash
|
13
|
+
npm install @rocket-sensei/activeadmin_trumbowyg
|
14
|
+
```
|
15
|
+
|
16
|
+
2. Import the package in your JavaScript entrypoint (e.g., `app/javascript/application.js`):
|
17
|
+
```javascript
|
18
|
+
import '@rocket-sensei/activeadmin_trumbowyg'
|
19
|
+
```
|
20
|
+
|
21
|
+
3. The package automatically:
|
22
|
+
- Registers the Trumbowyg editor with ActiveAdmin
|
23
|
+
- Loads all required styles
|
24
|
+
- Configures the editor for `ActiveAdmin.FormBuilder`
|
25
|
+
|
26
|
+
### JavaScript Module Structure
|
27
|
+
|
28
|
+
The NPM package exports JavaScript modules from the `active_admin/` namespace:
|
29
|
+
- `active_admin/trumbowyg.js` - Main editor initialization
|
30
|
+
- `active_admin/init.js` - ActiveAdmin integration setup
|
31
|
+
|
32
|
+
### Migration from Sprockets
|
33
|
+
|
34
|
+
If you're upgrading from an older version that used Sprockets:
|
35
|
+
|
36
|
+
1. Remove any Sprockets require directives:
|
37
|
+
```javascript
|
38
|
+
// Remove these lines:
|
39
|
+
//= require activeadmin/trumbowyg
|
40
|
+
//= require activeadmin/init
|
41
|
+
```
|
42
|
+
|
43
|
+
2. Remove the gem's assets from your Sprockets manifest
|
44
|
+
3. Install via NPM and import as shown above
|
45
|
+
4. Ensure you're using jsbundling-rails, propshaft, or similar modern asset handling
|
46
|
+
|
47
|
+
While a few of these gems are still in pre-release status, their maintainers, contributors and early adopters have already deployed them to production. However, widespread adoption is currently being hampered by the lack of detailed documentation and some missing features that would allow them to support more use cases.
|
48
|
+
|
49
|
+
With the creation of the new Rails Discord channel for people interested in contributing to Rails, I think it’s a good time to coordinate with the community so we can pare down the rough edges. Therefore I’d like to start this thread so we can make a more visible demonstration that there are people working to improve things and provide central source of knowledge while all the related guides haven’t been updated.
|
50
|
+
|
51
|
+
**If you want the TL:DR version of this guide, check “What will Rails recommend going forward?” further down.**
|
52
|
+
|
53
|
+
**This is a work in progress**
|
54
|
+
|
55
|
+
## [](https://discuss.rubyonrails.org/t/guide-to-rails-7-and-the-asset-pipeline/80851#four-approaches-to-the-asset-pipeline-2)Four approaches to the Asset Pipeline
|
56
|
+
|
57
|
+
- Sprockets: The original asset pipeline gem, built for the HTTP/1 era and low javascript frontends. It handled the bundling and digesting of javascript, css and image files, without relying on node packages.
|
58
|
+
|
59
|
+
- Webpacker/Shakapacker: Shipped with Rails 5.2, as a wrapper around the complexity of Webpack/Node/Yarn, this gem could completely replace Sprockets or simply take over javascript transpiling and bundling. It provided Rails “out of the box” support for SPA frameworks like React.
|
60
|
+
|
61
|
+
- Import Maps: Shipped with Rails 7.0, it replaces Sprockets as the default asset pipeline gem. Although it eliminates the need for node/yarn and other complex tooling, it requires the application using it to be deployed in an environment that supports HTTP/2, otherwise it causes severe performance problems.
|
62
|
+
|
63
|
+
- Bundling gems: Shipped with Rails 7.0, the multiple bundling gems provide a more traditional, if more modern, approach to the asset pipeline than import maps does. They basically break down the “all in one” approach of Sprockets into multiple smaller, specialized pieces. The main gems are propshaft, jsbundling and cssbundling.
|
64
|
+
|
65
|
+
|
66
|
+
## [](https://discuss.rubyonrails.org/t/guide-to-rails-7-and-the-asset-pipeline/80851#explanations-and-recommendations-3)Explanations and recommendations
|
67
|
+
|
68
|
+
I’m writing this not as maintainer of any of these gems, but as a regular contributor and someone who has deployed most of them in the monolithic production app that my own company relies on. Corrections and suggestions are welcome.
|
69
|
+
|
70
|
+
### [](https://discuss.rubyonrails.org/t/guide-to-rails-7-and-the-asset-pipeline/80851#sprockets-4)Sprockets
|
71
|
+
|
72
|
+
- Status: Maintained (but **NOT supported by activeadmin_trumbowyg**)
|
73
|
+
|
74
|
+
- Notes: Several fixes and updates are only available in the edge version.
|
75
|
+
|
76
|
+
|
77
|
+
The original asset pipeline gem, Sprockets provides bundling and digesting for javascript, css and image files. Built before node was widely adopted, Sprocket's "everything included" approach worked well for many years. However, as frontend programming became more complex, it started to fall behind dedicated tools like webpack. It was the only officially supported gem up to Rails 5.2, when Webpacker was introduced, and remained the default until Rails 7, when it was replaced by Import Maps.
|
78
|
+
|
79
|
+
**Important for activeadmin_trumbowyg users**: This gem no longer supports Sprockets. You must use a modern JavaScript bundler with the NPM package `@rocket-sensei/activeadmin_trumbowyg`.
|
80
|
+
|
81
|
+
**If you are learning Rails**: Don't use it. Your time will be better spent learning one of the more modern approaches.
|
82
|
+
|
83
|
+
**If you are starting a new app**: Only if you absolutely do not want to deal with node/yarn and are not ready for import maps. Note that activeadmin_trumbowyg will not work with Sprockets.
|
84
|
+
|
85
|
+
**If you have an existing app with Sprockets**: You can continue using it for other assets, but you'll need to migrate to a modern bundler to use activeadmin_trumbowyg. Sprockets will receive maintenance updates at least until Propshaft reaches 1.0, and probably longer.
|
86
|
+
|
87
|
+
### [](https://discuss.rubyonrails.org/t/guide-to-rails-7-and-the-asset-pipeline/80851#webpacker-5)Webpacker
|
88
|
+
|
89
|
+
- Status: Retired
|
90
|
+
|
91
|
+
- Notes: All work done for the unreleased version 6 went to Shakapacker.
|
92
|
+
|
93
|
+
|
94
|
+
Rails has always had a complicated relationship with vanilla javascript, and to get around perceived limitations of the language, it adopted coffeescript as the default. Things changed with the arrival of ES6 and Babel for transpilation, but getting everything working so that you could use modern features of the language while remaining compatible with older browsers was difficult. Webpacker was created to solve that problem and for some time provided the bridge for developers interested in investing more heavily in the javascript ecosystem.
|
95
|
+
|
96
|
+
Five years later, all browsers oficially support ES6, so transpilation was no longer necessary and the extra complexity not worth for many developers. This lead to Webpacker being retired.
|
97
|
+
|
98
|
+
**If you are learning Rails**: Don’t use it. If your plan is to build your frontend entirely with Rails and Hotwired, then import maps is the preferred approach. However if your plan is to use a framework like React, then Shakapacker is the official sucessor and includes all the nice things that most javascript developers expect.
|
99
|
+
|
100
|
+
**If you are starting a new app**: Don’t use it. SPAs should go with Shakapacker, the official sucessor of Webpacker, which supports things like HMR. Hotwired/Tailwind based apps should go with importmaps-rails, or the bundling gems, which let you to choose your preferred bundling tool (esbuild, postcss, etc.).
|
101
|
+
|
102
|
+
**If you have an existing app with Webpacker**: Give some serious consideration to replacing it. If your app is a SPA, specially a React one, then Shakapacker is your friend, as it’s the official sucessor to Webpacker. If you are mostly using Hotwired and doing server side rendering, jsbundling-rails + webpack is an easy migration (and you can later migrate to the excellent esbuild).
|
103
|
+
|
104
|
+
### [](https://discuss.rubyonrails.org/t/guide-to-rails-7-and-the-asset-pipeline/80851#import-maps-6)Import maps
|
105
|
+
|
106
|
+
- Status: Released, in active development
|
107
|
+
|
108
|
+
- Notes: A shim is available to provide support for older browsers.
|
109
|
+
|
110
|
+
|
111
|
+
Rails 7 apps defaults to the importmaps-rails gem, which shares the same name as the import maps feature in browsers. This gem relies on the trifecta of HTTP2 (which eliminates the penalty of many small files), wide spread support for ES6 and the import map feature (which can the added to legacy browsers and Safari through a shim).
|
112
|
+
|
113
|
+
**If you are learning Rails**: This is the preferred approach, but only if you plan on building your frontends with Rails/Hotwired. If you want to use React/Vue/etc. then go with Shakapacker.
|
114
|
+
|
115
|
+
**If you are starting a new app**: Is it an SPA or your planned production environment only support HTTP1? This is not your friend, go with Shakapacker or the bundlings gems. However, if you are on the Hotwired team and have Cloudflare or Nginx in front of your Puma servers, then sure!
|
116
|
+
|
117
|
+
**If you have an existing app**: Stay where you are. This is a very different approach to handling javascript and css files and will require extensive work to migrate, specially if you have a lot of frontend code or rely on many node packages.
|
118
|
+
|
119
|
+
### [](https://discuss.rubyonrails.org/t/guide-to-rails-7-and-the-asset-pipeline/80851#propshaft-7)Propshaft
|
120
|
+
|
121
|
+
- Status: Alpha, in active development
|
122
|
+
|
123
|
+
- Notes: Already deployed to production in Basecamp (and by me, FWIW).
|
124
|
+
|
125
|
+
|
126
|
+
The sucessor to Sprockets, it has a much smaller scope than its predecessor: it’s only handles digesting, fixin references in css files so they use the digested filename, and moving everything to the public folder.
|
127
|
+
|
128
|
+
This means that any setup using propshaft will also be using one or more of the new bundlings gems, probably jsbundling-rails and cssbundling-rails.
|
129
|
+
|
130
|
+
**If you are learning Rails**: Don’t use it. It has no documentation, very few users and is still in alpha. You are already going to be spending a lot of effort learning other things, no need to make your life harder.
|
131
|
+
|
132
|
+
**If you are starting a new app**: Stick to import maps if you are going with Hotwired or shakapacker if you are going with React.
|
133
|
+
|
134
|
+
**If you have an existing app**: Maybe. It should be an easy migration for apps that are running Sprockets (CSS and digests) and Webpacker (javascript) and will also allow you to later webpack with the phenomenal esbuild. Just make sure you are comfortable running pre-release code with almost zero documentation in production. For what is worth, I’m using it in production and so is Basecamp.
|
135
|
+
|
136
|
+
### [](https://discuss.rubyonrails.org/t/guide-to-rails-7-and-the-asset-pipeline/80851#jsbundling-rails-8)jsbundling-rails
|
137
|
+
|
138
|
+
- Status: Released, in active development
|
139
|
+
|
140
|
+
- Notes: **Recommended for activeadmin_trumbowyg users**
|
141
|
+
|
142
|
+
|
143
|
+
Provides javascript bundling features that were previously handled by Sprockets and Webpacker. Supports webpack, esbuild and rollup.
|
144
|
+
|
145
|
+
**For activeadmin_trumbowyg users**: This is the recommended approach. Install the NPM package with `npm install @rocket-sensei/activeadmin_trumbowyg` and import it in your JavaScript entrypoint.
|
146
|
+
|
147
|
+
**If you are learning Rails**: This is a good choice if you need npm packages or complex JavaScript features.
|
148
|
+
|
149
|
+
**If you are starting a new app**: Excellent choice for apps that need npm packages, including activeadmin_trumbowyg.
|
150
|
+
|
151
|
+
**If you have an existing app**: Great migration path from Webpacker or Sprockets, especially for activeadmin_trumbowyg integration.
|
152
|
+
|
153
|
+
### [](https://discuss.rubyonrails.org/t/guide-to-rails-7-and-the-asset-pipeline/80851#cssbundling-rails-9)cssbundling-rails
|
154
|
+
|
155
|
+
- Status: Released, in active development
|
156
|
+
|
157
|
+
- Notes:
|
158
|
+
|
159
|
+
|
160
|
+
Provides css bundling features that were previously handled by Sprockets and Webpacker. Supports Tailwind, Bootstrap, Bulma, PostCSS and Dart Sass.
|
161
|
+
|
162
|
+
**If you are learning Rails**:
|
163
|
+
|
164
|
+
**If you are starting a new app**:
|
165
|
+
|
166
|
+
**If you have an existing app**:
|
167
|
+
|
168
|
+
### [](https://discuss.rubyonrails.org/t/guide-to-rails-7-and-the-asset-pipeline/80851#dartsass-rails-10)dartsass-rails
|
169
|
+
|
170
|
+
- Status: Released, in active development
|
171
|
+
|
172
|
+
- Notes:
|
173
|
+
|
174
|
+
|
175
|
+
Same as cssbundling-rails, but specific for dart. A wrapper around the platform specific versions of dart, instead of the yarn versions.
|
176
|
+
|
177
|
+
**If you are learning Rails**:
|
178
|
+
|
179
|
+
**If you are starting a new app**:
|
180
|
+
|
181
|
+
**If you have an existing app**:
|
182
|
+
|
183
|
+
### [](https://discuss.rubyonrails.org/t/guide-to-rails-7-and-the-asset-pipeline/80851#what-will-rails-recommend-going-forward-11)What will Rails recommend going forward?
|
184
|
+
|
185
|
+
The default (no node/yarn):
|
186
|
+
|
187
|
+
- Rails 7: Import Maps + Sprockets
|
188
|
+
- Rails 8: Import Maps + Propshaft
|
189
|
+
|
190
|
+
The alternative way (with node/yarn and your choice of bundler):
|
191
|
+
|
192
|
+
- Rails 7: Bundling Gems\* + Sprockets
|
193
|
+
- Rails 8: Bundling Gems\* + Propshaft
|
194
|
+
|
195
|
+
\* Bundling gems are `cssbundling-rails`, `jsbundling-rails`, etc.
|
196
|
+
|
197
|
+
### [](https://discuss.rubyonrails.org/t/guide-to-rails-7-and-the-asset-pipeline/80851#github-pages-12)Github Pages
|
198
|
+
|
199
|
+
- [Sprockets](https://github.com/rails/sprockets)
|
200
|
+
|
201
|
+
- [Propshaft](https://github.com/rails/propshaft/)
|
202
|
+
|
203
|
+
- [Shakapacker](https://github.com/shakacode/shakapacker)
|
204
|
+
|
205
|
+
- [importmap-rails](https://github.com/rails/importmap-rails)
|
206
|
+
|
207
|
+
- [jsbundling-rails](https://github.com/rails/jsbundling-rails)
|
208
|
+
|
209
|
+
- [cssbundling-rails](https://github.com/rails/cssbundling-rails)
|
210
|
+
|
211
|
+
- [dartsass-rails](https://github.com/rails/dartsass-rails)
|
212
|
+
|
213
|
+
- [tailwind-rails](https://github.com/rails/tailwindcss-rails)
|
214
|
+
|
215
|
+
|
216
|
+
### [](https://discuss.rubyonrails.org/t/guide-to-rails-7-and-the-asset-pipeline/80851#upgrade-guides-13)Upgrade Guides
|
217
|
+
|
218
|
+
- [From Turbolinks to Turbo](https://github.com/hotwired/turbo-rails/blob/main/UPGRADING.md)
|
219
|
+
|
220
|
+
- [From Sprockets/Wepacker to Propshaft](https://github.com/rails/propshaft/blob/main/UPGRADING.md)
|
221
|
+
|
222
|
+
- [From Webpacker to Shakapacker](https://github.com/shakacode/shakapacker/blob/master/docs/v6_upgrade.md)
|
223
|
+
|
224
|
+
|
225
|
+
### [](https://discuss.rubyonrails.org/t/guide-to-rails-7-and-the-asset-pipeline/80851#relevant-information-14)Relevant Information
|
226
|
+
|
227
|
+
- [Modern web apps without JavaScript bundling or transpiling](https://world.hey.com/dhh/modern-web-apps-without-javascript-bundling-or-transpiling-a20f2755)
|
228
|
+
|
229
|
+
- [Introducing Propshaft](https://world.hey.com/dhh/introducing-propshaft-ee60f4f6)
|
230
|
+
|
231
|
+
|
232
|
+
### Complete ActiveAdmin Trumbowyg Setup Example
|
233
|
+
|
234
|
+
For a new Rails 7+ app with ActiveAdmin and Trumbowyg:
|
235
|
+
|
236
|
+
1. **Setup Rails with jsbundling and cssbundling:**
|
237
|
+
```bash
|
238
|
+
rails new myapp -j esbuild -c bootstrap
|
239
|
+
cd myapp
|
240
|
+
```
|
241
|
+
|
242
|
+
2. **Add ActiveAdmin and activeadmin_trumbowyg gems:**
|
243
|
+
```ruby
|
244
|
+
# Gemfile
|
245
|
+
gem 'activeadmin'
|
246
|
+
gem 'activeadmin_trumbowyg'
|
247
|
+
```
|
248
|
+
|
249
|
+
3. **Install the NPM package:**
|
250
|
+
```bash
|
251
|
+
npm install @rocket-sensei/activeadmin_trumbowyg
|
252
|
+
```
|
253
|
+
|
254
|
+
4. **Import in your JavaScript entrypoint:**
|
255
|
+
```javascript
|
256
|
+
// app/javascript/application.js
|
257
|
+
import '@rocket-sensei/activeadmin_trumbowyg'
|
258
|
+
```
|
259
|
+
|
260
|
+
5. **Use in your ActiveAdmin forms:**
|
261
|
+
```ruby
|
262
|
+
# app/admin/posts.rb
|
263
|
+
form do |f|
|
264
|
+
f.inputs do
|
265
|
+
f.input :title
|
266
|
+
f.input :content, as: :trumbowyg
|
267
|
+
end
|
268
|
+
f.actions
|
269
|
+
end
|
270
|
+
```
|
271
|
+
|
272
|
+
**Note**: The JavaScript modules are now under the `active_admin/` namespace, not `activeadmin/`. The NPM package handles all initialization automatically when imported.
|
273
|
+
|
274
|
+
### [](https://discuss.rubyonrails.org/t/guide-to-rails-7-and-the-asset-pipeline/80851#changelog-15)Changelog
|
275
|
+
|
276
|
+
- 2022-06-17: First version
|
277
|
+
- 2022-06-18: Added the 'Four approaches' section. Rewrote some explanations
|
278
|
+
- 2022-06-28: Added "What will Rails recommend".
|
279
|
+
- 2024-XX-XX: Added activeadmin_trumbowyg NPM package instructions and Sprockets deprecation notice
|