f

Author: Nathan Booker

core/app/[locale]/layout.tsx

@@ -19,9 +19,9 @@ import { revalidate } from '~/client/revalidate-target';
 import { WebAnalyticsFragment } from '~/components/analytics/fragment';
 import { AnalyticsProvider } from '~/components/analytics/provider';
 import { ContainerQueryPolyfill } from '~/components/polyfills/container-query';
+import { FooterScripts, HeaderScripts, ScriptsFragment } from '~/components/scripts';
 import { routing } from '~/i18n/routing';
 import { getToastNotification } from '~/lib/server-toast';
-import { HeaderScripts, FooterScripts, ScriptsFragment } from '~/components/scripts';
 
 const RootLayoutMetadataQuery = graphql(
   `

core/components/scripts/index.tsx

@@ -1,2 +1,2 @@
 export { HeaderScripts, FooterScripts } from './scripts';
-export { ScriptsFragment } from './fragment';
+export { ScriptsFragment } from './fragment';

core/components/scripts/scripts.tsx

@@ -32,50 +32,75 @@ interface ScriptsProps {
   scripts: ScriptsData | null;
 }
 
+interface ScriptProps {
+  src?: string;
+  dangerouslySetInnerHTML?: {
+    __html: string;
+  };
+  strategy: 'afterInteractive' | 'lazyOnload';
+  integrity?: string;
+  id?: string;
+}
+
 /**
  * Shared component that renders BigCommerce scripts using Next.js Script component
+ * @param {ScriptRendererProps} props - The props for the script renderer
+ * @param {ScriptsData | null} props.scripts - The scripts data from GraphQL
+ * @param {'head' | 'footer'} props.location - Where to render the scripts
+ * @param {'afterInteractive' | 'lazyOnload'} props.strategy - The loading strategy
+ * @returns {JSX.Element | null} JSX element containing the rendered scripts
  */
 const ScriptRenderer = ({ scripts, location, strategy }: ScriptRendererProps) => {
   if (!scripts?.edges) return null;
 
   const scriptNodes = removeEdgesAndNodes(scripts);
-  const locationScripts = scriptNodes.filter((script) => script.location.toLowerCase() === location);
-  const filteredScripts = locationScripts.filter((script) => script.visibility === 'ALL_PAGES' || script.visibility === 'STOREFRONT');
+  const locationScripts = scriptNodes.filter(
+    (script) => script.location.toLowerCase() === location,
+  );
+  const filteredScripts = locationScripts.filter(
+    (script) => script.visibility === 'ALL_PAGES' || script.visibility === 'STOREFRONT',
+  );
 
   return (
     <>
       {filteredScripts.map((script) => {
-        const scriptProps: any = {};
-        
+        const scriptProps: ScriptProps = {
+          strategy,
+        };
+
         // Handle external scripts (SrcScript)
         if (script.__typename === 'SrcScript' && script.src) {
           scriptProps.src = script.src;
         }
-        
+
         // Handle inline scripts (InlineScript)
         if (script.__typename === 'InlineScript' && script.scriptTag) {
-          const scriptMatch = script.scriptTag.match(/<script[^>]*>([\s\S]*?)<\/script>/i);
-          if (scriptMatch && scriptMatch[1]) {
+          const scriptMatch = /<script[^>]*>([\s\S]*?)<\/script>/i.exec(script.scriptTag);
+
+          if (scriptMatch?.[1]) {
             scriptProps.dangerouslySetInnerHTML = {
               __html: scriptMatch[1],
             };
           }
         }
-        
-        // Set loading strategy
-        scriptProps.strategy = strategy;
-        
+
         // Add integrity hashes if provided
-        if (script.integrityHashes && script.integrityHashes.length > 0) {
+        if (script.integrityHashes.length > 0) {
           scriptProps.integrity = script.integrityHashes.map((hashObj) => hashObj.hash).join(' ');
         }
-        
+
         // Add id for better debugging
+        const entityId =
+          (script.entityId && typeof script.entityId === 'string') ||
+          typeof script.entityId === 'number'
+            ? String(script.entityId)
+            : `fallback-${Math.random().toString(36).substring(2, 11)}`;
+
         if (script.entityId) {
-          scriptProps.id = `bc-script-${script.entityId}`;
+          scriptProps.id = `bc-script-${entityId}`;
         }
 
-        return <Script key={String(script.entityId)} {...scriptProps} />;
+        return <Script key={`script-${entityId}`} {...scriptProps} />;
       })}
     </>
   );
@@ -84,15 +109,21 @@ const ScriptRenderer = ({ scripts, location, strategy }: ScriptRendererProps) =>
 /**
  * Renders scripts that should be placed in the <head> tag
  * Uses afterInteractive strategy for critical functionality
+ * @param {ScriptsProps} props - The props containing scripts data
+ * @param {ScriptsData | null} props.scripts - The scripts data from GraphQL
+ * @returns {JSX.Element | null} JSX element containing header scripts
  */
 export const HeaderScripts = ({ scripts }: ScriptsProps) => {
-  return <ScriptRenderer scripts={scripts} location="head" strategy="afterInteractive" />;
+  return <ScriptRenderer location="head" scripts={scripts} strategy="afterInteractive" />;
 };
 
 /**
  * Renders scripts that should be placed before the closing </body> tag
  * Uses lazyOnload strategy for better performance
+ * @param {ScriptsProps} props - The props containing scripts data
+ * @param {ScriptsData | null} props.scripts - The scripts data from GraphQL
+ * @returns {JSX.Element | null} JSX element containing footer scripts
  */
 export const FooterScripts = ({ scripts }: ScriptsProps) => {
-  return <ScriptRenderer scripts={scripts} location="footer" strategy="lazyOnload" />;
-}; 
+  return <ScriptRenderer location="footer" scripts={scripts} strategy="lazyOnload" />;
+};