layout template bundle

Gruntfile.js

@@ -34,8 +34,10 @@ const cp = require('child_process');
 const path = require('path');
 const buildUtils = require('./js/build-utils');
 const Bundler = require("./js/bundler");
-const bundleConfig = require("./frontend/bundle-config.json");
-const libs = require("./frontend/libs.json");
+const Precompiler = require('./js/template-precompiler');
+const LayoutTypeBundler = require('./js/layout-template-bundler');
+const bundleConfig = require('./frontend/bundle-config.json');
+const libs = require('./frontend/libs.json');
 
 module.exports = grunt => {
 
@@ -46,6 +48,7 @@ module.exports = grunt => {
     let bundleFileMap = {
         'client/lib/espo-libs.min.js': buildUtils.getPreparedBundleLibList(libs),
         'client/lib/espo-templates.min.js': 'client/lib/original/espo-templates.js',
+        'client/lib/espo-layout-templates.min.js': 'client/lib/original/espo-layout-templates.js',
     };
 
     for (let i = 0; i < bundleConfig.chunkNumber; i++) {
@@ -259,7 +262,7 @@ module.exports = grunt => {
         },
     });
 
-    grunt.registerTask('espo-bundle', () => {
+    grunt.registerTask('bundle-espo', () => {
         let chunks = (new Bundler()).bundle({
             files: bundleConfig.files,
             patterns: bundleConfig.patterns,
@@ -279,9 +282,15 @@ module.exports = grunt => {
         });
     });
 
-    grunt.registerTask('template-precompile', () => {
-        const Precompiler = require('./js/template-precompiler');
+    grunt.registerTask('bundle-layout-templates', () => {
+        let content = (new LayoutTypeBundler()).bundle();
 
+        let file = originalLibDir + `/espo-layout-templates.js`;
+
+        fs.writeFileSync(file, content, 'utf8');
+    });
+
+    grunt.registerTask('template-precompile', () => {
         let contents = (new Precompiler()).precompile({
             patterns: bundleConfig.templatePatterns,
             modulePaths: {'crm': 'client/modules/crm'},
@@ -478,7 +487,8 @@ module.exports = grunt => {
     grunt.registerTask('internal', [
         'less',
         'cssmin',
-        'espo-bundle',
+        'bundle-espo',
+        'bundle-layout-templates',
         'template-precompile',
         'prepare-lib-original',
         'uglify:bundle',

application/Espo/Resources/metadata/app/client.json

@@ -4,6 +4,7 @@
         "client/lib/espo-0.min.js",
         "client/lib/espo-1.min.js",
         "client/lib/espo-2.min.js",
+        "client/lib/espo-layout-templates.min.js",
         "client/lib/espo-templates.min.js"
     ],
     "developerModeScriptList": [

client/cfg/pre-load.json

@@ -1,10 +1,5 @@
 {
 	"templates": [],
-	"layoutTypes": [
-		"columns-2",
-		"record",
-		"list-row",
-		"list-row-expanded"
-	],
+	"layoutTypes": [],
 	"classes": []
 }

client/res/layout-types/columns-2.tpl

@@ -1,4 +1,3 @@
-
 <% _.each(layout, function (row, rowNumber) { %>
     <div class="col-sm-6">
     <% _.each(row, function (defs, key) { %>

client/res/layout-types/default.tpl

@@ -1,4 +1,3 @@
-
 <% _.each(layout, function (defs, key) {
         var tag = 'tag' in defs ? defs.tag : 'div';
         print( '<' + tag);

client/res/layout-types/list-row-expanded.tpl

@@ -1,4 +1,3 @@
-
 <% if (layout.right) { %>
 <div class="pull-right right cell" data-name="buttons">
     {{{<%= layout.right.name %>}}}

client/res/layout-types/list-row.tpl

@@ -1,4 +1,3 @@
-
 <% _.each(layout, function (defs, key) { %>
     <%
         var width = null;

client/src/app.js

@@ -47,7 +47,6 @@ define(
     'models/preferences',
     'model-factory',
     'collection-factory',
-    'pre-loader',
     'controllers/base',
     'router',
     'date-time',
@@ -81,7 +80,6 @@ function (
     /** typeof module:models/preferences.Class */Preferences,
     /** typeof module:model-factory.Class */ModelFactory,
     /** typeof module:collection-factory.Class */CollectionFactory,
-    /** typeof module:pre-loader.Class */PreLoader,
     /** typeof module:controllers/base.Class */BaseController,
     /** typeof module:router.Class */Router,
     /** typeof module:date-time.Class */DateTime,
@@ -475,11 +473,7 @@ function (
                 this.initView();
                 this.initBaseController();
 
-                this.preLoader = new PreLoader(this.cache, this.viewFactory, this.basePath);
-
-                this.preLoad(() => {
-                    callback.call(this, this);
-                });
+                callback.call(this, this);
             });
         },
 
@@ -760,13 +754,6 @@ function (
             );
         },
 
-        /**
-         * @private
-         */
-        preLoad: function (callback) {
-            this.preLoader.load(callback, this);
-        },
-
         /**
          * @private
          */
@@ -890,6 +877,12 @@ function (
                             this.loader.require('res!' + path, callback);
                         },
                         layoutTemplate: (name, callback) => {
+                            if (Espo.layoutTemplates && name in Espo.layoutTemplates) {
+                                callback(Espo.layoutTemplates[name]);
+
+                                return;
+                            }
+
                             let path = getResourcePath('layoutTemplate', name);
 
                             this.loader.require('res!' + path, callback);

client/src/pre-loader.js

@@ -31,6 +31,8 @@ define('pre-loader', [], function () {
     /**
      * A pre-loader.
      *
+     * Not used. Maybe utilize for post-loading additional resources in idle, after the page is fully rendered.
+     *
      * @class
      * @name Class
      * @memberOf module:pre-loader

js/diff.js

@@ -289,11 +289,12 @@ class Diff
                 fileList.push(`client/lib/espo-${i}.min.js.map`);
             }
 
+            fileList.push('client/lib/espo-layout-templates.min.js');
+            fileList.push('client/lib/espo-layout-templates.min.js.map');
+
             fileList.push('client/lib/espo-templates.min.js');
             fileList.push('client/lib/espo-templates.min.js.map');
 
-            //fileList.push('client/lib/original/espo.js');
-
             fs.readdirSync('client/css/espo/').forEach(file => {
                 fileList.push('client/css/espo/' + file);
             });

js/layout-template-bundler.js

@@ -0,0 +1,60 @@
+/************************************************************************
+ * This file is part of EspoCRM.
+ *
+ * EspoCRM - Open Source CRM application.
+ * Copyright (C) 2014-2023 Yurii Kuznietsov, Taras Machyshyn, Oleksii Avramenko
+ * Website: https://www.espocrm.com
+ *
+ * EspoCRM is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * EspoCRM is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with EspoCRM. If not, see http://www.gnu.org/licenses/.
+ *
+ * The interactive user interfaces in modified source and object code versions
+ * of this program must display Appropriate Legal Notices, as required under
+ * Section 5 of the GNU General Public License version 3.
+ *
+ * In accordance with Section 7(b) of the GNU General Public License version 3,
+ * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
+ ************************************************************************/
+
+const fs = require('fs');
+const {globSync} = require('glob');
+
+class LayoutTemplateBundler {
+
+    /**
+     * @return {string}
+     */
+    bundle() {
+        let path = 'client/res/layout-types';
+
+        /** @var {string[]} */
+        let files = globSync(path + '/*.tpl')
+            .map(file => file.replaceAll('\\', '/'));
+
+        let map = {};
+
+        files.forEach(file => {
+            let name = file
+                .substring(path.length + 1)
+                .slice(0, -4);
+
+            map[name] = fs.readFileSync(file, 'utf8');
+        });
+
+        let mapPart = JSON.stringify(map);
+
+        return `\nEspo.layoutTemplates = ${mapPart};\n`;
+    }
+}
+
+module.exports = LayoutTemplateBundler;

js/scripts/prepare-lib-original.js

@@ -41,7 +41,10 @@ const originalLibCrmDir = './client/modules/crm/lib/original';
     .filter(path => !fs.existsSync(path))
     .forEach(path => fs.mkdirSync(path));
 
-let bundleFiles = ['espo-templates.js'];
+let bundleFiles = [
+    'espo-templates.js',
+    'espo-layout-templates.js',
+];
 
 for (let i = 0; i < bundleConfig.chunkNumber; i++) {
     bundleFiles.push(`espo-${i}.js`)