Improve usage of config and i18n #7972

modules/app/src/main/resources/admin/tools/main/main.html

@@ -39,7 +39,8 @@
 <!-- App javascript -->
 <script type="text/javascript" src="{{assetsUri}}/lib/ckeditor.js" data-asset-url="{{assetsUri}}"></script>
 <script type="text/javascript" src="{{assetsUri}}/js/vendors.main~editor.js"></script>
-<script type="text/javascript" src="{{assetsUri}}/js/main.js" data-config-service-url="{{configServiceUrl}}"></script>
+<script type="application/json" id="{{configScriptId}}">{{{configAsJson}}}</script>
+<script type="text/javascript" src="{{assetsUri}}/js/main.js" data-config-script-id="{{configScriptId}}"></script>
 
 {{#isBrowseMode}}
 <!-- Append the launcher -->

modules/app/src/main/resources/admin/tools/main/main.js

@@ -4,6 +4,7 @@ const admin = require('/lib/xp/admin');
 const mustache = require('/lib/mustache');
 const portal = require('/lib/xp/portal');
 const i18n = require('/lib/xp/i18n');
+const configLib = require('/lib/config');
 
 exports.renderTemplate = function (path, params) {
  const view = resolve('./main.html');
@@ -45,10 +46,8 @@ exports.getParams = function () {
  locale: admin.getLocales()
  }),
  launcherPath: admin.getLauncherPath(),
- configServiceUrl: portal.apiUrl({
- application: app.name,
- api: 'config',
- }),
+ configScriptId: configLib.generateScriptConfigId(),
+ configAsJson: JSON.stringify(configLib.getConfig(), null, 4).replace(/<(\/?script|!--)/gi, "\\u003C$1"),
  toolBaseUrl: toolUrlBase,
  toolAppName: app.name,
  }

modules/app/src/main/resources/admin/tools/main/main.xml

@@ -8,15 +8,12 @@
  <apis>
  <api>chartdata</api>
  <api>collaboration</api>
- <api>config</api>
  <api>content</api>
  <api>export</api>
- <api>i18n</api>
  <api>license</api>
  <api>styles</api>
  <api>com.enonic.xp.app.main:launcher</api>
  <api>com.enonic.xp.app.main:i18n</api>
  <api>admin:widget</api>
- <api>com.enonic.app.contentstudio.plus:i18n</api>
  </apis>
 </tool>

modules/app/src/main/resources/admin/widgets/settings/settings.html

@@ -1,3 +1,4 @@
 <widget id="widget-settings">
- <script src="{{assetsUri}}" data-config-service-url="{{configServiceUrl}}" data-widget-id="widget-settings"></script>
+ <script type="application/json" id="{{configScriptId}}">{{{configAsJson}}}</script>
+ <script src="{{assetsUri}}" data-config-script-id="{{configScriptId}}" data-widget-id="widget-settings"></script>
 </widget>

modules/app/src/main/resources/admin/widgets/settings/settings.js

@@ -2,17 +2,16 @@
 
 const portal = require('/lib/xp/portal');
 const mustache = require('/lib/mustache');
+const configLib = require('../../../lib/config');
 
 function handleGet() {
  const view = resolve('./settings.html');
  const params = {
  assetsUri: portal.assetUrl({
  path: 'js/settings.js'
  }),
- configServiceUrl: portal.apiUrl({
- application: app.name,
- api: 'config',
- }),
+ configScriptId: configLib.generateScriptConfigId(),
+ configAsJson: JSON.stringify(configLib.getConfig(), null, 4).replace(/<(\/?script|!--)/gi, "\\u003C$1"),
  };
 
  return {

modules/app/src/main/resources/assets/js/main.ts

@@ -22,7 +22,6 @@ import {ConnectionDetector} from '@enonic/lib-admin-ui/system/ConnectionDetector
 import {AppHelper} from '@enonic/lib-admin-ui/util/AppHelper';
 import {CONFIG} from '@enonic/lib-admin-ui/util/Config';
 import {i18n} from '@enonic/lib-admin-ui/util/Messages';
-import {i18nInit} from '@enonic/lib-admin-ui/util/MessagesInitializer';
 import * as $ from 'jquery';
 import {AppContext} from 'lib-contentstudio/app/AppContext';
 import {ContentDeletePromptEvent} from 'lib-contentstudio/app/browse/ContentDeletePromptEvent';
@@ -65,6 +64,8 @@ import {UrlAction} from 'lib-contentstudio/app/UrlAction';
 import {ContentAppHelper} from 'lib-contentstudio/app/wizard/ContentAppHelper';
 import {ContentWizardPanelParams} from 'lib-contentstudio/app/wizard/ContentWizardPanelParams';
 import * as Q from 'q';
+import {JSONObject} from '@enonic/lib-admin-ui/types';
+import {Messages} from '@enonic/lib-admin-ui/util/Messages';
 
 // Dynamically import and execute all input types, since they are used
 // on-demand, when parsing XML schemas and has not real usage in app
@@ -634,19 +635,17 @@ function initProjectContext(application: Application): Q.Promise<void> {
  });
 }
 
-(async () => {
+(() => {
  if (!document.currentScript) {
  throw Error('Legacy browsers are not supported');
  }
- const configServiceUrl = document.currentScript.getAttribute('data-config-service-url');
- if (!configServiceUrl) {
+ const configScriptId = document.currentScript.getAttribute('data-config-script-id');
+ if (!configScriptId) {
  throw Error('Unable to fetch app config');
  }
 
- await CONFIG.init(configServiceUrl);
-
- // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
- await i18nInit(CONFIG.getString('services.i18nUrl'));
+ CONFIG.setConfig(JSON.parse(document.getElementById(configScriptId).innerText) as JSONObject);
+ Messages.addMessages(JSON.parse(CONFIG.getString('phrasesAsJson')) as object);
 
  const body = Body.get();
 

modules/app/src/main/resources/assets/js/settings.ts

@@ -4,7 +4,7 @@ import {ElementEvent} from '@enonic/lib-admin-ui/dom/ElementEvent';
 import {SettingsAppContainer} from 'lib-contentstudio/app/settings/SettingsAppContainer';
 import {CONFIG} from '@enonic/lib-admin-ui/util/Config';
 import {ProjectConfigContext} from 'lib-contentstudio/app/settings/data/project/ProjectConfigContext';
-import * as Q from 'q';
+import {JSONObject} from '@enonic/lib-admin-ui/types';
 
 const waitForWidgetElemAttached = (elemId: string): void => {
  const body: Body = Body.get();
@@ -24,8 +24,8 @@ const appendHtml = (widgetElem: Element): void => {
  widgetElem.appendChild(c);
 };
 
-const init = async (configUri: string, elemId: string): Promise<void> => {
- await CONFIG.init(configUri);
+const init = async (configScriptId: string, elemId: string): Promise<void> => {
+ CONFIG.setConfig(JSON.parse(document.getElementById(configScriptId).innerText) as JSONObject);
  await ProjectConfigContext.get().init();
 
  const body: Body = Body.get();
@@ -43,12 +43,12 @@ void (async (currentScript: HTMLOrSVGScriptElement) => {
  throw Error('Legacy browsers are not supported');
  }
 
- const configUri: string = currentScript.getAttribute('data-config-service-url');
+ const configScriptId: string = currentScript.getAttribute('data-config-script-id');
  const elemId: string = currentScript.getAttribute('data-widget-id');
 
- if (!configUri || !elemId) {
+ if (!configScriptId || !elemId) {
  throw Error('Missing attributes on inject script');
  }
 
- await init(configUri, elemId);
+ await init(configScriptId, elemId);
 })(document.currentScript);

modules/app/src/main/resources/lib/config.js

@@ -0,0 +1,92 @@
+/*global app, resolve*/
+
+const admin = require('/lib/xp/admin');
+const portal = require('/lib/xp/portal');
+const contextLib = require('/lib/xp/context');
+const i18n = require('/lib/xp/i18n');
+
+function getPhrases() {
+ const locales = admin.getLocales();
+ const phrases = {};
+ const bundles = ['i18n/common', 'i18n/common_wcag', 'i18n/phrases', 'i18n/dialogs', 'i18n/wcag', 'i18n/page-editor'];
+
+ bundles.forEach(function (bundle) {
+ const bundlePhrases = i18n.getPhrases(locales, [bundle]);
+ for (const key in bundlePhrases) {
+ if (Object.prototype.hasOwnProperty.call(bundlePhrases, key)) {
+ phrases[key] = bundlePhrases[key];
+ }
+ }
+ });
+
+ return phrases;
+}
+
+function getConfig() {
+ const context = contextLib.get();
+ const branch = context.branch;
+ const allowContentUpdate = app.config['publishingWizard.allowContentUpdate'] !== 'false';
+ const excludeDependencies = app.config['publishingWizard.excludeDependencies'] === 'true' || false;
+ const allowPathTransliteration = app.config['contentWizard.allowPathTransliteration'] !== 'false';
+ const enableCollaboration = app.config['contentWizard.enableCollaboration'] !== 'false';
+ const defaultPublishFromTime = parseTime(app.config['publishingWizard.defaultPublishFromTime']);
+ const toolUri = admin.getToolUrl(
+ app.name,
+ 'main'
+ );
+ return {
+ allowContentUpdate,
+ excludeDependencies,
+ allowPathTransliteration,
+ adminUrl: admin.getBaseUri(),
+ assetsUri: portal.assetUrl({
+ path: ''
+ }),
+ toolUri: toolUri,
+ appId: app.name,
+ appVersion: app.version,
+ branch,
+ enableCollaboration,
+ defaultPublishFromTime,
+ locale: admin.getLocale(),
+ services: {
+ contentUrl: portal.apiUrl({
+ api: 'content',
+ }),
+ licenseUrl: portal.apiUrl({
+ api: 'license',
+ }),
+ stylesUrl: portal.apiUrl({
+ api: 'styles',
+ }),
+ collaborationUrl: portal.apiUrl({
+ api: 'collaboration',
+ }),
+ exportServiceUrl: portal.apiUrl({
+ api: 'export',
+ }),
+ },
+ theme: 'light',
+ /* Remove in CS/lib-admin-ui 5.0 */
+ launcher: {
+ theme: 'light'
+ },
+ widgetApiUrl: portal.apiUrl({
+ application: 'admin',
+ api: 'widget',
+ }),
+ phrasesAsJson: JSON.stringify(getPhrases()),
+ };
+}
+
+function parseTime(value) {
+ const timeRegex = /^(0[0-9]|1[0-9]|2[0-3]):([0-5][0-9])$/;
+ return timeRegex.test(value) ? value : null;
+}
+
+function generateScriptConfigId() {
+ return Math.random().toString(36).substring(2, 15);
+}
+
+exports.getConfig = getConfig;
+exports.generateScriptConfigId = generateScriptConfigId;