diff --git a/examples/react-rescript/.gitignore b/examples/react-rescript/.gitignore new file mode 100644 index 000000000000..742a5199c69b --- /dev/null +++ b/examples/react-rescript/.gitignore @@ -0,0 +1,40 @@ +**/*.trace +**/*.zip +**/*.tar.gz +**/*.tgz +**/*.log + +package-lock.json +**/*.bun + +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# production +/build + +# misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# ReScript +/lib/ +.bsb.lock +.merlin + +# Remove the following line if you wish to checkin built files. +src/**/*.bs.js diff --git a/examples/react-rescript/README.md b/examples/react-rescript/README.md new file mode 100644 index 000000000000..0365f47492e6 --- /dev/null +++ b/examples/react-rescript/README.md @@ -0,0 +1,27 @@ +# React and ReScript with Bun runtime + +This is a React project using ReScript boostrapped with bun. + +## Getting Started + +### Cloning the repo + +```sh +bun create react-rescript ./app +``` + +### Development + +First, start the ReScript compiler and run the development server. + +``` +bun run start +``` + +``` +bun dev +``` + +Open http://localhost:3000 with your browser to see the result. + +You can start editing the page by modifying src/App.res. The page auto-updates as you edit the file. diff --git a/examples/react-rescript/bsconfig.json b/examples/react-rescript/bsconfig.json new file mode 100644 index 000000000000..3f5ed7b10d3f --- /dev/null +++ b/examples/react-rescript/bsconfig.json @@ -0,0 +1,18 @@ +{ + "name": "bun-react-rescript", + "version": "0.0.1", + "sources": { + "dir" : "src", + "subdirs" : true + }, + "package-specs": { + "module": "es6", + "in-source": true + }, + "suffix": ".bs.js", + "reason": { "react-jsx": 3 }, + "bs-dependencies": ["@rescript/react"], + "warnings": { + "error" : "+101" + } +} diff --git a/examples/react-rescript/package.json b/examples/react-rescript/package.json new file mode 100644 index 000000000000..ab3767888c3e --- /dev/null +++ b/examples/react-rescript/package.json @@ -0,0 +1,26 @@ +{ + "name": "@bun-examples/react-rescript", + "version": "0.0.1", + "dependencies": { + "@rescript/react": "^0.10.3", + "react": "^17.0.2", + "react-dom": "^17.0.2", + "web-vitals": "^1.0.1" + }, + "scripts": { + "build": "rescript", + "clean": "rescript clean -with-deps", + "start": "rescript build -w" + }, + "eslintConfig": { + "extends": [ + "react-app", + "react-app/jest" + ] + }, + "devDependencies": { + "react-refresh": "0.10.0", + "rescript": "^9.1.4", + "typescript": "latest" + } +} \ No newline at end of file diff --git a/examples/react-rescript/public/favicon.ico b/examples/react-rescript/public/favicon.ico new file mode 100644 index 000000000000..a11777cc471a Binary files /dev/null and b/examples/react-rescript/public/favicon.ico differ diff --git a/examples/react-rescript/public/index.html b/examples/react-rescript/public/index.html new file mode 100644 index 000000000000..6e47a7a342a2 --- /dev/null +++ b/examples/react-rescript/public/index.html @@ -0,0 +1,44 @@ + + + + + + + + + + + + + React App + + + +
+ + + + diff --git a/examples/react-rescript/public/logo192.png b/examples/react-rescript/public/logo192.png new file mode 100644 index 000000000000..fc44b0a3796c Binary files /dev/null and b/examples/react-rescript/public/logo192.png differ diff --git a/examples/react-rescript/public/logo512.png b/examples/react-rescript/public/logo512.png new file mode 100644 index 000000000000..a4e47a6545bc Binary files /dev/null and b/examples/react-rescript/public/logo512.png differ diff --git a/examples/react-rescript/public/manifest.json b/examples/react-rescript/public/manifest.json new file mode 100644 index 000000000000..080d6c77ac21 --- /dev/null +++ b/examples/react-rescript/public/manifest.json @@ -0,0 +1,25 @@ +{ + "short_name": "React App", + "name": "Create React App Sample", + "icons": [ + { + "src": "favicon.ico", + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/x-icon" + }, + { + "src": "logo192.png", + "type": "image/png", + "sizes": "192x192" + }, + { + "src": "logo512.png", + "type": "image/png", + "sizes": "512x512" + } + ], + "start_url": ".", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/examples/react-rescript/public/robots.txt b/examples/react-rescript/public/robots.txt new file mode 100644 index 000000000000..e9e57dc4d41b --- /dev/null +++ b/examples/react-rescript/public/robots.txt @@ -0,0 +1,3 @@ +# https://www.robotstxt.org/robotstxt.html +User-agent: * +Disallow: diff --git a/examples/react-rescript/src/App.css b/examples/react-rescript/src/App.css new file mode 100644 index 000000000000..74b5e053450a --- /dev/null +++ b/examples/react-rescript/src/App.css @@ -0,0 +1,38 @@ +.App { + text-align: center; +} + +.App-logo { + height: 40vmin; + pointer-events: none; +} + +@media (prefers-reduced-motion: no-preference) { + .App-logo { + animation: App-logo-spin infinite 20s linear; + } +} + +.App-header { + background-color: #282c34; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: calc(10px + 2vmin); + color: white; +} + +.App-link { + color: #61dafb; +} + +@keyframes App-logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} diff --git a/examples/react-rescript/src/App.res b/examples/react-rescript/src/App.res new file mode 100644 index 000000000000..82fa559050c7 --- /dev/null +++ b/examples/react-rescript/src/App.res @@ -0,0 +1,16 @@ +%%raw(`import "./App.css"`) + +@module("./logo.svg") +external logo: string = "default" + +@react.component +let make = () => +
+
+ logo +

{"Welcome to React!"->React.string}

+ + {"Learn React"->React.string} + +
+
diff --git a/examples/react-rescript/src/index.css b/examples/react-rescript/src/index.css new file mode 100644 index 000000000000..ec2585e8c0bb --- /dev/null +++ b/examples/react-rescript/src/index.css @@ -0,0 +1,13 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + monospace; +} diff --git a/examples/react-rescript/src/index.res b/examples/react-rescript/src/index.res new file mode 100644 index 000000000000..8f63b32ebba0 --- /dev/null +++ b/examples/react-rescript/src/index.res @@ -0,0 +1,6 @@ +%%raw(`import "./index.css"`) + +switch ReactDOM.querySelector("#root") { +| Some(root) => ReactDOM.render( , root) +| None => () // do nothing +} diff --git a/examples/react-rescript/src/logo.svg b/examples/react-rescript/src/logo.svg new file mode 100644 index 000000000000..9dfc1c058ceb --- /dev/null +++ b/examples/react-rescript/src/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file