Migrate SPA to Vite; adopt Prettier

[skearnes]

Summary

Modernizes the Vue SPA's tooling and fixes a few latent bugs that surfaced once it was actually exercised locally. Five threads:

1. Build: @vue/cli-service → Vite 6. vue-cli is in maintenance mode and pinned by transitive deps that will never be patched. Vite is the official Vue successor.
2. Format: clang-format → Prettier. clang-format treats .vue files as C-like and produces nonsense (which is what broke CI in the first place). Prettier is what ord-app already uses — adopting it here keeps formatting consistent between the two SPAs.
3. Sass module system: @import → @use ... as *. Every build was warning that @import will be removed in Dart Sass 3.0.0.
4. Lint: eslint@7 → eslint@9 with flat config. The eslint 7→8 bump in the Vite commit cleared most of the npm churn but kept six deprecation warnings on every npm install; the v9 bump wipes all six.
5. Latent bugs surfaced by local testing: Ketcher view rendering, two /search hangs (empty query and form-submit-while-mounted), buggy reactionIds normalization, and a dead no-console/no-debugger lint rule.

Once this lands, the overrides workaround proposed in #175 becomes dead code and that PR is superseded (already closed).

Result

	Before	After
npm packages installed	1037	269
Open dependabot alerts	23	0
npm audit	23 issues	0 vulnerabilities
npm install deprecation warnings	6 (eslint 7 → rimraf/inflight/glob/@humanwhocodes chain)	0
npm run build time (local)	~16s	~5s
JS formatter	clang-format (broken on .vue)	Prettier (matches ord-app)
Sass deprecation warnings	many per build	0
/ketcher page	renders but unstyled/broken	renders correctly
/search with no filters	hangs forever (stuck spinner)	shows a "configure filters" prompt
/search from filter panel submit	hangs forever; only worked after refresh	submits + polls correctly without remount
Selected-set view with no ?reaction_id=	"Download" button enabled; POSTs [undefined]	button disabled; clean empty state
no-console/no-debugger rules	dead (NODE_ENV never set)	warn in CI

Commits in this PR

Commit	What
d5d1c4d	Vite migration: swap @vue/cli-service + @vue/cli-plugin-* for vite ^6.4.2 + @vitejs/plugin-vue + vite-plugin-static-copy; move public/index.html → app/index.html; process.env.BASE_URL → import.meta.env.BASE_URL; rename .eslintrc.js → .eslintrc.cjs; drop babel.config.js, vue.config.js, core-js, @babel/eslint-parser; bump eslint 7 → 8.57, eslint-plugin-vue 8 → 9
16dcdac	CI: replace check_javascript's apt-install + find -exec clang-format step with npm run format:check; add app/.prettierrc.json (verbatim copy of ord-app/ui/.prettierrc.json) and app/.prettierignore; add prettier devDep + format / format:check scripts
2ed25e2	One-time prettier --write . pass over app/ — 47 files, no behavioral change (whitespace, quote style, trailing commas, Vue attribute layout)
b98abde	Add a local prettier --check hook to .pre-commit-config.yaml, mirroring the existing ty-check setup
26c74b0	Migrate 36 @import lines across 24 files to @use '...' as *; clears all Dart Sass 3.0.0 deprecation warnings. Plain CSS @import url() and CSS-file @import are left as-is. as * keeps every $lightgrey/$medgrey/$linkblue reference in the global namespace, so no $varname references needed to change
510d505	Bug fix: drop scoped from MainKetcher.vue's <style> block. Vue scoped CSS appends [data-v-HASH] to every selector, but Ketcher builds its DOM at runtime via JS and those elements don't carry the scope attribute — so all ~1300 Ketcher CSS rules failed to match anything. Also drops two empty button selectors in SearchResults.vue files that were producing per-build warnings
70b281e	Bug fix: short-circuit /search when there are no URL query params. The watch on $route.query was firing /api/submit_query with an empty string on mount, the backend rejects that with ValueError, and the SPA was polling forever. Frontend now bails early and the template shows a "configure the filters" prompt instead
8de311e	README: combine the cleanup-pass refresh (project layout fix, setup.py → uv, ## Deployment pointer to ord-infrastructure) with the local-stack fixes I needed to actually bring this up (redis prerequisite, uv run uvicorn … instead of fastapi dev, conda-env-activation note for initdb discovery, macOS AirPlay port-5000 collision, Ketcher extraction step clarified, Vite script aliases)
04f4016	Bump eslint 8.57 → 9.20 and migrate to flat config. The eslint 8 dep tree pulled in eslint@8.57.1, @humanwhocodes/{config-array,object-schema}, rimraf@3, glob@7, and inflight@1 — all six packages produce deprecation warnings during npm install. v9 wipes the entire chain. Delete .eslintrc.cjs and .eslintignore; add eslint.config.js (uses vue.configs['flat/essential'] from eslint-plugin-vue@9.33)
1cac486	Bug fix surfaced by ESLint 9's no-constant-binary-expression rule: reactionIds in MainSelectedSet.vue was `[query.reaction_id]
c9534dd	Self-review follow-ups. (a) Drop the resolve.extensions workaround from vite.config.js and add .vue to all 50 extension-less imports across 16 files — Vite officially discourages relying on implicit .vue resolution. (b) Pin the dev-server proxy target to 127.0.0.1:5000 (was 0.0.0.0:5000) so the macOS AirPlay-on-port-5000 collision is dodged deterministically. (c) Fix the always-false process.env.NODE_ENV === 'production' check in eslint.config.js — ESLint never sets NODE_ENV, so no-console/no-debugger were never warning. Switch to process.env.CI which GitHub Actions sets; verified by running lint both locally (7 warnings) and as CI=true npm run lint (17 warnings — the 10 extra are previously-silent console statements)
4f6c656	Bug fix: /search was hanging until refresh when the user submitted the filter form. updateSearchOptions navigates via $router.push({name: 'search', query: …}) which reuses the mounted component, so mounted() does NOT re-fire — only the watch on $route.query does. The polling-setup branch for 202 (task pending) responses lived only inside mounted(), so the watch path hit the first 202, had no branch for it, and stuck the spinner. Pull "fetch then poll if 202" out of mounted into runSearch() called from both paths. Also fix two adjacent bugs: clearInterval(...) was never nulling searchPollingInterval (subsequent searches saw a stale truthy handle and skipped polling), and a new query could inherit the previous query's searchTaskId

Preserved behavior

• Dev server still binds port 8080 (matches the old vue-cli default).
• npm run serve still works; added npm run dev and npm run preview as Vite-conventional aliases.
• @/* import alias preserved in vite.config.js + jsconfig.json.
• All .vue imports now carry explicit extensions, so Vite's default resolver handles everything without resolve.extensions overrides.

Infrastructure: zero changes

The Dockerfile is unchanged — it still calls npm install && npm run build and copies dist/ to nginx's web root. nginx's SPA try_files $uri $uri/ /index.html config doesn't care about asset paths, so Vite's assets/ directory works in place of vue-cli's js/+css/.

Test plan

• cd app && rm -rf node_modules package-lock.json && npm install produces 269 packages, zero deprecation warnings, zero vulnerabilities
• cd app && npm run build succeeds in ~5s with no Dart Sass deprecation warnings and no Vite warnings; dist/ contains index.html, assets/*, templates/* (3 ketcher files), favicon.ico, img/
• cd app && npm run serve boots at http://localhost:8080/ in ~150ms; / returns 200; /src/main.js is served and transformed
• cd app && npm run preview serves the production bundle; /templates/library.svg (2.5MB) and /templates/fg.sdf (30KB) are reachable
• cd app && npm run format:check reports "All matched files use Prettier code style!"
• cd app && npm run lint passes (7 unused-var warnings, no errors); CI=true npm run lint correctly adds 10 console-statement warnings
• pre-commit run prettier --all-files passes
• End-to-end against a live FastAPI backend (ORD_INTERFACE_TESTING=TRUE uv run uvicorn …) + redis: / renders, /browse lists the 3 test datasets, /search shows the new "configure filters" prompt instead of hanging, submitting a query from the filter panel resolves without a refresh, /ketcher renders correctly (CSS no longer scoped away)
• CI Checks workflow (check_javascript running npm run format:check) is green
• CI Tests > test_app workflow builds the Docker image (which calls npm run build inside the container) and runs the puppeteer smoke tests

Follow-ups (out of scope for this PR)

• Stand up Vitest so the SPA bug fixes (Ketcher scope, empty-search short-circuit, reactionIds normalization, runSearch polling fix) get unit-test coverage instead of relying on manual verification.
• Decide whether to scope Ketcher's CSS to its own route lifecycle (currently it loads globally on first /ketcher visit and persists for the SPA's lifetime; Ketcher uses :where()-prefixed selectors with zero specificity so the practical risk is low, but it's not ideal).

🤖 Generated with Claude Code