diff --git a/.vscode/settings.json b/.vscode/settings.json index 8aae000..ab49540 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -8,5 +8,6 @@ // Enable/disable default JavaScript formatter (For Prettier) "javascript.format.enable": false, // Use 'prettier-eslint' instead of 'prettier'. Other settings will only be fallbacks in case they could not be inferred from eslint rules. - "prettier.eslintIntegration": true -} + "prettier.eslintIntegration": true, + "beautify.ignore": ["**/*.js", "**/*.jsx"] +} \ No newline at end of file diff --git a/flow-typed/documentComponent_vx.x.x.js b/flow-typed/documentComponent_vx.x.x.js index 278fecb..605f2f7 100644 --- a/flow-typed/documentComponent_vx.x.x.js +++ b/flow-typed/documentComponent_vx.x.x.js @@ -66,6 +66,14 @@ declare module 'Document.component' { errorComponent: React$ComponentType, filterServerData: (data: DataType) => DataType, html: string, + extraHeadTags: Array<{ + name: string, + tag: string, + content: string, + attribs?: { + [key: string]: string + } + }>, [key: string]: any }; diff --git a/src/Document.component.jsx b/src/Document.component.jsx index 64079a0..c26f487 100644 --- a/src/Document.component.jsx +++ b/src/Document.component.jsx @@ -34,7 +34,8 @@ export class DocumentComponent extends PureComponent { error, errorComponent: ErrorComponent, filterServerData = identity, - extractor + extractor, + extraHeadTags = [] } = this.props; // get attributes from React Helmet const htmlAttrs = helmet.htmlAttributes.toComponent(); @@ -45,7 +46,10 @@ export class DocumentComponent extends PureComponent { - + {helmet.title.toComponent()} {helmet.meta.toComponent()} {helmet.link.toComponent()} @@ -53,6 +57,9 @@ export class DocumentComponent extends PureComponent { {extractor && getHeaderTags(extractor)} {criticalCSS !== false && criticalCSS} {clientCss && } + {extraHeadTags.map(({ tag: Tag, content, name, attribs }) => ( + + ))} diff --git a/src/Document.test.js b/src/Document.test.js index eb33bc2..7b58e7a 100644 --- a/src/Document.test.js +++ b/src/Document.test.js @@ -120,3 +120,50 @@ test('should call the function to generate the critical CSS', () => { }) ); }); + +test('should render the extra html tags in the `head`', () => { + const documentProps = { + helmet: { + title: { + toComponent: jest.fn() + }, + meta: { + toComponent: jest.fn() + }, + link: { + toComponent: jest.fn() + }, + script: { + toComponent: jest.fn() + }, + htmlAttributes: { + toComponent: jest.fn() + }, + bodyAttributes: { + toComponent: jest.fn() + } + }, + assets: { + client: { + css: 'css-path.css', + js: 'js-path.js' + } + }, + data: { + test: true, + shouldFilterMe: true + }, + filterServerData: jest.fn().mockImplementation(({ shouldFilterMe, ...rest }) => rest), + extraHeadTags: [ + { + name: 'raygun', + tag: 'script', + content: `console.log('some-script');` + } + ] + }; + const wrapper = mount(); + const extraTag = wrapper.find('head script'); + + expect(extraTag.text()).toBe(documentProps.extraHeadTags[0].content); +});