feat(Template): add props for the tagName

src/components/Template.js

@@ -14,6 +14,7 @@ export class PureTemplate extends Component {
   }
 
   render() {
+    const RootTagName = this.props.rootTagName;
     const useCustomCompileOptions = this.props.useCustomCompileOptions[
       this.props.templateKey
     ];
@@ -42,7 +43,7 @@ export class PureTemplate extends Component {
     }
 
     return (
-      <div
+      <RootTagName
         {...this.props.rootProps}
         dangerouslySetInnerHTML={{ __html: content }}
       />
@@ -53,6 +54,7 @@ export class PureTemplate extends Component {
 PureTemplate.propTypes = {
   data: PropTypes.object,
   rootProps: PropTypes.object,
+  rootTagName: PropTypes.string,
   templateKey: PropTypes.string,
   templates: PropTypes.objectOf(
     PropTypes.oneOfType([PropTypes.string, PropTypes.func])
@@ -81,6 +83,7 @@ PureTemplate.propTypes = {
 
 PureTemplate.defaultProps = {
   data: {},
+  rootTagName: 'div',
   useCustomCompileOptions: {},
   templates: {},
   templatesConfig: {},

src/components/__tests__/Template-test.js

@@ -26,6 +26,13 @@ describe('Template', () => {
     expect(tree).toMatchSnapshot();
   });
 
+  it('can configure custom rootTagName', () => {
+    const props = getProps({ rootTagName: 'span' });
+    const tree = renderer.create(<PureTemplate {...props} />).toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+
   it('forward rootProps to the first node', () => {
     function fn() {}
 
@@ -207,8 +214,10 @@ describe('Template', () => {
     useCustomCompileOptions = {},
     templatesConfig = { helper: {}, compileOptions: {} },
     transformData = null,
+    ...props
   }) {
     return {
+      ...props,
       templates,
       data,
       templateKey,

src/components/__tests__/__snapshots__/Template-test.js.snap

@@ -10,6 +10,16 @@ exports[`Template can configure compilation options 1`] = `
 />
 `;
 
+exports[`Template can configure custom rootTagName 1`] = `
+<span
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "",
+    }
+  }
+/>
+`;
+
 exports[`Template forward rootProps to the first node 1`] = `
 <div
   className="hey"