Render scripts from Script Manager

[bookernath]

What/Why?

Checks for scripts in Script Manager tied to the Catalyst storefront's channel and renders them in the root layout using next/script.

Related docs PR: https://github.com/bigcommerce/docs/pull/1014

⚠️ This makes a best-effort attempt to map Scripts API properties to the optimal settings in a next/script context, but it does prefer performance over parity for purposes of rendering scripts on Catalyst ⚠️

⚠️ Scripts that worked on Stencil are NOT guaranteed to work on Catalyst, and may need to be re-written, especially if they depend on the DOM or need to fire on every navigation ⚠️

⚠️ Overall this is not the recommended way of integrating apps into Catalyst, but it may be appropriate for some use cases such as analytics pixels and popups ⚠️

⚠️ This does NOT yet handle cookie consent for scripts, all scripts will render all the time until we add a consent manager ⚠️

Future work will add a consent manager into Catalyst which will apply to both scripts as well as analytics calls, respecting cookie consent automatically.

Testing

Preview deployment

• Inline script works
• CDN script works
• SRI works

Migration

N/A

[changeset-bot]

🦋 Changeset detected

Latest commit: 292574f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@bigcommerce/catalyst-core	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
catalyst-canary	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 14, 2025 10:42pm

4 Skipped Deployments

Name	Status	Preview	Comments	Updated (UTC)
catalyst	⬜️ Ignored (Inspect)			Jul 14, 2025 10:42pm
catalyst-au	⬜️ Ignored (Inspect)	Visit Preview		Jul 14, 2025 10:42pm
catalyst-b2b	⬜️ Ignored (Inspect)	Visit Preview		Jul 14, 2025 10:42pm
catalyst-uk	⬜️ Ignored (Inspect)	Visit Preview		Jul 14, 2025 10:42pm

[Copilot]

Pull Request Overview

Adds a new mechanism to fetch and render BigCommerce Script Manager scripts in the Catalyst storefront using Next.js’s <Script> component.

• Introduces ScriptManagerScripts to process and render inline (InlineScript) and external (SrcScript) scripts with proper strategies and integrity support.
• Defines ScriptsFragment to retrieve header and footer scripts via GraphQL and integrates it into the root layout.
• Updates documentation, GraphQL type mappings, and adds a changelog entry.

Reviewed Changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
core/components/scripts/scripts.tsx	Implements ScriptManagerScripts and script rendering
core/components/scripts/fragment.ts	Adds GraphQL fragment for header and footer scripts
core/components/scripts/README.md	Documents usage and component behavior
core/components/scripts/index.tsx	Exports component and fragment
core/client/graphql.ts	Adds UUID to GraphQL scalar mappings
core/app/[locale]/layout.tsx	Integrates ScriptManagerScripts into the layout
.changeset/wise-ads-drive.md	Changelog entry for script rendering feature

Comments suppressed due to low confidence (2)

core/components/scripts/scripts.tsx:16

• No tests were added for ScriptManagerScripts. Consider adding unit tests to verify handling of external and inline scripts, including integrity hash and dangerouslySetInnerHTML scenarios.

export const ScriptManagerScripts = ({ scripts, strategy }: ScriptRendererProps) => {

core/components/scripts/README.md:10

• Add a note that consumers must include ...ScriptsFragment in their GraphQL queries (headerScripts / footerScripts) to supply data to ScriptManagerScripts.

## Usage

[Copilot]

[nitpick] The hardcoded limit of first: 50 may truncate scripts if more are added. Consider extracting this into a named constant or documenting the rationale for using 50.

Suggested change

	export const ScriptsFragment = graphql(`
	fragment ScriptsFragment on Content {
	headerScripts: scripts(
	first: 50
	filters: { visibilities: [ALL_PAGES, STOREFRONT], location: HEAD }
	) {
	...ScriptTypeConnectionFragment
	}
	footerScripts: scripts(
	first: 50
	// Default limit for the number of scripts to fetch. Adjust this value as needed.
	const DEFAULT_SCRIPT_LIMIT = 50;
	export const ScriptsFragment = graphql(`
	fragment ScriptsFragment on Content {
	headerScripts: scripts(
	first: DEFAULT_SCRIPT_LIMIT
	filters: { visibilities: [ALL_PAGES, STOREFRONT], location: HEAD }
	) {
	...ScriptTypeConnectionFragment
	}
	footerScripts: scripts(
	first: DEFAULT_SCRIPT_LIMIT

[chanceaclark]

The dom-purify is the only major thing, otherwise looks good to me.

[chanceaclark]

I think we should have dom-purify here in the repo that you might want to use instead of a regex 🤔

[chanceaclark]

🍹 Only if you want to update this... but a better practice, which might seem weird, is to do two .map's here. One to build the props, then another one to render. It allows each .map to have separate concerns.

{scriptNodes
  .map((script) => {
    // ...
    return {
      src: "...",
      // ....
    };
  })
  .map((script) => {
    return (
      <Script key={script.id} {...script} />
    );
  })
}