Move polyfills to a part of the esbuild step. In the future, additional polyfills should be able to be specified by the user

Author: natewong1313

internal/reactbuilder/build.go

@@ -10,6 +10,23 @@ import (
 	"github.com/natewong1313/go-react-ssr/internal/utils"
 )
 
+var loaders = map[string]esbuildApi.Loader{
+	".png":   esbuildApi.LoaderFile,
+	".svg":   esbuildApi.LoaderFile,
+	".jpg":   esbuildApi.LoaderFile,
+	".jpeg":  esbuildApi.LoaderFile,
+	".gif":   esbuildApi.LoaderFile,
+	".bmp":   esbuildApi.LoaderFile,
+	".woff2": esbuildApi.LoaderFile,
+	".woff":  esbuildApi.LoaderFile,
+	".ttf":   esbuildApi.LoaderFile,
+	".eot":   esbuildApi.LoaderFile,
+}
+
+var textEncoderPolyfill = `function TextEncoder(){}TextEncoder.prototype.encode=function(string){var octets=[];var length=string.length;var i=0;while(i<length){var codePoint=string.codePointAt(i);var c=0;var bits=0;if(codePoint<=0x0000007F){c=0;bits=0x00}else if(codePoint<=0x000007FF){c=6;bits=0xC0}else if(codePoint<=0x0000FFFF){c=12;bits=0xE0}else if(codePoint<=0x001FFFFF){c=18;bits=0xF0}octets.push(bits|(codePoint>>c));c-=6;while(c>=0){octets.push(0x80|((codePoint>>c)&0x3F));c-=6}i+=codePoint>=0x10000?2:1}return octets};function TextDecoder(){}TextDecoder.prototype.decode=function(octets){var string="";var i=0;while(i<octets.length){var octet=octets[i];var bytesNeeded=0;var codePoint=0;if(octet<=0x7F){bytesNeeded=0;codePoint=octet&0xFF}else if(octet<=0xDF){bytesNeeded=1;codePoint=octet&0x1F}else if(octet<=0xEF){bytesNeeded=2;codePoint=octet&0x0F}else if(octet<=0xF4){bytesNeeded=3;codePoint=octet&0x07}if(octets.length-i-bytesNeeded>0){var k=0;while(k<bytesNeeded){octet=octets[i+k+1];codePoint=(codePoint<<6)|(octet&0x3F);k+=1}}else{codePoint=0xFFFD;bytesNeeded=octets.length-i}string+=String.fromCodePoint(codePoint);i+=bytesNeeded+1}return string};`
+var processPolyfill = `var process = {env: {NODE_ENV: "production"}};`
+var consolePolyfill = `var console = {log: function(){}};`
+
 type BuildResult struct {
 	JS           string
 	CSS          string
@@ -32,17 +49,10 @@ func BuildServer(buildContents, frontendDir, assetRoute string) (BuildResult, er
 		MinifyWhitespace:  true,
 		MinifyIdentifiers: true,
 		MinifySyntax:      true,
-		Loader: map[string]esbuildApi.Loader{ // for loading images properly
-			".png":   esbuildApi.LoaderFile,
-			".svg":   esbuildApi.LoaderFile,
-			".jpg":   esbuildApi.LoaderFile,
-			".jpeg":  esbuildApi.LoaderFile,
-			".gif":   esbuildApi.LoaderFile,
-			".bmp":   esbuildApi.LoaderFile,
-			".woff2": esbuildApi.LoaderFile,
-			".woff":  esbuildApi.LoaderFile,
-			".ttf":   esbuildApi.LoaderFile,
-			".eot":   esbuildApi.LoaderFile,
+		Loader:            loaders,
+		// We can inject the polyfills at the top of the generated js
+		Banner: map[string]string{
+			"js": textEncoderPolyfill + processPolyfill + consolePolyfill,
 		},
 	}
 	return build(opts, false)
@@ -63,18 +73,7 @@ func BuildClient(buildContents, frontendDir, assetRoute string) (BuildResult, er
 		MinifyWhitespace:  os.Getenv("APP_ENV") == "production",
 		MinifyIdentifiers: os.Getenv("APP_ENV") == "production",
 		MinifySyntax:      os.Getenv("APP_ENV") == "production",
-		Loader: map[string]esbuildApi.Loader{ // for loading images properly
-			".png":   esbuildApi.LoaderFile,
-			".svg":   esbuildApi.LoaderFile,
-			".jpg":   esbuildApi.LoaderFile,
-			".jpeg":  esbuildApi.LoaderFile,
-			".gif":   esbuildApi.LoaderFile,
-			".bmp":   esbuildApi.LoaderFile,
-			".woff2": esbuildApi.LoaderFile,
-			".woff":  esbuildApi.LoaderFile,
-			".ttf":   esbuildApi.LoaderFile,
-			".eot":   esbuildApi.LoaderFile,
-		},
+		Loader:            loaders,
 	}
 	return build(opts, true)
 }

rendertask.go

@@ -144,17 +144,13 @@ func injectProps(compiledJS, props string) string {
 	return fmt.Sprintf(`var props = %s; %s`, props, compiledJS)
 }
 
-var textEncoderPolyfill = `function TextEncoder(){}TextEncoder.prototype.encode=function(string){var octets=[];var length=string.length;var i=0;while(i<length){var codePoint=string.codePointAt(i);var c=0;var bits=0;if(codePoint<=0x0000007F){c=0;bits=0x00}else if(codePoint<=0x000007FF){c=6;bits=0xC0}else if(codePoint<=0x0000FFFF){c=12;bits=0xE0}else if(codePoint<=0x001FFFFF){c=18;bits=0xF0}octets.push(bits|(codePoint>>c));c-=6;while(c>=0){octets.push(0x80|((codePoint>>c)&0x3F));c-=6}i+=codePoint>=0x10000?2:1}return octets};function TextDecoder(){}TextDecoder.prototype.decode=function(octets){var string="";var i=0;while(i<octets.length){var octet=octets[i];var bytesNeeded=0;var codePoint=0;if(octet<=0x7F){bytesNeeded=0;codePoint=octet&0xFF}else if(octet<=0xDF){bytesNeeded=1;codePoint=octet&0x1F}else if(octet<=0xEF){bytesNeeded=2;codePoint=octet&0x0F}else if(octet<=0xF4){bytesNeeded=3;codePoint=octet&0x07}if(octets.length-i-bytesNeeded>0){var k=0;while(k<bytesNeeded){octet=octets[i+k+1];codePoint=(codePoint<<6)|(octet&0x3F);k+=1}}else{codePoint=0xFFFD;bytesNeeded=octets.length-i}string+=String.fromCodePoint(codePoint);i+=bytesNeeded+1}return string};`
-var processPolyfill = `var process = {env: {NODE_ENV: "production"}};`
-var consolePolyfill = `var console = {log: function(){}};`
-
 // renderReactToHTML uses node to execute the server js file which outputs the rendered HTML
 func renderReactToHTMLNew(js string) (string, error) {
 	rt := quickjs.NewRuntime()
 	defer rt.Close()
 	ctx := rt.NewContext()
 	defer ctx.Close()
-	res, err := ctx.Eval(textEncoderPolyfill + processPolyfill + consolePolyfill + js)
+	res, err := ctx.Eval(js)
 	if err != nil {
 		return "", err
 	}