Transpile in browser and show warnings

[tomitrescak]

What would be the best approach to transpile ts to us live in browser and to obtain transpiration warnings?

I've found that typescript.js has a method transpile, but

1. It has 2mb
2. It does not show warnings

How can I minimise the transputer and obtain warnings? Please, I need to code and execute ts directly in browser.

Thanks

[mhegazy]

What sort of warnings do you want to show? can you elaborate on the scenario you are trying to achive

[mhegazy]

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.

[tomitrescak]

@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!

[mhegazy]

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?

[tomitrescak]

@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.

[mhegazy]

@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.

[tomitrescak]

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!

[mhegazy]

Thanks @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.

[quantuminformation]

Is there a lite version of ts services? Its about 3mb to load?

[mhegazy]

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.

[quantuminformation]

@mhegazy ok!

#9245

[tomitrescak]

We use minified version and with server packing comes down to bout 400kb. Still a chunky one but works beautifully.

[iulia-codes]

@tomitrescak could you please point to the blog post where you describe the solution of using typescript in the browser?