'use strict'; Object.defineProperty(exports, '__esModule', { value: true, }); var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); var _createClass2 = require('babel-runtime/helpers/createClass'); var _createClass3 = _interopRequireDefault(_createClass2); var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); var _possibleConstructorReturn3 = _interopRequireDefault( _possibleConstructorReturn2 ); var _inherits2 = require('babel-runtime/helpers/inherits'); var _inherits3 = _interopRequireDefault(_inherits2); var _react = require('react'); var _react2 = _interopRequireDefault(_react); var _reactNodeResolver = require('react-node-resolver'); var _reactNodeResolver2 = _interopRequireDefault(_reactNodeResolver); var _codesandboxer = require('codesandboxer'); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } var CodeSandboxDeployer = (function(_Component) { (0, _inherits3.default)(CodeSandboxDeployer, _Component); function CodeSandboxDeployer() { var _ref; var _temp, _this, _ret; (0, _classCallCheck3.default)(this, CodeSandboxDeployer); for ( var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++ ) { args[_key] = arguments[_key]; } return ( (_ret = ((_temp = ((_this = (0, _possibleConstructorReturn3.default)( this, (_ref = CodeSandboxDeployer.__proto__ || (0, _getPrototypeOf2.default)(CodeSandboxDeployer)).call.apply( _ref, [this].concat(args) ) )), _this)), (_this.state = { parameters: '', isLoading: false, isDeploying: false, }), (_this.loadFiles = function() { var _this$props = _this.props, onLoadComplete = _this$props.onLoadComplete, providedFiles = _this$props.providedFiles, dependencies = _this$props.dependencies, name = _this$props.name; // by assembling a deploy promise, we can save it for later if loadFiles is // being called by `preload`, and preload can use it once it is ready. // We return deployPromise at the end so that non-preloaded calls can then be // resolved var deployPromise = (0, _codesandboxer.fetchFiles)(_this.props) .then(function(fetchedInfo) { var template = 'create-react-app'; if (_this.props.template) { template = _this.props.template; } else if (_this.props.examplePath.match(/\.tsx?$/)) { template = 'create-react-app-typescript'; } var _finaliseCSB = (0, _codesandboxer.finaliseCSB)(fetchedInfo, { extraFiles: providedFiles, extraDependencies: dependencies, name: name, template: template, }), parameters = _finaliseCSB.parameters; _this.setState( { parameters: parameters, isLoading: false, files: fetchedInfo.files, }, function() { if (onLoadComplete) { onLoadComplete({ parameters: parameters, files: fetchedInfo.files, }); } } ); }) .catch(function(error) { _this.setState({ error: error, isLoading: false }); if (onLoadComplete) onLoadComplete({ error: error }); }); _this.setState({ isLoading: true, deployPromise: deployPromise, }); return deployPromise; }), (_this.deploy = function() { var _this$props2 = _this.props, afterDeploy = _this$props2.afterDeploy, skipRedirect = _this$props2.skipRedirect, afterDeployError = _this$props2.afterDeployError; var _this$state = _this.state, parameters = _this$state.parameters, error = _this$state.error; if (error) return; (0, _codesandboxer.sendFilesToCSB)(parameters) .then(function(_ref2) { var sandboxId = _ref2.sandboxId, sandboxUrl = _ref2.sandboxUrl; _this.setState({ sandboxId: sandboxId, sandboxUrl: sandboxUrl, isDeploying: false, isLoading: false, }); if (!skipRedirect) { window.open(sandboxUrl); } if (afterDeploy) { afterDeploy( (0, _codesandboxer.getSandboxUrl)(sandboxId, 'embed'), sandboxId ); } }) .catch(function(errors) { if (afterDeployError) { afterDeployError({ name: 'error deploying to codesandbox', content: errors, }); } _this.setState({ error: { name: 'error deploying to codesandbox', content: errors, }, }); }); }), (_this.deployToCSB = function(e) { var _this$state2 = _this.state, deployPromise = _this$state2.deployPromise, isDeploying = _this$state2.isDeploying; if (e) { e.preventDefault(); } if (isDeploying) return null; _this.setState({ isDeploying: true }); if (deployPromise) { deployPromise.then(_this.deploy); } else { _this.loadFiles().then(_this.deploy); } }), (_this.getButton = function(ref) { if (!ref) return; _this.button = ref; }), _temp)), (0, _possibleConstructorReturn3.default)(_this, _ret) ); } (0, _createClass3.default)(CodeSandboxDeployer, [ { key: 'componentDidMount', value: function componentDidMount() { if (this.props.autoDeploy) { this.deployToCSB(); return; } if (this.button) this.button.addEventListener('click', this.deployToCSB); if (this.props.preload) this.loadFiles(); }, }, { key: 'componentWillUnmount', value: function componentWillUnmount() { if (this.button) this.button.removeEventListener('click', this.deployToCSB); }, }, { key: 'render', value: function render() { var _state = this.state, isLoading = _state.isLoading, isDeploying = _state.isDeploying, error = _state.error, sandboxId = _state.sandboxId, sandboxUrl = _state.sandboxUrl; return _react2.default.createElement( _reactNodeResolver2.default, { innerRef: this.getButton }, this.props.children({ isLoading: isLoading, isDeploying: isDeploying, error: error, sandboxId: sandboxId, sandboxUrl: sandboxUrl, }) ); }, }, ]); return CodeSandboxDeployer; })(_react.Component); CodeSandboxDeployer.defaultProps = { children: function children() { return _react2.default.createElement( 'button', { type: 'submit' }, 'Deploy to CodeSandbox' ); }, pkgJSON: {}, dependencies: {}, providedFiles: {}, importReplacements: [], extensions: [], style: { display: 'inline-block' }, }; exports.default = CodeSandboxDeployer;