Merge pull request #3 from yoriiis/template-compatibility

Add template compatibility with HTML String and HTMLElement

.eslintrc.js

@@ -16,7 +16,7 @@ module.exports = {
 		jest: true
 	},
 
-	extends: 'standard',
+	extends: ['standard', 'plugin:react/recommended'],
 
 	plugins: ['prettier'],
 
@@ -28,11 +28,22 @@ module.exports = {
 		'space-before-function-paren': [
 			'error',
 			{ anonymous: 'never', named: 'never', asyncArrow: 'always' }
-		]
+		],
+		'react/prop-types': 0,
+		'react/display-name': 0,
+		'react/jsx-key': 0
 	},
 
 	globals: {
 		document: false,
 		window: false
+	},
+
+	settings: {
+		react: {
+			pragma: 'createElement',
+			fragment: 'Fragment',
+			version: '0' // Remove the warning of the missing React package
+		}
 	}
 };

CHANGELOG.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## 1.2.2
+
+### New features
+
+* Render the template in HTML string with template literals for exemple or by HTMLElement with JSX.
+
 ## 1.2.1
 
 ### New features

README.md

@@ -160,7 +160,9 @@ return {
 
 `Function`
 
-The function returns the HTML template of the step and exposes the return of the `getStepDatasToRender` function as parameter.
+The function returns the template as HTML string or HTMLElement for the step and exposes the return of the `getStepDatasToRender` function as parameter.
+
+> Template can be written with template literals (String) or with JSX (HTMLElement). The demo includes templates in both types for the example.
 
 #### `getStepDatasToRender`
 

babel.config.js

@@ -10,7 +10,16 @@ module.exports = function(api) {
 		]
 	];
 
-	const plugins = ['@babel/plugin-proposal-class-properties'];
+	const plugins = [
+		'@babel/plugin-proposal-class-properties',
+		[
+			'@babel/plugin-transform-react-jsx',
+			{
+				pragma: 'createElement',
+				pragmaFrag: 'Fragment'
+			}
+		]
+	];
 
 	api.cache.using(() => process.env.NODE_ENV);