WS-2769 - Update Inline JS: NextJs

src/app/lib/utilities/removeNoJsClass/index.test.js

@@ -0,0 +1,23 @@
+import removeNoJsClass from '.';
+
+describe('removeNoJsClass', () => {
+  afterEach(() => {
+    document.documentElement.className = '';
+  });
+
+  it('removes the no-js class from the document element', () => {
+    document.documentElement.classList.add('no-js');
+
+    removeNoJsClass();
+
+    expect(document.documentElement.classList.contains('no-js')).toBe(false);
+  });
+
+  it('keeps other classes on the document element', () => {
+    document.documentElement.classList.add('no-js', 'other-class');
+
+    removeNoJsClass();
+
+    expect(document.documentElement.className).toBe('other-class');
+  });
+});

src/app/lib/utilities/removeNoJsClass/index.tsx

@@ -0,0 +1,5 @@
+function removeNoJsClass() {
+  document.documentElement.classList.remove('no-js');
+}
+
+export default removeNoJsClass;

src/app/lib/utilities/setSimorghEnvVars/index.test.tsx

@@ -0,0 +1,22 @@
+import { getProcessEnvAppVariables } from '../getEnvConfig';
+import setSimorghEnvVars from '.';
+
+describe('setSimorghEnvVars', () => {
+  const originalEnvVars = window.SIMORGH_ENV_VARS;
+
+  afterEach(() => {
+    window.SIMORGH_ENV_VARS = originalEnvVars;
+  });
+
+  it('sets the environment variables on the window object', () => {
+    const envVars = getProcessEnvAppVariables();
+
+    setSimorghEnvVars(envVars);
+
+    expect(window.SIMORGH_ENV_VARS).toBe(envVars);
+  });
+
+  it('is declared as a classic function for Opera Mini compatibility', () => {
+    expect(setSimorghEnvVars.toString()).toMatch(/^function /);
+  });
+});

src/app/lib/utilities/setSimorghEnvVars/index.tsx

@@ -0,0 +1,7 @@
+import type { EnvConfig } from '../getEnvConfig';
+
+function setSimorghEnvVars(envVars: EnvConfig) {
+  window.SIMORGH_ENV_VARS = envVars;
+}
+
+export default setSimorghEnvVars;

ws-nextjs-app/pages/_document.page.tsx

@@ -27,6 +27,8 @@ import addOperaMiniClassScript from '#app/lib/utilities/addOperaMiniClassScript'
 import handleServerLogging from '#utilities/handleServerLogging';
 import getAmpLiteCss from '#utilities/getAmpLiteCss';
 import optimiseCssPrefixes from '#utilities/optimiseCssPrefixes';
+import setSimorghEnvVars from '#app/lib/utilities/setSimorghEnvVars';
+import removeNoJsClass from '#app/lib/utilities/removeNoJsClass';
 import ComponentTracking from '../renderers/ComponentTracking';
 import ReverbTemplate from '../renderers/ReverbTemplate';
 import litePageTransforms from '../renderers/litePageTransforms';
@@ -168,12 +170,12 @@ export default class AppDocument extends Document<DocProps> {
               <script
                 type="text/javascript"
                 dangerouslySetInnerHTML={{
-                  __html: `document.documentElement.classList.remove("no-js");`,
+                  __html: `(${removeNoJsClass.toString()})()`,
                 }}
               />
               {addOperaMiniClassScript()}
               <Script strategy="beforeInteractive">
-                {`window.SIMORGH_ENV_VARS=${JSON.stringify(clientSideEnvVariables)}`}
+                {`(${setSimorghEnvVars.toString()})(${JSON.stringify(clientSideEnvVariables)})`}
               </Script>
               {pageType === 'live' && (
                 <script src="https://www.riddle.com/embed/build-embedjs/embedV2.js" />