-
Notifications
You must be signed in to change notification settings - Fork 441
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
Ensure turbo no longer uses replaceChildren #808
Conversation
2710721
to
084d312
Compare
084d312
to
cce8308
Compare
Since there is a pre-existing issue that mentions this method, I wonder if it'd be better to encourage applications to depend on something like @github/browser-support or another polyfill? @keithamus do you have an opinion on this? |
Do you have a supported browser version list? The |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This seems fine to me. 👍
this.targetElements.forEach((e) => e.replaceChildren(this.templateContent)) | ||
this.targetElements.forEach((targetElement) => { | ||
targetElement.innerHTML = "" | ||
targetElement.append(this.templateContent) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@MaxHatfull if we're going to go forward with rolling back the replaceChildren
calls, what do you think about implementing update in terms of the polyfill:
function replaceChildren(this: Element | Document | DocumentFragment, ...children: Node[]) {
while (this.firstChild) this.removeChild(this.firstChild)
this.append(...children)
}
update() {
for (const targetElement of this.targetElements) {
replaceChildren(targetElement, this.templateContent)
}
}
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I did think about that, the reason I didn't do that in this PR is to minimise the blast radius of this change. If you think this won't affect the projects of the people using hotwire and you think this is clearer, then I think it's a good idea. There's also the question of "is this simpler?" which I don't think it is as unsetting the innerHTML and setting the child to the template is what I'd expect to see when investigating a method called "update".
@seanpdoyle Would you be able to run the workflow? I'm not entirely sure of the process for getting this merged |
@kevinmcconnell are you able to execute CI on this branch? |
@kevinmcconnell could you run this again please? it looks like it is failing because of issues unrelated to the changes |
@MaxHatfull we had some outdated packages that were causing the CI issues. Can you rebase your changes onto the latest |
This method does not exist in older versions of safari (only 14+). This meand a polyfill would be required in order to use turbo when using the update action. In order to stop this, we replace the call to this function with native code.
cce8308
to
de4c977
Compare
@kevinmcconnell that's the rebase done |
@MaxHatfull PR looks great btw. Thanks for taking care of it 🙏 |
[](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [@hotwired/turbo](https://turbo.hotwired.dev) ([source](https://togithub.com/hotwired/turbo)) | [`7.2.4` -> `7.2.5`](https://renovatebot.com/diffs/npm/@hotwired%2fturbo/7.2.4/7.2.5) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | | [lit](https://lit.dev/) ([source](https://togithub.com/lit/lit)) | [`2.5.0` -> `2.6.1`](https://renovatebot.com/diffs/npm/lit/2.5.0/2.6.1) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | | [sass](https://togithub.com/sass/dart-sass) | [`1.57.1` -> `1.58.0`](https://renovatebot.com/diffs/npm/sass/1.57.1/1.58.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>hotwired/turbo</summary> ### [`v7.2.5`](https://togithub.com/hotwired/turbo/releases/tag/v7.2.5) [Compare Source](https://togithub.com/hotwired/turbo/compare/v7.2.4...v7.2.5) #### What's Changed - Only snapshot frame visits that have actions by [@​kevinmcconnell](https://togithub.com/kevinmcconnell) in [https://github.com/hotwired/turbo/pull/827](https://togithub.com/hotwired/turbo/pull/827) - Skip Snapshot Caching for redirect visits by [@​seanpdoyle](https://togithub.com/seanpdoyle) in [https://github.com/hotwired/turbo/pull/804](https://togithub.com/hotwired/turbo/pull/804) - Fix: Promoting lazy-loaded Frames by [@​seanpdoyle](https://togithub.com/seanpdoyle) in [https://github.com/hotwired/turbo/pull/790](https://togithub.com/hotwired/turbo/pull/790) - Merge in remaining header elements (eg: link icons, manifest, meta and title) by [@​scuml](https://togithub.com/scuml) in [https://github.com/hotwired/turbo/pull/752](https://togithub.com/hotwired/turbo/pull/752) - Allow users to define an async custom render function by [@​manuelpuyol](https://togithub.com/manuelpuyol) in [https://github.com/hotwired/turbo/pull/782](https://togithub.com/hotwired/turbo/pull/782) - Allow for listening to turbo events raised from within the Shadow DOM by [@​yuki24](https://togithub.com/yuki24) in [https://github.com/hotwired/turbo/pull/802](https://togithub.com/hotwired/turbo/pull/802) - Ensure turbo no longer uses replaceChildren by [@​MaxHatfull](https://togithub.com/MaxHatfull) in [https://github.com/hotwired/turbo/pull/808](https://togithub.com/hotwired/turbo/pull/808) - Add better support for shadow DOM by [@​yuki24](https://togithub.com/yuki24) in [https://github.com/hotwired/turbo/pull/758](https://togithub.com/hotwired/turbo/pull/758) - Fix: When applications embed [Google Adsense](https://www.google.com/adsense/start/)-powered <iframe> elements, the snippets they provide render them with a \[name] attribute that's set to the empty string "" by [@​seanpdoyle](https://togithub.com/seanpdoyle) in [https://github.com/hotwired/turbo/pull/835](https://togithub.com/hotwired/turbo/pull/835) **Full Changelog**: hotwired/turbo@v7.2.4...v7.2.5 </details> <details> <summary>lit/lit</summary> ### [`v2.6.1`](https://togithub.com/lit/lit/blob/HEAD/packages/lit/CHANGELOG.md#​261) [Compare Source](https://togithub.com/lit/lit/compare/lit@2.6.0...lit@2.6.1) ##### Patch Changes - [#​3526](https://togithub.com/lit/lit/pull/3526) [`65e56655`](https://togithub.com/lit/lit/commit/65e56655b73d22172647c1a748e7a907ad0227c0) - Disable ShadyDOM noPatch in Node dev build. This fixes the issue of throwing due to undefined `window`. - [#​3561](https://togithub.com/lit/lit/pull/3561) [`e5c254e9`](https://togithub.com/lit/lit/commit/e5c254e96cb5d0f770ec616332e231559325c5c5) - Fix built-in shimming of `HTMLElement` for Node build of `reactive-element` to respect existing `HTMLElement` in global ### [`v2.6.0`](https://togithub.com/lit/lit/blob/HEAD/packages/lit/CHANGELOG.md#​260) [Compare Source](https://togithub.com/lit/lit/compare/lit@2.5.0...lit@2.6.0) ##### Minor Changes - [#​3522](https://togithub.com/lit/lit/pull/3522) [`72fcf0d7`](https://togithub.com/lit/lit/commit/72fcf0d70b4f4644e080e9c375a58cf8fc35e9e8) - When running in Node, Lit now automatically includes minimal DOM shims which are sufficient for most SSR (Server Side Rendering) use-cases, removing the need to import the global DOM shim from `@lit-labs/ssr`. The new `@lit-labs/ssr-dom-shim` package has been introduced, which exports an `HTMLElement`, `CustomElementRegistry`, and default `customElements` singleton. The existing `@lit-labs/ssr` global DOM shim can still be used, and is compatible with the new package, because `@lit-labs/ssr` imports from `@lit-labs/ssr-dom-shim`. Importing the global DOM shim adds more APIs to the global object, such as a global `HTMLElement`, `TreeWalker`, `fetch`, and other APIs. It is recommended that users try to remove usage of the `@lit-labs/ssr` DOM shim, and instead rely on the more minimal, automatic shimming that `@lit/reactive-element` now provides automatically. ##### Patch Changes - Updated dependencies \[[`72fcf0d7`](https://togithub.com/lit/lit/commit/72fcf0d70b4f4644e080e9c375a58cf8fc35e9e8)]: - [@​lit/reactive-element](https://togithub.com/lit/reactive-element)[@​1](https://togithub.com/1).6.0 - lit-html@2.6.0 </details> <details> <summary>sass/dart-sass</summary> ### [`v1.58.0`](https://togithub.com/sass/dart-sass/blob/HEAD/CHANGELOG.md#​1580) [Compare Source](https://togithub.com/sass/dart-sass/compare/1.57.1...1.58.0) - Remove sourcemap comments from Sass sources. The generated sourcemap comment for the compiled CSS output remains unaffected. - Fix a bug in `@extend` logic where certain selectors with three or more combinators were incorrectly considered superselectors of similar selectors with fewer combinators, causing them to be incorrectly trimmed from the output. - Produce a better error message for a number with a leading `+` or `-`, a decimal point, but no digits. - Produce a better error message for a nested property whose name starts with `--`. - Fix a crash when a selector ends in an escaped backslash. - Add the relative length units from CSS Values 4 and CSS Contain 3 as known units to validate bad computation in `calc`. ##### Command Line Interface - The `--watch` flag will now track loads through calls to `meta.load-css()` as long as their URLs are literal strings without any interpolation. </details> --- ### Configuration 📅 **Schedule**: Branch creation - "before 6am on wednesday" in timezone Australia/Sydney, Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 👻 **Immortal**: This PR will be recreated if closed unmerged. Get [config help](https://togithub.com/renovatebot/renovate/discussions) if that's undesired. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://app.renovatebot.com/dashboard#github/google/osv.dev). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNC43My4zIiwidXBkYXRlZEluVmVyIjoiMzQuMTE0LjAifQ==-->
This method does not exist in older versions of safari (only 14+). This
meand a polyfill would be required in order to use turbo when using the
update action. In order to stop this, we replace the call to this
function with native code.