@rbxts/uiblox 0.1.2 → 0.1.4

package/README.md

@@ -129,7 +129,7 @@ instead of `makeStyles<MyComponentProps>((theme, props) => {})`).
 
 ```javascript
 import Roact from "@rbxts/roact";
-import { useState } from "@rbxts/roact-hooked";
+import { useState, markPureComponent } from "@rbxts/roact-hooked";
 import useMyComponentStyles from "./MyComponent.styles";
 import { Button } from "@rbxts/uiblox";
 
@@ -140,28 +140,25 @@ export interface MyComponentProps {
 }
 
 // Hooked components are very handy
-const MyComponent =
-  hooked <
-  MyComponentProps >
-  ((props) => {
-    const { title, bolded = false } = props;
-    const { root, button } = useMyComponentStyles(props);
-
-    return (
-      <frame Key="MyComponent" {...root}>
-        <Button
-          variant="outlined"
-          text={title}
-          size="small"
-          color="secondary"
-          family={bolded ? "bold" : "default"}
-          className={button}
-        ></Button>
-      </frame>
-    );
-  });
-
-export default MyComponent;
+function MyComponent(props: MyComponentProps) {
+  const { title, bolded = false } = props;
+  const { root, button } = useMyComponentStyles(props);
+
+  return (
+    <frame Key="MyComponent" {...root}>
+      <Button
+        variant="outlined"
+        text={title}
+        size="small"
+        color="secondary"
+        family={bolded ? "bold" : "default"}
+        className={button}
+      ></Button>
+    </frame>
+  );
+};
+
+export default markPureComponent(MyComponent);
 ```
 
 #### src/shared/ui/myComponent/MyComponent.styles.ts

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

@@ -1,7 +1,9 @@
+/// <reference types="roact" />
 import Roact from "@rbxts/roact";
 import { Theme } from "../interfaces/theme";
 export interface ThemeProviderProps {
     theme?: Theme;
 }
-declare const ThemeProvider: (props: ThemeProviderProps) => Roact.Element;
-export default ThemeProvider;
+declare function ThemeProvider(props: Roact.PropsWithChildren<ThemeProviderProps>): Roact.Element;
+declare const _default: typeof ThemeProvider;
+export default _default;

package/out/theme/components/ThemeProvider.lua

@@ -1,11 +1,11 @@
 -- Compiled with roblox-ts v2.2.0
 local TS = _G[script]
-local withHooks = TS.import(script, TS.getModule(script, "@rbxts", "roact-hooked").src).withHooks
+local markPureComponent = TS.import(script, TS.getModule(script, "@rbxts", "roact-hooked").src).markPureComponent
 local StoreProvider = TS.import(script, TS.getModule(script, "@rbxts", "roact-rodux-hooked").src).StoreProvider
 local Roact = TS.import(script, TS.getModule(script, "@rbxts", "roact").src)
 local themeStore = TS.import(script, script.Parent, "ThemeStore").themeStore
 local ThemeWrapper = TS.import(script, script.Parent, "ThemeWrapper").default
-local ThemeProvider = withHooks(function(props)
+local function ThemeProvider(props)
 	local _binding = props
 	local theme = _binding.theme
 	local children = _binding[Roact.Children]
@@ -30,8 +30,8 @@ local ThemeProvider = withHooks(function(props)
 	end
 	_children[_length + 1] = Roact.createElement(ThemeWrapper, _attributes_1, _children_1)
 	return Roact.createElement(StoreProvider, _attributes, _children)
-end)
-local default = ThemeProvider
+end
+local default = markPureComponent(ThemeProvider)
 return {
 	default = default,
 }

package/out/theme/components/ThemeWrapper.d.ts

@@ -1,7 +1,9 @@
+/// <reference types="roact" />
 import Roact from "@rbxts/roact";
 import { Theme } from "../interfaces/theme";
 export interface ThemeWrapperProps {
     theme?: Theme;
 }
-declare const ThemeWrapper: (props: ThemeWrapperProps) => Roact.Element;
-export default ThemeWrapper;
+declare function ThemeWrapper(props: Roact.PropsWithChildren<ThemeWrapperProps>): Roact.Element;
+declare const _default: typeof ThemeWrapper;
+export default _default;

package/out/theme/components/ThemeWrapper.lua

@@ -1,7 +1,7 @@
 -- Compiled with roblox-ts v2.2.0
 local TS = _G[script]
 local _roact_hooked = TS.import(script, TS.getModule(script, "@rbxts", "roact-hooked").src)
-local withHooks = _roact_hooked.withHooks
+local markPureComponent = _roact_hooked.markPureComponent
 local useEffect = _roact_hooked.useEffect
 local useRef = _roact_hooked.useRef
 local _roact_rodux_hooked = TS.import(script, TS.getModule(script, "@rbxts", "roact-rodux-hooked").src)
@@ -10,7 +10,7 @@ local useSelector = _roact_rodux_hooked.useSelector
 local Roact = TS.import(script, TS.getModule(script, "@rbxts", "roact").src)
 local selectTheme = TS.import(script, script.Parent, "ThemeStore").selectTheme
 local DefaultTheme = TS.import(script, script.Parent.Parent, "themes").default
-local ThemeWrapper = withHooks(function(props)
+local function ThemeWrapper(props)
 	local _binding = props
 	local theme = _binding.theme
 	local children = _binding[Roact.Children]
@@ -45,8 +45,8 @@ local ThemeWrapper = withHooks(function(props)
 	return Roact.createFragment({
 		["ThemeWrapper-" .. currentTheme.type] = Roact.createElement("Frame", _attributes, _children),
 	})
-end)
-local default = ThemeWrapper
+end
+local default = markPureComponent(ThemeWrapper)
 return {
 	default = default,
 }

package/out/ui/packages/button/components/Button.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="@rbxts/types" />
+/// <reference types="roact" />
 import Roact from "@rbxts/roact";
 import { CustomizedProps } from "../../../../theme";
 import { ButtonSize, ButtonColor, ButtonVariant } from "../types";
@@ -22,5 +23,6 @@ export interface ButtonProps {
     mouseEnter?: () => void;
     mouseLeave?: () => void;
 }
-declare const Button: (props: CustomizedProps<TextButton, ButtonProps>) => Roact.Element;
-export default Button;
+declare function Button(props: Roact.PropsWithChildren<CustomizedProps<DefaultButtonComponent, ButtonProps>>): Roact.Element;
+declare const _default: typeof Button;
+export default _default;

package/out/ui/packages/button/components/Button.lua

@@ -2,10 +2,10 @@
 local TS = _G[script]
 local Roact = TS.import(script, TS.getModule(script, "@rbxts", "roact").src)
 local _roact_hooked = TS.import(script, TS.getModule(script, "@rbxts", "roact-hooked").src)
-local withHooks = _roact_hooked.withHooks
+local markPureComponent = _roact_hooked.markPureComponent
 local useState = _roact_hooked.useState
 local useButtonStyles = TS.import(script, script.Parent, "Button.styles").default
-local Button = withHooks(function(props)
+local function Button(props)
 	local _binding = props
 	local text = _binding.text
 	if text == nil then
@@ -168,8 +168,8 @@ local Button = withHooks(function(props)
 	return Roact.createFragment({
 		Button = Roact.createElement("TextButton", _attributes, _children),
 	})
-end)
-local default = Button
+end
+local default = markPureComponent(Button)
 return {
 	default = default,
 }

package/out/ui/packages/icon/components/Icon.d.ts

@@ -1,4 +1,6 @@
 /// <reference types="@rbxts/types" />
+/// <reference types="@rbxts/types" />
+/// <reference types="roact" />
 import Roact from "@rbxts/roact";
 import { Icons } from "../../../enums";
 import { CustomizedProps } from "../../../../theme";
@@ -7,5 +9,7 @@ export interface IconProps {
     size?: "xxs" | "xs" | "sm" | "md" | "lg" | "xl";
     tint?: Color3;
 }
-declare const Icon: (props: CustomizedProps<ImageLabel, IconProps>) => Roact.Element;
-export default Icon;
+type DefaultIconComponent = ImageLabel;
+declare function Icon(props: CustomizedProps<DefaultIconComponent, IconProps>): Roact.Element;
+declare const _default: typeof Icon;
+export default _default;

package/out/ui/packages/icon/components/Icon.lua

@@ -1,9 +1,9 @@
 -- Compiled with roblox-ts v2.2.0
 local TS = _G[script]
 local Roact = TS.import(script, TS.getModule(script, "@rbxts", "roact").src)
-local withHooks = TS.import(script, TS.getModule(script, "@rbxts", "roact-hooked").src).withHooks
+local markPureComponent = TS.import(script, TS.getModule(script, "@rbxts", "roact-hooked").src).markPureComponent
 local useIconStyles = TS.import(script, script.Parent, "Icon.styles").default
-local Icon = withHooks(function(props)
+local function Icon(props)
 	local _binding = props
 	local icon = _binding.icon
 	local tint = _binding.tint
@@ -24,8 +24,8 @@ local Icon = withHooks(function(props)
 	return Roact.createFragment({
 		Icon = Roact.createElement("ImageLabel", _attributes),
 	})
-end)
-local default = Icon
+end
+local default = markPureComponent(Icon)
 return {
 	default = default,
 }

package/out/ui/packages/iconButton/components/IconButton.d.ts

@@ -1,4 +1,6 @@
 /// <reference types="@rbxts/types" />
+/// <reference types="@rbxts/types" />
+/// <reference types="roact" />
 import Roact from "@rbxts/roact";
 import { Icons } from "../../../enums";
 import { CustomizedProps } from "../../../../theme";
@@ -9,5 +11,7 @@ export interface IconButtonProps {
     selected?: boolean;
     onClick?: () => void;
 }
-declare const IconButton: (props: CustomizedProps<ImageButton, IconButtonProps>) => Roact.Element;
-export default IconButton;
+type DefaultIconButtonComponent = ImageButton;
+declare function IconButton(props: CustomizedProps<DefaultIconButtonComponent, IconButtonProps>): Roact.Element;
+declare const _default: typeof IconButton;
+export default _default;

package/out/ui/packages/iconButton/components/IconButton.lua

@@ -2,10 +2,10 @@
 local TS = _G[script]
 local Roact = TS.import(script, TS.getModule(script, "@rbxts", "roact").src)
 local _roact_hooked = TS.import(script, TS.getModule(script, "@rbxts", "roact-hooked").src)
-local withHooks = _roact_hooked.withHooks
+local markPureComponent = _roact_hooked.markPureComponent
 local useState = _roact_hooked.useState
 local useIconButtonStyles = TS.import(script, script.Parent, "IconButton.styles").default
-local IconButton = withHooks(function(props)
+local function IconButton(props)
 	local _binding = props
 	local icon = _binding.icon
 	local selected = _binding.selected
@@ -41,8 +41,8 @@ local IconButton = withHooks(function(props)
 	return Roact.createFragment({
 		IconButton = Roact.createElement("ImageButton", _attributes),
 	})
-end)
-local default = IconButton
+end
+local default = markPureComponent(IconButton)
 return {
 	default = default,
 }

package/out/ui/packages/input/components/Input.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="@rbxts/types" />
 /// <reference types="@rbxts/types" />
 /// <reference types="@rbxts/types" />
+/// <reference types="roact" />
 import Roact from "@rbxts/roact";
 import { CustomizedProps } from "../../../../theme";
 import { InputColor, InputMargin, InputVariant } from "../types";
@@ -22,5 +23,6 @@ export interface InputProps {
     onBlur?: () => void;
     onEnterPressed?: (text: string) => void;
 }
-declare const Input: (props: CustomizedProps<Frame, InputProps>) => Roact.Element;
-export default Input;
+declare function Input(props: CustomizedProps<DefaultInputComponent, InputProps>): Roact.Element;
+declare const _default: typeof Input;
+export default _default;

package/out/ui/packages/input/components/Input.lua

@@ -3,12 +3,12 @@ local TS = _G[script]
 local Roact = TS.import(script, TS.getModule(script, "@rbxts", "roact").src)
 local _roact_hooked = TS.import(script, TS.getModule(script, "@rbxts", "roact-hooked").src)
 local useState = _roact_hooked.useState
-local withHooks = _roact_hooked.withHooks
+local markPureComponent = _roact_hooked.markPureComponent
 local classNames = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").classNames
 local Divider = TS.import(script, script.Parent.Parent.Parent, "divider").Divider
 local Orientations = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Orientations
 local useInputStyles = TS.import(script, script.Parent, "Input.styles").default
-local Input = withHooks(function(props)
+local function Input(props)
 	local _binding = props
 	local text = _binding.text
 	local placeholder = _binding.placeholder
@@ -158,8 +158,8 @@ local Input = withHooks(function(props)
 	return Roact.createFragment({
 		Input = Roact.createElement("Frame", _attributes, _children),
 	})
-end)
-local default = Input
+end
+local default = markPureComponent(Input)
 return {
 	default = default,
 }

package/out/ui/packages/progressBar/components/ProgressBar.d.ts

@@ -1,9 +1,11 @@
 /// <reference types="@rbxts/types" />
+/// <reference types="roact" />
 import Roact from "@rbxts/roact";
 import { WriteableStyle } from "../../../../theme";
 export interface ProgressBarProps {
     progress: number;
     className?: WriteableStyle<Frame>;
 }
-declare const ProgressBar: (props: ProgressBarProps) => Roact.Element;
-export default ProgressBar;
+declare function ProgressBar({ progress, className }: ProgressBarProps): Roact.Element;
+declare const _default: typeof ProgressBar;
+export default _default;

package/out/ui/packages/progressBar/components/ProgressBar.lua

@@ -1,9 +1,9 @@
 -- Compiled with roblox-ts v2.2.0
 local TS = _G[script]
 local Roact = TS.import(script, TS.getModule(script, "@rbxts", "roact").src)
-local withHooks = TS.import(script, TS.getModule(script, "@rbxts", "roact-hooked").src).withHooks
+local markPureComponent = TS.import(script, TS.getModule(script, "@rbxts", "roact-hooked").src).markPureComponent
 local useProgressBarStyles = TS.import(script, script.Parent, "ProgressBar.styles").default
-local ProgressBar = withHooks(function(_param)
+local function ProgressBar(_param)
 	local progress = _param.progress
 	local className = _param.className
 	local _binding = useProgressBarStyles()
@@ -69,8 +69,8 @@ local ProgressBar = withHooks(function(_param)
 	return Roact.createFragment({
 		ProgressBar = Roact.createElement("Frame", _attributes, _children),
 	})
-end)
-local default = ProgressBar
+end
+local default = markPureComponent(ProgressBar)
 return {
 	default = default,
 }

package/out/ui/packages/shadow/components/Shadow.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="roact" />
 import Roact from "@rbxts/roact";
-declare const Shadow: (props: {}) => Roact.Element;
-export default Shadow;
+declare function Shadow(): Roact.Element;
+declare const _default: typeof Shadow;
+export default _default;

package/out/ui/packages/shadow/components/Shadow.lua

@@ -2,11 +2,11 @@
 local TS = _G[script]
 local Roact = TS.import(script, TS.getModule(script, "@rbxts", "roact").src)
 local _roact_hooked = TS.import(script, TS.getModule(script, "@rbxts", "roact-hooked").src)
-local withHooks = _roact_hooked.withHooks
+local markPureComponent = _roact_hooked.markPureComponent
 local useEffect = _roact_hooked.useEffect
 local useState = _roact_hooked.useState
 local useShadowStyles = TS.import(script, script.Parent, "Shadow.styles").default
-local Shadow = withHooks(function()
+local function Shadow()
 	local _binding = useShadowStyles()
 	local container = _binding.container
 	local parent, setParent = useState(nil)
@@ -65,8 +65,8 @@ local Shadow = withHooks(function()
 	return Roact.createFragment({
 		Shadow = Roact.createElement("Frame", _attributes, _children),
 	})
-end)
-local default = Shadow
+end
+local default = markPureComponent(Shadow)
 return {
 	default = default,
 }

package/out/ui/packages/toast/components/Toast.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="roact" />
 import Roact from "@rbxts/roact";
 import ToastVariants from "../enums/ToastVariants";
 export interface ToastProps {
@@ -7,5 +8,6 @@ export interface ToastProps {
     variant?: ToastVariants;
     toggledAt?: number;
 }
-declare const Toast: (props: ToastProps) => Roact.Element;
-export default Toast;
+declare function Toast(props: ToastProps): Roact.Element;
+declare const _default: typeof Toast;
+export default _default;

package/out/ui/packages/toast/components/Toast.lua

@@ -3,7 +3,7 @@ local TS = _G[script]
 local BoatTween = TS.import(script, TS.getModule(script, "@rbxts", "boat-tween").src).BoatTween
 local Roact = TS.import(script, TS.getModule(script, "@rbxts", "roact").src)
 local _roact_hooked = TS.import(script, TS.getModule(script, "@rbxts", "roact-hooked").src)
-local withHooks = _roact_hooked.withHooks
+local markPureComponent = _roact_hooked.markPureComponent
 local useEffect = _roact_hooked.useEffect
 local useRef = _roact_hooked.useRef
 local DefaultTheme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").DefaultTheme
@@ -11,7 +11,7 @@ local Directions = TS.import(script, script.Parent.Parent.Parent.Parent, "enums"
 local Shadow = TS.import(script, script.Parent.Parent.Parent, "shadow").Shadow
 local useToastStyles = TS.import(script, script.Parent, "Toast.styles").default
 local TWEEN_DURATION = 0.5
-local Toast = withHooks(function(props)
+local function Toast(props)
 	local _binding = props
 	local text = _binding.text
 	local onDismiss = _binding.onDismiss
@@ -87,8 +87,8 @@ local Toast = withHooks(function(props)
 	return Roact.createFragment({
 		Toast = Roact.createElement("Frame", _attributes, _children),
 	})
-end)
-local default = Toast
+end
+local default = markPureComponent(Toast)
 return {
 	default = default,
 }

package/out/ui/packages/treeView/components/TreeView.d.ts

@@ -1,11 +1,15 @@
+/// <reference types="@rbxts/types" />
+/// <reference types="roact" />
 import Roact from "@rbxts/roact";
 import { CustomizedProps } from "../../../../theme";
 import { Icons } from "../../../enums";
 import Tree from "../interfaces/Tree";
+type DefaultTreeViewComponent = Frame;
 export interface TreeViewProps {
     tree: Tree;
     icon?: Icons;
     filter?: string;
 }
-declare const TreeView: (props: CustomizedProps<Frame, TreeViewProps>) => Roact.Element;
-export default TreeView;
+declare function TreeView(props: CustomizedProps<DefaultTreeViewComponent, TreeViewProps>): Roact.Element;
+declare const _default: typeof TreeView;
+export default _default;

package/out/ui/packages/treeView/components/TreeView.lua

@@ -2,7 +2,7 @@
 local TS = _G[script]
 local Roact = TS.import(script, TS.getModule(script, "@rbxts", "roact").src)
 local _roact_hooked = TS.import(script, TS.getModule(script, "@rbxts", "roact-hooked").src)
-local withHooks = _roact_hooked.withHooks
+local markPureComponent = _roact_hooked.markPureComponent
 local useCallback = _roact_hooked.useCallback
 local useEffect = _roact_hooked.useEffect
 local useState = _roact_hooked.useState
@@ -11,7 +11,7 @@ local Icon = TS.import(script, script.Parent.Parent.Parent, "icon").Icon
 local Typography = TS.import(script, script.Parent.Parent.Parent, "typography").Typography
 local Icons = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Icons
 local useTreeViewStyles = TS.import(script, script.Parent, "TreeView.styles").default
-local TreeView = withHooks(function(props)
+local function TreeView(props)
 	local _binding = props
 	local tree = _binding.tree
 	local icon = _binding.icon
@@ -332,8 +332,8 @@ local TreeView = withHooks(function(props)
 	return Roact.createFragment({
 		TreeView = Roact.createElement("Frame", _attributes, _children),
 	})
-end)
-local default = TreeView
+end
+local default = markPureComponent(TreeView)
 return {
 	default = default,
 }

package/package.json

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