Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add package READMEs #3

Merged
merged 8 commits into from
Apr 8, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions packages/react-debug-tools/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
# `react-debug-tools`

This is an experimental package for debugging React renderers.

**Its API is not as stable as that of React, React Native, React DOM, or React Roblox, and does not follow the common versioning scheme.**

**Use it at your own risk.**
106 changes: 106 additions & 0 deletions packages/react-is/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
# `react-is`

**NOTE:** This README is copied directly from React upstream.

This package allows you to test arbitrary values and see if they're a particular React element type.

## Installation

```sh
# Yarn
yarn add react-is

# NPM
npm install react-is
```

## Usage

### Determining if a Component is Valid

```js
import React from "react";
import * as ReactIs from "react-is";

class ClassComponent extends React.Component {
render() {
return React.createElement("div");
}
}

const FunctionComponent = () => React.createElement("div");

const ForwardRefComponent = React.forwardRef((props, ref) =>
React.createElement(Component, { forwardedRef: ref, ...props })
);

const Context = React.createContext(false);

ReactIs.isValidElementType("div"); // true
ReactIs.isValidElementType(ClassComponent); // true
ReactIs.isValidElementType(FunctionComponent); // true
ReactIs.isValidElementType(ForwardRefComponent); // true
ReactIs.isValidElementType(Context.Provider); // true
ReactIs.isValidElementType(Context.Consumer); // true
ReactIs.isValidElementType(React.createFactory("div")); // true
```

### Determining an Element's Type

#### Context

```js
import React from "react";
import * as ReactIs from 'react-is';

const ThemeContext = React.createContext("blue");

ReactIs.isContextConsumer(<ThemeContext.Consumer />); // true
ReactIs.isContextProvider(<ThemeContext.Provider />); // true
ReactIs.typeOf(<ThemeContext.Provider />) === ReactIs.ContextProvider; // true
ReactIs.typeOf(<ThemeContext.Consumer />) === ReactIs.ContextConsumer; // true
```

#### Element

```js
import React from "react";
import * as ReactIs from 'react-is';

ReactIs.isElement(<div />); // true
ReactIs.typeOf(<div />) === ReactIs.Element; // true
```

#### Fragment

```js
import React from "react";
import * as ReactIs from 'react-is';

ReactIs.isFragment(<></>); // true
ReactIs.typeOf(<></>) === ReactIs.Fragment; // true
```

#### Portal

```js
import React from "react";
import ReactDOM from "react-dom";
import * as ReactIs from 'react-is';

const div = document.createElement("div");
const portal = ReactDOM.createPortal(<div />, div);

ReactIs.isPortal(portal); // true
ReactIs.typeOf(portal) === ReactIs.Portal; // true
```

#### StrictMode

```js
import React from "react";
import * as ReactIs from 'react-is';

ReactIs.isStrictMode(<React.StrictMode />); // true
ReactIs.typeOf(<React.StrictMode />) === ReactIs.StrictMode; // true
```
339 changes: 339 additions & 0 deletions packages/react-reconciler/README.md

Large diffs are not rendered by default.

25 changes: 25 additions & 0 deletions packages/react-roblox/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
# `react-roblox`

This package serves as a Roblox renderer for React. It is intended to be paired with the generic React package, which is shipped as `core-packages/react` to Wally.

## Usage

```lua
local React = require(Path.To.React)
local ReactRoblox = require(Path.To.ReactRoblox)

local function App()
return React.createElement("TextLabel", {
Text = "Hello, world!"
})
end

local element = React.createElement(App)

local root = ReactRoblox.createRoot(Instance.new("Folder"))
root:render(ReactRoblox.createPortal(element, playerGui))
```

## API

TODO
45 changes: 45 additions & 0 deletions packages/react/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
# `react`

React is a library for creating user interfaces.

The `react` package contains only the functionality necessary to define React components. It is typically used together with a React renderer like `react-roblox`.

## Usage

```lua
local React = require(Path.To.React)
local ReactRoblox = require(Path.To.ReactRoblox)

local e = React.createElement
local useState = React.useState

local function Counter()
local count, setCount = useState(0)

return e("Frame", {}, {
CurrentCount = e("TextLabel", {
Text = count,
...
}),
IncrementButton = e("TextButton", {
Text = "Increment",
...,

[React.Event.Activated] = function()
setCount(count + 1)
end
})
})
end

local root = ReactRoblox.createRoot(Instance.new("Folder"))
root:render(ReactRoblox.createPortal(e(Counter), playerGui))
```

## Documentation

See https://react.dev/

## API

See https://react.dev/reference/react
7 changes: 7 additions & 0 deletions packages/roact-compat/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
# `roact-compat`

This package serves as a compatibility bridge between `react` and legacy [`Roact`](https://github.com/Roblox/roact). It can be used when migrating an existing codebase to React, but new code shouldn't use this package.

## API

TODO
5 changes: 5 additions & 0 deletions packages/scheduler/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
# `scheduler`

This is a package for cooperative scheduling in a Lua environment. It is currently used internally by React, but we plan to make it more generic.

The public API for this package is not yet finalized.