better decor positioning

Author: al3xnag

packages/jsrepl/src/hooks/useReplDecorations.ts

@@ -84,7 +84,7 @@ export default function useReplDecorations() {
 
       const hoverPayloads: ReplPayload[] = getDisplayedPayloads(
         (payload) =>
-          payload.ctx.filePath === model.uri.path && payload.ctx.lineStart === position.lineNumber
+          payload.ctx.filePath === model.uri.path && payload.ctx.lineEnd === position.lineNumber
       )
 
       if (hoverPayloads.length === 0) {

packages/jsrepl/src/lib/bundler/js-esbuild-plugin.ts

@@ -438,13 +438,13 @@ function getCommonWrapperFields(
     t.objectProperty(
       t.identifier('colStart'),
       path.node?.loc?.start?.column != null
-        ? t.numericLiteral(path.node.loc.start.column)
+        ? t.numericLiteral(path.node.loc.start.column + 1)
         : t.nullLiteral()
     ),
     t.objectProperty(
       t.identifier('colEnd'),
       path.node?.loc?.end?.column != null
-        ? t.numericLiteral(path.node.loc.end.column)
+        ? t.numericLiteral(path.node.loc.end.column + 1)
         : t.nullLiteral()
     ),
   ]

packages/jsrepl/src/lib/repl-payload/decorations.ts

@@ -36,7 +36,7 @@ function getDecorDef(
 ): monaco.editor.IModelDeltaDecoration | null {
   try {
     const { /* result, */ ctx } = payload
-    const { lineStart, kind /* lineEnd, colStart, colEnd, source */ } = ctx
+    const { lineEnd, kind, lineStart, colStart, colEnd /*, source */ } = ctx
 
     decorationUniqId = (decorationUniqId + 1) % Number.MAX_VALUE
     const uniqClassName = `jsrepl-decor-${decorationUniqId}`
@@ -51,8 +51,7 @@ function getDecorDef(
 
     return {
       // line starts with 1, column starts with 1
-      // FIXME: sometimes when editing decors rendered shifted. Check token?
-      range: new monaco!.Range(lineStart, 1, lineStart, 1),
+      range: new monaco!.Range(lineStart, colStart, lineEnd, colEnd),
       options: {
         isWholeLine: true,
         afterContentClassName: `${codeEditorStyles.jsreplDecor} ${codeEditorStyles[`jsreplDecor-${kind}`] ?? ''} ${uniqClassName} ${isHighlighted ? codeEditorStyles.jsreplDecorHighlighted : ''}`,

packages/jsrepl/tests/playwright/repl-eval.test.ts

@@ -27,8 +27,8 @@ test('simple expressions', async ({ page }) => {
             const f2Val = 2;
             const [f1, f2 = f2Val, {x: f3}, [f4 = -1], ...f5] = foo();
 
-            foo()
-            ;[window.hhh] = foo();
+            foo();
+            foo(); [window.hhh] = foo();
             window.hadds = foo();
             ({ x: hhh } = foo({x: 1}));
             let h;
@@ -62,8 +62,8 @@ test('simple expressions', async ({ page }) => {
       const f2Val = 2; // → f2Val = 2
       const [f1, f2 = f2Val, {x: f3}, [f4 = -1], ...f5] = foo(); // → f1 = 1, f2 = 2, f3 = 3, f4 = 4, f5 = [5, 6]
 
-      foo() // → [1, undefined, {…}, Array(1), 5, 6]
-      ;[window.hhh] = foo(); // → window.hhh = 1
+      foo(); // → [1, undefined, {…}, Array(1), 5, 6]
+      foo(); [window.hhh] = foo(); // → [1, undefined, {…}, Array(1), 5, 6], window.hhh = 1
       window.hadds = foo(); // → window.hadds = [1, undefined, {…}, Array(1), 5, 6]
       ({ x: hhh } = foo({x: 1})); // → hhh = 1
       let h; // → h = undefined