import { requireModule } from './requireModule';
import { compile } from './compile';

type ResultType = {
    component: any;
    error: string;
};

const evalInContext = (
    code: string,
    require: (module: string) => any,
    exports: Record<string, any>,
): (() => any) =>
    // eslint-disable-next-line no-new-func
    new Function('require', 'exports', code).bind(null, require, exports);

export const execute = async (code: string): Promise<ResultType> => {
    try {
        const compiledCode = await compile(code);

        const exports: any = {};
        const evalCode = evalInContext(compiledCode, requireModule, exports);
        evalCode();

        return {
            component: exports.default,
            error: '',
        };
    } catch (error) {
        const { message, stack } = error as Error;
        return {
            component: null,
            error: stack ?? message,
        };
    }
};

import { transpileModule, ModuleKind, JsxEmit } from 'typescript';

type WorkerMessageType = {
    name: string;
    args?: string[];
};

const compile = async (code: string) => {
    const result = transpileModule(
        `import React from 'react';

${code}`,
        {
            compilerOptions: {
                module: ModuleKind.CommonJS,
                allowJs: true,
                jsx: JsxEmit.React,
            },
        },
    );

    return result.outputText;
};

const actionMap: Record<string, (...args: string[]) => Promise<string>> = {
    compile,
};

self.onmessage = ({ data }: MessageEvent<WorkerMessageType>) => {
    const { name, args } = data;

    if (name in actionMap) {
        actionMap[name](...(args ?? [])).then((result) => {
            self.postMessage({
                name,
                result,
            });
        });
    }
};

const path = require('path');
const webpack = require('webpack');

const src = path.resolve(__dirname, './src');
const build = path.resolve(__dirname, './public');
const buildProduction = path.resolve(__dirname, './build');

module.exports = (env, argv) => {
    const development = argv.mode === 'development';

    return {
        mode: 'none',
        target: 'webworker',
        entry: './src/worker.ts',
        output: {
            filename: 'worker.js',
            path: development ? build : buildProduction,
        },
        resolve: {
            modules: ['node_modules', src],
            extensions: ['.js', '.json', '.jsx', '.ts', '.tsx'],
        },
        plugins: [
            new webpack.HotModuleReplacementPlugin(),
            new webpack.DefinePlugin({}),
        ],
        module: {
            rules: [
                {
                    test: /\.ts?$/,
                    use: [
                        {
                            loader: 'ts-loader',
                            options: {
                                compilerOptions: {
                                    module: 'esnext',
                                    noEmit: false,
                                },
                            },
                        },
                    ],
                },
            ],
        },
    };
};

import { FC } from 'react';
import { CircularProgress } from '@mui/material';

import { PlaygroundPropsType } from './type';
import {
    PlaygroundRoot,
    PlaygroundTop,
    PlaygroundBottom,
    PlaygroundError,
} from './style';
import { usePlayground } from './hooks/usePlayground';
import { Editor } from '../Editor';
import { ErrorBoundary } from '../ErrorBoundary';

export const Playground: FC<PlaygroundPropsType> = (props) => {
    const {
        rootProps,
        editorProps,
        errorBoundaryProps,
        Component,
        compilationError,
        loading,
    } = usePlayground(props);

    return (
        <PlaygroundRoot {...rootProps}>
            <PlaygroundTop>
                <Editor {...editorProps} />
            </PlaygroundTop>
            <PlaygroundBottom>
                <ErrorBoundary {...errorBoundaryProps}>
                    {!loading && Component && <Component />}
                    {!loading && compilationError && (
                        <PlaygroundError>{compilationError}</PlaygroundError>
                    )}
                    {loading && <CircularProgress />}
                </ErrorBoundary>
            </PlaygroundBottom>
        </PlaygroundRoot>
    );
};

import { ComponentType, useCallback, useEffect, useState } from 'react';
import { debounce } from 'throttle-debounce';

import { PlaygroundPropsType } from '../type';
import { execute } from '../../../lib/execute';

const defaultValue = `import { Stack, Button } from '@mui/material';

export default function BasicButtons() {
  return (
    <Stack spacing={2} direction="row">
      <Button variant="text">Text</Button>
      <Button variant="contained">Contained</Button>
      <Button variant="outlined">Outlined</Button>
    </Stack>
  );
}
`;

export const usePlayground = (props: PlaygroundPropsType) => {
    const [value, setValue] = useState(defaultValue);

    const [loading, setLoading] = useState(true);

    const [compilationResult, setCompilationResult] = useState<{
        component: ComponentType<unknown>;
    } | null>(null);
    const [compilationError, setCompilationError] = useState('');

    const onEditorValueChangeDebounced = useCallback(
        debounce(500, (nextValue: string) => {
            execute(nextValue).then(({ error, component }) => {
                if (error) {
                    setCompilationError(error);
                    setCompilationResult(null);
                } else {
                    setCompilationError('');
                    setCompilationResult({ component });
                }
                setLoading(false);
            });
        }),
        [],
    );

    useEffect(() => {
        onEditorValueChangeDebounced(defaultValue);
    }, [onEditorValueChangeDebounced]);

    return {
        rootProps: props,
        editorProps: {
            value: value,
            onValueChange: (nextValue: string) => {
                setLoading(true);
                setValue(nextValue);
                onEditorValueChangeDebounced(nextValue);
            },
        },
        errorBoundaryProps: {
            onError: (error: string | null) => {
                setCompilationResult(null);
                setCompilationError(error ?? 'An error occurred');
            },
        },
        Component: compilationResult ? compilationResult.component : null,
        compilationError,
        loading,
    };
};