@rbxts/uiblox 0.1.47 → 0.1.48

package/out/theme/context/ThemeProducer.d.ts

@@ -0,0 +1,5 @@
+import { Theme } from "../interfaces/theme/index";
+export declare const themeProducer: import("@rbxts/reflex").Producer<Theme, {
+    setTheme: (_state: Theme, theme: Theme) => Theme;
+}>;
+export type ThemeProducer = typeof themeProducer;

package/out/theme/context/ThemeProducer.luau

@@ -0,0 +1,12 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local createProducer = TS.import(script, TS.getModule(script, "@rbxts", "reflex").src).createProducer
+local DEFAULT_THEME = TS.import(script, script.Parent.Parent, "constants").DEFAULT_THEME
+local themeProducer = createProducer(DEFAULT_THEME, {
+	setTheme = function(_state, theme)
+		return theme
+	end,
+})
+return {
+	themeProducer = themeProducer,
+}

package/out/theme/context/ThemeProvider.d.ts

@@ -1,11 +1,7 @@
-import React, { PropsWithChildren } from "@rbxts/react";
 import { Theme } from "../interfaces/index";
-export declare const ThemeContext: React.Context<{
-    theme: Theme;
-    setTheme?: React.Dispatch<React.SetStateAction<Theme>>;
-}>;
+import { CustomizedProps } from "../types/index";
 export interface ThemeProviderProps {
-    initialTheme?: Theme;
+    theme?: Theme;
 }
-export declare function ThemeProvider(props: PropsWithChildren<ThemeProviderProps>): JSX.Element;
+declare function ThemeProvider(props: CustomizedProps<Instance, ThemeProviderProps>): JSX.Element;
 export default ThemeProvider;

package/out/theme/context/ThemeProvider.luau

@@ -2,33 +2,27 @@
 local TS = _G[script]
 local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local React = _react
+local StrictMode = _react.StrictMode
 local useEffect = _react.useEffect
-local useMemo = _react.useMemo
-local useState = _react.useState
+local ReflexProvider = TS.import(script, TS.getModule(script, "@rbxts", "react-reflex")).ReflexProvider
 local DEFAULT_THEME = TS.import(script, script.Parent.Parent, "constants").DEFAULT_THEME
-local ThemeContext = React.createContext({
-	theme = DEFAULT_THEME,
-})
+local themeProducer = TS.import(script, script.Parent, "ThemeProducer").themeProducer
 local function ThemeProvider(props)
 	local _binding = props
-	local initialTheme = _binding.initialTheme
-	local theme, setTheme = useState(initialTheme or DEFAULT_THEME)
+	local theme = _binding.theme
+	if theme == nil then
+		theme = DEFAULT_THEME
+	end
+	local children = _binding.children
+	-- When theme prop changes
 	useEffect(function()
-		setTheme(initialTheme or DEFAULT_THEME)
-	end, { initialTheme })
-	local memoizedValue = useMemo(function()
-		return {
-			theme = theme,
-			setTheme = setTheme,
-		}
+		themeProducer.setTheme(theme)
 	end, { theme })
-	return React.createElement(ThemeContext.Provider, {
-		value = memoizedValue,
-	}, props.children)
+	return React.createElement(StrictMode, nil, React.createElement(ReflexProvider, {
+		producer = themeProducer,
+	}, children))
 end
 local default = ThemeProvider
 return {
-	ThemeProvider = ThemeProvider,
-	ThemeContext = ThemeContext,
 	default = default,
 }

package/out/theme/hooks/useTheme.d.ts

@@ -1,4 +1,6 @@
-export default function useTheme(): {
-    theme: import("../index").Theme;
-    setTheme?: import("@rbxts/react").Dispatch<import("@rbxts/react").SetStateAction<import("..").Theme>>;
+import { Theme } from "../interfaces/index";
+declare const useTheme: () => {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
 };
+export default useTheme;

package/out/theme/hooks/useTheme.luau

@@ -1,10 +1,26 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
-local useContext = TS.import(script, TS.getModule(script, "@rbxts", "react")).useContext
-local ThemeContext = TS.import(script, script.Parent.Parent, "context").ThemeContext
-local function useTheme()
-	return useContext(ThemeContext)
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local useCallback = _react.useCallback
+local useMemo = _react.useMemo
+local useState = _react.useState
+local themeProducer = TS.import(script, script.Parent.Parent, "context", "ThemeProducer").themeProducer
+local useTheme = function()
+	local theme, setTheme = useState(themeProducer:getState())
+	themeProducer:subscribe(function(state, _previousState)
+		setTheme(state)
+	end)
+	local setProducerTheme = useCallback(function(t)
+		themeProducer.setTheme(t)
+	end, { setTheme })
+	return useMemo(function()
+		return {
+			theme = theme,
+			setTheme = setProducerTheme,
+		}
+	end, { theme, setTheme })
 end
+local default = useTheme
 return {
-	default = useTheme,
+	default = default,
 }

package/out/theme/index.d.ts

@@ -3,7 +3,6 @@ export * from "./constants/index";
 export { DEFAULT_THEME } from "./constants/index";
 export * from "./context/index";
 export { ThemeProvider } from "./context/index";
-export { ThemeContext } from "./context/index";
 export { useTheme } from "./hooks/index";
 export * from "./interfaces/index";
 export * from "./styles/index";

package/out/theme/init.luau

@@ -9,7 +9,6 @@ for _k, _v in TS.import(script, script, "context") or {} do
 	exports[_k] = _v
 end
 exports.ThemeProvider = TS.import(script, script, "context").ThemeProvider
-exports.ThemeContext = TS.import(script, script, "context").ThemeContext
 exports.useTheme = TS.import(script, script, "hooks").useTheme
 for _k, _v in TS.import(script, script, "interfaces") or {} do
 	exports[_k] = _v

package/package.json

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