import { LivePreview, LiveProvider, useLiveContext } from 'code-live-sandbox';
// Requirements for the Editor component, implement an editable container. For example: MirrorCode, vscode, etc.
import Editor from '../Editor'

const Live = useMemo(() => {
      let node;
      try {
          node = !showView ? <Editor /> : <LivePreview />;
      } catch (err) {
          node = <Editor />;
      }
      return (
          <LiveProvider
              code={value}
              scope={{
                  ...scope,
                  data: props,
              }}
          >
              <Error />
              {node}
          </LiveProvider>
      );
  }, [props, value, showView]);

import { setDrive } from 'code-live-sandbox';
import { transform as _transform } from 'sucrase';

setDrive((code: string) => {
  return _transform(code, {
    transforms: ['jsx', 'typescript', 'imports'],
    production: true,
  }).code.substring(13); // remove leading `"use strict";`
});

import { changeTransform } from 'code-live-sandbox';
import { merge } from 'lodash';
// Set custom compilation rules for components
changeTransform((config) => {
  return merge(
    {
      jsc: {
        transform: {
          react: { development: process.env.NODE_ENV === 'development' },
        },
      },
    },
    config
  );
});