string-to-react-component/lib/esm/ctx.js

Dynamically create and render React components from strings at runtime, converting strings to React components for flexible UI generation.

var Ctx = /*#__PURE__*/function () {
  function Ctx(React, Babel, rerender) {
    this._temp = '';
    this._blob = undefined;
    this._rerender = function () {};
    this._com = function () {
      return null;
    };
    this._rerender = rerender;
    this._getReact = function () {
      return React;
    };
    if (!Babel) {
      throw new Error("Package \"string-to-react-component\" has a missing peer dependency of \"@babel/standalone\" ( requires \">=7.15.8\" )");
    }
    this._getBabel = function () {
      return Babel;
    };
  }
  var _proto = Ctx.prototype;
  _proto._checkBabelOptions = function _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, 'sourceMaps') === false) {
      babelOptions.sourceMaps = 'inline';
    }
    if (Object.prototype.hasOwnProperty.call(babelOptions, 'presets') === false) {
      babelOptions.presets = ['react'];
    } else {
      var _babelOptions$presets;
      //check if babelOptions.presets is not type of Array
      if (!(typeof babelOptions.presets === 'object' && ((_babelOptions$presets = babelOptions.presets) == null ? void 0 : _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');
      }
    }
  };
  _proto._prependCode = function _prependCode(template) {
    this._temp = "import React from \"react\";\nexport default " + template;
    return this;
  };
  _proto._postpendCode = function _postpendCode() {
    return this._temp.replace('export default', 'export default (React)=>').replace('import React from "react";', '//import React from "react";');
  };
  _proto._getBlob = function _getBlob(temp) {
    return new Blob([temp], {
      type: 'application/javascript'
    });
  };
  _proto._import = function _import(url) {
    return import( /* webpackIgnore: true */url);
  };
  _proto._getModule = function _getModule(blob) {
    var _this = this;
    var moduleUrl = URL.createObjectURL(blob);
    return this._import(moduleUrl).then(function (module) {
      URL.revokeObjectURL(moduleUrl);
      return Promise.resolve(((module == null ? void 0 : module["default"]) || module)(_this._getReact()));
    })["catch"](function (error) {
      URL.revokeObjectURL(moduleUrl);
      var errorTitle = 'string-to-react-component loading module is failed:';
      console.error(errorTitle, error);
      throw new Error(errorTitle);
    });
  };
  _proto._transpile = function _transpile(babelOptions) {
    this._checkBabelOptions(babelOptions);
    var resultObj = this._getBabel().transform(this._temp, babelOptions);
    var code = resultObj.code;
    // if (babelOptions.filename) {
    //   code = resultObj.code + `\n//# sourceURL=${babelOptions.filename}`;
    // }
    this._temp = code || 'null';
    return this;
  };
  _proto._validateCodeInsideTheTemp = function _validateCodeInsideTheTemp(com) {
    if (typeof com !== 'function') {
      throw new Error("code inside the passed string into string-to-react-component, should be a function");
    }
  };
  _proto._validateTemplate = function _validateTemplate(temp) {
    if (typeof temp !== 'string') {
      throw new Error("passed child into string-to-react-component element should b a string");
    }
    if (temp === '') {
      throw new Error("passed string into string-to-react-component element can not be empty");
    }
  }
  /** update transpiled code */;
  _proto._updateTemplate = function _updateTemplate(template, babelOptions) {
    this._validateTemplate(template);
    return this._prependCode(template)._transpile(babelOptions)._postpendCode();
  };
  _proto.update = function update(template, babelOptions) {
    this._update(template, babelOptions);
  };
  _proto._update = function _update(template, babelOptions) {
    this._updateComponent(this._updateTemplate(template, babelOptions));
  };
  _proto._onChangeComponent = function _onChangeComponent() {
    this._rerender({});
  };
  _proto._updateComponent = function _updateComponent(template) {
    var _this2 = this;
    this._getModule(this._getBlob(template)).then(function (com) {
      _this2._validateCodeInsideTheTemp(com);
      _this2._com = com;
      _this2._onChangeComponent();
    });
  };
  _proto.getComponent = function getComponent() {
    return this._com;
  };
  return Ctx;
}();
export default Ctx;