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

web/modules/custom/materio_home/includes/materio_home.inc

@@ -1,13 +0,0 @@
-<?php
-
-use Drupal\Core\Url;
-
-function template_preprocess_materio_home(&$vars){
-  $node_view_builder = \Drupal::entityTypeManager()->getViewBuilder('node');
-
-  $vm = "default";
-  $fpnode = $vars['frontpage_node'];
-  $nvb_fpnode = $node_view_builder->view($fpnode, $vm);
-  $vars['frontpage_node'] = $nvb_fpnode;
-
-}

web/modules/custom/materio_home/materio_home.module

@@ -24,6 +24,9 @@ use Drupal\mymodule\Plugin\Field\FieldType\MyFieldComputed;
 
 // $field_map_kv_store->set('node', $node_map);
 
+
+
+
 /**
  * Implement hook_entity_bundle_field_info().
  *
@@ -136,6 +139,48 @@ function materio_home_entity_base_field_info_alter(&$fields, EntityTypeInterface
   }
 }
 
+
+/**
+ * Implements hook_theme().
+ *
+ * Register a module or theme's theme implementations.
+ * The implementations declared by this hook specify how a particular render array is to be rendered as HTML.
+ *
+ * See: https://api.drupal.org/api/drupal/core%21lib%21Drupal%21Core%21Render%21theme.api.php/function/hook_theme/8.2.x
+ *
+ * If you change this method, clear theme registry and routing table 'drush cc theme-registry' and 'drush cc router'.
+ */
+function materio_home_theme($existing, $type, $theme, $path) {
+
+  return [
+    // Name of the theme hook. This is used in the controller to trigger the hook.
+    'materio_home' => [
+      'render element' => 'element',
+      // If no template name is defined here, it defaults to the name of the theme hook, ie. module-name-theme-hook.html.twig
+      'template' => 'materio-home',
+      // Optionally define path to Twig template files. Defaults to the module's ./templates/ directory.
+      // 'path' => $path . '/templates',
+      // Optionally define variables that will be passed to the Twig template and set default values for them.
+      // 'variables' => [
+      //   'variable1' => 'Yet another default text.',
+      //   'variable2' => 0,
+      //   'variable3' => [0, 0, 0],
+      // ],
+    ],
+  ];
+
+}
+
+
+function template_preprocess_materio_home(&$vars){
+  $node_view_builder = \Drupal::entityTypeManager()->getViewBuilder('node');
+  $element = $vars['element'];
+  $vm = $element['#view_mode'];
+  $fpnode = $element['#frontpage_node'];
+  $nvb_fpnode = $node_view_builder->view($fpnode, $vm);
+  $vars['frontpage_node'] = $nvb_fpnode;
+}
+
 /**
  * Implement hook_cron().
  *

web/modules/custom/materio_home/materio_home.routing.yml

@@ -1,3 +1,11 @@
+materio_home.home:
+  path: 'home'
+  defaults:
+    _controller: '\Drupal\materio_home\Controller\HomeController::home'
+    _title: 'Home'
+  requirements:
+    _permission: 'access content'
+
 materio_home.ajax_home:
   path: 'materio_home/ajax/gethome'
   defaults:

web/modules/custom/materio_home/src/Controller/AjaxHomeController.php

@@ -74,14 +74,18 @@ class AjaxHomeController extends ControllerBase {
    */
   public function getHome() {
 
-    $path = \Drupal::config('system.site')->get('page.front');
+    // $path = \Drupal::config('system.site')->get('page.front');
+    // $params = Url::fromUri("internal:" . $path)->getRouteParameters();
+    // $entity_type = key($params);
+    // $entity = $this->entityTypeManager()->getStorage($entity_type)->load($params[$entity_type]);
 
-    $params = Url::fromUri("internal:" . $path)->getRouteParameters();
+    $nid = 1;
-    $entity_type = key($params);
+    // TODO: home nid should be a setting
-    $entity = $this->entityTypeManager()->getStorage($entity_type)->load($params[$entity_type]);
+    $node_storage = \Drupal::entityTypeManager()->getStorage('node');
+    $node = $node_storage->load($nid);
 
     $view_builder = $this->entityTypeManager()->getViewBuilder('node');
-    $renderable = $view_builder->view($entity, 'default');
+    $renderable = $view_builder->view($node, 'home_full');
     $rendered = $this->renderer->executeInRenderContext(new RenderContext(), function () use ($renderable) {
       return render($renderable);
     });

web/modules/custom/materio_home/src/Controller/HomeController.php

@@ -3,15 +3,15 @@
 namespace Drupal\materio_home\Controller;
 
 use Drupal\Core\Controller\ControllerBase;
-use Drupal\Core\Datetime\DrupalDateTime;
+// use Drupal\Core\Datetime\DrupalDateTime;
-use Drupal\taxonomy\Entity\Term;
+// use Drupal\taxonomy\Entity\Term;
-use Drupal\workflow\Entity\WorkflowManager;
+// use Drupal\workflow\Entity\WorkflowManager;
-use Drupal\Core\Url;
+// use Drupal\Core\Url;
-use Drupal\Core\Language\LanguageInterface;
+// use Drupal\Core\Language\LanguageInterface;
 // use Symfony\Component\HttpFoundation\JsonResponse;
-use Drupal\Core\Cache\CacheableJsonResponse;
+// use Drupal\Core\Cache\CacheableJsonResponse;
-use Drupal\Core\Cache\CacheableMetadata;
+// use Drupal\Core\Cache\CacheableMetadata;
-use Drupal\core\render\RenderContext;
+// use Drupal\core\render\RenderContext;
 
 
 
@@ -23,20 +23,24 @@ class HomeController extends ControllerBase {
    * @return renderable array
    */
   public function home() {
-
+    // return "Hello";
     // $view_builder = \Drupal::entityTypeManager()->getViewBuilder('node');
 
     $contents = array("#theme"=>'materio_home');
 
-    // presentation
+    // // presentation
-    $query = \Drupal::entityQuery('node')
+    // $query = \Drupal::entityQuery('node')
-      ->condition('status', 1)
+    //   // ->condition('status', 1)
-      ->condition('nid', 19990);
+    //   ->condition('nid', 1);
-    // TODO: présentation nid should be a setting
+    // $nids = $query->execute();
 
-    $pres_nid = $query->execute();
+    $nid = 1;
-    $contents["#frontpage_node"] = entity_load('node', array_pop($pres_nid));
+    // TODO: home nid should be a setting
+    $node_storage = \Drupal::entityTypeManager()->getStorage('node');
+    $node = $node_storage->load($nid);
 
+    $contents["#frontpage_node"] = $node;
+    $contents["#view_mode"] = "home_light";
     return $contents;
   }
 

web/sites/default/development.services.yml

@@ -0,0 +1,59 @@
+# Local development services.
+#
+# To activate this feature, follow the instructions at the top of the
+# 'example.settings.local.php' file, which sits next to this file.
+parameters:
+  twig.config:
+    # Twig debugging:
+    #
+    # When debugging is enabled:
+    # - The markup of each Twig template is surrounded by HTML comments that
+    #   contain theming information, such as template file name suggestions.
+    # - Note that this debugging markup will cause automated tests that directly
+    #   check rendered HTML to fail. When running automated tests, 'debug'
+    #   should be set to FALSE.
+    # - The dump() function can be used in Twig templates to output information
+    #   about template variables.
+    # - Twig templates are automatically recompiled whenever the source code
+    #   changes (see auto_reload below).
+    #
+    # For more information about debugging Twig templates, see
+    # https://www.drupal.org/node/1906392.
+    #
+    # Not recommended in production environments
+    # @default false
+    debug: true
+    # Twig auto-reload:
+    #
+    # Automatically recompile Twig templates whenever the source code changes.
+    # If you don't provide a value for auto_reload, it will be determined
+    # based on the value of debug.
+    #
+    # Not recommended in production environments
+    # @default null
+    auto_reload: null
+    # Twig cache:
+    #
+    # By default, Twig templates will be compiled and stored in the filesystem
+    # to increase performance. Disabling the Twig cache will recompile the
+    # templates from source each time they are used. In most cases the
+    # auto_reload setting above should be enabled rather than disabling the
+    # Twig cache.
+    #
+    # Not recommended in production environments
+    # @default true
+    cache: false
+  # Cacheability debugging:
+  #
+  # Responses with cacheability metadata (CacheableResponseInterface instances)
+  # get X-Drupal-Cache-Tags and X-Drupal-Cache-Contexts headers.
+  #
+  # For more information about debugging cacheable responses, see
+  # https://www.drupal.org/developing/api/8/response/cacheable-response-interface
+  #
+  # Not recommended in production environments
+  # @default false
+  http.response.debug_cacheability_headers: true
+services:
+  cache.backend.null:
+    class: Drupal\Core\Cache\NullBackendFactory

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)))
+      console.log('compileTemplate, full', this.full)
+      if (this.full) {
         setTimeout(this.initShowroomCarroussel.bind(this), 250)
+      }
     },
     initShowroomCarroussel(){
       console.log('startShowroomCarroussel')