Static resources for Plone
Project description
plone.staticresources
This add-on contains all static JavaScript and CSS resources used by Plone.
Target audience
This documentation aims at:
Theme Authors: who want to change the look and feel of a Plone site and need to:
understand how to correctly bundle changes made into existing or new frontend code.
Integrators and Developers: who want to customize or maintain the front end of a Plone site for their customers:
upgrade existing versions or install new npm packages.
integrate new JavaScript/CSS behavior, eventually wrapped in a pattern for optimal integration and reuse within Plone front end ecosystem.
Plone Core Developers: who want to fix Plone bugs or enhance this add-on.
How to upgrade the resources in this package
Increase Npm package versions in package.json, in sections dependencies or devDependencies.
Run yarn upgrade (important: cannot be npm)
Run ./bin/plone-compile-resources -b plone or ./bin/plone-compile-resources -b plone-logged-in (whichever bundle you need to re-build).
Increase the last_compilation date in src/plone/staticresources/profiles/default/registry/bundles.xml.
Submit a Pull Request and run the tests on Jenkins.
What has changed
Between Plone 5.0 and 5.1 these resources were located in static/ directory of Products.CMFPlone package. Starting with Plone 5.2 they are distributed in this independent package due to the specific tooling and workflows used to build frontend resources and also the different maintenance and release needs of Products.CMFPlone. For a complete list of reasons, read PLIP 1653.
Changes since Plone 5.1.x
The toolbar pattern from Products.CMFPlone.static.toolbar has been moved to mockup package.
mockup package now uses Npm’s registry and Yarn instead of Bower.
Besides the following has been moved in here:
All static Resources from Products.CMFPlone.static: bundle resources, compiled bundles, external packages
Bundle and Resource registrations from Products.CMFPlone’s dependencies profile
plone-compile-resources script
thememapper bundle from plone.app.theming
plone.resourceeditor bundle from plone.resourceeditor
Compiling Bundles
The front end resources in this package should be updated with the script called plone-compile-resources, available in the bin directory of a default Plone buildout installation. This script compiles the final CSS and JS resources that will be served to end users.
Building the plone bundle:
./bin/plone-compile-resources -b plone
Building the plone-logged-in bundle:
./bin/plone-compile-resources -b plone-logged-in
Resources, Bundles, Patterns and the Resource Registry
The plone-compile-resources script collects Resources from source packages (e.g. mockup) and compiles them in plone/staticresources/static/ into minified versions with source maps and, for JavaScript only, also into an un-minified version. The output directory is configurable by using csscompilation and jscompilation attributes of the bundle registration.
Bundles are groups of resources. By default Plone comes configured to serve two main bundles:
plone: containing JS and CSS used for anonymous visitors
plone-logged-in: with additional resources for authenticated visitors, e.g. for editor and management user interfaces
Finally Plone encapsulates most of its CSS and JS into units called Patterns that live in the mockup package. Although Patterns provide their own registered Resources, those are not registered to Plone main bundles. Instead, they are imported through native LESS and Require JS “entry points” that live in plone.staticresource:
When editing a pattern (e.g. in mockup package), it is important to know for which bundle it is registered, which can be done by checking where it is imported in the entry points above. The bundle name will be useful as parameter for plone-compile-resources script.
In production mode (./bin/instance start), since version 5.1, Plone is configured to serve Aggregate Bundles, single files to minimize network requests (aggregate bundles). In that case final production resource URLs will be similar to:
http://localhost:8080//++plone++production/++unique++TIMESTAMP/default.js
http://localhost:8080//++plone++production/++unique++TIMESTAMP/default.css
If you enable Development Mode for JavaScript and CSS in Resource Registries control panel, Plone will omit timestamp from path and serve fresh copies of the resources of the selected bundle(s). Those are compiled in-browser, on the fly for each page load and requested by XHR requests to URLs like:
These entry points will then cause Patterns themselves to be loaded through in-browser XHR requests to URLs like:
http://localhost:8080/Plone/++resource++mockup/livesearch/pattern.js
http://localhost:8080/Plone/++resource++mockup/livesearch/pattern.livesearch.less
If you do enable Development Mode, and yet do not select any bundles, Plone serves static resources in URLs similar to:
http://localhost:8080/++plone++static/++unique++TIMESTAMP/plone-compiled.min.js
http://localhost:8080/++plone++static/++unique++TIMESTAMP/plone-compiled.css
http://localhost:8080/++plone++static/++unique++TIMESTAMP/plone-logged-in-compiled.min.js
http://localhost:8080/++plone++static/++unique++TIMESTAMP/plone-logged-in-compiled.css
Development tips
When fixing Plone bugs or improving functionality:
Dependencies upgrades (e.g. moment.js) should be done in mockup and after the PR is merged, propagated here (i.e. static resources needs to be recompiled)
Likewise, CSS and JS should be developed not in plone.staticresources but in their own package’s source (for instance, in mockup)
To see the new changes in the browser, enable Development Mode in Resource Registries control panel. Next the desired bundle (that contains the modified files) must be set to either “Develop JavaScript”, “Develop CSS” or both. This causes each of the bundle resources to be served individually, easing development. In this case, bundle resources are served from the source package (e.g. mockup) instead of plone.staticresources.
To identify which bundle contains the modified resource, see section “Entry Points” below. Keep in mind the more bundles selected for development mode the slower are page reloads, so it is recommended to select only what is being developed.
Alternatively you may run ./bin/plone-compile-resources between changes and avoid Development Mode’s in-browser compilation (fastest browser loading time).
Entry Points
The current list of registered patterns for each entry point is available in:
Here’s a snapshot:
For anonymous users
JS |
LESS |
|---|---|
|
|
For logged-in users
JS |
LESS |
|---|---|
|
|
Developing patterns
All JavaScript code in this package is downloaded via yarn into src/plone/staticresources/static/components. Nothing in that directory should be manually edited. If you need to fix something, do it in the original repository and eventually upgrade its version (next section).
For Mockup, the original repository is: https://github.com/plone/mockup/
For Patternslib, visit: http://github.com/patternslib/Patterns
Generating the plone-compile-resources script
The plone-compile-resources script can be used to compile bundles from the command line. In short, the script starts up a Plone instance, reads the resources and bundles configured in the registry and compiles a JS/CSS bundle based on that configuration. See plone-compile-resources --help for more information.
When using buildout, plone-compile-resources script is automatically generated. If you use a custom buildout, you might need to add something similar to:
[buildout]
parts =
# ...
zopepy
# ...
[instance]
# ...
[zopepy]
recipe = zc.recipe.egg
eggs =
${instance:eggs}
interpreter = zopepy
scripts =
zopepy
plone-compile-resourcesMore on the Resource Registry and its modes
Have a look on how plone.staticresources and mockup register their resources:
In ZCML:
https://github.com/plone/mockup/blob/master/mockup/configure.zcml
https://github.com/plone/plone.staticresources/blob/master/src/plone/staticresources/configure.zcml
In the resource registry:
For more information on the Plone resource registry see the documentation at:
Warning
If you update r.js or less, you will need to manually re-apply a patch that gives us cache busting resource downloads so we can build through the web. See:
License
The project is licensed under the GPLv2.
Changelog
1.1.0 (2019-06-22)
New features:
Add support for asynchronous loading of javascript resources. A new plone-base bundle is added with the minimum required scripts from plone bundle. Import the extra profile to enable experimental async loading. [agitator] (#27)
Bug fixes:
Fixes plone/mockup#895 again. (#24)
Fixed plone/Products.CMFPlone#2490 conflict in z-index between main toolbar and structure pattern toolbar (#25)
Integrate https://github.com/plone/mockup/pull/906 which fixes wrong in-path marking for similar pathnames. #26 [agitator] (#26)
1.0.2 (2019-03-21)
Bug fixes:
Fix highlight of current item in nav for image and file. [agitator] (#18)
Fix less building error. [vangheem] (#19)
Update resources after alignment fix in Select2-based widgets [davilima6] (#21)
1.0.1 (2019-03-12)
Bug fixes:
Fix highlight of current item in nav for image and file. [agitator] (#18)
Update resources after alignment fix in Select2-based widgets [davilima6] (#21)
1.0.0 (2019-03-04)
New features:
Ship moment.js without locales, which are now lazily loaded in ‘mockup’ package [davilima6] (#10)
Bug fixes:
Customize select2 to work better with relateditems pattern, update compiled resources: plone, logged-in [MrTango] (#16)
1.0a1 (2019-02-13)
New features:
Put together all Plone assets in a single package. [thet] (#1)
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Hashes for plone.staticresources-1.1.0.tar.gz
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | da943d54d3c270ef41754f685e8b5b9c0909ed565d5d2c0bd9ca6e64f03979e1 |
|
| MD5 | fa514be9de3ef4be314aa68455953a01 |
|
| BLAKE2b-256 | 6127c9e122f8eec2f39be5ad9102c0499d50eb10aa04b525e4a716f4252587e0 |
