adding babelOptions and data props

Author: dev-javascript

src/ctx.js

@@ -1,22 +1,43 @@
 class Ctx {
   constructor() {
     this._temp = '';
-    this._parentTemp = `"use strict";return @temp;`;
+    this._parentTemp = `"use strict";\nreturn @temp;`;
     this._com = null;
     if (!(Object.prototype.hasOwnProperty.call(window, 'Babel') && typeof window.Babel === 'object')) {
       throw new Error(`string-to-react-component package needs @babel/standalone for working correctly.
       you should load @babel/standalone in the browser.`);
     }
     this._b = window.Babel;
-    this._babelpresets = ['react'];
   }
-  _transpile() {
-    return this._b.transform(this._temp, {
-      presets: this._babelpresets,
-    }).code;
+  _checkBabelOptions(babelOptions) {
+    if (Object.prototype.toString.call(babelOptions) !== '[object Object]') {
+      throw new Error(`babelOptions prop of string-to-react-component element should be an object.`);
+    }
+    if (Object.prototype.hasOwnProperty.call(babelOptions, 'presets') === false) {
+      babelOptions.presets = ['react'];
+    } else {
+      //check if babelOptions.presets is not type of Array
+      if (!(typeof babelOptions.presets === 'object' && babelOptions.presets.constructor == Array)) {
+        throw new Error(`string-to-react-component Error : presets property of babelOptions prop should be an array`);
+      }
+      if (babelOptions.presets.indexOf('react') === -1) {
+        babelOptions.presets.push('react');
+      }
+    }
+  }
+  _transpile(babelOptions) {
+    // make sure react presets is registered in babelOptions
+    this._checkBabelOptions(babelOptions);
+    const resultObj = this._b.transform(this._temp, babelOptions);
+    const filename = babelOptions.filename;
+    let code = resultObj.code;
+    if (filename) {
+      code = resultObj.code + `\n//# sourceURL=${filename}`;
+    }
+    return code;
   }
-  _generateCom() {
-    this._com = Function(this._parentTemp.replace('@temp', this._transpile()))();
+  _generateCom(babelOptions) {
+    this._com = Function(this._parentTemp.replace('@temp', this._transpile(babelOptions)))();
     this._validateCodeInsideTheTemp();
   }
   _validateCodeInsideTheTemp() {
@@ -32,11 +53,11 @@ class Ctx {
       throw new Error(`passed string into string-to-react-component element can not be empty`);
     }
   }
-  updateTemplate(template) {
+  updateTemplate(template, babelOptions) {
     this._validateTemplate(template);
     if (template !== this._temp) {
       this._temp = template;
-      this._generateCom();
+      this._generateCom(babelOptions);
     }
     return this;
   }

src/strintToReact.js

@@ -1,12 +1,18 @@
-/* eslint-disable react/prop-types */
 import React, {useRef} from 'react';
+import PropTypes from 'prop-types';
 window.React = window.React || React;
 function StringToReactComponent({getCtx}, props) {
   const ref = useRef(null);
   if (!ref.current) {
     ref.current = getCtx();
   }
-  const GeneratedComponent = ref.current.updateTemplate(props.children).getComponent();
-  return <GeneratedComponent {...props} />;
+  const babelOptions = props.babelOptions || {};
+  const GeneratedComponent = ref.current.updateTemplate(props.children, babelOptions).getComponent();
+  const data = props.data || {};
+  return <GeneratedComponent {...data} />;
 }
+StringToReactComponent.propTypes /* remove-proptypes */ = {
+  data: PropTypes.object,
+  babelOptions: PropTypes.object,
+};
 export default StringToReactComponent;