← ClaudeAtlas

writing-javascriptlisted

How browser JavaScript is written in this repo — both surfaces now speak one modern dialect and this says what that means for the code you type, where ES modules are impossible and where they are merely unused, and how to pick a feature (Baseline plus a file:// gate). Covers functional idiom over imperative DOM work, the shared helper layer, modular structure without a bundler, DRY across the report and the panel, keeping features isolated so one failure cannot blank a page, readability, testability through the black-box browser gates, and the anti-patterns that have already shipped bugs here. Use when planning, writing, reading, reviewing or refactoring anything under scripts/ui/report/ or scripts/ui/panel/, when adding a UI behaviour, or when a helper is about to exist twice.
AleksandarBisevac/claude-plugins · ★ 4 · Code & Development · score 77
Install: claude install-skill AleksandarBisevac/claude-plugins
# Writing JavaScript here There is no bundler, no npm, no TypeScript and no build step. The ordered parts under `ui/report/` and `ui/panel/` are concatenated by Python into exactly one inline `<script>` per page. The mechanics of that — ordering, the byte pins, splitting — belong to `refactoring-the-assembled-ui`. This file is about the code you type. ## Which dialect **Modern ES, in both — and both surfaces now speak it.** This section used to carry a table showing `report.js` as strictly ES5 against a modern `panel.js`; that gap was closed, and the table went on describing it. Re-derive rather than reading a number here: ```bash for d in report panel; do printf '%s: var=%s function()=%s\n' "$d" \ "$(grep -rho '\bvar ' plugins/audit/scripts/ui/$d/ | wc -l | tr -d ' ')" \ "$(grep -rho 'function *(' plugins/audit/scripts/ui/$d/ | wc -l | tr -d ' ')" done ``` Both are at zero `var` and zero `function ()`. What is NOT yet symmetric is JSDoc — the report's parts carry a block per exported behaviour and the panel's parts carry almost none — and since this project has no TypeScript, JSDoc is the type system it gets. Types must be specific (`{HTMLTableRowElement}`, `{(a: string, b: string) => number}`), never `{Object}`; when the type and the code disagree, fix the CODE. `let-const` has been Baseline *widely available* since 2019-03-20, and every other modern construct this code would use is in the same bracket. Check before assuming, though — `grep '^| let-const '`