@@ -478,8 +478,11 @@ let root = OCamlRes.Res.([
478
478
" const path = require('path');\n \
479
479
const outputDir = path.join(__dirname, \" build/\" );\n \
480
480
\n \
481
+ const isProd = process.env.NODE_ENV === 'production';\n \
482
+ \n \
481
483
module.exports = {\n \
482
484
\ entry: './src/Index.bs.js',\n \
485
+ \ mode: isProd ? 'production' : 'development',\n \
483
486
\ output: {\n \
484
487
\ path: outputDir,\n \
485
488
\ publicPath: outputDir,\n \
@@ -488,7 +491,78 @@ let root = OCamlRes.Res.([
488
491
};\n \
489
492
" ) ;
490
493
Dir (" src" , [
491
- File (" Page.re" ,
494
+ File (" Index.re" ,
495
+ " ReactDOMRe.renderToElementWithId(<Component1 message=\" Hello!\" />, \" index1\" );\n \
496
+ \n \
497
+ ReactDOMRe.renderToElementWithId(<Component2 greeting=\" Hello!\" />, \" index2\" );\n \
498
+ " ) ;
499
+ File (" index.html" ,
500
+ " <!DOCTYPE html>\n \
501
+ <html lang=\" en\" >\n \
502
+ <head>\n \
503
+ \ <meta charset=\" UTF-8\" >\n \
504
+ \ <title>ReasonReact Examples</title>\n \
505
+ </head>\n \
506
+ <body>\n \
507
+ \ Component 1:\n \
508
+ \ <div id=\" index1\" ></div>\n \
509
+ \ Component 2:\n \
510
+ \ <div id=\" index2\" ></div>\n \
511
+ \n \
512
+ \ <script src=\" ../build/Index.js\" ></script>\n \
513
+ </body>\n \
514
+ </html>\n \
515
+ " ) ;
516
+ File (" Component2.re" ,
517
+ " /* State declaration */\n \
518
+ type state = {\n \
519
+ \ count: int,\n \
520
+ \ show: bool,\n \
521
+ };\n \
522
+ \n \
523
+ /* Action declaration */\n \
524
+ type action =\n \
525
+ \ | Click\n \
526
+ \ | Toggle;\n \
527
+ \n \
528
+ /* Component template declaration.\n \
529
+ \ Needs to be **after** state and action declarations! */\n \
530
+ let component = ReasonReact.reducerComponent(\" Example\" );\n \
531
+ \n \
532
+ /* greeting and children are props. `children` isn't used, therefore ignored.\n \
533
+ \ We ignore it by prepending it with an underscore */\n \
534
+ let make = (~greeting, _children) => {\n \
535
+ \ /* spread the other default fields of component here and override a few */\n \
536
+ \ ...component,\n \
537
+ \n \
538
+ \ initialState: () => {count: 0, show: true},\n \
539
+ \n \
540
+ \ /* State transitions */\n \
541
+ \ reducer: (action, state) =>\n \
542
+ \ switch (action) {\n \
543
+ \ | Click => ReasonReact.Update({...state, count: state.count + 1})\n \
544
+ \ | Toggle => ReasonReact.Update({...state, show: ! state.show})\n \
545
+ \ },\n \
546
+ \n \
547
+ \ render: self => {\n \
548
+ \ let message =\n \
549
+ \ \" You've clicked this \" ++ string_of_int(self.state.count) ++ \" times(s)\" ;\n \
550
+ \ <div>\n \
551
+ \ <button onClick=(_event => self.send(Click))>\n \
552
+ \ (ReasonReact.stringToElement(message))\n \
553
+ \ </button>\n \
554
+ \ <button onClick=(_event => self.send(Toggle))>\n \
555
+ \ (ReasonReact.stringToElement(\" Toggle greeting\" ))\n \
556
+ \ </button>\n \
557
+ \ (\n \
558
+ \ self.state.show ?\n \
559
+ \ ReasonReact.stringToElement(greeting) : ReasonReact.nullElement\n \
560
+ \ )\n \
561
+ \ </div>;\n \
562
+ \ },\n \
563
+ };\n \
564
+ " ) ;
565
+ File (" Component1.re" ,
492
566
" /* This is the basic component. */\n \
493
567
let component = ReasonReact.statelessComponent(\" Page\" );\n \
494
568
\n \
@@ -507,41 +581,35 @@ let root = OCamlRes.Res.([
507
581
\ `ReasonReact.element(Page.make(~message=\" hello\" , [||]))` */\n \
508
582
let make = (~message, _children) => {\n \
509
583
\ ...component,\n \
510
- \ render: (self) =>\n \
511
- \ <div onClick=(self.handle(handleClick))> (ReasonReact.stringToElement(message)) </div>\n \
584
+ \ render: self =>\n \
585
+ \ <div onClick=(self.handle(handleClick))>\n \
586
+ \ (ReasonReact.stringToElement(message))\n \
587
+ \ </div>,\n \
512
588
};\n \
513
- " ) ;
514
- File (" Index.re" ,
515
- " ReactDOMRe.renderToElementWithId(<Page message=\" Hello!\" />, \" index\" );\n \
516
- " ) ;
517
- File (" index.html" ,
518
- " <!DOCTYPE html>\n \
519
- <html lang=\" en\" >\n \
520
- <head>\n \
521
- \ <meta charset=\" UTF-8\" >\n \
522
- \ <title>Pure Reason Example</title>\n \
523
- </head>\n \
524
- <body>\n \
525
- \ <div id=\" index\" ></div>\n \
526
- \ <script src=\" ../build/Index.js\" ></script>\n \
527
- </body>\n \
528
- </html>\n \
529
589
" )]) ;
530
590
File (" README.md" ,
531
591
" # ${bsb:name}\n \
532
592
\n \
533
- Run this project: \n \
593
+ ## Run Project \n \
534
594
\n \
535
- ```\n \
595
+ ```sh \n \
536
596
npm install\n \
537
597
npm start\n \
538
598
# in another tab\n \
539
599
npm run webpack\n \
540
600
```\n \
541
- \n \
542
- After you see the webpack compilation succeed (the `npm run webpack` step), open up the nested html files in `src/*` (**no server needed!**). Then modify whichever file in `src` and refresh the page to see the changes.\n \
601
+ After you see the webpack compilation succeed (the `npm run webpack` step), open up `src/index.html` (**no server needed!**). Then modify whichever `.re` file in `src` and refresh the page to see the changes.\n \
543
602
\n \
544
603
**For more elaborate ReasonReact examples**, please see https://github.com/reasonml-community/reason-react-example\n \
604
+ \n \
605
+ ## Build for Production\n \
606
+ \n \
607
+ ```sh\n \
608
+ npm run build\n \
609
+ npm run webpack:production\n \
610
+ ```\n \
611
+ \n \
612
+ This will replace the development artifact `build/Index.js` for an optimized version.\n \
545
613
" ) ;
546
614
File (" package.json" ,
547
615
" {\n \
@@ -552,21 +620,23 @@ let root = OCamlRes.Res.([
552
620
\ \" start\" : \" bsb -make-world -w\" ,\n \
553
621
\ \" clean\" : \" bsb -clean-world\" ,\n \
554
622
\ \" test\" : \" echo \\\" Error: no test specified\\\" && exit 1\" ,\n \
555
- \ \" webpack\" : \" webpack -w\"\n \
623
+ \ \" webpack\" : \" webpack -w\" ,\n \
624
+ \ \" webpack:production\" : \" NODE_ENV=production webpack\"\n \
556
625
\ },\n \
557
626
\ \" keywords\" : [\n \
558
627
\ \" BuckleScript\"\n \
559
628
\ ],\n \
560
629
\ \" author\" : \"\" ,\n \
561
630
\ \" license\" : \" MIT\" ,\n \
562
631
\ \" dependencies\" : {\n \
563
- \ \" react\" : \" ^15.4.2 \" ,\n \
564
- \ \" react-dom\" : \" ^15.4.2 \" ,\n \
565
- \ \" reason-react\" : \" >=0.3.0 \"\n \
632
+ \ \" react\" : \" ^16.2.0 \" ,\n \
633
+ \ \" react-dom\" : \" ^16.2.0 \" ,\n \
634
+ \ \" reason-react\" : \" >=0.3.4 \"\n \
566
635
\ },\n \
567
636
\ \" devDependencies\" : {\n \
568
637
\ \" bs-platform\" : \" ^${bsb:bs-version}\" ,\n \
569
- \ \" webpack\" : \" ^3.8.1\"\n \
638
+ \ \" webpack\" : \" ^4.0.1\" ,\n \
639
+ \ \" webpack-cli\" : \" ^2.0.10\"\n \
570
640
\ }\n \
571
641
}\n \
572
642
" ) ;
@@ -585,7 +655,7 @@ let root = OCamlRes.Res.([
585
655
\ \" subdirs\" : true\n \
586
656
\ },\n \
587
657
\ \" package-specs\" : [{\n \
588
- \ \" module\" : \" commonjs \" ,\n \
658
+ \ \" module\" : \" es6 \" ,\n \
589
659
\ \" in-source\" : true\n \
590
660
\ }],\n \
591
661
\ \" suffix\" : \" .bs.js\" ,\n \
0 commit comments