Merge branch 'main' of https://github.com/dev-javascript/string-to-react-component

Author: dev-javascript

package.json

@@ -1,6 +1,6 @@
 {
   "name": "string-to-react-component",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "private": false,
   "author": "dev-javascript",
   "description": "Create React component from string",

src/ctx.js

@@ -1,8 +1,9 @@
 class Ctx {
-  constructor() {
+  constructor(React) {
     this._temp = '';
     this._parentTemp = `"use strict";\nreturn @temp;`;
     this._com = null;
+    window.React = window.React || React;
     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.`);

src/index.js

@@ -1,4 +1,4 @@
 import Ctx from './ctx.js';
 import StringToReact from './strintToReact.js';
-const getCtx = () => new Ctx();
+const getCtx = (options) => new Ctx(options);
 export default StringToReact.bind(null, {getCtx});

src/stringToReact.test.js

@@ -12,6 +12,7 @@ beforeAll(() => {
 });
 beforeEach(() => {
   window.Babel = window.Babel || {};
+  window.React=window.React||React;
   renderApp = (temp, deps, rerender, temp2) => {
     let secondRender = false;
     const StrintToReactCom = StrintToReact.bind(undefined, deps);
@@ -44,7 +45,7 @@ describe('rendering : ', () => {
   test('generated component from string should be updated when props.children is changed', () => {
     let _ctx, _ctx2;
     const getCtx = function () {
-        _ctx = new Ctx();
+        _ctx = new Ctx(React);
         _ctx.getComponent = jest.fn(() => _ctx._com);
         _ctx._transpile = jest.fn(
           () => `() => /*#__PURE__*/React.createElement("p", {
@@ -54,7 +55,7 @@ describe('rendering : ', () => {
         return _ctx;
       },
       getCtx2 = function () {
-        _ctx2 = new Ctx();
+        _ctx2 = new Ctx(React);
         _ctx2.getComponent = jest.fn(() => _ctx2._com);
         _ctx2._transpile = jest.fn(
           () => `() => /*#__PURE__*/React.createElement("p", {
@@ -73,7 +74,7 @@ describe('rendering : ', () => {
   test('it should call updateTemplate method with props.children as a parameter', () => {
     let _ctx;
     const getCtx = function () {
-      _ctx = new Ctx();
+      _ctx = new Ctx(React);
       const updateTemplate = _ctx.updateTemplate;
       _ctx.updateTemplate = jest.fn((temp) => updateTemplate.call(_ctx, temp));
       _ctx._transpile = jest.fn(
@@ -88,7 +89,10 @@ describe('rendering : ', () => {
   });
 });
 describe('React global variable', () => {
-  test('this package should set the React global variable', () => {
+  test('The constructor should set the React global variable', () => {
+    window.React=undefined;
+    new Ctx(React);
     expect(window.React).toEqual(React);
+    window.React=React;
   });
 });

src/strintToReact.js

@@ -1,11 +1,8 @@
-import React, {useRef} from 'react';
+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();
-  }
+  ref.current = ref.current || getCtx(React);
   const babelOptions = props.babelOptions || {};
   const GeneratedComponent = ref.current.updateTemplate(props.children, babelOptions).getComponent();
   const data = props.data || {};