9d4163d31f
As part of the static asset build, JS modules for most built-in XBlocks were
unnecessarily copied from the original locations (under xmodule/js and
common/static/js) to a git-ignored location (under common/static/xmodule), and
then included into the Webpack builld via
common/static/xmodule/webpack.xmodule.config.js.
With this commit, we stop copying the JS modules. Instead, we have
common/static/xmodule/webpack.xmodule.config.js just reference the original
source under xmodule/js and common/static/js.
This lets us us radically simplify the xmodule/static_content.py build script.
It also sets the stage for the next change, in which we will check
webpack.xmodule.config.js into the repository, and delete
xmodule/static_content.py entirely.
common/static/xmodule/webpack.xmodule.config.js before:
module.exports = {
"entry": {
"AboutBlockDisplay": [
"./common/static/xmodule/modules/js/000-b82f6c436159f6bc7ca2513e29e82503.js",
"./common/static/xmodule/modules/js/001-3ed86006526f75d6c844739193a84c11.js",
"./common/static/xmodule/modules/js/002-3918b2d4f383c04fed8227cc9f523d6e.js",
"./common/static/xmodule/modules/js/003-b3206f2283964743c4772b9d72c67d64.js",
"./common/static/xmodule/modules/js/004-274b8109ca3426c2a6fde9ec2c56e969.js",
"./common/static/xmodule/modules/js/005-26caba6f71877f63a7dd4f6796109bf6.js"
],
"AboutBlockEditor": [
"./common/static/xmodule/descriptors/js/000-b82f6c436159f6bc7ca2513e29e82503.js",
"./common/static/xmodule/descriptors/js/001-19c4723cecaa5a5a46b8566b3544e732.js"
],
// etc
}
};
common/static/xmodule/webpack.xmodule.config.js after:
module.exports = {
"entry": {
"AboutBlockDisplay": [
"./xmodule/js/src/xmodule.js",
"./xmodule/js/src/html/display.js",
"./xmodule/js/src/javascript_loader.js",
"./xmodule/js/src/collapsible.js",
"./xmodule/js/src/html/imageModal.js",
"./xmodule/js/common_static/js/vendor/draggabilly.js"
],
"AboutBlockEditor": [
"./xmodule/js/src/xmodule.js",
"./xmodule/js/src/html/edit.js"
],
// etc
}
};
Part of: https://github.com/openedx/edx-platform/issues/32481
95 lines
4.7 KiB
ReStructuredText
95 lines
4.7 KiB
ReStructuredText
xmodule/assets: edx-platform XBlock resources
|
|
#############################################
|
|
|
|
This folder exists to contain resources (i.e., static assets) for the XBlocks
|
|
defined in edx-platform.
|
|
|
|
Concepts
|
|
********
|
|
|
|
We would like edx-platform XBlock resources to match the standard XBlock
|
|
resource strategy as much as possible, because:
|
|
|
|
* it'll make it easier to extract the XBlocks into their own packages
|
|
eventually, and
|
|
* it makes it easier to reason about the system as a whole when
|
|
internally-defined and externally-defined blocks play by the same rules.
|
|
|
|
Due to the legacy of the XModule system, we're not quite there yet.
|
|
However, we are proactively working towards a system where:
|
|
|
|
* Python is not involved in the generation of static assets.
|
|
* We minimze conditionals that differentiate between "older" (aka "XModule-style")
|
|
XBlocks and newer (aka "pure") XBlocks.
|
|
* Each XBlock's assets are contained within their own folder as much as
|
|
possible. See ``./vertical`` as an example.
|
|
|
|
Themable Sass (.scss)
|
|
*********************
|
|
|
|
XBlock CSS for ``student_view``, ``author_view``, and ``public_view`` is compiled from the various ``./<ClassName>BlockDisplay.scss`` modules, such as `AnnotatableBlockDisplay.scss`_.
|
|
|
|
XBlock CSS for ``studio_view`` is compiled from the various ``./<ClassName>BlockEditor.scss`` modules, such as `AnnotatableBlockEditor.scss`_.
|
|
|
|
Those Sass modules are mostly thin wrappers around the underscore-prefixed Sass
|
|
modules within block-type-subdirectories, such as `annotatable/_display.css`. In the
|
|
future, we may `simplify things`_ by collapsing the top-level Sass modules and
|
|
just directly compiling the block-type-subdirectories' Sass.
|
|
|
|
The CSS is compiled into the static folders of both LMS and CMS, as well as into
|
|
the corresponding folders in any enabled themes, as part of the edx-platform build.
|
|
It is collected into the static root, and then linked to from XBlock fragments by the
|
|
``add_sass_to_fragment`` function in `builtin_assets.py`_.
|
|
|
|
.. _AnnotatableBlockDisplay: https://github.com/openedx/edx-platform/tree/master/xmodule/assets/AnnotatableBlockDisplay.scss
|
|
.. _AnnotatableBlockEditor: https://github.com/openedx/edx-platform/tree/master/xmodule/assets/AnnotatableBlockEditor.scss
|
|
.. _annotatable/_display.scss: https://github.com/openedx/edx-platform/tree/master/xmodule/assets/annotatable/_display.scss
|
|
.. _simplify things: https://github.com/openedx/edx-platform/issues/32621
|
|
|
|
Static CSS (.css)
|
|
*****************
|
|
|
|
Non-themable, ready-to-seve CSS may also be added to the any block type's
|
|
subdirectory. For example, see `library_source_block/style.css`_.
|
|
|
|
JavaScript (.js)
|
|
****************
|
|
|
|
Currently, edx-platform XBlock JS is defined both here in `xmodule/assets`_ and outside in `xmodule/js`_. Different JS resources are processed differently:
|
|
|
|
* For many older blocks, their JS is:
|
|
|
|
* bundled using a generated Webpack config at ``common/static/xmodule/webpack.xmodule.config.js``,
|
|
* which is included into `webpack.common.config.js`_,
|
|
* allowing it to be included into XBlock fragments using ``add_webpack_js_to_fragment`` from `builtin_assets.py`_.
|
|
|
|
Example blocks using this setup:
|
|
|
|
* `ProblemBlock`_
|
|
* `HtmlBlock`_
|
|
* `AnnotatableBlock`_
|
|
|
|
* For other "purer" blocks, the JS is used as a standard XBlock fragment. Example blocks:
|
|
|
|
* `VerticalBlock`_
|
|
* `LibrarySourcedBlock`_
|
|
|
|
As part of an `active build refactoring`_:
|
|
|
|
* We will move ``webpack.xmodule.config.js`` here instead of generating it.
|
|
* We will consolidate all edx-platform XBlock JS here in `xmodule/assets`_.
|
|
* We will delete the ``xmodule_assets`` script.
|
|
|
|
.. _xmodule/assets: https://github.com/openedx/edx-platform/tree/master/xmodule/assets
|
|
.. _xmodule/js: https://github.com/openedx/edx-platform/tree/master/xmodule/js
|
|
.. _ProblemBlock: https://github.com/openedx/edx-platform/blob/master/xmodule/capa_block.py
|
|
.. _HtmlBlock: https://github.com/openedx/edx-platform/blob/master/xmodule/html_block.py
|
|
.. _AnnotatableBlock: https://github.com/openedx/edx-platform/blob/master/xmodule/annotatable_block.py
|
|
.. _VerticalBlock: https://github.com/openedx/edx-platform/blob/master/xmodule/vertical_block.py
|
|
.. _LibrarySourcedBlock: https://github.com/openedx/edx-platform/blob/master/xmodule/library_sourced_block.py
|
|
.. _active build refactoring: https://github.com/openedx/edx-platform/issues/31624
|
|
.. _builtin_assets.py: https://github.com/openedx/edx-platform/tree/master/xmodule/util/builtin_assets.py
|
|
.. _static_content.py: https://github.com/openedx/edx-platform/blob/master/xmodule/static_content.py
|
|
.. _library_source_block/style.css: https://github.com/openedx/edx-platform/blob/master/xmodule/assets/library_source_block/style.css
|
|
.. _webpack.common.config.js: https://github.com/openedx/edx-platform/blob/master/webpack.common.config.js
|