feat: Code Splitting (#3860)

* feat: configure webpack to allow splitting chunks
* feat: `JsDirectoryCompiler` and expose js assets URL
* chore: support es2020 dynamic importing
* feat: control which URL to fetch chunks from
* feat: allow showing async modals & split 'LogInModal'
* feat: split `SignUpModal`
* feat: allow rendering async pages & split `UserSecurityPage`
* fix: module might not be listed in chunk
* feat: lazy load user pages
* feat: track the chunk containing each module
* chore: lightly warn
* chore: split `Composer`
* feat: add common frontend (for split common chunks)
* fix: jsDoc typing imports should be ignored
* feat: split `PostStream` `ForgotPasswordModal` and `EditUserModal`
* fix: multiple inline async imports not picked up
* chore: new `common` frontend assets only needs a jsdir compiler
* feat: add revision hash to chunk import URL
* fix: nothing to split for `admin` frontend yet
* chore: cleanup registry API
* chore: throw an error in debug mode if attempting to import a non-loaded module
* feat: defer `extend` & `override` until after module registration
* fix: plugin not picking up on all module sources
* fix: must override default chunk loader function from webpack plugin
* feat: split tags `TagDiscussionModal` and `TagSelectionModal`
* fix: wrong export name
* feat: import chunked modules from external packages
* feat: extensions compatibility
* feat: Router frontend extender async component
* chore: clean JS output path (removes stale chunks)
* fix: common chunks also need flushing
* chore: flush backend stale chunks
* Apply fixes from StyleCI
* feat: loading alert when async page component is loading
* chore: `yarn format`
* chore: typings
* chore: remove exception
* Apply fixes from StyleCI
* chore(infra): bundlewatch
* chore(infra): bundlewatch split chunks
* feat: split text editor
* chore: tag typings
* chore: bundlewatch
* fix: windows paths
* fix: wrong planned ext import format

framework/core/less/common/Alert.less

@@ -3,6 +3,7 @@
   border-radius: var(--border-radius);
   line-height: 1.5;
 
+  --loading-indicator-color: var(--alert-color);
   background: var(--alert-bg);
 
   &,

framework/core/less/common/LoadingIndicator.less

@@ -22,7 +22,7 @@
     --size: 24px;
     --thickness: 2px;
 
-    color: var(--muted-color);
+    color: var(--loading-indicator-color);
 
     // Center vertically and horizontally
     // Allows people to set `height` and it'll stay centered within the new height

framework/core/less/common/Modal.less

@@ -20,16 +20,19 @@
 }
 
 .Modal-backdrop {
+  --loading-indicator-color: var(--body-bg);
+
   background: var(--overlay-bg);
   position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
   opacity: 0;
   transition: opacity 0.2s ease-out;
   z-index: ~"calc(var(--zindex-modal) + var(--modal-count) - 2)";
 
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
   &[data-showing] {
     opacity: 1;
   }

framework/core/less/common/root.less

@@ -81,6 +81,8 @@
   --tooltip-bg:                    @tooltip-bg;
   --tooltip-color:                 @tooltip-color;
 
+  --loading-indicator-color:       var(--muted-color);
+
   --online-user-circle-color:      @online-user-circle-color;
 
   --discussion-title-color:        mix(@heading-color, @body-bg, 55%);