feat(console): show line numbers next to console output#1008
feat(console): show line numbers next to console output#1008iahmedgamal wants to merge 36 commits into
Conversation
- supports JS, TS and React - remaining languages shows nothing for now - add VLQ decoder and source line map builder (utils/source-map.ts) - addN badge into Luna Console log items via insert event
✅ Deploy Preview for livecodes ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
WalkthroughThis PR adds source-map generation for React and TypeScript, maps runtime console locations to markup or script lines, renders clickable console line badges, and adds editor navigation plus unit and end-to-end coverage. ChangesConsole Source Map Line Numbers
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
participant Editor as Editor source
participant Compiler as React/TypeScript compiler
participant Result as Result page
participant Console as Console tool
participant API as Editor API
Editor->>Compiler: compile source with source maps
Compiler->>Result: return code and source maps
Result->>Console: configure source-map records
Console->>API: navigate to clicked editor line
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
src/livecodes/utils/source-map.ts (1)
3-3: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAdd
/*@pure*/annotations to exported pure utility functions.Both
decodeVlqandbuildSourceLineMapare exported pure functions insrc/livecodes/utils/but lack the required/*@PURE*/annotation for tree-shaking.As per coding guidelines: "Mark exported pure utility functions with
/*@PURE*/annotation for tree-shaking" (src/livecodes/utils/**/*.{ts,tsx}).♻️ Proposed fix
-export const decodeVlq = (str: string, pos: number): [value: number, nextPos: number] => { +export const decodeVlq = /* `@__PURE__` */ (str: string, pos: number): [value: number, nextPos: number] => {-export const buildSourceLineMap = (sourceMapStr: string): Map<number, number> => { +export const buildSourceLineMap = /* `@__PURE__` */ (sourceMapStr: string): Map<number, number> => {Also applies to: 30-30
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/livecodes/utils/source-map.ts` at line 3, The exported pure utility functions in source-map.ts need `/* `@__PURE__` */` annotations for tree-shaking. Add the annotation to both `decodeVlq` and `buildSourceLineMap` at their export declarations so bundlers can recognize them as pure. Keep the change limited to these exported utility function definitions in `src/livecodes/utils/source-map.ts`.Source: Coding guidelines
src/livecodes/styles/app.scss (1)
1247-1259: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueBadge may not sit at the far right without an auto start margin.
flex-shrink: 0/align-self: centerimply the log item is a flex row, but nothing pushes the badge to the right edge, so it will render immediately after the log content rather than the "far right" shown in the PR screenshots. If the intent is right-alignment, add an auto inline-start margin.🎨 Optional: push badge to the far right
.console-line-number { flex-shrink: 0; align-self: center; + margin-inline-start: auto; padding-right: 8px; padding-left: 4px;🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/livecodes/styles/app.scss` around lines 1247 - 1259, The .luna-console-log-item badge styling in console-line-number is missing the flex spacing needed to pin it to the far right. Update the existing .console-line-number rule to use an auto inline-start margin so the badge is pushed away from the log content and aligns to the row’s end while preserving the current flex behavior.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/livecodes/languages/typescript/lang-typescript.ts`:
- Line 51: The TypeScript language setup is dropping the `errors` returned by
`ts.convertCompilerOptionsFromJson`, which can hide invalid or conflicting
compiler settings and leave `sourceMapText` unset. Update `getLanguageInfo` in
`lang-typescript.ts` to capture the full result from
`convertCompilerOptionsFromJson`, then surface any conversion errors into
`info.errors` alongside existing diagnostics so callers can see the problem
instead of silently losing line-number mapping.
In `@src/livecodes/result/utils.ts`:
- Around line 120-125: The getCallSiteLine helper currently depends on
stack.split('\n')[3], which is V8-specific and can break on other engines.
Update getCallSiteLine to parse the Error.stack more defensively by normalizing
stack frames or using frame markers before extracting the caller line, and keep
the fallback behavior returning undefined when no valid call site can be found.
---
Nitpick comments:
In `@src/livecodes/styles/app.scss`:
- Around line 1247-1259: The .luna-console-log-item badge styling in
console-line-number is missing the flex spacing needed to pin it to the far
right. Update the existing .console-line-number rule to use an auto inline-start
margin so the badge is pushed away from the log content and aligns to the row’s
end while preserving the current flex behavior.
In `@src/livecodes/utils/source-map.ts`:
- Line 3: The exported pure utility functions in source-map.ts need `/*
`@__PURE__` */` annotations for tree-shaking. Add the annotation to both
`decodeVlq` and `buildSourceLineMap` at their export declarations so bundlers
can recognize them as pure. Keep the change limited to these exported utility
function definitions in `src/livecodes/utils/source-map.ts`.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 5b13f2b7-970c-4497-a6df-9ef1c2270431
📒 Files selected for processing (9)
src/livecodes/core.tssrc/livecodes/languages/react/lang-react.tssrc/livecodes/languages/typescript/lang-typescript.tssrc/livecodes/models.tssrc/livecodes/result/utils.tssrc/livecodes/styles/app.scsssrc/livecodes/toolspane/console.tssrc/livecodes/utils/__tests__/source-map.spec.tssrc/livecodes/utils/source-map.ts
![pullfrog[bot]](https://avatars.githubusercontent.com/in/1768019?s=60&v=4){kind=small}
There was a problem hiding this comment.
ℹ️ No critical issues — minor robustness suggestions inline.
Reviewed changes — add source-mapped console line numbers for JS/TS/React, with a custom VLQ decoder/source-line map builder and queue-based badge injection into Luna Console log items.
- Pass
sourceMapfrom the compiled script result to the console viasetSourceMap. - Capture the call-site line in the sandboxed result iframe and forward it with each console message.
- Build a generated-line → original-line map from source map
mappings, keeping only the first segment per generated line. - Render
:Nline-number badges in Luna Console log items through itsinsertevent. - Add unit tests for the custom VLQ decoder and source-line map builder.
ℹ️ Nitpicks
- Four changed files currently fail
prettier --check:src/livecodes/core.ts,src/livecodes/languages/react/lang-react.ts,src/livecodes/result/utils.ts, andsrc/livecodes/utils/__tests__/source-map.spec.ts. Runningnpm run fix:prettierwill clean them up.
Kimi K2 (free via Pullfrog for OSS) ｜ 𝕏
|
Oh wow! I confirm it works with js, ts & react I will review the changes carefully and come back to you, isA. Meanwhile, here are some comments:
You may also want to check comments by coderabbit and pullfrog AI reviews. Thank you :) |
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
There was a problem hiding this comment.
ℹ️ No critical issues in the incremental changes — the
fix: eslintcommit addresses the prior feedback it targeted. One minor annotation nit inline.
Reviewed changes — the fix: eslint commit resolves lint/format issues and follows up on prior review comments.
- Fixed TypeScript compiler option error handling in
src/livecodes/languages/typescript/lang-typescript.ts—convertCompilerOptionsFromJsonerrors are now captured and logged as warnings. - Added
/* @__PURE__ */annotation tobuildSourceLineMapinsrc/livecodes/utils/source-map.ts. - Resolved prettier/eslint formatting in
src/livecodes/core.ts,src/livecodes/languages/react/lang-react.ts,src/livecodes/utils/__tests__/source-map.spec.ts, and related files.
A prior robustness suggestion about defensive stack-frame parsing in src/livecodes/result/utils.ts (open thread) remains unchanged by these commits.
Kimi K2 (free via Pullfrog for OSS) ｜ 𝕏
example: (script:7 , or markup:5), consecutive identical logs from the same source are grouped by Luna's native dedeuplication but with badge (script:1:5) - add e2e console-line-logs spec with 5 tests
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (3)
src/livecodes/toolspane/console.ts (1)
88-112: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueOptional: address static-analysis nits.
SonarCloud flags
String.prototype.match(Line 88) in favor ofRegExp.exec, andparseInt(Lines 91, 92, 112) in favor ofNumber.parseInt.♻️ Suggested tweaks
- const match = current.match(/^(\w+):(\d+)(?::(\d+))?$/); + const match = /^(\w+):(\d+)(?::(\d+))?$/.exec(current); if (!match) return current; const src = match[1]; - const firstLine = parseInt(match[2], 10); - const lastLine = match[3] ? parseInt(match[3], 10) : firstLine; + const firstLine = Number.parseInt(match[2], 10); + const lastLine = match[3] ? Number.parseInt(match[3], 10) : firstLine;- const newLine = parseInt(sourceLine.split(':')[1], 10); + const newLine = Number.parseInt(sourceLine.split(':')[1], 10);🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/livecodes/toolspane/console.ts` around lines 88 - 112, Address the static-analysis nits in the line-number handling helper and setupInsertListener: replace String.prototype.match with the equivalent regular expression exec call, and replace every parseInt invocation with Number.parseInt while preserving the existing radix and behavior.Source: Linters/SAST tools
src/livecodes/result/markup-script-lines.ts (1)
1-9: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winExtract shared helpers to avoid duplication.
toPositiveLineNumberandtoUserLineare identically defined in bothmarkup-script-lines.tsandconsole-line-source.ts. Extract them to a shared module (e.g.,result/line-utils.ts) and import from both files to prevent divergence.♻️ Proposed shared module
// src/livecodes/result/line-utils.ts export const toPositiveLineNumber = (line: number | undefined): number | undefined => { if (typeof line !== 'number' || !Number.isFinite(line) || line <= 0) return undefined; return Math.trunc(line); }; export const toUserLine = (docLine: number, offset: number): number | undefined => { if (!offset) return undefined; return toPositiveLineNumber(docLine - offset); };Then in both
markup-script-lines.tsandconsole-line-source.ts:-const toPositiveLineNumber = (line: number | undefined): number | undefined => { - if (typeof line !== 'number' || !Number.isFinite(line) || line <= 0) return undefined; - return Math.trunc(line); -}; - -const toUserLine = (docLine: number, offset: number): number | undefined => { - if (!offset) return undefined; - return toPositiveLineNumber(docLine - offset); -}; +import { toPositiveLineNumber, toUserLine } from './line-utils';🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/livecodes/result/markup-script-lines.ts` around lines 1 - 9, Extract the duplicated toPositiveLineNumber and toUserLine helpers from markup-script-lines.ts and console-line-source.ts into a shared result/line-utils.ts module, exporting both functions. Remove the local definitions and import the shared helpers in both consuming files, preserving their existing behavior.e2e/specs/console-line-logs.spec.ts (1)
138-154: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winTest 5 could wait for the expected count directly.
waitForConsoleEntries(app, 1)waits for only 1 entry, then relies onwaitForTimeout(300)for the second entry to appear. Since bothconsole.log("same text")calls fire synchronously (inline markup script + editor script), waiting for 2 entries directly would be more robust and eliminate the fragile timeout.♻️ Proposed fix
- await waitForConsoleEntries(app, 1); - await app.waitForTimeout(300); + await waitForConsoleEntries(app, 2); + await app.waitForTimeout(300);🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@e2e/specs/console-line-logs.spec.ts` around lines 138 - 154, Update the test “does not merge same text from markup and script” to call waitForConsoleEntries(app, 2) and remove the subsequent fixed waitForTimeout(300), so it waits directly for both synchronous console entries before collecting them.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/livecodes/result/console-line-source.ts`:
- Around line 99-126: Update proxyConsole’s window.error handler to pass the
ErrorEvent through getConsoleErrorSite instead of posting error.lineno directly.
Use the returned lineNumber, source, rawLine, and offset metadata when
constructing the posted runtime error payload so window errors receive the same
markup/script mapping as console calls.
In `@src/livecodes/toolspane/console.ts`:
- Around line 168-198: Prevent lineNumberQueue from advancing for console
methods that do not create a rendered log item, including console.time,
console.countReset, and passing console.assert calls. Update the
message-processing logic around lineNumberQueue and the insert handler so badge
metadata is queued or assigned only when Luna actually inserts a console entry,
preserving alignment for subsequent source badges.
---
Nitpick comments:
In `@e2e/specs/console-line-logs.spec.ts`:
- Around line 138-154: Update the test “does not merge same text from markup and
script” to call waitForConsoleEntries(app, 2) and remove the subsequent fixed
waitForTimeout(300), so it waits directly for both synchronous console entries
before collecting them.
In `@src/livecodes/result/markup-script-lines.ts`:
- Around line 1-9: Extract the duplicated toPositiveLineNumber and toUserLine
helpers from markup-script-lines.ts and console-line-source.ts into a shared
result/line-utils.ts module, exporting both functions. Remove the local
definitions and import the shared helpers in both consuming files, preserving
their existing behavior.
In `@src/livecodes/toolspane/console.ts`:
- Around line 88-112: Address the static-analysis nits in the line-number
handling helper and setupInsertListener: replace String.prototype.match with the
equivalent regular expression exec call, and replace every parseInt invocation
with Number.parseInt while preserving the existing radix and behavior.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 90eec2b2-d314-4db5-be15-fe4409be1c7f
📒 Files selected for processing (8)
e2e/specs/console-line-logs.spec.tssrc/livecodes/result/console-line-source.tssrc/livecodes/result/markup-script-lines.tssrc/livecodes/result/result-page.tssrc/livecodes/result/result-types.tssrc/livecodes/result/utils.tssrc/livecodes/toolspane/console.tssrc/livecodes/utils/__tests__/source-map.spec.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- src/livecodes/utils/tests/source-map.spec.ts
…nsole code to use it
There was a problem hiding this comment.
Important
isExternalScriptFrame fails to classify external scripts whose URLs contain query strings or hashes, which can produce wrong source labels and line numbers for logs from those scripts.
Reviewed changes — the latest commit replaces the hardcoded stack-frame index with a defensive source-aware classifier, distinguishes markup vs. script sources, supports grouped line-number badges for deduplicated logs, and adds e2e coverage.
- Replaced brittle stack-frame parsing in
src/livecodes/result/utils.tsand the newsrc/livecodes/result/console-line-source.tswith frame filtering, external-script preference, and safe fallbacks. - Added markup vs. script source detection so inline
<script>logs and editor-script logs display the correct source label. - Added grouped line ranges for Luna Console's native deduplication (e.g.
script:1:5). - Added e2e tests in
e2e/specs/console-line-logs.spec.tscovering script logs, inline markup logs, regrouping after interrupts, and mixed-source separation.
Kimi K2 (free via Pullfrog for OSS) ｜ 𝕏
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/livecodes/utils/line-number.ts`:
- Around line 1-4: Add the `/* `@__PURE__` */` annotation to the exported
`toPositiveLineNumber` utility declaration so bundlers can tree-shake this
side-effect-free function, preserving its existing behavior.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: aa62eea9-5558-4028-b38a-623056da2fb7
📒 Files selected for processing (5)
src/livecodes/result/console-line-source.tssrc/livecodes/result/markup-script-lines.tssrc/livecodes/toolspane/console.tssrc/livecodes/utils/__tests__/line-number.spec.tssrc/livecodes/utils/line-number.ts
✅ Files skipped from review due to trivial changes (1)
- src/livecodes/utils/tests/line-number.spec.ts
🚧 Files skipped from review as they are similar to previous changes (3)
- src/livecodes/result/console-line-source.ts
- src/livecodes/result/markup-script-lines.ts
- src/livecodes/toolspane/console.ts
There was a problem hiding this comment.
ℹ️ No new Pullfrog issues in this incremental commit. The prior
toPositiveLineNumberduplication concern is now resolved.
Reviewed changes — the latest commit extracts toPositiveLineNumber into a shared utility and adds unit tests for it.
- Extracted shared
toPositiveLineNumberutility intosrc/livecodes/utils/line-number.ts. - Removed duplicated definitions from
src/livecodes/result/console-line-source.ts,src/livecodes/result/markup-script-lines.ts, andsrc/livecodes/toolspane/console.ts, replacing them with imports. - Added unit tests in
src/livecodes/utils/__tests__/line-number.spec.tscovering valid inputs and edge cases.
Kimi K2 (free via Pullfrog for OSS) ｜ 𝕏
I kept the Luna native grouping way, but added the new line badge to keep the grouping and 
|
|
Thank you @iahmedgamal I had a good look. Here are some comments (bear with me 😅):
So, I prefer to disable grouping messages in console unless they are from the same source and line (e.g. repeated invocations of same function or logs in a loop, etc). And then we can avoid using ranges.
I found some bugs:
console.log('hi');
console.time('timer');
console.log('hello');
Here are some feature requests 😄 :
<!doctype html>
<html lang="en">
<script>
const message = "Hello from TypeScript!";
const logIt = (msg) => {
console.log(msg);
};
logIt(message);
//# sourceMappingURL=data:application/json;charset=utf-8,%7B%22version%22%3A3%2C%22sources%22%3A%5B%22app.ts%22%5D%2C%22mappings%22%3A%22%3BAAAA%3BAACA%3BAACA%3BAACA%3BAACA%22%2C%22sourcesContent%22%3A%5B%22const%20message%3A%20string%20%3D%20'Hello%20from%20TypeScript!'%3B%5Cnconst%20logIt%20%3D%20(msg%3A%20string)%3A%20void%20%3D%3E%20%7B%5Cn%20%20%20%20console.log(msg)%3B%5Cn%7D%3B%5CnlogIt(message)%3B%22%5D%7D
</script>
</body>
</html>I could not get that to work in LiveCodes. I'm not sure if this is related to restriction on sandboxed iframe, or because we use document.write to add content to the page or something else. Any way, this is not a high priority, but a really nice-to-have feature. Some organizational comments:
I do not want to overload you if you think this scope is larger than what you want to contribute with. Thank you. I really appreciate your work. |
- Moved all code in console-line-source.ts, markup-script-lines.ts, result-types.ts, line-number.ts, source-map.ts to a single file in compiler/source-maps.ts && Create tests for source map
- config.tools?.enabled as string[])?.includes('console') to skip invocation with every markup that has no script
- removed the range line numbers line logs
- handled the time, countReset, assert, table to expect no visual on the line
- navigate to the line when clicking on the log
There was a problem hiding this comment.
ℹ️ No critical issues — minor suggestions inline.
Reviewed changes — the latest commit refactors source-map handling into a single module, switches console line mapping to a Record keyed by filename, fixes queue alignment for silent console methods, and adds e2e coverage for source maps, queue reset, and named files.
- Consolidated source-map console utilities in
src/livecodes/compiler/source-maps.tsby merging VLQ decoding, line-number helpers, markup inline-script resolution, and call-site detection into one module. - Switched source map contract to
Record<string, string>soconfig.scriptFilenamecan drive the console badge label (e.g.tax-calculator.ts:5) instead of a genericscriptkey. - Fixed console badge queue alignment for silent methods (
console.time,console.countReset, passingassert, emptytable) so they no longer consume a queue slot. - Made line-number badges clickable to navigate to the corresponding editor line.
- Expanded e2e coverage for TypeScript source-map mapping, named files, queue reset, loop grouping, and silent-method queue behavior.
Kimi K2 (free via Pullfrog for OSS) ｜ 𝕏
Hey @hatemhosny thanks for the review and hte kind words, appericate it, -I addressed all the points,
Thanks for your time and the guidance for easier testing please take a look (looks amazing lol ) screen-capture.5.webm |
|
I LIKE IT 📣📣📣📣📣 Thank you @iahmedgamal By the way, you can test it online on the preview URL: https://deploy-preview-1008--livecodes.netlify.app/ |
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/livecodes/compiler/import-map.ts (1)
301-308: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick winPrevent syntax errors from trailing line comments or missing semicolons.
Joining the user's
codedirectly withexport default module.exports;using a space will result in a syntax error if the code ends with a line comment (the export will be commented out) or an expression without a semicolon (e.g.const x = 5 export default...).Append the export statement using a newline instead. Adding a newline after the user's code is safe and will not affect the source-map line alignment for the user's original lines.
🐛 Proposed fix
- return [ - imports, - lookup, - require, - `const exports = {}; const module = { exports };`, - code, - `export default module.exports;`, - ].join(' '); + const prefix = [ + imports, + lookup, + require, + `const exports = {}; const module = { exports };`, + ].join(' '); + + return `${prefix} ${code}\nexport default module.exports;`;🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/livecodes/compiler/import-map.ts` around lines 301 - 308, Update the code assembly return in the import-map compiler to separate the user-provided code from `export default module.exports;` with a newline rather than a space. Preserve the existing ordering and ensure the added newline follows the user code without altering its original source-map line alignment.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@src/livecodes/compiler/import-map.ts`:
- Around line 301-308: Update the code assembly return in the import-map
compiler to separate the user-provided code from `export default
module.exports;` with a newline rather than a space. Preserve the existing
ordering and ensure the added newline follows the user code without altering its
original source-map line alignment.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 3bddf0e8-84c0-4a8d-bf95-a9648d6d802f
📒 Files selected for processing (3)
src/livecodes/compiler/import-map.tssrc/livecodes/editor/codemirror/codemirror.tssrc/livecodes/editor/monaco/monaco.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- src/livecodes/editor/monaco/monaco.ts
There was a problem hiding this comment.
ℹ️ No new incremental issues found.
Reviewed changes — the latest commits flatten the CJS-to-ESM wrapper to preserve source line numbers and clamp/normalize editor cursor positions when navigating from console badges.
- Flattened
cjs2esmwrapper insrc/livecodes/compiler/import-map.tsby joining wrapper pieces with spaces instead of newlines, reducing line-number drift for scripts that userequire(...). - Fixed editor
setPositionbounds insrc/livecodes/editor/codemirror/codemirror.tsandsrc/livecodes/editor/monaco/monaco.tsso line numbers and columns are clamped to valid positive ranges.
Kimi K2 (free via Pullfrog for OSS) ｜ 𝕏
|
Thank you @iahmedgamal I think this comment is valid: #1008 (comment) try this in markup: hello
<script>
console.log(1)
</script>
<script type="module">
console.log(2)
</script>
<script>
console.log(3)
</script>
<script type="module">
console.log(4)
</script>
<script>
console.log(5)
</script>scripts with |
There was a problem hiding this comment.
ℹ️ No new issues found in this increment.
Reviewed changes — the latest commits refine the CJS-to-ESM wrapper and harden source-map parsing.
- Fixed CJS wrapper syntax edge cases in
src/livecodes/compiler/import-map.tsby separating the user'scodefrom the trailingexport default module.exports;with a newline and collapsing the injectedwindow.requirehelper to a single line, preventing syntax errors when user code ends with a line comment or an unsemicoloned expression. - Hardened source-map parsing in
src/livecodes/compiler/source-maps.tsso missing or non-stringmappingsvalues fall back to an empty line map instead of failing at runtime.
Kimi K2 (free via Pullfrog for OSS) ｜ 𝕏
Thanks doctor @hatemhosny for the reply, I totally agree this still need to be done, also I didn't test the behaviour of the site on other engines, firefox and Safari
I can say this is the remaining work needed here |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/livecodes/result/result-page.ts`:
- Around line 449-452: Update the call-site classification around
supportsSourceUrl and isExternalScriptFrame so frames matching
script:<line>:<column> from the editor-script sourceURL=script marker are
treated as external script locations, preventing markup-line resolution from
redirecting them to inline markup. Add a regression test covering inline markup
alongside an editor-script sourceURL=script frame and verify console badges
navigate to the editor script.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: ed895574-c3ca-4a56-bf13-83b7b8b904a7
📒 Files selected for processing (3)
src/livecodes/result/result-page.tssrc/livecodes/styles/app.scsssrc/livecodes/toolspane/console.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- src/livecodes/styles/app.scss
There was a problem hiding this comment.
✅ No new issues found in this increment.
Reviewed changes — the latest commit applies minor polish: accessibility, code simplification, CSS ordering, and console theming consistency.
- Simplified
scriptTyperesolution insrc/livecodes/result/result-page.tswith a||chain, eliminating the??/!= nullternary. - Guarded
//# sourceURL=scriptonconsoleEnabledso the sourceURL annotation is only injected when the console tool is active. - Renamed sourceURL from
livecodes-script.jstoscript— cosmetic;isExternalScriptFrameuses regex patterns that don't depend on this name. - Moved
appendChildafter type-setting inresult-page.tsso the script element enters the DOM with its type already configured. - Reordered CSS properties in
src/livecodes/styles/app.scssfor stylelint compliance and addedcolor: inherit !important. - Changed badge from
<span>to<a>insrc/livecodes/toolspane/console.tsfor keyboard accessibility, withe.preventDefault()in the click handler. - Generalized
editorIdto usefilenamedirectly instead of mapping to hardcoded'markup'/'script'strings. - Passed
theme: config.themeto bothLunaConsoleconstructor sites for theming consistency. - Added
consoleNavigatetosrc/sdk/internal.tsCustomEventstype definition.
DeepSeek Pro (free via Pullfrog for OSS) (Kimi K2 not used — the program covers this model; add its provider key to run your pick) ｜ 𝕏
There was a problem hiding this comment.
✅ No new issues found in this increment.
Reviewed changes — the latest commit fixes stack-frame classification for the renamed sourceURL marker.
- Added
/at script:/ipattern toisExternalScriptFrameinsrc/livecodes/compiler/source-maps.tsso stack frames from the//# sourceURL=scriptdirective (renamed fromlivecodes-script.jsin the prior commit) are correctly classified as external script frames.
DeepSeek Pro (free via Pullfrog for OSS) (Kimi K2 not used — the program covers this model; add its provider key to run your pick) ｜ 𝕏
There was a problem hiding this comment.
✅ No new issues found.
Reviewed changes — the two new commits add column-aware source-map resolution so the console maps compiled line/column positions back to the original source position exactly, threads column info through the console message pipeline, and refactors the source-map decoder to track full segments instead of just the first segment per line.
- Added
getOriginalPosition— resolves a compiled(line, column)to the original source(line, column)via binary search over decoded segments; handles identity mapping, column offsets, multi-segment lines, and invalid input. - Added
getColumnNumberFromFrame— extracts the column from the stack frame's:line:columnsuffix using the existingtoPositiveLineNumbervalidator. - Refactored
decodeSourceMapSegments— now decodes all segments per generated line withgeneratedColumn,originalLine, andoriginalColumn, replacing the old first-segment-only approach.buildSourceLineMapstill uses only the first segment, preserving backward compatibility. - Threaded
columnNumberthroughConsoleCallSiteintoresult/utils.tsmessage posts andcore.tsconsole-navigate handler, so the editor cursor lands at the correct column. - Updated badge parsing in
console.tsto handle thekey:line:columnthree-part format. Badge text shows onlykey:line; the column is used exclusively for the click-handler navigation detail. - Added unit tests for
getOriginalPositioncovering identity mapping, column offset calculation, binary search over multi-segment lines, missing lines, and invalid/empty source maps.
DeepSeek Pro (free via Pullfrog for OSS) (Kimi K2 not used — the program covers this model; add its provider key to run your pick) ｜ 𝕏
Thank you @iahmedgamal I have added support for columns. So now clciking the badge takes you to the line/column |
There was a problem hiding this comment.
✅ No new issues found.
Reviewed changes — the latest commit fixes column reporting for plain JavaScript console logs.
- Fixed column in JS — replaced
hasSourceMapColumnwithhasColumninsrc/livecodes/toolspane/console.tsso thecolumnNumberfrom stack frames is passed through to the badge queue entry for plain JS (no source map), where previously it was silently dropped because the flag was only set inside the source-map-position branch.
DeepSeek Pro (free via Pullfrog for OSS) (Kimi K2 not used — the program covers this model; add its provider key to run your pick) ｜ 𝕏
There was a problem hiding this comment.
✅ No new issues found.
Reviewed changes — the two new commits inject source maps into the result page so the browser's native Error.stack reflects original source locations, and hide the now-redundant compiled-code error stack in the console.
- Injected
//# sourceMappingURLinto result-page scripts when a valid source map (Info.sourceMaps.script) is available, constructing a self-containeddata:application/json;base64,...URI with the source map,file,sources, andsourcesContentfields. ThesupportsSourceUrlgate now requires bothconsoleEnabledandhasValidSourceMap, so only JS-compatible scripts with a valid source map (TS, React) get the directive. - Added
data:application/jsontoisExternalScriptFrameso source map data URIs appearing in stack frames are correctly classified as external. - Hidden
.luna-console-stackinapp.scssto suppress the compiled-code error stack trace that is now redundant alongside source-mapped console badges.
DeepSeek Pro (free via Pullfrog for OSS) (Kimi K2 not used — the program covers this model; add its provider key to run your pick) ｜ 𝕏
|
hi @iahmedgamal The source maps now work in browser console (only for errors, not logs) demo: https://unblk.cc/https://deploy-preview-1008--livecodes.netlify.app/?x=id/GJAH8EL97 
When you click on the link in the browser console stack trace, it takes you to the Sources tab (in browser dev tools), to the line and column of the error in the source (uncompiled) code. 
You can even use the debugger 🎉 
I'm not sure why it does not work with logs the same way like errors. |
There was a problem hiding this comment.
✅ No new issues found.
Reviewed changes — the single fixes commit corrects two regressions from add sourceMappingURL and normalizes the source map naming:
- Removed
data:application/jsonfromisExternalScriptFrame— source map data URIs embedded in//# sourceMappingURL=annotations are never stack-frame addresses, so this classifier was never reachable and could only produce false positives. - Removed
script:fromisExternalScriptFrame— the sourceURL was renamed fromscripttoscript.js, so the bare/script:/ipattern no longer matches; the existing\.[cm]?jsregex already coversat script.js:N:Mframes. - Renamed source map
fileandsourceURLfromscripttoscript.js— keeps the source map'sfilefield and the//# sourceURLannotation consistent, which helps the browser's native source map resolution.
DeepSeek Pro (free via Pullfrog for OSS) (Kimi K2 not used — the program covers this model; add its provider key to run your pick) ｜ 𝕏
|
There was a problem hiding this comment.
✅ No new issues found.
Reviewed changes — the latest commit provides a synthetic empty source map for JavaScript so that //# sourceURL=script.js annotations are injected, enabling correct stack-frame classification for console line numbers.
- Provided synthetic empty source map for JavaScript in
src/livecodes/result/result-page.ts— whenconfig.script.language === 'javascript','{}'is used as the source map instead ofcompileInfo.sourceMaps?.script(which isundefinedfor JS). This makesJSON.parsesucceed sohasValidSourceMapbecomestrue, passing thesupportsSourceUrlgate and enabling injection of//# sourceURL=script.jsalongside a self-containeddata:application/json;base64,...source-mapping URL for JS scripts.
DeepSeek Pro (free via Pullfrog for OSS) (Kimi K2 not used — the program covers this model; add its provider key to run your pick) ｜ 𝕏
3 participants
What type of PR is this? (check all applicable)
Description
Console line number is added at the far right of the console section
Related Tickets & Documents
#635
Mobile & Desktop Screenshots/Recordings
Please observe this React template works as well && it's responsive
Added tests?
Added to documentations?
[optional] Are there any post-deployment tasks we need to perform?
[optional] What gif best describes this PR or how it makes you feel?
Summary by CodeRabbit