Upgrade to jQuery 4

From Jira 12.0, Confluence 11.0, Bitbucket 11.0, Bamboo 13.0, and Crowd 8.0 jQuery is upgraded from v3 to v4. jQuery migrate is also removed.

Many of the changes can be prepared for in a way that's backwards compatible with v3 so as many (compatible) changes as possible will also be backported to the LTS versions of Jira (11.3), Confluence (10.2), Bamboo (12.1) and to the latest versions of Bitbucket 10 and Crowd 7.

The intention is to make it easier to test your app without having to worry about unrelated breaking changes.

Similarly, AUI 10.1 adds support for jQuery 4.

We are still early on in upgrading the Data Center products themselves. Future EAP versions will come with jQuery 4, but this might not arrive in the first few versions.

Breaking changes in Atlassian JS

We have not currently noticed any JS behaviour nor signature changes that would affect apps. Please let us know on the developer community thread if you spot something, and we will document it.

Preparing for jQuery 4

At a high-level we recommend:

1. Resolve jQuery migrate v3 warnings on stable product versions
2. Resolve jQuery migrate v4 warnings
3. Test against EAP product versions with jQuery v4

jQuery migrate [browser console] logging can be enabled by temporarily setting the global mute variable to false jQuery.migrateMute = false and enabling duplicate warnings jQuery.migrateDeduplicateWarnings = false.

There are early versions of the jQuery plugin available with both migrate v3 & migrate v4 available for the sake of testing. Current stable product versions generally, but not perfectly work with this with both migrate versions enabled. Individual migrate patches are toggleable with dark feature flags. Read the jQuery plugin CHANGELOG. Download the jQuery plugin.

For testing, adding this to AMPS configuration will install the pre-release jQuery plugin and a plugin to toggle dark feature flags

1
2
<plugins>
    <plugin>
        <groupId>com.atlassian.maven.plugins</groupId>
        <!-- Could also be e.g. jira-maven-plugin -->
        <artifactId>amps-maven-plugin</artifactId>
        <configuration>
            <pluginArtifacts>
                <!-- To be added -->
                <pluginArtifact>
                    <groupId>com.atlassian.plugins</groupId>
                    <artifactId>jquery</artifactId>
                    <version>4.0.0-m005</version>
                </pluginArtifact>
                <pluginArtifact>
                    <groupId>com.atlassian.plugins</groupId>
                    <artifactId>atlassian-dark-features-ui-plugin</artifactId>
                    <version>2.2.1</version>
                </pluginArtifact>
            </pluginArtifacts>
        </configuration>
    </plugin>
</plugins>

As an example for testing without the attr-false migrate patch. In version 4.0.0-m005 of the jQuery plugin there is a feature flag plugins.jquery.migrate.disable.attr-false. The feature flag can be set by going to /plugins/servlet/global-dark-features (e.g. http://localhost:2990/jira/plugins/servlet/global-dark-features) and enabling plugins.jquery.migrate.disable.attr-false.

Changes in jQuery 4

See the official jQuery 4 release blog.

Identify breaking changes in the code

You can use our eslint tooling to easily identify potential problems in your codebase.

Running:

1
2
npx @atlassian/jquery-eslint-runner lint-directory --directory <directory_path>

will generate a .json report where you'll find a list of the potential issues that you might need to address.