feat(conditionalIntl): added env var for Itnl

__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_POLYFILL',
   ].forEach((name) => {
     origEnvVarVals[name] = process.env[name];
   });
@@ -547,4 +548,20 @@ describe('runTime', () => {
       expect(otelServiceName.defaultValue).toBe('One App');
     });
   });
+
+  describe('ONE_CONFIG_USE_NATIVE_POLYFILL', () => {
+    const useNativePolyfill = getEnvVarConfig('ONE_CONFIG_USE_NATIVE_POLYFILL');
+
+    it('should have a default value of false', () => {
+      expect(useNativePolyfill.defaultValue).toBe('false');
+    });
+
+    it('should normalise the value to false when not explicitly true', () => {
+      expect(useNativePolyfill.normalize('Value')).toBe('false');
+      expect(useNativePolyfill.normalize('VALUE')).toBe('false');
+      expect(useNativePolyfill.normalize('true')).toBe('true');
+      expect(useNativePolyfill.normalize('TRUE')).toBe('true');
+      expect(useNativePolyfill.normalize('FALSE')).toBe('false');
+    });
+  });
 });

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

@@ -23,6 +23,7 @@ import reactHtml, {
   renderModuleScripts,
   renderExternalFallbacks,
   checkStateForRedirectAndStatusCode,
+  renderUseNativeIntlPolyfill,
 } from '../../../../src/server/plugins/reactHtml';
 // _client is a method to control the mock
 // eslint-disable-next-line import/named
@@ -1262,4 +1263,19 @@ describe('reactHtml', () => {
       expect(reply.send.mock.calls[0][0]).toContain('<title>One App</title>');
     });
   });
+
+  describe('renderUseNativePolyfill', () => {
+    it('should not add the polyfill script if there is no environment variable', () => {
+      expect(renderUseNativeIntlPolyfill('')).toMatchInlineSnapshot('""');
+    });
+
+    it('should add the polyfill script if there is the environment variable and it is true', () => {
+      process.env.ONE_CONFIG_USE_NATIVE_POLYFILL = 'true';
+      expect(renderUseNativeIntlPolyfill('')).toMatchInlineSnapshot(`
+        "<script id="environment-variables" >
+                window.useNativePolyfill = '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_POLYFILL`](#one_config_use_native_polyfill)
 * 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_POLYFILL`](#one_config_use_native_polyfill)
 * 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_POLYFILL`](#one_config_use_native_polyfill)
   * [`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_POLYFILL`
+**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_POLYFILL=Boolean
+```
+**Example**
+```bash
+ONE_CONFIG_USE_NATIVE_POLYFILL=true
+```
+**Default Value**
+```bash
+ONE_CONFIG_USE_NATIVE_POLYFILL=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

src/client/polyfill/Intl.js

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

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_POLYFILL',
+    defaultValue: 'false',
+    normalize: (input) => {
+      if (input?.toLowerCase() === 'true') {
+        return 'true';
+      }
+      return 'false';
+    },
+  },
   {
     name: 'ONE_REFERRER_POLICY_OVERRIDE',
     defaultValue: () => '',

src/server/plugins/reactHtml/index.jsx

@@ -236,6 +236,12 @@ export function getHead({
   `;
 }
 
+export function renderUseNativeIntlPolyfill(nonce) {
+  return process.env.ONE_CONFIG_USE_NATIVE_POLYFILL === 'true' ? `<script id="environment-variables" ${nonce}>
+        window.useNativePolyfill = 'true'
+       </script>` : '';
+}
+
 export function getBody({
   isLegacy,
   helmetInfo,
@@ -253,13 +259,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 +275,7 @@ export function getBody({
         window.__render_mode__ = '${renderMode}';
         window.__HOLOCRON_EXTERNALS__ = ${jsonStringifyForScript(getRequiredExternalsRegistry())};
       </script>
+      ${renderUseNativeIntlPolyfill(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_POLYFILL) {
+  global.Intl = Intl;
+}