Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Trim the editor bundle

Open
  • Is something wrong?
#145 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
58/100
Issue type
Refactor
Clarity
Clearly specified
Activity status
Quiet
Tech stack
javascript, react, typescript, vite
Domain
build-system, frontend, performance

Research direction

Read ui/src/page/app/appEditor.tsx and ui/src/page/app/appPage.tsx to trace Prettier usage, then compare their imports with ui/src/page/sample/sampleEditor.tsx and the lazy route in ui/src/App.tsx. Check the chunk configuration in ui/vite.config.ts and run cd ui && npm run build to establish bundle sizes. Done means the sample viewer no longer loads Prettier, formatting and syntax checks still work, and the build shows smaller lazy chunks.

Written by the indexing model from the issue text.

Description

priority: low tech-debt

The lazy appPage chunk (ace + prettier) is ~1.3 MB / ~380 kB gzip. Already off the initial load; could be slimmed with a lighter editor or formatter.

Effort: S–M

Migrated from TASKS.md (Later / nice to have).

Implementation notes

Priority: low — Pure client-side bundle-size/performance polish on a lazy chunk with no correctness, security, or stability impact and no server changes.

Purpose

Shrinks the largest lazy chunk shipped to any user who opens the bot editor or even just the read-only sample viewer, cutting time-to-interactive on a slow/mobile connection. Pure client-side performance work — no behavior change, no server/API surface touched.

Implementation approach
  • Confirmed via cd ui && npm run build: the shared vendor chunk (currently emitted as Alert-*.js, ~1.24 MB / ~347 kB gzip) bundles ace-builds + react-ace + prettier/standalone + prettier/plugins/{babel,estree} together because both ui/src/page/app/appEditor.tsx (editable editor) and ui/src/page/sample/sampleEditor.tsx (read-only sample viewer, added in the recent "in-app read-only sample bot viewer" work) statically import overlapping Ace modules, so Rolldown/Vite merges them into one shared chunk.
  • ui/src/page/sample/sampleEditor.tsx never uses Prettier at all (no compile/doClean), yet visiting /samples/:name today still pays for the Prettier-bearing shared chunk — split Ace and Prettier into separate chunks (e.g. vite.config.ts build.rollupOptions.output.manualChunks, or Vite 8/Rolldown's advancedChunks.groups) so samplePage/SamplePage (ui/src/App.tsx lazy route) no longer pulls Prettier.
  • In ui/src/page/app/appEditor.tsx and ui/src/page/app/appPage.tsx, prettier/standalone + babel/estree plugins are static top-level imports used only inside compile() (5s-debounced syntax check) and doClean() (format-on-demand). Convert both to await import('prettier/standalone') etc. inside those functions so Prettier's ~9.7 MB unpacked payload loads only on first actual use, not on editor mount.
  • No server changes; this is UI-only (ui/vite.config.ts, appEditor.tsx, appPage.tsx, sampleEditor.tsx). ui/src/util/botApi.ts (completions model) is untouched.
Key details to plan
  • No DB/service/REST/MCP/bot-API contract changes — server/src/util/compiler.ts and bot-facing surface are unaffected; no coupling to issue #142 (migrations).
  • No sandbox/security implications (isolated-vm untouched) and no SSE/reducer/determinism impact (arenaReducer.ts, seeded PRNG) — purely a build-output/lazy-loading change.
  • Testing: no existing unit test covers bundle size; verify manually with cd ui && npm run build and compare the reported chunk sizes/gzip before/after (already captured a baseline above). Confirm SampleEditor still renders read-only samples and AppEditor's Ctrl+R clean/5s syntax-check still work after switching to dynamic import() (manual smoke test via /run, since there's no Vitest bundle-size assertion to extend).
  • Watch for a UX regression: dynamic-importing Prettier means the first doClean()/typo-check after page load has a brief extra network/parse delay — acceptable trade-off, but worth a quick loading-state check in appEditorToolbar.
  • Effort: S–M as filed. Risk: low — additive build config + moving existing imports from top-level to on-demand, no logic changes.
Dominant language
TypeScript
Stars
0
Forks
0
Avg merge
8m
Merged PRs (30d)
8

Getting set up

Open in Codespaces

Starts the project's dev container in your browser, under your own GitHub account.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from LeeAdcock/robocodeJs.com

All issues in LeeAdcock/robocodeJs.com

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.