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

Ensure turbo no longer uses replaceChildren #808

Merged
merged 1 commit into from
Dec 23, 2022

Conversation

MaxHatfull
Copy link

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.

@MaxHatfull MaxHatfull marked this pull request as draft December 2, 2022 12:13
@seanpdoyle
Copy link
Contributor

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?

@MaxHatfull MaxHatfull marked this pull request as ready for review December 2, 2022 13:12
@MaxHatfull
Copy link
Author

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 replaceChildren method isn't very well supported.

@MaxHatfull MaxHatfull mentioned this pull request Dec 2, 2022
Copy link
Contributor

@keithamus keithamus left a 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)
Copy link
Contributor

@seanpdoyle seanpdoyle Dec 2, 2022

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)
  }
}

Copy link
Author

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".

@MaxHatfull
Copy link
Author

@seanpdoyle Would you be able to run the workflow? I'm not entirely sure of the process for getting this merged

@seanpdoyle
Copy link
Contributor

@kevinmcconnell are you able to execute CI on this branch?

@MaxHatfull
Copy link
Author

@kevinmcconnell could you run this again please? it looks like it is failing because of issues unrelated to the changes

@kevinmcconnell
Copy link
Collaborator

@MaxHatfull we had some outdated packages that were causing the CI issues. Can you rebase your changes onto the latest main to pick those up? Doing that should solve the failures. Thanks!

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.
@MaxHatfull
Copy link
Author

@kevinmcconnell that's the rebase done

@kevinmcconnell kevinmcconnell merged commit e43b271 into hotwired:main Dec 23, 2022
@kevinmcconnell
Copy link
Collaborator

@MaxHatfull PR looks great btw. Thanks for taking care of it 🙏

michaelkedar referenced this pull request in google/osv.dev Feb 1, 2023
[![Mend
Renovate](https://app.renovatebot.com/images/banner.svg)](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)
|
[![age](https://badges.renovateapi.com/packages/npm/@hotwired%2fturbo/7.2.5/age-slim)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://badges.renovateapi.com/packages/npm/@hotwired%2fturbo/7.2.5/adoption-slim)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://badges.renovateapi.com/packages/npm/@hotwired%2fturbo/7.2.5/compatibility-slim/7.2.4)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://badges.renovateapi.com/packages/npm/@hotwired%2fturbo/7.2.5/confidence-slim/7.2.4)](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)
|
[![age](https://badges.renovateapi.com/packages/npm/lit/2.6.1/age-slim)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://badges.renovateapi.com/packages/npm/lit/2.6.1/adoption-slim)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://badges.renovateapi.com/packages/npm/lit/2.6.1/compatibility-slim/2.5.0)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://badges.renovateapi.com/packages/npm/lit/2.6.1/confidence-slim/2.5.0)](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) |
[![age](https://badges.renovateapi.com/packages/npm/sass/1.58.0/age-slim)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://badges.renovateapi.com/packages/npm/sass/1.58.0/adoption-slim)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://badges.renovateapi.com/packages/npm/sass/1.58.0/compatibility-slim/1.57.1)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://badges.renovateapi.com/packages/npm/sass/1.58.0/confidence-slim/1.57.1)](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
[@&#8203;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
[@&#8203;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
[@&#8203;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 [@&#8203;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
[@&#8203;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 [@&#8203;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
[@&#8203;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
[@&#8203;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
[@&#8203;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#&#8203;261)

[Compare
Source](https://togithub.com/lit/lit/compare/lit@2.6.0...lit@2.6.1)

##### Patch Changes

- [#&#8203;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`.

- [#&#8203;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#&#8203;260)

[Compare
Source](https://togithub.com/lit/lit/compare/lit@2.5.0...lit@2.6.0)

##### Minor Changes

- [#&#8203;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)]:
-
[@&#8203;lit/reactive-element](https://togithub.com/lit/reactive-element)[@&#8203;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#&#8203;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==-->
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.

4 participants