Function CompileDialog

packages/editor-app/src/components/CompileDialog.tsx:15–143

({
    isOpen,
    onClose,
    compiler,
    context,
    initialOptions
}: CompileDialogProps<TOptions>)

}

export function CompileDialog<TOptions = unknown>({
    isOpen,
    onClose,
    compiler,
    context,
    initialOptions
}: CompileDialogProps<TOptions>) {
    const { t } = useLocale();
    const [options, setOptions] = useState<TOptions>(initialOptions as TOptions);
    const [isCompiling, setIsCompiling] = useState(false);
    const [result, setResult] = useState<CompileResult | null>(null);
    const [validationError, setValidationError] = useState<string | null>(null);

    useEffect(() => {
        if (isOpen && initialOptions) {
            setOptions(initialOptions);
            setResult(null);
            setValidationError(null);
        }
    }, [isOpen, initialOptions]);

    useEffect(() => {
        if (compiler.validateOptions && options) {
            const error = compiler.validateOptions(options);
            setValidationError(error);
        }
    }, [options, compiler]);

    if (!isOpen) return null;

    const handleCompile = async () => {
        if (validationError) {
            return;
        }

        setIsCompiling(true);
        setResult(null);

        try {
            const compileResult = await compiler.compile(options, context);
            setResult(compileResult);
        } catch (error) {
            setResult({
                success: false,
                message: `${t('compileDialog.compileFailed')}: ${error}`,
                errors: [String(error)]
            });
        } finally {
            setIsCompiling(false);
        }
    };

    return (
        <div className="compile-dialog-overlay">
            <div className="compile-dialog">
                <div className="compile-dialog-header">
                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                        <Cpu size={20} />