a2nr
/
elemes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: prevent localStorage leakage and fix navigation by implementing component isolation and reactive state management

This commit is contained in:
a2nr 2026-05-10 09:14:00 +07:00
parent ea3556d05f
commit 459ceff2d8
5 changed files with 249 additions and 213 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
examples/content/button_input_arduino.md
View File

@ -150,32 +150,20 @@ void loop() {
{ {
"type": "led", "type": "led",
"id": "led-builtin", "id": "led-builtin",
"x": 956.2066448009604, "x": 188,
"y": -15.285273464964305, "y": -158,
"rotation": 0, "rotation": 0,
"props": { "props": {
"color": "red", "color": "red",
"pin": 13, "pin": 13,
"state": false,
"value": false
}
},
{
"type": "resistor",
"id": "resistor-1776299815587-z0q0jzny8",
"x": 808.6031046903261,
"y": 44.96592399354325,
"rotation": 0,
"props": {
"value": false,
"state": false "state": false
} }
}, },
{ {
"type": "pushbutton", "type": "pushbutton",
"id": "pushbutton-1776299852057-07xh6qh7g", "id": "pushbutton-1778378142489-v899irppo",
"x": 829.2414304859469, "x": 300,
"y": 230.19576790585754, "y": 59,
"rotation": 0, "rotation": 0,
"props": { "props": {
"color": "red", "color": "red",
@ -183,10 +171,33 @@ void loop() {
"label": "", "label": "",
"xray": false "xray": false
} }
},
{
"type": "resistor",
"id": "resistor-1778378159414-9y3d8f1uk",
"x": 409,
"y": 68,
"rotation": 0,
"props": {
"value": "1000"
}
},
{
"type": "resistor",
"id": "resistor-1778378205248-h9g1m1wml",
"x": 114,
"y": -89,
"rotation": 0,
"props": {
"value": "1000"
}
} }
], ],
"wires": [] "wires": [
]
} }
---END_VELXIO_CIRCUIT--- ---END_VELXIO_CIRCUIT---
---EXPECTED_SERIAL_OUTPUT--- ---EXPECTED_SERIAL_OUTPUT---
@ -198,7 +209,7 @@ PRESSED
"wires": [ "wires": [
{ {
"start": { "start": {
"componentId": "resistor-1776299815587-z0q0jzny8", "componentId": "resistor-1778378205248-h9g1m1wml",
"pinName": "2" "pinName": "2"
}, },
"end": { "end": {
@ -206,6 +217,16 @@ PRESSED
"pinName": "A" "pinName": "A"
} }
}, },
{
"start": {
"componentId": "resistor-1778378205248-h9g1m1wml",
"pinName": "1"
},
"end": {
"componentId": "arduino-uno",
"pinName": "13"
}
},
{ {
"start": { "start": {
"componentId": "arduino-uno", "componentId": "arduino-uno",
@ -218,22 +239,22 @@ PRESSED
}, },
{ {
"start": { "start": {
"componentId": "resistor-1776299815587-z0q0jzny8", "componentId": "arduino-uno",
"pinName": "1" "pinName": "5V"
}, },
"end": { "end": {
"componentId": "arduino-uno", "componentId": "resistor-1778378159414-9y3d8f1uk",
"pinName": "13" "pinName": "2"
} }
}, },
{ {
"start": { "start": {
"componentId": "pushbutton-1776299852057-07xh6qh7g", "componentId": "resistor-1778378159414-9y3d8f1uk",
"pinName": "1.l" "pinName": "1"
}, },
"end": { "end": {
"componentId": "arduino-uno", "componentId": "pushbutton-1778378142489-v899irppo",
"pinName": "2" "pinName": "1.r"
} }
}, },
{ {
@ -242,8 +263,18 @@ PRESSED
"pinName": "GND.3" "pinName": "GND.3"
}, },
"end": { "end": {
"componentId": "pushbutton-1776299852057-07xh6qh7g", "componentId": "pushbutton-1778378142489-v899irppo",
"pinName": "2.l" "pinName": "2.r"
}
},
{
"start": {
"componentId": "arduino-uno",
"pinName": "2"
},
"end": {
"componentId": "pushbutton-1778378142489-v899irppo",
"pinName": "1.r"
} }
} }
] ]

1
frontend/src/lib/components/CodeEditor.svelte
View File

@ -252,6 +252,7 @@
onDestroy(() => { onDestroy(() => {
cleanupNoPaste?.(); cleanupNoPaste?.();
view?.destroy(); view?.destroy();
clearTimeout(saveTimeout);
}); });
// Recreate editor ONLY when theme actually changes (not on ready/container changes) // Recreate editor ONLY when theme actually changes (not on ready/container changes)

42
frontend/src/routes/lesson/[slug]/+page.svelte
View File

@ -26,9 +26,11 @@
const mgr = new LessonManager(); const mgr = new LessonManager();
const float = createFloatingPanel(); const float = createFloatingPanel();
// Sync lesson data when navigating // Initialize manager with lesson data whenever it changes.
$effect(() => { $effect(() => {
if (pageData.lesson) mgr.init(pageData.lesson); if (pageData.lesson) {
mgr.init(pageData.lesson);
}
}); });
// Mobile behavior for floating panel // Mobile behavior for floating panel
@ -79,7 +81,8 @@
<title>{mgr.data?.lesson_title ?? 'Pelajaran'} - Elemes LMS</title> <title>{mgr.data?.lesson_title ?? 'Pelajaran'} - Elemes LMS</title>
</svelte:head> </svelte:head>
{#if mgr.data} {#if pageData.lesson}
{#key pageData.lesson.filename}
<div class="lesson-layout" class:single-col={float.floating || mgr.isMobile}> <div class="lesson-layout" class:single-col={float.floating || mgr.isMobile}>
<!-- svelte-ignore a11y_no_static_element_interactions --> <!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="lesson-content" bind:this={contentEl} use:noSelect use:renderMath <div class="lesson-content" bind:this={contentEl} use:noSelect use:renderMath
@ -90,7 +93,7 @@
oncut={(e) => e.preventDefault()} oncut={(e) => e.preventDefault()}
oncontextmenu={(e) => e.preventDefault()}> oncontextmenu={(e) => e.preventDefault()}>
{#if mgr.data.locked} {#if mgr.data?.locked}
<div class="locked-banner"> <div class="locked-banner">
<span class="locked-banner-icon">&#128274;</span> <span class="locked-banner-icon">&#128274;</span>
<div> <div>
@ -117,8 +120,8 @@
</div> </div>
</div> </div>
{:else} {:else}
<div class="prose">{@html mgr.data.lesson_content}</div> <div class="prose">{@html mgr.data?.lesson_content ?? ''}</div>
<LessonList lessons={mgr.data.ordered_lessons ?? []} currentSlug={mgr.slug} /> <LessonList lessons={mgr.data?.ordered_lessons ?? []} currentSlug={mgr.slug} />
{/if} {/if}
</div> </div>
@ -134,7 +137,7 @@
class:mobile-hidden={mgr.isMobile && mgr.mobileMode === 'hidden'} class:mobile-hidden={mgr.isMobile && mgr.mobileMode === 'hidden'}
class:mobile-half={mgr.isMobile && mgr.mobileMode === 'half'} class:mobile-half={mgr.isMobile && mgr.mobileMode === 'half'}
class:mobile-full={mgr.isMobile && mgr.mobileMode === 'full'} class:mobile-full={mgr.isMobile && mgr.mobileMode === 'full'}
class:editor-locked={mgr.data.locked} class:editor-locked={mgr.data?.locked}
style={float.style}> style={float.style}>
<WorkspaceHeader <WorkspaceHeader
@ -142,20 +145,20 @@
bind:mobileMode={mgr.mobileMode} bind:mobileMode={mgr.mobileMode}
bind:activeTab={mgr.activeTab} bind:activeTab={mgr.activeTab}
bind:currentLanguage={mgr.currentLanguage} bind:currentLanguage={mgr.currentLanguage}
hasInfo={!!mgr.data.lesson_info} hasInfo={!!mgr.data?.lesson_info}
hasExercise={!!mgr.data.exercise_content} hasExercise={!!mgr.data?.exercise_content}
activeTabs={mgr.data.active_tabs ?? []} activeTabs={mgr.data?.active_tabs ?? []}
floating={float.floating} floating={float.floating}
minimized={float.minimized} minimized={float.minimized}
onDragStart={float.onDragStart} onDragStart={float.onDragStart}
onResizeStart={float.onResizeStart} onResizeStart={float.onResizeStart}
onFloatToggle={float.toggle} onFloatToggle={float.toggle}
onMinimize={float.minimize} onMinimize={float.minimize}
locked={mgr.data.locked} locked={mgr.data?.locked}
/> />
<div class="editor-body" bind:this={tabsEl} use:renderMath style="position: relative;"> <div class="editor-body" bind:this={tabsEl} use:renderMath style="position: relative;">
{#if mgr.data.locked} {#if mgr.data?.locked}
<div class="workspace-lock-overlay"> <div class="workspace-lock-overlay">
<div class="lock-overlay-content"> <div class="lock-overlay-content">
<div class="lock-overlay-icon">&#128274;</div> <div class="lock-overlay-icon">&#128274;</div>
@ -166,13 +169,13 @@
{/if} {/if}
<div class="tab-panel" class:tab-hidden={mgr.activeTab !== 'info'} use:noSelect> <div class="tab-panel" class:tab-hidden={mgr.activeTab !== 'info'} use:noSelect>
{#if mgr.data.lesson_info} {#if mgr.data?.lesson_info}
<div class="tab-content">{@html mgr.data.lesson_info}</div> <div class="tab-content">{@html mgr.data.lesson_info}</div>
{/if} {/if}
</div> </div>
<div class="tab-panel" class:tab-hidden={mgr.activeTab !== 'exercise'} use:noSelect> <div class="tab-panel" class:tab-hidden={mgr.activeTab !== 'exercise'} use:noSelect>
{#if mgr.data.exercise_content} {#if mgr.data?.exercise_content}
<div class="tab-content"> <div class="tab-content">
<h2 class="tab-heading">Latihan</h2> <h2 class="tab-heading">Latihan</h2>
{@html mgr.data.exercise_content} {@html mgr.data.exercise_content}
@ -180,7 +183,7 @@
{/if} {/if}
</div> </div>
{#if mgr.data.active_tabs?.includes('circuit')} {#if mgr.data?.active_tabs?.includes('circuit')}
<div class="tab-panel" class:tab-hidden={mgr.activeTab !== 'circuit'}> <div class="tab-panel" class:tab-hidden={mgr.activeTab !== 'circuit'}>
<CircuitTab <CircuitTab
data={mgr.data} data={mgr.data}
@ -200,7 +203,7 @@
{#if mgr.isVelxio} {#if mgr.isVelxio}
<div class="tab-panel velxio-panel" class:tab-hidden={mgr.activeTab !== 'velxio'}> <div class="tab-panel velxio-panel" class:tab-hidden={mgr.activeTab !== 'velxio'}>
<VelxioTab <VelxioTab
hasArduinoCode={!!mgr.data.initial_code_arduino} hasArduinoCode={!!mgr.data?.initial_code_arduino}
velxioError={mgr.velxioError} velxioError={mgr.velxioError}
authLoggedIn={$authLoggedIn} authLoggedIn={$authLoggedIn}
velxioSaving={mgr.velxioSaving} velxioSaving={mgr.velxioSaving}
@ -214,7 +217,7 @@
<FlowchartTab <FlowchartTab
bind:this={mgr.flowchartTab} bind:this={mgr.flowchartTab}
storageKey={mgr.flowchartStorageKey} storageKey={mgr.flowchartStorageKey}
initialData={mgr.data.initial_flowchart} initialData={mgr.data?.initial_flowchart}
onRun={mgr.handleRun.bind(mgr)} onRun={mgr.handleRun.bind(mgr)}
onReset={mgr.handleReset.bind(mgr)} onReset={mgr.handleReset.bind(mgr)}
compiling={mgr.compiling} compiling={mgr.compiling}
@ -222,7 +225,7 @@
</div> </div>
{/if} {/if}
{#if !mgr.data.active_tabs?.length || mgr.data.active_tabs.includes('c') || mgr.data.active_tabs.includes('python')} {#if !mgr.data?.active_tabs?.length || mgr.data.active_tabs.includes('c') || mgr.data.active_tabs.includes('python')}
<div class="tab-panel" class:tab-hidden={mgr.activeTab !== 'editor'}> <div class="tab-panel" class:tab-hidden={mgr.activeTab !== 'editor'}>
<CodeTab <CodeTab
data={mgr.data} data={mgr.data}
@ -241,7 +244,7 @@
</div> </div>
{/if} {/if}
{#if mgr.data.active_tabs?.includes('quiz')} {#if mgr.data?.active_tabs?.includes('quiz')}
<div class="tab-panel" class:tab-hidden={mgr.activeTab !== 'quiz'}> <div class="tab-panel" class:tab-hidden={mgr.activeTab !== 'quiz'}>
<QuizTab <QuizTab
quizData={mgr.data.quiz_data ?? []} quizData={mgr.data.quiz_data ?? []}
@ -266,4 +269,5 @@
<CelebrationOverlay bind:visible={mgr.showCelebration} /> <CelebrationOverlay bind:visible={mgr.showCelebration} />
</div> </div>
</div> </div>
{/key}
{/if} {/if}

6
frontend/src/routes/lesson/[slug]/CodeTab.svelte
View File

@ -36,7 +36,7 @@
{compiling ? 'Compiling...' : '▶ Run'} {compiling ? 'Compiling...' : '▶ Run'}
</button> </button>
<button type="button" class="btn btn-secondary" onclick={onReset}>Reset</button> <button type="button" class="btn btn-secondary" onclick={onReset}>Reset</button>
{#if data.solution_code && authLoggedIn && lessonCompleted} {#if data?.solution_code && authLoggedIn && lessonCompleted}
<button type="button" class="btn btn-secondary" onclick={onShowSolution}> <button type="button" class="btn btn-secondary" onclick={onShowSolution}>
{showSolution ? 'Sembunyikan Solusi' : 'Lihat Solusi'} {showSolution ? 'Sembunyikan Solusi' : 'Lihat Solusi'}
</button> </button>
@ -57,9 +57,9 @@
{/key} {/key}
</div> </div>
{#if (currentLanguage === 'python' ? (data.expected_output_python || data.expected_output) : data.expected_output)} {#if (currentLanguage === 'python' ? (data?.expected_output_python || data?.expected_output) : data?.expected_output)}
<details class="expected-output"> <details class="expected-output">
<summary>Expected Output</summary> <summary>Expected Output</summary>
<pre>{currentLanguage === 'python' ? (data.expected_output_python || data.expected_output) : data.expected_output}</pre> <pre>{currentLanguage === 'python' ? (data?.expected_output_python || data?.expected_output) : data?.expected_output}</pre>
</details> </details>
{/if} {/if}

2
frontend/src/routes/lesson/[slug]/lesson.svelte.ts
View File

@ -54,7 +54,7 @@ export class LessonManager {
circuitEditor = $state<CircuitEditor | null>(null); circuitEditor = $state<CircuitEditor | null>(null);
flowchartTab = $state<any>(null); flowchartTab = $state<any>(null);
slug = $derived(get(page).params.slug); get slug() { return get(page).params.slug; }
isVelxio = $derived(this.data?.active_tabs?.includes('velxio') ?? false); isVelxio = $derived(this.data?.active_tabs?.includes('velxio') ?? false);
isFlowchart = $derived(this.data?.active_tabs?.includes('flowchart') ?? false); isFlowchart = $derived(this.data?.active_tabs?.includes('flowchart') ?? false);