feat!: add htmlAttributes and bodyContent.attributes render params (#41)

gravity-ui · Mar 20, 2024 · f99b4ff · f99b4ff
1 parent d2465b0
commit f99b4ff
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -262,8 +262,6 @@ export interface HeadContent {
 
 export interface BodyContent {
   attributes: Attributes;
-  /** @deprecated use attributes.class instead */
-  className: string[];
   beforeRoot: string[];
   root?: string;
   afterRoot: string[];
@@ -335,7 +333,7 @@ Adds Yandex metrics counters on the page.
 Usage:
 
 ```js
-import {createMiddleware, createYandexMetrikaPlugin} from '@gravity-ui/app-layout';
+import {createRenderFunction, createYandexMetrikaPlugin} from '@gravity-ui/app-layout';
 
 const renderLayout = createRenderFunction([createYandexMetrikaPlugin()]);
 
@@ -395,7 +393,7 @@ Adds script and styles from webpack assets manifest file.
 Usage:
 
 ```js
-import {createMiddleware, createLayoutPlugin} from '@gravity-ui/app-layout';
+import {createRenderFunction, createLayoutPlugin} from '@gravity-ui/app-layout';
 
 const renderLayout = createRenderFunction([
   createLayoutPlugin({manifest: 'path/to/assets-manifest.json', publicPath: '/build/'}),

diff --git a/src/plugins/google-analytics/index.ts b/src/plugins/google-analytics/index.ts
@@ -10,12 +10,14 @@ export function createGoogleAnalyticsPlugin(): Plugin<
 > {
     return {
         name: 'googleAnalytics',
-        apply({options, renderContent, utils}) {
+        apply({options, renderContent}) {
             if (!options || !options.counter) {
                 return;
             }
 
-            renderContent.bodyContent.afterRoot.push(renderGoogleAnalyticsCounter(options, utils));
+            renderContent.bodyContent.afterRoot.push(
+                renderGoogleAnalyticsCounter(options, renderContent.helpers),
+            );
         },
     };
 }

diff --git a/src/plugins/yandex-metrika/index.ts b/src/plugins/yandex-metrika/index.ts
@@ -7,12 +7,12 @@ export type {MetrikaCounter, MetrikaPluginOptions, UserParams} from './types.js'
 export function createYandexMetrikaPlugin(): Plugin<MetrikaPluginOptions, 'yandexMetrika'> {
     return {
         name: 'yandexMetrika',
-        apply({options, renderContent, utils}) {
+        apply({options, renderContent}) {
             if (!options || !options.counter) {
                 return;
             }
 
-            renderContent.bodyContent.afterRoot.push(renderMetrika(options, utils));
+            renderContent.bodyContent.afterRoot.push(renderMetrika(options, renderContent.helpers));
         },
     };
 }

diff --git a/src/types.ts b/src/types.ts
@@ -50,15 +50,11 @@ export interface HeadContent {
 
 export interface BodyContent {
     attributes: Attributes;
-    /** @deprecated use attributes.class instead */
-    className: string[];
     beforeRoot: string[];
     root?: string;
     afterRoot: string[];
 }
 
-export type OldBodyContent = Omit<BodyContent, 'attributes'>;
-
 export interface RenderContent extends HeadContent {
     htmlAttributes: Attributes;
     bodyContent: BodyContent;
@@ -77,7 +73,7 @@ export interface Plugin<Options = any, Name extends string = string> {
     name: Name;
     apply: (params: {
         options: Options | undefined;
-        renderContent: Omit<RenderContent, 'bodyContent'> & {bodyContent: OldBodyContent};
+        renderContent: RenderContent;
         commonOptions: CommonOptions;
         /** @deprecated use `renderContent.helpers` instead */
         utils: RenderHelpers;
@@ -88,6 +84,7 @@ export interface RenderParams<Data, Plugins extends Plugin[] = []> extends Commo
     icon?: Icon;
     nonce?: string;
     // content
+    htmlAttributes?: Attributes;
     meta?: Meta[];
     links?: Link[];
     scripts?: Script[];
@@ -97,6 +94,7 @@ export interface RenderParams<Data, Plugins extends Plugin[] = []> extends Commo
     bodyContent?: {
         theme?: string;
         className?: string;
+        attributes?: Attributes;
         beforeRoot?: string;
         root?: string;
         afterRoot?: string;

diff --git a/src/utils/generateRenderContent.ts b/src/utils/generateRenderContent.ts
@@ -1,6 +1,14 @@
 import htmlescape from 'htmlescape';
 
-import type {BodyContent, Icon, Meta, Plugin, RenderContent, RenderParams} from '../types.js';
+import type {
+    Attributes,
+    BodyContent,
+    Icon,
+    Meta,
+    Plugin,
+    RenderContent,
+    RenderParams,
+} from '../types.js';
 import {getRenderHelpers, hasProperty} from '../utils.js';
 
 function getRootClassName(theme?: string) {
@@ -38,7 +46,7 @@ export function generateRenderContent<Plugins extends Plugin[], Data>(
     params: RenderParams<Data, Plugins>,
 ): RenderContent {
     const helpers = getRenderHelpers(params);
-    const htmlAttributes: Record<string, string> = {};
+    const htmlAttributes: Attributes = {...params.htmlAttributes};
     const meta = params.meta ?? [];
     // in terms of sets: meta = params.meta ∪ (defaultMeta ∖ params.meta)
     defaultMeta.forEach((defaultMetaItem) => {
@@ -55,13 +63,19 @@ export function generateRenderContent<Plugins extends Plugin[], Data>(
     inlineScripts.unshift(`window.__DATA__ = ${htmlescape(params.data || {})};`);
 
     const content = params.bodyContent ?? {};
+
     const {theme, className} = content;
-    const bodyClasses = Array.from(
+    const bodyClassName = Array.from(
         new Set([...getRootClassName(theme), ...(className ? className.split(' ') : [])]),
-    );
+    )
+        .filter(Boolean)
+        .join(' ');
+
     const bodyContent: BodyContent = {
-        attributes: {},
-        className: bodyClasses,
+        attributes: {
+            class: bodyClassName,
+            ...content.attributes,
+        },
         root: content.root,
         beforeRoot: content.beforeRoot ? [content.beforeRoot] : [],
         afterRoot: content.afterRoot ? [content.afterRoot] : [],
@@ -99,11 +113,6 @@ export function generateRenderContent<Plugins extends Plugin[], Data>(
         });
     }
 
-    bodyContent.attributes = {
-        ...bodyContent.attributes,
-        class: bodyContent.className.filter(Boolean).join(' '),
-    };
-
     if (lang) {
         htmlAttributes.lang = lang;
     }