Merge pull request #214 from reason-association/switch-to-rescript-react

ryyppy · web-flow · commit 13e33c85b5b1 · 2021-01-29T19:24:31.000+01:00
Switch to rescript react
diff --git a/bsconfig.json b/bsconfig.json
@@ -7,7 +7,7 @@
   },
   "refmt": 3,
   "bs-dependencies": [
-    "reason-react",
+    "@rescript/react",
     "bs-fetch",
     "@glennsl/bs-json",
     "@ryyppy/rescript-promise"
diff --git a/package.json b/package.json
@@ -29,7 +29,7 @@
     "prettier": "^1.18.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "reason-react": "^0.9.1",
+    "@rescript/react": "^0.10.1",
     "remark-parse": "^7.0.1",
     "remark-slug": "^5.1.2",
     "remark-stringify": "^7.0.3",
diff --git a/pages/docs/gentype/latest/introduction.mdx b/pages/docs/gentype/latest/introduction.mdx
@@ -9,7 +9,7 @@ canonical: "/docs/gentype/latest/introduction"
 `genType` is a code generation tool that lets you export ReScript values and types to use in JavaScript, and import JavaScript values and types into ReScript.
 
 Converter functions between the two representations are generated based on the type of the value. The converters can be generated in vanilla JavaScript, or in [TypeScript](https://www.typescriptlang.org/) / [Flow](https://flow.org/en/) for a type-safe idiomatic interface.
-In particular, conversion of [ReasonReact](https://reasonml.github.io/reason-react/) components both ways is supported, with automatic generation of the wrappers.
+In particular, conversion of [rescript-react](/docs/react/latest/introduction) components both ways is supported, with automatic generation of the wrappers.
 
 Here's an article describing how to use `genType` as part of a migration strategy where a tree of components is gradually converted to ReScript bottom-up (old article containing Reason / BuckleScript): [Adopting Reason: strategies, dual sources of truth, and why genType is a big deal](https://medium.com/p/c514265b466d).
 
@@ -22,13 +22,13 @@ The output of genType can be configured by using one of 3 back-ends: `untyped` t
 
 ## A Quick Example
 
-Let's assume we are working on a TypeScript (TS) codebase and we want to integrate a single ReasonReact component.
+Let's assume we are working on a TypeScript (TS) codebase and we want to integrate a single rescript-react component.
 
-We want to be able to import the ReasonReact component like any other React component in our existing TS code, but we also want to preserve all the ReScript types in the TS type system (and convert incompatible values if necessary).
+We want to be able to import the rescript-react component like any other React component in our existing TS code, but we also want to preserve all the ReScript types in the TS type system (and convert incompatible values if necessary).
 
 **That's exactly what genType was made for!**
 
-First we'll set up a ReasonReact component:
+First we'll set up a rescript-react component:
 
 ```res
 /* src/MyComp.res */
diff --git a/pages/docs/gentype/latest/supported-types.mdx b/pages/docs/gentype/latest/supported-types.mdx
@@ -117,7 +117,7 @@ In case of mixed named and unnamed arguments, consecutive named arguments form s
 
 Function components are exported and imported exactly like normal functions. For example:
 
-```reaspn
+```reason
 [@genType]
 [@react.component]
 let make = (~name) => React.string(name);
diff --git a/pages/docs/gentype/latest/usage.mdx b/pages/docs/gentype/latest/usage.mdx
@@ -73,6 +73,8 @@ To import nested values, e.g. `Some.Nested.value`, use e.g. `@genType.import((".
 
 ## Export and Import React Components Using Deprecated Record API
 
+**Important:** This section is only relevant for legacy [reason-react](https://github.com/reasonml/reason-react) codebases.
+
 To export a ReasonReact component to JS, and automatically generate a wrapper for it, simply annotate the `make` function:
 
 ```res
diff --git a/pages/docs/manual/latest/installation.mdx b/pages/docs/manual/latest/installation.mdx
@@ -30,7 +30,7 @@ That compiles your ReScript into JavaScript, then uses NodeJS to run said JavaSc
 
 During development, instead of running `npm run build` each time to compile, use `npm run start` to start a watcher that recompiles automatically after file changes.
 
-Alternatively, **to start a [ReasonReact](https://reasonml.github.io/reason-react/en/) app**, follow the instructions [here](https://reasonml.github.io/reason-react/docs/en/installation).
+Alternatively, **to start a [rescript-react](/docs/react/latest/introduction) app**, follow the instructions [here](/docs/react/latest/installation).
 
 ## Integrate Into Existing JS Project
 
@@ -89,20 +89,20 @@ You may also like to add two scripts to your `package.json` to help with compili
 
 If you would like to enable React in your ReScript code, use the following additional steps:
 
-Install [Reason React](https://reasonml.github.io/reason-react/en/).
+Install [rescript-react](/docs/react/latest/introduction). Here's the quick version:
 
 ```sh
-npm install reason-react
+npm install @rescript/react --save
 ```
 
 Make the following changes to your `bsconfig.json` file:
 
 ```json
 "reason": { "react-jsx": 3 },
-"bs-dependencies": ["reason-react"],
+"bs-dependencies": ["@rescript/react"],
 ```
 
-### Using the compiled code
+### Integration with the Existing Code
 
 Since ReScript compiles to clean readable JS files the rest of your existing toolchain (e.g. Babel and Webpack) should just work.
 
diff --git a/pages/docs/manual/latest/jsx.mdx b/pages/docs/manual/latest/jsx.mdx
@@ -1,6 +1,6 @@
 ---
 title: "JSX"
-description: "JSX syntax in ReScript and ReasonReact"
+description: "JSX syntax in ReScript and React"
 canonical: "/docs/manual/latest/jsx"
 ---
 
diff --git a/pages/docs/manual/v8.0.0/jsx.mdx b/pages/docs/manual/v8.0.0/jsx.mdx
@@ -1,6 +1,6 @@
 ---
 title: "JSX"
-description: "JSX syntax in ReScript and ReasonReact"
+description: "JSX syntax in ReScript and React"
 canonical: "/docs/manual/latest/jsx"
 ---
 
diff --git a/pages/docs/react/latest/beyond-jsx.mdx b/pages/docs/react/latest/beyond-jsx.mdx
@@ -56,7 +56,7 @@ module Friend = {
 ```
 ```res
 module Friend = {
-  [@bs.obj]
+  @obj
   external makeProps: (
     ~name: string,
     ~children: 'children,
@@ -99,7 +99,7 @@ module FancyInput = {
 ```res
 // Simplified Output
 module FancyInput = {
-  @bs.obj
+  @obj
   external makeProps: (
     ~className: 'className=?,
     ~children: 'children,
diff --git a/pages/docs/react/latest/components-and-props.mdx b/pages/docs/react/latest/components-and-props.mdx
@@ -330,14 +330,14 @@ var make = App;
 
 You don't need to use the `@react.component` decorator to write components that can be used in JSX. Instead you can write a pair of `make` and `makeProps` functions such that type `makeProps: 'a => props` and `make: props => React.element` and these will always work as React components.
 
-This works with your own version of `[@bs.obj]`, or any other function that takes named args and returns a single props structure. For example:
+This works with your own version of `@obj`, or any other function that takes named args and returns a single props structure. For example:
 
 <CodeTab labels={["ReScript", "JS Output"]}>
 
 ```res
 module Link = {
   type props = {"href": string, "children": React.element};
-  @bs.obj external makeProps:(
+  @obj external makeProps:(
     ~href: string,
     ~children: React.element,
     unit) => props = ""
@@ -406,19 +406,19 @@ Because components are actually a pair of functions, they have to belong to a mo
 
 
 ```res
-// File.re
+// File.res
 
 // will be named `File` in dev tools
-[@react.component]
+@react.component
 let make = ...
 
 // will be named `File$component` in dev tools
-[@react.component]
+@react.component
 let component = ...
 
 module Nested = {
   // will be named `File$Nested` in dev tools
-  [@react.component]
+  @react.component
   let make = ...
 };
 ```
diff --git a/pages/docs/react/latest/hooks-effect.mdx b/pages/docs/react/latest/hooks-effect.mdx
@@ -68,7 +68,7 @@ React.useEffect((function () { }), [ prop1, prop2, prop3 ]);
 
 </CodeTab>
 
-`React.useEffect` receives a function that contains imperative, possibly effectful code, and returns a value `option(unit => unit)` as a potential cleanup function. 
+`React.useEffect` receives a function that contains imperative, possibly effectful code, and returns a value `option<unit => unit>` as a potential cleanup function. 
 
 A `useEffect` call may receive an additional array of dependencies (see `React.useEffect1` / `React.useEffect2...7`). The effect function will run whenever one of the provided dependencies has changed. More details on why this is useful [down below](#effect-dependencies).
 
diff --git a/pages/docs/react/latest/installation.mdx b/pages/docs/react/latest/installation.mdx
@@ -6,24 +6,23 @@ canonical: "/docs/react/latest/installation"
 
 # Installation
 
-<Warn>
+**Requirements:** 
 
-**Important:** The `rescript-react` npm package has not been released yet. Please stay tuned for further announcements!
-
-</Warn>
+- `bs-platfrom@8.3` or later 
+- `react@16.8.1` or later
 
 Add following dependency to your ReScript project (in case you don't have any project yet, check out the [installation instructions](/docs/manual/latest/installation) in the manual):
 
 ```
-npm install @rescript/rescript-react --save
+npm install @rescript/react --save
 ```
 
 Then add the following setting to your existing `bsconfig.json`:
 
 ```json
 {
   "reason": { "react-jsx": 3 },
-  "bs-dependencies": ["@rescript/rescript-react"]
+  "bs-dependencies": ["@rescript/react"]
 }
 ```
 
@@ -37,11 +36,11 @@ let make = () => {
 }
 ```
 
-Now rerun your build with `bsb -make-world` and you should see a successful build.
+Now run `npx bsb -make-world` and you should see a successful build.
 
 ## Exposed Modules 
 
-After a successful installation, `rescript-react` will make following modules available in your project's global scope:
+After a successful installation, `@rescript/react` will make following modules available in your project's global scope:
 
 - `React`: Bindings to React
 - `ReactDOM`: Bindings to the ReactDOM
diff --git a/pages/docs/react/latest/introduction.mdx b/pages/docs/react/latest/introduction.mdx
@@ -4,26 +4,26 @@ description: "Introduction to ReScript & ReactJS"
 canonical: "/docs/react/latest/introduction"
 ---
 
-# Introduction
+# ReScript & React
 
-ReScript offers first class bindings for [ReactJS](https://reactjs.org) and are designed and built by people using ReScript and React in large, mission critical production React codebases. The bindings are compatible with all React versions > 17.
+ReScript offers first class bindings for [ReactJS](https://reactjs.org) and are designed and built by people using ReScript and React in large mission critical React codebases. The bindings are compatible with modern React versions (>= v16.8).
 
 The ReScript philosophy is to compile as closely to idiomatic JS code as possible; in case of ReactJS we made no exception, so it's not only easy to transfer all the React knowledge to the ReScript platform, but also straightorward to integrate with existing ReactJS codebases and libraries.
 
 All our documentated examples can be compiled in our [ReScript Playground](/try) as well.
 
-> **This documentation assumes basic knowledge about ReactJS.**
->
-> Please note that even though we will cover many basic React concepts, it might still be necessary to have a look at the official [ReactJS](https://reactjs.org) resources, especially if you are a complete beginner with React.
-
 ## Feature Overview
 
-- No Babel plugins needed (JSX is part of the language!)
-- Bindings for all important React APIs needed to build production ready apps (`useState`, `useReducer`, `useEffect`, `useRef`,...)
-- No class based component API legacy (all ReScript & React codebases are built on functional components & hooks)
+- No Babel plugins required (JSX is part of the language!)
+- Comes with all essential React APIs for building production ready apps (`useState`, `useReducer`, `useEffect`, `useRef`,...)
+- No component class API (all ReScript & React codebases are built on functional components & hooks)
 - Strong level of type safetiness and type inference for component props and state values
 - [GenType](/docs/gentype/latest/introduction) support for importing / exporting React components in Flow and TypeScript codebases
 
+> **This documentation assumes basic knowledge about ReactJS.**
+>
+> Please note that even though we will cover many basic React concepts, it might still be necessary to have a look at the official [ReactJS](https://reactjs.org) resources, especially if you are a complete beginner with React.
+
 ## Development
 
  - In case you are having any issues or if you want to help us out improving our bindings, check out our [rescript-react Github repository](https://github.com/rescript-lang/rescript-react).
diff --git a/src/DocsOverview.js b/src/DocsOverview.js
diff --git a/src/DocsOverview.res b/src/DocsOverview.res
@@ -35,8 +35,8 @@ let default = (~showVersionSelect=true) => {
 
   let ecosystem = [
     ("Package Index", "/packages"),
+    ("rescript-react", "/docs/react/latest/introduction"),
     ("GenType", "/docs/gentype/latest/introduction"),
-    ("rescript-react (coming soon)", "/docs/react/latest/introduction"),
     ("Reanalyze", "https://github.com/reason-association/reanalyze"),
   ]
   let tools = [("Syntax Lookup", "/syntax-lookup")]
diff --git a/yarn.lock b/yarn.lock
@@ -1374,6 +1374,11 @@
   resolved "https://registry.yarnpkg.com/@octokit/graphql-schema/-/graphql-schema-7.7.1.tgz#47b541a68ce5f3a6de3c02534b012696702ca658"
   integrity sha512-Wj0WYFRiqTeD/F5WGtXShsEnnAdfDfwB/Gq2rxsntKg/LintKxECFYNMV5wLVOLLNaXBc1f2q8AXHGxQyEbPKg==
 
+"@rescript/react@^0.10.1":
+  version "0.10.1"
+  resolved "https://registry.yarnpkg.com/@rescript/react/-/react-0.10.1.tgz#ddce66ba664a104354d559c350ca4ebf17ab5a26"
+  integrity sha512-5eIfGnV1yhjv03ktK6fQ6iEfsZKXKXXrq5hx4+ngEY4R/RU8o/oH9ne375m9RJMugV/jsE8hMoEeSSg2YQy3Ag==
+
 "@ryyppy/rescript-promise@^0.0.2":
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/@ryyppy/rescript-promise/-/rescript-promise-0.0.2.tgz#9b9dccd724b40b7836e52158bc34deed8a75dddf"
@@ -6618,11 +6623,6 @@ reanalyze@^2.5.0:
   resolved "https://registry.yarnpkg.com/reanalyze/-/reanalyze-2.10.0.tgz#bba9a73cc75c8c9ade6d1e993e3ccbff85dcd06b"
   integrity sha512-FJYDBOV7QNEeCco+lJxSYwc62BMTbR/CAEons5dccDZY7H9nBuVPN/uL0O2fbMGgELGU4yOUnaJSrWxe8c5rBA==
 
-reason-react@^0.9.1:
-  version "0.9.1"
-  resolved "https://registry.yarnpkg.com/reason-react/-/reason-react-0.9.1.tgz#30a887158200b659aa03e2d75ff4cc54dc462bb0"
-  integrity sha512-nlH0O2TDy9KzOLOW+vlEQk4ExHOeciyzFdoLcsmmiit6hx6H5+CVDrwJ+8aiaLT/kqK5xFOjy4PS7PftWz4plA==
-
 reduce-css-calc@^2.1.6:
   version "2.1.7"
   resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-2.1.7.tgz#1ace2e02c286d78abcd01fd92bfe8097ab0602c2"
