Migrate to Core

Author: aspeddro

misc_docs/syntax/decorator_module.mdx

@@ -36,7 +36,7 @@ var root = Path.dirname("/User/github");
 <CodeTab labels={["ReScript", "JS Output (Module)"]}>
 ```rescript
 @module({from: "./myJson.json", with: {type_: "json", \"some-exotic-identifier": "someValue"}})
-external myJson: Js.Json.t = "default"
+external myJson: JSON.t = "default"
 
 Console.log(myJson)
 ```

pages/docs/manual/latest/primitive-types.mdx

@@ -180,7 +180,7 @@ As `bigint` is a different data type than `int`, it's necessary to open the corr
 <CodeTab labels={["ReScript", "JS Output"]}>
 
 ```res example
-open! Js.BigInt
+open! BigInt
 
 let a = 9007199254740991n + 9007199254740991n
 let b = 2n ** 2n
@@ -198,7 +198,7 @@ It also supports all the bitwise operations, except unsigned shift right (`>>>`)
 <CodeTab labels={["ReScript", "JS Output"]}>
 
 ```res example
-open! Js.BigInt
+open! BigInt
 
 let a = land(1n, 1n)
 let b = lor(1n, 1n)

pages/docs/react/latest/beyond-jsx.mdx

@@ -99,7 +99,7 @@ type props<'className, 'children, 'ref> = {
 
 let make = (
   {?className, children, _}: props<'className, 'children, ReactRef.currentDomRef>,
-  ref: Js.Nullable.t<ReactRef.currentDomRef>,
+  ref: Nullable.t<ReactRef.currentDomRef>,
 ) =>
   make(~className, ~children, ~ref, ())
 ```

pages/docs/react/latest/forwarding-refs.mdx

@@ -56,12 +56,12 @@ module FancyInput = {
 
 @react.component
 let make = () => {
-  let input = React.useRef(Js.Nullable.null)
+  let input = React.useRef(Nullable.null)
 
   let focusInput = () =>
     input.current
-    ->Js.Nullable.toOption
-    ->Belt.Option.forEach(input => input->focus)
+    ->Nullable.toOption
+    ->Option.forEach(input => input->focus)
 
   let onClick = _ => focusInput()
 
@@ -96,7 +96,7 @@ module FancyInput = {
       <input
         type_="text"
         ?className
-        ref=?{Js.Nullable.toOption(ref)->Belt.Option.map(ReactDOM.Ref.domRef)}
+        ref=?{Nullable.toOption(ref)->Option.map(ReactDOM.Ref.domRef)}
       />
       children
     </div>
@@ -107,10 +107,10 @@ module FancyInput = {
 
 @react.component
 let make = () => {
-  let input = React.useRef(Js.Nullable.null)
+  let input = React.useRef(Nullable.null)
 
   let focusInput = () =>
-    input.current->Js.Nullable.toOption->Belt.Option.forEach(input => input->focus)
+    input.current->Nullable.toOption->Option.forEach(input => input->focus)
 
   let onClick = _ => focusInput()
 

pages/docs/react/latest/hooks-reducer.mdx

@@ -125,13 +125,13 @@ type state = {
 let reducer = (state, action) =>
   switch action {
   | AddTodo(content) =>
-    let todos = Js.Array2.concat(
+    let todos = Array.concat(
       state.todos,
       [{id: state.nextId, content: content, completed: false}],
     )
     {todos: todos, nextId: state.nextId + 1}
   | RemoveTodo(id) =>
-    let todos = Js.Array2.filter(state.todos, todo => todo.id !== id)
+    let todos = Array.filter(state.todos, todo => todo.id !== id)
     {...state, todos: todos}
   | ToggleTodo(id) =>
     let todos = Belt.Array.map(state.todos, todo =>

pages/docs/react/latest/hooks-ref.mdx

@@ -56,12 +56,12 @@ More infos on direct DOM manipulation can be found in the [Refs and the DOM](./r
 
 @react.component
 let make = () => {
-  let inputEl = React.useRef(Js.Nullable.null)
+  let inputEl = React.useRef(Nullable.null)
 
   let onClick = _ => {
     inputEl.current
-    ->Js.Nullable.toOption
-    ->Belt.Option.forEach(input => input->focus)
+    ->Nullable.toOption
+    ->Option.forEach(input => input->focus)
   }
 
   <>
@@ -104,15 +104,15 @@ Reusing the example from our [Refs and the DOM](./refs-and-the-dom#callback-refs
 
 @react.component
 let make = () => {
-  let textInput = React.useRef(Js.Nullable.null)
+  let textInput = React.useRef(Nullable.null)
   let setTextInputRef = element => {
     textInput.current = element;
   }
 
   let focusTextInput = _ => {
     textInput.current
-    ->Js.Nullable.toOption
-    ->Belt.Option.forEach(input => input->focus)
+    ->Nullable.toOption
+    ->Option.forEach(input => input->focus)
   }
 
   <div>

pages/docs/react/latest/lazy-components.mdx

@@ -33,12 +33,12 @@ Now we can dynamically import the `<Title/>` component by passing the result of
 ```rescript
 // SomeOtherFile.res
 module LazyTitle = {
-  let make = React.lazy_(() => Js.import(Title.make))
+  let make = React.lazy_(() => import(Title.make))
 }
 
 let titleJsx = <LazyTitle text="Hello!" />
 ```
 
 That's all the code we need! The new `<LazyTitle />` component behaves exactly the same as the wrapped `<Title />` component, but will be lazy loaded via React's built-in lazy mechanism.
 
-> You can read more about `Js.import` and dynamic import in ReScript in [this part of the documentation](/docs/manual/latest/import-from-export-to-js#dynamic-import).
+> You can read more about `import` and dynamic import in ReScript in [this part of the documentation](/docs/manual/latest/import-from-export-to-js#dynamic-import).

pages/docs/react/latest/migrate-react.mdx

@@ -148,7 +148,7 @@ module FancyInput = {
       <input
         type_="text"
         ?className
-        ref=?{ref_->Js.Nullable.toOption->Belt.Option.map(ReactDOM.Ref.domRef)}
+        ref=?{ref_->Nullable.toOption->Option.map(ReactDOM.Ref.domRef)}
       />
       children
     </div>
@@ -157,7 +157,7 @@ module FancyInput = {
 
 @react.component
 let make = () => {
-  let input = React.useRef(Js.Nullable.null)
+  let input = React.useRef(Nullable.null)
 
   <div>
     <FancyInput ref=input> // prop
@@ -181,7 +181,7 @@ module FancyInput = {
       <input
         type_="text"
         ?className
-        ref=?{ref->Js.Nullable.toOption->Belt.Option.map(ReactDOM.Ref.domRef)}
+        ref=?{ref->Nullable.toOption->Option.map(ReactDOM.Ref.domRef)}
       />
       children
     </div>
@@ -190,7 +190,7 @@ module FancyInput = {
 
 @react.component
 let make = () => {
-  let input = React.useRef(Js.Nullable.null)
+  let input = React.useRef(Nullable.null)
 
   <div>
     <FancyInput ref=input>

pages/docs/react/latest/refs-and-the-dom.mdx

@@ -64,7 +64,7 @@ let value = myRef.current
 ```
 
 The value of the ref differs depending on the type of the node:
-- When the ref attribute is used on an HTML element, the ref passed via `ReactDOM.Ref.domRef` receives the underlying DOM element as its current property (type of `React.ref<Js.Nullable.t<Dom.element>>`)
+- When the ref attribute is used on an HTML element, the ref passed via `ReactDOM.Ref.domRef` receives the underlying DOM element as its current property (type of `React.ref<Nullable.t<Dom.element>>`)
 - In case of interop, when the ref attribute is used on a custom class component (based on JS classes), the ref object receives the mounted instance of the component as its current (not discussed in this document).
 - **You may not use the ref attribute on component functions** because they don’t have instances (we don't expose JS classes in ReScript).
 
@@ -83,10 +83,10 @@ This code uses a `React.ref` to store a reference to an `input` DOM node to put
 
 @react.component
 let make = () => {
-  let textInput = React.useRef(Js.Nullable.null)
+  let textInput = React.useRef(Nullable.null)
 
   let focusInput = () =>
-    switch textInput.current->Js.Nullable.toOption {
+    switch textInput.current->Nullable.toOption {
     | Some(dom) => dom->focus
     | None => ()
     }
@@ -126,7 +126,7 @@ function CustomTextInput(Props) {
 
 A few things happened here, so let's break them down:
 
-- We initialize our `textInput` ref as a `Js.Nullable.null`
+- We initialize our `textInput` ref as a `Nullable.null`
 - We register our `textInput` ref in our `<input>` element with `ReactDOM.Ref.domRef(textInput)`
 - In our `focusInput` function, we need to first verify that our DOM element is set, and then use the `focus` binding to set the focus
 
@@ -148,7 +148,7 @@ module MyComp = {
 
 @react.component
 let make = () => {
-  let textInput = React.useRef(Js.Nullable.null)
+  let textInput = React.useRef(Nullable.null)
 
   // This will **not** work
   <MyComp ref={ReactDOM.Ref.domRef(textInput)} />
@@ -193,15 +193,15 @@ The example below implements a common pattern: using the ref callback to store a
 
 @react.component
 let make = () => {
-  let textInput = React.useRef(Js.Nullable.null)
+  let textInput = React.useRef(Nullable.null)
   let setTextInputRef = element => {
     textInput.current = element;
   }
 
   let focusTextInput = _ => {
     textInput.current
-    ->Js.Nullable.toOption
-    ->Belt.Option.forEach(input => input->focus)
+    ->Nullable.toOption
+    ->Option.forEach(input => input->focus)
   }
 
   <div>
@@ -261,7 +261,7 @@ module CustomTextInput = {
 
 @react.component
 let make = () => {
-  let textInput = React.useRef(Js.Nullable.null)
+  let textInput = React.useRef(Nullable.null)
   let setInputRef = element => { textInput.current = element}
 
   <CustomTextInput setInputRef/>