@@ -478,8 +478,11 @@ let root = OCamlRes.Res.([
478478 " const path = require('path');\n \
479479 const outputDir = path.join(__dirname, \" build/\" );\n \
480480 \n \
481+ const isProd = process.env.NODE_ENV === 'production';\n \
482+ \n \
481483 module.exports = {\n \
482484 \ entry: './src/Index.bs.js',\n \
485+ \ mode: isProd ? 'production' : 'development',\n \
483486 \ output: {\n \
484487 \ path: outputDir,\n \
485488 \ publicPath: outputDir,\n \
@@ -488,7 +491,78 @@ let root = OCamlRes.Res.([
488491 };\n \
489492 " ) ;
490493 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" ,
492566 " /* This is the basic component. */\n \
493567 let component = ReasonReact.statelessComponent(\" Page\" );\n \
494568 \n \
@@ -507,41 +581,35 @@ let root = OCamlRes.Res.([
507581 \ `ReasonReact.element(Page.make(~message=\" hello\" , [||]))` */\n \
508582 let make = (~message, _children) => {\n \
509583 \ ...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 \
512588 };\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 \
529589 " )]) ;
530590 File (" README.md" ,
531591 " # ${bsb:name}\n \
532592 \n \
533- Run this project: \n \
593+ ## Run Project \n \
534594 \n \
535- ```\n \
595+ ```sh \n \
536596 npm install\n \
537597 npm start\n \
538598 # in another tab\n \
539599 npm run webpack\n \
540600 ```\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 \
543602 \n \
544603 **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 \
545613 " ) ;
546614 File (" package.json" ,
547615 " {\n \
@@ -552,21 +620,23 @@ let root = OCamlRes.Res.([
552620 \ \" start\" : \" bsb -make-world -w\" ,\n \
553621 \ \" clean\" : \" bsb -clean-world\" ,\n \
554622 \ \" 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 \
556625 \ },\n \
557626 \ \" keywords\" : [\n \
558627 \ \" BuckleScript\"\n \
559628 \ ],\n \
560629 \ \" author\" : \"\" ,\n \
561630 \ \" license\" : \" MIT\" ,\n \
562631 \ \" 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 \
566635 \ },\n \
567636 \ \" devDependencies\" : {\n \
568637 \ \" 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 \
570640 \ }\n \
571641 }\n \
572642 " ) ;
@@ -585,7 +655,7 @@ let root = OCamlRes.Res.([
585655 \ \" subdirs\" : true\n \
586656 \ },\n \
587657 \ \" package-specs\" : [{\n \
588- \ \" module\" : \" commonjs \" ,\n \
658+ \ \" module\" : \" es6 \" ,\n \
589659 \ \" in-source\" : true\n \
590660 \ }],\n \
591661 \ \" suffix\" : \" .bs.js\" ,\n \
0 commit comments