mirror of
https://github.com/duckietm/Nitro-V3.git
synced 2026-06-19 15:06:20 +00:00
simoleo89
d7d9a7e382
Second of three slices to break up the WiredCreatorToolsView inline
tab bodies (Variables tab was split in the previous commit; Monitor
remains).
What moved
- 139 lines of inline JSX (`{ activeTab === 'inspection' && <div>
... </div> }`) → src/components/wired-tools/WiredInspectionTabView.tsx
- The new component declares 28 typed props grouped by area:
element-type + preview, keep-selected toggle, variables table,
inline editor, give-variable popover, remove variable. All state
and actions arrive from the parent — no internal useState/useEffect.
- The "select variable + start editing" double action at the parent
is wrapped into a single onSelectInspectionVariable callback so
the sub-component doesn't need to know about the two setters.
- The renderer-SDK type IWired*VariableDefinition is replaced by a
structural InspectionGiveDefinition declared in the view file:
{ itemId, name, hasValue }. Keeps the sub-component free of
renderer-SDK imports.
Impact
- WiredCreatorToolsView.tsx: 3809 → 3710 lines (−99 net). Combined
with the previous commit, the file is now down 191 lines from the
4493-line single-monolith it was 6 commits ago.
- Inspection panel JSX is now visually scannable as a file. The
parent only orchestrates state and passes it down.
Conscious non-goals
- No state hoisted. selectedInspectionVariableKeys, editingVariable,
isInspectionGiveOpen, inspectionGiveValue etc. all still live in
the parent useState. The Zustand slice for shared wired-tools state
is a follow-up PR.
- No behavior change. Same renders, same handlers, same DOM.
Verification
- yarn eslint on the two files: 34 problems baseline, 34 after split
(the same pre-existing FC<{}> + 5 set-state-in-effect on the parent
module + react-compiler skip warnings).
- yarn test: 49/49 passing.
- yarn tsc on the two files: clean.
Next: extract the Monitor tab (~176 lines), the last inline tab body.
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-providerfrom the package.json scripts
- If using NodeJS < 18 remove
- 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-RendererV2git 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 linkThis will give you a link addressyarn link "@nitrots/nitro-renderer" - Install the dependencies for Cool UI : cd C:\Github\Nitro-V3
yarn installyarn link "@nitrots/nitro-renderer"<== This will link the renderer in the project
- Rename a few files
- Copy
public/configuration/renderer-config.exampletopublic/configuration/renderer-config.json - Copy
public/configuration/ui-config.exampletopublic/configuration/ui-config.json - Copy
public/configuration/client-mode.exampletopublic/configuration/client-mode.json - Set your links
- Open
public/configuration/renderer-config.json- Update
socket.url, asset.url, image.library.url, & hof.furni.url
- Update
- Open
public/configuration/ui-config.json- Update
camera.url, thumbnails.url, url.prefix, habbopages.url
- Update
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
NitroConfigin the index.html
- Copy
Usage
- To use Nitro you need
.nitroassets generated, see nitro-converter for instructions - See Morningstar Websockets for instructions on configuring websockets on your server
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
distfolder 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