├── .gitignore ├── LICENSE.md ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── postcss.config.js ├── public └── favicon.svg ├── rescript.json ├── src ├── App.css ├── App.res ├── App.resi ├── Main.res ├── logo.svg └── tailwind.css ├── tailwind.config.js ├── tests ├── App_test.res ├── Bindings.res └── setup.ts └── vite.config.mts /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | 7 | # ReScript 8 | .bsb.lock 9 | .merlin 10 | /lib/ 11 | *.bs.js 12 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Jihchi Lee 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 | # Vite React ReScript Starter 2 | 3 | - [Vite](https://vitejs.dev): Next Generation Frontend Tooling. 4 | - [React](https://reactjs.org): A JavaScript library for building user interfaces. 5 | - [ReScript](https://rescript-lang.org): The JavaScript-like language you have been waiting for. (previously known as BuckleScript and Reason) 6 | - [@jihchi/vite-plugin-rescript](https://github.com/jihchi/vite-plugin-rescript): Integrate ReScript with Vite seamlessly. 7 | - [vitest](https://vitest.dev/): A blazing fast unit-test framework, powered by [Vite](https://vitejs.dev) ⚡️. 8 | - [rescript-vitest](https://github.com/cometkim/rescript-vitest): ReScript bindings to Vitest. 9 | - [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/): Helps you test UI components in a user-centric way. 10 | - [Tailwind CSS](https://tailwindcss.com): A utility-first CSS framework for rapid UI development. 11 | 12 | ## Getting Started 13 | 14 | ```sh 15 | npx degit jihchi/vitejs-template-react-rescript my-vitejs-react-rescript 16 | cd my-vitejs-react-rescript 17 | npm install 18 | npm start 19 | ``` 20 | 21 | ## Alternatives 22 | 23 | - [rescript-lang/create-react-app](https://github.com/rescript-lang/create-rescript-app) 24 | 25 | ## Contributors 26 | 27 | Many thanks for your help! 28 | 29 | 30 | 31 | 32 | 33 | The image of contributors is made with [contrib.rocks](https://contrib.rocks). 34 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vite-react-rescript-starter", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "build": "vite build", 7 | "clean": "rescript clean -with-deps", 8 | "format": "rescript format -all", 9 | "serve": "vite preview", 10 | "start": "vite", 11 | "test": "vitest" 12 | }, 13 | "dependencies": { 14 | "@rescript/core": "^0.6.0", 15 | "@rescript/react": "^0.12.1", 16 | "react": "^18.2.0", 17 | "react-dom": "^18.2.0", 18 | "rescript-webapi": "^0.9.1" 19 | }, 20 | "devDependencies": { 21 | "@jihchi/vite-plugin-rescript": "^7.0.0", 22 | "@testing-library/jest-dom": "^6.4.2", 23 | "@testing-library/react": "^14.2.2", 24 | "@vitejs/plugin-react": "^4.2.1", 25 | "autoprefixer": "^10.4.19", 26 | "jsdom": "^24.0.0", 27 | "postcss": "^8.4.38", 28 | "rescript": "^11.0.1", 29 | "rescript-vitest": "^1.3.0", 30 | "tailwindcss": "^3.4.3", 31 | "vite": "^5.2.8", 32 | "vitest": "^1.4.0" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /public/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /rescript.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vite-react-rescript-starter", 3 | "sources": [ 4 | { 5 | "dir": "src", 6 | "subdirs": true 7 | }, 8 | { 9 | "dir": "tests", 10 | "type": "dev", 11 | "subdirs": true 12 | } 13 | ], 14 | "package-specs": [ 15 | { 16 | "module": "es6", 17 | "in-source": true 18 | } 19 | ], 20 | "suffix": ".bs.js", 21 | "jsx": { 22 | "version": 4, 23 | "mode": "automatic" 24 | }, 25 | "uncurried": false, 26 | "bs-dependencies": ["@rescript/react", "@rescript/core", "rescript-webapi"], 27 | "bs-dev-dependencies": ["rescript-vitest"], 28 | "bsc-flags": ["-open RescriptCore"] 29 | } 30 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/App.res: -------------------------------------------------------------------------------- 1 | @module("./logo.svg") external logo: string = "default" 2 | %%raw(`import './App.css'`) 3 | 4 | @react.component 5 | let make = () => { 6 | let (count, setCount) = React.useState(() => 0) 7 | 8 |
9 |
10 | logo 11 |

{"Hello Vite + React + ReScript!"->React.string}

12 |

13 | // the button style comes from https://tailwind-elements.com/docs/standard/components/buttons/#neutral 14 | 17 |

18 |

19 | {"Edit "->React.string} 20 | {"App.res"->React.string} 21 | {" and save to test HMR updates."->React.string} 22 |

23 |

24 | 26 | {"Learn React"->React.string} 27 | 28 | {" | "->React.string} 29 | 34 | {"Vite Docs"->React.string} 35 | 36 | {" | "->React.string} 37 | 42 | {"ReScript Docs"->React.string} 43 | 44 |

45 |
46 |
47 | } 48 | -------------------------------------------------------------------------------- /src/App.resi: -------------------------------------------------------------------------------- 1 | @react.component 2 | let make: unit => React.element 3 | -------------------------------------------------------------------------------- /src/Main.res: -------------------------------------------------------------------------------- 1 | %%raw("import './tailwind.css'") 2 | 3 | ReactDOM.querySelector("#root") 4 | ->Option.getExn 5 | ->ReactDOM.Client.createRoot 6 | ->ReactDOM.Client.Root.render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/tailwind.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'], 4 | theme: { 5 | extend: {}, 6 | }, 7 | plugins: [], 8 | }; 9 | -------------------------------------------------------------------------------- /tests/App_test.res: -------------------------------------------------------------------------------- 1 | open Vitest 2 | open Bindings 3 | open ReactTestingLibrary 4 | open JsDom 5 | 6 | testAsync("renders component without crashing", async t => { 7 | t->assertions(1) 8 | render() 9 | let _ = await screen->findByText("Hello Vite + React + ReScript!"); 10 | screen->getByText("count is: 0")->expect->toBeInTheDocument 11 | }) 12 | -------------------------------------------------------------------------------- /tests/Bindings.res: -------------------------------------------------------------------------------- 1 | module ReactTestingLibrary = { 2 | type renderResult 3 | 4 | @module("@testing-library/react") 5 | external render: React.element => unit = "render" 6 | 7 | @module("@testing-library/react") 8 | external screen: renderResult = "screen" 9 | 10 | @send external getByText: (renderResult, string) => Webapi.Dom.Element.t = "getByText" 11 | @send external findByText: (renderResult, string) => promise = "findByText" 12 | } 13 | 14 | module JsDom = { 15 | @send 16 | external toBeInTheDocument: Vitest.expected => unit = "toBeInTheDocument" 17 | } 18 | -------------------------------------------------------------------------------- /tests/setup.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom'; 2 | -------------------------------------------------------------------------------- /vite.config.mts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | import { defineConfig } from 'vite'; 5 | import createReactPlugin from '@vitejs/plugin-react'; 6 | import createReScriptPlugin from '@jihchi/vite-plugin-rescript'; 7 | 8 | // https://vitejs.dev/config/ 9 | export default defineConfig({ 10 | plugins: [createReactPlugin(), createReScriptPlugin()], 11 | test: { 12 | include: ['tests/**/*_test*.js'], 13 | globals: true, 14 | environment: 'jsdom', 15 | setupFiles: './tests/setup.ts', 16 | }, 17 | }); 18 | --------------------------------------------------------------------------------