From 2f6535a5a9199c0256640ba3a1b00653c13026a9 Mon Sep 17 00:00:00 2001
From: Rob Thorne <rob@torenware.com>
Date: Sun, 24 Apr 2022 21:18:31 -0700
Subject: [PATCH] Added support for React hot loading.

---
 .gitignore                                 |   4 +
 Makefile                                   |  32 +
 README.md                                  |   2 +
 asset-server.go                            |  42 +-
 dev-proxy.go                               |  27 +
 examples/sample-program/main.go            |   5 +-
 examples/sample-program/test-template.tmpl |   5 +-
 package.json                               |  15 +
 react/.gitignore                           |   2 +
 react/preamble.js                          | 880 +++++++++++++++++++++
 react/refresh-loader.js                    |   6 +
 tags.go                                    |  11 +-
 vueglue.go                                 |   8 +
 13 files changed, 1030 insertions(+), 9 deletions(-)
 create mode 100644 Makefile
 create mode 100644 dev-proxy.go
 create mode 100644 package.json
 create mode 100644 react/.gitignore
 create mode 100644 react/preamble.js
 create mode 100644 react/refresh-loader.js

diff --git a/.gitignore b/.gitignore
index c9fa4b4..c0b532a 100644
--- a/.gitignore
+++ b/.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
diff --git a/Makefile b/Makefile
new file mode 100644
index 0000000..b2b969e
--- /dev/null
+++ b/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 .
+
diff --git a/README.md b/README.md
index 023bdef..682860d 100644
--- a/README.md
+++ b/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"),
 	}
 
diff --git a/asset-server.go b/asset-server.go
index b637c17..3d10b63 100644
--- a/asset-server.go
+++ b/asset-server.go
@@ -1,6 +1,7 @@
 package vueglue
 
 import (
+	"embed"
 	"io/fs"
 	"log"
 	"net/http"
@@ -8,6 +9,9 @@ import (
 	"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)
+	})
+}
diff --git a/dev-proxy.go b/dev-proxy.go
new file mode 100644
index 0000000..34b39ca
--- /dev/null
+++ b/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)
+}
diff --git a/examples/sample-program/main.go b/examples/sample-program/main.go
index 977e214..57a2fb7 100644
--- a/examples/sample-program/main.go
+++ b/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)
diff --git a/examples/sample-program/test-template.tmpl b/examples/sample-program/test-template.tmpl
index 7346d36..0ffaf0c 100644
--- a/examples/sample-program/test-template.tmpl
+++ b/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;
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..e35d8c4
--- /dev/null
+++ b/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"
+  }
+}
+
diff --git a/react/.gitignore b/react/.gitignore
new file mode 100644
index 0000000..b148ce0
--- /dev/null
+++ b/react/.gitignore
@@ -0,0 +1,2 @@
+#*.js
+
diff --git a/react/preamble.js b/react/preamble.js
new file mode 100644
index 0000000..3f8f66c
--- /dev/null
+++ b/react/preamble.js
@@ -0,0 +1,880 @@
+(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
+(function (process){(function (){
+/**
+ * @license React
+ * react-refresh-runtime.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+if (process.env.NODE_ENV !== "production") {
+  (function() {
+'use strict';
+
+// ATTENTION
+var REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref');
+var REACT_MEMO_TYPE = Symbol.for('react.memo');
+
+var PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map; // We never remove these associations.
+// It's OK to reference families, but use WeakMap/Set for types.
+
+var allFamiliesByID = new Map();
+var allFamiliesByType = new PossiblyWeakMap();
+var allSignaturesByType = new PossiblyWeakMap(); // This WeakMap is read by React, so we only put families
+// that have actually been edited here. This keeps checks fast.
+// $FlowIssue
+
+var updatedFamiliesByType = new PossiblyWeakMap(); // This is cleared on every performReactRefresh() call.
+// It is an array of [Family, NextType] tuples.
+
+var pendingUpdates = []; // This is injected by the renderer via DevTools global hook.
+
+var helpersByRendererID = new Map();
+var helpersByRoot = new Map(); // We keep track of mounted roots so we can schedule updates.
+
+var mountedRoots = new Set(); // If a root captures an error, we remember it so we can retry on edit.
+
+var failedRoots = new Set(); // In environments that support WeakMap, we also remember the last element for every root.
+// It needs to be weak because we do this even for roots that failed to mount.
+// If there is no WeakMap, we won't attempt to do retrying.
+// $FlowIssue
+
+var rootElements = // $FlowIssue
+typeof WeakMap === 'function' ? new WeakMap() : null;
+var isPerformingRefresh = false;
+
+function computeFullKey(signature) {
+  if (signature.fullKey !== null) {
+    return signature.fullKey;
+  }
+
+  var fullKey = signature.ownKey;
+  var hooks;
+
+  try {
+    hooks = signature.getCustomHooks();
+  } catch (err) {
+    // This can happen in an edge case, e.g. if expression like Foo.useSomething
+    // depends on Foo which is lazily initialized during rendering.
+    // In that case just assume we'll have to remount.
+    signature.forceReset = true;
+    signature.fullKey = fullKey;
+    return fullKey;
+  }
+
+  for (var i = 0; i < hooks.length; i++) {
+    var hook = hooks[i];
+
+    if (typeof hook !== 'function') {
+      // Something's wrong. Assume we need to remount.
+      signature.forceReset = true;
+      signature.fullKey = fullKey;
+      return fullKey;
+    }
+
+    var nestedHookSignature = allSignaturesByType.get(hook);
+
+    if (nestedHookSignature === undefined) {
+      // No signature means Hook wasn't in the source code, e.g. in a library.
+      // We'll skip it because we can assume it won't change during this session.
+      continue;
+    }
+
+    var nestedHookKey = computeFullKey(nestedHookSignature);
+
+    if (nestedHookSignature.forceReset) {
+      signature.forceReset = true;
+    }
+
+    fullKey += '\n---\n' + nestedHookKey;
+  }
+
+  signature.fullKey = fullKey;
+  return fullKey;
+}
+
+function haveEqualSignatures(prevType, nextType) {
+  var prevSignature = allSignaturesByType.get(prevType);
+  var nextSignature = allSignaturesByType.get(nextType);
+
+  if (prevSignature === undefined && nextSignature === undefined) {
+    return true;
+  }
+
+  if (prevSignature === undefined || nextSignature === undefined) {
+    return false;
+  }
+
+  if (computeFullKey(prevSignature) !== computeFullKey(nextSignature)) {
+    return false;
+  }
+
+  if (nextSignature.forceReset) {
+    return false;
+  }
+
+  return true;
+}
+
+function isReactClass(type) {
+  return type.prototype && type.prototype.isReactComponent;
+}
+
+function canPreserveStateBetween(prevType, nextType) {
+  if (isReactClass(prevType) || isReactClass(nextType)) {
+    return false;
+  }
+
+  if (haveEqualSignatures(prevType, nextType)) {
+    return true;
+  }
+
+  return false;
+}
+
+function resolveFamily(type) {
+  // Only check updated types to keep lookups fast.
+  return updatedFamiliesByType.get(type);
+} // If we didn't care about IE11, we could use new Map/Set(iterable).
+
+
+function cloneMap(map) {
+  var clone = new Map();
+  map.forEach(function (value, key) {
+    clone.set(key, value);
+  });
+  return clone;
+}
+
+function cloneSet(set) {
+  var clone = new Set();
+  set.forEach(function (value) {
+    clone.add(value);
+  });
+  return clone;
+} // This is a safety mechanism to protect against rogue getters and Proxies.
+
+
+function getProperty(object, property) {
+  try {
+    return object[property];
+  } catch (err) {
+    // Intentionally ignore.
+    return undefined;
+  }
+}
+
+function performReactRefresh() {
+
+  if (pendingUpdates.length === 0) {
+    return null;
+  }
+
+  if (isPerformingRefresh) {
+    return null;
+  }
+
+  isPerformingRefresh = true;
+
+  try {
+    var staleFamilies = new Set();
+    var updatedFamilies = new Set();
+    var updates = pendingUpdates;
+    pendingUpdates = [];
+    updates.forEach(function (_ref) {
+      var family = _ref[0],
+          nextType = _ref[1];
+      // Now that we got a real edit, we can create associations
+      // that will be read by the React reconciler.
+      var prevType = family.current;
+      updatedFamiliesByType.set(prevType, family);
+      updatedFamiliesByType.set(nextType, family);
+      family.current = nextType; // Determine whether this should be a re-render or a re-mount.
+
+      if (canPreserveStateBetween(prevType, nextType)) {
+        updatedFamilies.add(family);
+      } else {
+        staleFamilies.add(family);
+      }
+    }); // TODO: rename these fields to something more meaningful.
+
+    var update = {
+      updatedFamilies: updatedFamilies,
+      // Families that will re-render preserving state
+      staleFamilies: staleFamilies // Families that will be remounted
+
+    };
+    helpersByRendererID.forEach(function (helpers) {
+      // Even if there are no roots, set the handler on first update.
+      // This ensures that if *new* roots are mounted, they'll use the resolve handler.
+      helpers.setRefreshHandler(resolveFamily);
+    });
+    var didError = false;
+    var firstError = null; // We snapshot maps and sets that are mutated during commits.
+    // If we don't do this, there is a risk they will be mutated while
+    // we iterate over them. For example, trying to recover a failed root
+    // may cause another root to be added to the failed list -- an infinite loop.
+
+    var failedRootsSnapshot = cloneSet(failedRoots);
+    var mountedRootsSnapshot = cloneSet(mountedRoots);
+    var helpersByRootSnapshot = cloneMap(helpersByRoot);
+    failedRootsSnapshot.forEach(function (root) {
+      var helpers = helpersByRootSnapshot.get(root);
+
+      if (helpers === undefined) {
+        throw new Error('Could not find helpers for a root. This is a bug in React Refresh.');
+      }
+
+      if (!failedRoots.has(root)) {// No longer failed.
+      }
+
+      if (rootElements === null) {
+        return;
+      }
+
+      if (!rootElements.has(root)) {
+        return;
+      }
+
+      var element = rootElements.get(root);
+
+      try {
+        helpers.scheduleRoot(root, element);
+      } catch (err) {
+        if (!didError) {
+          didError = true;
+          firstError = err;
+        } // Keep trying other roots.
+
+      }
+    });
+    mountedRootsSnapshot.forEach(function (root) {
+      var helpers = helpersByRootSnapshot.get(root);
+
+      if (helpers === undefined) {
+        throw new Error('Could not find helpers for a root. This is a bug in React Refresh.');
+      }
+
+      if (!mountedRoots.has(root)) {// No longer mounted.
+      }
+
+      try {
+        helpers.scheduleRefresh(root, update);
+      } catch (err) {
+        if (!didError) {
+          didError = true;
+          firstError = err;
+        } // Keep trying other roots.
+
+      }
+    });
+
+    if (didError) {
+      throw firstError;
+    }
+
+    return update;
+  } finally {
+    isPerformingRefresh = false;
+  }
+}
+function register(type, id) {
+  {
+    if (type === null) {
+      return;
+    }
+
+    if (typeof type !== 'function' && typeof type !== 'object') {
+      return;
+    } // This can happen in an edge case, e.g. if we register
+    // return value of a HOC but it returns a cached component.
+    // Ignore anything but the first registration for each type.
+
+
+    if (allFamiliesByType.has(type)) {
+      return;
+    } // Create family or remember to update it.
+    // None of this bookkeeping affects reconciliation
+    // until the first performReactRefresh() call above.
+
+
+    var family = allFamiliesByID.get(id);
+
+    if (family === undefined) {
+      family = {
+        current: type
+      };
+      allFamiliesByID.set(id, family);
+    } else {
+      pendingUpdates.push([family, type]);
+    }
+
+    allFamiliesByType.set(type, family); // Visit inner types because we might not have registered them.
+
+    if (typeof type === 'object' && type !== null) {
+      switch (getProperty(type, '$$typeof')) {
+        case REACT_FORWARD_REF_TYPE:
+          register(type.render, id + '$render');
+          break;
+
+        case REACT_MEMO_TYPE:
+          register(type.type, id + '$type');
+          break;
+      }
+    }
+  }
+}
+function setSignature(type, key) {
+  var forceReset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var getCustomHooks = arguments.length > 3 ? arguments[3] : undefined;
+
+  {
+    if (!allSignaturesByType.has(type)) {
+      allSignaturesByType.set(type, {
+        forceReset: forceReset,
+        ownKey: key,
+        fullKey: null,
+        getCustomHooks: getCustomHooks || function () {
+          return [];
+        }
+      });
+    } // Visit inner types because we might not have signed them.
+
+
+    if (typeof type === 'object' && type !== null) {
+      switch (getProperty(type, '$$typeof')) {
+        case REACT_FORWARD_REF_TYPE:
+          setSignature(type.render, key, forceReset, getCustomHooks);
+          break;
+
+        case REACT_MEMO_TYPE:
+          setSignature(type.type, key, forceReset, getCustomHooks);
+          break;
+      }
+    }
+  }
+} // This is lazily called during first render for a type.
+// It captures Hook list at that time so inline requires don't break comparisons.
+
+function collectCustomHooksForSignature(type) {
+  {
+    var signature = allSignaturesByType.get(type);
+
+    if (signature !== undefined) {
+      computeFullKey(signature);
+    }
+  }
+}
+function getFamilyByID(id) {
+  {
+    return allFamiliesByID.get(id);
+  }
+}
+function getFamilyByType(type) {
+  {
+    return allFamiliesByType.get(type);
+  }
+}
+function findAffectedHostInstances(families) {
+  {
+    var affectedInstances = new Set();
+    mountedRoots.forEach(function (root) {
+      var helpers = helpersByRoot.get(root);
+
+      if (helpers === undefined) {
+        throw new Error('Could not find helpers for a root. This is a bug in React Refresh.');
+      }
+
+      var instancesForRoot = helpers.findHostInstancesForRefresh(root, families);
+      instancesForRoot.forEach(function (inst) {
+        affectedInstances.add(inst);
+      });
+    });
+    return affectedInstances;
+  }
+}
+function injectIntoGlobalHook(globalObject) {
+  {
+    // For React Native, the global hook will be set up by require('react-devtools-core').
+    // That code will run before us. So we need to monkeypatch functions on existing hook.
+    // For React Web, the global hook will be set up by the extension.
+    // This will also run before us.
+    var hook = globalObject.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+
+    if (hook === undefined) {
+      // However, if there is no DevTools extension, we'll need to set up the global hook ourselves.
+      // Note that in this case it's important that renderer code runs *after* this method call.
+      // Otherwise, the renderer will think that there is no global hook, and won't do the injection.
+      var nextID = 0;
+      globalObject.__REACT_DEVTOOLS_GLOBAL_HOOK__ = hook = {
+        renderers: new Map(),
+        supportsFiber: true,
+        inject: function (injected) {
+          return nextID++;
+        },
+        onScheduleFiberRoot: function (id, root, children) {},
+        onCommitFiberRoot: function (id, root, maybePriorityLevel, didError) {},
+        onCommitFiberUnmount: function () {}
+      };
+    }
+
+    if (hook.isDisabled) {
+      // This isn't a real property on the hook, but it can be set to opt out
+      // of DevTools integration and associated warnings and logs.
+      // Using console['warn'] to evade Babel and ESLint
+      console['warn']('Something has shimmed the React DevTools global hook (__REACT_DEVTOOLS_GLOBAL_HOOK__). ' + 'Fast Refresh is not compatible with this shim and will be disabled.');
+      return;
+    } // Here, we just want to get a reference to scheduleRefresh.
+
+
+    var oldInject = hook.inject;
+
+    hook.inject = function (injected) {
+      var id = oldInject.apply(this, arguments);
+
+      if (typeof injected.scheduleRefresh === 'function' && typeof injected.setRefreshHandler === 'function') {
+        // This version supports React Refresh.
+        helpersByRendererID.set(id, injected);
+      }
+
+      return id;
+    }; // Do the same for any already injected roots.
+    // This is useful if ReactDOM has already been initialized.
+    // https://github.com/facebook/react/issues/17626
+
+
+    hook.renderers.forEach(function (injected, id) {
+      if (typeof injected.scheduleRefresh === 'function' && typeof injected.setRefreshHandler === 'function') {
+        // This version supports React Refresh.
+        helpersByRendererID.set(id, injected);
+      }
+    }); // We also want to track currently mounted roots.
+
+    var oldOnCommitFiberRoot = hook.onCommitFiberRoot;
+
+    var oldOnScheduleFiberRoot = hook.onScheduleFiberRoot || function () {};
+
+    hook.onScheduleFiberRoot = function (id, root, children) {
+      if (!isPerformingRefresh) {
+        // If it was intentionally scheduled, don't attempt to restore.
+        // This includes intentionally scheduled unmounts.
+        failedRoots.delete(root);
+
+        if (rootElements !== null) {
+          rootElements.set(root, children);
+        }
+      }
+
+      return oldOnScheduleFiberRoot.apply(this, arguments);
+    };
+
+    hook.onCommitFiberRoot = function (id, root, maybePriorityLevel, didError) {
+      var helpers = helpersByRendererID.get(id);
+
+      if (helpers !== undefined) {
+        helpersByRoot.set(root, helpers);
+        var current = root.current;
+        var alternate = current.alternate; // We need to determine whether this root has just (un)mounted.
+        // This logic is copy-pasted from similar logic in the DevTools backend.
+        // If this breaks with some refactoring, you'll want to update DevTools too.
+
+        if (alternate !== null) {
+          var wasMounted = alternate.memoizedState != null && alternate.memoizedState.element != null && mountedRoots.has(root);
+          var isMounted = current.memoizedState != null && current.memoizedState.element != null;
+
+          if (!wasMounted && isMounted) {
+            // Mount a new root.
+            mountedRoots.add(root);
+            failedRoots.delete(root);
+          } else if (wasMounted && isMounted) ; else if (wasMounted && !isMounted) {
+            // Unmount an existing root.
+            mountedRoots.delete(root);
+
+            if (didError) {
+              // We'll remount it on future edits.
+              failedRoots.add(root);
+            } else {
+              helpersByRoot.delete(root);
+            }
+          } else if (!wasMounted && !isMounted) {
+            if (didError) {
+              // We'll remount it on future edits.
+              failedRoots.add(root);
+            }
+          }
+        } else {
+          // Mount a new root.
+          mountedRoots.add(root);
+        }
+      } // Always call the decorated DevTools hook.
+
+
+      return oldOnCommitFiberRoot.apply(this, arguments);
+    };
+  }
+}
+function hasUnrecoverableErrors() {
+  // TODO: delete this after removing dependency in RN.
+  return false;
+} // Exposed for testing.
+
+function _getMountedRootCount() {
+  {
+    return mountedRoots.size;
+  }
+} // This is a wrapper over more primitive functions for setting signature.
+// Signatures let us decide whether the Hook order has changed on refresh.
+//
+// This function is intended to be used as a transform target, e.g.:
+// var _s = createSignatureFunctionForTransform()
+//
+// function Hello() {
+//   const [foo, setFoo] = useState(0);
+//   const value = useCustomHook();
+//   _s(); /* Call without arguments triggers collecting the custom Hook list.
+//          * This doesn't happen during the module evaluation because we
+//          * don't want to change the module order with inline requires.
+//          * Next calls are noops. */
+//   return <h1>Hi</h1>;
+// }
+//
+// /* Call with arguments attaches the signature to the type: */
+// _s(
+//   Hello,
+//   'useState{[foo, setFoo]}(0)',
+//   () => [useCustomHook], /* Lazy to avoid triggering inline requires */
+// );
+
+function createSignatureFunctionForTransform() {
+  {
+    var savedType;
+    var hasCustomHooks;
+    var didCollectHooks = false;
+    return function (type, key, forceReset, getCustomHooks) {
+      if (typeof key === 'string') {
+        // We're in the initial phase that associates signatures
+        // with the functions. Note this may be called multiple times
+        // in HOC chains like _s(hoc1(_s(hoc2(_s(actualFunction))))).
+        if (!savedType) {
+          // We're in the innermost call, so this is the actual type.
+          savedType = type;
+          hasCustomHooks = typeof getCustomHooks === 'function';
+        } // Set the signature for all types (even wrappers!) in case
+        // they have no signatures of their own. This is to prevent
+        // problems like https://github.com/facebook/react/issues/20417.
+
+
+        if (type != null && (typeof type === 'function' || typeof type === 'object')) {
+          setSignature(type, key, forceReset, getCustomHooks);
+        }
+
+        return type;
+      } else {
+        // We're in the _s() call without arguments, which means
+        // this is the time to collect custom Hook signatures.
+        // Only do this once. This path is hot and runs *inside* every render!
+        if (!didCollectHooks && hasCustomHooks) {
+          didCollectHooks = true;
+          collectCustomHooksForSignature(savedType);
+        }
+      }
+    };
+  }
+}
+function isLikelyComponentType(type) {
+  {
+    switch (typeof type) {
+      case 'function':
+        {
+          // First, deal with classes.
+          if (type.prototype != null) {
+            if (type.prototype.isReactComponent) {
+              // React class.
+              return true;
+            }
+
+            var ownNames = Object.getOwnPropertyNames(type.prototype);
+
+            if (ownNames.length > 1 || ownNames[0] !== 'constructor') {
+              // This looks like a class.
+              return false;
+            } // eslint-disable-next-line no-proto
+
+
+            if (type.prototype.__proto__ !== Object.prototype) {
+              // It has a superclass.
+              return false;
+            } // Pass through.
+            // This looks like a regular function with empty prototype.
+
+          } // For plain functions and arrows, use name as a heuristic.
+
+
+          var name = type.name || type.displayName;
+          return typeof name === 'string' && /^[A-Z]/.test(name);
+        }
+
+      case 'object':
+        {
+          if (type != null) {
+            switch (getProperty(type, '$$typeof')) {
+              case REACT_FORWARD_REF_TYPE:
+              case REACT_MEMO_TYPE:
+                // Definitely React components.
+                return true;
+
+              default:
+                return false;
+            }
+          }
+
+          return false;
+        }
+
+      default:
+        {
+          return false;
+        }
+    }
+  }
+}
+
+exports._getMountedRootCount = _getMountedRootCount;
+exports.collectCustomHooksForSignature = collectCustomHooksForSignature;
+exports.createSignatureFunctionForTransform = createSignatureFunctionForTransform;
+exports.findAffectedHostInstances = findAffectedHostInstances;
+exports.getFamilyByID = getFamilyByID;
+exports.getFamilyByType = getFamilyByType;
+exports.hasUnrecoverableErrors = hasUnrecoverableErrors;
+exports.injectIntoGlobalHook = injectIntoGlobalHook;
+exports.isLikelyComponentType = isLikelyComponentType;
+exports.performReactRefresh = performReactRefresh;
+exports.register = register;
+exports.setSignature = setSignature;
+  })();
+}
+
+}).call(this)}).call(this,require('_process'))
+},{"_process":5}],2:[function(require,module,exports){
+/**
+ * @license React
+ * react-refresh-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';throw Error("React Refresh runtime should not be included in the production bundle.");
+
+},{}],3:[function(require,module,exports){
+(function (process){(function (){
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-refresh-runtime.production.min.js');
+} else {
+  module.exports = require('./cjs/react-refresh-runtime.development.js');
+}
+
+}).call(this)}).call(this,require('_process'))
+},{"./cjs/react-refresh-runtime.development.js":1,"./cjs/react-refresh-runtime.production.min.js":2,"_process":5}],4:[function(require,module,exports){
+const runtime = require('react-refresh/runtime');
+runtime.injectIntoGlobalHook(window);
+window.$RefreshReg$ = () => { };
+window.$RefreshSig$ = () => type => type;
+window.__vite_plugin_react_preamble_installed__ = true;
+
+
+},{"react-refresh/runtime":3}],5:[function(require,module,exports){
+// shim for using process in browser
+var process = module.exports = {};
+
+// cached from whatever global is present so that test runners that stub it
+// don't break things.  But we need to wrap it in a try catch in case it is
+// wrapped in strict mode code which doesn't define any globals.  It's inside a
+// function because try/catches deoptimize in certain engines.
+
+var cachedSetTimeout;
+var cachedClearTimeout;
+
+function defaultSetTimout() {
+    throw new Error('setTimeout has not been defined');
+}
+function defaultClearTimeout () {
+    throw new Error('clearTimeout has not been defined');
+}
+(function () {
+    try {
+        if (typeof setTimeout === 'function') {
+            cachedSetTimeout = setTimeout;
+        } else {
+            cachedSetTimeout = defaultSetTimout;
+        }
+    } catch (e) {
+        cachedSetTimeout = defaultSetTimout;
+    }
+    try {
+        if (typeof clearTimeout === 'function') {
+            cachedClearTimeout = clearTimeout;
+        } else {
+            cachedClearTimeout = defaultClearTimeout;
+        }
+    } catch (e) {
+        cachedClearTimeout = defaultClearTimeout;
+    }
+} ())
+function runTimeout(fun) {
+    if (cachedSetTimeout === setTimeout) {
+        //normal enviroments in sane situations
+        return setTimeout(fun, 0);
+    }
+    // if setTimeout wasn't available but was latter defined
+    if ((cachedSetTimeout === defaultSetTimout || !cachedSetTimeout) && setTimeout) {
+        cachedSetTimeout = setTimeout;
+        return setTimeout(fun, 0);
+    }
+    try {
+        // when when somebody has screwed with setTimeout but no I.E. maddness
+        return cachedSetTimeout(fun, 0);
+    } catch(e){
+        try {
+            // When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally
+            return cachedSetTimeout.call(null, fun, 0);
+        } catch(e){
+            // same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error
+            return cachedSetTimeout.call(this, fun, 0);
+        }
+    }
+
+
+}
+function runClearTimeout(marker) {
+    if (cachedClearTimeout === clearTimeout) {
+        //normal enviroments in sane situations
+        return clearTimeout(marker);
+    }
+    // if clearTimeout wasn't available but was latter defined
+    if ((cachedClearTimeout === defaultClearTimeout || !cachedClearTimeout) && clearTimeout) {
+        cachedClearTimeout = clearTimeout;
+        return clearTimeout(marker);
+    }
+    try {
+        // when when somebody has screwed with setTimeout but no I.E. maddness
+        return cachedClearTimeout(marker);
+    } catch (e){
+        try {
+            // When we are in I.E. but the script has been evaled so I.E. doesn't  trust the global object when called normally
+            return cachedClearTimeout.call(null, marker);
+        } catch (e){
+            // same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error.
+            // Some versions of I.E. have different rules for clearTimeout vs setTimeout
+            return cachedClearTimeout.call(this, marker);
+        }
+    }
+
+
+
+}
+var queue = [];
+var draining = false;
+var currentQueue;
+var queueIndex = -1;
+
+function cleanUpNextTick() {
+    if (!draining || !currentQueue) {
+        return;
+    }
+    draining = false;
+    if (currentQueue.length) {
+        queue = currentQueue.concat(queue);
+    } else {
+        queueIndex = -1;
+    }
+    if (queue.length) {
+        drainQueue();
+    }
+}
+
+function drainQueue() {
+    if (draining) {
+        return;
+    }
+    var timeout = runTimeout(cleanUpNextTick);
+    draining = true;
+
+    var len = queue.length;
+    while(len) {
+        currentQueue = queue;
+        queue = [];
+        while (++queueIndex < len) {
+            if (currentQueue) {
+                currentQueue[queueIndex].run();
+            }
+        }
+        queueIndex = -1;
+        len = queue.length;
+    }
+    currentQueue = null;
+    draining = false;
+    runClearTimeout(timeout);
+}
+
+process.nextTick = function (fun) {
+    var args = new Array(arguments.length - 1);
+    if (arguments.length > 1) {
+        for (var i = 1; i < arguments.length; i++) {
+            args[i - 1] = arguments[i];
+        }
+    }
+    queue.push(new Item(fun, args));
+    if (queue.length === 1 && !draining) {
+        runTimeout(drainQueue);
+    }
+};
+
+// v8 likes predictible objects
+function Item(fun, array) {
+    this.fun = fun;
+    this.array = array;
+}
+Item.prototype.run = function () {
+    this.fun.apply(null, this.array);
+};
+process.title = 'browser';
+process.browser = true;
+process.env = {};
+process.argv = [];
+process.version = ''; // empty string to avoid regexp issues
+process.versions = {};
+
+function noop() {}
+
+process.on = noop;
+process.addListener = noop;
+process.once = noop;
+process.off = noop;
+process.removeListener = noop;
+process.removeAllListeners = noop;
+process.emit = noop;
+process.prependListener = noop;
+process.prependOnceListener = noop;
+
+process.listeners = function (name) { return [] }
+
+process.binding = function (name) {
+    throw new Error('process.binding is not supported');
+};
+
+process.cwd = function () { return '/' };
+process.chdir = function (dir) {
+    throw new Error('process.chdir is not supported');
+};
+process.umask = function() { return 0; };
+
+},{}]},{},[4]);
diff --git a/react/refresh-loader.js b/react/refresh-loader.js
new file mode 100644
index 0000000..6442c11
--- /dev/null
+++ b/react/refresh-loader.js
@@ -0,0 +1,6 @@
+const runtime = require('react-refresh/runtime');
+runtime.injectIntoGlobalHook(window);
+window.$RefreshReg$ = () => { };
+window.$RefreshSig$ = () => type => type;
+window.__vite_plugin_react_preamble_installed__ = true;
+
diff --git a/tags.go b/tags.go
index ead0ff4..4820a55 100644
--- a/tags.go
+++ b/tags.go
@@ -11,11 +11,18 @@ func (vg *VueGlue) RenderTags() (template.HTML, error) {
 	var tags string
 
 	if vg.Environment == "development" {
-		tags = `
+		if vg.Platform == "react" {
+			// react requires some extra help to load
+			tags += `
+    <script src="/src/preamble.js"></script>
+            `
+		}
+		tags += `
     <script type="module" src="{{.DevServer}}/{{ .MainModule }}"></script>
         `
+
 	} else {
-		tags = `
+		tags += `
 	<script type="module" crossorigin src="/{{ .MainModule }}"></script>
 	{{ range .Imports }}
 	<link rel="modulepreload" href="/{{.}}">
diff --git a/vueglue.go b/vueglue.go
index 9f0b572..8c975a9 100644
--- a/vueglue.go
+++ b/vueglue.go
@@ -30,6 +30,10 @@ type ViteConfig struct {
 	// Default is "http://localhost:3000".
 	DevServer string
 
+	// Platform (vue|react|svelte) is the target platform.
+	// Default is "vue"
+	Platform string
+
 	// Entry point: as configured in vite.config.js. Typically
 	// src/main.js or src/main.ts.
 	EntryPoint string
@@ -52,6 +56,9 @@ type VueGlue struct {
 	// Bundled CSS
 	CSSModule []string
 
+	// Target JS Platform
+	Platform string
+
 	// A file system or embed that points to the Vue/Vite dist
 	// directory (production) or the javascript src directory
 	// (development)
@@ -141,6 +148,7 @@ func NewVueGlue(config *ViteConfig) (*VueGlue, error) {
 
 	glue.Environment = config.Environment
 	glue.AssetPath = config.AssetsPath
+	glue.Platform = config.Platform
 	glue.DistFS = correctedFS
 
 	return glue, nil