Merged
Conversation
WalkthroughCentralizes error extraction with getErrorMessage, surfaces structured compile errors from worker and language compilers, extends CompileInfo with optional errors, and refactors core result assembly to separate compiled vs. modified outputs and propagate those through caching and logging. Changes
Sequence Diagram(s)sequenceDiagram
participant UI as UI
participant Core as core.ts
participant Comp as Compiler (worker/lang)
participant Cache as Cache
participant Console as Tools Console
UI->>Core: getResultPage()
Core->>Comp: compile(markup/style/script/tests)
par Compile sections
Comp-->>Core: { code, info{ imports?, errors? } } per section
end
Core->>Core: derive compiled vs modified (markup/style/script)
alt compileInfo.modifiedHTML present
Core->>Core: override compiledMarkup
end
Core->>Console: log each error from info.errors
Core->>Cache: updateCache(markup?.modified ?? '', style?.modified ?? '', script?.modified ?? '')
Core-->>UI: compiledCode { compiled, modified, info.errors? }
sequenceDiagram
participant Lang as Language Compiler (Svelte/Vue/Gleam)
participant Util as getErrorMessage
Lang->>Lang: try compile()
alt success
Lang-->>Caller: { code, info: { imports?, errors? } }
else failure
Lang->>Util: getErrorMessage(err)
Util-->>Lang: string
Lang-->>Caller: { code: '', info: { errors: [msg], ... } }
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests
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 |
✅ Deploy Preview for livecodes ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
|
Size Change: +382 B (+0.04%) Total Size: 949 kB ℹ️ View Unchanged
|
Deploying livecodes with
|
| Latest commit: |
2df2a7c
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://cb74c668.livecodes.pages.dev |
| Branch Preview URL: | https://show-compiler-errors.livecodes.pages.dev |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
src/livecodes/compiler/compile.worker.ts (1)
64-90: Retry recursion resolves too early; missing return/await on recursive call.load() calls itself without returning/awaiting, so the first await load() may resolve before retries finish. Wrap retries in a loop or return the recursive promise.
Apply:
- let tries = 3; - const load = async () => { - try { - if (languageCompiler.url) { - importScripts(languageCompiler.url); - } - languageCompiler.fn = await languageCompiler.factory(config, baseUrl); - if (languageCompiler.aliasTo) { - compilers[languageCompiler.aliasTo].fn = languageCompiler.fn; - } - } catch (err) { - // throw err; - tries -= 1; - if (tries > 0) { - // eslint-disable-next-line no-console - console.warn(`Failed to load compiler for: ${language}. Retrying...`); - load(); - } else { - // eslint-disable-next-line no-console - console.warn(`Failed to load compiler for: ${language}. Reloading...`); - worker.postMessage({ type: 'load-failed', payload: language }); - } - } - }; - - await load(); + let tries = 3; + const load = async (): Promise<void> => { + try { + if (languageCompiler.url) { + importScripts(languageCompiler.url); + } + languageCompiler.fn = await languageCompiler.factory(config, baseUrl); + if (languageCompiler.aliasTo) { + compilers[languageCompiler.aliasTo].fn = languageCompiler.fn; + } + } catch (err) { + tries -= 1; + if (tries > 0) { + // eslint-disable-next-line no-console + console.warn(`Failed to load compiler for: ${language}. Retrying...`); + return load(); + } + // eslint-disable-next-line no-console + console.warn(`Failed to load compiler for: ${language}. Reloading...`); + worker.postMessage({ type: 'load-failed', payload: language }); + } + }; + await load();src/livecodes/core.ts (1)
967-1018: Regression: using .code/.info on possibly-string compile results. Wrap with getCompileResult.compiler.compile may return string | CompileResult. Direct access to .code/.info for markup/script will break on string. Also keep style/tests results to reuse their info/errors.
Apply:
- const markupCompileResult = await compiler.compile(markupContent, markupLanguage, config, { + const markupCompileResult = await compiler.compile(markupContent, markupLanguage, config, { forceCompile: forceCompileSFC, }); - let compiledMarkup = markupCompileResult.code; + const markupRes = getCompileResult(markupCompileResult); + let compiledMarkup = markupRes.code; @@ - const scriptCompileResult = await compiler.compile(scriptContent, scriptLanguage, config, { + const scriptCompileResult = await compiler.compile(scriptContent, scriptLanguage, config, { forceCompile: forceCompileStyles || forceCompileSFC, @@ }); - const compiledScript = scriptCompileResult.code; + const scriptRes = getCompileResult(scriptCompileResult); + const compiledScript = scriptRes.code; @@ - let compileInfo: CompileInfo = { - ...markupCompileResult.info, - ...scriptCompileResult.info, + let compileInfo: CompileInfo = { + ...markupRes.info, + ...scriptRes.info, importedContent: - (markupCompileResult.info.importedContent || '') + - (scriptCompileResult.info.importedContent || ''), + (markupRes.info.importedContent || '') + (scriptRes.info.importedContent || ''), imports: - { - ...scriptCompileResult.info.imports, - ...markupCompileResult.info.imports, - }, + { + ...scriptRes.info.imports, + ...markupRes.info.imports, + }, }; @@ - const [styleCompileResult, testsCompileResult] = await Promise.all([ + const [styleCompileResult, testsCompileResult] = await Promise.all([ compiler.compile(styleContent, styleLanguage, config, { html: `${compiledMarkup}<script type="script-for-styles">${compiledScript}</script> <script type="script-for-styles">${compileInfo.importedContent}</script>`, forceCompile: forceCompileStyles, }), runTests ? testsNotChanged ? Promise.resolve(getCache().tests?.compiled || '') : compiler.compile(testsContent, testsLanguage, config, {}) : Promise.resolve(getCompileResult(getCache().tests?.compiled || '')), ]); - const [compiledStyle, compiledTests] = [styleCompileResult, testsCompileResult].map((result) => { - const { code, info } = getCompileResult(result); - compileInfo = { - ...compileInfo, - ...info, - }; - return code; - }); + const styleRes = getCompileResult(styleCompileResult); + const testsRes = getCompileResult(testsCompileResult); + const compiledStyle = styleRes.code; + const compiledTests = testsRes.code; + compileInfo = { ...compileInfo, ...styleRes.info, ...testsRes.info };
🧹 Nitpick comments (7)
src/sdk/models.ts (1)
1294-1295: Add errors to CompileInfo — good addition; consider documenting intent.Optional: add a brief JSDoc on errors to clarify they are human-readable compiler messages intended for the console UI.
src/livecodes/languages/gleam/lang-gleam-compiler.ts (1)
197-200: Ensure non-empty error message is surfaced.Guard against empty strings from getErrorMessage for nullish/opaque errors.
Apply this diff:
- return { - code: '', - info: { errors: [getErrorMessage(error)] }, - }; + const msg = getErrorMessage(error) || 'Unknown compile error'; + return { + code: '', + info: { errors: [msg] }, + };src/livecodes/utils/utils.ts (1)
646-654: Harden getErrorMessage for empty/opaque cases.Fallback to stack, JSON, or a default message to avoid empty strings or “[object Object]”.
Apply this diff:
-export const getErrorMessage = /* @__PURE__ */ (err: unknown): string => { - if (err == null) return ''; - if (err instanceof Error) return err.message; - if (err && typeof err === 'object' && 'message' in err && typeof err.message === 'string') { - return err.message; - } - return String(err); -}; +export const getErrorMessage = /* @__PURE__ */ (err: unknown): string => { + if (err == null) return ''; + if (err instanceof Error) return err.message || err.stack || 'Unknown error'; + if (err && typeof err === 'object' && 'message' in err && typeof (err as any).message === 'string') { + return (err as any).message || JSON.stringify(err); + } + try { + return String(err); + } catch { + try { + return JSON.stringify(err); + } catch { + return 'Unknown error'; + } + } +};src/livecodes/languages/svelte/lang-svelte-compiler.ts (2)
13-13: Scope of errors array may race under concurrent compiles.errors is closure-scoped; concurrent invocations could interleave. Prefer function-local accumulation returned via info, or pass errors explicitly to recursive compileSFC.
52-67: Return consistent info in error path and avoid empty messages.Also include importedContent/imports for parity with success path; filter empty messages.
Apply this diff:
- let js: { code: string }; + let js: { code: string }; try { const result = (window as any).svelte.compile(processedCode, { css: 'injected', filename, ...customSettings, }); js = result.js; } catch (err) { - const empty = `export default () => {}`; - errors.push(getErrorMessage(err)); - return { - code: language === 'svelte-app' ? `<script type="module">${empty}</script>` : empty, - info: { errors }, - }; + const empty = `export default () => {}`; + const msg = getErrorMessage(err); + if (msg) errors.push(msg); + return { + code: language === 'svelte-app' ? `<script type="module">${empty}</script>` : empty, + info: { importedContent, imports, errors }, + }; }src/livecodes/languages/vue/lang-vue-compiler.ts (1)
393-397: Avoid logging non-serializable errors and duplicate reporting.Either remove console.error or log mapped strings only; UI will display info.errors anyway.
Apply this diff:
- if (errors.length) { - // eslint-disable-next-line no-console - console.error(...errors); - } + // optional: surface via UI only + // if (errors.length) console.error(...errors.map(getErrorMessage));src/livecodes/compiler/compile.worker.ts (1)
108-118: Return a typed union and ensure non-empty error message.
- Explicitly type compile()’s return to Promise<string | CompileResult>.
- Fallback to a default error message when getErrorMessage(err) is empty.
Apply:
-const compile = async ( +const compile = async ( content: string, language: LanguageOrProcessor, config: Config, options: CompileOptions, -) => { +): Promise<string | CompileResult> => { @@ - } catch (err: unknown) { + } catch (err: unknown) { @@ - value = { + const message = getErrorMessage(err) || 'Unknown compile error'; + value = { code: '', - info: { errors: [getErrorMessage(err)] }, + info: { errors: [message] }, };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
src/livecodes/compiler/compile.worker.ts(2 hunks)src/livecodes/core.ts(6 hunks)src/livecodes/languages/gleam/lang-gleam-compiler.ts(2 hunks)src/livecodes/languages/svelte/lang-svelte-compiler.ts(2 hunks)src/livecodes/languages/vue/lang-vue-compiler.ts(2 hunks)src/livecodes/utils/utils.ts(1 hunks)src/sdk/models.ts(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (4)
src/livecodes/languages/gleam/lang-gleam-compiler.ts (1)
src/livecodes/utils/utils.ts (1)
getErrorMessage(646-653)
src/livecodes/languages/svelte/lang-svelte-compiler.ts (2)
src/sdk/models.ts (1)
CompilerFunction(1302-1317)src/livecodes/utils/utils.ts (1)
getErrorMessage(646-653)
src/livecodes/compiler/compile.worker.ts (2)
src/sdk/models.ts (1)
CompileResult(1297-1300)src/livecodes/utils/utils.ts (1)
getErrorMessage(646-653)
src/livecodes/languages/vue/lang-vue-compiler.ts (2)
src/livecodes/compiler/import-map.ts (1)
createImportMap(67-93)src/livecodes/utils/utils.ts (1)
getErrorMessage(646-653)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (15)
- GitHub Check: Redirect rules - livecodes
- GitHub Check: Header rules - livecodes
- GitHub Check: Pages changed - livecodes
- GitHub Check: Codacy Static Code Analysis
- GitHub Check: tests (18.x, 5)
- GitHub Check: tests (18.x, 3)
- GitHub Check: tests (18.x, 4)
- GitHub Check: tests (18.x, 2)
- GitHub Check: tests (18.x, 1)
- GitHub Check: type-check (18.x)
- GitHub Check: build
- GitHub Check: build (18.x)
- GitHub Check: build (18.x)
- GitHub Check: type-check (18.x)
- GitHub Check: Cloudflare Pages
🔇 Additional comments (7)
src/livecodes/languages/gleam/lang-gleam-compiler.ts (1)
5-5: Centralized error formatting import — OK.src/livecodes/languages/svelte/lang-svelte-compiler.ts (3)
5-5: Centralized error formatting import — OK.
49-51: Resetting errors per top-level file — OK.Keeps error state clean between compilations.
73-74: Expose errors in success info — OK.src/livecodes/compiler/compile.worker.ts (1)
4-12: Imports update looks correct.Brings in CompileResult and getErrorMessage for structured errors; no issues.
src/livecodes/core.ts (2)
1024-1050: Modified fields propagation looks good.Cache now tracks compiled vs. modified; updateCompiledCode already prefers modified. No changes needed.
1137-1139: LGTM: safer loading placeholders.Using nullish coalescing avoids accidental fallbacks; good.
src/livecodes/core.ts
Outdated
Comment on lines
+1068
to
+1075
| const compileErrors = [ | ||
| ...(markupCompileResult.info?.errors ?? []), | ||
| ...(styleCompileResult.info?.errors ?? []), | ||
| ...(scriptCompileResult.info?.errors ?? []), | ||
| ...(getCompileResult(testsCompileResult).info?.errors ?? []), | ||
| ]; | ||
| compileErrors.forEach((err) => toolsPane?.console?.error(err)); | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
Aggregate errors from normalized results to avoid undefined access.
Use markupRes/scriptRes/styleRes/testsRes computed above; current code may read .info on strings.
Apply:
- const compileErrors = [
- ...(markupCompileResult.info?.errors ?? []),
- ...(styleCompileResult.info?.errors ?? []),
- ...(scriptCompileResult.info?.errors ?? []),
- ...(getCompileResult(testsCompileResult).info?.errors ?? []),
- ];
+ const compileErrors = [
+ ...(markupRes.info?.errors ?? []),
+ ...(styleRes.info?.errors ?? []),
+ ...(scriptRes.info?.errors ?? []),
+ ...(testsRes.info?.errors ?? []),
+ ];📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| const compileErrors = [ | |
| ...(markupCompileResult.info?.errors ?? []), | |
| ...(styleCompileResult.info?.errors ?? []), | |
| ...(scriptCompileResult.info?.errors ?? []), | |
| ...(getCompileResult(testsCompileResult).info?.errors ?? []), | |
| ]; | |
| compileErrors.forEach((err) => toolsPane?.console?.error(err)); | |
| const compileErrors = [ | |
| ...(markupRes.info?.errors ?? []), | |
| ...(styleRes.info?.errors ?? []), | |
| ...(scriptRes.info?.errors ?? []), | |
| ...(testsRes.info?.errors ?? []), | |
| ]; | |
| compileErrors.forEach((err) => toolsPane?.console?.error(err)); |
🤖 Prompt for AI Agents
In src/livecodes/core.ts around lines 1068 to 1075, the code currently spreads
.info?.errors directly from raw compile result variables which may be strings;
replace those with the previously computed normalized result variables
(markupRes, styleRes, scriptRes, testsRes) and aggregate errors from their
.info?.errors properties (using optional chaining and empty-array defaults) so
you never access .info on a string or undefined; then iterate and log each error
to toolsPane?.console?.error as before.
Comment on lines
+384
to
+391
| return { | ||
| code: | ||
| language === 'vue-app' | ||
| ? `<script type="module">${compiledCode}</script>` | ||
| : compiledCode, | ||
| info: { importedContent, imports: createImportMap(importedContent, config), errors }, | ||
| }; | ||
| } |
There was a problem hiding this comment.
errors contains non-strings; violates CompileInfo contract and breaks UI rendering.
errors gathers objects from Vue compiler (parse/style/template). Map to strings before returning.
Apply this diff:
- return {
- code:
- language === 'vue-app'
- ? `<script type="module">${compiledCode}</script>`
- : compiledCode,
- info: { importedContent, imports: createImportMap(importedContent, config), errors },
- };
+ const errorMessages = errors.map(getErrorMessage).filter(Boolean);
+ return {
+ code:
+ language === 'vue-app'
+ ? `<script type="module">${compiledCode}</script>`
+ : compiledCode,
+ info: {
+ importedContent,
+ imports: createImportMap(importedContent, config),
+ errors: errorMessages,
+ },
+ };Additionally, change the declaration to enforce string accumulation (outside this hunk):
// before
let errors: any[] = [];
// after
let errors: string[] = [];And when pushing compiler errors elsewhere in this file, convert to messages:
// parse errors
errors.push(...err.map(getErrorMessage));
// style errors
errors.push(...styleResult.errors.map(getErrorMessage));
// template errors
errors.push(...templateResult.errors.map(getErrorMessage));🤖 Prompt for AI Agents
In src/livecodes/languages/vue/lang-vue-compiler.ts around lines 384 to 391, the
CompileInfo.errors array currently contains non-string objects from the Vue
compiler which breaks UI rendering; change the errors declaration to let errors:
string[] = []; then ensure every place pushing compiler errors converts them to
strings (e.g., push mapped messages using a getErrorMessage helper) — for
example replace pushes of raw error objects with
errors.push(...err.map(getErrorMessage)),
errors.push(...styleResult.errors.map(getErrorMessage)), and
errors.push(...templateResult.errors.map(getErrorMessage)); finally return the
CompileInfo with the errors array of strings so the UI contract is respected.
Comment on lines
+398
to
407
| const empty = `export default () => {}`; | ||
| return { | ||
| code: | ||
| language === 'vue-app' ? `<script type="module">${compiledCode}</script>` : compiledCode, | ||
| info: { importedContent, imports: createImportMap(importedContent, config) }, | ||
| code: language === 'vue-app' ? `<script type="module">${empty}</script>` : empty, | ||
| info: { errors }, | ||
| }; | ||
| } catch (err) { | ||
| return { | ||
| code: '', | ||
| info: { errors: [...errors, getErrorMessage(err)] }, | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Normalize errors in fallback/catch paths.
Ensure strings only; include prior errors.
Apply this diff:
- const empty = `export default () => {}`;
- return {
- code: language === 'vue-app' ? `<script type="module">${empty}</script>` : empty,
- info: { errors },
- };
+ const empty = `export default () => {}`;
+ return {
+ code: language === 'vue-app' ? `<script type="module">${empty}</script>` : empty,
+ info: { errors: errors.map(getErrorMessage).filter(Boolean) },
+ };
} catch (err) {
- return {
- code: '',
- info: { errors: [...errors, getErrorMessage(err)] },
- };
+ return {
+ code: '',
+ info: {
+ errors: [...errors.map(getErrorMessage), getErrorMessage(err)].filter(Boolean),
+ },
+ };📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| const empty = `export default () => {}`; | |
| return { | |
| code: | |
| language === 'vue-app' ? `<script type="module">${compiledCode}</script>` : compiledCode, | |
| info: { importedContent, imports: createImportMap(importedContent, config) }, | |
| code: language === 'vue-app' ? `<script type="module">${empty}</script>` : empty, | |
| info: { errors }, | |
| }; | |
| } catch (err) { | |
| return { | |
| code: '', | |
| info: { errors: [...errors, getErrorMessage(err)] }, | |
| }; | |
| const empty = `export default () => {}`; | |
| return { | |
| code: language === 'vue-app' ? `<script type="module">${empty}</script>` : empty, | |
| info: { errors: errors.map(getErrorMessage).filter(Boolean) }, | |
| }; | |
| } catch (err) { | |
| return { | |
| code: '', | |
| info: { | |
| errors: [...errors.map(getErrorMessage), getErrorMessage(err)].filter(Boolean), | |
| }, | |
| }; |
🤖 Prompt for AI Agents
In src/livecodes/languages/vue/lang-vue-compiler.ts around lines 398 to 407, the
catch/fallback returns an info.errors array that can contain non-string values
and may not include prior errors consistently; normalize all errors to strings
and include previous errors. Update both the successful-fallback and catch
branches so info.errors is an array of strings by mapping existing errors
through String or getErrorMessage (e.g., const normalized = errors.map(e =>
typeof e === 'string' ? e : getErrorMessage(e))), then return info: { errors:
[...normalized, getErrorMessage(err)] } in the catch, and in the other fallback
return info: { errors: normalized } (for vue-app keep the same code value).
Ensure no non-string values are left in info.errors.
|
There was a problem hiding this comment.
Actionable comments posted: 3
♻️ Duplicate comments (1)
src/livecodes/core.ts (1)
1068-1075: Normalize results before logging errors (fixes TS union access).Accessing .info on possibly-string results is unsafe; wrap with getCompileResult.
- logError(markupLanguage, markupCompileResult.info?.errors); - logError(styleLanguage, styleCompileResult.info?.errors); - logError(scriptLanguage, scriptCompileResult.info?.errors); - logError(testsLanguage, getCompileResult(testsCompileResult).info?.errors); + logError(markupLanguage, getCompileResult(markupCompileResult).info?.errors); + logError(styleLanguage, getCompileResult(styleCompileResult).info?.errors); + logError(scriptLanguage, getCompileResult(scriptCompileResult).info?.errors); + logError(testsLanguage, getCompileResult(testsCompileResult).info?.errors);
🧹 Nitpick comments (1)
src/livecodes/core.ts (1)
999-1011: Avoid overwriting compileInfo fields while folding style/tests info.Limit merging to errors; current spread may clobber imports/importedContent.
- const [compiledStyle, compiledTests] = [styleCompileResult, testsCompileResult].map((result) => { - const { code, info } = getCompileResult(result); - compileInfo = { - ...compileInfo, - ...info, - }; - return code; - }); + const [compiledStyle, compiledTests] = [styleCompileResult, testsCompileResult].map((result) => { + const { code, info } = getCompileResult(result); + if (info?.errors?.length) { + compileInfo = { + ...compileInfo, + errors: [...(compileInfo.errors ?? []), ...info.errors], + }; + } + return code; + });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/livecodes/core.ts(6 hunks)src/livecodes/languages/svelte/lang-svelte-compiler.ts(2 hunks)
🧰 Additional context used
🧬 Code graph analysis (2)
src/livecodes/core.ts (3)
src/sdk/models.ts (1)
Language(884-1086)src/sdk/index.ts (1)
Language(16-16)src/livecodes/languages/utils.ts (1)
getLanguageTitle(16-19)
src/livecodes/languages/svelte/lang-svelte-compiler.ts (2)
src/sdk/models.ts (1)
CompilerFunction(1302-1317)src/livecodes/utils/utils.ts (1)
getErrorMessage(646-653)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (15)
- GitHub Check: Redirect rules - livecodes
- GitHub Check: Header rules - livecodes
- GitHub Check: Pages changed - livecodes
- GitHub Check: Codacy Static Code Analysis
- GitHub Check: build (18.x)
- GitHub Check: type-check (18.x)
- GitHub Check: build
- GitHub Check: tests (18.x, 5)
- GitHub Check: tests (18.x, 3)
- GitHub Check: tests (18.x, 2)
- GitHub Check: tests (18.x, 1)
- GitHub Check: tests (18.x, 4)
- GitHub Check: type-check (18.x)
- GitHub Check: build (18.x)
- GitHub Check: Cloudflare Pages
🔇 Additional comments (4)
src/livecodes/languages/svelte/lang-svelte-compiler.ts (1)
72-73: LGTM: surfacing errors in info.Exposing info.errors aligns with the PR objective to show compiler errors.
src/livecodes/core.ts (3)
1029-1035: LGTM: initialize modified = compiled for markup/style.This matches the new modified/compiled separation.
1049-1049: LGTM: script.modified mirrors compiled.Keeps cache consistent.
1137-1139: LGTM: language-aware loading placeholders in flushResult.Keeps caches valid per compiled language.
Comment on lines
47
to
+51
| imports = createImportMap(importedContent, config); | ||
| errors = []; | ||
| } | ||
|
|
There was a problem hiding this comment.
Reset errors at the root entry, not here (prevents losing nested SFC errors) and also reset imports for SECONDARY_FILE.
Errors collected while compiling nested SFCs via replaceSFCImports are wiped here. Move the reset to the root-file preamble (for BOTH MAIN_FILE and SECONDARY_FILE) and keep this block for import map creation only.
Apply within this hunk:
imports = createImportMap(importedContent, config);
- errors = [];Additionally (outside this hunk), ensure root entry resets state and handles empty code:
// right after detecting root file
if (filename === MAIN_FILE || filename === SECONDARY_FILE) {
importedContent = '';
imports = {};
errors = [];
}
// ensure empty-root clears errors too
if (!code) {
if (filename === MAIN_FILE || filename === SECONDARY_FILE) errors = [];
return getCompileResult('');
}🤖 Prompt for AI Agents
In src/livecodes/languages/svelte/lang-svelte-compiler.ts around lines 47-51, do
not reset errors inside this block—only build the import map for
MAIN_FILE/SECONDARY_FILE here (keep imports = createImportMap(importedContent,
config); remove errors = [] from this hunk). Instead, at the root-file preamble
(right after detecting filename === MAIN_FILE || filename === SECONDARY_FILE)
initialize/reset shared state by setting importedContent = '', imports = {}, and
errors = []; also add the empty-root guard: if (!code) { if (filename ===
MAIN_FILE || filename === SECONDARY_FILE) errors = []; return
getCompileResult(''); } so nested SFC compile errors aren’t wiped and root files
still reset state and handle empty code.
Comment on lines
+54
to
+58
| const result = (window as any).svelte.compile(processedCode, { | ||
| css: 'injected', | ||
| filename, | ||
| ...customSettings, | ||
| }); |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Stabilize component name for mount().
Pass name to svelte.compile so getMountCode’s LiveCodes_App symbol is guaranteed across Svelte versions.
const result = (window as any).svelte.compile(processedCode, {
css: 'injected',
filename,
+ name: filename.replace(/\.svelte$/,'').replace(/[^A-Za-z0-9_$]/g, '_'),
...customSettings,
});🌐 Web query:
Does the current Svelte compiler support compile options { css: 'injected', name } and a `mount` API via `import { mount } from 'svelte'`?
💡 Result:
Yes.
- The compiler supports compile options including css: 'injected' (and 'external' etc.) and related name/cssHash options. [1]
- Svelte exposes an imperative mount/hydrate/unmount API (import { mount } from 'svelte'), introduced for the Svelte 5 component API. [2][3]
Sources:
[1] svelte/compiler docs (CompileOptions).
[2] Imperative component API (mount/hydrate/unmount).
[3] Svelte 5 migration guide (notes on mount/hydrate).
Stabilize component name for mount().
Svelte supports the compile option name and the imperative mount API — pass a deterministic name so getMountCode’s LiveCodes_App symbol is stable across Svelte versions.
File: src/livecodes/languages/svelte/lang-svelte-compiler.ts — Lines: 54-58
const result = (window as any).svelte.compile(processedCode, {
css: 'injected',
filename,
+ name: filename.replace(/\.svelte$/,'').replace(/[^A-Za-z0-9_$]/g, '_'),
...customSettings,
});📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| const result = (window as any).svelte.compile(processedCode, { | |
| css: 'injected', | |
| filename, | |
| ...customSettings, | |
| }); | |
| const result = (window as any).svelte.compile(processedCode, { | |
| css: 'injected', | |
| filename, | |
| name: filename.replace(/\.svelte$/,'').replace(/[^A-Za-z0-9_$]/g, '_'), | |
| ...customSettings, | |
| }); |
🤖 Prompt for AI Agents
In src/livecodes/languages/svelte/lang-svelte-compiler.ts around lines 54-58,
the compile call needs a deterministic component name so getMountCode's
__LiveCodes_App__ symbol remains stable; add a name property with a fixed string
(e.g. "__LiveCodes_App__") to the compile options and ensure it overrides any
customSettings.name by placing it after the spread (or explicitly set
customSettings.name = "__LiveCodes_App__" before calling). Keep other options
(css, filename, customSettings) intact.
Comment on lines
+62
to
+65
| return { | ||
| code: '', | ||
| info: { errors }, | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Keep info shape consistent on error path.
Return importedContent and imports alongside errors.
- return {
- code: '',
- info: { errors },
- };
+ return {
+ code: '',
+ info: { importedContent, imports, errors },
+ };📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| return { | |
| code: '', | |
| info: { errors }, | |
| }; | |
| return { | |
| code: '', | |
| info: { importedContent, imports, errors }, | |
| }; |
🤖 Prompt for AI Agents
In src/livecodes/languages/svelte/lang-svelte-compiler.ts around lines 62 to 65,
the error return currently only sets info: { errors } which breaks the expected
info shape; update the error path to include the existing importedContent and
imports properties alongside errors (e.g., info: { errors, importedContent,
imports }) so callers always receive a consistent info object.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR shows compiler error messages in integrated console
Summary by CodeRabbit
New Features
Bug Fixes
Refactor