Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import * as monaco from '@uifabric/monaco-editor';
import { LanguageServiceDefaultsImpl as TypescriptDefaults } from '@uifabric/monaco-editor/monaco-typescript.d';
import { getWindow } from 'office-ui-fabric-react/lib/Utilities';
import { ITsxEditorProps } from './TsxEditor.types';
import { transpileAndEval } from '../transpiler/transpile';
import { IMonacoTextModel, ICompilerOptions, IPackageGroup } from '../interfaces/index';
import { Editor } from './Editor';
import { SUPPORTED_PACKAGES } from '../utilities/index';
import { IEditorProps } from './Editor.types';
const typescript = monaco.languages.typescript;
const typescriptDefaults = typescript.typescriptDefaults as TypescriptDefaults;
const filePrefix = 'file:///';
const filename = filePrefix + 'main.tsx';
/**
* Wrapper for rendering a Monaco instance and also transpiling/eval-ing the React example code inside.
*/
export const TsxEditor: React.FunctionComponent = (props: ITsxEditorProps) => {
const { editorProps, onTransformFinished, compilerOptions, supportedPackages = SUPPORTED_PACKAGES } = props;
// Hooks must be called unconditionally, so we have to create a backup ref here even if we
// immediately throw it away to use the one passed in.
const backupModelRef = React.useRef();
const modelRef = editorProps.modelRef || backupModelRef;
export function transpile(model: IMonacoTextModel): Promise {
const transpiledOutput: ITransformedCode = { error: undefined, output: undefined };
const filename = model.uri.toString();
return monaco.languages.typescript
.getTypeScriptWorker()
.then((getWorker: (uri: monaco.Uri) => Promise) => getWorker(model.uri))
.then(worker => {
return worker.getEmitOutput(filename).then((output: EmitOutput) => {
// Get diagnostics to find out if there were any syntax errors (there's also getSemanticDiagnostics
// for type errors etc, but it may be better to allow the user to just find and fix those
// via intellisense rather than blocking compilation, since they may be non-fatal)
return worker.getSyntacticDiagnostics(filename).then(syntacticDiagnostics => {
syntacticDiagnostics = syntacticDiagnostics.filter(d => d.category === 1 /*error*/);
if (syntacticDiagnostics.length) {
// Don't try to run the example if there's a syntax error
transpiledOutput.error = _getErrorMessages(syntacticDiagnostics, model.getValue());
} else {
transpiledOutput.output = output.outputFiles[0].text;
if (win && win.transpileLogging) {