feat(conditionalIntl): added env var for Itnl

__tests__/client/prerender.spec.js

@@ -128,6 +128,17 @@ describe('loadPrerenderScripts', () => {
       expect(getLocalePack).not.toHaveBeenCalled();
     })
   );
+
+  it('should still resolve if useNativeIntl is set to true but not call getLocalePack', async () => {
+    window.useNativeIntl = true;
+    const { getLocalePack } = require('@americanexpress/one-app-ducks');
+    const initialState = fromJS({ intl: { activeLocale: 'es-ES' } });
+    getLocalePack.mockClear();
+
+    await loadPrerenderScripts(initialState);
+
+    expect(getLocalePack).not.toHaveBeenCalled();
+  });
 });
 
 describe('moveHelmetScripts', () => {

__tests__/server/config/env/runTime.spec.js

@@ -100,6 +100,7 @@ describe('runTime', () => {
     'ONE_CLIENT_ROOT_MODULE_NAME',
     'ONE_ENABLE_POST_TO_MODULE_ROUTES',
     'ONE_MAX_POST_REQUEST_PAYLOAD',
+    'ONE_CONFIG_USE_NATIVE_INTL',
   ].forEach((name) => {
     origEnvVarVals[name] = process.env[name];
   });
@@ -547,4 +548,20 @@ describe('runTime', () => {
       expect(otelServiceName.defaultValue).toBe('One App');
     });
   });
+
+  describe('ONE_CONFIG_USE_NATIVE_INTL', () => {
+    const useNativeIntl = getEnvVarConfig('ONE_CONFIG_USE_NATIVE_INTL');
+
+    it('should have a default value of false', () => {
+      expect(useNativeIntl.defaultValue).toBe('false');
+    });
+
+    it('should normalise the value to false when not explicitly true', () => {
+      expect(useNativeIntl.normalize('Value')).toBe('false');
+      expect(useNativeIntl.normalize('VALUE')).toBe('false');
+      expect(useNativeIntl.normalize('true')).toBe('true');
+      expect(useNativeIntl.normalize('TRUE')).toBe('true');
+      expect(useNativeIntl.normalize('FALSE')).toBe('false');
+    });
+  });
 });

__tests__/server/plugins/reactHtml/index.spec.jsx

@@ -23,6 +23,7 @@ import reactHtml, {
   renderModuleScripts,
   renderExternalFallbacks,
   checkStateForRedirectAndStatusCode,
+  renderEnvironmentVariables,
 } from '../../../../src/server/plugins/reactHtml';
 // _client is a method to control the mock
 // eslint-disable-next-line import/named
@@ -283,6 +284,8 @@ describe('reactHtml', () => {
       cdnUrl: '/cdnUrl/',
       rootModuleName: 'test-root',
     }));
+
+    process.env.ONE_CONFIG_USE_NATIVE_INTL = 'false';
   });
 
   function removeInitialState(body) {
@@ -430,6 +433,15 @@ describe('reactHtml', () => {
       expect(reply.send.mock.calls[0][0]).not.toContain('src="/cdnUrl/app/1.2.3-rc.4-abc123/i18n/');
     });
 
+    it('sends a rendered page without the locale data script tag when te ONE_CONFIG_USE_NATIVE_INTL environment variable is true', () => {
+      process.env.ONE_CONFIG_USE_NATIVE_INTL = 'true';
+      setFullMap();
+      sendHtml(request, reply);
+
+      expect(reply.send).toHaveBeenCalledTimes(1);
+      expect(reply.send.mock.calls[0][0]).not.toContain('src="/cdnUrl/app/1.2.3-rc.4-abc123/i18n/');
+    });
+
     it('sends a rendered page with the module styles and scripts', () => {
       sendHtml(request, reply);
       expect(reply.send).toHaveBeenCalledTimes(1);
@@ -1262,4 +1274,23 @@ describe('reactHtml', () => {
       expect(reply.send.mock.calls[0][0]).toContain('<title>One App</title>');
     });
   });
+
+  describe('renderEnvironmentVariables', () => {
+    it('should set useNativeIntl to false if the environment variable is not true', () => {
+      expect(renderEnvironmentVariables('')).toMatchInlineSnapshot(`
+        "<script id="environment-variables" >
+                window.useNativeIntl = false
+               </script>"
+      `);
+    });
+
+    it('should set  useNativeIntl to true is the environment variable is true', () => {
+      process.env.ONE_CONFIG_USE_NATIVE_INTL = 'true';
+      expect(renderEnvironmentVariables('')).toMatchInlineSnapshot(`
+        "<script id="environment-variables" >
+                window.useNativeIntl = true
+               </script>"
+      `);
+    });
+  });
 });

docs/api/server/Environment-Variables.md

@@ -29,13 +29,15 @@ One App can be configured via Environment Variables:
   * [`ONE_CLIENT_ROOT_MODULE_NAME`](#one_client_root_module_name) ⚠️
   * [`ONE_CLIENT_CDN_URL`](#one_client_cdn_url) ⚠️
   * [`ONE_CONFIG_ENV`](#one_config_env) ⚠️
+  * [`ONE_CONFIG_USE_NATIVE_INTL`](#one_config_use_native_intl)
 * Running in Development
   * [`NODE_ENV`](#node_env) ⚠️
   * [`ONE_CLIENT_ROOT_MODULE_NAME`](#one_client_root_module_name) ⚠️
   * [`ONE_CONFIG_ENV`](#one_config_env) ⚠️
   * [`ONE_DANGEROUSLY_ACCEPT_BREAKING_EXTERNALS`](#ONE_DANGEROUSLY_ACCEPT_BREAKING_EXTERNALS)
   * [`ONE_CSP_ALLOW_INLINE_SCRIPTS`](#ONE_CSP_ALLOW_INLINE_SCRIPTS)
   * [`ONE_DANGEROUSLY_DISABLE_CSP`](#ONE_DANGEROUSLY_DISABLE_CSP)
+  * [`ONE_CONFIG_USE_NATIVE_INTL`](#one_config_use_native_intl)
 * Server Settings
   * [`HOLOCRON_SERVER_MAX_MODULES_RETRY`](#holocron_server_max_modules_retry)
   * [`HOLOCRON_SERVER_MAX_SIM_MODULES_FETCH`](#holocron_server_max_sim_modules_fetch)
@@ -74,6 +76,7 @@ One App can be configured via Environment Variables:
   * [`ONE_CLIENT_REPORTING_URL`](#one_client_reporting_url) ⚠️
   * [`ONE_CLIENT_ROOT_MODULE_NAME`](#one_client_root_module_name) ⚠️
   * [`ONE_CONFIG_ENV`](#one_config_env) ⚠️
+  * [`ONE_CONFIG_USE_NATIVE_INTL`](#one_config_use_native_intl)
   * [`ONE_ENABLE_POST_TO_MODULE_ROUTES`](#one_enable_post_to_module_routes)
   * [`ONE_MAP_POLLING_MAX`](#one_map_polling_max)
   * [`ONE_MAP_POLLING_MIN`](#one_map_polling_min)
@@ -524,6 +527,27 @@ ONE_CONFIG_ENV=staging
 ONE_CONFIG_ENV=undefined
 ```
 
+## `ONE_CONFIG_USE_NATIVE_INTL`
+**Runs In**
+* ✅ Production
+* ✅ Development
+
+Feature flag to disable lean-intl polyfill. 
+This allows you to use modern intl features such as timezones, but will result in your application supporting fewer older browsers.
+
+**Shape**
+```bash
+ONE_CONFIG_USE_NATIVE_INTL=Boolean
+```
+**Example**
+```bash
+ONE_CONFIG_USE_NATIVE_INTL=true
+```
+**Default Value**
+```bash
+ONE_CONFIG_USE_NATIVE_INTL=false
+```
+
 ## `ONE_DANGEROUSLY_ACCEPT_BREAKING_EXTERNALS`
 
 **Runs In**
@@ -824,4 +848,4 @@ OTEL_RESOURCE_ATTRIBUTES="foo=bar;baz=qux"
 [`HTTPS_PRIVATE_KEY_PASS_FILE_PATH`]: #https_private_key_pass_file_path
 [`HTTPS_PORT`]: #https_port
 [OTel Environment Variable Specification]: https://opentelemetry.io/docs/specs/otel/configuration/sdk-environment-variables/
-[OTel Resource SDK documentation]: https://opentelemetry.io/docs/specs/otel/resource/sdk/#specifying-resource-information-via-an-environment-variable
+[OTel Resource SDK documentation]: https://opentelemetry.io/docs/specs/otel/resource/sdk/#specifying-resource-information-via-an-environment-variable

package.json

@@ -82,7 +82,7 @@
     "@americanexpress/env-config-utils": "^2.0.4",
     "@americanexpress/fetch-enhancers": "^1.1.5",
     "@americanexpress/one-app-bundler": "^6.21.1",
-    "@americanexpress/one-app-ducks": "^4.4.2",
+    "@americanexpress/one-app-ducks": "^4.5.0",
     "@americanexpress/one-app-router": "^1.2.1",
     "@americanexpress/vitruvius": "^3.0.1",
     "@fastify/compress": "^6.4.0",

src/client/polyfill/Intl.js

@@ -19,5 +19,7 @@
 
 import Intl from 'lean-intl';
 
-global.Intl = Intl;
-global.IntlPolyfill = Intl;
+if (!(window && window.useNativeIntl)) {
+  global.Intl = Intl;
+  global.IntlPolyfill = Intl;
+}

src/client/prerender.js

@@ -41,7 +41,7 @@ export function initializeClientStore() {
 
 export function loadPrerenderScripts(initialState) {
   const locale = initialState && initialState.getIn(['intl', 'activeLocale']);
-  return locale ? getLocalePack(locale) : Promise.resolve();
+  return locale && !window?.useNativeIntl ? getLocalePack(locale) : Promise.resolve();
 }
 
 export function moveHelmetScripts() {

src/server/config/env/runTime.js

@@ -186,6 +186,16 @@ const runTime = [
     validate: (value) => { if (!value) { throw new Error('The `ONE_CLIENT_ROOT_MODULE_NAME` environment variable must be defined.'); } },
     defaultValue: () => (process.env.NODE_ENV === 'development' ? argv.rootModuleName : undefined),
   },
+  {
+    name: 'ONE_CONFIG_USE_NATIVE_INTL',
+    defaultValue: 'false',
+    normalize: (input) => {
+      if (input?.toLowerCase() === 'true') {
+        return 'true';
+      }
+      return 'false';
+    },
+  },
   {
     name: 'ONE_REFERRER_POLICY_OVERRIDE',
     defaultValue: () => '',

src/server/plugins/reactHtml/index.jsx

@@ -65,6 +65,10 @@ const legacyBrowserChunkAssets = getChunkAssets(readJsonFile('../../../.build-me
   .map((chunkAsset) => `legacy/${chunkAsset}`);
 
 function renderI18nScript(clientInitialState, appBundlesURLPrefix) {
+  if (process.env.ONE_CONFIG_USE_NATIVE_INTL === 'true') {
+    return '';
+  }
+
   const i18nFile = getI18nFileFromState(clientInitialState);
   if (!i18nFile) {
     return '';
@@ -236,6 +240,12 @@ export function getHead({
   `;
 }
 
+export function renderEnvironmentVariables(nonce) {
+  return `<script id="environment-variables" ${nonce}>
+        window.useNativeIntl = ${process.env.ONE_CONFIG_USE_NATIVE_INTL === 'true'}
+       </script>`;
+}
+
 export function getBody({
   isLegacy,
   helmetInfo,
@@ -253,13 +263,14 @@ export function getBody({
   const bundle = isLegacy ? 'legacyBrowser' : 'browser';
   const { bodyAttributes, script } = helmetInfo;
   const bundlePrefixForBrowser = isLegacy ? `${appBundlesURLPrefix}/legacy` : appBundlesURLPrefix;
+  const nonce = scriptNonce ? `nonce="${scriptNonce}"` : '';
   return `
     <body${(bodyAttributes && ` ${bodyAttributes.toString()}`) || ''}>
       <div id="root">${appHtml || ''}</div>
       ${disableScripts
     ? ''
     : `
-      <script id="initial-state" ${scriptNonce ? `nonce="${scriptNonce}"` : ''}>
+      <script id="initial-state" ${nonce}>
         window.__webpack_public_path__ = ${jsonStringifyForScript(`${appBundlesURLPrefix}/`)};
         window.__CLIENT_HOLOCRON_MODULE_MAP__ = ${jsonStringifyForScript(clientModuleMapCache[bundle])};
         window.__INITIAL_STATE__ = ${jsonStringifyForScript(serializeClientInitialState(clientInitialState, request))};
@@ -268,6 +279,7 @@ export function getBody({
         window.__render_mode__ = '${renderMode}';
         window.__HOLOCRON_EXTERNALS__ = ${jsonStringifyForScript(getRequiredExternalsRegistry())};
       </script>
+      ${renderEnvironmentVariables(nonce)}
       ${assets}
       ${renderI18nScript(clientInitialState, bundlePrefixForBrowser)}
       ${renderExternalFallbacks({

src/server/polyfill/intl.js

@@ -14,4 +14,8 @@
  * permissions and limitations under the License.
  */
 
-global.Intl = require('lean-intl');
+import Intl from 'lean-intl';
+
+if (process.env.ONE_CONFIG_USE_NATIVE_INTL !== 'true') {
+  global.Intl = Intl;
+}