cleaning up code, transpiling needs work

Author: Esteban Munoz Facusse

prettier.config.json .prettierrc

@@ -42,6 +42,7 @@
     "@types/react-dom": "~16.8.0",
     "css-loader": "^2.1.1",
     "just-stack-uifabric": ">=0.9.0",
+    "pretty-quick": "^1.11.1",
     "ts-loader": "^6.0.1",
     "typescript": "^3.5.1",
     "webpack-bundle-analyzer": "^3.3.2"

package-lock.json

@@ -1,7 +1,7 @@
 import React from 'react';
 import { PrimaryButton, Stack, Label, mergeStyleSets } from 'office-ui-fabric-react';
-// import { ITranspileOutput } from '../transpiler/transpile.types';
-import { transpile, _evalCode, transpileTSW } from '../transpiler/transpile';
+import { transpileTSW, _evalCode } from '../transpiler/transpile';
+import { IEvalCode, ITranspileOutput } from '../transpiler/transpile.types'
 
 const classNames = mergeStyleSets({
   code: {
@@ -42,20 +42,10 @@ export class App extends React.Component {
     editorHidden: true
   };
 
-  public componentDidmount(){
-    const reactInit = `{
-      react: "React"
-    },`;
-    try{
-      eval(reactInit);
-    }catch(ex){
-      console.log(ex.message)
-    }
-  }
-
   private onChange = (newVal: string, editor: any) => {
-    const rendered = _evalCode(transpile(newVal)!.outputString!);
-    transpileTSW(newVal, editor)
+    console.log( transpileTSW(editor).outputString)
+    const transpiledCode: ITranspileOutput = transpileTSW(editor)
+    const rendered: IEvalCode = transpiledCode.outputString ? _evalCode(transpiledCode.outputString) : { error: transpiledCode.error };
     if(rendered.outputHTML){
       this.setState({
         renderedCode: rendered.outputHTML,
@@ -67,6 +57,7 @@ export class App extends React.Component {
         error: rendered.error
       });
     }
+    console.log(transpiledCode)
   };
 
   private buttonClicked = (): void => {

package.json

@@ -31,13 +31,13 @@ export class Editor extends React.Component<IEditorProps> {
       language: this.props.language
     });
 
-    monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
-      target: monaco.languages.typescript.ScriptTarget.ES2015,
-      jsx: monaco.languages.typescript.JsxEmit.React,
-      experimentalDecorators: true,
-      preserveConstEnums: true,
-      lib: ['es5', 'dom']
-    })
+    // monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+    //   target: monaco.languages.typescript.ScriptTarget.ES2015,
+    //   jsx: monaco.languages.typescript.JsxEmit.React,
+    //   experimentalDecorators: true,
+    //   preserveConstEnums: true,
+    //   lib: ['es5', 'dom']
+    // })
 
     this.editor.onDidChangeModelContent(event => {
       this.props.onChange(this.editor!.getValue(), this.editor.getModel().uri);

src/components/App.tsx

@@ -45,4 +45,14 @@ export interface ICreateData {
     compilerOptions: ts.CompilerOptions;
     extraLibs: IExtraLibs;
 }
-export declare function create(ctx: IWorkerContext, createData: ICreateData): TypeScriptWorker;
+export declare function create(ctx: IWorkerContext, createData: ICreateData): TypeScriptWorker;
+
+export interface EmitOutput {
+    outputFiles: OutputFile[];
+    emitSkipped: boolean;
+}
+interface OutputFile {
+    name: string;
+    writeByteOrderMark: boolean;
+    text: string;
+}

src/components/Editor.tsx

@@ -1,46 +1,21 @@
-import * as ts from 'typescript';
 import { ITranspileOutput, IEvalCode } from './transpile.types';
-// import * as typescriptServices from 'monaco-editor/esm/vs/language/typescript/lib/typescriptServices';
 import * as monaco from 'monaco-editor';
-import {TypeScriptWorker} from './monacoTypescriptWorker';
+import { TypeScriptWorker, EmitOutput } from './monacoTypescriptWorker';
 
-export function transpile(code: string): ITranspileOutput {
-    let output: ITranspileOutput ={
-        outputString: undefined,
-        error: undefined
-    };
-    try{
-        output.outputString =
-        //     ts.transpile(code, )
-            ts.transpileModule(code, {
-            compilerOptions: {
-                module: ts.ModuleKind.ES2015,
-                alwaysStrict: true,
-                jsxFactory: 'React.createElement',
-                jsx: ts.JsxEmit.React,
-            }
-        }).outputText;
-        return output
-    }catch(ex){
-        output.error = ex.message;
-        return output;
-    }
-}
-
-//const text: string = "hello world";
-// ReactDOM.render(<div>{text}</div>, document.getElementById('output'));
-
-export function transpileTSW(code: string, model: any): ITranspileOutput {
+export function transpileTSW(model: any): ITranspileOutput {
     let transpiledOutput: ITranspileOutput ={
         outputString: undefined,
         error: undefined
     };
     try{
         monaco.languages.typescript.getTypeScriptWorker()
             .then(_worker=>{_worker(model)
-                .then((worker: TypeScriptWorker)=>{
-                    worker.getEmitOutput(model.toString()).then((output: ts.EmitOutput) =>{ transpiledOutput.outputString =  output.outputFiles[0].text});
-            })})
+                .then((worker: TypeScriptWorker)=>{ worker.getEmitOutput(model.toString())
+                    .then((output: EmitOutput) =>{
+                        transpiledOutput.outputString = output.outputFiles[0].text;
+                    });
+                });
+            });
     }catch(ex){
         transpiledOutput.error = ex.message;
     }