Feature vite (#4747)

.eslintrc

@@ -10,6 +10,7 @@
     "apos": true
   },
   "rules": {
+    "max-len": "off",
     "no-var": "error",
     "no-console": 0,
     "vue/no-deprecated-v-on-native-modifier": 0,
@@ -56,12 +57,12 @@
     {
       "files": "*.vue",
       "globals": {
-        "defineProps": "readable",
-        "defineEmits": "readable",
-        "defineExpose": "readable",
-        "defineOptions": "readable",
-        "defineModel": "readable",
-        "defineSlots": "readable"
+        "defineProps": "readonly",
+        "defineEmits": "readonly",
+        "defineExpose": "readonly",
+        "defineOptions": "readonly",
+        "defineModel": "readonly",
+        "defineSlots": "readonly"
       }
     },
     {

CHANGELOG.md

@@ -22,6 +22,14 @@ with dynamic choices in this way.
 * Breakpoint preview only targets `[data-apos-refreshable]`.
 * Adds a `isActive` state to context menu items. Also adds possibility to add icons to context menu items.
 * Add a postcss plugin to handle `vh` and `vw` values on breakpoint preview mode.
+* Adds inject component `when` condition with possible values `hmr`, `prod`, and `dev`. Modules should explicitely register their components with the same `when` value and the condition should be met to inject the component.
+* Adds inject `bundler` registration condition. It's in use only when registering a component and will be evaluated on runtime. The value should match the current build module (`webpack` or the external build module alias).
+* Adds new development task `@apostrophecms/asset:reset` to reset the asset build cache and all build artifacts.
+* Revamps the `@apostrophecms/asset` module to enable bundling via build modules.
+* Adds `apos.asset.devServerUrl()` nunjucks helper to get the (bundle) dev server URL when available.
+* The asset module has a new option, `options.hmr` that accepts `public` (default), `apos` or `false` to enable HMR for the public bundle or the admin UI bundle or disable it respectively. This configuration works only with external build modules that support HMR.
+* The asset module has a new option, `options.hmrPort` that accepts an integer (default `null`) to specify the HMR WS port. If not specified, the default express port is used. This configuration works only with external build modules that support HMR WS.
+* The asset module has a new option, `options.productionSourceMaps` that accepts a boolean (default `false`) to enable source maps in production. This configuration works only with external build modules that support source maps.
 
 ### Changes
 

index.js

@@ -548,7 +548,9 @@ async function apostrophe(options, telemetry, rootSpan) {
         'icons',
         'i18n',
         'webpack',
-        'commands'
+        'build',
+        'commands',
+        'before'
       ]
     });
 
@@ -574,8 +576,7 @@ async function apostrophe(options, telemetry, rootSpan) {
   }
 
   // Reorder modules based on their `before` property.
-  function sortModules(moduleNames) {
-    const definitions = self.options.modules;
+  async function sortModules(moduleNames) {
     // The module names that have a `before` property
     const beforeModules = [];
     // The metadata quick access of all modules
@@ -587,11 +588,13 @@ async function apostrophe(options, telemetry, rootSpan) {
 
     // The base module sort metadata
     for (const name of moduleNames) {
-      if (definitions[name].before) {
+      const metadata = await self.synth.getMetadata(name);
+      const before = Object.values(metadata.before).reverse().find(name => typeof name === 'string');
+      if (before) {
         beforeModules.push(name);
       }
       modules[name] = {
-        before: definitions[name].before,
+        before,
         beforeSelf: []
       };
     }
@@ -656,7 +659,8 @@ async function apostrophe(options, telemetry, rootSpan) {
 
   async function instantiateModules() {
     self.modules = {};
-    for (const item of sortModules(modulesToBeInstantiated())) {
+    const sorted = await sortModules(modulesToBeInstantiated());
+    for (const item of sorted) {
       // module registers itself in self.modules
       const apostropheModule = await self.synth.create(item, { apos: self });
       await apostropheModule.emit('moduleReady');

modules/@apostrophecms/area/ui/apos/components/AposAreaWidget.vue

@@ -160,7 +160,7 @@
 </template>
 
 <script>
-import AposIndicator from '../../../../ui/ui/apos/components/AposIndicator.vue';
+import AposIndicator from 'Modules/@apostrophecms/ui/components/AposIndicator.vue';
 
 export default {
   name: 'AposAreaWidget',