feat(LayoutPlugin): allow to set and pass crossOrigin for styles and …

…scripts (#46)
gravity-ui · Sep 16, 2024 · ce9848f · ce9848f
1 parent 0386daf
commit ce9848f
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 10 deletions.
diff --git a/src/plugins/layout/index.ts b/src/plugins/layout/index.ts
@@ -65,13 +65,14 @@ export function createLayoutPlugin({
                     ...jsAssets.map((js) => ({
                         src: getAbsoluteUrl(publicPath, js, options?.prefix),
                         defer: true,
-                        crossOrigin: 'anonymous' as const,
+                        crossOrigin: options.scriptsCrossOrigin || 'anonymous',
                     })),
                 );
 
                 renderContent.styleSheets.push(
                     ...cssAssets.map((css) => ({
                         href: getAbsoluteUrl(publicPath, css, options?.prefix),
+                        crossOrigin: options.stylesCrossOrigin,
                     })),
                 );
             } else {
@@ -80,19 +81,40 @@ export function createLayoutPlugin({
                     return getAbsoluteUrl(publicPath, manifestEntries[name], options?.prefix);
                 };
                 renderContent.scripts.push(
-                    {src: getWebpackAssetUrl('runtime.js'), defer: true, crossOrigin: 'anonymous'},
-                    {src: getWebpackAssetUrl('vendors.js'), defer: true, crossOrigin: 'anonymous'},
-                    {src: getWebpackAssetUrl('commons.js'), defer: true, crossOrigin: 'anonymous'},
+                    {
+                        src: getWebpackAssetUrl('runtime.js'),
+                        defer: true,
+                        crossOrigin: options.scriptsCrossOrigin || 'anonymous',
+                    },
+                    {
+                        src: getWebpackAssetUrl('vendors.js'),
+                        defer: true,
+                        crossOrigin: options.scriptsCrossOrigin || 'anonymous',
+                    },
+                    {
+                        src: getWebpackAssetUrl('commons.js'),
+                        defer: true,
+                        crossOrigin: options.scriptsCrossOrigin || 'anonymous',
+                    },
                     {
                         src: getWebpackAssetUrl(`${options.name}.js`),
                         defer: true,
-                        crossOrigin: 'anonymous',
+                        crossOrigin: options.scriptsCrossOrigin || 'anonymous',
                     },
                 );
                 renderContent.styleSheets.push(
-                    {href: getWebpackAssetUrl('vendors.css')},
-                    {href: getWebpackAssetUrl('commons.css')},
-                    {href: getWebpackAssetUrl(`${options.name}.css`)},
+                    {
+                        href: getWebpackAssetUrl('vendors.css'),
+                        crossOrigin: options.stylesCrossOrigin,
+                    },
+                    {
+                        href: getWebpackAssetUrl('commons.css'),
+                        crossOrigin: options.stylesCrossOrigin,
+                    },
+                    {
+                        href: getWebpackAssetUrl(`${options.name}.css`),
+                        crossOrigin: options.stylesCrossOrigin,
+                    },
                 );
             }
         },

diff --git a/src/plugins/layout/types.ts b/src/plugins/layout/types.ts
@@ -13,4 +13,6 @@ export type Manifest = Record<string, string> & {
 export interface LayoutPluginOptions {
     name: string;
     prefix?: string;
+    scriptsCrossOrigin?: '' | 'anonymous' | 'use-credentials';
+    stylesCrossOrigin?: '' | 'anonymous' | 'use-credentials';
 }
diff --git a/src/types.ts b/src/types.ts
@@ -10,6 +10,7 @@ export interface Script {
 
 export interface Stylesheet {
     href: string;
+    crossOrigin?: '' | 'anonymous' | 'use-credentials';
 }
 
 export interface Link {

diff --git a/src/utils.ts b/src/utils.ts
@@ -25,8 +25,8 @@ export function getRenderHelpers(params: {nonce?: string}): RenderHelpers {
     function renderInlineScript(content: string) {
         return `<script ${attrs({nonce: params.nonce})}>${content}</script>`;
     }
-    function renderStyle({href}: Stylesheet) {
-        return href ? `<link ${attrs({rel: 'stylesheet', href})}>` : '';
+    function renderStyle({href, crossOrigin}: Stylesheet) {
+        return href ? `<link ${attrs({rel: 'stylesheet', crossorigin: crossOrigin, href})}>` : '';
     }
     function renderInlineStyle(content: string) {
         return `<style ${attrs({nonce: params.nonce})}>${content}</style>`;