@rbxts/uiblox 0.1.15 → 0.1.16

package/README.md

@@ -65,7 +65,7 @@ You can house all of your components within shared.
 #### src/shared/ui/app/App.tsx
 
 The top-level class for our UI. Loads the actual ApplLayout into ScreenGui. This
-is what we later pass to `React.mount()`.
+is what we later pass when mounting the App.
 
 ```javascript
 import React, { Component } from "@rbxts/react";
@@ -205,26 +205,28 @@ Some sample logic for mounting app when player spawns (on client).
 Mount the App in the LocalPlayer's `PlayerGui`.
 
 ```javascript
-import React, { Tree } from "@rbxts/react";
+import Log from "@rbxts/log";
+import React, { StrictMode } from "@rbxts/react";
+import { createPortal, createRoot } from "@rbxts/react-roblox";
 import { Players } from "@rbxts/services";
-import { App } from "shared/ui/App";
+import { APP_CONTAINER_NAME } from "shared/constants/AppConstants";
+import App from "shared/packages/ui/app/components/App";
 
 class AppLoader {
-	protected _tree: Tree | undefined;
+	protected root: React.ReactNode | undefined;
 
 	Mount() {
-		const playerGui = Players.LocalPlayer.FindFirstChild("PlayerGui") as PlayerGui;
+		const playerGui = Players.LocalPlayer.FindFirstChildOfClass("PlayerGui");
 
-		const appComponent = <App />;
-		this._tree = React.mount(appComponent, playerGui, "App");
-		print("App mounted");
-	}
-
-	Unmount() {
-		if (this._tree) {
-			React.unmount(this._tree);
-			print("App unmounted");
+		if (!playerGui) {
+			Log.Error("PlayerGui not found");
+			return;
 		}
+
+		const root = createRoot(new Instance("Folder"));
+
+		root.render(<StrictMode>{createPortal(<App key={APP_CONTAINER_NAME} />, playerGui)}</StrictMode>);
+		Log.Info("App mounted");
 	}
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@rbxts/uiblox",
-	"version": "0.1.15",
+	"version": "0.1.16",
 	"description": "UI Library and theming for roblox-ts projects",
 	"main": "out/init.lua",
 	"scripts": {