		@@ -11,3 +11,3 @@ ---

		### Not Reading Into `self`
		### Without Reading From `self`

		@@ -19,3 +19,3 @@ _Reminder: `self` is ReasonReact's `this`. It's a record that contains things like `state`, `send` and others._
		```reason
		let component = ...;
		let component = /* ... */;

		@@ -28,3 +28,3 @@ let make = (~name, ~onClick, _children) => {

		No surprise here. Since Reason's JSX has [punning syntax](https://reasonml.github.io/docs/en/jsx.html), that `button` will format into `<button onClick />`.
		No surprise here. Since Reason's JSX has [punning syntax](https://reasonml.github.io/docs/en/jsx.html#punning), that `button` will format into `<button onClick />`.

		@@ -34,3 +34,3 @@ Similarly, to pre-process a value before sending it back to the component's owner:
		```reason
		let component = ...;
		let component = /* ... */;

		@@ -46,3 +46,3 @@ let make = (~name, ~onClick, _children) => {

		### Reading Into `self`
		### Reading From `self`

		@@ -52,3 +52,4 @@ To access `state`, `send` and the other items in `self` from a callback, you need to wrap the callback in an extra layer called `self.handle`:
		```reason
		let component = ...;
		let component = /* ... */;

		let make = (~name, ~onClick, _children) => {
		@@ -61,3 +62,3 @@ let click = (event, self) => {
		...component,
		initialState: ...,
		initialState: /* ... */,
		render: (self) => <button onClick={self.handle(click)} />
		@@ -64,0 +65,0 @@ }

docs/component-as-prop.md

		@@ -5,3 +5,3 @@ ---

		In ReactJS, `<Menu banner=MyBanner />` is easy; in ReasonReact, we can't trivially pass the whole component module (it wouldn't even be syntactically valid. A module resides in another layer of language. [Explanations](https://reasonml.github.io/docs/en/module.html)). Solution:
		In ReactJS, `<Menu banner=MyBanner />` is easy; in ReasonReact, we can't trivially pass the whole component module (it wouldn't even be syntactically valid because a module resides in [another layer of the language](https://reasonml.github.io/docs/en/module.html)). Solution:

		@@ -8,0 +8,0 @@ ```reason

docs/creation-props-self.md

		@@ -51,3 +51,3 @@ ---

		Props are just the labeled arguments of the `make` function, seen above. They can also be optional and/or have defaults, e.g. `let make = (~name, ~age=?, ~className="box", _children) => ...`.
		Props are just the labeled arguments of the `make` function, seen above. They can also be optional and/or have defaults, e.g. `let make = (~name, ~age=?, ~className="box", _children) => /* ... */`.

		@@ -70,14 +70,14 @@ The last prop must be `children`. If you don't use it, simply ignore it by naming it `_` or `_children`. Names starting with underscore don't trigger compiler warnings if they're unused.

		In Reason, if you want to explicitly pass an optional `ageFromProps` (whose type is `option int`, aka `None \| Some int`), the following wouldn't work:
		In Reason, if you want to explicitly pass an optional `myAge` (whose type is `option(int)`, aka `None \| Some(int)`), the following wouldn't work:

		```reason
		<Foo name="Reason" age=ageFromProps />
		<Foo name="Reason" age=myAge />
		```

		Because `age` expects a normal `int` when you do call `Foo` with it, not an `option int`! Naively, you'd be forced to solve this like so:
		Because the `age` label expects a normal `int` when you do call `Foo` with it, not an `option(int)`! Naively, you'd be forced to solve this like so:

		```reason
		switch (ageFromProps) {
		switch (myAge) {
		\| None => <Foo name="Reason" />
		\| Some(nonNullableAge) => <Foo name="Reason" age=nonNullableAge />
		\| Some(nonOptionalAge) => <Foo name="Reason" age=nonOptionalAge />
		}
		@@ -89,7 +89,9 @@ ```
		```reason
		<Foo name="Reason" age=?ageFromProps />
		<Foo name="Reason" age=?myAge />
		```

		It says "I understand that `age` is optional and that when I use the label I should pass an int. But I'd like to forward an `option` value explicitly". This isn't a JSX trick we've made up; it's just a language feature! See the section on "Explicitly Passed Optional" in the [Reason docs](https://reasonml.github.io/docs/en/function.html#explicitly-passed-optional).
		It says "I understand that `myAge` is optional and that I should either use the label `age` and pass an `int`, or not use the label at all. But I'd like to forward an `option`al value explicitly to avoid the verbose `switch`".

		This isn't a JSX trick we've made up; it's just a language feature! See the section on "Explicitly Passed Optional" in the [Reason docs](https://reasonml.github.io/docs/en/function.html#explicitly-passed-optional).

		## `self`
		@@ -96,0 +98,0 @@

docs/custom-class-component-property.md

		@@ -30,4 +30,4 @@ ---
		```reason
		let component = ...;
		let make = ...;
		let component = /* ... */;
		let make = /* ... */;

		@@ -34,0 +34,0 @@ let getRandomNumber = () => 4;

docs/dom.md

		@@ -16,8 +16,8 @@ ---
		- `createElementVariadic`: same as above, but a less performant version, used when there's a children spread and not a static array at the call site: `<div>...myChildren</div>`.
		- `domElementToObj` : `Dom.element => Js.t({..})`: turns a DOM element into a Js object whose fields that you can dangerously access. Usually not needed
		- `domElementToObj` : `Dom.element => Js.t({..})`: turns a DOM element into a Js object whose fields you can dangerously access. Usually not needed

		And 4 convenience utilities:

		- `renderToElementWithClassName` : `(ReasonReact.reactElement, string) => unit`: finds the (first) element of the provided class name and `render` to it.
		- `renderToElementWithId` : `(ReasonReact.reactElement, string) => unit`: finds the element of the provided id and `render` to it.
		- `renderToElementWithClassName` : `(ReasonReact.reactElement, string) => unit`: finds the (first) element with the provided class name and `render` to it.
		- `renderToElementWithId` : `(ReasonReact.reactElement, string) => unit`: finds the element with the provided id and `render` to it.
		- `hydrateToElementWithClassName`, `hydrateToElementWithId`: same.
		@@ -24,0 +24,0 @@

docs/element-type-is-invalid.md

		@@ -18,3 +18,3 @@ ---
		```reason
		[@bs.module] external myJSReactClass : ReasonReact.reactClass = "./myJSReactClass";
		[@bs.module] external myJSReactClass: ReasonReact.reactClass = "./myJSReactClass";
		```
		@@ -25,5 +25,5 @@
		```reason
		[@bs.module "./myJSReactClass"] external myJSReactClass : ReasonReact.reactClass = "default";
		[@bs.module "./myJSReactClass"] external myJSReactClass: ReasonReact.reactClass = "default";
		```

		Remember that Reason doesn't have runtime type errors! So it _must_ have meant that your binding was written wrongly.

docs/installation.md

		@@ -5,10 +5,6 @@ ---

		Note: for general Reason + BuckleScript editor setup, see [here](https://reasonml.github.io/docs/en/global-installation.html).
		Note: for general Reason + BuckleScript editor setup, see [here](https://reasonml.github.io/docs/en/editor-plugins).

		To easily try ReasonReact, we offer two solutions.

		## Bsb

		Our preferred option. If it's your first time trying ReasonReact, feel free to use the more familiar create-react-app option below, too.

		```sh
		@@ -25,7 +21,1 @@ npm install -g bs-platform
		It compiles to straightforward JS files, so you can open `index.html` directly from the file system. No server needed.

		## Reason Scripts (Aka Create-React-App)

		[Reason-scripts](https://github.com/reasonml-community/reason-scripts) provides a familiar experience to the ReactJS users who are already familiar with [create-react-app](https://github.com/facebookincubator/create-react-app). It's an all-encompassing solution. However, if it's too heavy for your taste, try the first option above (bsb).

		As with `create-react-app`, `reason-scripts` comes with a server and hot-reloading built in.

docs/instance-variables.md

		@@ -23,14 +23,17 @@ ---

		let component = ...; /* remember, `component` needs to be close to `make`, and after `state` type declaration! */
		let component = /* ... /; / remember, `component` needs to be close to `make`, and after `state` type declaration! */

		let make = (_children) => {
		...component,
		initialState: () => {someRandomState: Some("hello"), intervalId: ref(None)},
		initialState: () => {
		someRandomState: Some("hello"),
		intervalId: ref(None),
		},
		didMount: ({state}) => {
		/* mutate the value here */
		state.intervalId := Some(Js.Global.setInterval(...));
		state.intervalId := Some(Js.Global.setInterval(/* ... */));
		/* no extra state update needed */
		ReasonReact.NoUpdate
		},
		render: ...
		render: /* ... */
		};
		@@ -37,0 +40,0 @@ ```

docs/interop.md

		@@ -118,4 +118,4 @@ ---
		make(
		~name=jsProps \|. name,
		~age=?Js.Nullable.toOption(jsProps \|. age),
		~name=jsProps->nameGet,
		~age=?Js.Nullable.toOption(jsProps->ageGet),
		[\|\|],
		@@ -131,2 +131,4 @@ )

		> Note the `jsProps->nameGet` and `jsProps->ageGet` part. This is a getter generated by `bs.deriving abstract`. Documentations [here](https://bucklescript.github.io/docs/en/object#record-mode).

		You'd assign the whole thing to the name `jsComponent`. The JS side can then import it:
		@@ -133,0 +135,0 @@

docs/js-using-reason.md

		@@ -39,4 +39,4 @@ ---
		make(
		~message=jsProps \|. message,
		~extraGreeting=?Js.Nullable.toOption(jsProps \|. extraGreeting),
		~message=jsProps->messageGet,
		~extraGreeting=?Js.Nullable.toOption(jsProps->extraGreetingGet),
		[\|\|],
		@@ -43,0 +43,0 @@ )

docs/jsx.md

		@@ -25,3 +25,3 @@ ---

		Prop-less `<div />` transforms to:
		Prop-less `<div />` transforms into

		@@ -46,3 +46,3 @@ ```reason

		transforms to
		transforms into

		@@ -57,3 +57,3 @@ ```reason

		Prop-less `<MyReasonComponent />` transforms to:
		Prop-less `<MyReasonComponent />` transforms into

		@@ -64,6 +64,24 @@ ```reason

		The `make` above is exactly the `make` function you've seen in the previous section.
		The `make` above is exactly the same `make` function you've seen in the previous section.

		Note how `ref` and `key` have been lifted out of the JSX call into the `ReasonReact.element` call. `ref` and `key` are reserved in ReasonReact, just like in ReactJS. Don't use them as props in your component!

		## Fragment

		```reason
		<> child1 child2 </>;
		```

		transforms into

		```reason
		ReactDOMRe.createElement(ReasonReact.fragment, [\|child1, child2\|]);
		```

		Which compiles to

		```js
		React.createElement(React.Fragment, undefined, child1, child2);
		```

		## Children
		@@ -109,2 +127,2 @@

		For more creative way of leveraging Reason's type system, data structures and performance to use `children` to its full potential, see the [Children section](children.md)!
		For more creative ways of leveraging Reason's type system, data structures and performance to use `children` to its full potential, see the [Children section](children.md)!

docs/lifecycles.md

		@@ -24,3 +24,3 @@ ---
		- We've dropped the `component` prefix from all these.
		- `willReceiveProps` asks, for the return type, to be `state`, not `update state` (i.e. not `NoUpdate/Update/SideEffects/UpdateWithSideEffects`). We presume you'd always want to update the state in this lifecycle. If not, simply return the previous `state` exposed in the lifecycle argument.
		- `willReceiveProps` asks for the return type to be `state`, not `update state` (i.e. not `NoUpdate/Update/SideEffects/UpdateWithSideEffects`). We presume you'd always want to update the state in this lifecycle. If not, simply return the previous `state` exposed in the lifecycle argument.
		- `didUpdate`, `willUnmount` and `willUpdate` don't allow you to return a new state to be updated, to prevent infinite loops.
		@@ -32,7 +32,7 @@ - `willMount` is unsupported. Use `didMount` instead.

		Some new lifecyle methods act differently. Described below.
		Some new lifecycle methods act differently. Described below.

		## Access next or previous props: `retainedProps`

		One pattern that's sometimes used in ReactJS is accessing a lifecyle event's `prevProps` (`componentDidUpdate`), `nextProps` (`componentWillUpdate`), and so on. ReasonReact doesn't automatically keep copies of previous props for you. We provide the `retainedProps` API for this purpose:
		One pattern that's sometimes used in ReactJS is accessing a lifecycle event's `prevProps` (`componentDidUpdate`), `nextProps` (`componentWillUpdate`), and so on. ReasonReact doesn't automatically keep copies of previous props for you. We provide the `retainedProps` API for this purpose:

		@@ -52,3 +52,3 @@ ```reason
		},
		render: (_self) => ...
		render: (_self) => /* ... */
		};
		@@ -75,6 +75,6 @@ ```
		if (self.retainedProps === name) {
		...
		/* ... */
		/* previous ReactJS logic would be: if (props.name === nextProps.name) */
		};
		...
		/* ... */
		}
		@@ -91,3 +91,3 @@ };
		...component,
		willUpdate: {oldSelf, newSelf} => ...
		willUpdate: ({oldSelf, newSelf}) => /* ... */
		}
		@@ -94,0 +94,0 @@ ```

docs/react-ref.md

		@@ -24,4 +24,7 @@ ---
		...component,
		initialState: () => {isOpen: false, mySectionRef: ref(None)},
		reducer: ...,
		initialState: () => {
		isOpen: false,
		mySectionRef: ref(None),
		},
		reducer: /* ... */,
		render: (self) => <Section1 ref={self.handle(setSectionRef)} />
		@@ -28,0 +31,0 @@ };

docs/reason-using-js.md

		@@ -10,15 +10,14 @@ ---
		var React = require('react');
		var App = React.createClass({
		displayName: "MyBanner",
		render: function() {
		if (this.props.show) {
		return React.createElement('div', null,
		this.props.message
		);
		} else {
		return null;
		}

		var MyBanner = function(props) {
		if (props.show) {
		return React.createElement('div', null,
		'Here\'s the message from the owner: ' + props.message
		);
		} else {
		return null;
		}
		});
		module.exports = App;
		};

		module.exports = MyBanner;
		```
		@@ -25,0 +24,0 @@

docs/render.md

		@@ -8,5 +8,5 @@ ---
		```reason
		...
		/* ... */
		render: (self) => <div />
		...
		/* ... */
		```
		@@ -13,0 +13,0 @@

docs/router.md

		@@ -14,2 +14,3 @@ ---
		- `ReasonReact.Router.push(string)`: takes a new path and update the URL.
		- `ReasonReact.Router.replace(string)`: like `push`, but replaces the current URL.
		- `ReasonReact.Router.watchUrl(f)`: start watching for URL changes. Returns a subscription token. Upon url change, calls the callback and passes it the `ReasonReact.Router.url` record.
		@@ -80,5 +81,5 @@ - `ReasonReact.Router.unwatchUrl(watcherID)`: stop watching for url changes.
		\| ShowAll => ReasonReact.Update({...state, nowShowing: AllTodos})
		\| ShowActive => ...
		\| ShowActive => /* ... */
		/* todo actions */
		\| ChangeTodo(text) => ...
		\| ChangeTodo(text) => /* ... */
		},
		@@ -91,4 +92,4 @@ didMount: self => {
		\| ("shared", true) => self.send(ShowShared)
		\| ("shared", false) when isSpecialUser => ... /* handle this state */
		\| ("shared", false) => ... /* handle this state */
		\| ("shared", false) when isSpecialUser => /* handle this state please */
		\| ("shared", false) => /* handle this state please */
		\| _ => self.send(ShowAll)
		@@ -121,6 +122,6 @@ }

		We always strive to lower the performance and learning overhead in ReasonReact, and our router design's no different. The entire implementation, barring browser features detection, is around 20 lines. The design might seem obvious in retrospect, but to arrived at it, we had to dig back into ReactJS internals & future proposals to make sure we understood the state update mechanisms, the future context proposal, lifecycle ordering, etc. and reject some bad API designs along the way. It's nice to arrive at such an obvious solution!
		We always strive to lower the performance and learning overhead in ReasonReact, and our router design's no different. The entire implementation, barring browser features detection, is around 20 lines. The design might seem obvious in retrospect, but to arrive here, we had to dig back into ReactJS internals & future proposals to make sure we understood the state update mechanisms, the future context proposal, lifecycle ordering, etc. and reject some bad API designs along the way. It's nice to arrive at such an obvious solution!

		The API also doesn't dictate whether matching on a route should return a component, a state update, or a side-effect. Flexible enough to slip into existing apps.

		Performance-wise, a JavaScript-like API tend to use a JS object of route string -> callback. We eschewed that in favor of pattern-matching, since the latter in Reason does not allocate memory, and is compiled to a fast jump table in C++ (through the JS JIT). In fact, the only allocation in the router matching is the creation of the `url` record!
		Performance-wise, a JavaScript-like API tends to use a JS object of route string -> callback. We eschewed that in favor of pattern-matching, since the latter in Reason does not allocate memory, and is compiled to a fast jump table in C++ (through the JS JIT). In fact, the only allocation in the router matching is the creation of the `url` record!

docs/state-actions-reducer.md

		@@ -41,3 +41,3 @@ ---
		\| Click => ReasonReact.Update({...state, count: state.count + 1})
		\| Toggle => ReasonReact.Update({...state, show: ! state.show})
		\| Toggle => ReasonReact.Update({...state, show: !state.show})
		},
		@@ -56,4 +56,5 @@
		(
		self.state.show ?
		ReasonReact.string(greeting) : ReasonReact.null
		self.state.show
		? ReasonReact.string(greeting)
		: ReasonReact.null
		)
		@@ -128,3 +129,3 @@ </div>;
		- `ReasonReact.NoUpdate`: don't do a state update.
		- `ReasonReact.Update state`: update the state.
		- `ReasonReact.Update(state)`: update the state.
		- `ReasonReact.SideEffects(self => unit)`: no state update, but trigger a side-effect, e.g. `ReasonReact.SideEffects(_self => Js.log("hello!"))`.
		@@ -131,0 +132,0 @@ - `ReasonReact.UpdateWithSideEffects(state, self => unit)`: update the state, then trigger a side-effect.

docs/subscriptions-helper.md

		@@ -28,3 +28,3 @@ ---
		},
		render: ...
		render: /* ... */
		};
		@@ -54,3 +54,3 @@ ```
		},
		render: ...
		render: /* ... */
		};
		@@ -77,3 +77,3 @@ ```
		},
		render: ...
		render: /* ... */
		};
		@@ -80,0 +80,0 @@ ```

HISTORY.md

		@@ -0,1 +1,14 @@
		# 0.6.0

		Mini release before a surprise release next time (shhhhh) =).

		## Breaking

		- The DOM prop `crossorigin` is now correctly named `crossOrigin`. This is a tiny breaking change, thus the version bump (#290).

		## Improvements

		- Fix issue with react-hot-loader (#298)
		- `ReasonReact.Router.replace` to replace state

		# 0.5.0
		@@ -25,3 +38,3 @@

		Lastly, `bs.send.pipe` is informally deprecated, so we've removed the usage of those too. Instead of `e \|> ReactEventRe.Mouse.preventDefault`, use either `e->ReactEventRe.Mouse.preventDefault` or `ReactEventRe.Mouse.preventDefault(e)`. `bs.send.pipe` is, all things considered, the heaviest BuckleScript special annotation. If your library uses it, please consider removing it too. Thanks!
		Lastly, `bs.send.pipe` is informally deprecated, so we've removed the usage of those too. Instead of `e \|> ReactEventRe.Mouse.preventDefault`, use either `e->ReactEvent.Mouse.preventDefault` or `ReactEvent.Mouse.preventDefault(e)`. `bs.send.pipe` is, all things considered, the heaviest BuckleScript special annotation. If your library uses it, please consider removing it too. Thanks!

		@@ -276,3 +289,3 @@ ## JSX
		### `componentBag.state`
		Now passed to you as an argument in callbacks and lifecyle events.
		Now passed to you as an argument in callbacks and lifecycle events.

		@@ -279,0 +292,0 @@ ### `componentBag.instanceVars`

lib/js/src/ReasonReact.js

		@@ -5,2 +5,3 @@ 'use strict';
		var React = require("react");
		var Js_primitive = require("bs-platform/lib/js/js_primitive.js");
		var Caml_builtin_exceptions = require("bs-platform/lib/js/caml_builtin_exceptions.js");
		@@ -45,3 +46,3 @@ var ReasonReactOptimizedCreateClass = require("./ReasonReactOptimizedCreateClass.js");
		if (jsPropsToReason !== undefined) {
		return /* Element */[Curry._1(jsPropsToReason, props)];
		return /* Element */[Js_primitive.valFromOption(jsPropsToReason)(props)];
		} else {
		@@ -364,4 +365,5 @@ throw [
		function wrapReasonForJs(component, jsPropsToReason) {
		var uncurriedJsPropsToReason = Curry.__1(jsPropsToReason);
		var tmp = component[/* reactClassInternal */1].prototype;
		tmp.jsPropsToReason = jsPropsToReason;
		tmp.jsPropsToReason = Js_primitive.some(uncurriedJsPropsToReason);
		return component[/* reactClassInternal */1];
		@@ -496,2 +498,14 @@ }

		function replace(path) {
		var match = typeof (history) === "undefined" ? undefined : (history);
		var match$1 = typeof (window) === "undefined" ? undefined : (window);
		if (match !== undefined && match$1 !== undefined) {
		match.replaceState(null, "", path);
		match$1.dispatchEvent(safeMakeEvent("popstate"));
		return /* () */0;
		} else {
		return /* () */0;
		}
		}

		function url() {
		@@ -532,2 +546,3 @@ return /* record */[
		push,
		replace,
		watchUrl,
		@@ -534,0 +549,0 @@ unwatchUrl,

package.json

		{
		"name": "reason-react",
		"version": "0.5.3",
		"version": "0.6.0",
		"description": "React bindings for Reason",
		"main": "index.js",
		"main": "lib/js/src/ReasonReact.js",
		"scripts": {
		@@ -25,3 +25,3 @@ "build": "bsb -make-world",
		"devDependencies": {
		"bs-platform": "^4.0.3"
		"bs-platform": "^4.0.6"
		},
		@@ -28,0 +28,0 @@ "dependencies": {

.vscode/settings.json

circle.yml

lib/ocaml/ReactDOMRe.cmi

lib/ocaml/ReactDOMRe.cmj

lib/ocaml/ReactDOMRe.cmt

lib/ocaml/ReactDOMRe.re

lib/ocaml/ReactDOMServerRe.cmi

lib/ocaml/ReactDOMServerRe.cmj

lib/ocaml/ReactDOMServerRe.cmt

lib/ocaml/ReactDOMServerRe.re

lib/ocaml/ReactEventRe.cmi

lib/ocaml/ReactEventRe.cmj

lib/ocaml/ReactEventRe.cmt

lib/ocaml/ReactEventRe.cmti

lib/ocaml/ReactEventRe.re

lib/ocaml/ReactEventRe.rei

lib/ocaml/ReasonReact.cmi

lib/ocaml/ReasonReact.cmj

lib/ocaml/ReasonReact.cmt

lib/ocaml/ReasonReact.cmti

lib/ocaml/ReasonReact.re

lib/ocaml/ReasonReact.rei

lib/ocaml/ReasonReactOptimizedCreateClass.cmi

lib/ocaml/ReasonReactOptimizedCreateClass.cmj

lib/ocaml/ReasonReactOptimizedCreateClass.cmt

lib/ocaml/ReasonReactOptimizedCreateClass.re

website/i18n/en.json

.merlin