mirror of
https://github.com/duckietm/Nitro-V3.git
synced 2026-06-19 15:06:20 +00:00
simoleo89
23fc302b24
Proposal #5 from docs/ARCHITECTURE.md, first slice: split one of the three remaining inline tab bodies of WiredCreatorToolsView out into its own file. Same approach the Settings tab has had for a while (see WiredToolsSettingsTabView). What moved - 113 lines of inline JSX (the `{ activeTab === 'variables' && <div> ... </div> }` block) → src/components/wired-tools/WiredVariablesTabView.tsx - The new component is a pure presentation function: 12 typed props, no useState, no useEffect, no event subscriptions. It receives: * state to render: variablesType, variablePickerDefinitions, selectedVariableDefinition, canVariableHighlight, isVariableHighlightActive, variableManageCanOpen, selectedVariableProperties, selectedVariableTextValues * actions to call: onVariablesTypeChange, onPickVariable, onToggleVariableHighlight, onOpenManagePanel - The parent supplies all of them inline at the call site. The manage-panel open sequence (request fresh user vars + reset page + clear selection + show modal) is closed over into a single onOpenManagePanel callback, so the sub-component doesn't need to know about its three internal setters. Impact - WiredCreatorToolsView.tsx: 3901 → 3809 lines (−92 net). The file is still large, but one of the three big inline blocks is gone. Monitor (~176 lines) and Inspection (~138 lines) remain inline as follow-up PRs. - The React Compiler now has a smaller file boundary for the Variables panel; once the other two blocks come out the parent module should stop being skipped for memoization. Conscious non-goals - No state was moved. The shared state (selectedVariableKeys, isVariableHighlightActive, variableManagePage, etc.) still lives in the parent's useState. Hoisting them to a Zustand slice would be a separate PR — premature here. - No behavior change. Same renders, same handlers, same DOM. Verification - yarn eslint on the two touched files: 34 problems baseline, 34 problems after the split (identical: same FC<{}>, same pre-existing set-state-in-effect, same react-compiler skip warnings on the parent module). - yarn test: 49/49 passing. - yarn tsc on the two files: clean.
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