Add support for Roblox internal Stories and Storybooks

.lune/build.luau

@@ -48,7 +48,6 @@ if args.watch then
 	watch({
 		filePatterns = {
 			"src/.*%.luau",
-			"example/.*%.luau",
 		},
 		onChanged = build,
 	})

foreman.toml

@@ -0,0 +1,10 @@
+[tools]
+rojo = { source = "rojo-rbx/rojo", version = "7.4.3" }
+selene = { source = "Kampfkarren/selene", version = "0.27.1" }
+StyLua = { source = "JohnnyMorganz/StyLua", version = "0.20.0" }
+wally = { source = "UpliftGames/wally", version = "0.3.2" }
+luau-lsp = { source = "JohnnyMorganz/luau-lsp", version = "1.34.0" }
+wally-package-types = { source = "JohnnyMorganz/wally-package-types", version = "1.3.2" }
+lune = { source = "lune-org/lune", version = "0.8.7" }
+darklua = { source = "seaofvoices/darklua", version = "0.13.1" }
+run-in-roblox = { source = "rojo-rbx/run-in-roblox", version = "0.3.0" }

src/e2e/e2e.spec.luau

@@ -37,7 +37,7 @@ describeEach(storybookModules)("e2e %s", function(storybookModule)
 		} :: any
 	) :: ModuleLoader.ModuleLoader
 
-	local storybook = loadStorybookModule(mockModuleLoader, storybookModule)
+	local storybook = loadStorybookModule(storybookModule, mockModuleLoader)
 	local storyModules = findStoryModulesForStorybook(storybook)
 	local container
 
@@ -65,7 +65,7 @@ describeEach(storybookModules)("e2e %s", function(storybookModule)
 		assert(#storyModules >= 2, "storybook must have at least 2 stories")
 
 		for _, storyModule in storyModules do
-			local story = loadStoryModule(mockModuleLoader, storyModule, storybook)
+			local story = loadStoryModule(storyModule, storybook)
 
 			if story.controls then
 				numStoriesWithControls += 1
@@ -78,7 +78,7 @@ describeEach(storybookModules)("e2e %s", function(storybookModule)
 
 	describeEach(storyModules)("%s", function(storyModule)
 		test("basic mount/unmount lifecycle", function()
-			local story = loadStoryModule(mockModuleLoader, storyModule, storybook)
+			local story = loadStoryModule(storyModule, storybook)
 			local lifecycle = render(container, story)
 
 			afterRender()
@@ -91,7 +91,7 @@ describeEach(storybookModules)("e2e %s", function(storybookModule)
 		end)
 
 		test("rerenders on control changes", function()
-			local story = loadStoryModule(mockModuleLoader, storyModule, storybook)
+			local story = loadStoryModule(storyModule, storybook)
 
 			if story.controls then
 				local lifecycle = render(container, story)

src/findStoryModulesForStorybook.spec.luau

@@ -1,4 +1,5 @@
 local JestGlobals = require("@pkg/JestGlobals")
+local ModuleLoader = require("@pkg/ModuleLoader")
 
 local findStoryModulesForStorybook = require("./findStoryModulesForStorybook")
 local types = require("@root/types")
@@ -27,6 +28,8 @@ test("find all story modules for a storybook", function()
 
 	local storybook: types.LoadedStorybook = {
 		name = "Storybook",
+		loader = ModuleLoader.new(),
+		source = Instance.new("ModuleScript"),
 		storyRoots = {
 			container,
 		},

src/hooks/useStory.luau

@@ -1,4 +1,3 @@
-local ModuleLoader = require("@pkg/ModuleLoader")
 local React = require("@pkg/React")
 
 local loadStoryModule = require("@root/loadStoryModule")
@@ -28,11 +27,10 @@ local types = require("@root/types")
 		parent: Instance,
 		storyModule: ModuleScript,
 		storybook: Storybook,
-		loader: ModuleLoader,
 	})
 		local ref = useRef(nil :: Frame?)
 
-		local story = Storyteller.useStory(props.storyModule, props.storybook, props.loader)
+		local story = Storyteller.useStory(props.storyModule, props.storybook)
 
 		useEffect(function()
 			if ref.current then
@@ -54,32 +52,27 @@ local types = require("@root/types")
 	@tag React
 	@tag Story
 	@within Storyteller
-
 ]=]
-local function useStory(
-	module: ModuleScript,
-	storybook: types.LoadedStorybook,
-	loader: ModuleLoader.ModuleLoader
-): (types.LoadedStory<unknown>?, string?)
+local function useStory(module: ModuleScript, storybook: types.LoadedStorybook): (types.LoadedStory<unknown>?, string?)
 	local state, setState = React.useState({} :: {
 		story: types.LoadedStory<unknown>?,
 		err: string?,
 	})
 
-	local loadStory = React.useCallback(function()
-		local story
-		local success, err = pcall(function()
-			story = loadStoryModule(loader, module, storybook)
-		end)
-
-		setState({
-			story = if success then story else nil,
-			err = if not success then err else nil,
-		})
-	end, { loader, module, storybook } :: { unknown })
-
 	React.useEffect(function()
-		local conn = loader.loadedModuleChanged:Connect(function(other)
+		local function loadStory()
+			local story
+			local success, err = pcall(function()
+				story = loadStoryModule(module, storybook)
+			end)
+
+			setState({
+				story = if success then story else nil,
+				err = if not success then err else nil,
+			})
+		end
+
+		local conn = storybook.loader.loadedModuleChanged:Connect(function(other)
 			if other == module then
 				loadStory()
 			end
@@ -90,7 +83,7 @@ local function useStory(
 		return function()
 			conn:Disconnect()
 		end
-	end, { module, loadStory, loader } :: { unknown })
+	end, { module, storybook } :: { unknown })
 
 	return state.story, state.err
 end

src/hooks/useStory.spec.luau

@@ -14,15 +14,12 @@ local act = ReactRoblox.act
 
 type LoadedStorybook = types.LoadedStorybook
 
-local loader: ModuleLoader.ModuleLoader
 local container: Folder
 local componentModule: ModuleScript
 local storyModule: ModuleScript
-local storybook: types.LoadedStorybook
+local storybook: LoadedStorybook
 
 beforeEach(function()
-	loader = ModuleLoader.new()
-
 	container = Instance.new("Folder")
 
 	componentModule = Instance.new("ModuleScript")
@@ -52,13 +49,15 @@ beforeEach(function()
 
 	storybook = {
 		name = "Storybook",
+		loader = ModuleLoader.new(),
+		source = Instance.new("ModuleScript"),
 		storyRoots = { container },
 	}
 end)
 
 test("loads a story module", function()
 	local get = renderHook(function()
-		return useStory(storyModule, storybook, loader)
+		return useStory(storyModule, storybook)
 	end)
 
 	local story, err = get()
@@ -77,7 +76,7 @@ test("handles story errors", function()
 	storyModule.Source = "syntax error" .. storyModule.Source
 
 	local get = renderHook(function()
-		return useStory(storyModule, storybook, loader)
+		return useStory(storyModule, storybook)
 	end)
 
 	local story, err = get()
@@ -88,7 +87,7 @@ end)
 
 test("re-renders on module changes", function()
 	local get = renderHook(function()
-		return useStory(storyModule, storybook, loader)
+		return useStory(storyModule, storybook)
 	end)
 
 	local story, _err = get()
@@ -118,7 +117,7 @@ end)
 
 test("reloads on dependency changes", function()
 	local get = renderHook(function()
-		return useStory(storyModule, storybook, loader)
+		return useStory(storyModule, storybook)
 	end)
 
 	local story = get()

src/hooks/useStorybooks.luau

@@ -1,15 +1,20 @@
 local ModuleLoader = require("@pkg/ModuleLoader")
 local React = require("@pkg/React")
+local Sift = require("@pkg/Sift")
 
 local findStorybookModules = require("@root/findStorybookModules")
 local isStorybookModule = require("@root/isStorybookModule")
 local loadStorybookModule = require("@root/loadStorybookModule")
 local types = require("@root/types")
 
-type UnavailableStorybook = {
-	problem: string,
-	storybook: types.LoadedStorybook,
-}
+local useCallback = React.useCallback
+local useEffect = React.useEffect
+local useRef = React.useRef
+local useState = React.useState
+
+type ModuleLoader = ModuleLoader.ModuleLoader
+type LoadedStorybook = types.LoadedStorybook
+type UnavailableStorybook = types.UnavailableStorybook
 
 --[=[
 	Performs all the discovery and loading of Storybook modules that would
@@ -32,9 +37,8 @@ type UnavailableStorybook = {
 
 	local function StorybookList(props: {
 		parent: Instance,
-		loader: ModuleLoader,
 	})
-		local storybooks = Storyteller.useStorybooks(props.parent, props.loader)
+		local storybooks = Storyteller.useStorybooks(props.parent)
 
 		local children = {}
 		for index, storybook in storybooks do
@@ -66,63 +70,121 @@ type UnavailableStorybook = {
 	@tag Storybook
 	@within Storyteller
 ]=]
-local function useStorybooks(
-	parent: Instance,
-	loader: ModuleLoader.ModuleLoader
-): {
-	available: { types.LoadedStorybook },
+local function useStorybooks(parent: Instance): {
+	available: { LoadedStorybook },
 	unavailable: { UnavailableStorybook },
 }
-	local storybooks, setStorybooks = React.useState({})
-	local unavailableStorybooks, setUnavailableStorybooks = React.useState({} :: { UnavailableStorybook })
+	local storybookConnections = useRef({} :: { [ModuleScript]: { RBXScriptConnection } })
+	local storybooks, setStorybooks = useState({} :: { LoadedStorybook })
+	local unavailableStorybooks, setUnavailableStorybooks = useState({} :: { UnavailableStorybook })
+
+	local getOrCreateConnectionObject = useCallback(function(storybookModule: ModuleScript): { RBXScriptConnection }
+		local existing = storybookConnections.current[storybookModule]
+		if existing then
+			return existing
+		else
+			local new = {}
+			storybookConnections.current[storybookModule] = new
+			return new
+		end
+	end, {})
 
-	local loadStorybooks = React.useCallback(function()
-		local newStorybooks = {}
-		local newUnavailableStorybooks: { UnavailableStorybook } = {}
+	local loadStorybook = useCallback(function(storybookModule: ModuleScript)
+		local connections = getOrCreateConnectionObject(storybookModule)
+		local loader = ModuleLoader.new()
 
-		for _, storybookModule in findStorybookModules(parent) do
-			local storybook: types.LoadedStorybook?
+		local reloadStorybook
+
+		local function load()
+			for _, connection in connections do
+				connection:Disconnect()
+			end
+
+			local storybook: LoadedStorybook?
 			local success, result = pcall(function()
-				storybook = loadStorybookModule(loader, storybookModule)
+				storybook = loadStorybookModule(storybookModule, loader)
 			end)
 
-			if success then
-				table.insert(newStorybooks, storybook)
+			table.insert(connections, loader.loadedModuleChanged:Connect(reloadStorybook))
+			table.insert(connections, storybookModule.AncestryChanged:Connect(reloadStorybook))
+
+			-- TODO: The logic to add/update storybooks at their index is nasty.
+			-- Revise this before merging
+			if success and storybook then
+				setStorybooks(function(prev)
+					local new = table.clone(prev)
+					local index = Sift.List.findWhere(new, function(other: LoadedStorybook)
+						return other.source == storybookModule
+					end)
+
+					if index then
+						new[index] = storybook
+					else
+						table.insert(new, storybook)
+					end
+
+					return new
+				end)
 			else
-				table.insert(newUnavailableStorybooks, {
+				local unavailableStorybook: UnavailableStorybook = {
 					problem = result,
 					storybook = {
 						name = storybookModule.Name,
+						loader = loader,
+						source = storybookModule,
 						storyRoots = {},
 					},
-				})
+				}
+
+				setUnavailableStorybooks(function(prev)
+					local new = table.clone(prev)
+					local index = Sift.List.findWhere(new, function(other: UnavailableStorybook)
+						return other.storybook.source == storybookModule
+					end)
+
+					if index then
+						new[index] = unavailableStorybook
+					else
+						table.insert(new, unavailableStorybook)
+					end
+
+					return new
+				end)
 			end
 		end
 
-		setStorybooks(newStorybooks)
-		setUnavailableStorybooks(newUnavailableStorybooks)
-	end, { parent, loader } :: { unknown })
+		function reloadStorybook(instance: Instance)
+			if instance == storybookModule and isStorybookModule(instance) then
+				for _, connection in connections do
+					connection:Disconnect()
+				end
 
-	React.useEffect(function()
-		local function reloadIfStorybook(instance: Instance)
-			if isStorybookModule(instance) then
-				loadStorybooks()
+				loader:clear()
+				load()
 			end
 		end
 
-		local connections = {
-			loader.loadedModuleChanged:Connect(reloadIfStorybook),
-			parent.DescendantAdded:Connect(reloadIfStorybook),
-		}
+		load()
+	end, {})
+
+	useEffect(function()
+		setStorybooks({})
+		setUnavailableStorybooks({})
 
-		loadStorybooks()
+		local storybookModules = findStorybookModules(parent)
+
+		for _, storybookModule in storybookModules do
+			task.spawn(loadStorybook, storybookModule)
+		end
 
 		return function()
-			for _, conn in connections do
-				conn:Disconnect()
+			for _, connections in storybookConnections.current do
+				for _, connection in connections do
+					connection:Disconnect()
+				end
 			end
 		end
-	end, { loadStorybooks, loader, parent } :: { unknown })
+	end, { parent } :: { unknown })
 
 	return {
 		available = storybooks,