├── .gitignore
├── LICENSE
├── README.md
├── bsconfig.json
├── dist
├── app-NKNAJOZC.js
├── favicon.ico
├── img
│ ├── demo.gif
│ ├── icon
│ │ ├── arrow.svg
│ │ ├── chevron.svg
│ │ ├── hamburger.svg
│ │ ├── rescript_256x256.png
│ │ └── rescript_512x512.png
│ ├── rescript.svg
│ └── start.png
├── index.html
├── manifest.json
└── sw.js
├── img
├── demo.gif
├── favicon.ico
├── icon
│ ├── arrow.svg
│ ├── chevron.svg
│ ├── hamburger.svg
│ ├── rescript_256x256.png
│ └── rescript_512x512.png
├── rescript.svg
└── start.png
├── package-lock.json
├── package.json
├── scripts
├── build.js
├── deploy.sh
├── generateServiceWorker.js
├── injectScript.js
└── start.js
└── src
├── App.res
├── Emotion.res
├── Home.res
├── Index.res
├── Page1.res
├── Page2.res
├── Page3.res
├── ReactTransitionGroup.res
├── index.html
├── manifest.json
└── router
├── Link.res
└── Redirect.res
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | .merlin
3 | lib/
4 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2018 Raphael Rafatpanah
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Rescript React Boilerplate
2 |
3 | An opinionated implementation of the following technologies:
4 |
5 | - ReScript & React
6 | - Simple routing using [ReScript's built in router](https://rescript-lang.org/docs/react/latest/router)
7 | - Quick and dirty route transitions via [ReactTransitionGroup](https://github.com/reactjs/react-transition-group)
8 | - Choose between [Emotion](https://github.com/persianturtle/rescript-react-boilerplate), [Sass](https://github.com/persianturtle/rescript-react-boilerplate/tree/sass) or [styled-ppx](https://github.com/persianturtle/rescript-react-boilerplate/tree/styled-ppx) for styling
9 | - [http-server](https://github.com/http-party/http-server) for a quick and easy development server
10 | - [esbuild](https://esbuild.github.io/) for fast bundling
11 | - Automatically generated [ServiceWorker](https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker) for rich offline experiences (here's a great [in-depth course on the topic](https://classroom.udacity.com/courses/ud899))
12 |
13 | # CSS Flavors
14 |
15 | - [Emotion](https://github.com/persianturtle/rescript-react-boilerplate)
16 | - [styled-ppx](https://github.com/persianturtle/rescript-react-boilerplate/tree/styled-ppx)
17 | - [Sass](https://github.com/persianturtle/rescript-react-boilerplate/tree/sass)
18 |
19 | ## Getting Started
20 |
21 | ```sh
22 | npm install
23 | npm start
24 | open http://localhost:8081
25 | ```
26 |
27 | ## Demo
28 |
29 | 
30 |
31 | ## Tutorial
32 |
33 | (Video overview coming soon)
34 |
35 | ## Development Environment
36 |
37 | Since we're using ReScript and esbuild, our build times are fast.
38 |
39 | Because of this, we use [chokidar (a cross-platform file watcher)](https://github.com/paulmillr/chokidar) to watch for changes and then rebuild the `dist` directory on every change. The `dist` directory is the same whether in development or in production.
40 |
41 | The build should work on macOS, Windows & Linux.
42 |
43 | 
44 |
--------------------------------------------------------------------------------
/bsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "rescript-react-boilerplate",
3 | "reason": {
4 | "react-jsx": 3
5 | },
6 | "sources": {
7 | "dir": "src",
8 | "subdirs": true
9 | },
10 | "package-specs": [
11 | {
12 | "module": "es6"
13 | }
14 | ],
15 | "suffix": ".bs.js",
16 | "namespace": true,
17 | "bs-dependencies": ["@rescript/react"]
18 | }
19 |
--------------------------------------------------------------------------------
/dist/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/persianturtle/rescript-react-boilerplate/e2d5aa3fc0628c00c2e7d2450cfdf605ae4f7f66/dist/favicon.ico
--------------------------------------------------------------------------------
/dist/img/demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/persianturtle/rescript-react-boilerplate/e2d5aa3fc0628c00c2e7d2450cfdf605ae4f7f66/dist/img/demo.gif
--------------------------------------------------------------------------------
/dist/img/icon/arrow.svg:
--------------------------------------------------------------------------------
1 | React App
10 | You need to enable JavaScript to run this app.
43 |
44 |
89 |
90 |
91 |
--------------------------------------------------------------------------------
/dist/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ReScript React Boilerplate",
3 | "short_name": "rescript-react-boilerplate",
4 | "start_url": ".",
5 | "display": "fullscreen",
6 | "theme_color": "dodgerblue",
7 | "background_color": "#fff",
8 | "description": "A ReScript React boilerplate project.",
9 | "icons": [
10 | {
11 | "src": "img/icon/rescript_256x256.png",
12 | "sizes": "256x256",
13 | "type": "image/png"
14 | },
15 | {
16 | "src": "img/icon/rescript_512x512.png",
17 | "sizes": "512x512",
18 | "type": "image/png"
19 | }
20 | ]
21 | }
22 |
--------------------------------------------------------------------------------
/dist/sw.js:
--------------------------------------------------------------------------------
1 |
2 | const filesToCache = ["/app-NKNAJOZC.js","/favicon.ico","/img/demo.gif","/img/icon/arrow.svg","/img/icon/chevron.svg","/img/icon/hamburger.svg","/img/icon/rescript_256x256.png","/img/icon/rescript_512x512.png","/img/rescript.svg","/img/start.png","/","/manifest.json"];
3 | const currentCacheName = "rescript-react-boilerplate-7fe950a545ec64eb263b09601abfbeb69889ca46a9119830c8441e1eb4adff9e";
4 |
5 | self.addEventListener("install", (event) => {
6 | event.waitUntil(
7 | caches.open(currentCacheName).then((cache) => cache.addAll(filesToCache))
8 | );
9 | });
10 |
11 | self.addEventListener("fetch", (event) => {
12 | event.respondWith(
13 | (async () => {
14 | const cachedResponse = await caches.match(event.request);
15 | if (cachedResponse) {
16 | return cachedResponse;
17 | }
18 |
19 | try {
20 | return await fetch(event.request);
21 | } catch (error) {
22 | if (event.request.mode === "navigate") {
23 | return caches.match("/");
24 | }
25 |
26 | throw error;
27 | }
28 | })()
29 | );
30 | });
31 |
32 | addEventListener("activate", (event) => {
33 | event.waitUntil(
34 | (async () =>
35 | caches
36 | .keys()
37 | .then((cacheNames) =>
38 | Promise.all(
39 | cacheNames
40 | .filter(
41 | (cacheName) =>
42 | cacheName.startsWith("rescript-react-boilerplate") &&
43 | cacheName !== currentCacheName
44 | )
45 | .map((cacheName) => caches.delete(cacheName))
46 | )
47 | ))()
48 | );
49 | });
50 |
51 | self.addEventListener("message", (event) => {
52 | if (event.data.action === "skipWaiting") {
53 | self.skipWaiting();
54 | }
55 | });
56 |
--------------------------------------------------------------------------------
/img/demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/persianturtle/rescript-react-boilerplate/e2d5aa3fc0628c00c2e7d2450cfdf605ae4f7f66/img/demo.gif
--------------------------------------------------------------------------------
/img/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/persianturtle/rescript-react-boilerplate/e2d5aa3fc0628c00c2e7d2450cfdf605ae4f7f66/img/favicon.ico
--------------------------------------------------------------------------------
/img/icon/arrow.svg:
--------------------------------------------------------------------------------
1 |
314 | if state.isOpen {
315 | dispatch(ToggleMenu(false))
316 | }}
317 | onTouchStart={event =>
318 | dispatch(TouchStart(ReactEvent.Touch.changedTouches(event)["item"](. 0)["clientX"]))}
319 | onTouchMove={event =>
320 | dispatch(TouchMove(ReactEvent.Touch.changedTouches(event)["item"](. 0)["clientX"]))}
321 | onTouchEnd={_event => dispatch(TouchEnd)}>
322 |
332 |
336 | ReactDOM.Style.make(
337 | ~transform=`translateX(${Js.Float.toString(x' -. x > 0.0 ? 0.0 : x' -. x)}px)`,
338 | ~transition="none",
339 | (),
340 | )
341 | | _ => ReactDOM.Style.make()
342 | }}
343 | onClick={event => ReactEvent.Mouse.stopPropagation(event)}
344 | ref={ReactDOM.Ref.domRef(navRef)}>
345 |
348 | {React.string("home")}
349 |
350 | {React.string("pages")}
351 |
352 |
353 |
355 |
356 |
358 |
359 |
361 |
362 |
363 |
364 | {
365 | open ReactTransitionGroup
366 |
367 |
368 | {switch url.path {
369 | | list{} =>
376 |
377 | }
378 |
379 |
Rescript React Boilerplate
3 | An opinionated implementation of the following technologies:
4 |
13 | Getting Started
14 | npm install
15 | npm start
16 | open http://localhost:8081
17 | Demo
19 | Tutorial
21 | (Video overview coming soon)
22 | Development Environment
23 | Since we're using ReScript and esbuild, our build times are fast.
24 | Because of this, we use chokidar (a cross-platform file watcher) to watch for changes and then rebuild the dist directory on every change. The dist directory is the same whether in development or in production.
25 | The build should work on macOS, Windows & Linux.
26 |
45 |
--------------------------------------------------------------------------------
/src/Index.res:
--------------------------------------------------------------------------------
1 | switch ReactDOM.querySelector("#root") {
2 | | Some(root) => ReactDOM.render(
{React.string("Page1")}
3 |
--------------------------------------------------------------------------------
/src/Page2.res:
--------------------------------------------------------------------------------
1 | @react.component
2 | let make = () =>
{React.string("Page2")}
3 |
--------------------------------------------------------------------------------
/src/Page3.res:
--------------------------------------------------------------------------------
1 | @react.component
2 | let make = () =>
{React.string("Page3")}
3 |
--------------------------------------------------------------------------------
/src/ReactTransitionGroup.res:
--------------------------------------------------------------------------------
1 | module TransitionGroup = {
2 | @module("react-transition-group") @react.component
3 | external make: (~children: React.element) => React.element = "TransitionGroup"
4 | }
5 |
6 | module CSSTransition = {
7 | @module("react-transition-group") @react.component
8 | external make: (
9 | ~_in: bool,
10 | ~timeout: int,
11 | ~classNames: string,
12 | ~children: React.element,
13 | ) => React.element = "CSSTransition"
14 | }
15 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | React App
10 | You need to enable JavaScript to run this app.
43 |
44 |
89 |
90 | 
20 | 
27 | `
28 |
29 | @react.component
30 | let make = () =>
31 |
45 |
--------------------------------------------------------------------------------
/src/Index.res:
--------------------------------------------------------------------------------
1 | switch ReactDOM.querySelector("#root") {
2 | | Some(root) => ReactDOM.render(