Merge pull request #2 from leoancap/vite-example

add 3-vite example

Makefile

@@ -27,21 +27,25 @@ init: create-switch install ## Configure everything to develop this repository i
 install: ## Install development dependencies
 	make -C examples/1-node install
 	make -C examples/2-react install
+	make -C examples/3-vite install
 
 .PHONY: build
 build: ## Build all examples
 	make -C examples/1-node build
 	make -C examples/2-react build
+	make -C examples/3-vite build
 
 .PHONY: test
 test: ## Test all examples
 	make -C examples/1-node test
 	make -C examples/2-react test
+	make -C examples/3-vite test
 
 .PHONY: clean
 clean: ## Clean all examples
 	make -C examples/1-node clean
 	make -C examples/2-react clean
+	make -C examples/3-vite clean
 
 .PHONY: format
 format: ## Format the codebase with ocamlformat

README.md

@@ -21,6 +21,8 @@ Each example includes a `README.md` with instructions on how to get started.
   application, prints a "hello world" message when it runs.
 - [**`2-react`**](examples/2-react)  —  a simple Reason React
   app with Webpack.
+- [**`3-vite`**](examples/3-vite)  —  a simple Reason React
+  app with Vite.
 
 ## Contributing
 

examples/3-vite/.gitignore

@@ -0,0 +1,5 @@
+.DS_Store
+node_modules
+_build
+_opam
+dist/

examples/3-vite/3-vite.opam

@@ -0,0 +1,34 @@
+# This file is generated by dune, edit dune-project instead
+opam-version: "2.0"
+synopsis: "Melange React example with Vite"
+description: "Minimal React example with Melange and Vite"
+maintainer: ["<your_name>"]
+authors: ["<your_name>"]
+license: "MIT"
+homepage: "https://github.com/your/project"
+bug-reports: "https://github.com/your/project/issues"
+depends: [
+  "dune" {>= "3.8"}
+  "melange" {>= "2.0.0"}
+  "reason" {>= "3.10.0"}
+  "reason-react" {>= "0.13.0"}
+  "reason-react-ppx"
+  "ocaml-lsp-server" {with-test}
+  "opam-check-npm-deps" {with-test}
+  "ocamlformat" {with-test}
+  "odoc" {with-doc}
+]
+build: [
+  ["dune" "subst"] {dev}
+  [
+    "dune"
+    "build"
+    "-p"
+    name
+    "-j"
+    jobs
+    "@install"
+    "@runtest" {with-test}
+    "@doc" {with-doc}
+  ]
+]

examples/3-vite/Makefile

@@ -0,0 +1,67 @@
+project_name = 3-vite
+
+DUNE = opam exec -- dune
+
+.DEFAULT_GOAL := help
+
+.PHONY: help
+help: ## Print this help message
+	@echo "List of available make commands";
+	@echo "";
+	@grep -E '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | awk 'BEGIN {FS = ":.*?## "}; {printf "  \033[36m%-15s\033[0m %s\n", $$1, $$2}';
+	@echo "";
+
+.PHONY: create-switch
+create-switch: ## Create opam switch
+	opam switch create . 5.1.0 -y --deps-only
+
+.PHONY: init
+init: create-switch install ## Configure everything to develop this repository in local
+
+.PHONY: install
+install: ## Install development dependencies
+	npm install # install JavaScript packages that the project might depend on, like `react` or `react-dom`
+	opam update # make sure that opam has the latest information about published libraries in the opam repository https://opam.ocaml.org/packages/
+	opam install -y . --deps-only --with-test # install the Melange and OCaml dependencies
+	opam exec opam-check-npm-deps # check that the versions of the JavaScript packages installed match the requirements defined by Melange libraries
+
+.PHONY: build
+build: ## Build the project
+	$(DUNE) build @3-vite # @3-vite is a dune alias: https://dune.readthedocs.io/en/stable/overview.html#term-alias
+  # Another way to build the project would be just calling `dune build`, which will build the `@@default` alias: https://dune.readthedocs.io/en/stable/reference/aliases.html#default
+
+.PHONY: test
+test: build ## Test the project
+	npm run bundle
+
+.PHONY: build_verbose
+build_verbose: ## Build the project
+	$(DUNE) build --verbose @3-vite
+
+.PHONY: serve
+serve: ## Serve the application with a local HTTP server
+	npm run serve
+
+.PHONY: dev
+dev: ## Dev the application with a local HTTP server
+	npm run dev
+
+.PHONY: bundle
+bundle: ## Bundle the JavaScript application
+	npm run bundle
+
+.PHONY: clean
+clean: ## Clean build artifacts and other generated files
+	$(DUNE) clean
+
+.PHONY: format
+format: ## Format the codebase with ocamlformat
+	$(DUNE) build @fmt --auto-promote
+
+.PHONY: format-check
+format-check: ## Checks if format is correct
+	$(DUNE) build @fmt
+
+.PHONY: watch
+watch: ## Watch for the filesystem and rebuild on every change
+	$(DUNE) build --watch @3-vite

examples/3-vite/README.md

@@ -0,0 +1,35 @@
+# `3-vite`
+
+<br>
+
+This project shows how to create a simple React app with Melange and
+[ReasonReact](https://reasonml.github.io/reason-react/).
+
+The app just renders a component with "Hello world".
+
+<br>
+
+To set up the environment to work with it, you will need to install
+[opam](https://opam.ocaml.org/) and [Node.js](https://nodejs.org/).
+
+## Get started
+
+<pre><code><b>$ cd example/3-vite</b>
+<b>$ make init</b>
+<b>$ make dev</b>
+</code></pre>
+
+Then open the browser to see the rendered app.
+
+## Commands
+
+You can see all available commands by running `make help` or just `make`. Here
+are a few of the most useful ones:
+
+- `make init`: set up opam local switch and download OCaml, Melange and
+JavaScript dependencies
+- `make install`: install OCaml, Melange and JavaScript dependencies
+- `make watch`: watch for the filesystem and have Melange rebuild on every
+change
+- `make dev`: Run the application locally with vite and melange simultaneously
+- `make bundle`: creates a full bundle with the generated `js` files and `html` page

examples/3-vite/dune

@@ -0,0 +1,13 @@
+;; `dirs` is a stanza to tell dune which subfolders from the current folder
+;; (where the `dune` file is) it should process.
+;; `:standard` is part of Dune's predicate language: https://dune.readthedocs.io/en/stable/reference/predicate-language.html#predicate-language
+;; In the case of `dirs` stanza, `:standard` means "Process all subdirs, except those starting with underscore"
+;; `\` operator will exclude the next value defined set.
+
+;; With that in mind, we start by ignoring `node_modules`, because in most cases
+;; there should be no `dune` files to be processed there by Dune.
+;; If you need to consume an OCaml project from `node_modules`, this should work:
+;; - remove the `dirs` stanza below
+;; - add a `(subdir node_modules (dirs only_your_package))`
+
+(dirs :standard \ node_modules)

examples/3-vite/dune-project

@@ -0,0 +1,34 @@
+(lang dune 3.8)
+
+(using melange 0.1)
+
+(generate_opam_files true)
+
+(name 3-vite)
+
+(license "MIT")
+
+(maintainers <your_name>)
+
+(authors <your_name>)
+
+(homepage https://github.com/your/project)
+
+(bug_reports https://github.com/your/project/issues)
+
+(package
+ (name 3-vite)
+ (synopsis "Melange React example with Vite")
+ (description "Minimal React example with Melange and Vite")
+ (depends
+  (melange
+   (>= "2.0.0"))
+  (reason
+   (>= "3.10.0"))
+  (reason-react
+   (>= "0.13.0"))
+  reason-react-ppx
+  (ocaml-lsp-server :with-test) ; todo: use with-dev-setup once opam 2.2 is out
+  (opam-check-npm-deps :with-test) ; todo: use with-dev-setup once opam 2.2 is out
+  (ocamlformat :with-test) ; todo: use with-dev-setup once opam 2.2 is out
+  ))

examples/3-vite/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Melange app with Vite</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/ReactApp.re"></script>
+  </body>
+</html>