Skip to content

Commit 6246bcf

Browse files
authored
Merge pull request #3 from PepeElToro41/dev
1.0.1 Small fixes
2 parents d335fa5 + dbd9cd5 commit 6246bcf

File tree

169 files changed

+897
-1028
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

169 files changed

+897
-1028
lines changed

package.json

+8-8
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111
"author": "",
1212
"license": "ISC",
1313
"devDependencies": {
14-
"@rbxts/compiler-types": "^2.2.0-types.0",
15-
"@rbxts/types": "^1.0.744",
14+
"@rbxts/compiler-types": "^2.3.0-types.0",
15+
"@rbxts/types": "^1.0.758",
1616
"@typescript-eslint/eslint-plugin": "^6.2.1",
1717
"@typescript-eslint/parser": "^6.2.1",
1818
"eslint": "^8.46.0",
@@ -27,14 +27,14 @@
2727
"@rbxts/colour-utils": "^1.4.1",
2828
"@rbxts/flipper": "^2.0.1",
2929
"@rbxts/immut": "^0.4.4-ts.0",
30-
"@rbxts/pretty-react-hooks": "^0.3.3",
31-
"@rbxts/react-reflex": "^0.2.0",
32-
"@rbxts/react-roblox": "^0.2.0",
33-
"@rbxts/reflex": "^4.2.0",
34-
"@rbxts/roact": "npm:@rbxts/react-ts@latest",
30+
"@rbxts/pretty-react-hooks": "^0.4.2",
31+
"@rbxts/react": "^0.3.3",
32+
"@rbxts/react-reflex": "^0.3.4",
33+
"@rbxts/react-roblox": "^0.3.3",
34+
"@rbxts/reflex": "^4.3.1",
3535
"@rbxts/services": "^1.5.1",
3636
"@rbxts/sift": "^0.0.6",
3737
"@rbxts/signal": "^1.1.1",
38-
"@rbxts/ui-labs": "2.0.0-test1"
38+
"@rbxts/ui-labs": "^2.0.0"
3939
}
4040
}

serve.project.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
"$className": "DataModel",
99
"ServerScriptService": {
1010
"$className": "ServerScriptService",
11-
"UILABS": {
11+
"UILabs": {
1212
"$path": "./default.project.json"
1313
}
1414
}

src/Context/DescriptionContext.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useDebounceEffect, useUnmountEffect } from "@rbxts/pretty-react-hooks";
2-
import Roact, { PropsWithChildren, useCallback, useContext, useEffect, useMemo, useState } from "@rbxts/roact";
2+
import React, { PropsWithChildren, useCallback, useContext, useEffect, useMemo, useState } from "@rbxts/react";
33
import { Array } from "@rbxts/sift";
44

55
interface DescriptionInfo {
@@ -13,7 +13,7 @@ interface DescriptionContext {
1313
RemoveDescription: (name: string) => void;
1414
}
1515

16-
const DescriptionContext = Roact.createContext({} as DescriptionContext);
16+
const DescriptionContext = React.createContext({} as DescriptionContext);
1717

1818
interface DescriptionProviderProps extends PropsWithChildren {}
1919

src/Context/StoryPanelContext.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import Roact, { Dispatch, PropsWithChildren, SetStateAction, useBinding, useContext, useMemo, useState } from "@rbxts/roact";
1+
import React, { Dispatch, PropsWithChildren, SetStateAction, useBinding, useContext, useMemo, useState } from "@rbxts/react";
22

33
interface StoryPanelContext {
44
ActionsPinned: boolean;
5-
ActionsHeight: Roact.Binding<number>;
5+
ActionsHeight: React.Binding<number>;
66
SetActionsPinned: Dispatch<SetStateAction<boolean>>;
77
SetActionsHeight: (height: number) => void;
88
}
9-
const StoryPanelContext = Roact.createContext({} as StoryPanelContext);
9+
const StoryPanelContext = React.createContext({} as StoryPanelContext);
1010

1111
interface StoryPanelProps extends PropsWithChildren {}
1212

src/Context/ToolsContext.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import Roact from "@rbxts/roact";
1+
import React from "@rbxts/react";
22

33
interface ToolsContext {}
44

5-
const ToolsContext = Roact.createContext({} as ToolsContext);
5+
const ToolsContext = React.createContext({} as ToolsContext);

src/Context/UserInputContext.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useBindingListener, useEventListener } from "@rbxts/pretty-react-hooks";
2-
import Roact, { PropsWithChildren, useBinding, useCallback, useContext, useMemo } from "@rbxts/roact";
2+
import React, { PropsWithChildren, useBinding, useCallback, useContext, useMemo } from "@rbxts/react";
33
import { UserInputService } from "@rbxts/services";
44
import Signal from "@rbxts/signal";
55
import { InputSignals } from "@rbxts/ui-labs/src/Typing";
@@ -9,13 +9,13 @@ import { Div } from "UI/Styles/Div";
99
type InputSignature = (input: InputObject, gameProcessed: boolean) => void;
1010

1111
interface UserInputContext {
12-
MousePosition: Roact.Binding<Vector2>;
12+
MousePosition: React.Binding<Vector2>;
1313
InputChanged: Signal<InputSignature>;
1414
InputBegan: Signal<InputSignature>;
1515
InputEnded: Signal<InputSignature>;
1616
}
1717

18-
export const UserInputContext = Roact.createContext({} as UserInputContext);
18+
export const UserInputContext = React.createContext({} as UserInputContext);
1919

2020
interface UserInputProps extends PropsWithChildren {}
2121

@@ -52,7 +52,7 @@ export function UserInputProvider(props: UserInputProps) {
5252
return (
5353
<UserInputContext.Provider value={contextValue}>
5454
<Div
55-
Key="InputListener"
55+
key="InputListener"
5656
ZIndex={5}
5757
Event={{ InputChanged: OnInputChanged, InputBegan: OnInputBegan, InputEnded: OnInputEnded }}
5858
/>

src/Declarations/Globals.d.ts

+4
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,7 @@ interface ClassIconInfo {
33
ImageRectOffset: Vector2;
44
ImageRectSize: Vector2;
55
}
6+
7+
declare namespace React {
8+
type Children = Map<Key, React.Element>;
9+
}

src/Hooks/Context/UserInput.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useContext, useMemo } from "@rbxts/roact";
1+
import { useContext, useMemo } from "@rbxts/react";
22
import { UserInputContext } from "Context/UserInputContext";
33
import { usePosition } from "Hooks/Utils/AppHolder";
44

src/Hooks/Reflex/Control/Explorer/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { useStoryList } from "Hooks/Reflex/Use/Modules";
33
import { useStorybooks } from "Hooks/Reflex/Use/Requires";
44
import { GenerateNodes } from "./Utils";
55
import { useProducer } from "@rbxts/react-reflex";
6-
import { useEffect } from "@rbxts/roact";
6+
import { useEffect } from "@rbxts/react";
77

88
//Creates all the nodes (What is displayed in the explorer tree)
99
export function controlNodes() {

src/Hooks/Reflex/Control/ModuleList/InstanceSearch.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import Config from "Plugin/Configs";
33
import { ArrayDescendants } from "Utils/InstanceUtils";
44
import { ClassPredicator, PropagateEvent } from "./Utils";
55
import { useUpdateEffect } from "@rbxts/pretty-react-hooks";
6-
import { useState, useCallback, useEffect } from "@rbxts/roact";
6+
import { useState, useCallback, useEffect } from "@rbxts/react";
77

88
export function useInstanceSearch<T extends keyof Instances>(
99
className: T,

src/Hooks/Reflex/Control/ModuleList/Story.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import Configs from "Plugin/Configs";
22
import { useInstanceSearch } from "./InstanceSearch";
33
import { ExtensionPredicator } from "./Utils";
44
import { useProducer } from "@rbxts/react-reflex";
5-
import { useEffect } from "@rbxts/roact";
5+
import { useEffect } from "@rbxts/react";
66

77
export function controlStoryList() {
88
const [storyList, recompute] = useInstanceSearch("ModuleScript", ExtensionPredicator(Configs.Extensions.Story));

src/Hooks/Reflex/Control/ModuleList/Storybook.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import Configs from "Plugin/Configs";
22
import { useInstanceSearch } from "./InstanceSearch";
33
import { ExtensionPredicator } from "./Utils";
44
import { useProducer } from "@rbxts/react-reflex";
5-
import { useEffect } from "@rbxts/roact";
5+
import { useEffect } from "@rbxts/react";
66

77
export function controlStorybookList() {
88
const [storybookList, recompute] = useInstanceSearch("ModuleScript", ExtensionPredicator(Configs.Extensions.Storybook));
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import Signal from "@rbxts/signal";
2+
import { HotReloader } from "Utils/HotReloader";
3+
4+
export class StorybookLoader {
5+
private StorybookResult?: unknown = undefined;
6+
Module: ModuleScript;
7+
OnStorybookUpdated: Signal<() => void>;
8+
HotReloader?: HotReloader;
9+
ReloadPromise?: Promise<unknown>;
10+
HotReloaderConnection?: RBXScriptConnection;
11+
12+
constructor(module: ModuleScript) {
13+
this.OnStorybookUpdated = new Signal();
14+
this.Module = module;
15+
}
16+
GetCurrentResult() {
17+
return this.StorybookResult;
18+
}
19+
Init() {
20+
const reloaderResult = HotReloader.require(this.Module);
21+
this.HotReloader = reloaderResult.Reloader;
22+
23+
this.OnReloadPromise(reloaderResult.Result);
24+
this.HotReloaderConnection = reloaderResult.Reloader.OnReloadStarted.Connect((result) => {
25+
this.OnReloadPromise(result);
26+
});
27+
}
28+
OnReloadPromise(result: Promise<unknown>) {
29+
if (this.ReloadPromise) {
30+
this.ReloadPromise.cancel();
31+
}
32+
33+
this.ReloadPromise = result.then((result) => {
34+
this.StorybookResult = result;
35+
this.OnStorybookUpdated.Fire();
36+
});
37+
}
38+
Destroy() {
39+
if (this.ReloadPromise) this.ReloadPromise.cancel();
40+
if (this.HotReloaderConnection) this.HotReloaderConnection.Disconnect();
41+
if (this.HotReloader) this.HotReloader.Destroy();
42+
}
43+
}

src/Hooks/Reflex/Control/ModuleRequire/Storybooks.ts

+69-4
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,80 @@ import { useProducer, useSelector } from "@rbxts/react-reflex";
55
import { Dictionary } from "@rbxts/sift";
66
import { selectStorybooks } from "Reflex/ModuleRequire/Storybook";
77
import { useUpdateEffect } from "@rbxts/pretty-react-hooks";
8-
import { useEffect } from "@rbxts/roact";
8+
import { useCallback, useEffect, useState } from "@rbxts/react";
9+
import { StorybookLoader } from "./StorybookLoader";
910

1011
//Hot-Reloads (requires) all the storybooks
1112
export function controlStorybooks() {
13+
const [storybookLoaders, setStorybookLoaders] = useState<Map<ModuleScript, StorybookLoader>>();
14+
1215
const storybookList = useStorybookList();
13-
const storybooks = useSelector(selectStorybooks).storybooks;
1416
const { setStorybooks } = useProducer<RootProducer>();
1517

16-
const UpdateModule = (module: ModuleScript, result: unknown) => {
18+
//Checking for Storybook Loader Results
19+
const CollapseStorybookResults = useCallback(() => {
20+
const results: Storybooks = new Map();
21+
if (!storybookLoaders) {
22+
return setStorybooks(results);
23+
}
24+
25+
storybookLoaders.forEach((loader, module) => {
26+
const result = loader.GetCurrentResult();
27+
if (result === undefined) return;
28+
if (!CheckBookReturn(result)) return;
29+
30+
results.set(module, result);
31+
});
32+
33+
setStorybooks(results);
34+
}, [storybookLoaders]);
35+
36+
//Creating Storybook Loaders
37+
useEffect(() => {
38+
setStorybookLoaders((oldLoaders) => {
39+
const loaders = new Map<ModuleScript, StorybookLoader>();
40+
41+
storybookList.forEach((module) => {
42+
const currentLoader = oldLoaders ? oldLoaders.get(module) : undefined;
43+
if (currentLoader) loaders.set(module, currentLoader);
44+
45+
const newLoader = new StorybookLoader(module);
46+
loaders.set(module, newLoader);
47+
newLoader.Init();
48+
});
49+
if (oldLoaders) {
50+
oldLoaders.forEach((loader, module) => {
51+
if (!loaders.has(module)) {
52+
loader.Destroy();
53+
}
54+
});
55+
}
56+
57+
return loaders;
58+
});
59+
}, [storybookList]);
60+
61+
//Listening for Storybook Loaders
62+
useEffect(() => {
63+
if (!storybookLoaders) return;
64+
CollapseStorybookResults();
65+
66+
const connections: RBXScriptConnection[] = [];
67+
storybookLoaders.forEach((loader) => {
68+
const connection = loader.OnStorybookUpdated.Connect(() => {
69+
CollapseStorybookResults();
70+
});
71+
connections.push(connection);
72+
});
73+
74+
return () => {
75+
connections.forEach((connection) => {
76+
connection.Disconnect();
77+
});
78+
};
79+
}, [storybookLoaders, CollapseStorybookResults]);
80+
81+
/*const UpdateModule = (module: ModuleScript, result: unknown) => {
1782
const isStorybook = CheckBookReturn(result);
1883
const newMap = Dictionary.copy(storybooks);
1984
if (isStorybook) {
@@ -55,5 +120,5 @@ export function controlStorybooks() {
55120
requirePromises.forEach((promise) => promise.cancel());
56121
reloaders.forEach((reloader) => reloader.Destroy());
57122
};
58-
}, [storybookList]);
123+
}, [storybookList]);*/
59124
}

src/Hooks/Reflex/Control/Preview/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useProducer, useSelector } from "@rbxts/react-reflex";
2-
import { useEffect } from "@rbxts/roact";
2+
import { useEffect } from "@rbxts/react";
33
import { selectStoryPreviews } from "Reflex/StoryPreview/StoryMount";
44
import { selectStorySelected } from "Reflex/StorySelection";
55

src/Hooks/Utils/AppHolder.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useSelector } from "@rbxts/react-reflex";
2-
import { useCallback } from "@rbxts/roact";
2+
import { useCallback } from "@rbxts/react";
33
import { selectHolder } from "Reflex/Interface";
44

55
//this hook gives you a function that converts AbsolutePosition to relative position

src/Hooks/Utils/Connection.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import { useEffect } from "@rbxts/roact";
1+
import { useEffect } from "@rbxts/react";
22

33
//Types borrowed from LITTENSYS's hooks
44
type EventLike<T extends Callback = Callback> = { Connect(callback: T): ConnectionLike };
55
type ConnectionLike = { Disconnect(): void };
66

77
export function useConnection<T extends EventLike>(event: T | undefined, listener: T extends EventLike<infer U> ? U : never, deps?: any[]) {
8-
const useDeps = deps ?? [];
9-
useDeps.push(event, listener);
8+
const useDeps: defined[] = deps ?? [];
9+
if (event) useDeps.push(event, listener);
1010
useEffect(() => {
1111
if (!event) return;
1212
const connection = event.Connect(listener);

src/Hooks/Utils/Instance.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useEffect, useMemo, useState } from "@rbxts/roact";
1+
import { useEffect, useMemo, useState } from "@rbxts/react";
22

33
type PropertiesTable<T extends Instance> = Partial<WritableInstanceProperties<T>>;
44

src/Hooks/Utils/Mutable.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useMemo } from "@rbxts/roact";
1+
import { useMemo } from "@rbxts/react";
22

33
export function useMutable<T>(): { current: T | undefined };
44
export function useMutable<T>(value: T): { current: T };

src/Hooks/Utils/OutsideWrapper.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Binding, useBinding, useCallback, useEffect, useState } from "@rbxts/roact";
1+
import { Binding, useBinding, useCallback, useEffect, useState } from "@rbxts/react";
22
import { useAppHolder } from "./AppHolder";
33
import { Lerp } from "Utils/NumberUtils";
44
import { RunService } from "@rbxts/services";

src/Hooks/Utils/Signal.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useUnmountEffect } from "@rbxts/pretty-react-hooks";
2-
import { useMemo } from "@rbxts/roact";
2+
import { useMemo } from "@rbxts/react";
33
import Signal from "@rbxts/signal";
44

55
export function useSignal<Signature extends Callback>() {

src/Hooks/Utils/Toggler.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useState, useCallback, useMemo } from "@rbxts/roact";
1+
import { useState, useCallback, useMemo } from "@rbxts/react";
22

33
export function useToggler(initial: boolean) {
44
const [enabled, setEnabled] = useState(initial);

src/Hooks/Utils/Tween.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useUnmountEffect, useUpdateEffect } from "@rbxts/pretty-react-hooks";
2-
import { useState, useMemo, useBinding, useCallback } from "@rbxts/roact";
2+
import { useState, useMemo, useBinding, useCallback } from "@rbxts/react";
33
import { RunService, TweenService } from "@rbxts/services";
44

55
type TweeneableArray = [number, CFrame, Color3, UDim2, UDim, Vector2int16, Vector2, Vector3, Rect];

src/Plugin/Configs.ts

+6
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,12 @@ const Configs = {
1414
"StarterPlayer",
1515
]),
1616

17+
Version: {
18+
Mayor: 1,
19+
Minor: 0,
20+
Fix: 1,
21+
},
22+
1723
Extensions: {
1824
Story: ".story",
1925
Storybook: ".storybook",

src/Reflex/Overlay.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { createProducer } from "@rbxts/reflex";
2-
import Roact from "@rbxts/roact";
2+
import React from "@rbxts/react";
33

44
interface OverlayEntry {
55
Key: string;
6-
Element: Roact.Element;
6+
Element: React.Element;
77
}
88
interface HintEntry {
99
Id: string;
@@ -23,7 +23,7 @@ const initialState: OverlayState = {
2323
export const selectOverlay = (state: RootState) => state.overlay.overlay;
2424

2525
export const OverlayProducer = createProducer(initialState, {
26-
setOverlay: (state, key: string, element: Roact.Element) => {
26+
setOverlay: (state, key: string, element: React.Element) => {
2727
return {
2828
...state,
2929
overlay: {

0 commit comments

Comments
 (0)