Bootstrap 5 and Vanilla JS

[badstorm]

Hi, has anyone already started converting this to Vanilla JS for support for the next Bootstrap 5?

[tagliala]

Hi @badstorm,

nope, sorry.

I will not work on this anytime soon. I've did some experiments. As far as I can tell, without jQuery we need to rewrite stuff or depend on third party libraries.

Are you interested in contributing with a PR?

[badstorm]

Hi @tagliala, since i need to implement a non jquery version in one of my project I can try to work on it. If you add a branch with your experiments I can take a look and try to work on it (in my free time)

[tagliala]

If you add a branch with your experiments I can take a look and try to work on it (in my free time)

I've dropped everything except the code you can see in this comment: #80 (comment)

Anyway, I would like to perform the following steps for this gem:

1. Add rollup.js to generate distributable files. Example
2. Customize Rails.confirm
3. When BS4 and @rails/ujs support has been improved (and fixed), add BS5 compatibility
4. Cross-browser integration tests 😊
5. Convert to vanilla JS, but leave the ability to use jQuery, as Bootstrap 5 does.

I've also found this blog post. Code snippets are licensed under MIT

[tagliala]

This is an experimental working version with Bootstrap 5 AND jQuery

https://github.com/diowa/ruby3-rails6-bootstrap-heroku/blob/experimental/data-confirm-modal-rails-confirm-bs5/app/javascript/src/data-confirm-modal.js

[jdsampayo]

In a project that is not using Webpack, added the solution of @tagliala in location vendor/assets/javascripts/data-confirm-modal.js and replaced:

import jQuery from 'jquery'
import Rails from '@rails/ujs'
import { onDOMContentLoaded } from 'bootstrap/js/src/util/index'

onDOMContentLoaded(() => {

for:

$( document ).on('turbolinks:load', function() {

and it worked.

[tagliala]

Hi,

I think it's because

$( document ).on('turbolinks:load', function() {

is being triggered after onDOMContentLoaded, so Bootstrap had the chance to define modal inside jQuery

I'm trying to rewrite your experiment version in ES6 with no jQuery support. I have a onRails project that use rails-ujs where we dropped support for jQuery.

But In ES6 modules are imported readonly and so I don't know how to extend the original Rails object (
in particular the Rails.confirm function).

Dose anyone have some suggestion about that? Thanks

[tagliala]

@stormenergy91

can you share the error you are getting?

This is my actual file structure:

import Rails  from '@rails/ujs'

export class DataConfirmModal
{
    constructor()
    {
        // ..

        Rails.confirm = function (message, el ) {

            // ...

            return true;
        }
    }
}

I get the error at line Rails.confirm = and the error is Cannot assign to 'confirm' because it is an import.

[tagliala]

We should also get rid of Rails.confirm, there is an interesting gorails episode

https://gorails.com/episodes/custom-hotwire-turbo-confirm-modals