@rbxts/uiblox 0.1.15 → 0.1.17

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/out/ui/index.d.ts

@@ -11,6 +11,9 @@ export { InputProps } from "./packages/index";
 export { InputColor } from "./packages/index";
 export { InputMargin } from "./packages/index";
 export { InputVariant } from "./packages/index";
+export { Preloader } from "./packages/index";
+export { PreloaderProps } from "./packages/index";
+export { PreloaderAssets as Assets } from "./packages/index";
 export { ProgressBar } from "./packages/index";
 export { ProgressBarProps } from "./packages/index";
 export { Shadow } from "./packages/index";

package/out/ui/init.luau

@@ -11,6 +11,7 @@ exports.Divider = TS.import(script, script, "packages").Divider
 exports.Icon = TS.import(script, script, "packages").Icon
 exports.IconButton = TS.import(script, script, "packages").IconButton
 exports.Input = TS.import(script, script, "packages").Input
+exports.Preloader = TS.import(script, script, "packages").Preloader
 exports.ProgressBar = TS.import(script, script, "packages").ProgressBar
 exports.Shadow = TS.import(script, script, "packages").Shadow
 exports.Sidebar = TS.import(script, script, "packages").Sidebar

package/out/ui/packages/index.d.ts

@@ -2,6 +2,7 @@ export * from "./divider/index";
 export * from "./icon/index";
 export * from "./iconButton/index";
 export * from "./input/index";
+export * from "./preloader/index";
 export * from "./progressBar/index";
 export * from "./shadow/index";
 export * from "./sidebar/index";

package/out/ui/packages/init.luau

@@ -13,6 +13,9 @@ end
 for _k, _v in TS.import(script, script, "input") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "preloader") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "progressBar") or {} do
 	exports[_k] = _v
 end

package/out/ui/packages/preloader/components/Preloader.d.ts

@@ -0,0 +1,13 @@
+import { CustomizedProps } from "../../../../theme/index";
+export interface PreloaderAssets {
+    [key: string]: string | PreloaderAssets;
+}
+export interface PreloaderProps {
+    assetMap: Map<string, PreloaderAssets>;
+    logo?: string;
+    showPercentage?: boolean;
+    loaderPrecision?: number;
+    showAssetName?: boolean;
+}
+declare function Preloader(props: CustomizedProps<Frame, PreloaderProps>): JSX.Element;
+export default Preloader;

package/out/ui/packages/preloader/components/Preloader.luau

@@ -0,0 +1,110 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useState = _react.useState
+local useMemo = _react.useMemo
+local _pretty_react_hooks = TS.import(script, TS.getModule(script, "@rbxts", "pretty-react-hooks").out)
+local useAsyncEffect = _pretty_react_hooks.useAsyncEffect
+local useDeferState = _pretty_react_hooks.useDeferState
+local ContentProvider = TS.import(script, TS.getModule(script, "@rbxts", "services")).ContentProvider
+local ProgressBar = TS.import(script, script.Parent.Parent.Parent, "progressBar").ProgressBar
+local usePreloaderStyles = TS.import(script, script.Parent, "Preloader.styles").default
+local function Preloader(props)
+	local _binding = props
+	local assetMap = _binding.assetMap
+	local showPercentage = _binding.showPercentage
+	if showPercentage == nil then
+		showPercentage = false
+	end
+	local loaderPrecision = _binding.loaderPrecision
+	if loaderPrecision == nil then
+		loaderPrecision = 0
+	end
+	local showAssetName = _binding.showAssetName
+	if showAssetName == nil then
+		showAssetName = false
+	end
+	local children = _binding.children
+	local percentage, setPercentage = useState(0)
+	local loaded, setLoaded = useState(false)
+	local _binding_1 = usePreloaderStyles(props)
+	local container = _binding_1.container
+	local logo = _binding_1.logo
+	local label = _binding_1.label
+	local progressBar = _binding_1.progressBar
+	local _binding_2 = useMemo(function()
+		local contentIds = {}
+		local contentNamesById = {}
+		local scan
+		scan = function(assets, prefix)
+			if prefix == nil then
+				prefix = ""
+			end
+			for name, asset in pairs(assets) do
+				if type(asset) == "string" then
+					table.insert(contentIds, asset)
+					local _arg1 = `{prefix}{if showAssetName then `/{name}` else ""}`
+					contentNamesById[asset] = _arg1
+				else
+					scan(asset, `{prefix}{if showAssetName then `/{name}` else ""}`)
+				end
+			end
+		end
+		-- ▼ ReadonlyMap.forEach ▼
+		local _callback = function(assets, category)
+			scan(assets, `{category}`)
+		end
+		for _k, _v in assetMap do
+			_callback(_v, _k, assetMap)
+		end
+		-- ▲ ReadonlyMap.forEach ▲
+		return { contentIds, contentNamesById }
+	end, {})
+	local contentIds = _binding_2[1]
+	local contentNamesById = _binding_2[2]
+	local currentAsset, setCurrentAsset = useDeferState()
+	useAsyncEffect(TS.async(function()
+		local unit = (1 / #contentIds) * 100
+		ContentProvider:PreloadAsync(contentIds, function(assetId)
+			local _assetId = assetId
+			setCurrentAsset(contentNamesById[_assetId])
+			setPercentage(function(prev)
+				local newPercentage = math.round(math.clamp(prev + unit, 0, 100))
+				if newPercentage == 100 then
+					setLoaded(true)
+				end
+				return newPercentage
+			end)
+		end)
+		setCurrentAsset(nil)
+	end), {})
+	local _result
+	if loaded then
+		_result = ({
+			children = children,
+		})
+	else
+		local _attributes = {
+			key = "Preloader",
+		}
+		for _k, _v in container do
+			_attributes[_k] = _v
+		end
+		local _attributes_1 = table.clone(logo)
+		setmetatable(_attributes_1, nil)
+		local _exp = React.createElement("imagelabel", _attributes_1)
+		local _attributes_2 = table.clone(label)
+		setmetatable(_attributes_2, nil)
+		_attributes_2.Text = `Loading {if currentAsset ~= nil then currentAsset else "resources"}... {if showPercentage then string.format(`%.{loaderPrecision}f\%`, percentage) else ""}`
+		_result = (React.createElement("frame", _attributes, _exp, React.createElement("textlabel", _attributes_2), React.createElement(ProgressBar, {
+			className = progressBar,
+			progress = percentage,
+		})))
+	end
+	return React.createElement(React.Fragment, nil, _result)
+end
+local default = Preloader
+return {
+	default = default,
+}

package/out/ui/packages/preloader/components/Preloader.styles.d.ts

@@ -0,0 +1,3 @@
+import { PreloaderProps } from "./Preloader";
+declare const usePreloaderStyles: (props: PreloaderProps) => import("../../../../theme/index").ClassNameMap<string>;
+export default usePreloaderStyles;

package/out/ui/packages/preloader/components/Preloader.styles.luau

@@ -0,0 +1,52 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local createStyles = _theme.createStyles
+local makeStyles = _theme.makeStyles
+local usePreloaderStyles = makeStyles(function(theme, props)
+	local getLogo = function(props)
+		local _binding = props
+		local logo = _binding.logo
+		return logo
+	end
+	return createStyles({
+		container = {
+			Size = UDim2.new(1, 0, 1, 0),
+			BackgroundColor3 = theme.palette.background.default,
+			BorderSizePixel = 0,
+			ZIndex = 100000,
+		},
+		logo = {
+			Size = UDim2.new(0.33, 0, 0.33, 0),
+			Position = UDim2.new(0.5, 0, 0.4, 0),
+			AnchorPoint = Vector2.new(0.5, 0.5),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			Image = getLogo(props),
+			ScaleType = Enum.ScaleType.Fit,
+			ZIndex = 110000,
+		},
+		label = {
+			Size = UDim2.new(0.33, 0, 0, theme.spacing.calc(2)),
+			Position = UDim2.new(0.5, 0, 0.73, theme.spacing.calc(2) + theme.padding.calc(4)),
+			AnchorPoint = Vector2.new(0.5, 0.5),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			TextSize = theme.typography.fontSizes.h3,
+			TextColor3 = theme.palette.text.primary,
+			Font = theme.typography.fontFamilies.bold,
+			TextScaled = false,
+			ZIndex = 110000,
+		},
+		progressBar = {
+			Size = UDim2.new(0.33, 0, 0, theme.spacing.calc(2)),
+			Position = UDim2.new(0.5, 0, 0.74, theme.padding.calc(2)),
+			AnchorPoint = Vector2.new(0.5, 0.5),
+			ZIndex = 110000,
+		},
+	})
+end)
+local default = usePreloaderStyles
+return {
+	default = default,
+}

package/out/ui/packages/preloader/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Preloader } from "./components/Preloader";
+export { PreloaderProps } from "./components/Preloader";
+export * from "./components/Preloader";

package/out/ui/packages/preloader/init.luau

@@ -0,0 +1,8 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+exports.Preloader = TS.import(script, script, "components", "Preloader").default
+for _k, _v in TS.import(script, script, "components", "Preloader") or {} do
+	exports[_k] = _v
+end
+return exports

package/package.json

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