feat: add createRoot function

Author: maxpowa

README.md

@@ -5,15 +5,22 @@ React, but for Factorio. Packaged as a mod for easy consumption.
 ```lua
 local React = require("__react__.react")
 
-script.on_event(defines.events.on_gui_opened, function(event)
-    if not event.player then return end
-
-    local element = React.createElement(
-        "frame",
-        { caption = "Reactorio" },
-        "Hello, world!"
-    )
-    React.render(element, event.player.gui.screen)
+script.on_event(defines.events.on_player_created, function(event)
+    local player = game.players[event.player_index]
+
+    -- Create the root element we are going to put our GUI into (props can be customized)
+    local root = React.createRoot(player.gui.center, { style = "outer_frame" })
+
+    -- Build our virtual dom tree
+    local vdom = React.lsx[[
+        <frame caption="React for Factorio">
+            Hello, world!
+            <button>Click Me!</button>
+        </frame>
+    ]]
+
+    -- Render!
+    React.render(vdom, root)
 end)
 ```
 
@@ -29,11 +36,14 @@ end)
  - Plain text components (generated via `label`)
  - Simple event API
     - No need to register a separate event listener, just add a prop
+ - LSX, Lua version of JSX
+    - `lsx'<label caption="Hello world!" />'` is equivalent to `createElement("label", { caption = "Hello world!" })`
+
 
 ### Coming Soon™
 
- - Component shorthand similar to JSX (most likely going to adapt https://github.com/hishamhm/f-strings)
- - Save/load event handler restoration
+ - Variable support in LSX (via additional param in lsx function)
+ - Save/load event handler restoration (maybe this works now?)
  - Context API support (`createContext`/`useContext`)
 
 ### Running Tests

lib/core.lua

@@ -110,6 +110,11 @@ local function render(vlist, parent, storage)
     for i, vnode in ipairs(vlist) do
         local forceUpdate = function() return render(vlist, parent, storage) end
 
+        -- special handling for string vnodes
+        if type(vnode) == "string" then
+            vnode = { type = "label", props = { caption = vnode }}
+        end
+
         while (type(vnode.type) == "function") do
             local k = vnode.props and vnode.props.key
             if not k then
@@ -187,7 +192,15 @@ local function createElement(type, props, ...)
     return { type = type, props = props or {}, children = children }
 end
 
+local function createRoot(parent, props)
+    if parent["react_root"] then
+        parent["react_root"].destroy()
+    end
+    return parent.add(merge(props or {}, { type = "frame", name = "react_root", }))
+end
+
 return {
     createElement = createElement,
+    createRoot = createRoot,
     render = render,
 }

react.lua

@@ -8,6 +8,7 @@ local lsx = require("__react__.lib.lsx")
 
 return {
     -- Core
+    createRoot = core.createRoot,
     createElement = core.createElement,
     h = core.createElement,
     render = core.render,

scenarios/react-testing/control.lua

@@ -2,4 +2,23 @@
 if script.active_mods["gvv"] then require("__gvv__.gvv")() end
 
 -- Load the test suite
-require("init")
+-- require("init")
+local React = require("__react__.react")
+
+script.on_event(defines.events.on_player_created, function(event)
+    local player = game.players[event.player_index]
+
+    -- Create the root element we are going to put our GUI into (props can be customized)
+    local root = React.createRoot(player.gui.center, { style = "outer_frame" })
+
+    -- Build our virtual dom tree
+    local vdom = React.lsx[[
+        <frame caption="React for Factorio">
+            Hello, world!
+            <button caption="Click Me!" />
+        </frame>
+    ]]
+
+    -- Render!
+    React.render(vdom, root)
+end)