Skip to content

Fix TypeError when Bootstrap is included in head#32024

Merged
XhmikosR merged 6 commits into
twbs:mainfrom
tidusIO:extend-jquery-after-dom-loaded
Nov 1, 2020
Merged

Fix TypeError when Bootstrap is included in head#32024
XhmikosR merged 6 commits into
twbs:mainfrom
tidusIO:extend-jquery-after-dom-loaded

Conversation

@tidusIO
Copy link
Copy Markdown
Contributor

@tidusIO tidusIO commented Oct 30, 2020

I've added waiting for domContentLoaded event before extending jQuery. That's one possible solution to be sure, that data attributes of body can be read.

Fixes #31202

Preview: https://deploy-preview-32024--twbs-bootstrap.netlify.app/

@tidusIO tidusIO requested a review from a team as a code owner October 30, 2020 23:32
Copy link
Copy Markdown
Member

@Johann-S Johann-S left a comment

Choose a reason for hiding this comment

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

Hi @tidusIO,

Thanks for your work 👍

The overall is good, it needs just a few unit tests

Comment thread js/src/util/index.js Outdated
@Johann-S Johann-S linked an issue Oct 31, 2020 that may be closed by this pull request
@tidusIO
Copy link
Copy Markdown
Contributor Author

tidusIO commented Oct 31, 2020

It would be useful having some tests mocking getjQuery or jquery in window object, so that the uncovered parts are covered.

I'm struggling a bit with mocking these parts.

EDIT: Oh I overlooked jquery.spec.js. The extensions should be already tested.

EDIT 2: I will try, if it really solves the problem with TurboLink :)

@tidusIO
Copy link
Copy Markdown
Contributor Author

tidusIO commented Oct 31, 2020

We still have the problem in event-handler.js, when calling getjQuery().

@tidusIO tidusIO requested a review from Johann-S October 31, 2020 10:16
@tidusIO
Copy link
Copy Markdown
Contributor Author

tidusIO commented Oct 31, 2020

I would prefer a way like this: ff1fa49
It's much cleaner and there shouldn't be no problems. If we'd implement it with event listener, the problem could be, that the user has to wait for DOMContentLoaded at some places too.

Comment thread js/src/dom/event-handler.js Outdated
@tidusIO tidusIO force-pushed the extend-jquery-after-dom-loaded branch from e40ec93 to 9a25477 Compare October 31, 2020 19:14
@Johann-S
Copy link
Copy Markdown
Member

it seems something decreased the minimum coverage required

@tidusIO
Copy link
Copy Markdown
Contributor Author

tidusIO commented Oct 31, 2020

Do you know, if coverage also includes js-test-jquery?

I think, we should find a solution, that js-test-karma and js-test-jquery create a combined coverage. Otherwise all parts, that use jQuery are not covered.

@Johann-S
Copy link
Copy Markdown
Member

The coverage doesn't include the jQuery part.
I don't think it's really necessary since jQuery is a very small part of our codebase and the main goal of v5 is to work without jQuery

@tidusIO
Copy link
Copy Markdown
Contributor Author

tidusIO commented Oct 31, 2020

Okay, still not familiar enough with bootstrap codebase. I simply overlooked the /* istanbul ignore if */ statements.

Copy link
Copy Markdown
Member

@Johann-S Johann-S left a comment

Choose a reason for hiding this comment

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

Thanks for your hard work @tidusIO 👍

Comment thread js/src/util/index.js
}

const onDOMContentLoaded = callback => {
if (document.readyState === 'loading') {
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Just to confirm, this should work with defer too?

@XhmikosR
Copy link
Copy Markdown
Member

XhmikosR commented Nov 1, 2020

@tidusIO apart from my comment above, can you please make a CodePen with the scripts in head so that we can test?

@tidusIO
Copy link
Copy Markdown
Contributor Author

tidusIO commented Nov 1, 2020

Yes, I've replied your comment. I can, but probably not before Wednesday.

@XhmikosR
Copy link
Copy Markdown
Member

XhmikosR commented Nov 1, 2020

NVM I tested it myself and it works as expected, thanks for the PR!

@XhmikosR XhmikosR changed the title extend jquery after domContentLoaded event is fired Fix TypeError when Bootstrap is included in head Nov 1, 2020
@XhmikosR XhmikosR merged commit c21506d into twbs:main Nov 1, 2020
@tidusIO tidusIO deleted the extend-jquery-after-dom-loaded branch November 1, 2020 13:34
@rpokrovskij
Copy link
Copy Markdown

Bad decision. Jquery plugins should be loaded in developer defined order: there is convention that this order is maintained by script loading. How to control this order after you broke it with domContentLoaded ? What if every jquery plugin start doing it this way?

@NefedovIv
Copy link
Copy Markdown

Rly like last comment. We works with sharepoint onprem, and have a problem there. SP have own event model, many usefull events trigered before DOMContentLoaded without access to jquery bootstrap plagins. We spand a time for only understand that plagins extend performed in postponed format.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

TypeError: jQuery present, loading script in head

5 participants