reason-react - npm Package Compare versions

Comparing version 0.6.0 to 0.7.0-alpha.0

docs/counter.md

@@ -13,53 +13,21 @@ ---
   count: int,
-  timerId: ref(option(Js.Global.intervalId))
 };
 
-let component = ReasonReact.reducerComponent("Counter");
+[@react.component]
+let make = () => {
+  let (state, dispatch) = React.useReducer(
+    (state, action) =>
+      switch (action) {
+      | Tick => {count: state.count + 1}
+      },
+    {count: 0}
+  );
 
-let make = _children => {
-  ...component,
-  initialState: () => {count: 0, timerId: ref(None)},
-  reducer: (action, state) =>
-    switch (action) {
-    | Tick => ReasonReact.Update({...state, count: state.count + 1})
-    },
-  didMount: self => {
-    self.state.timerId :=
-      Some(Js.Global.setInterval(() => self.send(Tick), 1000));
-  },
-  willUnmount: self => {
-    switch (self.state.timerId^) {
-    | Some(id) => Js.Global.clearInterval(id)
-    | None => ()
-    }
-  },
-  render: ({state}) =>
-    <div>{ReasonReact.string(string_of_int(state.count))}</div>
+  React.useEffect0(() => {
+    let timerId = Js.Global.setInterval(() => dispatch(Tick), 1000);
+    Some(() => Js.Global.clearInterval(timerId))
+  });
+  
+  <div>{ReasonReact.string(string_of_int(state.count))}</div>;
 };
-```
-
-Or, using the [subscriptions helper](subscriptions-helper.md):
-
-```reason
-type action =
-  | Tick;
-
-type state = {count: int};
-
-let component = ReasonReact.reducerComponent("Counter");
-
-let make = _children => {
-  ...component,
-  initialState: () => {count: 0},
-  didMount: self => {
-    let intervalId = Js.Global.setInterval(() => self.send(Tick), 1000);
-    self.onUnmount(() => Js.Global.clearInterval(intervalId));
-  },
-  reducer: (action, state) =>
-    switch (action) {
-    | Tick => ReasonReact.Update({count: state.count + 1})
-    },
-  render: ({state}) =>
-    <div>{ReasonReact.string(string_of_int(state.count))}</div>
-};
-```
+```

docs/installation.md

@@ -7,6 +7,8 @@ ---
 
-## Bsb
+## BuckleScript
 
+[BuckleScript](http://bucklescript.github.io/) compiles ReasonML code to JavaScript. You can get it with:
+
 ```sh
-npm install -g bs-platform
+npm install --global bs-platform
 bsb -init my-react-app -theme react
@@ -13,0 +15,0 @@ cd my-react-app && npm install && npm start

docs/interop.md

@@ -52,3 +52,3 @@ ---
 
-A ReasonReact component **is not** a ReactJS component. We provide hooks to communicate between the two.
+A ReasonReact record component **is not** a ReactJS component. We provide hooks to communicate between the two.
 
@@ -55,0 +55,0 @@ Whether you're using an existing ReactJS component or providing a ReasonReact component for consumption on the JS side, you need to establish the type of the JS props you'd convert from/to, by using [BuckleScript's `bs.deriving abstract`](https://bucklescript.github.io/docs/en/object.html):

docs/intro-example.md

@@ -12,9 +12,4 @@ ---
 
-let component = ReasonReact.statelessComponent("Greeting");
-
-/* underscores before names indicate unused variables. We name them for clarity */
-let make = (~name, _children) => {
-  ...component,
-  render: (_self) => <button> {ReasonReact.string("Hello " ++ name ++ "!")} </button>
-};
+let make = (~name) =>
+  <button> {ReasonReact.string("Hello " ++ name ++ "!")} </button>;
 ```
@@ -21,0 +16,0 @@

docs/js-using-reason.md

@@ -9,37 +9,11 @@ ---
 /* ReasonReact used by ReactJS */
-/* This is just a normal stateless component. The only change you need to turn
-   it into a ReactJS-compatible component is the wrapReasonForJs call below */
-let component = ReasonReact.statelessComponent("PageReason");
-
-let make = (~message, ~extraGreeting=?, _children) => {
-  ...component,
-  render: _self => {
-    let greeting =
-      switch (extraGreeting) {
-      | None => "How are you?"
-      | Some(g) => g
-      };
-    <div> <MyBannerRe show=true message={message ++ " " ++ greeting} /> </div>;
-  },
+[@react.component]
+let make = (~message, ~extraGreeting=?) => {
+  let greeting =
+    switch (extraGreeting) {
+    | None => "How are you?"
+    | Some(g) => g
+    };
+  <div> <MyBannerRe show=true message={message ++ " " ++ greeting} /> </div>;
 };
-
-/* The following exposes a `jsComponent` that the ReactJS side can use as
-   require('greetingRe.js').jsComponent */
-[@bs.deriving abstract]
-type jsProps = {
-  message: string,
-  extraGreeting: Js.nullable(string),
-};
-
-/* if **you know what you're doing** and have
-   the correct babel/webpack setup, you can also do `let default = ...` and use it
-   on the JS side as a default export. */
-let jsComponent =
-  ReasonReact.wrapReasonForJs(~component, jsProps =>
-    make(
-      ~message=jsProps->messageGet,
-      ~extraGreeting=?Js.Nullable.toOption(jsProps->extraGreetingGet),
-      [||],
-    )
-  );
 ```
@@ -50,3 +24,3 @@
 ```javascript
-var PageReason = require('path/to/PageReason.js').jsComponent;
+var PageReason = require('path/to/PageReason.js').make;
 ```

docs/jsx.md

@@ -5,4 +5,6 @@ ---
 
-Reason comes with the [JSX](https://reasonml.github.io/docs/en/jsx.html) syntax! ReasonReact transforms it from an agnostic function call into a ReasonReact-specific call through a macro. To take advantage of ReasonReact JSX, put `{"reason": {"react-jsx": 2}` in your [`bsconfig.json`](https://bucklescript.github.io/docs/en/build-configuration.html#reason-refmt) (schema [here](http://bucklescript.github.io/bucklescript/docson/#build-schema.json)).
+Reason comes with the [JSX](https://reasonml.github.io/docs/en/jsx.html) syntax! ReasonReact has two different transforms that you can use for your components. This doc covers Version 3 of the transform which is very similar to how [the ReactJS JSX transform](https://reactjs.org/docs/introducing-jsx.html) works. To use it, put `{"reason": {"react-jsx": 3}` in your [`bsconfig.json`](https://bucklescript.github.io/docs/en/build-configuration.html#reason-refmt) (schema [here](http://bucklescript.github.io/bucklescript/docson/#build-schema.json)).
 
+[Version 2](jsx-2.md) is used to render Reducer style components which require special interop to handle the ways they differ from ReactJS components. If you are starting a new project you can stick to version 3 all the time.
+
 ## Uncapitalized
@@ -17,3 +19,7 @@
 ```reason
-ReactDOMRe.createElement("div", ~props=ReactDOMRe.props(~foo=bar, ()), [|child1, child2|]);
+ReactDOMRe.createDOMElementVariadic(
+  "div",
+  ~props=ReactDOMRe.domProps(~foo=bar, ()),
+  [|child1, child2|]
+);
 ```
@@ -30,3 +36,7 @@
 ```reason
-ReactDOMRe.createElement("div", [||]);
+ReactDOMRe.createDOMElementVariadic(
+  "div",
+  ~props=ReactDOMRe.domProps(),
+  [||]
+);
 ```
@@ -37,6 +47,6 @@
 ```js
-React.createElement('div', undefined)
+React.createElement('div', {})
 ```
 
-**Note that `ReactDOMRe.createElement` is intended for internal use by the JSX transform**. For escape-hatch scenarios, use `ReasonReact.createDomElement` instead, as outlined in the [children section](children.md).
+## TODO - should you use the above outside the ppx? Probs not.
 
@@ -52,15 +62,45 @@ ## Capitalized
 ```reason
-ReasonReact.element(
-  ~key=a,
-  ~ref=b,
-  MyReasonComponent.make(~foo=bar, ~baz=qux, [|child1, child2|])
+React.createElementVariadic(
+  MyReasonComponent.make,
+  MyReasonComponent.makeProps(
+    ~key=a,
+    ~ref=b,
+    ~foo=bar,
+    ~baz=qux,
+    ~children=React.null,
+    ()
+  ),
+  [|child1, child2|]
 );
 ```
 
+which compiles to
+
+```js
+React.createElement(
+  MyReasonComponent.make,
+  {
+    key: a,
+    ref: b,
+    foo: bar,
+    baz: qux,
+    children: null,
+  },
+  child1,
+  child2,
+);
+```
+
 Prop-less `<MyReasonComponent />` transforms into
 
 ```reason
-ReasonReact.element(MyReasonComponent.make([||]));
+React.createElement(MyReasonComponent.make, MyReasonComponent.makeProps());
 ```
 
+which compiles to
+
+```js
+React.createElement(MyReasonComponent.make, {});
+```
+
 The `make` above is exactly the same `make` function you've seen in the previous section.
@@ -96,34 +136,8 @@
 
-You're effectively passing the array `[| <div />, <div /> |]` to `MyReasonComponent`'s children. But this also means that the following wouldn't work:
+You're effectively passing the array `[| <div />, <div /> |]` to `MyReasonComponent`'s children. If you pass a single child like so:
 
 ```reason
-let theChildren = [| <div />, <div /> |];
-<MyReasonComponent> theChildren </MyReasonComponent>
+<MyReasonComponent> <div /> </MyReasonComponent>
 ```
 
-Because this actually translates to:
-
-```reason
-let theChildren = [| <div />, <div /> |];
-ReasonReact.element(
-  MyReasonComponent.make([|theChildren|])
-);
-```
-
-Which wraps the already wrapped `theChildren` in another layer of array. To solve this issue, Reason has a special [children spread syntax](https://reasonml.github.io/docs/en/jsx.html#children-spread):
-
-```reason
-let theChildren = [| <div />, <div /> |];
-<MyReasonComponent> ...theChildren </MyReasonComponent>
-```
-
-This simply passes `theChildren` without array wrapping. It becomes:
-
-```reason
-let theChildren = [| <div />, <div /> |];
-ReasonReact.element(
-  MyReasonComponent.make(theChildren)
-);
-```
-
-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)!
+We unwrap this for you automatically to just `<div />` instead of an array of a single element.

docs/reason-using-js.md

@@ -28,19 +28,4 @@ ---
 /* 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`. */
-[@bs.module] external myBanner : ReasonReact.reactClass = "./MyBanner";
-
-[@bs.deriving abstract]
-type jsProps = {
-  show: bool,
-  message: string,
-};
-
-/* 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=jsProps(~show, ~message),
-    children,
-  );
+[@react.component] [@bs.module]
+external make : (~show: bool, ~message: string) => React.element = "./MyBanner";
 ```

docs/simple.md

@@ -8,11 +8,6 @@ ---
 ```reason
-let component = ReasonReact.statelessComponent("Page");
+let handleClick = (_event) => Js.log("clicked!");
 
-let handleClick = (_event, _self) => Js.log("clicked!");
-
-let make = (~message, _children) => {
-  ...component,
-  render: self =>
-    <div onClick={self.handle(handleClick)}>{ReasonReact.string(message)}</div>
-};
+let make = (~message) =>
+  <div onClick={handleClick}>{React.string(message)}</div>;
 ```
@@ -29,3 +24,3 @@
 ```reason
-ReactDOMRe.renderToElementWithId(ReasonReact.element(make(~message="Hello!", [||])), "index");
+ReactDOMRe.renderToElementWithId(React.createElement(Page.make, Page.makeProps(~message="Hello!", ())), "index");
 ```

HISTORY.md

@@ -0,1 +1,23 @@
+# 0.7.0
+
+Support for [React Hooks API](https://reactjs.org/docs/hooks-intro.html). Allows for writing function components with state and complex interactions.
+
+You can now write components like
+
+```reason
+[@react.component]
+let make = (~className, ~text) => <div className> {text} </div>;
+```
+
+which will compile to a 0-cost React component that looks like
+
+```js
+let make = ({className, text}) => <div className> {text} </div>;
+```
+
+These components use a new PPX shipped with BuckleScript 5.0.0+. Please read the documentation for more.
+
+There is no breaking change here, but if you're interested in migrating some components the upgrade script is [provided](https://github.com/rickyvetter/upgrade-reason-react#installation). It will wrap existing ReasonReact components as if they are Hooks components.
+
+
 # 0.6.0
@@ -11,4 +33,4 @@
 
-- Fix issue with react-hot-loader (#298)
-- `ReasonReact.Router.replace` to replace state
+- Fix issue with react-hot-loader (#298).
+- `ReasonReact.Router.replace` to replace state.
 
@@ -15,0 +37,0 @@ # 0.5.0

lib/js/src/ReactDOMRe.js

@@ -59,2 +59,4 @@ 'use strict';
 
+var Ref = /* module */[];
+
 function createElementVariadic(domClassName, props, children) {
@@ -87,4 +89,5 @@ var variadicArguments = /* array */[
 exports.hydrateToElementWithId = hydrateToElementWithId;
+exports.Ref = Ref;
 exports.createElementVariadic = createElementVariadic;
 exports.Style = Style;
 /* react Not a pure module */

lib/js/src/ReasonReact.js

@@ -5,3 +5,3 @@ 'use strict';
 var React = require("react");
-var Js_primitive = require("bs-platform/lib/js/js_primitive.js");
+var Caml_option = require("bs-platform/lib/js/caml_option.js");
 var Caml_builtin_exceptions = require("bs-platform/lib/js/caml_builtin_exceptions.js");
@@ -18,7 +18,7 @@ var ReasonReactOptimizedCreateClass = require("./ReasonReactOptimizedCreateClass.js");
 
-function anyToUnit() {
+function anyToUnit(param) {
   return /* () */0;
 }
 
-function anyToTrue() {
+function anyToTrue(param) {
   return true;
@@ -31,11 +31,11 @@ }
 
-function renderDefault() {
+function renderDefault(_self) {
   return "RenderNotImplemented";
 }
 
-function initialStateDefault() {
+function initialStateDefault(param) {
   return /* () */0;
 }
 
-function reducerDefault(_, _$1) {
+function reducerDefault(_action, _state) {
   return /* NoUpdate */0;
@@ -48,3 +48,3 @@ }
     if (jsPropsToReason !== undefined) {
-      return /* Element */[Js_primitive.valFromOption(jsPropsToReason)(props)];
+      return /* Element */[Caml_option.valFromOption(jsPropsToReason)(props)];
     } else {
@@ -76,3 +76,3 @@ throw [
               getInitialState: (function () {
-                  var thisJs = (this);
+                  var thisJs = this;
                   var convertedReasonProps = convertPropsIfTheyreFromJs(thisJs.props, thisJs.jsPropsToReason, debugName);
@@ -85,3 +85,3 @@ return {
                   var $$this = this ;
-                  var thisJs = (this);
+                  var thisJs = this;
                   var convertedReasonProps = convertPropsIfTheyreFromJs(thisJs.props, thisJs.jsPropsToReason, debugName);
@@ -100,3 +100,3 @@ var component = convertedReasonProps[0];
                   var $$this = this ;
-                  var thisJs = (this);
+                  var thisJs = this;
                   var curState = thisJs.state;
@@ -133,3 +133,3 @@ var curReasonState = curState.reasonState;
                   var $$this = this ;
-                  var thisJs = (this);
+                  var thisJs = this;
                   var convertedReasonProps = convertPropsIfTheyreFromJs(thisJs.props, thisJs.jsPropsToReason, debugName);
@@ -154,3 +154,3 @@ var component = convertedReasonProps[0];
                   var $$this = this ;
-                  var thisJs = (this);
+                  var thisJs = this;
                   var newConvertedReasonProps = convertPropsIfTheyreFromJs(nextProps, thisJs.jsPropsToReason, debugName);
@@ -187,3 +187,3 @@ var newComponent = newConvertedReasonProps[0];
                   var $$this = this ;
-                  var thisJs = (this);
+                  var thisJs = this;
                   var newConvertedReasonProps = convertPropsIfTheyreFromJs(nextProps, thisJs.jsPropsToReason, debugName);
@@ -196,3 +196,3 @@ var newComponent = newConvertedReasonProps[0];
                     var oldComponent = oldConvertedReasonProps[0];
-                    return thisJs.setState((function (curTotalState, _) {
+                    return thisJs.setState((function (curTotalState, param) {
                                   var curReasonState = curTotalState.reasonState;
@@ -213,5 +213,5 @@ var oldSelf = $$this.self(curReasonState, oldComponent[/* retainedProps */11]);
                 }),
-              shouldComponentUpdate: (function (nextJsProps, nextState, _) {
+              shouldComponentUpdate: (function (nextJsProps, nextState, param) {
                   var $$this = this ;
-                  var thisJs = (this);
+                  var thisJs = this;
                   var curJsProps = thisJs.props;
@@ -259,3 +259,3 @@ var oldConvertedReasonProps = convertPropsIfTheyreFromJs(thisJs.props, thisJs.jsPropsToReason, debugName);
                   var $$this = this ;
-                  var thisJs = (this);
+                  var thisJs = this;
                   return (function (callbackPayload) {
@@ -270,11 +270,11 @@ var curState = thisJs.state;
                   var $$this = this ;
-                  var thisJs = (this);
+                  var thisJs = this;
                   var convertedReasonProps = convertPropsIfTheyreFromJs(thisJs.props, thisJs.jsPropsToReason, debugName);
                   var component = convertedReasonProps[0];
                   if (component[/* reducer */12] !== reducerDefault) {
-                    var sideEffects = /* record */[/* contents */(function () {
+                    var sideEffects = /* record */[/* contents */(function (prim) {
                           return /* () */0;
                         })];
                     var partialStateApplication = Curry._1(component[/* reducer */12], action);
-                    return thisJs.setState((function (curTotalState, _) {
+                    return thisJs.setState((function (curTotalState, param) {
                                   var curReasonState = curTotalState.reasonState;
@@ -314,3 +314,3 @@ var reasonStateUpdate = Curry._1(partialStateApplication, curReasonState);
                                   }
-                                }), $$this.handleMethod((function (_, self) {
+                                }), $$this.handleMethod((function (param, self) {
                                       return Curry._1(sideEffects[/* contents */0], self);
@@ -324,3 +324,3 @@ })));
                   var $$this = this ;
-                  var thisJs = (this);
+                  var thisJs = this;
                   var convertedReasonProps = convertPropsIfTheyreFromJs(thisJs.props, thisJs.jsPropsToReason, debugName);
@@ -381,3 +381,3 @@ var created = convertedReasonProps[0];
   var tmp = component[/* reactClassInternal */1].prototype;
-  tmp.jsPropsToReason = Js_primitive.some(uncurriedJsPropsToReason);
+  tmp.jsPropsToReason = Caml_option.some(uncurriedJsPropsToReason);
   return component[/* reactClassInternal */1];
@@ -423,144 +423,4 @@ }
 
-function safeMakeEvent(eventName) {
-  if (typeof Event === "function") {
-    return new Event(eventName);
-  } else {
-    var $$event = document.createEvent("Event");
-    $$event.initEvent(eventName, true, true);
-    return $$event;
-  }
-}
+var Router = 0;
 
-function path() {
-  var match = typeof (window) === "undefined" ? undefined : (window);
-  if (match !== undefined) {
-    var raw = match.location.pathname;
-    switch (raw) {
-      case "" : 
-      case "/" : 
-          return /* [] */0;
-      default:
-        var raw$1 = raw.slice(1);
-        var match$1 = raw$1[raw$1.length - 1 | 0];
-        var raw$2 = match$1 === "/" ? raw$1.slice(0, -1) : raw$1;
-        var a = raw$2.split("/");
-        var _i = a.length - 1 | 0;
-        var _res = /* [] */0;
-        while(true) {
-          var res = _res;
-          var i = _i;
-          if (i < 0) {
-            return res;
-          } else {
-            _res = /* :: */[
-              a[i],
-              res
-            ];
-            _i = i - 1 | 0;
-            continue ;
-          }
-        };
-    }
-  } else {
-    return /* [] */0;
-  }
-}
-
-function hash() {
-  var match = typeof (window) === "undefined" ? undefined : (window);
-  if (match !== undefined) {
-    var raw = match.location.hash;
-    switch (raw) {
-      case "" : 
-      case "#" : 
-          return "";
-      default:
-        return raw.slice(1);
-    }
-  } else {
-    return "";
-  }
-}
-
-function search() {
-  var match = typeof (window) === "undefined" ? undefined : (window);
-  if (match !== undefined) {
-    var raw = match.location.search;
-    switch (raw) {
-      case "" : 
-      case "?" : 
-          return "";
-      default:
-        return raw.slice(1);
-    }
-  } else {
-    return "";
-  }
-}
-
-function push(path) {
-  var match = typeof (history) === "undefined" ? undefined : (history);
-  var match$1 = typeof (window) === "undefined" ? undefined : (window);
-  if (match !== undefined && match$1 !== undefined) {
-    match.pushState(null, "", path);
-    match$1.dispatchEvent(safeMakeEvent("popstate"));
-    return /* () */0;
-  } else {
-    return /* () */0;
-  }
-}
-
-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() {
-  return /* record */[
-          /* path */path(/* () */0),
-          /* hash */hash(/* () */0),
-          /* search */search(/* () */0)
-        ];
-}
-
-function watchUrl(callback) {
-  var match = typeof (window) === "undefined" ? undefined : (window);
-  if (match !== undefined) {
-    var watcherID = function () {
-      return Curry._1(callback, url(/* () */0));
-    };
-    match.addEventListener("popstate", watcherID);
-    return watcherID;
-  } else {
-    return (function () {
-        return /* () */0;
-      });
-  }
-}
-
-function unwatchUrl(watcherID) {
-  var match = typeof (window) === "undefined" ? undefined : (window);
-  if (match !== undefined) {
-    match.removeEventListener("popstate", watcherID);
-    return /* () */0;
-  } else {
-    return /* () */0;
-  }
-}
-
-var Router = [
-  push,
-  replace,
-  watchUrl,
-  unwatchUrl,
-  url
-];
-
 exports.statelessComponent = statelessComponent;
@@ -567,0 +427,0 @@ exports.statelessComponentWithRetainedProps = statelessComponentWithRetainedProps;

package.json

 {
   "name": "reason-react",
-  "version": "0.6.0",
+  "version": "0.7.0-alpha.0",
   "description": "React bindings for Reason",
@@ -28,5 +28,5 @@ "main": "lib/js/src/ReasonReact.js",
   "dependencies": {
-    "react": ">=15.0.0 || >=16.0.0",
-    "react-dom": ">=15.0.0 || >=16.0.0"
+    "react": ">=16.8.1",
+    "react-dom": ">=16.8.1"
   }
 }

New alerts

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

5222081

increased by36.85%

Number of package files

152

increased by33.33%

Lines of code

3246

increased by95.19%

Worsened metrics

Number of medium supply chain risk alerts

50

increased by47.06%

Dependency changes

• Updatedreact@>=16.8.1

• Updatedreact-dom@>=16.8.1