Switch from Signals to Charm

scripts/install.luau

@@ -1,6 +1,7 @@
 local fs = require("@lute/fs")
 local process = require("@lute/process")
 
+local getDescendants = require("@scripts/lib/getDescendants")
 local json = require("@std/json")
 local project = require("@repo/project")
 
@@ -51,48 +52,64 @@ do
 	local find = FlipbookBatteries.find
 	local findAndReplace = FlipbookBatteries.findAndReplace
 
-	-- LuauLog is written with string requires which are not yet supported by
-	-- ModuleLoader. To allow us to still use LuauLog, this function patches it with
-	-- darklua to resolve the string requires to Roblox ones
-	local function patchLuauLog()
-		local packageRoot = find(`{project.PACKAGES_PATH}/_Index`, "^luaulog$")[1]
-
-		local darkluaConfig = {
-			process = {
-				{
-					rule = "convert_require",
-					current = {
-						name = "luau",
-					},
-					target = {
-						name = "roblox",
-						rojo_sourcemap = "./sourcemap.json",
-						indexing_style = "property",
+	-- Some of our Wally packages are written with string requires which are not
+	-- yet supported by ModuleLoader or Jest. To allow us to still use these
+	-- packages, this function patches them using darklua to resolve the string
+	-- requires to Roblox ones
+	local function patchStringRequires()
+		local packages = {
+			"^luaulog$",
+			"^charm$",
+			"^react%-charm$",
+		}
+
+		for _, package in packages do
+			local packageRoot = find(`{project.PACKAGES_PATH}/_Index`, package)[1]
+
+			assert(packageRoot, `no package found matching "{package}"`)
+
+			print(`patching {packageRoot}`)
+
+			local darkluaConfig = {
+				process = {
+					{
+						rule = "convert_require",
+						current = {
+							name = "luau",
+						},
+						target = {
+							name = "roblox",
+							indexing_style = "property",
+						},
 					},
 				},
-			},
-		}
+			}
 
-		local handle = fs.open(`{packageRoot}/.darklua.json`, "w+")
-		fs.write(handle, json.serialize(darkluaConfig, true))
+			local handle = fs.open(`{packageRoot}/.darklua.json`, "w+")
+			fs.write(handle, json.serialize(darkluaConfig, true))
 
-		run("rojo", { "sourcemap", "-o", "sourcemap.json" }, {
-			cwd = packageRoot,
-		})
+			run("darklua", { "process", "src", "src" }, {
+				cwd = packageRoot,
+			})
 
-		run("darklua", { "process", "src", "src" }, {
-			cwd = packageRoot,
-		})
+			-- Darklua doesn't seem to handle `./Foo` paths without a sourcemap,
+			-- and getting the sourcemap working is proving difficult. So the
+			-- following just does a quick pass to convert `"./Foo"` into
+			-- `script.Parent.Foo`
+			for _, descendant in getDescendants(packageRoot) do
+				if descendant:match("%.luau$") then
+					findAndReplace(descendant, `require%("%./(%w+)"%)`, "require(script.Parent.%1)")
+				end
+			end
+		end
 	end
 
 	local function installWallyPackages()
 		run("wally", { "install" })
 		run("rojo", { "sourcemap", project.ROJO_BUILD_PROJECT, "-o", "sourcemap.json" })
 		run("wally-package-types", { "--sourcemap", "sourcemap.json", project.PACKAGES_PATH })
 
-		if fs.exists(`{project.PACKAGES_PATH}/Log.lua`) then
-			patchLuauLog()
-		end
+		patchStringRequires()
 	end
 
 	local function installRobloxPackages()
@@ -103,12 +120,6 @@ do
 			project.ROBLOX_PACKAGES_VERSION,
 			"-d",
 			"Foundation",
-			"-d",
-			"Signals",
-			"-d",
-			"SignalsReact",
-			"-d",
-			"ReactUtils",
 
 			-- These are only included so the above dependencies work as expected.
 			-- It seems like roblox-packages has a bug with its dependency

scripts/lib/getDescendants.luau

@@ -0,0 +1,23 @@
+local fs = require("@lute/fs")
+
+local function getDescendants(dirPath: string): { string }
+	if fs.type(dirPath) ~= "dir" then
+		return {}
+	end
+
+	local function reduce(rootPath: string, accumulator: { string }): { string }
+		for _, child in fs.listdir(rootPath) do
+			local childPath = `{rootPath}/{child.name}`
+			table.insert(accumulator, childPath)
+
+			if child.type == "dir" then
+				reduce(childPath, accumulator)
+			end
+		end
+		return accumulator
+	end
+
+	return reduce(dirPath, {})
+end
+
+return getDescendants

wally.toml

@@ -7,11 +7,13 @@ realm = "shared"
 exclude = ["*"]
 
 [dependencies]
+Charm = "littensy/charm@0.11.0-rc.4"
 Highlighter = "boatbomber/highlighter@0.9.0"
 Log = "realthx1/luaulog@0.3.0"
 LuauPolyfill = "jsdotlua/luau-polyfill@1.2.7"
 ModuleLoader = "flipbook-labs/module-loader@0.7.0"
 React = "jsdotlua/react@17.0.2"
+ReactCharm = "littensy/react-charm@0.4.0-rc.3"
 ReactRoblox = "jsdotlua/react-roblox@17.0.2"
 ReactSpring = "chriscerie/react-spring@2.0.0"
 sha256 = "dekkonot/sha256@1.0.1"

workspace/flipbook-core/src/Common/ContextProviders.luau

@@ -18,7 +18,7 @@ local function ContextProviders(props: Props)
 	local themeName: "Dark" | "Light" = useThemeName()
 
 	useEffect(function()
-		PluginStore.get(false).setPlugin(props.plugin)
+		PluginStore.get().setPlugin(props.plugin)
 	end, { props.plugin })
 
 	return React.createElement(ContextStack, {

workspace/flipbook-core/src/Common/useThemeName.luau

@@ -1,12 +1,12 @@
 local React = require("@pkg/React")
-local SignalsReact = require("@rbxpkg/SignalsReact")
+local ReactCharm = require("@pkg/ReactCharm")
 
 local UserSettingsStore = require("@root/UserSettings/UserSettingsStore")
 
 local useMemo = React.useMemo
 local useState = React.useState
 local useEffect = React.useEffect
-local useSignalState = SignalsReact.useSignalState
+local useSignalState = ReactCharm.useSignalState
 
 export type ThemeName = "Dark" | "Light"
 

workspace/flipbook-core/src/Logs/LogsStore/createLogsStore.luau

@@ -1,11 +1,11 @@
+local Charm = require("@pkg/Charm")
 local Log = require("@pkg/Log")
 local Sift = require("@pkg/Sift")
-local Signals = require("@rbxpkg/Signals")
 
 type LogEvent = typeof(Log.LogEvent.new(Log.LogLevel.Information, {}, {}))
 
-local function createLogsStore(_scope: Signals.scope)
-	local getHistory, setHistory = Signals.createSignal({})
+local function createLogsStore()
+	local getHistory, setHistory = Charm.signal({})
 
 	local function addLine(event: LogEvent)
 		setHistory(function(prev)

workspace/flipbook-core/src/Logs/LogsStore/init.luau

@@ -1,7 +1,7 @@
-local Signals = require("@rbxpkg/Signals")
+local Charm = require("@pkg/Charm")
 
 local createLogsStore = require("@self/createLogsStore")
 
 return {
-	get = Signals.createComputed(createLogsStore),
+	get = Charm.computed(createLogsStore),
 }

workspace/flipbook-core/src/Logs/LogsView.luau

@@ -1,12 +1,12 @@
 local Foundation = require("@rbxpkg/Foundation")
 local React = require("@pkg/React")
-local SignalsReact = require("@rbxpkg/SignalsReact")
+local ReactCharm = require("@pkg/ReactCharm")
 
 local LogLine = require("./LogLine")
 local LogsStore = require("./LogsStore")
 
 local useState = React.useState
-local useSignalState = SignalsReact.useSignalState
+local useSignalState = ReactCharm.useSignalState
 
 local function LogsView()
 	local logsStore = useSignalState(LogsStore.get)

workspace/flipbook-core/src/Panels/DragHandle.luau

@@ -1,14 +1,14 @@
 local RunService = game:GetService("RunService")
 
 local React = require("@pkg/React")
+local ReactCharm = require("@pkg/ReactCharm")
 local Sift = require("@pkg/Sift")
-local SignalsReact = require("@rbxpkg/SignalsReact")
 
 local PluginStore = require("@root/Plugin/PluginStore")
 local types = require("@root/Panels/types")
 local useColors = require("@root/Common/useColors")
 
-local useSignalState = SignalsReact.useSignalState
+local useSignalState = ReactCharm.useSignalState
 
 local defaultProps = {
 	size = 8, -- px

workspace/flipbook-core/src/Panels/Topbar.luau

@@ -1,7 +1,7 @@
 local Foundation = require("@rbxpkg/Foundation")
 local LuauPolyfill = require("@pkg/LuauPolyfill")
 local React = require("@pkg/React")
-local ReactSignals = require("@rbxpkg/SignalsReact")
+local ReactSignals = require("@pkg/ReactCharm")
 
 local AboutView = require("@root/About/AboutView")
 local FeedbackDialog = require("@root/Feedback/FeedbackDialog")

workspace/flipbook-core/src/Plugin/LocalStorageStore.luau

@@ -1,4 +1,4 @@
-local Signals = require("@rbxpkg/Signals")
+local Charm = require("@pkg/Charm")
 local t = require("@pkg/t")
 
 local createPluginSettingsStore = require("@root/Plugin/createPluginSettingsStore")
@@ -20,7 +20,7 @@ local validate = t.interface({
 })
 
 return {
-	get = Signals.createComputed(function(_scope)
+	get = Charm.computed(function()
 		return createPluginSettingsStore("FlipbookLocalStorage", defaultValue, validate)
 	end),
 }

workspace/flipbook-core/src/Plugin/PluginApp.luau

@@ -1,6 +1,6 @@
 local Foundation = require("@rbxpkg/Foundation")
 local React = require("@pkg/React")
-local SignalsReact = require("@rbxpkg/SignalsReact")
+local ReactCharm = require("@pkg/ReactCharm")
 local Storyteller = require("@pkg/Storyteller")
 
 local NavigationContext = require("@root/Navigation/NavigationContext")
@@ -16,7 +16,7 @@ local createLoadedStorybook = require("@root/Storybook/createLoadedStorybook")
 local fireEventAsync = require("@root/Telemetry/fireEventAsync")
 local nextLayoutOrder = require("@root/Common/nextLayoutOrder")
 
-local useSignalState = SignalsReact.useSignalState
+local useSignalState = ReactCharm.useSignalState
 
 type LoadedStorybook = Storyteller.LoadedStorybook
 type UnavailableStorybook = Storyteller.UnavailableStorybook

workspace/flipbook-core/src/Plugin/PluginStore/createPluginStore.luau

@@ -1,8 +1,8 @@
-local Signals = require("@rbxpkg/Signals")
+local Charm = require("@pkg/Charm")
 
 export type PluginStore = {
-	getPlugin: Signals.getter<Plugin?>,
-	setPlugin: Signals.setter<Plugin?>,
+	getPlugin: () -> Plugin?,
+	setPlugin: (((Plugin?) -> Plugin?) | Plugin?) -> Plugin?,
 }
 
 --[[
@@ -15,7 +15,7 @@ export type PluginStore = {
 	store to share it around other parts of the app
 ]]
 local function createPluginStore(): PluginStore
-	local getPlugin, setPlugin = Signals.createSignal(nil :: Plugin?)
+	local getPlugin, setPlugin = Charm.signal(nil :: Plugin?)
 
 	return {
 		getPlugin = getPlugin,

workspace/flipbook-core/src/Plugin/PluginStore/init.luau

@@ -1,7 +1,7 @@
-local Signals = require("@rbxpkg/Signals")
+local Charm = require("@pkg/Charm")
 
 local createPluginStore = require("@self/createPluginStore")
 
 return {
-	get = Signals.createComputed(createPluginStore),
+	get = Charm.computed(createPluginStore),
 }

workspace/flipbook-core/src/Plugin/createPluginSettingsStore.luau

@@ -1,18 +1,18 @@
 local HttpService = game:GetService("HttpService")
 
-local Signals = require("@rbxpkg/Signals")
+local Charm = require("@pkg/Charm")
 
 local PluginStore = require("@root/Plugin/PluginStore")
 local logger = require("@root/logger")
 
 export type PluginSettingsStore<T> = {
-	getStorage: Signals.getter<T>,
-	setStorage: Signals.setter<T>,
+	getStorage: () -> T,
+	setStorage: (T | (T) -> T) -> T,
 
 	isSettingDefault: (settingName: string) -> boolean,
 
-	getIsLoading: Signals.getter<boolean>,
-	getErr: Signals.getter<string?>,
+	getIsLoading: () -> boolean,
+	getErr: () -> string?,
 
 	dispose: () -> (),
 }
@@ -29,9 +29,9 @@ local function createPluginSettingsStore<T>(
 	defaultValue: T,
 	validate: (value: any) -> (boolean, string)
 ): PluginSettingsStore<T>
-	local getStorage, setStorage = Signals.createSignal(defaultValue)
-	local getIsLoading, setIsLoading = Signals.createSignal(true)
-	local getErr, setErr = Signals.createSignal(nil :: string?)
+	local getStorage, setStorage = Charm.signal(defaultValue)
+	local getIsLoading, setIsLoading = Charm.signal(true)
+	local getErr, setErr = Charm.signal(nil :: string?)
 
 	local function readPluginSettingsAsync(plugin: Plugin): T?
 		logger:Info(`reading plugin settings for {storageKey} from disk...`)
@@ -89,12 +89,12 @@ local function createPluginSettingsStore<T>(
 	end
 
 	local prevStorage: T?
-	local dispose = Signals.createEffect(function(scope)
-		local storage = getStorage(scope)
-		local plugin = PluginStore.get(scope).getPlugin(scope)
+	local dispose = Charm.effect(function()
+		local storage = getStorage()
+		local plugin = PluginStore.get().getPlugin()
 
 		if plugin then
-			if getIsLoading(false) then
+			if Charm.peek(getIsLoading) then
 				task.spawn(function()
 					local data = readPluginSettingsAsync(plugin)
 					if data then
@@ -116,7 +116,7 @@ local function createPluginSettingsStore<T>(
 	end)
 
 	local function isSettingDefault(settingName: string): boolean
-		local storage = getStorage(false)
+		local storage = getStorage()
 		if typeof(defaultValue) ~= "table" or typeof(storage) ~= "table" then
 			return true
 		end