Add support for Roblox's internal Stories and Storybooks

.lune/build.luau

@@ -1,9 +1,10 @@
+local process = require("@lune/process")
+
 local clean = require("./lib/clean")
 local compile = require("./lib/compile")
 local constants = require("./lib/constants")
 local getPluginsPath = require("./lib/getPluginsPath")
 local parseArgs = require("./lib/parseArgs")
-local process = require("@lune/process")
 local run = require("./lib/run")
 local watch = require("./lib/watcher/watch")
 
@@ -29,6 +30,7 @@ if args.watch then
 		filePatterns = {
 			"src/.*%.luau",
 			"example/.*%.luau",
+			"Packages/.*%.luau",
 		},
 		onChanged = build,
 	})

.lune/lib/parseArgs.luau

@@ -2,7 +2,7 @@ local FLAG_PATTERN = "%-%-(%w+)"
 local FLAG_ALL_IN_ONE_PATTERN = `{FLAG_PATTERN}=(%w+)`
 
 local function parseArgs(args: { string })
-	local parsedArgs: { [string]: string | boolean | number } = {}
+	local parsedArgs: { [string]: string | boolean | number | nil } = {}
 
 	local skipNextToken = false
 

.lune/wally-install.luau

@@ -1,7 +1,24 @@
+local process = require("@lune/process")
+
 local run = require("./lib/run")
 
+local function installPackageFromDisk(packageName: string, packagePath: string, runOptions: { [string]: any }?)
+	local homePath = process.env.HOME
+	assert(homePath, "no $HOME env var")
+
+	local absPackagePath = run("realpath", { packagePath })
+
+	run("rm", { `Packages/{packageName}.lua` }, runOptions)
+	run("ln", { "-s", `{absPackagePath}/dist`, `Packages/{packageName}` }, runOptions)
+end
+
 do
 	run("wally", { "install" })
+
+	installPackageFromDisk("Storyteller", "../storyteller")
+	-- ModuleLoader is a dependency of Storyteller, make sure to install both.
+	installPackageFromDisk("ModuleLoader", "../module-loader")
+
 	run("rojo", { "sourcemap", "build.project.json", "-o", "sourcemap.json" })
 	run("wally-package-types", { "--sourcemap", "sourcemap.json", "Packages" })
 end
@@ -10,6 +27,11 @@ do
 	run("wally", { "install" }, {
 		cwd = "code-samples",
 	})
+
+	installPackageFromDisk("Storyteller", "../storyteller", {
+		cwd = "code-samples",
+	})
+
 	run("rojo", { "sourcemap", "default.project.json", "-o", "sourcemap.json" }, {
 		cwd = "code-samples",
 	})

src/Common/CodeBlock.luau

@@ -0,0 +1,94 @@
+local Highlighter = require("@pkg/Highlighter")
+local React = require("@pkg/React")
+local Sift = require("@pkg/Sift")
+
+local SelectableTextLabel = require("@root/Forms/SelectableTextLabel")
+local nextLayoutOrder = require("@root/Common/nextLayoutOrder")
+local useTheme = require("@root/Common/useTheme")
+
+local useMemo = React.useMemo
+
+local function getLineNumbers(str: string): string
+	return Sift.List.reduce(str:split("\n"), function(accumulator, _item, index)
+		return if index == 1 then tostring(index) else `{accumulator}\n{index}`
+	end, "")
+end
+
+export type Props = {
+	source: string,
+	sourceColor: Color3?,
+	layoutOrder: number?,
+}
+
+local function CodeBlock(props: Props)
+	local theme = useTheme()
+
+	local sourceColor = useMemo(function()
+		return if props.sourceColor then props.sourceColor else theme.text
+	end, { props.sourceColor })
+
+	local source = useMemo(function()
+		if props.sourceColor then
+			return props.source
+		else
+			return table.concat(
+				Highlighter.buildRichTextLines({
+					src = props.source,
+				}),
+				"\n"
+			)
+		end
+	end, { props.source })
+
+	return React.createElement("Frame", {
+		AutomaticSize = Enum.AutomaticSize.XY,
+		BackgroundTransparency = 0.5,
+		BorderSizePixel = 0,
+		BackgroundColor3 = theme.sidebar,
+		LayoutOrder = props.layoutOrder,
+	}, {
+		Layout = React.createElement("UIListLayout", {
+			SortOrder = Enum.SortOrder.LayoutOrder,
+			FillDirection = Enum.FillDirection.Horizontal,
+			Padding = theme.padding,
+		}),
+
+		BorderRadius = React.createElement("UICorner", {
+			CornerRadius = theme.corner,
+		}),
+
+		Padding = React.createElement("UIPadding", {
+			PaddingTop = theme.padding,
+			PaddingRight = theme.padding,
+			PaddingBottom = theme.padding,
+			PaddingLeft = theme.padding,
+		}),
+
+		LineNumbers = React.createElement("TextLabel", {
+			LayoutOrder = nextLayoutOrder(),
+			AutomaticSize = Enum.AutomaticSize.XY,
+			Text = getLineNumbers(source),
+			TextSize = theme.textSize,
+			LineHeight = 1,
+			BackgroundTransparency = 1,
+			Font = Enum.Font.RobotoMono,
+			TextColor3 = theme.textFaded,
+			TextXAlignment = Enum.TextXAlignment.Right,
+		}),
+
+		SourceCode = React.createElement(SelectableTextLabel, {
+			RichText = true,
+			LayoutOrder = nextLayoutOrder(),
+			Size = UDim2.fromScale(1, 0),
+			AutomaticSize = Enum.AutomaticSize.Y,
+			Text = source,
+			TextColor3 = sourceColor,
+			TextSize = theme.textSize,
+			TextWrapped = false,
+			LineHeight = 1,
+			Font = Enum.Font.RobotoMono,
+		}),
+	})
+end
+
+return CodeBlock

src/Common/ContextProviders.luau

@@ -2,6 +2,7 @@ local React = require("@pkg/React")
 local TreeView = require("@root/TreeView")
 
 local ContextStack = require("@root/Common/ContextStack")
+local LocalStorageContext = require("@root/Plugin/LocalStorageContext")
 local NavigationContext = require("@root/Navigation/NavigationContext")
 local PluginContext = require("@root/Plugin/PluginContext")
 local SettingsContext = require("@root/UserSettings/SettingsContext")
@@ -20,6 +21,9 @@ local function ContextProviders(props: Props)
 			React.createElement(NavigationContext.Provider, {
 				defaultScreen = "Home",
 			}),
+			React.createElement(LocalStorageContext.Provider, {
+				storageKey = "FlipbookInternal",
+			}),
 			React.createElement(SettingsContext.Provider),
 			React.createElement(TreeView.TreeViewProvider),
 		},

src/Common/getInstanceFromPath.luau

@@ -0,0 +1,44 @@
+--[[
+	Gets an instance based off the result of getInstancePath.
+
+	The reason we use this over GetFullName is because it uses a dot (.) as the
+	path separator which makes it difficult to disambiguate instances stories
+	and test files (Foo.story and Foo.spec, respectively)
+
+	Returns `nil` if the instance is outside the DataModel or otherwise cannot
+	be found.
+]]
+
+local tryGetService = require("@root/RobloxInternal/tryGetService")
+
+local PATH_SEPERATOR = "/"
+
+local function getInstanceFromPath(path: string): Instance?
+	local parts = path:split(PATH_SEPERATOR)
+	local serviceName = parts[1]
+
+	if serviceName then
+		-- This function only works for instances in the DataModel. As such, the
+		-- first part of the path will always be a service, so if we can't find
+		-- one we exit out and return nil
+		local current = tryGetService(serviceName)
+
+		if current then
+			for i = 2, #parts do
+				local found = current:FindFirstChild(parts[i])
+
+				if found then
+					current = found
+				else
+					return nil
+				end
+			end
+
+			return current
+		end
+	end
+
+	return nil
+end
+
+return getInstanceFromPath

src/Common/getInstanceFromFullName.spec.luau → src/Common/getInstanceFromPath.spec.luau

@@ -3,7 +3,8 @@ local ReplicatedStorage = game:GetService("ReplicatedStorage")
 local JestGlobals = require("@pkg/JestGlobals")
 local newFolder = require("@root/Testing/newFolder")
 
-local getInstanceFromFullName = require("./getInstanceFromFullName")
+local getInstanceFromPath = require("./getInstanceFromPath")
+local getInstancePath = require("./getInstancePath")
 
 local expect = JestGlobals.expect
 local test = JestGlobals.test
@@ -18,7 +19,7 @@ afterEach(function()
 end)
 
 test("gets services", function()
-	local path = getInstanceFromFullName("ReplicatedStorage")
+	local path = getInstanceFromPath("ReplicatedStorage")
 	expect(path).toBe(ReplicatedStorage)
 end)
 
@@ -32,8 +33,7 @@ test("works on nested instances", function()
 	})
 	folder.Parent = ReplicatedStorage
 
-	local path = getInstanceFromFullName(module:GetFullName())
-	expect(path).toBe(module)
+	expect(getInstanceFromPath(getInstancePath(module))).toBe(module)
 end)
 
 test("works with spec files", function()
@@ -46,7 +46,7 @@ test("works with spec files", function()
 	})
 	folder.Parent = ReplicatedStorage
 
-	local path = getInstanceFromFullName(module:GetFullName())
+	local path = getInstanceFromPath(module:GetFullName())
 	expect(path).toBe(module)
 end)
 
@@ -61,18 +61,17 @@ test("finds spec files BEFORE the module it is associated with", function()
 	})
 	folder.Parent = ReplicatedStorage
 
-	local path = getInstanceFromFullName(module:GetFullName())
-	expect(path).toBe(module)
+	expect(getInstanceFromPath(getInstancePath(module))).toBe(module)
 end)
 
 test("returns nil if the first part of the path is not a service", function()
-	expect(getInstanceFromFullName("Part")).toBeUndefined()
+	expect(getInstanceFromPath("Part")).toBeUndefined()
 end)
 
 test("returns nil if the path does not exist", function()
-	expect(getInstanceFromFullName("Foo.story")).toBeUndefined()
-	expect(getInstanceFromFullName("Path.To.Foo.story")).toBeUndefined()
-	expect(getInstanceFromFullName("ReplicatedStorage.Foo.Bar.Baz")).toBeUndefined()
-	expect(getInstanceFromFullName("ReplicatedStorage.Sample.story")).toBeUndefined()
-	expect(getInstanceFromFullName("ReplicatedStorage.Sample.spec")).toBeUndefined()
+	expect(getInstanceFromPath("Foo.story")).toBeUndefined()
+	expect(getInstanceFromPath("Path/To/Foo.story")).toBeUndefined()
+	expect(getInstanceFromPath("ReplicatedStorage/Foo/Bar/Baz")).toBeUndefined()
+	expect(getInstanceFromPath("ReplicatedStorage/Sample.story")).toBeUndefined()
+	expect(getInstanceFromPath("ReplicatedStorage/Sample.spec")).toBeUndefined()
 end)

src/Common/getInstancePath.luau

@@ -0,0 +1,18 @@
+local PATH_SEPARATOR = "/"
+
+local function getInstancePath(instance: Instance, pathSeparator: string?): string
+	pathSeparator = if pathSeparator then pathSeparator else PATH_SEPARATOR
+	assert(pathSeparator, "Luau")
+
+	local path = {}
+	local current = instance
+
+	while current and current.Parent ~= nil do
+		table.insert(path, 1, current.Name)
+		current = current.Parent
+	end
+
+	return table.concat(path, "/")
+end
+
+return getInstancePath