Skip to content

Commit

Permalink
feat: add a hook to inject extra tags in the head statically (#15)
Browse files Browse the repository at this point in the history
* chore: update vsconde config

* feat: add a hook to inject extra tags in the head statically

* feat: allow attribs on extra tags
  • Loading branch information
crash7 authored Feb 2, 2019
1 parent e457873 commit d7f828e
Show file tree
Hide file tree
Showing 4 changed files with 67 additions and 4 deletions.
5 changes: 3 additions & 2 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"]
}
8 changes: 8 additions & 0 deletions flow-typed/documentComponent_vx.x.x.js
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,14 @@ declare module 'Document.component' {
errorComponent: React$ComponentType<ErrorProps>,
filterServerData: (data: DataType) => DataType,
html: string,
extraHeadTags: Array<{
name: string,
tag: string,
content: string,
attribs?: {
[key: string]: string
}
}>,
[key: string]: any
};

Expand Down
11 changes: 9 additions & 2 deletions src/Document.component.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,8 @@ export class DocumentComponent extends PureComponent<DocumentInitialProps> {
error,
errorComponent: ErrorComponent,
filterServerData = identity,
extractor
extractor,
extraHeadTags = []
} = this.props;
// get attributes from React Helmet
const htmlAttrs = helmet.htmlAttributes.toComponent();
Expand All @@ -45,14 +46,20 @@ export class DocumentComponent extends PureComponent<DocumentInitialProps> {
<head>
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"
/>
{helmet.title.toComponent()}
{helmet.meta.toComponent()}
{helmet.link.toComponent()}
{helmet.script.toComponent()}
{extractor && getHeaderTags(extractor)}
{criticalCSS !== false && criticalCSS}
{clientCss && <link rel="stylesheet" href={clientCss} />}
{extraHeadTags.map(({ tag: Tag, content, name, attribs }) => (
<Tag key={name} {...attribs} dangerouslySetInnerHTML={{ __html: content }} />
))}
</head>
<body {...bodyAttrs}>
<Root />
Expand Down
47 changes: 47 additions & 0 deletions src/Document.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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(<Document {...documentProps} />);
const extraTag = wrapper.find('head script');

expect(extraTag.text()).toBe(documentProps.extraHeadTags[0].content);
});

0 comments on commit d7f828e

Please sign in to comment.