Skip to content

Commit 685a4ff

Browse files
committed
Update docs to align better with community and our conventions
1 parent 3139ebf commit 685a4ff

File tree

13 files changed

+374
-265
lines changed

13 files changed

+374
-265
lines changed

docs/align-files-guide.md

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
# Aligning files guide
22

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.
44

55
## Prerequisites
66

77
In this guide we assume that you have the following project cloned inside of the common directory:
8+
89
* js-to-lua [repo link](https://github.com/roblox/js-to-lua)
910
* checkout `main` branch
10-
* roact-alignment [repo link](https://github.com/roblox/roact-alignment)
11-
* your working branch on top of `master` branch
11+
* react-lua [repo link](https://github.com/jsdotlua/react-lua)
12+
* your working branch on top of `main` branch
1213
* react [repo link](https://github.com/facebook/react)
1314
* checkout `v17.0.2` tag
1415

@@ -25,7 +26,7 @@ Depending on the size of the module and/or your preference you can either align
2526
```shell
2627
dist/apps/convert-js-to-lua/index.js \
2728
--input ../react/packages/react-devtools-shared/src/**/*.js \
28-
--output ../roact-alignment/modules/ \
29+
--output ../react-lua/modules/ \
2930
--rootDir ../react/packages \
3031
--plugin=knownImports --plugin=jestGlobals \
3132
--babelTransformConfig babel-flow-transform-react.config.json \
@@ -37,7 +38,7 @@ This will run the conversion on all the files in the `react-devtools-shared` whi
3738
```shell
3839
dist/apps/convert-js-to-lua/index.js \
3940
--input ../react/packages/react-devtools-shared/src/<path_to_a_js_file> \
40-
--output ../roact-alignment/modules/ \
41+
--output ../react-lua/modules/ \
4142
--rootDir ../react/packages \
4243
--plugin=knownImports --plugin=jestGlobals \
4344
--babelTransformConfig babel-flow-transform-react.config.json \
@@ -46,17 +47,17 @@ dist/apps/convert-js-to-lua/index.js \
4647

4748
eg.
4849

49-
```
50+
```shell
5051
dist/apps/convert-js-to-lua/index.js \
5152
--input ../react/packages/react-devtools-shared/src/utils.js \
52-
--output ../roact-alignment/modules/ \
53+
--output ../react-lua/modules/ \
5354
--rootDir ../react/packages \
5455
--plugin=knownImports --plugin=jestGlobals \
5556
--babelTransformConfig babel-flow-transform-react.config.json \
5657
--babelConfig babel-flow.config.json
5758
```
5859

59-
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.
6061

6162
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.
6263

@@ -81,7 +82,7 @@ As for the actual deviations that need to be marked let's look at the following
8182
![Bridge shutdown method's diff before marking a deviation](diff-bridge-shutdown-method-before.png)
8283
![Bridge shutdown method's diff after marking a deviation](diff-bridge-shutdown-method-after.png)
8384

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.
8586

8687
## Snippets
8788

@@ -95,6 +96,7 @@ In order to use the snippets you should configure a hot key (keyboard shortcut)
9596
* `deviation-start` and `deviation-end` - will only insert a proper deviation start/end comment. We use those to avoid typos.
9697

9798
There are couple more utility snippets for special cases that were occurring more often:
99+
98100
* `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
99101
* `deviation-line` and `deviation-line-skipped` are similar to their block equivalents but will use the current line instead of selected block of code
100102

docs/api-reference/react-roblox.md

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -10,50 +10,58 @@ Notable absences are:
1010
* `unmountComponentAtNode` - Use the `unmount` method on the root object returned from `createRoot` instead
1111
* `findDOMNode` - Use [refs](https://reactjs.org/docs/refs-and-the-dom.html) instead
1212

13-
## ReactRoblox.createRoot
13+
## `ReactRoblox.createRoot`
14+
1415
Adopted as part of the Concurrent Mode API. Refer to [`ReactDOM.createRoot` documentation](https://reactjs.org/docs/concurrent-mode-reference.html#createroot).
1516

16-
## ReactRoblox.createBlockingRoot
17+
## `ReactRoblox.createBlockingRoot`
18+
1719
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).
1820

19-
## ReactRoblox.createLegacyRoot
21+
## `ReactRoblox.createLegacyRoot`
22+
2023
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).
2124

2225
### Deviations
26+
2327
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:
2428

2529
* [String Refs](https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs)
2630
* [Legacy Context](https://reactjs.org/docs/legacy-context.html)
2731
* [findDOMNode](https://reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage)
2832

29-
**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.
3034

3135
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.
3236

33-
## ReactRoblox.createPortal
37+
## `ReactRoblox.createPortal`
38+
3439
Refer to [`ReactDOM.createPortal` documentation](https://reactjs.org/docs/portals.html).
3540

3641
<!-- 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`
3943

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).
4147

4248
Refer to [ReactDOM's `act` testing documentation](https://reactjs.org/docs/test-utils.html#act) for more high-level guidance.
4349

4450
### Deviations
51+
4552
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.
4653

4754
!!! 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`
4958

50-
## ReactRoblox.Event
5159
*Roact-only*
5260

5361
Re-exports [`React.Event`](react.md#reactevent). This is only exposed for backwards compatibility; please prefer to use `React.Event`.
5462

55-
## ReactRoblox.Change
63+
## `ReactRoblox.Change`
64+
5665
*Roact-only*
5766

5867
Re-exports [`React.Change`](react.md#reactchange). This is only exposed for backwards compatibility; please prefer to use `React.Change`.
59-

0 commit comments

Comments
 (0)