Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Tutorial: How to integrate Hotwire / Turbo / Stimulus in AAv4#8694

vfonic started this conversation inShow and tell
Discussion options

  1. Inapp/views/active_admin/_html_head.html.erb:

    -<%= javascript_importmap_tags "active_admin", importmap: ActiveAdmin.importmap %>+<%= javascript_importmap_tags %>

  2. Load ActiveAdmin, Turbo and Stimulus through importmaps:

    Here's an example `config/importmap.rb`:
    # Pin npm packages by running ./bin/importmappin"application"pin"@hotwired/turbo-rails",to:"turbo.min.js"pin"@hotwired/stimulus",to:"@hotwired--stimulus.js"# @3.2.2pin"@hotwired/stimulus-loading",to:"stimulus-loading.js"pin_all_from"app/javascript/controllers",under:"controllers"pin"flowbite",to:"https://cdn.jsdelivr.net/npm/flowbite@2.5.2/dist/flowbite.turbo.min.js"# @2.5.2pin"@stimulus-components/auto-submit",to:"@stimulus-components--auto-submit.js"# @6.0.0pin"@activeadmin/activeadmin",to:"@activeadmin--activeadmin.js"# @4.0.0pin"@rails/ujs",to:"@rails--ujs.js"# @7.1.400pin"stimulus-datepicker"# @1.0.9pin"flowbite-datepicker"# @1.3.1

    • Most of these files are invendor/javascript, added by runningbin/importmap pin @stimulus-components/auto-submit or similar.

    • turbo.min.jsandstimulus-loading.jsare part ofturbo-rails gem (I believe).

    • Flowbite is loaded as recommened by Flowbite docs for Rails/importmaps:https://flowbite.com/docs/getting-started/rails/

  3. Add this line to yourconfig/application.rb:

    config.importmap.paths <<ActiveAdmin::Engine.root.join("config","importmap.rb")

  4. Update yourapp/javascript/application.js:

    // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-railsimport"active_admin";import"@hotwired/turbo-rails";import"controllers";

If you use this, please comment here.

Feel free to post any questions and comments.

You must be logged in to vote

Replies: 1 comment 10 replies

Comment options

Hello, is this a replacement of#8573?

You must be logged in to vote
10 replies
@vfonic
Comment options

As a reference, there is a mention to activeadmin here:rails/importmap-rails#279

Would that help?

I think it would!

I noticed that, by following my instructions above to separate admin and application importmaps, the<%= javascript_importmap_tags %> or<%= javascript_importmap_tags "admin" %> always output the entireconfig/importmap.rb mapping:

Output

<scripttype="importmap"data-turbo-track="reload">{"imports":{"flowbite":"https://cdn.jsdelivr.net/npm/flowbite@2.5.2/dist/flowbite.turbo.min.js","@rails/ujs":"/assets/@rails--ujs-7bfe798b.js","active_admin":"/assets/active_admin-1f4b319c.js","controllers/hw_combobox_controller":"/assets/hotwire_combobox.esm-51aa78e9.js","application":"/assets/application-c8a17222.js","admin":"/assets/admin-f3a1e1e0.js","@hotwired/turbo-rails":"/assets/turbo.min-1262d735.js","@hotwired/stimulus":"/assets/@hotwired--stimulus-132cbc23.js","@hotwired/stimulus-loading":"/assets/stimulus-loading-1fc53fe7.js","@stimulus-components/auto-submit":"/assets/@stimulus-components--auto-submit-6fcf2e50.js","@activeadmin/activeadmin":"/assets/@activeadmin--activeadmin-bed5bb29.js","stimulus-datepicker":"/assets/stimulus-datepicker-bb618857.js","flowbite-datepicker":"/assets/flowbite-datepicker-cf5b6ca8.js","active_admin/features/batch_actions":"/assets/active_admin/features/batch_actions-1d7f386b.js","active_admin/features/dark_mode_toggle":"/assets/active_admin/features/dark_mode_toggle-184c54d4.js","active_admin/features/filters":"/assets/active_admin/features/filters-6c101f9e.js","active_admin/features/has_many":"/assets/active_admin/features/has_many-2ade3ece.js","active_admin/features/main_menu":"/assets/active_admin/features/main_menu-f6d05848.js","active_admin/features/per_page":"/assets/active_admin/features/per_page-375aaac7.js","active_admin/utils/dom":"/assets/active_admin/utils/dom-fd0d5978.js","controllers/application":"/assets/controllers/application-3f3d5175.js","controllers":"/assets/controllers/index-5a48c1ca.js","controllers/map_controller":"/assets/controllers/map_controller-473b4762.js"}}</script><linkrel="modulepreload"href="https://cdn.jsdelivr.net/npm/flowbite@2.5.2/dist/flowbite.turbo.min.js"><linkrel="modulepreload"href="/assets/@rails--ujs-7bfe798b.js"><linkrel="modulepreload"href="/assets/active_admin-1f4b319c.js"><linkrel="modulepreload"href="/assets/hotwire_combobox.esm-51aa78e9.js"><linkrel="modulepreload"href="/assets/application-c8a17222.js"><linkrel="modulepreload"href="/assets/admin-f3a1e1e0.js"><linkrel="modulepreload"href="/assets/turbo.min-1262d735.js"><linkrel="modulepreload"href="/assets/@hotwired--stimulus-132cbc23.js"><linkrel="modulepreload"href="/assets/stimulus-loading-1fc53fe7.js"><linkrel="modulepreload"href="/assets/@stimulus-components--auto-submit-6fcf2e50.js"><linkrel="modulepreload"href="/assets/@activeadmin--activeadmin-bed5bb29.js"><linkrel="modulepreload"href="/assets/stimulus-datepicker-bb618857.js"><linkrel="modulepreload"href="/assets/flowbite-datepicker-cf5b6ca8.js"><linkrel="modulepreload"href="/assets/active_admin/features/batch_actions-1d7f386b.js"><linkrel="modulepreload"href="/assets/active_admin/features/dark_mode_toggle-184c54d4.js"><linkrel="modulepreload"href="/assets/active_admin/features/filters-6c101f9e.js"><linkrel="modulepreload"href="/assets/active_admin/features/has_many-2ade3ece.js"><linkrel="modulepreload"href="/assets/active_admin/features/main_menu-f6d05848.js"><linkrel="modulepreload"href="/assets/active_admin/features/per_page-375aaac7.js"><linkrel="modulepreload"href="/assets/active_admin/utils/dom-fd0d5978.js"><linkrel="modulepreload"href="/assets/controllers/application-3f3d5175.js"><linkrel="modulepreload"href="/assets/controllers/index-5a48c1ca.js"><linkrel="modulepreload"href="/assets/controllers/map_controller-473b4762.js"><scripttype="module">import"admin"</script>

The only thing that changes is that last line:

-<script type="module">import "admin"</script>+<script type="module">import "application"</script>

It's leaking the list of JS files/libraries that are being used in the admin to the frontend. What's worse, it also instructs the browser to preload all of these files and so browsers download them even if they don't need/use it.
Maybe with the PR to allow multiple importmaps we could have this properly separated and working well.

@vfonic
Comment options

@thisismydesign do you have any examples of what exactly breaks when you connect ActiveAdmin and Turbo? I haven't had any issues so far.

@thisismydesign
Comment options

@vfonic It's the issue you opened:#8573 it's an interaction between flwobite and turbo, so it might be flowbite, but IMO it should work out of the box. And there's this:#8603 (might be fixed already, didn't test yet)

@tagliala
Comment options

Reference for flowbite:themesberg/flowbite#796

Semi-OT

I'm currently attempting to use flowbite on the front-end of an application, but I've noticed that there is a lot of improvement in the JavaScript part of that library (I'm not a JavaScript developer).

I noticed that it is exposing object towindow and adds turbo events to deal with

I also have issues with tree-shaking, it looks like it's all or nothing because of therequires ininitFlowbite

This is my implementation to remove some of the features I don't need from the output build, but I'm thinking to move the javascript part to stimulus controllers

For this reason too, I would advise not to mix active admin assets with application assets (especially the opposite)

importDismissfrom'flowbite/lib/esm/components/dismiss'importDropdownfrom'flowbite/lib/esm/components/dropdown'importModalfrom'flowbite/lib/esm/components/modal'importTooltipfrom'flowbite/lib/esm/components/tooltip'// Turbo patch, vendored from flowbite/lib/esm/index.js// Ref: themesberg/flowbite#796importEventsfrom'flowbite/lib/esm/dom/events'constafterRenderEvent=newEvent('turbo:after-stream-render')constinitFlowbite=function(){window.initDismisses()window.initDropdowns()window.initModals()window.initTooltips()}window.addEventListener('turbo:before-stream-render',function(event){constoriginalRender=event.detail.renderevent.detail.render=function(streamElement){originalRender(streamElement)window.dispatchEvent(afterRenderEvent)}})constturboLoadEvents=newEvents('turbo:load',[initFlowbite])turboLoadEvents.init()constturboFrameLoadEvents=newEvents('turbo:frame-load',[initFlowbite])turboFrameLoadEvents.init()constturboStreamLoadEvents=newEvents('turbo:after-stream-render',[initFlowbite,])turboStreamLoadEvents.init()export{Dismiss,Dropdown,Modal,Tooltip}
@vfonic
Comment options

The issue I had is fixed by using "Turbo" version of Flowbite JS (as per their documentation):
https://flowbite.com/docs/getting-started/rails/

pin"flowbite",to:"https://cdn.jsdelivr.net/npm/flowbite@2.5.2/dist/flowbite.turbo.min.js"# @2.5.2

And, I just checked the validation issue

Seems to be fixed

Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment
Labels
None yet
3 participants
@vfonic@tagliala@thisismydesign
[8]ページ先頭
©2009-2025 Movatter.jp