Create a file for each renderer

.github/workflows/ci.yml

@@ -51,19 +51,10 @@ jobs:
           token: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Install dependencies
-        run: wally install
-
-      - name: Download global Roblox types
-        shell: bash
-        run: curl -s -O https://raw.githubusercontent.com/JohnnyMorganz/luau-lsp/master/scripts/globalTypes.d.lua
-
-      - name: Generate sourcemap for LSP
-        shell: bash
-        run: rojo sourcemap tests.project.json -o sourcemap.json
+        run: ./bin/wally-install.sh
 
-      - name: Analyze
-        shell: bash
-        run: luau-lsp analyze --sourcemap=sourcemap.json --defs=globalTypes.d.lua --defs=testez.d.lua --ignore=**/_Index/** src/
+      - name: Run Luau analysis
+        run: ./bin/analyze.sh
 
   scripts:
     runs-on: ubuntu-latest

.vscode/tasks.json

@@ -3,6 +3,12 @@
   // for the documentation about the tasks.json format
   "version": "2.0.0",
   "tasks": [
+    {
+      "label": "Install packages",
+      "type": "shell",
+      "problemMatcher": [],
+      "command": "./bin/wally-install.sh"
+    },
     {
       "label": "Build (Development)",
       "type": "shell",
@@ -50,4 +56,4 @@
       "command": "npx moonwave dev"
     }
   ]
-}
+}

bin/analyze.sh

@@ -5,5 +5,8 @@ curl -s -O https://raw.githubusercontent.com/JohnnyMorganz/luau-lsp/master/scrip
 rojo sourcemap tests.project.json -o sourcemap.json
 
 luau-lsp analyze --sourcemap=sourcemap.json --defs=globalTypes.d.lua --defs=testez.d.lua --ignore=**/_Index/** src/
+exit_code=$?
 
 rm globalTypes.d.lua
+
+exit $exit_code

bin/wally-install.sh

@@ -1,3 +1,11 @@
+#!/usr/bin/env bash
+
+set -e
+
 wally install
 
 git clone https://github.com/flipbook-labs/csf-lua Packages/CSF
+
+rojo sourcemap tests.project.json --output sourcemap.json
+
+wally-package-types --sourcemap sourcemap.json Packages/

foreman.toml

@@ -7,3 +7,4 @@ tarmac = { source = "Roblox/tarmac", version = "0.7.0" }
 wally = { source = "UpliftGames/wally", version = "0.3.2" }
 moonwave-extractor = { source = "UpliftGames/moonwave", version = "1.0.0" }
 luau-lsp = { source = "JohnnyMorganz/luau-lsp", version = "1.x" }
+wally-package-types = { source = "JohnnyMorganz/wally-package-types", version = "1.2.1" }

src/Explorer/Component/Directory.lua

@@ -1,7 +1,7 @@
 local flipbook = script:FindFirstAncestor("flipbook")
 
 local React = require(flipbook.Packages.React)
-local RoactSpring = require(flipbook.Packages.RoactSpring)
+local ReactSpring = require(flipbook.Packages.ReactSpring)
 local assets = require(flipbook.assets)
 local constants = require(flipbook.constants)
 local useTheme = require(flipbook.Common.useTheme)
@@ -21,7 +21,7 @@ type Props = {
 local function Directory(props: Props)
 	local theme = useTheme()
 	local hover, setHover = React.useState(false)
-	local styles = (RoactSpring.useSpring :: any)({
+	local styles = (ReactSpring.useSpring :: any)({
 		alpha = if hover then 0 else 1,
 		rotation = if props.expanded then 90 else 0,
 		config = constants.SPRING_CONFIG,

src/Explorer/Component/Story.lua

@@ -1,7 +1,7 @@
 local flipbook = script:FindFirstAncestor("flipbook")
 
 local React = require(flipbook.Packages.React)
-local RoactSpring = require(flipbook.Packages.RoactSpring)
+local ReactSpring = require(flipbook.Packages.ReactSpring)
 local assets = require(flipbook.assets)
 local constants = require(flipbook.constants)
 local useTheme = require(flipbook.Common.useTheme)
@@ -20,7 +20,7 @@ type Props = {
 local function Story(props: Props)
 	local theme = useTheme()
 	local hover, setHover = React.useState(false)
-	local styles = (RoactSpring.useSpring :: any)({
+	local styles = (ReactSpring.useSpring :: any)({
 		alpha = if not props.active then if hover then 0 else 1 else 0,
 		color = if not props.active then theme.divider else theme.selection,
 		textColor = if not props.active then theme.textFaded else theme.background,

src/Explorer/Component/init.lua

@@ -13,15 +13,17 @@ local defaultProps = {
 	indent = 0,
 }
 
-type Props = typeof(defaultProps) & {
+type Props = {
 	node: types.ComponentTreeNode,
 	filter: string?,
 	activeNode: types.ComponentTreeNode?,
 	onClick: ((types.ComponentTreeNode) -> ())?,
 }
 
-local function Component(props: Props)
-	props = Sift.Dictionary.merge(defaultProps, props)
+type InternalProps = Props & typeof(defaultProps)
+
+local function Component(providedProps: Props)
+	local props: InternalProps = Sift.Dictionary.merge(defaultProps, providedProps)
 
 	local hasChildren = props.node.children and #props.node.children > 0
 

src/Forms/Button.lua

@@ -11,14 +11,16 @@ local function shift(color: Color3, percent: number): Color3
 	return Color3.fromHSV(h, s, math.clamp(v * (1 + percent), 0, 1))
 end
 
+type Style = "contain" | "stroke"
+
 local defaultProps = {
-	style = "contain",
+	style = "contain" :: Style,
 	text = "Button",
 }
 
-type Props = typeof(defaultProps) & {
+type Props = {
 	text: string,
-	style: "contain" | "stroke",
+	style: Style?,
 
 	anchorPoint: Vector2?,
 	position: UDim2?,
@@ -29,8 +31,10 @@ type Props = typeof(defaultProps) & {
 	onClick: (() -> ())?,
 }
 
-local function Button(props: Props)
-	props = Sift.Dictionary.join(defaultProps, props)
+type InternalProps = Props & typeof(defaultProps)
+
+local function Button(providedProps: Props)
+	local props: InternalProps = Sift.Dictionary.join(defaultProps, providedProps)
 
 	local theme = useTheme()
 	local hover, setHover = React.useState(false)

src/Forms/InputField.lua

@@ -12,7 +12,7 @@ local defaultProps = {
 	autoFocus = false,
 }
 
-export type Props = typeof(defaultProps) & {
+export type Props = {
 	layoutOrder: number?,
 	onSubmit: (text: string) -> (),
 	onFocus: (() -> ())?,
@@ -22,8 +22,10 @@ export type Props = typeof(defaultProps) & {
 	transform: ((newText: string, oldText: string) -> string)?,
 }
 
-local function InputField(props: Props)
-	props = Sift.Dictionary.merge(defaultProps, props)
+type InternalProps = Props & typeof(defaultProps)
+
+local function InputField(providedProps: Props)
+	local props: InternalProps = Sift.Dictionary.merge(defaultProps, providedProps)
 
 	local ref = React.createRef()
 	local text, setText = React.useState("")

src/Forms/Searchbar.lua

@@ -1,7 +1,7 @@
 local flipbook = script:FindFirstAncestor("flipbook")
 
 local React = require(flipbook.Packages.React)
-local RoactSpring = require(flipbook.Packages.RoactSpring)
+local ReactSpring = require(flipbook.Packages.ReactSpring)
 local Sift = require(flipbook.Packages.Sift)
 local assets = require(flipbook.assets)
 local constants = require(flipbook.constants)
@@ -16,22 +16,24 @@ local defaultProps = {
 	size = UDim2.new(1, 0, 0, 36),
 }
 
-type Props = typeof(defaultProps) & {
+export type Props = {
 	layoutOrder: number?,
 	onSearchChanged: ((value: string) -> ())?,
 }
 
+type InternalProps = Props & typeof(defaultProps)
+
 local SEARCH_ICON_SIZE = 16 -- px
 
-local function Searchbar(props: Props)
-	props = Sift.Dictionary.merge(defaultProps, props)
+local function Searchbar(providedProps: Props)
+	local props: InternalProps = Sift.Dictionary.merge(defaultProps, providedProps)
 
 	local theme = useTheme()
 	local search, setSearch = React.useState("")
 	local isFocused, setIsFocused = React.useState(false)
 	local isExpanded = isFocused or search ~= ""
 
-	local styles = (RoactSpring.useSpring :: any)({
+	local styles = (ReactSpring.useSpring :: any)({
 		alpha = if isExpanded then 1 else 0,
 		config = constants.SPRING_CONFIG,
 	})

src/Navigation/Item.lua

@@ -1,7 +1,7 @@
 local flipbook = script:FindFirstAncestor("flipbook")
 
 local React = require(flipbook.Packages.React)
-local RoactSpring = require(flipbook.Packages.RoactSpring)
+local ReactSpring = require(flipbook.Packages.ReactSpring)
 local constants = require(flipbook.constants)
 local useTheme = require(flipbook.Common.useTheme)
 
@@ -19,7 +19,7 @@ local function Item(props: Props)
 	local theme = useTheme()
 
 	local hover, setHover = React.useState(false)
-	local styles = (RoactSpring.useSpring :: any)({
+	local styles = (ReactSpring.useSpring :: any)({
 		alpha = if not props.active and hover then 0 else 1,
 		config = constants.SPRING_CONFIG,
 	})

src/Panels/DragHandle.lua

@@ -13,14 +13,16 @@ local defaultProps = {
 	hoverIconY = "rbxasset://textures/StudioUIEditor/icon_resize4.png",
 }
 
-export type Props = typeof(defaultProps) & {
+export type Props = {
 	handle: types.DragHandle,
 	onDrag: (delta: Vector2) -> (),
 	onDragEnd: (() -> ())?,
 }
 
-local function DragHandle(props: Props)
-	props = Sift.Dictionary.merge(defaultProps, props)
+type InternalProps = Props & typeof(defaultProps)
+
+local function DragHandle(providedProps: Props)
+	local props: InternalProps = Sift.Dictionary.merge(defaultProps, providedProps)
 
 	local plugin = React.useContext(PluginContext.Context)
 	local isDragging, setIsDragging = React.useState(false)

src/Panels/ResizablePanel.lua

@@ -11,7 +11,7 @@ local defaultProps = {
 	maxSize = Vector2.new(math.huge, math.huge),
 }
 
-export type Props = typeof(defaultProps) & {
+export type Props = {
 	initialSize: UDim2,
 	layoutOrder: number?,
 	dragHandles: { types.DragHandle }?,
@@ -21,8 +21,10 @@ export type Props = typeof(defaultProps) & {
 	children: any,
 }
 
-local function ResizablePanel(props: Props)
-	props = Sift.Dictionary.merge(defaultProps, props)
+type InternalProps = Props & typeof(defaultProps)
+
+local function ResizablePanel(providedProps: Props)
+	local props: InternalProps = Sift.Dictionary.merge(defaultProps, providedProps)
 
 	local absoluteSize, setAbsoluteSize = React.useState(nil)
 

src/Panels/Sidebar.stories.lua

@@ -11,7 +11,11 @@ return {
 		storybooks = {
 			internalStorybook,
 		},
-		selectStory = print,
-		selectStorybook = print,
+		selectStory = function(storyModule)
+			print(storyModule)
+		end,
+		selectStorybook = function(storybook)
+			print(storybook)
+		end,
 	}),
 }

src/Plugin/PluginApp.stories.lua

@@ -9,5 +9,6 @@ return {
 	controls = {},
 	story = React.createElement(PluginApp, {
 		loader = ModuleLoader.new(),
+		plugin = plugin,
 	}),
 }

src/Renderers/createFusionRenderer.lua

@@ -0,0 +1,40 @@
+local flipbook = script:FindFirstAncestor("flipbook")
+
+local types = require(flipbook.Renderers.types)
+local createRobloxRenderer = require(flipbook.Renderers.createRobloxRenderer)
+
+type Renderer = types.Renderer
+
+type Packages = {
+	Fusion: any,
+}
+
+local function createFusionRenderer(packages: Packages): Renderer
+	local Fusion = packages.Fusion
+	local robloxRenderer = createRobloxRenderer()
+
+	local function transformArgs(args)
+		local newArgs = {}
+		for k, v in args do
+			newArgs[k] = Fusion.Value(v)
+		end
+		return newArgs
+	end
+
+	local function shouldUpdate(context, prevContext)
+		if context.args ~= prevContext.args then
+			return false
+		else
+			return nil
+		end
+	end
+
+	return {
+		transformArgs = transformArgs,
+		shouldUpdate = shouldUpdate,
+		mount = robloxRenderer.mount,
+		unmount = robloxRenderer.unmount,
+	}
+end
+
+return createFusionRenderer

src/Renderers/createReactRenderer.lua

@@ -0,0 +1,39 @@
+local flipbook = script:FindFirstAncestor("flipbook")
+
+local types = require(flipbook.Renderers.types)
+
+type Renderer = types.Renderer
+
+type Packages = {
+	React: any,
+	ReactRoblox: any,
+}
+
+local function createReactRenderer(packages: Packages): Renderer
+	local React = packages.React
+	local ReactRoblox = packages.ReactRoblox
+
+	local container = Instance.new("Folder")
+	local root = ReactRoblox.createRoot(container)
+
+	local function mount(element)
+		if typeof(element) == "function" then
+			element = React.createElement(element, props)
+		end
+
+		root:render(element)
+
+		return container
+	end
+
+	local function unmount()
+		root:unmount()
+	end
+
+	return {
+		mount = mount,
+		unmount = unmount,
+	}
+end
+
+return createReactRenderer