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

Fix issue with pages not clearing properly #5955

Merged
merged 2 commits into from
Aug 22, 2023
Merged

Fix issue with pages not clearing properly #5955

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
efccdf1
Fix issue with pages not clearing properly
iHiD Aug 21, 2023
07deb67
Remove comment
iHiD Aug 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
Fix issue with pages not clearing properly
  • Loading branch information
@iHiD
iHiD committed Aug 21, 2023
commit efccdf10ec503b4ad75a436faf1b34bab2dde6cf
62 changes: 27 additions & 35 deletions app/javascript/utils/react-bootloader.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,13 @@ document.addEventListener('turbo:frame-render', (e) => {
document.querySelector('body').className = bodyClass
})

// document.addEventListener('turbo:before-frame-render', (e) => {
// console.log("Unloading")
// const elem = document.getElementById('tf-main')
// ReactDOM.unmountComponentAtNode(elem)
// console.log("Unloaded")
// }

/********************************************************/
/** Add a loading cursor when a turbo-frame is loading **/
/********************************************************/
Expand Down Expand Up @@ -91,32 +98,17 @@ export const initReact = (mappings) => {
}

const render = (elem, component) => {
const callback = () => {
// console.log(Date.now(), 'rendered')
elem.classList.add('--hydrated')
}
// console.log(Date.now(), 'rendering')
const hydrate = elem.dataset['reactHydrate'] == 'true'
if (hydrate) {
//console.log('hydrating')
ReactDOM.hydrate(<>{component}</>, elem, callback)
} else {
ReactDOM.render(
<React.StrictMode>
<ReactQueryCacheProvider queryCache={window.queryCache}>
<ErrorBoundary>{component}</ErrorBoundary>
</ReactQueryCacheProvider>
</React.StrictMode>,
elem,
callback
)
}

const unloadOnce = () => {
ReactDOM.render(
<React.StrictMode>
<ReactQueryCacheProvider queryCache={window.queryCache}>
<ErrorBoundary>{component}</ErrorBoundary>
</ReactQueryCacheProvider>
</React.StrictMode>,
elem
)
document.addEventListener('turbo:before-frame-render', (e) => {
ReactDOM.unmountComponentAtNode(elem)
document.removeEventListener('turbo:before-render', unloadOnce)
}
// document.addEventListener('turbo:before-render', unloadOnce)
})
}

export function renderComponents(parentElement, mappings) {
Expand All @@ -140,6 +132,16 @@ export function renderComponents(parentElement, mappings) {
}
}

function renderTooltips(parentElement, mappings) {
if (!parentElement) {
parentElement = document.body
}

parentElement
.querySelectorAll('[data-tooltip-type][data-endpoint]')
.forEach((elem) => renderTooltip(mappings, elem))
}

Copy link
Member Author

Choose a reason for hiding this comment

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

I just flipped the order of this function with the renderTooltip one. You can ignore this and the related change below.

function renderTooltip(mappings, elem) {
const name = elem.dataset['tooltipType'] + '-tooltip'
const generator = mappings[name]
Expand All @@ -162,13 +164,3 @@ function renderTooltip(mappings, elem) {
/>
)
}

function renderTooltips(parentElement, mappings) {
if (!parentElement) {
parentElement = document.body
}

parentElement
.querySelectorAll('[data-tooltip-type][data-endpoint]')
.forEach((elem) => renderTooltip(mappings, elem))
}
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
"@exercism/codemirror-lang-wren": "https://github.com/exercism/codemirror-lang-wren",
"@exercism/twine2-story-format": "https://github.com/exercism/twine2-story-format.git",
"@gleam-lang/highlight.js-gleam": "^1.0.0",
"@hotwired/turbo-rails": "^7.1.3",
"@hotwired/turbo-rails": "^7.3.0",
Copy link
Member Author

Choose a reason for hiding this comment

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

Events didn't fire properly in 7.1.3.

"@popperjs/core": "^2.5.2",
"@rails/actioncable": "^6.0.0",
"@rails/activestorage": "^6.0.0",
Expand Down
18 changes: 9 additions & 9 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1444,18 +1444,18 @@
resolved "https://registry.yarnpkg.com/@gleam-lang/highlight.js-gleam/-/highlight.js-gleam-1.0.0.tgz#c9868daf7bc04df3477aaa3357c49a27edd3a18a"
integrity sha512-PNtTN5u7yQgo3uj+vm4SkZ2dbH+ozVMlsbaq8KdrNW5OPWsbRsPluSvGrhCkjJ2RVQKBsKK1o8WTjEU1hNTY1A==

"@hotwired/turbo-rails@^7.1.3":
version "7.1.3"
resolved "https://registry.yarnpkg.com/@hotwired/turbo-rails/-/turbo-rails-7.1.3.tgz#a4e04ecb800a06e7f9aa6e298170fa4580b74216"
integrity sha512-6qKgn75bMWKx0bJgmSfrdC73EJkGLoSWZPAssvcd3nE7ZpDZff6f67j5OQNjjpRgNB7OFruom6VWguGQGu1fQg==
"@hotwired/turbo-rails@^7.3.0":
version "7.3.0"
resolved "https://registry.yarnpkg.com/@hotwired/turbo-rails/-/turbo-rails-7.3.0.tgz#422c21752509f3edcd6c7b2725bbe9e157815f51"
integrity sha512-fvhO64vp/a2UVQ3jue9WTc2JisMv9XilIC7ViZmXAREVwiQ2S4UC7Go8f9A1j4Xu7DBI6SbFdqILk5ImqVoqyA==
dependencies:
"@hotwired/turbo" "^7.1.0"
"@hotwired/turbo" "^7.3.0"
"@rails/actioncable" "^7.0"

"@hotwired/turbo@^7.1.0":
version "7.1.0"
resolved "https://registry.yarnpkg.com/@hotwired/turbo/-/turbo-7.1.0.tgz#27e44e0e3dc5bd1d4bda0766d579cf5a14091cd7"
integrity sha512-Q8kGjqwPqER+CtpQudbH+3Zgs2X4zb6pBAlr6NsKTXadg45pAOvxI9i4QpuHbwSzR2+x87HUm+rot9F/Pe8rxA==
"@hotwired/turbo@^7.3.0":
version "7.3.0"
resolved "https://registry.yarnpkg.com/@hotwired/turbo/-/turbo-7.3.0.tgz#2226000fff1aabda9fd9587474565c9929dbf15d"
integrity sha512-Dcu+NaSvHLT7EjrDrkEmH4qET2ZJZ5IcCWmNXxNQTBwlnE5tBZfN6WxZ842n5cHV52DH/AKNirbPBtcEXDLW4g==

"@humanwhocodes/config-array@^0.5.0":
version "0.5.0"
Expand Down