Update Quickstart for Javascript to v5

[Aaron LaBeau (biozal)]

Migrates both javascript-web and javascript-tui quickstart apps from Ditto SDK 4.14.3 to 5.0.0, adopting the new initialization, authentication, and sync APIs.

Summary

• Bumps @dittolive/ditto to 5.0.0 in both apps.
• Adopts the v5 Ditto.open(config) pattern with DittoConfig and server-mode auth.
• Replaces deprecated APIs (startSync/stopSync, disableSyncWithV3, DQL strict-mode ALTER SYSTEM) with their v5 equivalents.
• Adds Authenticator.DEVELOPMENT_PROVIDER login with an expiration handler for token refresh.
• Cleans up React lifecycle handling (StrictMode-safe init, ref-based cleanup) and refreshes documentation.

Changes

javascript-web

• SDK migration (src/App.tsx)
  • Replaced IdentityOnlinePlayground + new Ditto(identity) with await Ditto.open(new DittoConfig(...)) in server mode.
  • Added auth.setExpirationHandler that re-authenticates via Authenticator.DEVELOPMENT_PROVIDER.
  • Switched to ditto.sync.start() / ditto.sync.stop().
  • Removed disableSyncWithV3() and the ALTER SYSTEM SET DQL_STRICT_MODE = false call (no longer needed in v5).
• React lifecycle hardening
  • StrictMode-safe initialization with isInitializing guard and isMounted flag.
  • Proper cleanup of observer/subscription/Ditto instance on unmount (skipped in dev to avoid StrictMode lock-file churn).
  • Wrapped toggleSync, createTask, editTask, toggleTask, deleteTask in useCallback.
• UI/structure
  • Extracted ErrorMessage into its own component at src/components/ErrorMessage.tsx.
  • Removed unused legacy src/App.css (~950 lines) — Tailwind is the sole styling source.
  • TaskList.tsx: added TaskItem.displayName and removed a stray pt- class.
• Docs
  • README.md: bumped API reference link to v5.0.0, added Node.js v20+ prerequisite, fixed npm && npm run dev → npm install && npm run dev.

javascript-tui

• SDK migration (source/cli.js)
  • Switched to ditto.sync.start().
  • Removed disableSyncWithV3() and DQL strict-mode toggle.
  • Reworked transport config to enable LAN P2P (mDNS + multicast) and explicitly disable BLE/AWDL (which require macOS entitlements unavailable to plain Node processes).
  • Added waitUntilExit() so the process exits cleanly after Ink unmount.
  • Removed verbose startup console.log of flags, AppID, and token.
• App lifecycle (source/app.js)
  • Replaced useState for subscription/observer with useRef, added a cleanup function that cancels both on unmount.
  • Switched to ditto.sync.start() / ditto.sync.stop().
  • Minor cleanup: Array.from(tasks).map → tasks.map, { id: id } → { id }.
• Tests (tests/integration_test.js)
  • Removed deprecated disableSyncWithV3() and DQL strict-mode setup.
  • Throws on login failure rather than logging silently.
  • Ensures ditto.close() runs in error paths.
• Tooling (package.json)
  • engines.node bumped from >=18 to >=20.
  • Upgraded ESLint stack: eslint@^9.18.0, eslint-config-xo-react@^0.30.1, eslint-plugin-react@^7.37.5, eslint-plugin-react-hooks@^7.1.1.
  • Added glob: ^13.0.6 override to clear transitive deprecation warnings.
• Docs (README.md)
  • Linked v5 install guide, API reference, and release notes.
  • Documented prerequisites (Node 20+), keyboard controls, task document schema, and dev/format/test scripts.

Breaking Changes

• Apps now require Node.js v20 or later.
• .env files no longer require DITTO_WEBSOCKET_URL for the TUI flow (LAN P2P is used); it remains required for the web app.

Test Plan

• cd javascript-web && npm install && npm run build && npm run dev — verify tasks load, sync, and CRUD operations work.
• cd javascript-tui && npm install && npm start — verify TUI renders, syncs over LAN, and keyboard controls work.
• Run npm test in javascript-tui to confirm the integration test passes against the cloud.
• Confirm both apps interoperate (create a task in one, see it appear in the other).

[Copilot]

Pull request overview

Updates the JavaScript web and TUI quickstarts to use Ditto SDK v5.0.0 (and Node.js 20+), including API changes around DittoConfig/Ditto.open(...) and the v5 sync APIs.

Changes:

• Migrate web app initialization/auth/sync code to Ditto v5, and extract ErrorMessage into its own component.
• Migrate the TUI app + integration test to Ditto v5 sync APIs and adjust runtime behavior (Ink exit handling, transport config comments).
• Update docs and package manifests for v5.0.0 + Node.js >= 20; remove generated App.css.

Reviewed changes

Copilot reviewed 11 out of 13 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
javascript-web/src/components/TaskList.tsx	Minor React component tweaks (memo displayName) and Tailwind class fix.
javascript-web/src/components/ErrorMessage.tsx	New reusable error UI component.
javascript-web/src/App.tsx	Ditto v5 init/auth/sync migration and lifecycle management changes.
javascript-web/src/App.css	Removes large generated Tailwind output from repo.
javascript-web/README.md	Updates web quickstart docs for v5 and Node 20+.
javascript-web/package.json	Pins @dittolive/ditto to 5.0.0.
javascript-tui/tests/integration_test.js	Updates integration test to v5 sync APIs and improves Ditto close handling.
javascript-tui/source/cli.js	Updates TUI bootstrap to v5 and changes transport config + Ink exit handling.
javascript-tui/source/app.js	Updates TUI app logic for v5 sync APIs and simplifies subscription/observer setup.
javascript-tui/README.md	Updates TUI docs (v5, Node 20, usage, keyboard controls, architecture).
javascript-tui/package.json	Updates engines/deps for Node 20 and Ditto v5; dev tooling adjustments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.