#1107: first light_home then async load full home, do not aggregate nor preprocess theme js libraries

web/themes/custom/materiotheme/assets/scripts/main.js

@@ -103,15 +103,15 @@ export let _v_sitebranding_block, _v_user_block, _v_header_menu,
     function initVues () {
       // only launch views if we are not in commerce pages
       if (!checkNoVuePages()) {
-        initVi18n()
-        initVStore()
         initVRouter()
         initVSiteBrandingBlock()
         initVPagetitleBlock()
         initVHeaderMenu()
         initHamburgerMenu()
-        initVMainContent()
         initVSearchBlock()
+        initVMainContent()
+        initVStore()
+        initVi18n()
         initVLeftContent()
       }
       initVUserBlock()

web/themes/custom/materiotheme/materiotheme.libraries.yml

@@ -9,9 +9,15 @@ global-css:
 global-js:
   version: VERSION
   js:
-    assets/dist/main.js: { }
+    assets/dist/main.js:
+      type: file
+      minified: true
+      preprocess: false
     # assets/dist/vsa.js: { }
-    assets/dist/vclb.js: { }
+    assets/dist/vclb.js:
+      type: file
+      minified: true
+      preprocess: false
   dependencies:
     - core/drupal
     # - core/drupal.ajax

web/themes/custom/materiotheme/templates/content/field--node--field-blabla--frontpage.html.twig

@@ -69,8 +69,9 @@
   <div{{ attributes.addClass(classes) }}>
     <div{{ title_attributes.addClass(title_classes) }}>
       <a href="/blabla" @click.prevent="onClickLink">
-        {{ label }}</div>
+        {{ label }}
       </a>
+    </div>
     {% if multiple %}
       <div class="field__items">
     {% endif %}

web/themes/custom/materiotheme/templates/content/field--node--field-showrooms--frontpage.html.twig

@@ -69,8 +69,9 @@
   <div{{ attributes.addClass(classes) }}>
     <div{{ title_attributes.addClass(title_classes) }}>
       <a href="/showrooms" @click.prevent="onClickLink">
-        {{ label }}</div>
+        {{ label }}
       </a>
+    </div>
     {% if multiple %}
       <div class="field__items">
     {% endif %}

web/themes/custom/materiotheme/vuejs/components/Content/MainContent.vue

@@ -2,7 +2,7 @@
   <div :id="id">
     <!-- <router-view name="home" :html="home_template_src"></router-view> -->
     <!-- <router-view name="base"></router-view> -->
-    <router-view :html="home_template_src"/>
+    <router-view :html="home_template_src" :full="full_home_template_loaded"/>
   </div>
 </template>
 
@@ -17,25 +17,38 @@ export default {
   props:['id','html', 'isfront'],
   data() {
     return {
-      home_template_src: null
+      home_template_src: null,
+      full_home_template_loaded: false
     }
   },
   beforeMount() {
     // console.log('MainContent beforeMount this.html', this.html)
     if (!this.home_template_src) {
+      // // console.log('no home_template_src')
+      // if (this.html && this.isfront) { // if html prop is available and we are landing on home then record it has data
+      //   this.home_template_src = this.html
+      // } else { // else get it from ajax (e.g. if we didn't load the page from home)
+      //   this.getHomeHtml()
+      // }
+
       // console.log('no home_template_src')
-      if (this.html && this.isfront) { // if html prop is available and we are landing on home then record it has data
+      if (this.isfront) {
+        // if html prop is available and we are landing on home then record it has data
         this.home_template_src = this.html
-      } else { // else get it from ajax (e.g. if we didn't load the page from home)
+      }
+      // in any case load the full home template if not already loaded
+      if (!this.full_home_template_loaded) {
         this.getHomeHtml()
       }
     }
   },
   methods: {
     getHomeHtml(){
+      console.log('MainContent getHomeHtml');
       MA.get('materio_home/ajax/gethome')
         .then(({data}) => {
-          // console.log('Home getHomeHtml data', data)
+          console.log('MainContent getHomeHtml data', data)
+          this.full_home_template_loaded = true
           this.home_template_src = data.rendered // record the html src into data
         })
         .catch((error) => {

web/themes/custom/materiotheme/vuejs/components/Pages/Home.vue

@@ -3,7 +3,7 @@
 import Vue from 'vue'
 
 export default {
-  props: ['html'], // get the html from parent with props
+  props: ['html', 'full'], // get the html from parent with props
   data() {
     return {
       template: null, // compiled template from html used in render
@@ -40,7 +40,10 @@ export default {
       this.$options.staticRenderFns = []
       this._staticTrees = []
       this.template.staticRenderFns.map(fn => (this.$options.staticRenderFns.push(fn)))
-      setTimeout(this.initShowroomCarroussel.bind(this), 250)
+      console.log('compileTemplate, full', this.full)
+      if (this.full) {
+        setTimeout(this.initShowroomCarroussel.bind(this), 250)
+      }
     },
     initShowroomCarroussel(){
       console.log('startShowroomCarroussel')