RunJS icon indicating copy to clipboard operation
RunJS copied to clipboard

[Feature]: In top-level await mode, allow toggling lines that will be wrapped with `console.log(inspect(LINE))` in evaluation

Open iki opened this issue 1 year ago • 6 comments

iki avatar Jun 25 '24 17:06 iki

So, for example, transform this:

const example = 5;

into this:

console.log(inspect(const example = 5;));

Is this what you mean? @iki

lukehaas avatar Jun 26 '24 08:06 lukehaas

@lukehaas yes, the goal is to make evaluating easy in top-level await mode

  • optional ending semicolon should be removed
  • import { inspect } from 'node:util' has to be inserted on top if any line is toggled
  • UX-wise, it seems better usable to not transform the line in the code window, just preform the transformation in the evaluation process

iki avatar Jun 26 '24 11:06 iki

I was kind of joking in my previous comment. console.log(inspect(const example = 5;)) is not valid code.

It may be more helpful to describe the issue you want to solve rather than provide the solution.

lukehaas avatar Jun 26 '24 13:06 lukehaas

the goal is to make evaluating expressions easy in top-level await mode

Currently, in top-level await mode, I always have to put this piece code at start

import { inspect } from 'node:util'
const I = (...data: unknown[]) => console.log(inspect(data))

and then wrap each evaluated line with I(...).

The proposed idea is to make it simpler by providing easy way to toggle lines that should be inspected and logged. Maybe with a left bullet like debugger in VSCode.

As for the constraint, if it's not a valid code, then it will give SyntaxError, that's fine.

iki avatar Jun 26 '24 13:06 iki

Ok, thanks for clarifying. So this would be a button in the gutter by each line that wraps the line in console.log(inspect(.

Regarding the inspect call what do you gain by adding that here?

lukehaas avatar Jun 26 '24 14:06 lukehaas

Yes. And you're right, I use inspect with logging libs, but here it does not make sense, console.log` itself displays the data even better, highlighted and with expandable class props

const test = [{a: 1}, new Map([[1, 1]]), Symbol('a'), new Set([1])]

I(test)
// '[ [ { a: 1 }, Map(1) { 1 => 1 }, Symbol(a), Set(1) { 1 } ] ]'  

console.log(test)
// [
//   { a: 1 },
//   Map(1) {
//     1 => 1,
//     __proto__: {...}
//   },
//   Symbol(a),
//   Set(1) {
//     1,
//     __proto__: {...}
//   }
// ]

iki avatar Jun 26 '24 15:06 iki

@iki the latest release no longer needs a setting for top-level await. Are you happy for this to be closed?

lukehaas avatar Oct 16 '24 10:10 lukehaas

@lukehaas yes, I saw it, that's awesome 👍

iki avatar Oct 16 '24 12:10 iki