How to use babel-standalone - 10 common examples

export const liveRender = (code) => {

  try {
    const exportScript = '\n export default MyComponent'
    const noWhiteSpace = code.replace(/\s/g, '');
    const modifiedCode = (noWhiteSpace.includes('ReactDOM.render(,document.getElementById(\'challenge-node\'))') || noWhiteSpace.includes('ReactDOM.render(,document.getElementById("challenge-node"))')) ? code.concat(exportScript) : '';
    const es5 = transform(modifiedCode, { presets: [ 'es2015', 'react' ] }).code;
    const renderedComponent = React.createElement(eval(es5));
    return renderedComponent;
  } catch (err) {
    // console.log(`Live rendering failure: ${err}`);
  }

}

},
    {
      test: 4,
      status: false,
      condition: error_4
    }
  ];

  let es5, shallowRender, mockedComponent, passed = true;

  const exportScript = '\n export default MyComponent'
  const modifiedCode = code.concat(exportScript);

  // test 0: try to transpile JSX, ES6 code to ES5 in browser
  try {
    es5 = transform(modifiedCode, { presets: [ 'es2015', 'stage-2', 'react' ] }).code;
    testResults[0].status = true;
    if (!errorSuppression) console.log('No transpilation errors!');
  } catch (err) {
    passed = false;
    testResults[0].status = false;
    if (!errorSuppression) console.error(`Transpilation error: ${err}`);
  }

  // try to shallow render the component with Enzyme
  try {
    var React = require('react');
    mockedComponent = mount(React.createElement(eval(es5)));
  } catch (err) {
    passed = false;
    if (!errorSuppression) console.error(`Invalid React code: ${err}`);
  }

condition: 'The div contains an img tag.'
		},
		{
			test: 4,
			status: false,
			condition: 'The provided JSX element is rendered to the DOM node with id \'challenge-node\'.'
		}
	];

	const prepend = `(function() {`
	const apend = `; return JSX })()`
	const modifiedCode = prepend.concat(code).concat(apend);
	
	// test 0: try to transpile JSX, ES6 code to ES5 in browser
	try {
		es5 = transform(modifiedCode, { presets: [ 'es2015', 'react' ] }).code;
		testResults[0].status = true;
	} catch (err) {
		console.log(err);
		passed = false;
		testResults[0].status = false;
	}
	
	// shallow render the component with Enzyme
	try {
		jsx = eval(es5);
		console.log(jsx.type, 'peter')
	} catch (err) {
		console.log(err);
		passed = false;
	}

{
      test: 2,
      status: false,
      condition: 'The redux store should have a value of 5 for the state.'
    }
  ]

  // this code hijacks the user input to create an IIFE
  // which returns the store from Redux as an object
  const prepend = `(function() {`
  const append = `;\n return store })()`
  const modifiedCode = prepend.concat(code).concat(append);

  // test 0: try to transpile JSX, ES6 code to ES5 in browser
  try {
    es5 = transform(modifiedCode, { presets: [ 'es2015', 'react' ] }).code;
    testResults[0].status = true;
    if (!errorSuppression) console.log('No transpilation errors!');
  } catch (err) {
    passed = false;
    testResults[0].status = false;
    if (!errorSuppression) console.error(`Transpilation error: ${err}`);
  }

  // save the store from redux to test here
  try {
    var React = require('react');
    var Redux = require('redux');
    store = eval(es5)
  } catch (err) {
    passed = false;
    if (!errorSuppression) console.error(`Code evaluation error: ${err}`);

},
		{
			test: 4,
			status: false,
			condition: error_4
		}
	];

	let es5, mockedComponent, passed = true;

	const exportScript = '\n export default MyComponent'
	const modifiedCode = code.concat(exportScript);

	// test 0: try to transpile JSX, ES6 code to ES5 in browser
	try {
		es5 = transform(modifiedCode, { presets: [ 'es2015', 'react' ] }).code;
		testResults[0].status = true;
		if (!errorSuppression) console.log('No transpilation errors!');
	} catch (err) {
		passed = false;
		testResults[0].status = false;
		if (!errorSuppression) console.error(`Transpilation error: ${err}`);
	}

	// try to shallow render the component with Enzyme
	try {
		var React = require('react');
		mockedComponent = mount(React.createElement(eval(es5)));
	} catch (err) {
		passed = false;
		if (!errorSuppression) console.error(`Invalid React code: ${err}`);
	}

static execute(name, code) {
        const opts = { presets: ['es2015', 'stage-0']};
        const compiledCode = Babel.transform(code, opts).code;

        switch (name) {
            case 'babel':
                CodeExecuteHelper.evaluate(compiledCode);
                break;

            case 'browser':
                CodeExecuteHelper.evaluate(code);
                break;

            // no default
        }
    }

const compileSrc = src => {
  const presets = [
    'es2015', // TODO: replace with preset-env when supported
    'react',
    'stage-2'
  ]

  return transform(src, { presets }).code
}

const compileSrc = src =>
  transform(src, {
    presets: [
      'es2015', // TODO: replace with preset-env when supported
      'react',
      'stage-2'
    ]
  }).code

target.prototype._renderChildren = function() { // eslint-disable-line no-param-reassign
    let transpiledCode;
    try {
      transpiledCode = transform(
        `{<div>${this.props._childrenCode}</div>}`,
        { presets: ['es2015', 'react', 'stage-0'] }
      ).code;
      /* TO-DO It will be reimplemented in more reactive way when scope component will be removed */
      if (window._showroom) {
        window._showroom.codeCompilationError = null;
      } else {
        window._showroom = {};
      }
    } catch (err) {
      /* TO-DO It will be reimplemented in more reactive way when scope component will be removed */
      if (window._showroom) {
        window._showroom.codeCompilationError = err.message;
      } else {
        window._showroom = {};
      }

self.addEventListener('message', event => {
  const { code, moduleName = '' } = event.data;
  try {
    const newCode = transform(code, {
      presets: ['es2015', 'react', 'stage-0'],
      retainLines: true,
    }).code;

    self.postMessage(newCode);
  } catch (e) {
    e.message = e.message.split('\n')[0].replace('unknown', moduleName);
    throw new Error(e);
  }
});