This repository has been archived by the owner. It is now read-only.
Permalink
Show file tree
Hide file tree
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Showing
16 changed files
with
265 additions
and
246 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -14,4 +14,5 @@ | ||
// "module": "commonjs", | ||
// "in-source": true, | ||
// }, | ||
"refmt": 3 | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,38 +1,36 @@ | ||
/* This is a stateful component. In ReasonReact, we call them reducer components */ | ||
|
||
/* A list of state transitions, to be used in self.reduce and reducer */ | ||
type action = | ||
| Tick; | ||
|
||
/* The component's state type. It can be anything, including, commonly, being a record type */ | ||
type state = { | ||
count: int, | ||
timerId: ref (option Js.Global.intervalId) | ||
timerId: ref(option(Js.Global.intervalId)) | ||
|
||
}; | ||
|
||
let component = ReasonReact.reducerComponent "Counter"; | ||
let component = ReasonReact.reducerComponent("Counter"); | ||
|
||
let make _children => { | ||
let make = (_children) => { | ||
...component, | ||
initialState: fun () => {count: 0, timerId: ref None}, | ||
reducer: fun action state => | ||
initialState: () => {count: 0, timerId: ref(None)}, | ||
reducer: (action, state) => | ||
|
||
switch action { | ||
| Tick => ReasonReact.Update {...state, count: state.count + 1} | ||
| Tick => ReasonReact.Update({...state, count: state.count + 1}) | ||
}, | ||
didMount: fun self => { | ||
didMount: (self) => { | ||
/* this will call `reduce` every second */ | ||
self.state.timerId := Some (Js.Global.setInterval (self.reduce (fun _ => Tick)) 1000); | ||
self.state.timerId := Some(Js.Global.setInterval(self.reduce((_) => Tick), 1000)); | ||
ReasonReact.NoUpdate | ||
}, | ||
willUnmount: fun {state} => { | ||
switch !state.timerId { | ||
| Some id => Js.Global.clearInterval id | ||
| _ => () | ||
} | ||
}, | ||
render: fun {state: {count}} => { | ||
willUnmount: ({state}) => | ||
switch state.timerId^ { | ||
| Some(id) => Js.Global.clearInterval(id) | ||
| _ => () | ||
}, | ||
render: ({state: {count}}) => { | ||
let timesMessage = count == 1 ? "second" : "seconds"; | ||
let greeting = {j|You've spent $count $timesMessage on this page!|j}; | ||
<div> (ReasonReact.stringToElement greeting) </div> | ||
<div> (ReasonReact.stringToElement(greeting)) </div> | ||
} | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1 @@ | ||
ReactDOMRe.renderToElementWithId <Counter /> "index"; | ||
ReactDOMRe.renderToElementWithId(<Counter />, "index"); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,18 +1,17 @@ | ||
/* ReactJS used by ReasonReact */ | ||
|
||
/* This component wraps a ReactJS one, so that ReasonReact components can consume it */ | ||
|
||
/* Typing the myBanner.js component's output as a `reactClass`. */ | ||
/* Note that this file's JS output is located at reason-react-example/lib/js/src/interop/myBannerRe.js; we're specifying the relative path to myBanner.js in the string below */ | ||
/* This isn't ideal; but if you turn on in-source js generation (check this file's bsconfig.json then you'd only need `"./MyBanner"`) */ | ||
external myBanner : ReasonReact.reactClass = "../../../../src/interop/MyBanner" [@@bs.module]; | ||
[@bs.module] external myBanner : ReasonReact.reactClass = "../../../../src/interop/MyBanner"; | ||
|
||
/* This is like declaring a normal ReasonReact component's `make` function, except the body is a the interop hook wrapJsForReason */ | ||
let make ::show ::message children => | ||
ReasonReact.wrapJsForReason | ||
reactClass::myBanner | ||
props::{ | ||
"show": Js.Boolean.to_js_boolean show, /* ^ don't forget to convert an OCaml bool into a JS boolean! */ | ||
let make = (~show, ~message, children) => | ||
ReasonReact.wrapJsForReason( | ||
~reactClass=myBanner, | ||
~props={ | ||
"show": Js.Boolean.to_js_boolean(show), /* ^ don't forget to convert an OCaml bool into a JS boolean! */ | ||
"message": message /* OCaml string maps to JS string, no conversion needed here */ | ||
} | ||
children; | ||
}, | ||
children | ||
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1 @@ | ||
ReactDOMRe.renderToElementWithId <Logo message="REASON REACT" /> "index"; | ||
ReactDOMRe.renderToElementWithId(<Logo message="REASON REACT" />, "index"); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,12 +1,14 @@ | ||
let toggle = ref false; | ||
let toggle = ref(false); | ||
|
||
let render () => { | ||
toggle := not toggle.contents; | ||
ReactDOMRe.renderToElementWithId | ||
<RetainedPropsExample message=(toggle.contents ? "Hello!" : "Goodbye") /> "index" | ||
let render = () => { | ||
toggle := ! toggle.contents; | ||
ReactDOMRe.renderToElementWithId( | ||
<RetainedPropsExample message=(toggle.contents ? "Hello!" : "Goodbye") />, | ||
"index" | ||
) | ||
}; | ||
|
||
Js.Global.setInterval render 1000; | ||
Js.Global.setInterval(render, 1000); | ||
|
||
/* render once first! */ | ||
render (); | ||
render(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1 @@ | ||
ReactDOMRe.renderToElementWithId <Page message="Hello!" /> "index"; | ||
ReactDOMRe.renderToElementWithId(<Page message="Hello!" />, "index"); |
Oops, something went wrong.
Too bad it's not using <> :(