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

Document how to specify a static resource bundle to load as the last … #1802

Merged
merged 8 commits into from
Dec 6, 2024
64 changes: 44 additions & 20 deletions docs/classic-ui/static-resources.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,11 @@ myst:
# Static resources

We often want to ship a website with a static resource, such as an image, icon, CSS, or JavaScript file.
For this, we need to register static resources.
For CSS and JavaScript files, we can use the resource registry to register, then deliver, them to the client browser.

The resource registry provides a programmatic way, either in code or through the web, to extend and configure the dependencies between static resources.
It also automatically manages caching of static resources.
If you were to hard-code these resources in templates with `<link>` or `<script>` tags, you would not have these advantages.

```{seealso}
For some additional implementation information, see {ref}`classic-ui-theming-from-scratch-theme-label`.
Expand All @@ -33,15 +37,15 @@ The JavaScript files have to be in the `browser/static` folder of your Plone 6 p
<records interface="plone.base.interfaces.resources.IBundleRegistry" prefix="plone.bundles/jscript">
<value key="enabled">True</value>
<value key="jscompilation">++plone++myproject.site/javascript.min.js</value>
<value key="load_async">False</value>
<value key="load_async">False</value>
<value key="load_defer">False</value>
<value key="depends">plone</value>
</records>
</registry>
```

You can register a CSS resource in the same way.

```xml
<registry>
<records interface="plone.base.interfaces.resources.IBundleRegistry" prefix="plone.bundles/css">
Expand All @@ -52,15 +56,15 @@ You can register a CSS resource in the same way.
</registry>
```

Registering a JavaScript file and a CSS file in the same bundle is also possible.
You can also register both a JavaScript file and a CSS file in the same bundle.

```xml
```xml
<registry>
<records interface="plone.base.interfaces.resources.IBundleRegistry" prefix="plone.bundles/css">
<value key="enabled">True</value>
<value key="csscompilation">++plone++myproject.site/style.min.css</value>
<value key="jscompilation">++plone++myproject.site/javascript.min.js</value>
<value key="load_async">False</value>
<value key="load_async">False</value>
<value key="load_defer">False</value>
<value key="depends">plone</value>
</records>
Expand All @@ -72,32 +76,52 @@ Registering a JavaScript file and a CSS file in the same bundle is also possible

## Available attributes

The following attributes are available for registering a static resource:
The following attributes are available for registering a static resource.

`enabled`
: Whether the bundle is enabled or not.
: Boolean.
Whether the bundle is enabled or not.
If it is disabled, the bundle will not be loaded.

`jscompilation`
: The path to the compiled JavaScript file.
: String.
The path to the compiled JavaScript file.

`csscompilation`
: The path to the compiled CSS file.
: String.
The path to the compiled CSS file.

`depends`
: A list of bundles that this bundle depends on.
: String.
A comma-separated list of bundles that this bundle depends on.
For a single dependency, do not insert commas.

`load_async`
: Whether the bundle should be loaded asynchronously or not.
*Only JavaScript*
When a bundle depends on another one, its `<script>` or `<link>` tag is rendered after the bundle it depends on.

`load_defer`
: Whether the bundle should be loaded deferred or not.
*Only JavaScript*
If the bundle's dependencies do not exist, then the bundle will not render.

The `depends` attribute may be assigned the value of `all`, making this bundle render last, after all other bundles.
The `all` value lets you load CSS files after the automatically added theme resources and override CSS declarations from your own custom CSS files.

(classic-ui-static-resources-loading-order-label)=
If you set multiple bundles to `all`, then these bundles will render in alphabetical order by its name.

## Loading order of resources
```{note}
You can also add custom CSS through-the-web via the {guilabel}`Theming` control panel, under {menuselection}`Site Setup --> Theming --> Advanced settings --> Custom Styles`.
Setting `depends` to `all` does not affect custom CSS that you define in the {guilabel}`Theming` control panel, which _always_ renders as the last style resource.
It only affects bundles, not control panel settings.
```

`depends` is used to define the loading order of resources by specifying the name of the depending bundle.
```{versionadded} Plone 6.0.14
`depends` value of `all`.
```

`load_async`
: Boolean.
Whether the bundle should be loaded asynchronously or not.
*Only JavaScript*

`load_defer`
: Boolean.
Whether the bundle should be loaded deferred or not.
If you use `load_async`, this attribute has no effect.
*Only JavaScript*
Loading