Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

reason-react

Package Overview
Dependencies
Maintainers
1
Versions
43
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

reason-react - npm Package Compare versions

Comparing version 0.7.1 to 0.8.0-dev.1

docs/adding-data-props.md
docs/gentype.md
docs/graphql-apollo.md
docs/importing-js-into-reason.md
docs/importing-reason-into-js.md
docs/reasonreactcompat.md
docs/render-props.md
docs/usedebounce-custom-hook.md
docs/useeffect-hook.md
docs/usereducer-hook.md
docs/usestate-hook.md
docs/working-with-optional-data.md

22

docs/context-mixins.md

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

## Binding to an external Context
Binding to a Context defined in a JS file holds no surprises.
```js
/** ComponentThatDefinesTheContext.re */
export const ThemeContext = React.createContext("light");
```
```reason
/** ComponentToConsumeTheContext.re */
[@bs.module "ComponentThatDefinesTheContext"]
external themeContext: React.Context.t(string) = "ThemeContext";
[@react.component]
let make = () => {
let theme = React.useContext(themeContext);
<h1>theme->React.string</h1>
}
```
## Mixins
ReasonReact doesn't support ReactJS mixins. Composing normal functions is a good alternative.

28

docs/installation.md

@@ -9,8 +9,20 @@ ---

[BuckleScript](http://bucklescript.github.io/) compiles ReasonML code to JavaScript. You can get it with:
[BuckleScript](http://bucklescript.github.io/) is the tool that compiles ReasonML code to JavaScript. Every project that uses BuckleScript will have a `bsconfig.json` file (the same way you'd have `tsconfig.json` in a Typescript project) with project specific settings. You can install it globally or keep it project specific by adding it as a `devDependency`.
### Using Bucklescript init
BuckleScript's [bsb](https://bucklescript.github.io/docs/en/build-overview.html) build system has an `init` command that generates a project template. The `react-hooks` theme happens to be our official, lightweight template optimized for low learning overhead and ease of integration into an existing project.
The `.re` files compile to straightforward `.bs.js` files. You can open `index.html` directly from the file system. No server needed! Change any `.re` file to see that page automatically refreshed.
```sh
# you can use yarn too (yarn global add bs-platform)
npm install --global bs-platform
# creates project folder
bsb -init my-react-app -theme react-hooks
# cd into that folder, npm install, start
cd my-react-app && npm install && npm start
# in another tab

@@ -20,8 +32,6 @@ npm run server

BuckleScript's [bsb](https://bucklescript.github.io/docs/en/build-overview.html) build system has an `init` command that generates a project template. The `react-hooks` theme happens to be our official, lightweight template optimized for low learning overhead and ease of integration into an existing project.
### Adding Reason to an existing React.js Project (Create React App, Next.js, etc.)
The `.re` files compile to straightforward `.bs.js` files. You can open `index.html` directly from the file system. No server needed! Change any `.re` file to see that page automatically refreshed.
Set up is very straight forward! Install two dependencies, add some scripts and create a bsconfig.json file.
## Adding Reason + Bucklescript to an existing project
Install the following dependencies:

@@ -34,3 +44,3 @@

Add scripts to package.json:
Add scripts to `package.json`:

@@ -44,3 +54,3 @@ ```json

Create a bsconfig.json file in the root of your project with the following. You can change the name.
Create a `bsconfig.json` file in the root of your project with the following. All the settings are already defaults, most of this is boilerplate. The important fields are `name`, `bs-dependencies` and `ppx-flags`. As you can see, we've added `reason-react`. This tells Reason where to look for bindings (similar to depdencies in your package.json).

@@ -73,1 +83,5 @@ ```json

```
That's it!
**Note**: You'll have to run the reason compiler in a separate terminal. First start your project `yarn start` and in a separate terminal run: `yarn re:watch`

4

docs/instance-variables.md

@@ -24,3 +24,3 @@ ---

someRandomState: option(string),
intervalId: ref(option(int))
intervalId: ref(option(Js.Global.intervalId))
};

@@ -39,4 +39,2 @@

state.intervalId := Some(Js.Global.setInterval(/* ... */));
/* no extra state update needed */
ReasonReact.NoUpdate
},

@@ -43,0 +41,0 @@ render: /* ... */

31

docs/intro-example.md

@@ -17,10 +17,35 @@ ---

## A usage of the component
## Using Greeting in your App
(assuming there's a `div` on the page with id `greeting`)
If you're writing your entire React app in Reason, you'll probably have a `ReactDOM.render` in an index.js. This is what that looks like in Reason:
```reason
/* file: Index.re */
ReactDOMRe.renderToElementWithId(<Greeting name="John" />, "root");
```
ReactDOMRe.renderToElementWithId(<Greeting name="John" />, "greeting");
This is how you used to write this in plain Javascript (index.js):
```js
/* file: index.js */
ReactDOM.render(<Greeting name="John"> document.getElementById("root"));
```
### Using Greeting in an existing Javascript/Typescript App
It's easy to import a Reason component into your existing app. All Reason extensions will have `bs` and export your component as `make`. You can rename it and call it as you usually do. [Gentype](https://github.com/cristianoc/genType) makes this easier (see the example).
```js
/* file: App.js */
import { make as Greeting } from './Greeting.bs'
export default function App() {
return (
<div>
<Greeting name="Peter" />
</div>
)
}
```
Make sure you check out [Examples](simple) for more!

4

docs/invalid-prop-name.md

@@ -7,5 +7,5 @@ ---

For `aria-*`: use the camelCased `ariaFoo`. E.g. `ariaLabel`. For DOM components, we'll translate it to `aria-label` under the hood.
For `aria-*` use camelCasing, e.g., `ariaLabel`. For DOM components, we'll translate it to `aria-label` under the hood.
For `data-*`, this is a bit trickier; words with `-` in them aren't valid in Reason/OCaml. When you do want to write them, e.g. `<div data-name="click me" />`, use the following:
For `data-*` this is a bit trickier; words with `-` in them aren't valid in Reason/OCaml. When you do want to write them, e.g., `<div data-name="click me" />`, use the following:

@@ -12,0 +12,0 @@ ```reason

81

docs/jsx.md

@@ -9,3 +9,3 @@ ---

For help to migrate from version 2 to version 3, check the section [below](https://reasonml.github.io/reason-react/docs/en/jsx.html#migrating-from-version-2-to-version-3).
For help to migrate from version 2 to version 3, check the `ReasonReactCompat` [section](https://reasonml.github.io/reason-react/docs/en/reasonreactcompat.html#migrating-an-application-to-v070-and-jsx-v3).

@@ -139,80 +139,1 @@ ## Uncapitalized

We unwrap this for you automatically to just `<div />` instead of an array of a single element.
## Migrating from version 2 to version 3
There are many ReasonReact applications, so it is hard to define "The One True" migration strategy for them all.
Depending on the size and nature of your application there are two options available to migrate from JSX version 2 to version 3.
### Application level
By adding `{"reason": {"react-jsx": 3}` in your [`bsconfig.json`](https://bucklescript.github.io/docs/en/build-configuration.html#reason-refmt).
This approach requires that all components in the application must be made compatible with version 3 of JSX at once, so it will be a better fit for smaller apps with a reduced number of components, where all of them can be migrated to version 3 in one fell swoop.
### File level
For larger applications, it might not be possible to migrate all components at once. In these cases, a per-file migration is also possible.
A file can be configured to use version 3 of the transform by adding `[@bs.config {jsx: 3}];` at the top of the file.
The per-file configuration allows to mix, in the same application, components compatible with either of both versions of the JSX transforms. However, the restriction is that all the components used in a file will have to be compatible with the JSX version specified for that file.
For example, if a file contains the following code:
```reason
/* User.re */
[@bs.config {jsx: 3}];
[@react.component]
let make = (~id) => {
<Profile>
<UserDetails id />
</Profile>;
};
```
Then `Profile` and `UserDetails` components will have to be compatible with the version 3 of JSX. Or alternatively, if they are using version 2, they can be wrapped with the function `ReasonReactCompat.wrapReasonReactForReact`.
#### From primitives to more complex components
As all usages of any component in a file need to be migrated to the same version of JSX, one natural way to tackle large migrations at the file level is to start converting the most primitive components to version 3, as they generally render elements of a reduced number of components, or host elements like `<div />`. Once the most simple components are done, one can proceed with the most complex ones.
While this process is ongoing, both versions of JSX need to coexist. For example, a component `Banner` compatible with version 2 might need to use a component `Image` that is compatible with version 3. `Image` can be made compatible by leveraging `ReasonReactCompat.wrapReactForReasonReact`:
```reason
/* In Image.re */
[@bs.config {jsx: 3}];
[@react.component]
let make = (~src) => <img src />;
module Jsx2 = {
let component = ReasonReact.statelessComponent("Image");
/* `children` is not labelled, as it is a regular parameter in version 2 of JSX */
let make = (~src, children) =>
ReasonReactCompat.wrapReactForReasonReact(
make,
makeProps(~src, ()),
children,
);
};
```
Then, `Image` can be used from `Banner`:
```reason
/* In Banner.re */
let component = ReasonReact.statelessComponent("Banner");
let make = _children => {
...component,
render: _self => <Image.Jsx2 src="./cat.gif" />,
};
```
Once all components are using version 3, there is no more need to keep the `[@bs.config {jsx: 3}];` annotations at the top of each file, and they can be replaced by bumping the JSX version in the `bsconfig.json` file to `{"reason": {"react-jsx": 3}`.
### Upgrade script
A migration script [is provided](https://github.com/chenglou/upgrade-reason-react#installation) to facilitate the task to convert components to version 3. It will wrap existing ReasonReact components as if they are Hooks components. This script will not attempt to re-write your logic as hooks because this is often a complicated process and it is not guaranteed to be correct. Please always inspect and test the work of the migration script to make sure it does what you are expecting.

2

docs/playground.md

@@ -6,1 +6,3 @@ ---

You can try ReasonReact, with live JS output, in the [Reason Try page](https://reasonml.github.io/en/try.html?rrjsx=true&reason=NoAQRgzgdAxg9gOwGYEsDmACA3gKwgDwC4MBmAXwF0BuAKBoFs4ATAVwBsBTDAYThYQAuHAE4YAvNhoYMoYRwCGMAbDj0ADog6CKUjJwEZ68gNZcJACgB+CefQ4BKcQD5J06fozn4-AQBoMEBwCvD6OEgBKCkpQLIEAygLyQubmYS4ADPa0utIAPEwoAG5OOW65ai5YkYrKEALCKAho5jZ2GADU7RgARBgwbCgwpkw9HV11DU0A+nBIU40CXnyCjp2jAih2EN32ZBi5APQVpXlgLAICiBiI3ANDYlhTzgFBIYLmT2Iu3oIdGACMuxKbhB2Gq0QmjWa3Vug2Mhg4OzIJ32BzOF0QwLKBwKxV0ZFoBLo4IEABEAPIAWUiUDkCCYIgAKnAAKKcOyCADqKAEAAsAJJMcy5N5CUStDhiGHLMW9A5OfzdNRyQooDgAdx2VCAA). The template's in the Examples menu.
You can also try it on [Repl.it](https://repl.it/languages/reactre). Just hit run button to start the development server and from there you can edit and see it live. Any web app you build is live-deployed and the URL will be available forever.

88

docs/simple.md
---
title: Simple
title: A List of Simple Examples
---
### A Basic Greeting Component
Reason's returns are implicit so you don't need to write `return`, it'll be the last item in the block:
```reason

@@ -12,9 +16,81 @@ /* Greeting.re */

Usage in another file:
Usage in another file. Looks very similar to JSX in Javascript!
```reason
ReactDOMRe.renderToElementWithId(
<Greeting message="Hello World!" />,
"index",
);
/* ... */
<div>
<Greeting message="Hello World!">
</div>
/* ... */
```
### A Component with Optional Arguments and React.Fragment
```reason
[@react.component]
let make = (~title, ~description=?) =>
<>
/* React.Fragment works the same way as in React.js! */
<h1> title </h1>
/* Handling optional variables where you don't want to render anything */
{
switch (description) {
| Some(description) => <span> {React.string(description)} </span>
/* Since everything is typed, React.null is required */
| None => React.null
}
}
</>;
```
### A Form Component with React.js Differences
```reason
[@react.component]
let make = () => {
/* unused variables are prefixed with an underscore */
let onSubmit = _event => Js.log("Hello this is a log!");
/* onSubmit=onSubmit turns to just onSubmit */
<form onSubmit>
<input
/* class names work the same way */
className="w-full"
/* type_ is underscored b/c its a reserved word in Reason */
type_="text"
/* No brackets needed! */
autoFocus=true
placeholder="Game Code"
/>
<button type_="submit"> {React.string("Button label")} </button>
</form>;
};
```
### A Component that Renders a List of Items
This component uses [Belt](https://reasonml.org/apis/javascript/latest/belt), Reason's preferred Standard Library.
```reason
/* We define the type of the item (this is a record) */
type item = {
id: string,
text: string,
};
[@react.component]
let make = (~items) =>
<ul>
{
items
->Belt.Array.map(item =>
<li key={item.id}> {React.string(item.text)} </li>
)
/* Since everything is typed, the arrays need to be, too! */
->React.array
}
</ul>;
```

2

docs/use-state-use-effect.md
---
title: Use State and Use Effect
title: useState, useEffect in a Form
---

@@ -4,0 +4,0 @@

13

lib/js/src/React.js
'use strict';
var Ref = /* module */[];
var Ref = { };
var Children = /* module */[];
var Children = { };
var Context = /* module */[];
var Context = { };
var Fragment = /* module */[];
var Fragment = { };
var Suspense = /* module */[];
var Suspense = { };
var SuspenseList = { };
exports.Ref = Ref;

@@ -19,2 +21,3 @@ exports.Children = Children;

exports.Suspense = Suspense;
exports.SuspenseList = SuspenseList;
/* No side effect */

64

lib/js/src/ReactDOMRe.js
'use strict';
var Block = require("bs-platform/lib/js/block.js");
var React = require("react");

@@ -13,6 +14,4 @@ var ReactDom = require("react-dom");

} else {
throw [
Caml_builtin_exceptions.invalid_argument,
"ReactDOMRe.renderToElementWithClassName: no element of class " + (className + " found in the HTML.")
];
console.error("ReactDOMRe.renderToElementWithClassName: no element of class " + (className + " found in the HTML."));
return /* () */0;
}

@@ -24,6 +23,4 @@ }

if (match == null) {
throw [
Caml_builtin_exceptions.invalid_argument,
"ReactDOMRe.renderToElementWithId : no element of id " + (id + " found in the HTML.")
];
console.error("ReactDOMRe.renderToElementWithId : no element of id " + (id + " found in the HTML."));
return /* () */0;
} else {

@@ -35,2 +32,25 @@ ReactDom.render(reactElement, match);

function createRootWithClassName(className) {
var elements = document.getElementsByClassName(className);
if (elements.length !== 0) {
return /* Ok */Block.__(0, [ReactDom.createRoot(elements[0])]);
} else {
return /* Error */Block.__(1, ["ReactDOMRe.Unstable.createRootWithClassName: no element of class " + (className + " found in the HTML.")]);
}
}
function createRootWithId(id) {
var match = document.getElementById(id);
if (match == null) {
return /* Error */Block.__(1, ["ReactDOMRe.Unstable.createRootWithId: no element of id " + (id + " found in the HTML.")]);
} else {
return /* Ok */Block.__(0, [ReactDom.createRoot(match)]);
}
}
var Experimental = {
createRootWithClassName: createRootWithClassName,
createRootWithId: createRootWithId
};
function hydrateToElementWithClassName(reactElement, className) {

@@ -42,6 +62,4 @@ var elements = document.getElementsByClassName(className);

} else {
throw [
Caml_builtin_exceptions.invalid_argument,
"ReactDOMRe.hydrateToElementWithClassName: no element of class " + (className + " found in the HTML.")
];
console.error("ReactDOMRe.hydrateToElementWithClassName: no element of class " + (className + " found in the HTML."));
return /* () */0;
}

@@ -63,6 +81,6 @@ }

var Ref = /* module */[];
var Ref = { };
function createElementVariadic(domClassName, props, children) {
var variadicArguments = /* array */[
var variadicArguments = [
domClassName,

@@ -74,19 +92,15 @@ props

function combine(a, b) {
return Object.assign(Object.assign({ }, a), b);
}
function unsafeAddProp(style, property, value) {
function unsafeAddProp(style, key, value) {
var dict = { };
dict[property] = value;
return combine(style, dict);
dict[key] = value;
return Object.assign(({}), style, dict);
}
var Style = /* module */[
/* combine */combine,
/* unsafeAddProp */unsafeAddProp
];
var Style = {
unsafeAddProp: unsafeAddProp
};
exports.renderToElementWithClassName = renderToElementWithClassName;
exports.renderToElementWithId = renderToElementWithId;
exports.Experimental = Experimental;
exports.hydrateToElementWithClassName = hydrateToElementWithClassName;

@@ -93,0 +107,0 @@ exports.hydrateToElementWithId = hydrateToElementWithId;

30

lib/js/src/ReactEvent.js
'use strict';
var Synthetic = /* module */[];
var Synthetic = { };
var Clipboard = /* module */[];
var Clipboard = { };
var Composition = /* module */[];
var Composition = { };
var Keyboard = /* module */[];
var Keyboard = { };
var Focus = /* module */[];
var Focus = { };
var Form = /* module */[];
var Form = { };
var Mouse = /* module */[];
var Mouse = { };
var $$Selection = /* module */[];
var $$Selection = { };
var $$Touch = /* module */[];
var $$Touch = { };
var UI = /* module */[];
var UI = { };
var Wheel = /* module */[];
var Wheel = { };
var Media = /* module */[];
var Media = { };
var $$Image = /* module */[];
var $$Image = { };
var Animation = /* module */[];
var Animation = { };
var Transition = /* module */[];
var Transition = { };

@@ -34,0 +34,0 @@ exports.Synthetic = Synthetic;

30

lib/js/src/ReactEventRe.js
'use strict';
var Synthetic = /* module */[];
var Synthetic = { };
var Clipboard = /* module */[];
var Clipboard = { };
var Composition = /* module */[];
var Composition = { };
var Keyboard = /* module */[];
var Keyboard = { };
var Focus = /* module */[];
var Focus = { };
var Form = /* module */[];
var Form = { };
var Mouse = /* module */[];
var Mouse = { };
var $$Selection = /* module */[];
var $$Selection = { };
var $$Touch = /* module */[];
var $$Touch = { };
var UI = /* module */[];
var UI = { };
var Wheel = /* module */[];
var Wheel = { };
var Media = /* module */[];
var Media = { };
var $$Image = /* module */[];
var $$Image = { };
var Animation = /* module */[];
var Animation = { };
var Transition = /* module */[];
var Transition = { };

@@ -34,0 +34,0 @@ exports.Synthetic = Synthetic;

263

lib/js/src/ReasonReact.js

@@ -10,3 +10,3 @@ 'use strict';

function createDomElement(s, props, children) {
var vararg = /* array */[
var vararg = [
s,

@@ -27,3 +27,3 @@ props

function willReceivePropsDefault(param) {
return param[/* state */1];
return param.state;
}

@@ -65,9 +65,9 @@

var $$this = this ;
return /* record */[
/* handle */$$this.handleMethod,
/* state */state,
/* retainedProps */retainedProps,
/* send */$$this.sendMethod,
/* onUnmount */$$this.onUnmountMethod
];
return {
handle: $$this.handleMethod,
state: state,
retainedProps: retainedProps,
send: $$this.sendMethod,
onUnmount: $$this.onUnmountMethod
};
}),

@@ -78,3 +78,3 @@ getInitialState: (function () {

return {
reasonState: Curry._1(convertedReasonProps[0][/* initialState */10], /* () */0)
reasonState: Curry._1(convertedReasonProps[0].initialState, /* () */0)
};

@@ -89,5 +89,5 @@ }),

var curReasonState = curTotalState.reasonState;
var self = $$this.self(curReasonState, component[/* retainedProps */11]);
if (component[/* didMount */4] !== anyToUnit) {
return Curry._1(component[/* didMount */4], self);
var self = $$this.self(curReasonState, component.retainedProps);
if (component.didMount !== anyToUnit) {
return Curry._1(component.didMount, self);
} else {

@@ -105,22 +105,21 @@ return 0;

var newComponent = newConvertedReasonProps[0];
if (newComponent[/* didUpdate */5] !== anyToUnit) {
var match = prevProps === newJsProps;
var oldConvertedReasonProps = match ? newConvertedReasonProps : convertPropsIfTheyreFromJs(prevProps, thisJs.jsPropsToReason, debugName);
if (newComponent.didUpdate !== anyToUnit) {
var oldConvertedReasonProps = prevProps === newJsProps ? newConvertedReasonProps : convertPropsIfTheyreFromJs(prevProps, thisJs.jsPropsToReason, debugName);
var prevReasonState = prevState.reasonState;
var newSelf = $$this.self(curReasonState, newComponent[/* retainedProps */11]);
var oldSelf_000 = /* handle */newSelf[/* handle */0];
var oldSelf_002 = /* retainedProps */oldConvertedReasonProps[0][/* retainedProps */11];
var oldSelf_003 = /* send */newSelf[/* send */3];
var oldSelf_004 = /* onUnmount */newSelf[/* onUnmount */4];
var oldSelf = /* record */[
oldSelf_000,
/* state */prevReasonState,
oldSelf_002,
oldSelf_003,
oldSelf_004
];
return Curry._1(newComponent[/* didUpdate */5], /* record */[
/* oldSelf */oldSelf,
/* newSelf */newSelf
]);
var newSelf = $$this.self(curReasonState, newComponent.retainedProps);
var oldSelf_handle = newSelf.handle;
var oldSelf_retainedProps = oldConvertedReasonProps[0].retainedProps;
var oldSelf_send = newSelf.send;
var oldSelf_onUnmount = newSelf.onUnmount;
var oldSelf = {
handle: oldSelf_handle,
state: prevReasonState,
retainedProps: oldSelf_retainedProps,
send: oldSelf_send,
onUnmount: oldSelf_onUnmount
};
return Curry._1(newComponent.didUpdate, {
oldSelf: oldSelf,
newSelf: newSelf
});
} else {

@@ -137,4 +136,4 @@ return 0;

var curReasonState = curState.reasonState;
if (component[/* willUnmount */6] !== anyToUnit) {
Curry._1(component[/* willUnmount */6], $$this.self(curReasonState, component[/* retainedProps */11]));
if (component.willUnmount !== anyToUnit) {
Curry._1(component.willUnmount, $$this.self(curReasonState, component.retainedProps));
}

@@ -156,25 +155,24 @@ var match = $$this.subscriptions;

var newComponent = newConvertedReasonProps[0];
if (newComponent[/* willUpdate */7] !== anyToUnit) {
if (newComponent.willUpdate !== anyToUnit) {
var oldJsProps = thisJs.props;
var match = nextProps === oldJsProps;
var oldConvertedReasonProps = match ? newConvertedReasonProps : convertPropsIfTheyreFromJs(oldJsProps, thisJs.jsPropsToReason, debugName);
var oldConvertedReasonProps = nextProps === oldJsProps ? newConvertedReasonProps : convertPropsIfTheyreFromJs(oldJsProps, thisJs.jsPropsToReason, debugName);
var curState = thisJs.state;
var curReasonState = curState.reasonState;
var nextReasonState = nextState.reasonState;
var newSelf = $$this.self(nextReasonState, newComponent[/* retainedProps */11]);
var oldSelf_000 = /* handle */newSelf[/* handle */0];
var oldSelf_002 = /* retainedProps */oldConvertedReasonProps[0][/* retainedProps */11];
var oldSelf_003 = /* send */newSelf[/* send */3];
var oldSelf_004 = /* onUnmount */newSelf[/* onUnmount */4];
var oldSelf = /* record */[
oldSelf_000,
/* state */curReasonState,
oldSelf_002,
oldSelf_003,
oldSelf_004
];
return Curry._1(newComponent[/* willUpdate */7], /* record */[
/* oldSelf */oldSelf,
/* newSelf */newSelf
]);
var newSelf = $$this.self(nextReasonState, newComponent.retainedProps);
var oldSelf_handle = newSelf.handle;
var oldSelf_retainedProps = oldConvertedReasonProps[0].retainedProps;
var oldSelf_send = newSelf.send;
var oldSelf_onUnmount = newSelf.onUnmount;
var oldSelf = {
handle: oldSelf_handle,
state: curReasonState,
retainedProps: oldSelf_retainedProps,
send: oldSelf_send,
onUnmount: oldSelf_onUnmount
};
return Curry._1(newComponent.willUpdate, {
oldSelf: oldSelf,
newSelf: newSelf
});
} else {

@@ -189,11 +187,10 @@ return 0;

var newComponent = newConvertedReasonProps[0];
if (newComponent[/* willReceiveProps */3] !== willReceivePropsDefault) {
if (newComponent.willReceiveProps !== willReceivePropsDefault) {
var oldJsProps = thisJs.props;
var match = nextProps === oldJsProps;
var oldConvertedReasonProps = match ? newConvertedReasonProps : convertPropsIfTheyreFromJs(oldJsProps, thisJs.jsPropsToReason, debugName);
var oldConvertedReasonProps = nextProps === oldJsProps ? newConvertedReasonProps : convertPropsIfTheyreFromJs(oldJsProps, thisJs.jsPropsToReason, debugName);
var oldComponent = oldConvertedReasonProps[0];
return thisJs.setState((function (curTotalState, param) {
var curReasonState = curTotalState.reasonState;
var oldSelf = $$this.self(curReasonState, oldComponent[/* retainedProps */11]);
var nextReasonState = Curry._1(newComponent[/* willReceiveProps */3], oldSelf);
var oldSelf = $$this.self(curReasonState, oldComponent.retainedProps);
var nextReasonState = Curry._1(newComponent.willReceiveProps, oldSelf);
if (nextReasonState !== curTotalState) {

@@ -216,25 +213,24 @@ return {

var oldConvertedReasonProps = convertPropsIfTheyreFromJs(thisJs.props, thisJs.jsPropsToReason, debugName);
var match = nextJsProps === curJsProps;
var newConvertedReasonProps = match ? oldConvertedReasonProps : convertPropsIfTheyreFromJs(nextJsProps, thisJs.jsPropsToReason, debugName);
var newConvertedReasonProps = nextJsProps === curJsProps ? oldConvertedReasonProps : convertPropsIfTheyreFromJs(nextJsProps, thisJs.jsPropsToReason, debugName);
var newComponent = newConvertedReasonProps[0];
var nextReasonState = nextState.reasonState;
var newSelf = $$this.self(nextReasonState, newComponent[/* retainedProps */11]);
if (newComponent[/* shouldUpdate */8] !== anyToTrue) {
var newSelf = $$this.self(nextReasonState, newComponent.retainedProps);
if (newComponent.shouldUpdate !== anyToTrue) {
var curState = thisJs.state;
var curReasonState = curState.reasonState;
var oldSelf_000 = /* handle */newSelf[/* handle */0];
var oldSelf_002 = /* retainedProps */oldConvertedReasonProps[0][/* retainedProps */11];
var oldSelf_003 = /* send */newSelf[/* send */3];
var oldSelf_004 = /* onUnmount */newSelf[/* onUnmount */4];
var oldSelf = /* record */[
oldSelf_000,
/* state */curReasonState,
oldSelf_002,
oldSelf_003,
oldSelf_004
];
return Curry._1(newComponent[/* shouldUpdate */8], /* record */[
/* oldSelf */oldSelf,
/* newSelf */newSelf
]);
var oldSelf_handle = newSelf.handle;
var oldSelf_retainedProps = oldConvertedReasonProps[0].retainedProps;
var oldSelf_send = newSelf.send;
var oldSelf_onUnmount = newSelf.onUnmount;
var oldSelf = {
handle: oldSelf_handle,
state: curReasonState,
retainedProps: oldSelf_retainedProps,
send: oldSelf_send,
onUnmount: oldSelf_onUnmount
};
return Curry._1(newComponent.shouldUpdate, {
oldSelf: oldSelf,
newSelf: newSelf
});
} else {

@@ -251,3 +247,3 @@ return true;

} else {
$$this.subscriptions = /* array */[subscription];
$$this.subscriptions = [subscription];
return /* () */0;

@@ -263,3 +259,3 @@ }

var convertedReasonProps = convertPropsIfTheyreFromJs(thisJs.props, thisJs.jsPropsToReason, debugName);
return Curry._2(callback, callbackPayload, $$this.self(curReasonState, convertedReasonProps[0][/* retainedProps */11]));
return Curry._2(callback, callbackPayload, $$this.self(curReasonState, convertedReasonProps[0].retainedProps));
});

@@ -272,7 +268,9 @@ }),

var component = convertedReasonProps[0];
if (component[/* reducer */12] !== reducerDefault) {
var sideEffects = /* record */[/* contents */(function (prim) {
if (component.reducer !== reducerDefault) {
var sideEffects = {
contents: (function (prim) {
return /* () */0;
})];
var partialStateApplication = Curry._1(component[/* reducer */12], action);
})
};
var partialStateApplication = Curry._1(component.reducer, action);
return thisJs.setState((function (curTotalState, param) {

@@ -289,3 +287,3 @@ var curReasonState = curTotalState.reasonState;

switch (reasonStateUpdate.tag | 0) {
case 0 :
case /* Update */0 :
nextTotalState = {

@@ -295,8 +293,8 @@ reasonState: reasonStateUpdate[0]

break;
case 1 :
sideEffects[/* contents */0] = reasonStateUpdate[0];
case /* SideEffects */1 :
sideEffects.contents = reasonStateUpdate[0];
nextTotalState = curTotalState;
break;
case 2 :
sideEffects[/* contents */0] = reasonStateUpdate[1];
case /* UpdateWithSideEffects */2 :
sideEffects.contents = reasonStateUpdate[1];
nextTotalState = {

@@ -316,3 +314,3 @@ reasonState: reasonStateUpdate[0]

}), $$this.handleMethod((function (param, self) {
return Curry._1(sideEffects[/* contents */0], self);
return Curry._1(sideEffects.contents, self);
})));

@@ -330,3 +328,3 @@ } else {

var curReasonState = curState.reasonState;
return Curry._1(created[/* render */9], $$this.self(curReasonState, created[/* retainedProps */11]));
return Curry._1(created.render, $$this.self(curReasonState, created.retainedProps));
})

@@ -337,18 +335,20 @@ });

function basicComponent(debugName) {
return /* record */[
/* debugName */debugName,
/* reactClassInternal */createClass(debugName),
/* handedOffState : record */[/* contents */undefined],
/* willReceiveProps */willReceivePropsDefault,
/* didMount */anyToUnit,
/* didUpdate */anyToUnit,
/* willUnmount */anyToUnit,
/* willUpdate */anyToUnit,
/* shouldUpdate */anyToTrue,
/* render */renderDefault,
/* initialState */initialStateDefault,
/* retainedProps : () */0,
/* reducer */reducerDefault,
/* jsElementWrapped */undefined
];
return {
debugName: debugName,
reactClassInternal: createClass(debugName),
handedOffState: {
contents: undefined
},
willReceiveProps: willReceivePropsDefault,
didMount: anyToUnit,
didUpdate: anyToUnit,
willUnmount: anyToUnit,
willUpdate: anyToUnit,
shouldUpdate: anyToTrue,
render: renderDefault,
initialState: initialStateDefault,
retainedProps: /* () */0,
reducer: reducerDefault,
jsElementWrapped: undefined
};
}

@@ -364,11 +364,11 @@

function element($staropt$star, $staropt$star$1, component) {
var key = $staropt$star !== undefined ? $staropt$star : undefined;
var ref = $staropt$star$1 !== undefined ? $staropt$star$1 : undefined;
function element(keyOpt, refOpt, component) {
var key = keyOpt !== undefined ? keyOpt : undefined;
var ref = refOpt !== undefined ? refOpt : undefined;
var element$1 = /* Element */[component];
var match = component[/* jsElementWrapped */13];
var match = component.jsElementWrapped;
if (match !== undefined) {
return Curry._2(match, key, ref);
} else {
return React.createElement(component[/* reactClassInternal */1], {
return React.createElement(component.reactClassInternal, {
key: key,

@@ -383,5 +383,4 @@ ref: ref,

var uncurriedJsPropsToReason = Curry.__1(jsPropsToReason);
var tmp = component[/* reactClassInternal */1].prototype;
tmp.jsPropsToReason = Caml_option.some(uncurriedJsPropsToReason);
return component[/* reactClassInternal */1];
component.reactClassInternal.prototype.jsPropsToReason = Caml_option.some(uncurriedJsPropsToReason);
return component.reactClassInternal;
}

@@ -402,3 +401,3 @@

});
var varargs = /* array */[
var varargs = [
reactClass$1,

@@ -409,21 +408,21 @@ props$2

});
return /* record */[
/* debugName */dummyInteropComponent[/* debugName */0],
/* reactClassInternal */dummyInteropComponent[/* reactClassInternal */1],
/* handedOffState */dummyInteropComponent[/* handedOffState */2],
/* willReceiveProps */dummyInteropComponent[/* willReceiveProps */3],
/* didMount */dummyInteropComponent[/* didMount */4],
/* didUpdate */dummyInteropComponent[/* didUpdate */5],
/* willUnmount */dummyInteropComponent[/* willUnmount */6],
/* willUpdate */dummyInteropComponent[/* willUpdate */7],
/* shouldUpdate */dummyInteropComponent[/* shouldUpdate */8],
/* render */dummyInteropComponent[/* render */9],
/* initialState */dummyInteropComponent[/* initialState */10],
/* retainedProps */dummyInteropComponent[/* retainedProps */11],
/* reducer */dummyInteropComponent[/* reducer */12],
/* jsElementWrapped */jsElementWrapped
];
return {
debugName: dummyInteropComponent.debugName,
reactClassInternal: dummyInteropComponent.reactClassInternal,
handedOffState: dummyInteropComponent.handedOffState,
willReceiveProps: dummyInteropComponent.willReceiveProps,
didMount: dummyInteropComponent.didMount,
didUpdate: dummyInteropComponent.didUpdate,
willUnmount: dummyInteropComponent.willUnmount,
willUpdate: dummyInteropComponent.willUpdate,
shouldUpdate: dummyInteropComponent.shouldUpdate,
render: dummyInteropComponent.render,
initialState: dummyInteropComponent.initialState,
retainedProps: dummyInteropComponent.retainedProps,
reducer: dummyInteropComponent.reducer,
jsElementWrapped: jsElementWrapped
};
}
var Router = 0;
var Router = /* alias */0;

@@ -430,0 +429,0 @@ exports.statelessComponent = statelessComponent;

8

lib/js/src/ReasonReactOptimizedCreateClass.js

@@ -11,3 +11,2 @@ 'use strict';

/**

@@ -52,7 +51,5 @@ * Copyright 2013-present, Facebook, Inc.

// }
;
var factory = (
function factory(ReactComponent, isValidElement, ReactNoopUpdateQueue) {
var factory = (function factory(ReactComponent, isValidElement, ReactNoopUpdateQueue) {
/**

@@ -886,4 +883,3 @@ * Policies that describe methods in `ReactClassInterface`.

return createClass;
}
);
});

@@ -890,0 +886,0 @@ var reactNoopUpdateQueue = new React.Component().updater;

28

lib/js/src/ReasonReactRouter.js

@@ -21,4 +21,4 @@ 'use strict';

switch (raw) {
case "" :
case "/" :
case "" :
case "/" :
return /* [] */0;

@@ -57,4 +57,4 @@ default:

switch (raw) {
case "" :
case "#" :
case "" :
case "#" :
return "";

@@ -74,4 +74,4 @@ default:

switch (raw) {
case "" :
case "?" :
case "" :
case "?" :
return "";

@@ -111,7 +111,7 @@ default:

function urlNotEqual(a, b) {
if (a[/* hash */1] !== b[/* hash */1] || a[/* search */2] !== b[/* search */2]) {
if (a.hash !== b.hash || a.search !== b.search) {
return true;
} else {
var _aList = a[/* path */0];
var _bList = b[/* path */0];
var _aList = a.path;
var _bList = b.path;
while(true) {

@@ -138,7 +138,7 @@ var bList = _bList;

function url(param) {
return /* record */[
/* path */path(/* () */0),
/* hash */hash(/* () */0),
/* search */search(/* () */0)
];
return {
path: path(/* () */0),
hash: hash(/* () */0),
search: search(/* () */0)
};
}

@@ -145,0 +145,0 @@

13

package.json
{
"name": "reason-react",
"version": "0.7.1",
"version": "0.8.0-dev.1",
"description": "React bindings for Reason",

@@ -10,3 +10,4 @@ "main": "lib/js/src/ReasonReact.js",

"clean": "bsb -clean-world",
"test": "exit 0"
"test": "yarn clean && yarn build",
"format": "find ./src -iname '*.re' | xargs bsrefmt --in-place && find ./src -iname '*.rei' | xargs bsrefmt -i true --in-place"
},

@@ -26,8 +27,8 @@ "keywords": [

"devDependencies": {
"bs-platform": "5.0.3"
"bs-platform": "^7.0.1"
},
"dependencies": {
"react": ">=16.8.1",
"react-dom": ">=16.8.1"
"peerDependencies": {
"react": "^16.8.1",
"react-dom": "^16.8.1"
}
}

2

README.md
# [ReasonReact](https://reasonml.github.io/reason-react/)
Come join us in [Discord](https://discord.gg/reasonml)!
[![Chat](https://img.shields.io/discord/235176658175262720.svg?logo=discord&colorb=blue)](https://discord.gg/reasonml)

@@ -5,0 +5,0 @@ ## Example

docs/counter.md
.merlin

Sorry, the diff of this file is not supported yet

src/React.re

Sorry, the diff of this file is not supported yet

src/ReactDOMRe.re

Sorry, the diff of this file is not supported yet

src/ReactDOMServerRe.re

Sorry, the diff of this file is not supported yet

src/ReactEvent.re

Sorry, the diff of this file is not supported yet

src/ReactEvent.rei

Sorry, the diff of this file is not supported yet

src/ReasonReact.re

Sorry, the diff of this file is not supported yet

src/ReasonReactOptimizedCreateClass.re

Sorry, the diff of this file is not supported yet

src/ReasonReactRouter.re

Sorry, the diff of this file is not supported yet

yarn.lock

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc