@rbxts/app-forge 0.7.1 → 0.7.2

package/out/react/hooks/usePx.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Scaled pixel unit helper.
+ */
+export declare const px: ((value: number) => number) & {
+    scale: (value: number) => number;
+    even: (value: number) => number;
+    floor: (value: number) => number;
+    ceil: (value: number) => number;
+};
+/**
+ * Initializes global px scaling.
+ *
+ * Should be called exactly once at app mount.
+ */
+export declare function usePx(target?: GuiObject | Camera, baseResolution?: Vector2, minScale?: number): void;

package/out/react/hooks/usePx.luau

@@ -0,0 +1,117 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+-- Services
+local Workspace = TS.import(script, TS.getModule(script, "@rbxts", "services")).Workspace
+-- React
+local useEffect = TS.import(script, TS.getModule(script, "@rbxts", "react")).useEffect
+--* Default reference resolution for px calculations 
+local BASE_RESOLUTION = Vector2.new(1920, 1080)
+--* Minimum allowed scale to prevent unreadable UI 
+local MIN_SCALE = 0.5
+--[[
+	*
+	 * Interpolates between width- and height-based scaling.
+	 * 0 = width-driven, 1 = height-driven
+	 
+]]
+local DOMINANT_AXIS = 0.5
+local TARGET = Workspace.CurrentCamera
+local SCALE = 1
+local GLOBAL_INITIALIZED = false
+--[[
+	*
+	 * Assigns a call signature to an object.
+	 
+]]
+local function callable(callback, object)
+	return setmetatable(object, {
+		__call = function(_, ...)
+			local args = { ... }
+			return callback(unpack(args))
+		end,
+	})
+end
+--[[
+	*
+	 * Scaled pixel unit helper.
+	 
+]]
+local px = callable(function(value)
+	return math.round(value * SCALE)
+end, {
+	scale = function(value)
+		return value * SCALE
+	end,
+	even = function(value)
+		return math.round(value * SCALE * 0.5) * 2
+	end,
+	floor = function(value)
+		return math.floor(value * SCALE)
+	end,
+	ceil = function(value)
+		return math.ceil(value * SCALE)
+	end,
+})
+--[[
+	*
+	 * Recalculates the current scale factor.
+	 
+]]
+local function calculateScale()
+	local target = TARGET
+	if not target then
+		return nil
+	end
+	local size = if target:IsA("Camera") then target.ViewportSize elseif target:IsA("GuiObject") then target.AbsoluteSize else nil
+	if not size then
+		return nil
+	end
+	if BASE_RESOLUTION.X <= 0 or BASE_RESOLUTION.Y <= 0 then
+		return nil
+	end
+	local width = math.log(size.X / BASE_RESOLUTION.X, 2)
+	local height = math.log(size.Y / BASE_RESOLUTION.Y, 2)
+	local centered = width + (height - width) * DOMINANT_AXIS
+	local scale = 2 ^ centered
+	SCALE = math.max(scale, MIN_SCALE)
+end
+--[[
+	*
+	 * Initializes global px scaling.
+	 *
+	 * Should be called exactly once at app mount.
+	 
+]]
+local function usePx(target, baseResolution, minScale)
+	useEffect(function()
+		if GLOBAL_INITIALIZED then
+			warn("usePx() may only be called once globally")
+			return nil
+		end
+		GLOBAL_INITIALIZED = true
+		if baseResolution then
+			BASE_RESOLUTION = baseResolution
+		end
+		if minScale ~= nil then
+			MIN_SCALE = minScale
+		end
+		if target then
+			TARGET = target
+		end
+		local resolvedTarget = TARGET
+		if not resolvedTarget then
+			warn("usePx(): no valid target to observe")
+			return nil
+		end
+		local signal = if resolvedTarget:IsA("Camera") then resolvedTarget:GetPropertyChangedSignal("ViewportSize") else resolvedTarget:GetPropertyChangedSignal("AbsoluteSize")
+		local connection = signal:Connect(calculateScale)
+		calculateScale()
+		return function()
+			connection:Disconnect()
+		end
+	end, {})
+end
+return {
+	usePx = usePx,
+	px = px,
+}

package/out/vide/classes/renders.luau

@@ -1,14 +1,14 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
--- Services
 -- Packages
-local usePx = TS.import(script, TS.getModule(script, "@rbxts", "loners-pretty-vide-utils").out).usePx
 local _vide = TS.import(script, TS.getModule(script, "@rbxts", "vide").src)
 local apply = _vide.apply
 local create = _vide.create
 -- Types
 -- Components
 local AppRegistry = TS.import(script, script.Parent.Parent, "decorator").AppRegistry
+-- Hooks
+local usePx = TS.import(script, script.Parent.Parent, "hooks", "usePx").usePx
 -- Classes
 local Rules = TS.import(script, script.Parent, "rules").default
 local Renders

package/out/vide/context.d.ts

@@ -1,7 +1,7 @@
 declare const Contexts: {
     readonly App: import("@rbxts/vide").Context<{
         forge: import(".").default;
-        px: typeof import("@rbxts/loners-pretty-vide-utils").px;
+        px: typeof import("./hooks/usePx").px;
     } | undefined>;
 };
 export default Contexts;

package/out/vide/decorator.luau

@@ -1,8 +1,9 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 -- Packages
-local px = TS.import(script, TS.getModule(script, "@rbxts", "loners-pretty-vide-utils").out).px
 -- Types
+-- Hooks
+local px = TS.import(script, script.Parent, "hooks", "usePx").px
 local AppRegistry = {}
 local function App(props)
 	return function(constructor)

package/out/vide/hooks/useAppContext.d.ts

@@ -1,5 +1,5 @@
 declare const _default: () => {
     forge: import("..").default;
-    px: typeof import("@rbxts/loners-pretty-vide-utils").px;
+    px: typeof import("./usePx").px;
 };
 export default _default;

package/out/vide/hooks/useEventListener.d.ts

@@ -0,0 +1,22 @@
+type EventLike<T extends Callback = Callback> = {
+    Connect(callback: T): ConnectionLike;
+} | {
+    connect(callback: T): ConnectionLike;
+} | {
+    subscribe(callback: T): ConnectionLike;
+};
+type ConnectionLike = {
+    Disconnect(): void;
+} | {
+    disconnect(): void;
+} | (() => void);
+/**
+ * Subscribes to an event-like object. The subscription is automatically
+ * disconnected when the scope cleans up.
+ *
+ * @param event The event-like object to subscribe to.
+ * @param listener The listener to subscribe with.
+ * @returns The connection object.
+ */
+export declare function useEventListener<T extends EventLike>(event: T, listener: T extends EventLike<infer U> ? U : never): ReturnType<T>;
+export {};

package/out/vide/hooks/useEventListener.luau

@@ -0,0 +1,67 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local cleanup = TS.import(script, TS.getModule(script, "@rbxts", "vide").src).cleanup
+local connect = function(event, callback)
+	local _event = event
+	if typeof(_event) == "RBXScriptSignal" then
+		-- With deferred events, a "hard disconnect" is necessary to avoid causing
+		-- state updates after a component unmounts. Use 'Connected' to check if
+		-- the connection is still valid before invoking the callback.
+		-- https://devforum.roblox.com/t/deferred-engine-events/2276564/99
+		local connection
+		connection = event:Connect(function(...)
+			local args = { ... }
+			if connection.Connected then
+				return callback(unpack(args))
+			end
+		end)
+		return connection
+	elseif event.Connect ~= nil then
+		return event:Connect(callback)
+	elseif event.connect ~= nil then
+		return event:connect(callback)
+	elseif event.subscribe ~= nil then
+		return event:subscribe(callback)
+	else
+		error("Event-like object does not have a supported connect method.")
+	end
+end
+local disconnect = function(connection)
+	local _connection = connection
+	if type(_connection) == "function" then
+		connection()
+	else
+		local _connection_1 = connection
+		local _condition = typeof(_connection_1) == "RBXScriptConnection"
+		if not _condition then
+			_condition = connection.Disconnect ~= nil
+		end
+		if _condition then
+			connection:Disconnect()
+		elseif connection.disconnect ~= nil then
+			connection:disconnect()
+		else
+			error("Connection-like object does not have a supported disconnect method.")
+		end
+	end
+end
+--[[
+	*
+	 * Subscribes to an event-like object. The subscription is automatically
+	 * disconnected when the scope cleans up.
+	 *
+	 * @param event The event-like object to subscribe to.
+	 * @param listener The listener to subscribe with.
+	 * @returns The connection object.
+	 
+]]
+local function useEventListener(event, listener)
+	local connection = connect(event, listener)
+	cleanup(function()
+		return disconnect(connection)
+	end)
+	return connection
+end
+return {
+	useEventListener = useEventListener,
+}

package/out/vide/hooks/usePx.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Scaled pixel unit helper.
+ *
+ * - `px(12)`        → rounded scaled pixels
+ * - `px.scale(12)` → raw scaled value
+ * - `px.even(12)`  → even pixel values (useful for strokes/borders)
+ */
+export declare const px: ((value: number) => number) & {
+    scale: (value: number) => number;
+    even: (value: number) => number;
+    floor: (value: number) => number;
+    ceil: (value: number) => number;
+};
+/**
+ * Initializes global px scaling.
+ *
+ * Should be called exactly once at app mount.
+ */
+export declare function usePx(target?: GuiObject | Camera, baseResolution?: Vector2, minScale?: number): void;

package/out/vide/hooks/usePx.luau

@@ -0,0 +1,120 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+-- Services
+local Workspace = TS.import(script, TS.getModule(script, "@rbxts", "services")).Workspace
+-- Packages
+local source = TS.import(script, TS.getModule(script, "@rbxts", "vide").src).source
+-- Helpers
+local useEventListener = TS.import(script, script.Parent, "useEventListener").useEventListener
+--* Default reference resolution for px calculations 
+local BASE_RESOLUTION = source(Vector2.new(1920, 1080))
+--* Minimum allowed scale to prevent unreadable UI 
+local MIN_SCALE = source(0.5)
+--[[
+	*
+	 * Interpolates between width- and height-based scaling.
+	 * 0 = width-driven, 1 = height-driven
+	 
+]]
+local DOMINANT_AXIS = 0.5
+local TARGET = source(Workspace.CurrentCamera)
+local SCALE = source(1)
+local INITIALIZED = false
+--[[
+	*
+	 * Assigns a call signature to an object.
+	 
+]]
+local function callable(callback, object)
+	return setmetatable(object, {
+		__call = function(_, ...)
+			local args = { ... }
+			return callback(unpack(args))
+		end,
+	})
+end
+--[[
+	*
+	 * Scaled pixel unit helper.
+	 *
+	 * - `px(12)`        → rounded scaled pixels
+	 * - `px.scale(12)` → raw scaled value
+	 * - `px.even(12)`  → even pixel values (useful for strokes/borders)
+	 
+]]
+local px = callable(function(value)
+	return math.round(value * SCALE())
+end, {
+	scale = function(value)
+		return value * SCALE()
+	end,
+	even = function(value)
+		return math.round(value * SCALE() * 0.5) * 2
+	end,
+	floor = function(value)
+		return math.floor(value * SCALE())
+	end,
+	ceil = function(value)
+		return math.ceil(value * SCALE())
+	end,
+})
+--[[
+	*
+	 * Recalculates the current scale factor based on the target size.
+	 
+]]
+local function calculateScale()
+	local target = TARGET()
+	if not target then
+		return nil
+	end
+	local size = if target:IsA("Camera") then target.ViewportSize elseif target:IsA("GuiObject") then target.AbsoluteSize else nil
+	if not size then
+		return nil
+	end
+	local res = BASE_RESOLUTION()
+	if res.X <= 0 or res.Y <= 0 then
+		return nil
+	end
+	local min = MIN_SCALE()
+	local width = math.log(size.X / res.X, 2)
+	local height = math.log(size.Y / res.Y, 2)
+	local centered = width + (height - width) * DOMINANT_AXIS
+	local scale = 2 ^ centered
+	SCALE(math.max(scale, min))
+end
+--[[
+	*
+	 * Initializes global px scaling.
+	 *
+	 * Should be called exactly once at app mount.
+	 
+]]
+local function usePx(target, baseResolution, minScale)
+	if INITIALIZED then
+		warn("usePx() may only be called once")
+		return nil
+	end
+	INITIALIZED = true
+	if baseResolution then
+		BASE_RESOLUTION(baseResolution)
+	end
+	if minScale ~= nil then
+		MIN_SCALE(minScale)
+	end
+	if target then
+		TARGET(target)
+	end
+	local resolvedTarget = TARGET()
+	if not resolvedTarget then
+		warn("usePx(): no valid target to observe")
+		return nil
+	end
+	local signal = if resolvedTarget:IsA("Camera") then resolvedTarget:GetPropertyChangedSignal("ViewportSize") else resolvedTarget:GetPropertyChangedSignal("AbsoluteSize")
+	useEventListener(signal, calculateScale)
+	calculateScale()
+end
+return {
+	usePx = usePx,
+	px = px,
+}

package/out/vide/types.d.ts

@@ -26,7 +26,7 @@ declare namespace Types {
 
 		type Class = AppProps & {
 			forge: AppForge;
-			px: typeof import("@rbxts/loners-pretty-vide-utils").px;
+			px: typeof import("./hooks/usePx").px;
 		};
 	}
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@rbxts/app-forge",
-	"version": "0.7.1",
+	"version": "0.7.2",
 	"description": "An App Manager for Vide",
 	"main": "out/init.lua",
 	"types": "out/index.d.ts",
@@ -38,11 +38,17 @@
 		"@rbxts/set-timeout": "^1.1.2"
 	},
 	"peerDependencies": {
-		"@rbxts/loners-pretty-react-hooks": "^0.2.9",
-		"@rbxts/loners-pretty-vide-utils": "^0.1.7",
 		"@rbxts/react": "^17.3.7-ts.1",
 		"@rbxts/vide": "^0.5.7"
 	},
+	"peerDependenciesMeta": {
+		"@rbxts/react": {
+			"optional": true
+		},
+		"@rbxts/vide": {
+			"optional": true
+		}
+	},
 	"devDependencies": {
 		"@biomejs/biome": "^2.3.7",
 		"@rbxts/compiler-types": "3.0.0-types.0",