Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-runner
Advanced tools
react-runner - npm Package Compare versions
Comparing version 0.5.1 to 1.0.0-alpha.0
@@ -6,2 +6,10 @@ # Change Log | ||
| # [1.0.0-alpha.0](https://github.com/nihgwu/react-runner/compare/react-runner@0.5.1...react-runner@1.0.0-alpha.0) (2021-12-27) | ||
| **Note:** Version bump only for package react-runner | ||
| ## [0.5.1](https://github.com/nihgwu/react-runner/compare/react-runner@0.5.0...react-runner@0.5.1) (2019-07-05) | ||
@@ -8,0 +16,0 @@ |
@@ -1,334 +0,2 @@ | ||
| import React, { useState, useMemo, useEffect } from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import { transform as transform$1 } from 'sucrase'; | ||
| function _defineProperty(obj, key, value) { | ||
| if (key in obj) { | ||
| Object.defineProperty(obj, key, { | ||
| value: value, | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true | ||
| }); | ||
| } else { | ||
| obj[key] = value; | ||
| } | ||
| return obj; | ||
| } | ||
| function _extends() { | ||
| _extends = Object.assign || function (target) { | ||
| for (var i = 1; i < arguments.length; i++) { | ||
| var source = arguments[i]; | ||
| for (var key in source) { | ||
| if (Object.prototype.hasOwnProperty.call(source, key)) { | ||
| target[key] = source[key]; | ||
| } | ||
| } | ||
| } | ||
| return target; | ||
| }; | ||
| return _extends.apply(this, arguments); | ||
| } | ||
| function _inheritsLoose(subClass, superClass) { | ||
| subClass.prototype = Object.create(superClass.prototype); | ||
| subClass.prototype.constructor = subClass; | ||
| subClass.__proto__ = superClass; | ||
| } | ||
| function _setPrototypeOf(o, p) { | ||
| _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { | ||
| o.__proto__ = p; | ||
| return o; | ||
| }; | ||
| return _setPrototypeOf(o, p); | ||
| } | ||
| function isNativeReflectConstruct() { | ||
| if (typeof Reflect === "undefined" || !Reflect.construct) return false; | ||
| if (Reflect.construct.sham) return false; | ||
| if (typeof Proxy === "function") return true; | ||
| try { | ||
| Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); | ||
| return true; | ||
| } catch (e) { | ||
| return false; | ||
| } | ||
| } | ||
| function _construct(Parent, args, Class) { | ||
| if (isNativeReflectConstruct()) { | ||
| _construct = Reflect.construct; | ||
| } else { | ||
| _construct = function _construct(Parent, args, Class) { | ||
| var a = [null]; | ||
| a.push.apply(a, args); | ||
| var Constructor = Function.bind.apply(Parent, a); | ||
| var instance = new Constructor(); | ||
| if (Class) _setPrototypeOf(instance, Class.prototype); | ||
| return instance; | ||
| }; | ||
| } | ||
| return _construct.apply(null, arguments); | ||
| } | ||
| function _assertThisInitialized(self) { | ||
| if (self === void 0) { | ||
| throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); | ||
| } | ||
| return self; | ||
| } | ||
| var transform = function transform(code, options) { | ||
| if (options === void 0) { | ||
| options = {}; | ||
| } | ||
| var _options = options, | ||
| type = _options.type; | ||
| return transform$1(code, { | ||
| transforms: ['jsx', type === 'typescript' && 'typescript', type === 'flow' && 'flow'].filter(Boolean), | ||
| production: true | ||
| }).code; | ||
| }; | ||
| var exportRegexp = /^export default(?=\s+)/m; | ||
| var renderRegexp = /^render(?=\s*\([^)])/m; | ||
| var elementRegexp = /^</; | ||
| var prepareCode = function prepareCode(code) { | ||
| // export default Component | ||
| if (exportRegexp.test(code)) return code.replace(exportRegexp, 'return'); // render(<Component />) | ||
| if (renderRegexp.test(code)) return code.replace(renderRegexp, 'return'); // remove trailing comma for expression | ||
| code = code.replace(/;$/, ''); // inline elements | ||
| if (elementRegexp.test(code) && React.Fragment) code = "<>" + code + "</>"; | ||
| return "return (" + code + ")"; | ||
| }; | ||
| var evalCode = function evalCode(code, scope) { | ||
| var scopeKeys = Object.keys(scope); | ||
| var scopeValues = scopeKeys.map(function (key) { | ||
| return scope[key]; | ||
| }); // eslint-disable-next-line no-new-func | ||
| var fn = _construct(Function, scopeKeys.concat([code])); | ||
| return fn.apply(void 0, scopeValues); | ||
| }; | ||
| var withErrorBoundary = function withErrorBoundary(Element, errorCallback) { | ||
| var _temp; | ||
| return _temp = | ||
| /*#__PURE__*/ | ||
| function (_React$Component) { | ||
| _inheritsLoose(ErrorBoundary, _React$Component); | ||
| function ErrorBoundary() { | ||
| var _this; | ||
| for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { | ||
| args[_key] = arguments[_key]; | ||
| } | ||
| _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this; | ||
| _defineProperty(_assertThisInitialized(_this), "state", { | ||
| error: null | ||
| }); | ||
| return _this; | ||
| } | ||
| var _proto = ErrorBoundary.prototype; | ||
| _proto.componentDidCatch = function componentDidCatch(error) { | ||
| this.setState({ | ||
| error: error | ||
| }); | ||
| errorCallback(error.toString()); | ||
| }; | ||
| _proto.render = function render() { | ||
| if (this.state.error || !Element) return null; | ||
| if (React.isValidElement(Element)) return Element; | ||
| var type = typeof Element; | ||
| if (type === 'object') return Element.toString(); | ||
| if (type === 'function') return React.createElement(Element, null); | ||
| return Element; | ||
| }; | ||
| return ErrorBoundary; | ||
| }(React.Component), _temp; | ||
| }; | ||
| var generateElement = function generateElement(options, errorCallback) { | ||
| if (errorCallback === void 0) { | ||
| errorCallback = function errorCallback() {}; | ||
| } | ||
| var code = options.code, | ||
| scope = options.scope; | ||
| var trimmedCode = code ? code.trim() : ''; | ||
| if (!trimmedCode) return null; | ||
| var transformedCode = transform(prepareCode(trimmedCode), options); | ||
| var result = evalCode(transformedCode, _extends({ | ||
| React: React | ||
| }, scope)); | ||
| var Element = withErrorBoundary(result, errorCallback); | ||
| return React.createElement(Element, null); | ||
| }; | ||
| var compile = function compile(options, errorCallback) { | ||
| var element = null; | ||
| var error = null; | ||
| try { | ||
| element = generateElement(options, errorCallback); | ||
| } catch (err) { | ||
| error = err.toString(); | ||
| } | ||
| return { | ||
| element: element, | ||
| error: error | ||
| }; | ||
| }; | ||
| var Runner = | ||
| /*#__PURE__*/ | ||
| function (_React$Component) { | ||
| _inheritsLoose(Runner, _React$Component); | ||
| function Runner() { | ||
| var _this; | ||
| for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { | ||
| args[_key] = arguments[_key]; | ||
| } | ||
| _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this; | ||
| _defineProperty(_assertThisInitialized(_this), "state", { | ||
| error: null, | ||
| element: null | ||
| }); | ||
| _defineProperty(_assertThisInitialized(_this), "compile", function () { | ||
| var _this$props = _this.props, | ||
| code = _this$props.code, | ||
| scope = _this$props.scope, | ||
| type = _this$props.type; | ||
| var _compile = compile({ | ||
| code: code, | ||
| scope: scope, | ||
| type: type | ||
| }, function (error) { | ||
| _this.setState({ | ||
| error: error, | ||
| element: null | ||
| }); | ||
| }), | ||
| element = _compile.element, | ||
| error = _compile.error; | ||
| _this.setState({ | ||
| element: element, | ||
| error: error | ||
| }); | ||
| }); | ||
| return _this; | ||
| } | ||
| var _proto = Runner.prototype; | ||
| _proto.componentDidMount = function componentDidMount() { | ||
| this.compile(); | ||
| }; | ||
| _proto.componentDidUpdate = function componentDidUpdate(prevProps) { | ||
| var _this$props2 = this.props, | ||
| code = _this$props2.code, | ||
| scope = _this$props2.scope, | ||
| type = _this$props2.type; | ||
| if (code !== prevProps.code || scope !== prevProps.scope || type !== prevProps.type) { | ||
| this.compile(); | ||
| } | ||
| }; | ||
| _proto.render = function render() { | ||
| var children = this.props.children; | ||
| var _this$state = this.state, | ||
| element = _this$state.element, | ||
| error = _this$state.error; | ||
| return children({ | ||
| element: element, | ||
| error: error | ||
| }); | ||
| }; | ||
| return Runner; | ||
| }(React.Component); | ||
| Runner.propTypes = { | ||
| children: PropTypes.func.isRequired, | ||
| code: PropTypes.string.isRequired, | ||
| scope: PropTypes.object, | ||
| type: PropTypes.oneOf(['typescript', 'flow']) | ||
| }; | ||
| var useRunner = function useRunner(_ref) { | ||
| var code = _ref.code, | ||
| scope = _ref.scope, | ||
| type = _ref.type; | ||
| if (!useState) throw new Error('Require React 16.8 or above to use hooks'); // memoize scope to avoid effect loop | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| var memoScope = useMemo(function () { | ||
| return scope; | ||
| }, [scope && Object.keys(scope).join()]); | ||
| var _useState = useState({ | ||
| element: null, | ||
| error: null | ||
| }), | ||
| state = _useState[0], | ||
| setState = _useState[1]; | ||
| useEffect(function () { | ||
| var _compile = compile({ | ||
| code: code, | ||
| scope: memoScope, | ||
| type: type | ||
| }, function (error) { | ||
| setState({ | ||
| error: error, | ||
| element: null | ||
| }); | ||
| }), | ||
| element = _compile.element, | ||
| error = _compile.error; | ||
| setState({ | ||
| element: element, | ||
| error: error | ||
| }); | ||
| }, [code, memoScope, type]); | ||
| return state; | ||
| }; | ||
| export default Runner; | ||
| export { compile, useRunner }; | ||
| import e,{Component as r,isValidElement as t,createElement as o,Fragment as n,useState as s,useRef as c,useEffect as l}from"react";import{transform as p}from"sucrase";function i(){return i=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e},i.apply(this,arguments)}class u extends r{constructor(){super(...arguments),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(e){var r,t;null==(r=(t=this.props).onError)||r.call(t,e.toString())}render(){return this.state.hasError?null:this.props.children}}const a=/^export default(?=\s+)/m,m=/^render(?=\s*\([^)])/m,h=/^</,d=(r,s)=>{const{code:c,scope:l}=r,d=c?c.trim():"";if(!d)return null;const f=(e=>p(e,{transforms:["jsx","typescript"],production:!0}).code)((e=>a.test(e)?e.replace(a,"return"):m.test(e)?e.replace(m,"return"):(e=e.replace(/;$/,""),h.test(e)&&n&&(e="<>"+e+"</>"),"return ("+e+")"))(d)),y=((e,r)=>{const t=Object.keys(r),o=t.map(e=>r[e]);return new Function(...t,e)(...o)})(f,i({React:e},l));let g;return g=t(y)?y:"object"==typeof y?String(y):"function"==typeof y?o(y):null,o(u,{onError:s},g)},f=(e,r)=>{let t;try{t={element:d(e,r),error:null}}catch(e){t={element:null,error:e.toString()}}return t};class y extends r{constructor(){super(...arguments),this.state={error:null,element:null},this.compile=()=>{const{code:e,scope:r}=this.props,{element:t,error:o}=f({code:e,scope:r},e=>{this.setState({error:e,element:null})});this.setState({element:t,error:o})}}componentDidMount(){this.compile()}componentDidUpdate(e){this.props.code!==e.code&&this.compile()}render(){return this.props.children(this.state)}}const g=e=>{let{code:r,scope:t}=e;const[o,n]=s({element:null,error:null}),p=c(t);return p.current=t,l(()=>{const{element:e,error:t}=f({code:r,scope:p.current},e=>{n({error:e,element:null})});n({element:e,error:t})},[r]),o};export{y as Runner,f as compile,g as useRunner}; | ||
| //# sourceMappingURL=index.esm.js.map |
| { | ||
| "name": "react-runner", | ||
| "version": "0.5.1", | ||
| "version": "1.0.0-alpha.0", | ||
| "description": "Run your React code on the go", | ||
@@ -19,4 +19,7 @@ "homepage": "https://nihgwu.github.io/react-runner/", | ||
| ], | ||
| "main": "dist/index.cjs.js", | ||
| "main": "dist/index.js", | ||
| "module": "dist/index.esm.js", | ||
| "unpkg": "dist/foo.umd.js", | ||
| "exports": "./dist/index.modern.js", | ||
| "types": "dist/index.d.ts", | ||
| "files": [ | ||
@@ -26,7 +29,9 @@ "dist" | ||
| "scripts": { | ||
| "build": "rollup -c", | ||
| "watch": "rollup -c -w", | ||
| "test": "jest", | ||
| "tsc": "tsc", | ||
| "build": "microbundle build", | ||
| "watch": "microbundle watch", | ||
| "clean": "rimraf dist", | ||
| "lint": "eslint 'src/**/*.js'", | ||
| "prettier": "prettier --write '**/src/**/*.{js,css}'" | ||
| "lint": "eslint 'src/**/*.{ts,tsx}'", | ||
| "prettier": "prettier --write '**/src/**/*.{ts,tsx}'" | ||
| }, | ||
@@ -37,7 +42,27 @@ "dependencies": { | ||
| "peerDependencies": { | ||
| "prop-types": "^15.5.7", | ||
| "react": "^16.0.0", | ||
| "react-dom": "^16.0.0" | ||
| "react": "^16.0.0 || ^17 || ^18", | ||
| "react-dom": "^16.0.0 || ^17 || ^18" | ||
| }, | ||
| "gitHead": "4eb6d1b560c45e0b0cae62006fe8bf8000a34011" | ||
| "browserslist": [ | ||
| "Chrome > 61", | ||
| "Edge > 16", | ||
| "Firefox > 60", | ||
| "Safari > 10.1" | ||
| ], | ||
| "jest": { | ||
| "preset": "ts-jest", | ||
| "testEnvironment": "jsdom", | ||
| "collectCoverageFrom": [ | ||
| "src/**/*.{ts,tsx}", | ||
| "!src/index.ts" | ||
| ], | ||
| "coverageThreshold": { | ||
| "global": { | ||
| "statements": 95, | ||
| "branches": 95, | ||
| "functions": 95, | ||
| "lines": 95 | ||
| } | ||
| } | ||
| } | ||
| } |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Uses eval
Supply chain riskPackage uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by88.25%
45122
- Dependency count
- decreased by-25%
3
- Number of package files
- increased by200%
18
Worsened metrics
- Lines of code
- decreased by-84.57%
85
- Number of low quality alerts
- increased by200%
3
- Number of medium supply chain risk alerts
- increased byInfinity%
5
No dependency changes