Play with TypeScript compiler (and others) APIs online. Learn by exploring a rich example gallery
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
assets
src
test
.gitignore
README.md
package-lock.json
package.json
shrinkwrap.yaml
tsconfig.json

README.md

TypeScript Compiler API online editor

Objectives / Features

Basically is a server side node.js application that let the user input two TypeScript source files, one is its program using TypeScript compiler APIs and others, and the second is an example TypeScript source file that will be manipulated by the first program. Then the Program is evaluated server-side and the results are printed back to the browser (probably modifying the example source file)

  • It has lots of working examples using different TypeScript APIs and related libraries.

  • Thanks to glitch infrastructure is online! https://typescript-api-playground.glitch.me/

  • Easily run in local host: npm install && npm start & ; firefox localhost:8080

  • Uses the great TypeScript monaco-editor so the experience is incredible

  • The idea is being able to point to users to these examples so they can play online with them when asking for help.

Notes / difficulties / learning

  • editor.js - is a handlebars template that contains big ibraries like typescript.d.ts embedded inside - now trying to migrate reading files and fixing production cache.

  • ts-simple-ast.d.ts needed little modification at the begginig of the heads (see comments ) and explicit declaration using compilerOptions path and baseUrl (see editor.js monaco.languages.typescript.typescriptDefaults.setCompilerOptions )

  • for typescript.d.ts to work we need to add the following to the top of the file:

declare module "typescript"{
    export = ts
}
  • tsquery.d.ts : had to run the following to join all .d.ts in one file :

dts-generator --name tsquery --out package-name.d.ts --project /home/sg/git/tsquery

TODO

  • user being able to save / load its work - cheap solution like typescript playground use url parameters as source code input. Maybe a list in the server in a file ?

  • make some specs - like run server and post something to /run and expect some answer. In particular example code with string templates and different template quotes like this: tsquery simple example

  • a help dialog or alert with minimal instructions

  • better example tagging and sorting

  • typechecking example using createProgram

  • nice idea: from input editor pass current cursor position / selected text range to main() so we can refactor it!

  • when selecting example reflect the change in the url

  • example of transpile -> transformation

  • add candomed

Dones :

  • Production , performance, security: we are eval() and compiling / rendering templates on each request for fast development - we need a production mode that dont do this, caches everything in memory.