reasonml-old / reason-react-example Goto Github PK
View Code? Open in Web Editor NEWExamples for ReasonReact
Examples for ReasonReact
@glennsl (since discord is down again. Also, I'm on freenode #reasonml)
Assuming ReactEventRe.Form.target event
returns ReasonJs.Dom.element
or ReasonJs.Dom.eventTarget
, what reason-js function do I use to get the equivalent of myEvent.value
? How would it work without unsafe cast to whatever type here?
I tried to get rid of it and just do
module WholeThing = {
include ReactRe.CreateComponent {
include ReactRe.Component;
let name = "Foo";
type props = {message: string};
let render {props} => <div> (ReactRe.stringToElement props.message) </div>;
};
let createElement ::message => wrapProps {message: message};
};
but I got this fascinating error
Error: This functor has type
functor (CompleteComponentSpec : ReactRe.CompleteComponentSpec) ->
sig
val comp : ReactRe.reactClass
val wrapProps :
CompleteComponentSpec.props ->
children:ReactRe.reactElement list ->
?ref:(ReactRe.reactRef -> unit) ->
?key:string -> unit -> ReactRe.reactElement
end
The parameter cannot be eliminated in the result type.
Please bind the argument to a module identifier.
Which appears to be saying that it actually requires you to make an intermediate module Foo
.
Any idea what's going on? It'd be rather annoying to have to do this everywhere
There's a comment at the top of bsconfig.json
:
This is the BuckleScript configuration file. Note that this is a comment;
BuckleScript comes with a JSON parser that supports comments and trailing
comma. If this screws with your editor highlighting, please tell us by filing
an issue!
I'm using VSCode and it red-squiggly-underlines the trailing commas. Doesn't really bother me but I'm posing since the comment asks me to.
Specifically what files are include:
src
?lib/js
?lib/ocaml
?ideally this can go into .npmignore
or files
section in package.json
Appears to be 404'ing on loading the assets as a file://
resource, but they definitely exist.
file:///Users/callen/work/reason-react-example/bundledOutputs/todomvc.js
was among the failures for the TodoMVC page.
$ ls -alh bundledOutputs
total 2248
drwxr-xr-x 9 callen staff 288B Apr 22 20:51 .
drwxr-xr-x 15 callen staff 480B Apr 22 20:59 ..
-rw-r--r-- 1 callen staff 274K Apr 22 21:00 animation.js
-rw-r--r-- 1 callen staff 118K Apr 22 21:00 async.js
-rw-r--r-- 1 callen staff 173K Apr 22 21:00 fetch.js
-rw-r--r-- 1 callen staff 118K Apr 22 21:00 interop.js
-rw-r--r-- 1 callen staff 118K Apr 22 21:00 retainedProps.js
-rw-r--r-- 1 callen staff 118K Apr 22 21:00 simple.js
-rw-r--r-- 1 callen staff 189K Apr 22 21:00 todomvc.js
Seems to exist, not sure what's I might be doing wrong here.
From the README: https://discord.gg/reasonml
Followed the install instructions, but got this when I ran "npm run build"
ERROR in ./lib/js/src/todomvc/app.js
Module not found: Error: Cannot resolve module 'director/build/director' in /Users/gary/dev/reason-react-example/lib/js/src/todomvc
Ideas?
thanks.
The uppercase filenames changed in d286198, is not pointed to by the webpack config file - which makes the npm run build
fail.
Newest Safari (on macOS 10.12.4) features ES6 imports, investigate ditching webpack bundling and add instructions to the README
What are your thoughts on changing todo-mvc to model the todos as an array instead of a list.
Use array. React children should probably not be modeled as a list
Here's what I've done
git clone https://github.com/chenglou/reason-react-example.git
cd reason-react-example
yarn install
yarn start
# in another tab
yarn webpack
The webpack command returns
$ webpack -w
/home/kabo/Documents/reason-react-example/node_modules/webpack-cli/bin/config-yargs.js:89
describe: optionsSchema.definitions.output.properties.path.description,
^
TypeError: Cannot read property 'properties' of undefined
at module.exports (/home/kabo/Documents/reason-react-example/node_modules/webpack-cli/bin/config-yargs.js:89:48)
at /home/kabo/Documents/reason-react-example/node_modules/webpack-cli/bin/webpack.js:60:27
at Object.<anonymous> (/home/kabo/Documents/reason-react-example/node_modules/webpack-cli/bin/webpack.js:515:3)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Seems like a webpack-cli bug I thought to myself.
yarn upgrade-interactive --latest # upgraded webpack-cli to 3.1.2
yarn webpack
This time the webpack command returns
$ webpack -w
webpack is watching the files…
Hash: a96d3768fd9798477d52
Version: webpack 4.20.2
Time: 1296ms
Built at: 2018-09-30 17:27:31
Asset Size Chunks Chunk Names
animation.js 840 KiB animation [emitted] animation
async.js 101 KiB async [emitted] async
fetch.js 139 KiB fetch [emitted] fetch
interop.js 773 KiB interop [emitted] interop
retainedProps.js 73.6 KiB retainedProps [emitted] retainedProps
simple.js 98.3 KiB simple [emitted] simple
todomvc.js 431 KiB todomvc [emitted] todomvc
Entrypoint async = async.js
Entrypoint simple = simple.js
Entrypoint fetch = fetch.js
Entrypoint todomvc = todomvc.js
Entrypoint interop = interop.js
Entrypoint retainedProps = retainedProps.js
Entrypoint animation = animation.js
[./src/animation/AnimationRoot.bs.js] 359 bytes {animation} [built]
[./src/animation/Reanimate.bs.js] 55.4 KiB {animation} [built]
[./src/async/Counter.bs.js] 1.82 KiB {async} [built]
[./src/async/CounterRoot.bs.js] 328 bytes {async} [built]
[./src/fetch/FetchExample.bs.js] 3.92 KiB {fetch} [built]
[./src/fetch/FetchExampleRoot.bs.js] 343 bytes {fetch} [built]
[./src/interop/GreetingRe.bs.js] 1.7 KiB {interop} [built]
[./src/interop/InteropRoot.js] 578 bytes {interop} [built]
[./src/retainedProps/RetainedPropsExample.bs.js] 1.5 KiB {retainedProps} [built]
[./src/retainedProps/RetainedPropsRoot.bs.js] 626 bytes {retainedProps} [built]
[./src/simple/Page.bs.js] 1.42 KiB {simple} [built]
[./src/simple/SimpleRoot.bs.js] 329 bytes {simple} [built]
[./src/todomvc/App.bs.js] 16.2 KiB {todomvc} [built]
[./src/todomvc/TodoFooter.bs.js] 3.83 KiB {todomvc} [built]
[./src/todomvc/TodoItem.bs.js] 7.62 KiB {todomvc} [built]
+ 59 hidden modules
ERROR in ./src/fetch/FetchExample.bs.js
Module not found: Error: Can't resolve '@glennsl/bs-json/src/Json_decode.bs.js' in '/home/kabo/Documents/reason-react-example/src/fetch'
@ ./src/fetch/FetchExample.bs.js 7:0-70 11:12-29 12:17-34 12:35-53
@ ./src/fetch/FetchExampleRoot.bs.js
ERROR in ./src/animation/AnimationRoot.bs.js
Module not found: Error: Can't resolve 'reason-react/src/ReactDOMRe.js' in '/home/kabo/Documents/reason-react-example/src/animation'
@ ./src/animation/AnimationRoot.bs.js 4:0-61 7:0-32
ERROR in ./src/async/CounterRoot.bs.js
Module not found: Error: Can't resolve 'reason-react/src/ReactDOMRe.js' in '/home/kabo/Documents/reason-react-example/src/async'
@ ./src/async/CounterRoot.bs.js 4:0-61 7:0-32
ERROR in ./src/fetch/FetchExampleRoot.bs.js
Module not found: Error: Can't resolve 'reason-react/src/ReactDOMRe.js' in '/home/kabo/Documents/reason-react-example/src/fetch'
@ ./src/fetch/FetchExampleRoot.bs.js 3:0-61 7:0-32
ERROR in ./src/retainedProps/RetainedPropsRoot.bs.js
Module not found: Error: Can't resolve 'reason-react/src/ReactDOMRe.js' in '/home/kabo/Documents/reason-react-example/src/retainedProps'
@ ./src/retainedProps/RetainedPropsRoot.bs.js 3:0-61 12:9-41
and the output continues like that for a good deal longer.
Any ideas?
Doesn't have to succeed. Just showing a demo + error handling
Specifically the current interop demo only showcased prop types of simple scalars, but I wonder how one could do it for complex types (e.g. { match: { params } }
in react-router v4).
Thanks!
I am receiving the errors below when trying to create a build after cloning the repo and installing the dependencies. I looked at the closed build-related issues but did not see anything that appeared applicable to these errors. I've also included a list of applicable global packages, which seems to work fine when bootstrapping a new project as outlined in the Reason-React Getting Started guide. Sorry if I am missing something obvious, but I am pretty unfamiliar with Reason syntax and was just hoping to play around with the examples. Thank you!
Global packages:
/Users/JW/.nvm/versions/node/v8.9.4/lib
[email protected]
[email protected]
jw:reason-react-example JW$ npm run build
> [email protected] build /Users/JW/Code/reason-react-example
> bsb -make-world && webpack
ninja: no work to do.
ninja: no work to do.
ninja: no work to do.
ninja: Entering directory `lib/bs'
[3/30] Building src/retainedProps/RetainedPropsRoot.mlast
FAILED: src/retainedProps/RetainedPropsRoot.mlast
/Users/JW/Code/reason-react-example/node_modules/bs-platform/lib/bsc.exe -pp "/Users/JW/Code/reason-react-example/node_modules/bs-platform/lib/refmt3.exe --print binary" -ppx '/Users/JW/Code/reason-react-example/node_modules/bs-platform/lib/reactjs_jsx_ppx_2.exe' -w -30-40+6+7+27+32..39+44+45+101 -nostdlib -I '/Users/JW/Code/reason-react-example/node_modules/bs-platform/lib/ocaml' -bs-no-version-header -bs-super-errors -no-alias-deps -color always -c -o src/retainedProps/RetainedPropsRoot.mlast -bs-syntax-only -bs-binary-ast -impl /Users/JW/Code/reason-react-example/src/retainedProps/RetainedPropsRoot.re
File "/Users/JW/Code/reason-react-example/src/retainedProps/RetainedPropsRoot.re", line 8, characters 2-3:
Error: 2817: <UNKNOWN SYNTAX ERROR>
We've found a bug for you!
/Users/JW/Code/reason-react-example/src/retainedProps/RetainedPropsRoot.re
There's been an error running Reason's refmt parser on a file.
This was the command:
/Users/JW/Code/reason-react-example/node_modules/bs-platform/lib/refmt3.exe --print binary '/Users/JW/Code/reason-react-example/src/retainedProps/RetainedPropsRoot.re' > /var/folders/bw/t_85ljs94jq9l52vg9xld10m0000gp/T/ocamlppde3469
Please file an issue on github.com/facebook/reason. Thanks!
[4/30] Building src/logo/Logo.mlast
FAILED: src/logo/Logo.mlast
/Users/JW/Code/reason-react-example/node_modules/bs-platform/lib/bsc.exe -pp "/Users/JW/Code/reason-react-example/node_modules/bs-platform/lib/refmt3.exe --print binary" -ppx '/Users/JW/Code/reason-react-example/node_modules/bs-platform/lib/reactjs_jsx_ppx_2.exe' -w -30-40+6+7+27+32..39+44+45+101 -nostdlib -I '/Users/JW/Code/reason-react-example/node_modules/bs-platform/lib/ocaml' -bs-no-version-header -bs-super-errors -no-alias-deps -color always -c -o src/logo/Logo.mlast -bs-syntax-only -bs-binary-ast -impl /Users/JW/Code/reason-react-example/src/logo/Logo.re
File "/Users/JW/Code/reason-react-example/src/logo/Logo.re", line 55, characters 6-7:
Error: 2538: <UNKNOWN SYNTAX ERROR>
We've found a bug for you!
/Users/JW/Code/reason-react-example/src/logo/Logo.re
There's been an error running Reason's refmt parser on a file.
This was the command:
/Users/JW/Code/reason-react-example/node_modules/bs-platform/lib/refmt3.exe --print binary '/Users/JW/Code/reason-react-example/src/logo/Logo.re' > /var/folders/bw/t_85ljs94jq9l52vg9xld10m0000gp/T/ocamlpp4d12bc
Please file an issue on github.com/facebook/reason. Thanks!
[5/30] Building src/fetch/FetchExample.mlast
FAILED: src/fetch/FetchExample.mlast
/Users/JW/Code/reason-react-example/node_modules/bs-platform/lib/bsc.exe -pp "/Users/JW/Code/reason-react-example/node_modules/bs-platform/lib/refmt3.exe --print binary" -ppx '/Users/JW/Code/reason-react-example/node_modules/bs-platform/lib/reactjs_jsx_ppx_2.exe' -w -30-40+6+7+27+32..39+44+45+101 -nostdlib -I '/Users/JW/Code/reason-react-example/node_modules/bs-platform/lib/ocaml' -bs-no-version-header -bs-super-errors -no-alias-deps -color always -c -o src/fetch/FetchExample.mlast -bs-syntax-only -bs-binary-ast -impl /Users/JW/Code/reason-react-example/src/fetch/FetchExample.re
File "/Users/JW/Code/reason-react-example/src/fetch/FetchExample.re", line 47, characters 6-7:
Error: 2960: <UNKNOWN SYNTAX ERROR>
We've found a bug for you!
/Users/JW/Code/reason-react-example/src/fetch/FetchExample.re
There's been an error running Reason's refmt parser on a file.
This was the command:
/Users/JW/Code/reason-react-example/node_modules/bs-platform/lib/refmt3.exe --print binary '/Users/JW/Code/reason-react-example/src/fetch/FetchExample.re' > /var/folders/bw/t_85ljs94jq9l52vg9xld10m0000gp/T/ocamlpp9652ec
Please file an issue on github.com/facebook/reason. Thanks!
[6/30] Building src/retainedProps/RetainedPropsExample.mlast
FAILED: src/retainedProps/RetainedPropsExample.mlast
/Users/JW/Code/reason-react-example/node_modules/bs-platform/lib/bsc.exe -pp "/Users/JW/Code/reason-react-example/node_modules/bs-platform/lib/refmt3.exe --print binary" -ppx '/Users/JW/Code/reason-react-example/node_modules/bs-platform/lib/reactjs_jsx_ppx_2.exe' -w -30-40+6+7+27+32..39+44+45+101 -nostdlib -I '/Users/JW/Code/reason-react-example/node_modules/bs-platform/lib/ocaml' -bs-no-version-header -bs-super-errors -no-alias-deps -color always -c -o src/retainedProps/RetainedPropsExample.mlast -bs-syntax-only -bs-binary-ast -impl /Users/JW/Code/reason-react-example/src/retainedProps/RetainedPropsExample.re
File "/Users/JW/Code/reason-react-example/src/retainedProps/RetainedPropsExample.re", line 12, characters 2-3:
Error: 2547: <UNKNOWN SYNTAX ERROR>
We've found a bug for you!
/Users/JW/Code/reason-react-example/src/retainedProps/RetainedPropsExample.re
There's been an error running Reason's refmt parser on a file.
This was the command:
/Users/JW/Code/reason-react-example/node_modules/bs-platform/lib/refmt3.exe --print binary '/Users/JW/Code/reason-react-example/src/retainedProps/RetainedPropsExample.re' > /var/folders/bw/t_85ljs94jq9l52vg9xld10m0000gp/T/ocamlppcd7769
Please file an issue on github.com/facebook/reason. Thanks!
[7/30] Building src/todomvc/App.mlast
FAILED: src/todomvc/App.mlast
/Users/JW/Code/reason-react-example/node_modules/bs-platform/lib/bsc.exe -pp "/Users/JW/Code/reason-react-example/node_modules/bs-platform/lib/refmt3.exe --print binary" -ppx '/Users/JW/Code/reason-react-example/node_modules/bs-platform/lib/reactjs_jsx_ppx_2.exe' -w -30-40+6+7+27+32..39+44+45+101 -nostdlib -I '/Users/JW/Code/reason-react-example/node_modules/bs-platform/lib/ocaml' -bs-no-version-header -bs-super-errors -no-alias-deps -color always -c -o src/todomvc/App.mlast -bs-syntax-only -bs-binary-ast -impl /Users/JW/Code/reason-react-example/src/todomvc/App.re
File "/Users/JW/Code/reason-react-example/src/todomvc/App.re", line 71, characters 8-9:
Error: 2960: <UNKNOWN SYNTAX ERROR>
We've found a bug for you!
/Users/JW/Code/reason-react-example/src/todomvc/App.re
There's been an error running Reason's refmt parser on a file.
This was the command:
/Users/JW/Code/reason-react-example/node_modules/bs-platform/lib/refmt3.exe --print binary '/Users/JW/Code/reason-react-example/src/todomvc/App.re' > /var/folders/bw/t_85ljs94jq9l52vg9xld10m0000gp/T/ocamlppd591ab
Please file an issue on github.com/facebook/reason. Thanks!
[8/30] Building src/fetch/FetchExampleRoot.mlast
ninja: error: rebuilding 'build.ninja': subcommand failed
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build: `bsb -make-world && webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/JW/.npm/_logs/2018-02-17T03_02_19_792Z-debug.log
Unfortunately, this was not obvious to me...So I think adding just a short line to the README with a link to: http://www.ocaml.org/docs/install.html would be very helpful for someone completely new who wants to pick up reason-react!
Reading the ReasonReact.re module has been enlightening as to how to create type safe bindings to a fairly complex and dynamic javascript library. Definitely awesome work by the team to get this far (and make the interface extremely simple and flexible).
I have done an experiment with part of my companies code base that shows that Reason can be trivially integrated and used to provide type safety to our react components. As part of the feedback of this experiment, one of my colleagues asked how to debug a Reason components props?
While the bucklescript output is easy to add breakpoints to, there are also other tools that can help debug a react component, particularly in more complex scenarios. I am talking specifically about the React Developer Tools for Chrome specifically: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi , but I am sure there are other tools that make use of the react library to provide other information that can help a user of react identify problem components.
I have attached some screenshots of how Reason components are rendered in the React Developer Tools for the snippet of Reason posted below, and as should be evident, the debugability of the FA component much lower than that of the LikeStatus component, primarily because the reason props are opaque to the rest of the system.
module FontAwesome = {
let component = ReasonReact.statelessComponent "FA";
let make name::name _children => {
...component,
render: fun () _ => {
<i className={"icon fa fa fa-" ^ name} />
}
};
};
let component = ReasonReact.statelessComponent "LikeStatus";
let make numLikes::numLikes ::isLiked ::canLike _children => {
...component,
render: fun () _ => {
ReactDOMRe.createElement "like-status" [|
<span className="num-likes">{ReactRe.stringToElement (string_of_int n ^ " people like this")}</span>,
if isLiked {
<span className="unlike">
<FontAwesome name="thumbs-up" />
<span>{ReactRe.stringToElement "Unlike"}</span>
</span>
} else {
/* !isLiked */
if canLike {
<span className="like">
<FontAwesome name="thumbs-o-up" />
<span>{ReactRe.stringToElement "Like"}</span>
</span>
} else {
ReactRe.nullElement
}
}
|]
}
};
let comp =
ReasonReact.wrapReasonForJs
::component
(fun jsProps =>
make
numLikes::jsProps##numLikes
isLiked::(Js.to_bool jsProps##isLiked)
canLike::(Js.to_bool jsProps##canLike) [||]
)
I propose a debugProps
feature in componentSpec
where a component can return what it considers to be it's props as a Js object that is merged with the props next to "reasonProps" (specifically here: https://github.com/reasonml/reason-react/blob/402225ce200bf20fa6a16ae0d121dd25d589b232/src/reasonReact.re#L552 ), It won't be as fool proof as the debugability of the rest of the react ecosystem, but it gives us a backdoor into inspecting the prop arguments that are given to our components make functions.
Let me know what you think.
i open src/index.html get the error
Hello, a complete newbie here. After 'npm build' I got
0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/Cellar/node/11.7.0/bin/node',
1 verbose cli '/usr/local/bin/npm',
1 verbose cli 'run',
1 verbose cli 'build' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]prebuild: [email protected]build: [email protected]
6 info lifecycle [email protected]
7 verbose lifecycle [email protected]build: unsafe-perm in lifecycle truebuild: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/s-yyoon/Dropbox/NN/JS TS Prac/ReasonML/reason-react-example/node_modules/.bin:/Users/s-yyoon/Dropbox/GCP/google-cloud-sdk/bin:/Users/s-yyoon/miniconda2/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Library/TeX/texbin:/Library/Frameworks/Mono.framework/Versions/Current/Commands
8 verbose lifecycle [email protected]
9 verbose lifecycle [email protected]build: CWD: /Users/s-yyoon/Dropbox/NN/JS TS Prac/ReasonML/reason-react-examplebuild: Args: [ '-c', 'bsb -make-world' ]
10 silly lifecycle [email protected]
11 silly lifecycle [email protected]build: Returned: code: 2 signal: nullbuild: Failed to exec build script
12 info lifecycle [email protected]
13 verbose stack Error: [email protected] build: bsb -make-world
13 verbose stack Exit status 2
13 verbose stack at EventEmitter. (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:301:16)
13 verbose stack at EventEmitter.emit (events.js:188:13)
13 verbose stack at ChildProcess. (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:188:13)
13 verbose stack at maybeClose (internal/child_process.js:978:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:265:5)
14 verbose pkgid [email protected]
15 verbose cwd /Users/s-yyoon/Dropbox/NN/JS TS Prac/ReasonML/reason-react-example
16 verbose Darwin 18.2.0
17 verbose argv "/usr/local/Cellar/node/11.7.0/bin/node" "/usr/local/bin/npm" "run" "build"
18 verbose node v11.7.0
19 verbose npm v6.5.0
20 error code ELIFECYCLE
21 error errno 2
22 error [email protected] build: bsb -make-world
22 error Exit status 2
23 error Failed at the [email protected] build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 2, true ]
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.