shikijs / twoslash

You take some Shiki, add a hint of TypeScript compiler, and 🎉 incredible static code samples
https://shikijs.github.io/twoslash/
MIT License
1.06k stars 51 forks source link

Support special syntax to indicate console output? #94

Closed orta closed 3 years ago

orta commented 3 years ago

Lets say you have a code sample like:

```ts
const a = "hello"
console.log(a)

It would be common to write something like:
const a = "hello"
console.log(a)
// prints "hello"

Or something similar. Can we take that idea and embed it more tightly? I'm not sure that I'm game for actually _eval_ ing  the code  sample here (though I think there's a good argument **for** having that) but we could have a better design for the output to raise trust (perhaps incorrectly) on the output.

For example, this JS stack error could be
const message: string = "Hello, types"
console.log(message)
// @> error SyntaxError: Unexpected token ':'. const declared variable 'message' must have an initializer.

![Screen Shot 2021-07-30 at 10 08 04 AM](https://user-images.githubusercontent.com/49038/127630156-b1ddc9e8-ee97-48f6-818a-a9f24e5db151.png)

Potential syntax:

- 1. Re-using the console names:

// @logs: "Hello, world" // @warns: "Oh no" // @errors: error XYZ


- 2. A sigil then the type

// @> log "Hello world" // @> warning "Oh No" // @> error error XYZ

orta commented 3 years ago

I'm on side 're-use console names' with an @

Can't use errors or error because it's too close to @errors: 3342. Maybe console.log ?

Can't really use anything with special chars because of the regexes to pull out compiler flags. Probably going t ooo with log, warn, error then.

orta commented 3 years ago

This is in, I opted for error - trade-offs be damned.