Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unobtrusive JavaScript polyfill #40

Closed
wants to merge 1 commit into from
Closed

Conversation

seanpdoyle
Copy link
Contributor

@seanpdoyle seanpdoyle commented Dec 26, 2020

Closes hotwired/turbo-rails#33.
Closes hotwired/turbo-rails#37.

When loaded alongside @rails/ujs, start it via Rails.start(), and
then declare the turbo:-prefixed events that
correspond to their ajax:-prefixed counterparts.

When loaded alongside [@rails/ujs][], start it via `Rails.start()`, and
then declare the [`turbo:`-prefixed events][turbo-events] that
correspond to their `ajax:`-prefixed counterparts.

[@rails/ujs]: https://github.com/rails/rails/tree/v6.1.0/actionview/app/assets/javascripts
[turbo-events]: https://turbo.hotwire.dev/reference/events
<meta charset="utf-8">
<title>Unobtrustive JavaScript</title>
<script type="module">
import "/dist/turbo.es2017-umd.js"
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is currently limited to a Functional test HTML fixture file. I struggled to declare the code within this <script> tag in an ESM/UMD module, and then optionally import it. Unfortunately, I was unable to figure it out.

If anyone could provide guidance, I'd prefer to declare something like:

export function startUjs(Rails: any) {
  const { delegate, disableElement, enableElement } = Rails

  delegate(document, Rails.linkDisableSelector,   "turbo:before-cache", enableElement)
  delegate(document, Rails.buttonDisableSelector, "turbo:before-cache", enableElement)
  delegate(document, Rails.buttonDisableSelector, "turbo:submit-end", enableElement)

  delegate(document, Rails.formSubmitSelector, "turbo:submit-start", disableElement)
  delegate(document, Rails.formSubmitSelector, "turbo:submit-end", enableElement)
  delegate(document, Rails.formSubmitSelector, "turbo:before-cache", enableElement)
}

// ...
import Rails from "..."
import { startUjs } from "@hotwire/turbo/ujs"

startUjs(Rails)

@sstephenson
Copy link
Contributor

Don't think this belongs in Turbo itself.

@sstephenson sstephenson closed this Jan 8, 2021
seanpdoyle added a commit to seanpdoyle/turbo-rails that referenced this pull request Jan 25, 2021
Closes hotwired#33.
Closes hotwired#37.

---

Re-create [hotwired/turbo#40][].

When loaded alongside [@rails/ujs][], start it via `Rails.start()`, and
then declare the [`turbo:`-prefixed events][turbo-events] that
correspond to their `ajax:`-prefixed counterparts.

Test suite changes
---

First, introduce System Test coverage to drive the Turbo and Rails
integration through a headless browser.

Next, change some dummy controller actions to accept a `?sleep=` query
parameter to delay their responses long enough to ensure that
`data-disabled-with` and `data-confirm` have a wide enough window of
opportunity for test coverage to exercise their behaviors.

[hotwired/turbo#40]: hotwired/turbo#40
[@rails/ujs]: https://github.com/rails/rails/tree/v6.1.0/actionview/app/assets/javascripts
[turbo-events]: https://turbo.hotwire.dev/reference/events
seanpdoyle added a commit to seanpdoyle/turbo-rails that referenced this pull request Jan 25, 2021
Closes hotwired#33.
Closes hotwired#37.

---

Re-create [hotwired/turbo#40][].

When loaded alongside [@rails/ujs][], start it via `Rails.start()`, and
then declare the [`turbo:`-prefixed events][turbo-events] that
correspond to their `ajax:`-prefixed counterparts.

Test suite changes
---

First, introduce System Test coverage to drive the Turbo and Rails
integration through a headless browser.

Next, change some dummy controller actions to accept a `?sleep=` query
parameter to delay their responses long enough to ensure that
`data-disabled-with` and `data-confirm` have a wide enough window of
opportunity for test coverage to exercise their behaviors.

[hotwired/turbo#40]: hotwired/turbo#40
[@rails/ujs]: https://github.com/rails/rails/tree/v6.1.0/actionview/app/assets/javascripts
[turbo-events]: https://turbo.hotwire.dev/reference/events
seanpdoyle added a commit to seanpdoyle/turbo-rails that referenced this pull request Jan 25, 2021
Closes hotwired#33.
Closes hotwired#37.

---

Re-create [hotwired/turbo#40][].

When loaded alongside [@rails/ujs][], start it via `Rails.start()`, and
then declare the [`turbo:`-prefixed events][turbo-events] that
correspond to their `ajax:`-prefixed counterparts.

Test suite changes
---

First, introduce System Test coverage to drive the Turbo and Rails
integration through a headless browser.

Next, change some dummy controller actions to accept a `?sleep=` query
parameter to delay their responses long enough to ensure that
`data-disabled-with` and `data-confirm` have a wide enough window of
opportunity for test coverage to exercise their behaviors.

[hotwired/turbo#40]: hotwired/turbo#40
[@rails/ujs]: https://github.com/rails/rails/tree/v6.1.0/actionview/app/assets/javascripts
[turbo-events]: https://turbo.hotwire.dev/reference/events
seanpdoyle added a commit to seanpdoyle/turbo-rails that referenced this pull request Jan 25, 2021
Closes hotwired#33.
Closes hotwired#37.

---

Re-create [hotwired/turbo#40][].

When loaded alongside [@rails/ujs][], start it via `Rails.start()`, and
then declare the [`turbo:`-prefixed events][turbo-events] that
correspond to their `ajax:`-prefixed counterparts.

Test suite changes
---

First, introduce System Test coverage to drive the Turbo and Rails
integration through a headless browser.

Next, change some dummy controller actions to accept a `?sleep=` query
parameter to delay their responses long enough to ensure that
`data-disabled-with` and `data-confirm` have a wide enough window of
opportunity for test coverage to exercise their behaviors.

[hotwired/turbo#40]: hotwired/turbo#40
[@rails/ujs]: https://github.com/rails/rails/tree/v6.1.0/actionview/app/assets/javascripts
[turbo-events]: https://turbo.hotwire.dev/reference/events
@rainerborene
Copy link

rainerborene commented Feb 1, 2021

@sstephenson Totally agree. rails-ujs is a past thing. For those who are interest, here's how you can accomplish almost the same behaviour using Stimulus and Hotwire: https://gist.github.com/rainerborene/644da1be59ecb4f6c4c9637abf2622e0

@sstephenson sstephenson deleted the turbo-ujs-polyfill branch April 5, 2021 22:48
seanpdoyle added a commit to seanpdoyle/turbo-rails that referenced this pull request Oct 12, 2021
As an alternative to building support for Rails' Unobtrusive JavaScript
into `@hotwired/turbo` itself, instead publish a
`@hotwired/turbo-rails/ujs` file to re-use the existing `@rails/ujs`
hooks, and bridge the gaps between new `turbo:`-prefixed and
`ajax:`-prefixed events.

This is a re-imagining of [hotwired/turbo#40][] and
([hotwired/turbo#384][]). If deemed viable, this work would yield some
follow up tasks:

* drop support for `[data-turbo-method]` ([hotwired/turbo#277][])
* drop support for `[data-confirm]` ([hotwired/turbo#379][])

[hotwired/turbo#40]: hotwired/turbo#40
[hotwired/turbo#277]: hotwired/turbo#277
[hotwired/turbo#379]: hotwired/turbo#379
[hotwired/turbo#384]:hotwired/turbo#384
seanpdoyle added a commit to seanpdoyle/turbo-rails that referenced this pull request Oct 12, 2021
As an alternative to building support for Rails' Unobtrusive JavaScript
into `@hotwired/turbo` itself, instead publish a
`@hotwired/turbo-rails/ujs` file to re-use the existing `@rails/ujs`
hooks, and bridge the gaps between new `turbo:`-prefixed and
`ajax:`-prefixed events.

This is a re-imagining of [hotwired/turbo#40][] and
([hotwired/turbo#384][]). If deemed viable, this work would yield some
follow up tasks:

* drop support for `[data-turbo-method]` ([hotwired/turbo#277][])
* drop support for `[data-confirm]` ([hotwired/turbo#379][])

[hotwired/turbo#40]: hotwired/turbo#40
[hotwired/turbo#277]: hotwired/turbo#277
[hotwired/turbo#379]: hotwired/turbo#379
[hotwired/turbo#384]:hotwired/turbo#384
seanpdoyle added a commit to seanpdoyle/turbo-rails that referenced this pull request Oct 12, 2021
As an alternative to building support for Rails' Unobtrusive JavaScript
into `@hotwired/turbo` itself, instead publish a
`@hotwired/turbo-rails/ujs` file to re-use the existing `@rails/ujs`
hooks, and bridge the gaps between new `turbo:`-prefixed and
`ajax:`-prefixed events.

This is a re-imagining of [hotwired/turbo#40][] and
([hotwired/turbo#384][]). If deemed viable, this work would yield some
follow up tasks:

* drop support for `[data-turbo-method]` ([hotwired/turbo#277][])
* drop support for `[data-confirm]` ([hotwired/turbo#379][])

[hotwired/turbo#40]: hotwired/turbo#40
[hotwired/turbo#277]: hotwired/turbo#277
[hotwired/turbo#379]: hotwired/turbo#379
[hotwired/turbo#384]:hotwired/turbo#384
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

data-disable-with Links which specify a data-method have that method ignored
3 participants