libs config

application/Espo/Core/Utils/ClientManager.php

@@ -54,6 +54,8 @@ class ClientManager
 
     private const LIBS_FILE = 'frontend/libs.json';
 
+    private $libsConfigPath = 'client/cfg/libs.json';
+
     public function __construct(
         Config $config,
         ThemeManager $themeManager,
@@ -178,6 +180,7 @@ class ClientManager
             'favicon196Path' => $favicon196Path,
             'faviconPath' => $faviconPath,
             'ajaxTimeout' => $this->config->get('ajaxTimeout') ?? 60000,
+            'libsConfigPath' => $this->libsConfigPath,
         ];
 
         $html = $this->fileManager->getContents($htmlFilePath);

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

@@ -43,14 +43,6 @@
         "exportsTo": "window",
         "exportsAs": "GridStack"
     },
-    "marked": {
-        "exportsTo": "window",
-        "exportsAs": "marked"
-    },
-    "dompurify": {
-        "exportsTo": "window",
-        "exportsAs": "DOMPurify"
-    },
     "Colorpicker": {
         "path": "client/lib/bootstrap-colorpicker.js",
         "devPath": "node_modules/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.js",

client/cfg/libs.json

@@ -0,0 +1,34 @@
+{
+    "espo": {
+        "exportsTo": "window",
+        "exportsAs": "Espo"
+    },
+    "jquery": {
+        "exportsTo": "window",
+        "exportsAs": "$"
+    },
+    "backbone": {
+        "exportsTo": "window",
+        "exportsAs": "Backbone"
+    },
+    "bullbone": {
+        "exportsTo": "window",
+        "exportsAs": "Bull"
+    },
+    "handlebars": {
+        "exportsTo": "window",
+        "exportsAs": "Handlebars"
+    },
+    "underscore": {
+        "exportsTo": "window",
+        "exportsAs": "_"
+    },
+    "marked": {
+        "exportsTo": "window",
+        "exportsAs": "marked"
+    },
+    "dompurify": {
+        "exportsTo": "window",
+        "exportsAs": "DOMPurify"
+    }
+}

client/src/app.js

@@ -29,6 +29,10 @@
 define(
     'app',
     [
+        'lib!espo',
+        'lib!jquery',
+        'lib!backbone',
+        'lib!underscore',
         'ui',
         'utils',
         'acl-manager',
@@ -56,6 +60,10 @@ define(
         'page-title',
     ],
     function (
+        Espo,
+        $,
+        Backbone,
+        _,
         Ui,
         Utils,
         AclManager,
@@ -83,7 +91,7 @@ define(
         PageTitle
     ) {
 
-    var App = function (options, callback) {
+    let App = function (options, callback) {
         options = options || {};
 
         this.id = options.id || 'espocrm-application-id';
@@ -194,19 +202,16 @@ define(
 
             this.loader = Espo.loader;
 
-            this.loader.responseCache = this.responseCache;
+            this.loader.setCache(this.cache);
+            this.loader.setResponseCache(this.responseCache);
 
-            this.loader.basePath = this.basePath;
+            if (this.useCache && !this.loader.getCacheTimestamp() && options.cacheTimestamp) {
+                this.loader.setCacheTimestamp(options.cacheTimestamp);
+            }
 
             this.storage = new Storage();
             this.sessionStorage = new SessionStorage();
 
-            this.loader.cache = this.cache;
-
-            if (this.useCache && !this.loader.cacheTimestamp && options.cacheTimestamp) {
-                this.loader.cacheTimestamp = options.cacheTimestamp;
-            }
-
             this.setupAjax();
 
             this.settings = new Settings(null);

client/src/loader.js

@@ -32,17 +32,16 @@ var Espo = Espo || {classMap: {}};
 
     let root = this;
 
-    Espo.Loader = function (cache, cacheTimestamp) {
-        this.basePath = $('script[data-base-path]').data('basePath') || '';
-
+    Espo.Loader = function (cache, _cacheTimestamp) {
+        this._cacheTimestamp = _cacheTimestamp || null;
         this._cache = cache || null;
-        this._cacheTimestamp = cacheTimestamp || null;
         this._libsConfig = {};
         this._loadCallbacks = {};
         this._pathsBeingLoaded = {};
         this._dataLoaded = {};
         this._loadingSubject = null;
         this._responseCache = null;
+        this._basePath = '';
 
         this.isDeveloperMode = false;
     };
@@ -51,6 +50,32 @@ var Espo = Espo || {classMap: {}};
 
         _classMap: Espo,
 
+        loadLibsConfig: function (path) {
+            return fetch(this._basePath + path + '?t=' + this._cacheTimestamp)
+                .then(response => response.json())
+                .then(data => this.addLibsConfig(data));
+        },
+
+        setBasePath: function (basePath) {
+            this._basePath = basePath;
+        },
+
+        getCacheTimestamp: function () {
+            return this._cacheTimestamp;
+        },
+
+        setCacheTimestamp: function (cacheTimestamp) {
+            this._cacheTimestamp = cacheTimestamp;
+        },
+
+        setCache: function (cache) {
+            this._cache = cache;
+        },
+
+        setResponseCache: function (responseCache) {
+            this._responseCache = responseCache;
+        },
+
         _getClass: function (name) {
             if (name in this._classMap) {
                 return this._classMap[name];
@@ -347,7 +372,7 @@ var Espo = Espo || {classMap: {}};
                 path += sep + 'r=' + this._cacheTimestamp;
             }
 
-            var url = this.basePath + path;
+            var url = this._basePath + path;
 
             dto.path = path;
             dto.url = url;
@@ -536,7 +561,7 @@ var Espo = Espo || {classMap: {}};
             }
 
             $.ajax({
-                url: this.basePath + url,
+                url: this._basePath + url,
                 type: 'GET',
                 dataType: 'script',
                 local: true,

client/src/view-helper.js

@@ -26,7 +26,7 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('view-helper', [/*'lib!marked', 'lib!dompurify'*/], function (/*marked, DOMPurify*/) {
+define('view-helper', ['lib!marked', 'lib!dompurify'], function (marked, DOMPurify) {
 
     let ViewHelper = function () {
         this._registerHandlebarsHelpers();

html/main.html

@@ -17,8 +17,12 @@
         <link rel="shortcut icon" href="{{basePath}}{{faviconPath}}" type="image/x-icon">
         <script type="text/javascript">
             $(() => {
-                Espo.loader.cacheTimestamp = {{loaderCacheTimestamp}};
+                Espo.loader.setCacheTimestamp({{loaderCacheTimestamp}});
+                Espo.loader.setBasePath('{{basePath}}');
 
+                Espo.loader
+                    .loadLibsConfig('{{libsConfigPath}}')
+                    .then(() =>
                         require('{{appClientClassName}}', App => {
                             new App({
                                 id: '{{applicationId}}',
@@ -30,7 +34,8 @@
                             }, app => {
                                 {{runScript}}
                             });
-                });
+                        })
+                    );
             });
         </script>
     </head>