I'd like to propose some features for the TSTL web playground, after having used it loads over the recent weeks. I wanted to collect feedback on features etc., and also if any of this makes sense. Some of the features I'm proposing might have good reasons for not being included that I'm missing context on. Probably some/most/all of these are pretty opinionated.
- Lua versions: Swap out fengari and bring in the Lua WASM bindings for 5.0-5.5 that TSTL already builds/owns. Will allow checking Lua behavior across more targets. LuaJIT/Luau(Lune/Lute) much harder and probably out of scope here.
- Config: one of the bigger ones, so I'll summarize and go into more detail below. Basically, allow the user to modify a bit more of tsconfig.json in a UI.
- JS eval: Lua is already run and eval'ed. We can run the TS code too in a secure sandbox and show the eval on the left. iframe+CSP sandbox+etc. Would be useful for quickly checking playground links used for repros on bug reports
- Runtime/timing: show millisecond timing for (1) transpile time for Lua emit, (2) eval time for JS, (3) eval time for Lua. For Lua, we can also show memory usage, garbage collection, retained memory
- Lua diagnostics: parse Lua runtime errors for line numbers, surface them as Monaco markers
- TS formatter: include a way to format the TS code with prettier
- Drag to resize quadrants: Allow the user to drag horizontal and vertical dividers between the four quadrants (TS, Lua, JS eval, Lua eval) to resize. Also double click to reset).
- Stale indicator: show when Lua emit/JS eval/Lua eval are "running"/stale after the editor debounce and before completion.
- Mobile friendly: Impossible to fully realize a "mobile friendly" experience because Monaco is basically unusable, but we can e.g. have a tabbed view on mobile for TS/Lua/JS-eval/Lua-eval. If we really wanted mobile friendly, I think Code Mirror is an option, but the implementation effort to get this to work at parity is a bit prohibitive relative to the reward
Config
Allow editing more of the tsconfig.json than Lua version. Could also have a "view only" mode on the actual JSON for users to see what the tsconfig.json would actually look like. All of this would be URL encoded. Back-compat is straightforward: the current URL has a #code part -- could use that as a version hint and introduce a "version migration" step that modernizes old URLs. URLs will get somewhat bigger with more stuff, but can be mitigated:
- Have sane defaults and exclude options when they match default
- More efficient serialization than JSON
Previous related issue: #145
compilerOptions
- ES target
removeComments (which is not fully handled IIUC)- supplying the ambient types array (can be a preset with checkboxes: language-extensions, lua-types). For types: could perhaps even support allowing the user to supply some URL like love2d definitions, but a bit exotic. Another "types" thing: can allow the user to toggle the console.log/print types.
TSTL options
- noImplicitSelf
- lualib import (can support inline, which is the default, or require-minimal, if the user wants a more compressed Lua code display).
- other TSTL options that could be intereseting -- this list is not meant to be exhaustive
tslua example
Disclosure: I wrote tslua, a Go-based TS-to-Lua transpiler. Most of the playground features above are implemented there to preview:
https://realcoldfry.github.io/tslua/playground/#1/TY5BS8QwEIX_yjinLi27teIltUcRQfDQ4sWKpDEtwTQpyeQgpf9dpl3BwwzM9-a9mRWV_9Io8HKBru1eIHj1HW9617sxOUXGO5ilcdlJgEvzoAOsvQOwmiCmGRooa55HHyBjaHYEBh7g7rMsS64aTJ6fDiPstrwBs_s2bkFTCo6Funcb31beRYKgY7IEzfWD-uDe6rP1U3aoTLFAisq70UwoVlR-XozV4XXh9yMjkmHShAIf26qsbnErkH4WHVG84zUTPziFLK_bJLs_x_25wgKdf54Xa5ShVtsRBYWk_9Mn6wdp32QwcrCcywvbtv0C
The proposal here is to bring the equivalents to TSTL's playground. Happy to do the implementation work, and can split into separate PRs if that's easier to review.
I'd like to propose some features for the TSTL web playground, after having used it loads over the recent weeks. I wanted to collect feedback on features etc., and also if any of this makes sense. Some of the features I'm proposing might have good reasons for not being included that I'm missing context on. Probably some/most/all of these are pretty opinionated.
Config
Allow editing more of the tsconfig.json than Lua version. Could also have a "view only" mode on the actual JSON for users to see what the tsconfig.json would actually look like. All of this would be URL encoded. Back-compat is straightforward: the current URL has a
#codepart -- could use that as a version hint and introduce a "version migration" step that modernizes old URLs. URLs will get somewhat bigger with more stuff, but can be mitigated:Previous related issue: #145
compilerOptions
removeComments(which is not fully handled IIUC)TSTL options
tslua example
Disclosure: I wrote tslua, a Go-based TS-to-Lua transpiler. Most of the playground features above are implemented there to preview:
https://realcoldfry.github.io/tslua/playground/#1/TY5BS8QwEIX_yjinLi27teIltUcRQfDQ4sWKpDEtwTQpyeQgpf9dpl3BwwzM9-a9mRWV_9Io8HKBru1eIHj1HW9617sxOUXGO5ilcdlJgEvzoAOsvQOwmiCmGRooa55HHyBjaHYEBh7g7rMsS64aTJ6fDiPstrwBs_s2bkFTCo6Funcb31beRYKgY7IEzfWD-uDe6rP1U3aoTLFAisq70UwoVlR-XozV4XXh9yMjkmHShAIf26qsbnErkH4WHVG84zUTPziFLK_bJLs_x_25wgKdf54Xa5ShVtsRBYWk_9Mn6wdp32QwcrCcywvbtv0C
The proposal here is to bring the equivalents to TSTL's playground. Happy to do the implementation work, and can split into separate PRs if that's easier to review.