You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/align-files-guide.md
+11-9Lines changed: 11 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,14 +1,15 @@
1
1
# Aligning files guide
2
2
3
-
We are aligning files by going through them module by module. We keep track of them in a [Adapt roact-alignment implementation](https://github.com/Roblox/roact-alignment/milestone/1) milestone.
3
+
We are aligning files by going through them module by module.
4
4
5
5
## Prerequisites
6
6
7
7
In this guide we assume that you have the following project cloned inside of the common directory:
After we run the automatic conversion the file will contain a lot of changes. Please additionally run `stylua module` in the roact-alignment directory to make sure all the files are converted according to the StyLua configuration.
60
+
After we run the automatic conversion the file will contain a lot of changes. Please additionally run `stylua module` in the react-lua directory to make sure all the files are converted according to the StyLua configuration.
60
61
61
62
Now our job is to capture the deviations that the original code has made and mark them with appropriate `ROBLOX deviation START` / `ROBLOX deviation END` comments.
62
63
@@ -81,7 +82,7 @@ As for the actual deviations that need to be marked let's look at the following
81
82

82
83

83
84
84
-
In order to make that process a little bit easier we've created a set of VSCode snippets that you can use - [link](#snippets) to snippets section.
85
+
In order to make that process a little bit easier we've created a set of VSCode snippets that you can use - [link](#snippets) to snippets section.
85
86
86
87
## Snippets
87
88
@@ -95,6 +96,7 @@ In order to use the snippets you should configure a hot key (keyboard shortcut)
95
96
*`deviation-start` and `deviation-end` - will only insert a proper deviation start/end comment. We use those to avoid typos.
96
97
97
98
There are couple more utility snippets for special cases that were occurring more often:
99
+
98
100
*`deviation-block-type` - it will wrap a block with deviation comments, comment out the block and insert a duplicate but change `local` for `type`. It's useful when js-to-lua imported locals from a module when it should actually import types
99
101
*`deviation-line` and `deviation-line-skipped` are similar to their block equivalents but will use the current line instead of selected block of code
Copy file name to clipboardExpand all lines: docs/api-reference/react-roblox.md
+20-12Lines changed: 20 additions & 12 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,50 +10,58 @@ Notable absences are:
10
10
*`unmountComponentAtNode` - Use the `unmount` method on the root object returned from `createRoot` instead
11
11
*`findDOMNode` - Use [refs](https://reactjs.org/docs/refs-and-the-dom.html) instead
12
12
13
-
## ReactRoblox.createRoot
13
+
## `ReactRoblox.createRoot`
14
+
14
15
Adopted as part of the Concurrent Mode API. Refer to [`ReactDOM.createRoot` documentation](https://reactjs.org/docs/concurrent-mode-reference.html#createroot).
15
16
16
-
## ReactRoblox.createBlockingRoot
17
+
## `ReactRoblox.createBlockingRoot`
18
+
17
19
Adopted as part of the Concurrent Mode API. "Blocking" roots represent a transitional step between synchronous rendering and full concurrent rendering. Refer to [`ReactDOM.createBlockingRoot` documentation](https://reactjs.org/docs/concurrent-mode-adoption.html#migration-step-blocking-mode).
18
20
19
-
## ReactRoblox.createLegacyRoot
21
+
## `ReactRoblox.createLegacyRoot`
22
+
20
23
Adopted as part of the Concurrent Mode API. "Legacy" roots are essentially equivalent to pre-concurrent React behavior. Refer to [`ReactDOM.createLegacyRoot` documentation](https://reactjs.org/docs/concurrent-mode-adoption.html#migration-step-blocking-mode).
21
24
22
25
### Deviations
26
+
23
27
React documentation provides [a handy chart](https://reactjs.org/docs/concurrent-mode-adoption.html#feature-comparison) that explains the feature differences between the roots. This table lists three deprecated features under legacy roots only:
**These features were never implemented in legacy Roact, and have not been ported.** Instead, creating a Legacy Mode root simply tells Roact to render synchronously. This behavior is most similar to legacy Roact or pre-Concurrent-Mode React JS.
33
+
**These features were never implemented in legacy Roact, and have not been ported.** Instead, creating a Legacy Mode root simply tells React Lua to render synchronously. This behavior is most similar to legacy Roact or pre-Concurrent-Mode React JS.
30
34
31
35
Generally speaking, `ReactRoblox.createRoot` should be used for all new work, while the Blocking and Legacy versions can be used for upgrading existing Roact logic in the event that it does not yet meet the requirements for Concurrent Mode.
32
36
33
-
## ReactRoblox.createPortal
37
+
## `ReactRoblox.createPortal`
38
+
34
39
Refer to [`ReactDOM.createPortal` documentation](https://reactjs.org/docs/portals.html).
35
40
36
41
<!-- Testing/globals only -->
37
-
## ReactRoblox.act
38
-
Used for testing code with scheduling logic mocked. This ensures that tests behave consistently and don't batch work unpredictably across frames. `act` executes a function and then plays forward the mock scheduler after it's done, and should be used to wrap any interactions that trigger updates to a roact UI.
42
+
## `ReactRoblox.act`
39
43
40
-
More info on using `act` can be found [in the migration guide](../migrating-from-1x/adopt-new-features.md#reactrobloxact).
44
+
Used for testing code with scheduling logic mocked. This ensures that tests behave consistently and don't batch work unpredictably across frames. `act` executes a function and then plays forward the mock scheduler after it's done, and should be used to wrap any interactions that trigger updates to a React UI.
45
+
46
+
More info on using `act` can be found [in the migration guide](../migrating-from-legacy/adopt-new-features.md#reactrobloxact).
41
47
42
48
Refer to [ReactDOM's `act` testing documentation](https://reactjs.org/docs/test-utils.html#act) for more high-level guidance.
43
49
44
50
### Deviations
51
+
45
52
In production, `ReactRoblox.act` will not be available. Set the global value `_G.__ROACT_17_INLINE_ACT__` to `true` in order to enable this behavior in tests.
46
53
47
54
!!! info
48
-
This behavior is still a work in progress, and there may be changes to how Roact detects whether or not it should provide the `act` function. For now, use the global `__ROACT_17_INLINE_ACT__` to enable it for tests.
55
+
This behavior is still a work in progress, and there may be changes to how React Lua detects whether or not it should provide the `act` function. For now, use the global `__ROACT_17_INLINE_ACT__` to enable it for tests.
56
+
57
+
## `ReactRoblox.Event`
49
58
50
-
## ReactRoblox.Event
51
59
*Roact-only*
52
60
53
61
Re-exports [`React.Event`](react.md#reactevent). This is only exposed for backwards compatibility; please prefer to use `React.Event`.
54
62
55
-
## ReactRoblox.Change
63
+
## `ReactRoblox.Change`
64
+
56
65
*Roact-only*
57
66
58
67
Re-exports [`React.Change`](react.md#reactchange). This is only exposed for backwards compatibility; please prefer to use `React.Change`.
0 commit comments