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.

Sign up for GitHub

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

Jump to bottom

Introduce data-turbo-track="dynamic" #1140

Merged
merged 1 commit into from
Jan 25, 2024
Merged

Introduce data-turbo-track="dynamic" #1140

merged 1 commit into from
Jan 25, 2024

Conversation

afcapel
Copy link
Collaborator

@afcapel afcapel commented Jan 25, 2024 •
edited
Loading

To track stylesheets and styles that we can dynamically remove when navigating.

We introduced this behaviour in #1128 and thought it would be a good default to avoid full page reloads when styles change.

However, it seems it's quite common for libraries to add stylesheets and styles to the head that they want to keep around. For example, see

So let's make this behaviour opt-in by adding a data-turbo-track="dynamic" attribute to stylesheets and styles that we want to dynamically remove when they are no longer in a new page after a navigation.

This avoids any breaking changes for existing apps.

@afcapel
Introduce data-turbo-track="dynamic"
2bf0d33 
To track stylesheets and styles that we can dynamically remove when
navigating.

We introduced this behaviour in #1128
and thought it would be a good default to avoid full page reloads when
styles change.

However, it seems it's quite common for libraries to add stylesheets
and styles to the head that they want to keep around. For example, see

- #1133
- #1139

So let's make this behaviour opt-in by adding a `data-turbo-track="dynamic"`
attribute to stylesheets and styles that we want to dynamically remove when
they are no longer in a new page navigation.

This avoids any breaking changes for existing apps.
@afcapel afcapel mentioned this pull request Jan 25, 2024
Closed
kevinmcconnell
kevinmcconnell approved these changes Jan 25, 2024
View reviewed changes
Copy link
Collaborator

@kevinmcconnell kevinmcconnell left a comment

Choose a reason for hiding this comment

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

Looks great, thanks for adding this. It does seem like making dynamic the default would lead to too much breakage.

@afcapel afcapel merged commit 814099c into main Jan 25, 2024
2 checks passed
@afcapel afcapel deleted the data-turbo-track-dynamic branch January 25, 2024 12:15
@pinzonjulian pinzonjulian mentioned this pull request Jan 28, 2024
Closed
afcapel added a commit to pfeiffer/turbo that referenced this pull request Jan 29, 2024
@afcapel
Merge remote-tracking branch 'origin/main' into patch-1
cf0013e 
* origin/main:
  Introduce `turbo:{before-,}morph-{element,attribute}` events
  Turbo 8.0.0-beta.4
  Introduce data-turbo-track="dynamic" (hotwired#1140)
  Ensure that the turbo-frame header is not sent when the turbo-frame has a target of _top (hotwired#1138)
  Turbo 8.0.0-beta.3
  Fix attribute name (hotwired#1134)
  Add InstantClick behavior (hotwired#1101)
  Revert hotwired#926. (hotwired#1126)
  Keep Trix dynamic styles in the head (hotwired#1133)
  Remove unused stylesheets when navigating (hotwired#1128)
  Upgrade idiomorph to 0.3.0 (hotwired#1122)
  Debounce page refreshes triggered via Turbo streams
  Update copyright year to 2024 (hotwired#1118)
  Turbo 8.0.0-beta.2
  Set aria-busy on the form element during a form submission (hotwired#1110)
  Dispatch `turbo:before-fetch-{request,response}` during preloading (hotwired#1034)
seanpdoyle added a commit to seanpdoyle/turbo-site that referenced this pull request Feb 15, 2024
@seanpdoyle
Document [data-turbo-track="dynamic"]
3a5135f 
Follow-up to [hotwired/turbo#1140][]

Removing Assets When They Change
---

As we saw above, Turbo Drive merges the contents of the `<head>`
elements. When a page depends on CSS or JavaScript that other pages do
not, it can be useful to remove them when navigating away from the page.

Rendering a `<script>`, `<link>`, or `<style>` element with
`data-turbo-track="reload"` instructs Turbo Drive to dynamically remove
the element when it is no absent from a navigation's response.

```html
<head>
  ...
  <link rel="stylesheet" href="/page-specific-styles-258e88d.css" data-turbo-track="dynamic">
  <script src="/page-specific-javascript-cbd3cd4.js" data-turbo-track="dynamic"></script>
</head>
```

[hotwired/turbo#1140]: hotwired/turbo#1140
@seanpdoyle seanpdoyle mentioned this pull request Feb 15, 2024
Merged
@seanpdoyle
Copy link
Contributor

I've opened hotwired/turbo-site#168 to document this new attribute.

seanpdoyle added a commit to seanpdoyle/turbo-site that referenced this pull request Feb 20, 2024
@seanpdoyle
Document [data-turbo-track="dynamic"]
cd9075c 
Follow-up to [hotwired/turbo#1140][]

Removing Assets When They Change
---

As we saw above, Turbo Drive merges the contents of the `<head>`
elements. When a page depends on external assets like CSS stylesheets
that other pages do not, it can be useful to remove them when navigating
away from the page.

Rendering a `<link>` or `<style>` element with
`[data-turbo-track="dynamic"]` instructs Turbo Drive to dynamically
remove the element when it is absent from a navigation's response, and
can serve a complementary role to the `[data-turbo-track="reload"]`
attribute to avoid triggering a full page reload when deploying changes
that only affect styles.

```html
<head>
  <!-- … -->
  <link rel="stylesheet" href="/page-specific-styles-258e88d.css" data-turbo-track="dynamic">
  <style data-turbo-track="dynamic">
    .page-specific-styles { /* … */ }
  </style>
</head>
```

Note that rendering `<script>` elements with
`[data-turbo-track="dynamic"]` might unintended side-effects. When
`<script>` disconnected from the document, the JavaScript context
doesn't change, nor is the element's already evaluated JavaScript code
unloaded or changed in any way.

[hotwired/turbo#1140]: hotwired/turbo#1140
seanpdoyle added a commit to seanpdoyle/turbo-site that referenced this pull request Feb 20, 2024
@seanpdoyle
Document [data-turbo-track="dynamic"]
18d80d0 
Follow-up to [hotwired/turbo#1140][]

Removing Assets When They Change
---

As we saw above, Turbo Drive merges the contents of the `<head>`
elements. When a page depends on external assets like CSS stylesheets
that other pages do not, it can be useful to remove them when navigating
away from the page.

Rendering a `<link>` or `<style>` element with
`[data-turbo-track="dynamic"]` instructs Turbo Drive to dynamically
remove the element when it is absent from a navigation's response, and
can serve a complementary role to the `[data-turbo-track="reload"]`
attribute to avoid triggering a full page reload when deploying changes
that only affect styles.

```html
<head>
  <!-- … -->
  <link rel="stylesheet" href="/page-specific-styles-258e88d.css" data-turbo-track="dynamic">
  <style data-turbo-track="dynamic">
    .page-specific-styles { /* … */ }
  </style>
</head>
```

Note that rendering `<script>` elements with
`[data-turbo-track="dynamic"]` might unintended side-effects. When
`<script>` disconnected from the document, the JavaScript context
doesn't change, nor is the element's already evaluated JavaScript code
unloaded or changed in any way.

[hotwired/turbo#1140]: hotwired/turbo#1140
@YoutacRandS-VA YoutacRandS-VA mentioned this pull request Jun 19, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@kevinmcconnell kevinmcconnell kevinmcconnell approved these changes

Assignees
No one assigned
Labels
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
3 participants
@afcapel @seanpdoyle @kevinmcconnell