Skip to content

Commit 9bb7d86

Browse files
author
Nathan Booker
committed
feat: render scripts from Script Manager
1 parent 989bf97 commit 9bb7d86

6 files changed

Lines changed: 262 additions & 1 deletion

File tree

‎.changeset/wise-ads-drive.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@bigcommerce/catalyst-core": minor
3+
---
4+
5+
Add support for Scripts API/Script Manager scripts rendering via next/script

‎core/app/[locale]/layout.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import { revalidate } from '~/client/revalidate-target';
1919
import { WebAnalyticsFragment } from '~/components/analytics/fragment';
2020
import { AnalyticsProvider } from '~/components/analytics/provider';
2121
import { ContainerQueryPolyfill } from '~/components/polyfills/container-query';
22+
import { FooterScripts, HeaderScripts, ScriptsFragment } from '~/components/scripts';
2223
import { routing } from '~/i18n/routing';
2324
import { getToastNotification } from '~/lib/server-toast';
2425

@@ -35,13 +36,16 @@ const RootLayoutMetadataQuery = graphql(
3536
}
3637
...WebAnalyticsFragment
3738
}
39+
content {
40+
...ScriptsFragment
41+
}
3842
}
3943
channel {
4044
entityId
4145
}
4246
}
4347
`,
44-
[WebAnalyticsFragment],
48+
[WebAnalyticsFragment, ScriptsFragment],
4549
);
4650

4751
const fetchRootLayoutMetadata = cache(async () => {
@@ -109,6 +113,9 @@ export default async function RootLayout({ params, children }: Props) {
109113

110114
return (
111115
<html className={clsx(fonts.map((f) => f.variable))} lang={locale}>
116+
<head>
117+
<HeaderScripts scripts={data.site.content.scripts} />
118+
</head>
112119
<body className="flex min-h-screen flex-col">
113120
<NextIntlClientProvider>
114121
<NuqsAdapter>
@@ -124,6 +131,7 @@ export default async function RootLayout({ params, children }: Props) {
124131
</NextIntlClientProvider>
125132
<VercelComponents />
126133
<ContainerQueryPolyfill />
134+
<FooterScripts scripts={data.site.content.scripts} />
127135
</body>
128136
</html>
129137
);

‎core/components/scripts/README.md‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
# Script Components
2+
3+
This directory contains components for rendering BigCommerce scripts using Next.js Script component.
4+
5+
## Components
6+
7+
Both `HeaderScripts` and `FooterScripts` are exported from a single `scripts.tsx` file that follows DRY principles by sharing common logic through an internal `ScriptRenderer` component.
8+
9+
### HeaderScripts
10+
Renders scripts that should be placed in the `<head>` tag with `strategy="afterInteractive"`.
11+
12+
### FooterScripts
13+
Renders scripts that should be placed before the closing `</body>` tag with `strategy="lazyOnload"` for better performance.
14+
15+
## Usage
16+
17+
```tsx
18+
import { HeaderScripts, FooterScripts } from '~/components/scripts';
19+
20+
// In your layout or page component:
21+
<HeaderScripts scripts={data.site.content.scripts} />
22+
<FooterScripts scripts={data.site.content.scripts} />
23+
```
24+
25+
## Architecture
26+
27+
The components use a shared `ScriptRenderer` component that accepts:
28+
- `scripts`: The GraphQL scripts data
29+
- `location`: 'head' or 'footer'
30+
- `strategy`: 'afterInteractive' or 'lazyOnload'
31+
32+
This ensures consistent behavior and reduces code duplication between header and footer scripts.
33+
34+
## Script Processing
35+
36+
The components handle both types of BigCommerce scripts:
37+
38+
### External Scripts (SrcScript)
39+
```tsx
40+
<Script
41+
id="bc-script-123"
42+
src="https://example.com/script.js"
43+
strategy="afterInteractive"
44+
integrity="sha256-abc123..."
45+
/>
46+
```
47+
48+
### Inline Scripts (InlineScript)
49+
Inline scripts are rendered using `dangerouslySetInnerHTML` for reliable execution:
50+
```tsx
51+
<Script
52+
id="bc-script-456"
53+
strategy="lazyOnload"
54+
dangerouslySetInnerHTML={{ __html: scriptContent }}
55+
/>
56+
```
57+
58+
## Filtering Logic
59+
60+
Scripts are filtered by:
61+
- **Location**: BigCommerce API returns `'HEAD'` or `'FOOTER'` (uppercase)
62+
- **Visibility**: Only renders scripts with `'ALL_PAGES'` or `'STOREFRONT'` visibility
63+
64+
## Performance
65+
66+
- Header scripts use `afterInteractive` strategy for critical functionality
67+
- Footer scripts use `lazyOnload` strategy for better performance
68+
- Script IDs are generated using the `entityId` from the BigCommerce API
69+
- Integrity hashes are included when available for security
70+
- Scripts are efficiently filtered and rendered based on location and visibility
71+
72+
## GraphQL Integration
73+
74+
Uses the `ScriptsFragment` to fetch script data:
75+
```graphql
76+
fragment ScriptsFragment on Content {
77+
scripts(first: 50, filters: { visibilities: [ALL_PAGES, STOREFRONT] }) {
78+
edges {
79+
node {
80+
integrityHashes { hash }
81+
entityId
82+
consentCategory
83+
location
84+
visibility
85+
... on InlineScript { scriptTag }
86+
... on SrcScript { src }
87+
}
88+
}
89+
}
90+
}
91+
```

‎core/components/scripts/fragment.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { graphql } from '~/client/graphql';
2+
3+
export const ScriptsFragment = graphql(`
4+
fragment ScriptsFragment on Content {
5+
scripts(first: 50, filters: { visibilities: [ALL_PAGES, STOREFRONT] }) {
6+
edges {
7+
node {
8+
__typename
9+
integrityHashes {
10+
hash
11+
}
12+
entityId
13+
consentCategory
14+
location
15+
visibility
16+
... on InlineScript {
17+
scriptTag
18+
}
19+
... on SrcScript {
20+
src
21+
}
22+
}
23+
}
24+
}
25+
}
26+
`);

‎core/components/scripts/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { HeaderScripts, FooterScripts } from './scripts';
2+
export { ScriptsFragment } from './fragment';

‎core/components/scripts/scripts.tsx‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
import { removeEdgesAndNodes } from '@bigcommerce/catalyst-client';
2+
import Script from 'next/script';
3+
4+
interface ScriptNode {
5+
entityId: unknown;
6+
consentCategory: string;
7+
location: string;
8+
visibility: string;
9+
__typename?: 'InlineScript' | 'SrcScript';
10+
scriptTag?: string;
11+
src?: string;
12+
integrityHashes: Array<{
13+
hash: string;
14+
}>;
15+
}
16+
17+
interface ScriptsData {
18+
edges: Array<{
19+
node: ScriptNode;
20+
}> | null;
21+
}
22+
23+
interface ScriptRendererProps {
24+
scripts: ScriptsData | null;
25+
location: 'head' | 'footer';
26+
strategy: 'afterInteractive' | 'lazyOnload';
27+
}
28+
29+
interface ScriptsProps {
30+
scripts: ScriptsData | null;
31+
}
32+
33+
interface ScriptProps {
34+
src?: string;
35+
dangerouslySetInnerHTML?: {
36+
__html: string;
37+
};
38+
strategy: 'afterInteractive' | 'lazyOnload';
39+
integrity?: string;
40+
id?: string;
41+
crossorigin?: string;
42+
}
43+
44+
/**
45+
* Shared component that renders BigCommerce scripts using Next.js Script component
46+
* @param {ScriptRendererProps} props - The props for the script renderer
47+
* @param {ScriptsData | null} props.scripts - The scripts data from GraphQL
48+
* @param {'head' | 'footer'} props.location - Where to render the scripts
49+
* @param {'afterInteractive' | 'lazyOnload'} props.strategy - The loading strategy
50+
* @returns {JSX.Element | null} JSX element containing the rendered scripts
51+
*/
52+
const ScriptRenderer = ({ scripts, location, strategy }: ScriptRendererProps) => {
53+
if (!scripts?.edges) return null;
54+
55+
const scriptNodes = removeEdgesAndNodes(scripts);
56+
const locationScripts = scriptNodes.filter(
57+
(script) => script.location.toLowerCase() === location,
58+
);
59+
const filteredScripts = locationScripts.filter(
60+
(script) => script.visibility === 'ALL_PAGES' || script.visibility === 'STOREFRONT',
61+
);
62+
63+
return (
64+
<>
65+
{filteredScripts.map((script) => {
66+
const scriptProps: ScriptProps = {
67+
strategy,
68+
};
69+
70+
// Handle external scripts (SrcScript)
71+
if (script.__typename === 'SrcScript' && script.src) {
72+
scriptProps.src = script.src;
73+
}
74+
75+
// Handle inline scripts (InlineScript)
76+
if (script.__typename === 'InlineScript' && script.scriptTag) {
77+
const scriptMatch = /<script[^>]*>([\s\S]*?)<\/script>/i.exec(script.scriptTag);
78+
79+
if (scriptMatch?.[1]) {
80+
scriptProps.dangerouslySetInnerHTML = {
81+
__html: scriptMatch[1],
82+
};
83+
}
84+
}
85+
86+
// Add integrity hashes if provided
87+
if (script.integrityHashes.length > 0) {
88+
scriptProps.integrity = script.integrityHashes.map((hashObj) => hashObj.hash).join(' ');
89+
scriptProps.crossorigin = 'anonymous';
90+
}
91+
92+
// Add id for better debugging
93+
const entityId =
94+
(script.entityId && typeof script.entityId === 'string') ||
95+
typeof script.entityId === 'number'
96+
? String(script.entityId)
97+
: `fallback-${Math.random().toString(36).substring(2, 11)}`;
98+
99+
if (script.entityId) {
100+
scriptProps.id = `bc-script-${entityId}`;
101+
}
102+
103+
return <Script key={`script-${entityId}`} {...scriptProps} />;
104+
})}
105+
</>
106+
);
107+
};
108+
109+
/**
110+
* Renders scripts that should be placed in the <head> tag
111+
* Uses afterInteractive strategy for critical functionality
112+
* @param {ScriptsProps} props - The props containing scripts data
113+
* @param {ScriptsData | null} props.scripts - The scripts data from GraphQL
114+
* @returns {JSX.Element | null} JSX element containing header scripts
115+
*/
116+
export const HeaderScripts = ({ scripts }: ScriptsProps) => {
117+
return <ScriptRenderer location="head" scripts={scripts} strategy="afterInteractive" />;
118+
};
119+
120+
/**
121+
* Renders scripts that should be placed before the closing </body> tag
122+
* Uses lazyOnload strategy for better performance
123+
* @param {ScriptsProps} props - The props containing scripts data
124+
* @param {ScriptsData | null} props.scripts - The scripts data from GraphQL
125+
* @returns {JSX.Element | null} JSX element containing footer scripts
126+
*/
127+
export const FooterScripts = ({ scripts }: ScriptsProps) => {
128+
return <ScriptRenderer location="footer" scripts={scripts} strategy="lazyOnload" />;
129+
};

0 commit comments

Comments
 (0)