Switch to React (#14)

src/Components/App.lua

@@ -1,7 +1,6 @@
 local Plugin = script.Parent.Parent
 
-local Roact = require(Plugin.Packages.Roact)
-local Hooks = require(Plugin.Packages.RoactHooks)
+local React = require(Plugin.Packages.React)
 
 local Util = Plugin.Util
 local Localization = require(Util.Localization)
@@ -15,41 +14,41 @@ local Header = require(Components.Header)
 local useStore = require(Plugin.Hooks.useStore)
 local useTheme = require(Plugin.Hooks.useTheme)
 
-local function App(props, hooks)
-  local theme = useTheme(hooks)
-  local CurrentPanel = useStore(hooks, 'Panel')
+local function App(props)
+  local theme = useTheme()
+  local CurrentPanel = useStore('Panel')
 
-  local PanelElement = hooks.useMemo(function()
+  local PanelElement = React.useMemo(function()
     if CurrentPanel == 'Materials' then
-      return Roact.createElement(MaterialPanel, {
+      return React.createElement(MaterialPanel, {
         Size = props.IsOutdated and UDim2.new(1, 0, 1, -78) or UDim2.new(1, 0, 1, -60)
       })
     elseif CurrentPanel == 'Settings' then
-      return Roact.createElement(SettingsPanel, {
+      return React.createElement(SettingsPanel, {
         Size = props.IsOutdated and UDim2.new(1, 0, 1, -53) or UDim2.new(1, 0, 1, -28)
       })
     else
       error('Requested unknown panel.')
     end
   end, { CurrentPanel })
 
-  return Roact.createElement('Frame', {
+  return React.createElement('Frame', {
     BackgroundColor3 = theme:GetColor(Enum.StudioStyleGuideColor.MainBackground),
     BorderSizePixel = 0,
     Size = UDim2.fromScale(1, 1)
   }, {
-    Header = Roact.createElement(Header, {
+    Header = React.createElement(Header, {
       CurrentPanel = CurrentPanel,
       IsSearchEnabled = CurrentPanel == 'Materials'
     }),
 
-    UIListLayout = Roact.createElement('UIListLayout', {
+    UIListLayout = React.createElement('UIListLayout', {
       SortOrder = Enum.SortOrder.LayoutOrder
     }),
 
     Body = PanelElement,
 
-    update = props.IsOutdated and Roact.createElement(TextLabel, {
+    update = props.IsOutdated and React.createElement(TextLabel, {
       AutomaticSize = Enum.AutomaticSize.Y,
       BackgroundColor3 = theme:GetColor(Enum.StudioStyleGuideColor.Titlebar),
       LayoutOrder = -1,
@@ -59,14 +58,12 @@ local function App(props, hooks)
       TextWrapped = true,
       Size = UDim2.fromScale(1, 0)
     }, {
-      UIPadding = Roact.createElement('UIPadding', {
+      UIPadding = React.createElement('UIPadding', {
         PaddingBottom = UDim.new(0, 3),
         PaddingTop = UDim.new(0, 3)
       })
     })
   })
 end
 
-App = Hooks.new(Roact)(App)
-
 return App

src/Components/Header.lua

@@ -1,7 +1,6 @@
 local Plugin = script.Parent.Parent
 
-local Roact = require(Plugin.Packages.Roact)
-local Hooks = require(Plugin.Packages.RoactHooks)
+local React = require(Plugin.Packages.React)
 
 local Store = require(Plugin.Util.Store)
 local Localization = require(Plugin.Util.Localization)
@@ -12,16 +11,16 @@ local TabSet = require(Components.TabSet)
 
 local useTheme = require(Plugin.Hooks.useTheme)
 
-local function Header(props, hooks)
-  local theme = useTheme(hooks)
+local function Header(props)
+  local theme = useTheme()
   local Height = if props.IsSearchEnabled then 60 else 28
 
-  return Roact.createElement('Frame', {
+  return React.createElement('Frame', {
     BackgroundColor3 = theme:GetColor(Enum.StudioStyleGuideColor.Titlebar),
     BorderColor3 = theme:GetColor(Enum.StudioStyleGuideColor.Border),
     Size = UDim2.new(1, 0, 0, Height)
   }, {
-    Navbar = Roact.createElement(TabSet, {
+    Navbar = React.createElement(TabSet, {
       CurrentTab = props.CurrentPanel,
       Size = UDim2.new(1, 0, 0, 28),
       Tabs = {
@@ -33,7 +32,7 @@ local function Header(props, hooks)
       end
     }),
 
-    Search = props.IsSearchEnabled and Roact.createElement(Search, {
+    Search = props.IsSearchEnabled and React.createElement(Search, {
       Position = UDim2.fromOffset(3, 31),
       Text = Store:Get('SearchTerm'),
       onTextChange = function(rbx)
@@ -43,6 +42,4 @@ local function Header(props, hooks)
   })
 end
 
-Header = Hooks.new(Roact)(Header)
-
 return Header

src/Components/MaterialPanel/Item.lua

@@ -1,7 +1,6 @@
 local Plugin = script.Parent.Parent.Parent
 
-local Roact = require(Plugin.Packages.Roact)
-local Hooks = require(Plugin.Packages.RoactHooks)
+local React = require(Plugin.Packages.React)
 
 local Localization = require(Plugin.Util.Localization)
 local Store = require(Plugin.Util.Store)
@@ -10,25 +9,25 @@ local Tooltip = require(Plugin.Components.Tooltip)
 
 local useStore = require(Plugin.Hooks.useStore)
 
-local function MaterialButton(props, hooks)
-  local currentMaterial = useStore(hooks, 'Material')
+local function MaterialButton(props)
+  local currentMaterial = useStore('Material')
 
-  return Roact.createElement('ImageButton', {
+  return React.createElement('ImageButton', {
     BackgroundTransparency = 1,
     Image = props.Image,
-    [Roact.Event.MouseButton1Click] = function()
+    [React.Event.MouseButton1Click] = function()
       Store:Set('Material', props.Id)
     end
   }, {
-    UICorner = Roact.createElement('UICorner', {
+    UICorner = React.createElement('UICorner', {
       CornerRadius = UDim.new(0, 3)
     }),
 
-    Tooltip = Roact.createElement(Tooltip.Trigger, {
+    Tooltip = React.createElement(Tooltip.Trigger, {
       Text = Localization('Materials.'..props.Id.Name)
     }),
 
-    SelectedImage = currentMaterial == props.Id and Roact.createElement('ImageLabel', {
+    SelectedImage = currentMaterial == props.Id and React.createElement('ImageLabel', {
       AnchorPoint = Vector2.new(1, 0),
       BackgroundTransparency = 1,
       Image = 'rbxassetid://4507466924',
@@ -38,6 +37,4 @@ local function MaterialButton(props, hooks)
   })
 end
 
-MaterialButton = Hooks.new(Roact)(MaterialButton)
-
 return MaterialButton

src/Components/MaterialPanel/init.lua

@@ -2,8 +2,7 @@ local TERRAIN_TEXTURE_PATH = 'rbxasset://textures/TerrainTools/'
 
 local Plugin = script.Parent.Parent
 
-local Roact = require(Plugin.Packages.Roact)
-local Hooks = require(Plugin.Packages.RoactHooks)
+local React = require(Plugin.Packages.React)
 
 local Util = Plugin.Util
 local Constants = require(Util.Constants)
@@ -17,17 +16,17 @@ local TextLabel = require(Components.TextLabel)
 local useStore = require(Plugin.Hooks.useStore)
 local useTheme = require(Plugin.Hooks.useTheme)
 
-local function MaterialPanel(props, hooks)
-  local theme = useTheme(hooks)
-  local SearchTerm = useStore(hooks, 'SearchTerm')
+local function MaterialPanel(props)
+  local theme = useTheme()
+  local SearchTerm = useStore('SearchTerm')
 
-  local content, assetCount = hooks.useMemo(function()
+  local content, assetCount = React.useMemo(function()
     local numberAssets = 0
     local assetsToDisplay = {}
 
     for _, item in Constants.MATERIALS_TABLE do
       if string.find(string.lower(item.enum.Name), string.lower(SearchTerm), 1, true) then
-        assetsToDisplay[item.enum.Name] = Roact.createElement(MaterialItem, {
+        assetsToDisplay[item.enum.Name] = React.createElement(MaterialItem, {
           Id = item.enum,
           Image = TERRAIN_TEXTURE_PATH..item.img
         })
@@ -41,25 +40,25 @@ local function MaterialPanel(props, hooks)
 
   local hasAssets = assetCount ~= 0
 
-  return Roact.createElement('Frame', {
+  return React.createElement('Frame', {
     BackgroundTransparency = 1,
     LayoutOrder = 2,
     Size = props.Size
   }, {
-    MaterialGrid = hasAssets and Roact.createElement(ScrollingFrame, {
+    MaterialGrid = hasAssets and React.createElement(ScrollingFrame, {
       AutomaticCanvasSize = Enum.AutomaticSize.Y,
       ScrollingDirection = Enum.ScrollingDirection.Y,
       Size = UDim2.fromScale(1, 1)
     }, {
-      UIGridLayout = Roact.createElement('UIGridLayout', {
+      UIGridLayout = React.createElement('UIGridLayout', {
         CellPadding = Constants.MATERIAL_GRID_PADDING,
         CellSize = Constants.MATERIAL_GRID_SIZE,
         FillDirectionMaxCells = 6,
         HorizontalAlignment = Enum.HorizontalAlignment.Center
       }),
-      Items = Roact.createFragment(content)
+      Items = React.createElement(React.Fragment, nil, content)
     }),
-    NoResults = not hasAssets and Roact.createElement(TextLabel, {
+    NoResults = not hasAssets and React.createElement(TextLabel, {
       BackgroundTransparency = 1,
       Size = UDim2.new(1, 0, 0, 30),
       Text = Localization('Notice.NoResultsFound'),
@@ -68,6 +67,4 @@ local function MaterialPanel(props, hooks)
   })
 end
 
-MaterialPanel = Hooks.new(Roact)(MaterialPanel)
-
 return MaterialPanel

src/Components/Outline.lua

@@ -2,8 +2,8 @@ local CoreGui = game:GetService('CoreGui')
 
 local Plugin = script.Parent.Parent
 
-local Roact = require(Plugin.Packages.Roact)
-local Hooks = require(Plugin.Packages.RoactHooks)
+local React = require(Plugin.Packages.React)
+local ReactRoblox = require(Plugin.Packages.ReactRoblox)
 
 local Util = Plugin.Util
 local Constants = require(Util.Constants)
@@ -63,11 +63,11 @@ local function CreateOutline(Part, color)
   end
 end
 
-local function Outline(props, hooks)
-  local Part, setPart = hooks.useState()
+local function Outline(props)
+  local Part, setPart = React.useState(nil)
   local PluginMouse = props.PluginMouse :: PluginMouse
 
-  useEventConnection(hooks, PluginMouse.Move, function()
+  useEventConnection(PluginMouse.Move, function()
     local camera = workspace.CurrentCamera.CFrame
     local ray = PluginMouse.UnitRay
     local RaycastResults = workspace:Raycast(camera.Position, ray.Direction * 15000, props.RaycastParams)
@@ -98,13 +98,9 @@ local function Outline(props, hooks)
   local color = GetColor(Part, isConvertibleToTerrain, isLockedPartAllowed)
   local outlineClass, outlineProps = CreateOutline(Part, color)
 
-  return Roact.createElement(Roact.Portal, {
-    target = CoreGui
-  }, {
-    PTT_Outline = Roact.createElement(outlineClass, outlineProps)
-  })
+  return ReactRoblox.createPortal({
+    PTT_Outline = React.createElement(outlineClass, outlineProps)
+  }, CoreGui)
 end
 
-Outline = Hooks.new(Roact)(Outline)
-
 return Outline

src/Components/PluginApp.lua

@@ -6,7 +6,7 @@ local UserInputService = game:GetService('UserInputService')
 
 local Plugin = script.Parent.Parent
 
-local Roact = require(Plugin.Packages.Roact)
+local React = require(Plugin.Packages.React)
 
 local Util = Plugin.Util
 local Constants = require(Util.Constants)
@@ -52,7 +52,7 @@ local function IsUpdateAvailable()
   return false
 end
 
-local PluginApp = Roact.PureComponent:extend('PluginApp')
+local PluginApp = React.PureComponent:extend('PluginApp')
 
 function PluginApp:init()
   self.state = {
@@ -147,7 +147,7 @@ function PluginApp:init()
   end)
 end
 
-function PluginApp:didUpdate()
+function PluginApp:componentDidUpdate()
   self.button:SetActive(self.state.guiEnabled)
 
   if self.state.guiEnabled then
@@ -165,7 +165,7 @@ function PluginApp:render()
     return nil
   end
 
-  return Roact.createElement(StudioWidget, {
+  return React.createElement(StudioWidget, {
     plugin = self.plugin,
     Id = 'PartToTerrain',
     Title = Localization('Plugin.NameVersion', { Constants.VERSION }),
@@ -180,20 +180,20 @@ function PluginApp:render()
       self.plugin:Deactivate()
     end
   }, {
-    TooltipContainer = Roact.createElement(Tooltip.Container),
+    TooltipContainer = React.createElement(Tooltip.Container),
 
-    App = state.guiEnabled and Roact.createElement(App, {
+    App = state.guiEnabled and React.createElement(App, {
       IsOutdated = state.isOutdated
     }),
 
-    Outline = state.guiEnabled and Roact.createElement(Outline, {
+    Outline = state.guiEnabled and React.createElement(Outline, {
       PluginMouse = self.pluginMouse,
       RaycastParams = self.raycastParams
     })
   })
 end
 
-function PluginApp:didMount()
+function PluginApp:componentDidMount()
   -- Creates a seprate thread for update checking as to not block rendering thread.
   -- This is incase Roblox servers go extremely slow or if a user has a bad connection.
   task.spawn(function()
@@ -203,7 +203,7 @@ function PluginApp:didMount()
   end)
 end
 
-function PluginApp:willUnmount()
+function PluginApp:componentWillUnmount()
   self.toolbar:Destroy()
   self.button:Destroy()