From 7981f047e7ad9da24f76e6aded3c516c8f2dc563 Mon Sep 17 00:00:00 2001
From: Carl Worth <cworth@cworth.org>
Date: Mon, 25 May 2020 12:18:42 -0700
Subject: [PATCH] Makefile: Add support to use babel to compile React code
 using JSX

This is in preparation for starting to use React to implement LMNO
game clients.

In this commit, the previous "make dev" target is now simply "make",
and the previous "make prod" target is now "make LMNO_BUILD=production".
This latter command is definitely annoying to remember, but should
almost never need to be executed manually; instead the developer will
likely invoke "make deploy" which knows how to do a production build.
---
 .babelrc | 13 ++++++++++++
 Makefile | 64 +++++++++++++++++++++++++++++++++++++++++++-------------
 README   | 14 +++++++++----
 3 files changed, 73 insertions(+), 18 deletions(-)
 create mode 100644 .babelrc

diff --git a/.babelrc b/.babelrc
new file mode 100644
index 0000000..b182744
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,13 @@
+{
+  "presets": ["react"],
+  "env": {
+    "production": {
+    },
+    "development": {
+      "plugins": [
+        "transform-react-jsx-self",
+        "transform-react-jsx-source"
+      ]
+    }
+  }
+}
diff --git a/Makefile b/Makefile
index ee69598..74233b0 100644
--- a/Makefile
+++ b/Makefile
@@ -3,23 +3,54 @@ DEPLOY_DIR=/srv/lmno.games/www
 DO_NOT_DEPLOY=Makefile deps *.jsx .babelrc .gitignore README
 DO_NOT_DELETE=flempires
 
-DEPS=deps/react.development.js \
-deps/react-dom.development.js \
-deps/react.production.min.js \
-deps/react-dom.production.min.js
+REACT_DEPS=react.js react-dom.js
+REACT_DOWNLOADS=\
+  deps/react.development.js \
+  deps/react-dom.development.js \
+  deps/react.production.min.js \
+  deps/react-dom.production.min.js
 
-checksums:
-	sha512sum --strict -c checksums.sha512
+JSX_SOURCE=$(wildcard */*.jsx)
+JS_TARGETS=$(JSX_SOURCE:.jsx=.js)
+
+all: $(JS_TARGETS) $(REACT_DEPS)
+
+# Execute either of the following to build things:
+#
+#    For a development build:
+#
+#	make
+#
+#    For a production build:
+#
+#	make LMNO_BUILD=production
+#
+# Note: To switch between these two, either issue a "make clean"
+#       or otherwise start in a clean source tree (such as a
+#       after a fresh "git clone" or use "git clean -f -x -d).
+#
+ifeq ($(LMNO_BUILD),production)
+react.js: deps/react.production.min.js
+	cp $^ $@
+
+react-dom.js: deps/react-dom.production.min.js
+	cp $^ $@
 
-deps: $(DEPS) checksums
+%.js: %.jsx
+	BABEL_ENV=production babeljs $^ --out-file $@
+else
+react.js: deps/react.development.js
+	cp $^ $@
 
-dev: deps
-	cp deps/react.development.js react.js
-	cp deps/react-dom.development.js react-dom.js
+react-dom.js: deps/react-dom.development.js
+	cp $^ $@
 
-prod: deps
-	cp deps/react.production.min.js react.js
-	cp deps/react-dom.production.min.js react-dom.js
+%.js: %.jsx
+	BABEL_ENV=development babeljs $^ --out-file $@
+endif
+
+checksums: $(REACT_DOWNLOADS)
+	sha512sum --strict -c checksums.sha512
 
 deps/react.development.js:
 	wget -nv -nc -P deps https://unpkg.com/react@16/umd/react.development.js
@@ -36,7 +67,7 @@ deps/react-dom.production.min.js:
 deploy:
 	rm -rf .deploy-source
 	git clone . .deploy-source
-	make -C .deploy-source prod
+	make -C .deploy-source LMNO_BUILD=production
 	rm -rf .deploy-source/.git
 	(cd .deploy-source; rsync -avz \
 		$(DO_NOT_DEPLOY:%=--exclude=%) \
@@ -45,3 +76,8 @@ deploy:
 		--delete-after \
 		./ $(DEPLOY_HOST):$(DEPLOY_DIR) )
 	rm -rf .deploy-source
+
+clean:
+	rm -f $(JS_TARGETS)
+	rm -f $(REACT_DEPS)
+	rm -f $(REACT_DOWNLOADS)
diff --git a/README b/README
index 599bcdb..1afb559 100644
--- a/README
+++ b/README
@@ -7,10 +7,16 @@ verifying 3rd-party resources that are needed.
 The following Makefile targets will be useful while developing this
 code:
 
-  make deps: Download 3rd-party resources to be served by lmno.games
+  make: Download and build JavaScript resources in development mode
 
-  make dev: Configure development versions of "make deps" resources
+  make LMNO_BUILD=production: As above but in production mode
 
-  make prod: Configure production versions of "make deps" resources
+  make deploy: Deploy latest, committed, production-mode content to lmno.games
 
-  make deploy: Deploy latest, committed static content to lmno.games
+Dependencies
+------------
+Compiling the source requires the babel (version 6) CLI to be
+available as "babeljs" along with the "react" preset. This can be
+achieved on Debian with:
+
+	sudo apt install node-babel-cli node-babel-preset-react
-- 
2.43.0