We are currently attempting to upgrade one of our Atlassian Connect Express apps from AUI@7.9.9 to AUI@8.x.
In our existing app, we previously loaded AUI (and jQuery) globally using <link> / <script> tags in our layout template as follows:
/views/layout.hbs
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="{{furl '/atlassian/aui/css/aui.min.css'}}" media="all">
<script src="{{furl '/jquery/jquery.min.js'}}"></script>
<script src="{{furl '/atlassian/aui/js/aui.min.js'}}" type="text/javascript"></script>
From there, any JS code in our app simply assumes that there will be an AJS global.
For example our client-side code bootstraps like this:
if (AJS) {
AJS.toInit(() => {
try {
// app code goes here
} catch (e) {
AJS.messages.error({
title: "An error occurred",
body: "Something went wrong"
});
}
});
}
As our app is written in Typescript and bundled using Webpack, our plan has been to remove these globals and have the AJS dependencies explicitly imported by any code that references them.
With the changes to AUI 8 packaging, we figured this would be the perfect time to do this.
The plan was to remove the <link> / <script> tags from the layout template, and the above JS code becomes:
import { toInit, messages } from "@atlassian/aui";
toInit(() => {
try {
// app code goes here
} catch (e) {
messages.error({
title: "An error occurred",
body: "Something went wrong"
});
}
});
Unfortunately, it seems that the jQuery global is still needed (even though the source components appear to include their own vendored copy of jQuery), as without it, the above code results in:
Uncaught ReferenceError: jQuery is not defined.
Similarly, we were hoping that importing a component would include the styles for that component (or it would be possible to import just that componentâs CSS).
In other words we were expecting that something like this would work out of the box:
import { messages } from "@atlassian/aui";
messages.success({title: "Congratulations!", body: "It works!"});
Unfortunately, the above code displays an unstyled message (no green border, no icon etc.).
It seems that we still need to include aui-prototyping.css, despite the note in the upgrade guide warning:
The âprototypingâ bundle of AUI is not intended to be used in production systems
As our webpack config already includes css-loader and mini-css-extract-plugin, to avoid having a <link> tag, we tried importing the prototyping CSS as follows:
import "@atlassian/aui/dist/aui/aui-prototyping.css";
import { messages } from "@atlassian/aui";
messages.success({title: "Congratulations!", body: "It works!"});
However this fails because the CSS includes SVGs for product logos, and our webpack config doesnât have (or need) a loader for these file types.
When importing an AUI component like messages that doesnât use any SVGs, in our opinion it should be possible to import only the styles necessary for that component.
It would be great for the documentation and/or upgrade guide to include some examples of how to import & use individual components using ES imports.
Hopefully this may improve in AUI@8.1.0 once Atlassian finish gathering requirements for the distribution.
