string-to-react-component
Version:
Dynamically create and render React components from strings at runtime, converting strings to React components for flexible UI generation.
11 lines (10 loc) • 4.17 kB
JavaScript
/**
* string-to-react-component - Dynamically create and render React components from strings at runtime, converting strings to React components for flexible UI generation.
*
* @version v4.0.1
* @homepage https://github.com/dev-javascript/string-to-react-component/
* @author dev-javascript javascript.code.dev@gmail.com
* @license MIT
*/
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("@babel/standalone")):"function"==typeof define&&define.amd?define(["react","@babel/standalone"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).StringToReactComponent=t(e.React,e.Babel)}(this,(function(e,t){"use strict";function n(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var r=n(t),o=function(){function e(e,t,n){if(this._temp="",this._blob=void 0,this._rerender=function(){},this._com=function(){return null},this._rerender=n,this._getReact=function(){return e},!t)throw new Error('Package "string-to-react-component" has a missing peer dependency of "@babel/standalone" ( requires ">=7.15.8" )');this._getBabel=function(){return t}}var t=e.prototype;return t._checkBabelOptions=function(e){if("[object Object]"!==Object.prototype.toString.call(e))throw new Error("babelOptions prop of string-to-react-component element should be an object.");if(!1===Object.prototype.hasOwnProperty.call(e,"sourceMaps")&&(e.sourceMaps="inline"),!1===Object.prototype.hasOwnProperty.call(e,"presets"))e.presets=["react"];else{var t;if("object"!=typeof e.presets||(null==(t=e.presets)?void 0:t.constructor)!=Array)throw new Error("string-to-react-component Error : presets property of babelOptions prop should be an array");-1===e.presets.indexOf("react")&&e.presets.push("react")}},t._prependCode=function(e){return this._temp='import React from "react";\nexport default '+e,this},t._postpendCode=function(){return this._temp.replace("export default","export default (React)=>").replace('import React from "react";','//import React from "react";')},t._getBlob=function(e){return new Blob([e],{type:"application/javascript"})},t._import=function(e){return import(e)},t._getModule=function(e){var t=this,n=URL.createObjectURL(e);return this._import(n).then((function(e){return URL.revokeObjectURL(n),Promise.resolve(((null==e?void 0:e.default)||e)(t._getReact()))})).catch((function(e){URL.revokeObjectURL(n);var t="string-to-react-component loading module is failed:";throw console.error(t,e),new Error(t)}))},t._transpile=function(e){this._checkBabelOptions(e);var t=this._getBabel().transform(this._temp,e).code;return this._temp=t||"null",this},t._validateCodeInsideTheTemp=function(e){if("function"!=typeof e)throw new Error("code inside the passed string into string-to-react-component, should be a function")},t._validateTemplate=function(e){if("string"!=typeof e)throw new Error("passed child into string-to-react-component element should b a string");if(""===e)throw new Error("passed string into string-to-react-component element can not be empty")},t._updateTemplate=function(e,t){return this._validateTemplate(e),this._prependCode(e)._transpile(t)._postpendCode()},t.update=function(e,t){this._update(e,t)},t._update=function(e,t){this._updateComponent(this._updateTemplate(e,t))},t._onChangeComponent=function(){this._rerender({})},t._updateComponent=function(e){var t=this;this._getModule(this._getBlob(e)).then((function(e){t._validateCodeInsideTheTemp(e),t._com=e,t._onChangeComponent()}))},t.getComponent=function(){return this._com},e}();var i=function(t,n){var r=t.getCtx,o=t.Babel,i=t.react,a=e.useState({})[1],c=e.useRef(null);c.current=c.current||r(i,o,a);var s=c.current,p=n.data||{};e.useEffect((function(){s.update(n.children||"()=>null",n.babelOptions||{})}),[n.children,n.babelOptions]);var u=s.getComponent();return e.createElement(u,p)}.bind(null,{getCtx:function(e,t,n){return new o(e,t,n)},Babel:r,react:e});return i}));
//# sourceMappingURL=stringToReactComponent.umd.min.js.map