Transpile in browser and show warnings #2808

Activity

1. mhegazy commented on Apr 16, 2015

   

   Mohamed Hegazy (mhegazy)

   on Apr 16, 2015

   Contributor

   More actions

   What sort of warnings do you want to show? can you elaborate on the scenario you are trying to achive
2. mhegazy commented on Apr 17, 2015

   

   Mohamed Hegazy (mhegazy)

   on Apr 17, 2015

   Contributor

   More actions

   ts.transpile is the correct entry point. we are looking of slimming it down. for the short term it still needs the checker code, but in the future it should be possible to do it with just the parser and the emitter, which is much smaller.

   As for errors, if you are in transpile mode, there are a lot of errors that you would get, e.g. undefined globals, unknown module imports, missing .d.ts.. etc.. If you are in transpile mode you only get syntactic errors, for other errors you will need to do a full compilation.

   if what you want is to do a full compilation in the browser, you should be looking at this sample instead and implement a CompilerHost.
3. tomitrescak commented on Apr 17, 2015

   

   Tomas Trescak (tomitrescak)

   on Apr 17, 2015

   Author

   More actions

   Mohamed Hegazy (@mhegazy) thanks for the prompt answer!

   My scenario is similar to the one on typescript website, where users can code and execute typescript directly in the browser. The difference is, that there would be no stored files and code is stored in the database.

   Therefore, what I will not need is checking for module imports but I will need everything else (parameter access, type checking and more)

   What I could not grasp from the example you sent me, is how to do the compilation directly from the source without using files or how to get previously mentioned errors from transpiler.

   Thanks!
4. mhegazy commented on Apr 17, 2015

   

   Mohamed Hegazy (mhegazy)

   on Apr 17, 2015

   Contributor

   More actions

   if you want to do something like the typescript playground, then you can not use transpile; this is not going to give you the checking errors you are looking for. you also need to include the library file (lib.d.ts).

   one option if you are compiling a single file is to use typescript-simple.

   Otherwise, I can help getting you started using the API, a few questions: Do you want to do any editor functionality (e.g. completion, quick info on hover..etc..)? do you want the emitted js? do you want to run it later on? if so do you want to have source map support?
5. tomitrescak commented on Apr 18, 2015

   

   Tomas Trescak (tomitrescak)

   on Apr 18, 2015

   Author

   More actions

   Mohamed Hegazy (@mhegazy) The typescript simple looks nice but it's very much bound to the server version. TO be honest, I had luck with npm package typescript-compiler, which needed to be only slightly adjusted to work directly in the browser. I have created a Meteor package out of it and will soon post a link here.

   I will also run the edited code in the browser, but I already have a functionality for that,
   Concerning the rest of the functionality you mention, such as completion or quick info, sounds intriguing, do you have any hints on how to approach it?

   Thanks!

   PS: The project I work on teaches Uni students programming. We already have more than 600 students beta testing our system, but currently the biggest drawback was compilation, which was not detecting enough errors. Typescript seems like a perfect match for us.
6. mhegazy commented on Apr 20, 2015

   

   Mohamed Hegazy (mhegazy)

   on Apr 20, 2015

   Contributor

   More actions

   Tomas Trescak (@tomitrescak) looks like what you want is to use the Language Service API, this allows you to add additional features in the feature like code completion, type information, parameter help, folding, formatting, etc..

   I would start by looking at this example: https://github.com/Microsoft/TypeScript/wiki/Using-the-Compiler-API#incremental-build-support-using-the-language-services

   you will need to implement ts.LanguageServiceHost to allow the LS object to communicate with the world.

   • getScriptFileNames: the names of the files you are editing, if this is a single file playground, then it is a list of 1. i would give it a special name e.g. return ["file.ts"]
   • getScriptVersion a version is checked to know if the file has changed. When a file changes it will be reparsed, so something like return fileVersion++; would work
   • getScriptSnapshot: gets the text of the file. for your case, i expect a relatively small code size so i would just return return ts.ScriptSnapshot.fromString(fileText);. Other uses of this function would be to return a change range, this allows for incremental parsing support, that can be helpful in usual editor/IDE scenarios where users are continuously typing.
   • getCurrentDirectory: used for file resolution, in your case just return "";
   • getCompilationSettings: your compiler options, return {} to use defaults
   • getDefaultLibFileName: the name of the default library (e.g. lib.d.ts), you do not need this if you are not planning on showing errors. whatever name you return here will be the name you get in getScriptSnapshot later on when the LS tries to parse the file.

   Create a new LS object and pass in your host implantation:

   var services = ts.createLanguageService(servicesHost, ts.createDocumentRegistry())

   to get the JS output, call:

   var output = services.getEmitOutput("file1.ts");
   
   // And you can execute it
   eval(output.outputFiles[0].text);

   to get errors:

   var diagnostics = services.getCompilerOptionsDiagnostics() // global errors, e.g. using the wrong get/set with --target ES3
               .concat(services.getSyntacticDiagnostics("file1.ts"))  // parse errors, e.g. identifier expected
               .concat(services.getSemanticDiagnostics("file1.ts")); // semantic errors e.g. number not assignable to string

   Hope this helps. Please feel free to ping me if you have other questions. would be glad to help out more in any way.
7. Mohamed Hegazy (mhegazy)

   added

   QuestionAn issue which isn't directly actionable in codeAn issue which isn't directly actionable in code

   on Apr 20, 2015
8. Mohamed Hegazy (mhegazy)

   closed this as completedon Apr 23, 2015
9. tomitrescak commented on Apr 23, 2015

   

   Tomas Trescak (tomitrescak)

   on Apr 23, 2015

   Author

   More actions

   Mohamed, thanks for your help. Soon I will write a blogpost recapitulating what I done so I can share it with the world. Thanks again!
10. mhegazy commented on Apr 23, 2015

    

    Mohamed Hegazy (mhegazy)

    on Apr 23, 2015

    Contributor

    More actions

    Thanks Tomas Trescak (@tomitrescak). would love to read the blog as well. please let us know if there are any issues you run into or any rough edges that you would run into with the API.
11. quantuminformation commented on Jun 17, 2016

    

    Nikos (quantuminformation)

    on Jun 17, 2016

    More actions

    Is there a lite version of ts services? Its about 3mb to load?
12. mhegazy commented on Jun 17, 2016

    

    Mohamed Hegazy (mhegazy)

    on Jun 17, 2016

    Contributor

    More actions

    not currently. we can minify it, and that will shrink it considerably, given that it has comments included. we can also build a new js file with only parts needed for transpilation. it has not been requested before. feel free to log an issue for this.
13. quantuminformation commented on Jun 18, 2016

    

    Nikos (quantuminformation)

    on Jun 18, 2016

    More actions

    Mohamed Hegazy (@mhegazy) ok!

    #9245
14. tomitrescak commented on Jun 18, 2016

    

    Tomas Trescak (tomitrescak)

    on Jun 18, 2016

    Author

    More actions

    We use minified version and with server packing comes down to bout 400kb. Still a chunky one but works beautifully.
15. iulia-codes commented on Oct 10, 2017

    

    Julia (iulia-codes)

    on Oct 10, 2017

    More actions

    Tomas Trescak (@tomitrescak) could you please point to the blog post where you describe the solution of using typescript in the browser?
16. microsoft

    locked and limited conversation to collaborators on Jun 18, 2018