simoleo89 48d62c5c6b Architecture refactor: docs + 5 pilot implementations + error boundary
This is the structural plan promised in the previous session, with concrete
pilots for all five proposals + the bonus error-boundary work.

== docs/ARCHITECTURE.md (new, ~370 lines)

Living document describing:
- where the project stands today (event-bus pattern friction with React 19,
  god-hooks, oversized files);
- the five proposed structural improvements with the why/how/status of each;
- what's already in place across this branch;
- recommended order for the next refactor PRs.

This is the deliverable the rest of this commit references.

== Proposal #3 + #4 pilots: src/features/doorbell/ (new)

Concrete feature-folder migration on the doorbell widget (chosen because
it's small enough to migrate end-to-end in one commit).

  src/features/doorbell/
    index.ts                    public API
    views/DoorbellWidgetView.tsx
    hooks/useDoorbellState.ts   reduces 3 events into a users array (data only)
    hooks/useDoorbellActions.ts answer(name, flag) (imperative actions only)

The split (data vs actions) is the pattern proposal #4 wants applied to
useCatalog/useChat/useWiredTools later. The original useDoorbellWidget had
both concerns + a buggy `useEffect(() => setIsVisible(!!users.length), [users])`
derive-state-in-effect. The new view computes visibility in render.

Compat shims kept so existing imports keep working:
- src/components/room/widgets/doorbell/DoorbellWidgetView.tsx -> 1-line re-export
- src/hooks/rooms/widgets/useDoorbellWidget.ts -> deprecated wrapper around
  the two new hooks, returning the same { users, answer } shape.

== Proposal #2 prototype: src/api/nitro-query/ (new)

Adapter outline for wrapping composer/parser request-response pairs in
TanStack Query. Not yet enabled because @tanstack/react-query is not in
package.json. The file documents the activation steps:

  yarn add @tanstack/react-query @tanstack/react-query-devtools
  + mount QueryClientProvider in src/index.tsx

awaitNitroResponse() throws with a helpful pointer to the doc section if
called before activation, so accidental adoption fails loudly.

== Proposal #5 skeleton: src/state/createNitroStore.ts (new)

Same pattern: skeleton + activation instructions. Not yet enabled because
zustand is not in package.json.

  yarn add zustand
  + replace the throw with `import { create } from 'zustand'; export const createNitroStore = create;`

The doc inside the file shows the recommended slice shape and points to
the suggested first migration target (the let isCreatingRoom singleton in
NavigatorRoomCreatorView).

== Bonus: WidgetErrorBoundary

src/common/error-boundary/WidgetErrorBoundary.tsx wraps react-error-boundary
with a sensible default (silent fallback, NitroLogger.error). Re-exported
from src/common/index.ts.

Applied as the umbrella around RoomWidgetsView's children — a widget
crash in a room (e.g. malformed pet data) now degrades gracefully
instead of unmounting the whole UI.

== Verification

- yarn eslint on all new + modified files: 0 errors / 0 warnings introduced.
  RoomWidgetsView still has its 1 pre-existing FC<{}> error (1 before, 1 after).
- yarn tsc on all new files: clean (only project-wide pre-existing
  TS2307 about @nitrots/nitro-renderer not installed locally remains).
- No regressions: existing imports of DoorbellWidgetView and
  useDoorbellWidget keep resolving via the compat shims.

== What's NOT in this commit (intentionally)

- Mass adoption of the new patterns elsewhere — left as follow-up PRs in
  the order documented in ARCHITECTURE.md "How to pick the next refactor PR".
- Installation of @tanstack/react-query / zustand — explicit team decision,
  not the LLM's to make.
- Test infrastructure (Vitest setup) — listed as the #1 missing piece in
  the doc, but a separate PR.

https://claude.ai/code/session_01GrR87LAqnAEyKG2ZbmQt5Q
2026-05-11 16:31:52 +00:00
🆙 Init V3
2026-01-31 09:10:52 +01:00
2026-05-07 10:21:48 +02:00
🆙 Init V3
2026-01-31 09:10:52 +01:00
🆙 Init V3
2026-01-31 09:10:52 +01:00
2026-04-08 14:06:25 +02:00
2026-04-08 14:06:25 +02:00

v2.2.0 -Nitro V3 !! Use at Own Risk as it is still in Beta !!

Prerequisites

  • Git
  • NodeJS >= 18
    • If using NodeJS < 18 remove --openssl-legacy-provider from the package.json scripts
  • Yarn npm i yarn -g

Installation

  • First you should open terminal and navigate to the folder where you want to clone Nitro and Nitro-Renderer
  • Clone Nitro (Expl. C:\Github)
    • git clone https://github.com/duckietm/Nitro-V3.git <== For now switch to Dev-RendererV2
    • git clone https://github.com/duckietm/Nitro_Render_V3.git
    • Install the dependencies for the renderer : cd C:\Github\Nitro_Render_V3
      • yarn install
    • Now we will create a Link for the Nitro Renderer : yarn link This will give you a link address yarn link "@nitrots/nitro-renderer"
    • Install the dependencies for Cool UI : cd C:\Github\Nitro-V3
    • yarn install
    • yarn link "@nitrots/nitro-renderer" <== This will link the renderer in the project
  • Rename a few files
    • Copy public/configuration/renderer-config.example to public/configuration/renderer-config.json
    • Copy public/configuration/ui-config.example to public/configuration/ui-config.json
    • Copy public/configuration/client-mode.example to public/configuration/client-mode.json
    • Set your links
    • Open public/configuration/renderer-config.json
      • Update socket.url, asset.url, image.library.url, & hof.furni.url
    • Open public/configuration/ui-config.json
      • Update camera.url, thumbnails.url, url.prefix, habbopages.url
    • yarn build <== the final step to build the DIST folder this is where your browser needs to point / or upload this to your /client if you do the compile on a other machine (preferd)
    • You can override any variable by passing it to NitroConfig in the index.html

Usage

Development

Run Nitro in development mode when you are editing the files, this way you can see the changes in your browser instantly

yarn start

Production

To build a production version of Nitro just run the following command

yarn build:prod
  • A dist folder will be generated, these are the files that must be uploaded to your webserver
  • Consult your CMS documentation for compatibility with Nitro and how to add the production files
S
Description
No description provided
Readme 33 MiB
Languages
TypeScript 88.8%
CSS 8.3%
JavaScript 2.4%
HTML 0.5%