Added support for React hot loading.

.gitignore

@@ -15,6 +15,10 @@ dist
 dist-ssr
 *.local
 
+# we build a copy of the react preamble, so
+# package-lock.json is not in the repo.
+package-lock.json
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json

Makefile

@@ -0,0 +1,32 @@
+
+BROWSERFY := $(shell command -v browserify 2> /dev/null )
+
+clean:
+	@echo clean up preable files...
+	@- rm -rf package-lock.js node_modules react/preamble.js
+	@echo cleaned up.
+
+node_modules: package.json
+	@echo installing node dependencies
+	@npm install
+
+node_modules/react-refresh/runtime.js: node_modules
+
+node_modules/react-refresh: node_modules/react-refresh/runtime.js
+	@echo installing react-refresh
+	@npm install react-refresh@latest
+
+react/preamble.js: node_modules/react-refresh/runtime.js
+ifndef BROWSERFY
+	@echo browserfy not found so installing
+	@npm install -g browserify
+endif
+	@echo installing preamble
+	@browserify react/refresh-loader.js -o react/preamble.js
+
+react: react/preamble.js
+
+test:
+	@echo running tests...
+	@go test -v .
+

README.md

@@ -103,6 +103,7 @@ func main() {
 		Environment: "production",
 		AssetsPath:  "dist",
 		EntryPoint:  "src/main.js",
+		Platform:    "vue",
 		FS:          dist,
 	}
 
@@ -113,6 +114,7 @@ func main() {
 		Environment: "development",
 		AssetsPath:  "frontend",
 		EntryPoint:  "src/main.js",
+		Platform:    "vue",
 		FS:          os.DirFS("frontend"),
 	}
 

asset-server.go

@@ -1,13 +1,17 @@
 package vueglue
 
 import (
+	"embed"
 	"io/fs"
 	"log"
 	"net/http"
 	"path/filepath"
 	"strings"
 )
 
+//go:embed react
+var embedFiles embed.FS
+
 // FileServer is a customized version of http.FileServer
 // that can handle either an embed.FS or a os.DirFS fs.FS.
 // Since development directories used for hot updates
@@ -56,6 +60,22 @@ func (vg *VueGlue) guardedFileServer(serveDir fs.FS) http.Handler {
 			}
 		}
 
+		// handle any special-cased files
+		if len(parts) > 0 {
+			baseFile := parts[len(parts)-1]
+			if baseFile == "preamble.js" {
+				// react preamble file
+				bytes, err := embedFiles.ReadFile("react/preamble.js")
+				if err != nil {
+					log.Println("could not load preamble:", err)
+					http.NotFound(w, r)
+					return
+				}
+				serveOneFile(w, r, bytes, "application/javascript")
+				return
+			}
+		}
+
 		if vg.Debug {
 			log.Println("entered FS", r.URL.Path)
 			dir, err := fs.ReadDir(serveDir, ".")
@@ -70,8 +90,8 @@ func (vg *VueGlue) guardedFileServer(serveDir fs.FS) http.Handler {
 			}
 
 		}
-
-		fileServer := http.StripPrefix(stripPrefix, http.FileServer(http.FS(serveDir)))
+		loggingFS := logRequest(http.FileServer(http.FS(serveDir)))
+		fileServer := http.StripPrefix(stripPrefix, loggingFS)
 		fileServer.ServeHTTP(w, r)
 	}
 
@@ -112,3 +132,21 @@ func (wrpr wrapperFS) Open(path string) (fs.File, error) {
 
 	return f, nil
 }
+
+// serveOneFile is used for serving special-cased files.
+func serveOneFile(w http.ResponseWriter, r *http.Request, data []byte, ctype string) {
+	w.Header().Add("Content-Type", ctype)
+	_, err := w.Write(data)
+	if err != nil {
+		log.Println("could not write file:", err)
+	}
+}
+
+func logRequest(next http.Handler) http.Handler {
+	log.Println("invoked log handler")
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		log.Printf("%s - %s %s %s", r.RemoteAddr, r.Proto, r.Method, r.URL.RequestURI())
+
+		next.ServeHTTP(w, r)
+	})
+}

dev-proxy.go

@@ -0,0 +1,27 @@
+package vueglue
+
+import (
+	"log"
+	"net/http"
+)
+
+// Redirector for dev server
+
+func (vg *VueGlue) DevServerRedirector() http.Handler {
+
+	handler := func(w http.ResponseWriter, r *http.Request) {
+		original := r.URL.Path
+		prefix := "/dev/"
+		if len(original) < len(prefix) || original[:len(prefix)] != prefix {
+			http.NotFound(w, r)
+			return
+		}
+
+		rest := original[len(prefix)-1:]
+		log.Println("rest: ", rest)
+		w.Header().Set("Content-Type", "application/javascript")
+		http.Redirect(w, r, vg.DevServer+rest, http.StatusPermanentRedirect)
+	}
+
+	return http.HandlerFunc(handler)
+}

examples/sample-program/main.go

@@ -13,6 +13,7 @@ import (
 var environment string
 var assets string
 var jsEntryPoint string
+var platform = "vue"
 
 var vueData *vueglue.VueGlue
 
@@ -40,6 +41,7 @@ func main() {
 	flag.StringVar(&environment, "env", "development", "development|production")
 	flag.StringVar(&assets, "assets", "frontend", "location of javascript files. dist for production.")
 	flag.StringVar(&jsEntryPoint, "entryp", "src/main.js", "relative path of the entry point of the js app.")
+	flag.StringVar(&platform, "platform", "vue", "target platform for JavaScript (vue|react|svelte")
 	flag.Parse()
 
 	// We pass the file system with the built Vue
@@ -51,6 +53,7 @@ func main() {
 	config.Environment = environment
 	config.AssetsPath = assets
 	config.EntryPoint = jsEntryPoint
+	config.Platform = platform
 	//config.FS = os.DirFS(assets)
 	config.FS = dist
 
@@ -79,7 +82,7 @@ func main() {
 		return
 	}
 	mux.Handle("/src/", fsHandler)
-	mux.HandleFunc("/", pageWithAVue)
+	mux.Handle("/", logRequest(http.HandlerFunc(pageWithAVue)))
 
 	log.Println("Starting server on :4000")
 	err = http.ListenAndServe(":4000", mux)

examples/sample-program/test-template.tmpl

@@ -7,10 +7,7 @@
         {{ if $vue }}
           {{ $vue.RenderTags }}
         {{ end }}
-        <!-- if development -->
-        <!--
-        <script type="module" src="http://localhost:3000/src/main.js"></script>
-        -->
+
         <style>
         div.container {
           padding: 3rem;

package.json

@@ -0,0 +1,15 @@
+{
+  "name": "vueglue",
+  "version": "1.0.0",
+  "description": "react stubs for vueglue",
+  "author": "Rob Thorne",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/torenware/vite-go/issues"
+  },
+  "homepage": "https://github.com/torenware/vite-go#readme",
+  "dependencies": {
+    "react-refresh": "^0.12.0"
+  }
+}
+

react/.gitignore

@@ -0,0 +1,2 @@
+#*.js
+