Add react for simpler development of page and cleaner display

README.md

@@ -35,13 +35,11 @@ cd ..
 go run .
 ```
 
-## Semi-Live reloading
-Run the [example](#Example) then
 
-Optional Uncomment refresh line in [index.html](go/cover/index.html#L4)
+## Page Development
 
-Open [index.html](assets/index.html) in your browser
-
-```shell
-air
+```
+cd go/cover/react-coverage
+npm i
+npm run dev
 ```

_example/cover.out

@@ -2,6 +2,9 @@ mode: set
 github.com/skelouse/cover-pretty/_example/lib/func.go:3.31,4.7 1 1
 github.com/skelouse/cover-pretty/_example/lib/func.go:4.7,6.3 1 1
 github.com/skelouse/cover-pretty/_example/lib/func.go:8.2,8.13 1 0
+github.com/skelouse/cover-pretty/_example/lib/inner/func.go:3.36,4.7 1 1
+github.com/skelouse/cover-pretty/_example/lib/inner/func.go:4.7,6.3 1 1
+github.com/skelouse/cover-pretty/_example/lib/inner/func.go:8.2,8.13 1 0
 github.com/skelouse/cover-pretty/_example/func.go:9.28,10.7 1 1
 github.com/skelouse/cover-pretty/_example/func.go:10.7,12.3 1 1
 github.com/skelouse/cover-pretty/_example/func.go:14.2,14.13 1 0
@@ -44,6 +47,3 @@ github.com/skelouse/cover-pretty/_example/util.go:17.15,21.31 4 0
 github.com/skelouse/cover-pretty/_example/util.go:21.31,23.34 2 0
 github.com/skelouse/cover-pretty/_example/util.go:23.34,25.5 1 0
 github.com/skelouse/cover-pretty/_example/util.go:29.2,36.36 6 0
-github.com/skelouse/cover-pretty/_example/lib/inner/func.go:3.36,4.7 1 1
-github.com/skelouse/cover-pretty/_example/lib/inner/func.go:4.7,6.3 1 1
-github.com/skelouse/cover-pretty/_example/lib/inner/func.go:8.2,8.13 1 0

go/cover/html.go

@@ -15,7 +15,6 @@ import (
 	"strings"
 
 	"github.com/skelouse/cover-pretty/go/browser"
-
 	"golang.org/x/tools/cover"
 )
 
@@ -100,7 +99,7 @@ func HtmlOutput(profile, outfile string) error {
 			tmplFile.Indent = idx * 3
 
 			_loc, ok := location[dir]
-			if ok == false {
+			if !ok {
 				_loc = &templateFile{
 					Name:   dir,
 					IsDir:  true,
@@ -115,31 +114,66 @@ func HtmlOutput(profile, outfile string) error {
 		location[fileSuffix] = tmplFile
 	}
 
-	var out *os.File
+	var jsOut, htmlOut *os.File
+	var jsFilePath, htmlFilePath string
+
 	if outfile == "" {
 		var dir string
 		dir, err = os.MkdirTemp("", "cover")
 		if err != nil {
 			return err
 		}
-		out, err = os.Create(filepath.Join(dir, "coverage.html"))
+
+		jsFilePath = filepath.Join(dir, "coverage.js")
+		htmlFilePath = filepath.Join(dir, "index.html")
+
+		jsOut, err = os.Create(jsFilePath)
+		if err != nil {
+			return err
+		}
+		defer jsOut.Close()
+
+		htmlOut, err = os.Create(htmlFilePath)
+		if err != nil {
+			return err
+		}
+		defer htmlOut.Close()
+
 	} else {
-		out, err = os.Create(outfile)
-	}
-	if err != nil {
-		return err
-	}
-	err = htmlTemplate.Execute(out, d)
-	if err2 := out.Close(); err == nil {
-		err = err2
+		jsOut, err = os.Create(outfile)
+		if err != nil {
+			return err
+		}
+		defer jsOut.Close()
+
+		// If outfile is provided, generate the HTML file next to the JavaScript file
+		htmlFilePath = outfile[:len(outfile)-len(filepath.Ext(outfile))] + ".html"
+		htmlOut, err = os.Create(htmlFilePath)
+		if err != nil {
+			return err
+		}
+		defer htmlOut.Close()
 	}
+
+	// Execute JavaScript template
+	// err = jsTemplate.Execute(jsOut, d)
+	// if err != nil {
+	// 	return err
+	// }
+
+	// Execute HTML template
+	err = generateHTML(htmlFilePath, d)
 	if err != nil {
 		return err
 	}
 
+	// Print paths to generated files
+	fmt.Printf("HTML and JavaScript generated:\n- %s\n", htmlFilePath)
+
+	// Optionally, open the HTML file in a browser
 	if outfile == "" {
-		if !browser.Open("file://" + out.Name()) {
-			fmt.Fprintf(os.Stderr, "HTML output written to %s\n", out.Name())
+		if !browser.Open("file://" + strings.Replace(htmlFilePath, "index.html", "/index.html", -1)) {
+			fmt.Fprintf(os.Stderr, "HTML output written to %s\n", htmlFilePath)
 		}
 	}
 
@@ -197,28 +231,6 @@ func htmlGen(w io.Writer, src []byte, boundaries []cover.Boundary) error {
 	return dst.Flush()
 }
 
-// rgb returns an rgb value for the specified coverage value
-// between 0 (no coverage) and 10 (max coverage).
-func rgb(n int) string {
-	if n == 0 {
-		return "rgb(192, 0, 0)" // Red
-	}
-	// Gradient from gray to green.
-	r := 128 - 12*(n-1)
-	g := 128 + 12*(n-1)
-	b := 128 + 3*(n-1)
-	return fmt.Sprintf("rgb(%v, %v, %v)", r, g, b)
-}
-
-// colors generates the CSS rules for coverage colors.
-func colors() string {
-	var buf strings.Builder
-	for i := 0; i < 11; i++ {
-		fmt.Fprintf(&buf, ".cov%v { color: %v }\n", i, rgb(i))
-	}
-	return buf.String()
-}
-
 type templateData struct {
 	Header   string
 	Files    map[string]*templateFile

go/cover/react-coverage/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+/public

go/cover/react-coverage/build/asset-manifest.json

@@ -0,0 +1,11 @@
+{
+  "files": {
+    "main.css": "/static/css/main.b961cacc.css",
+    "main.js": "/static/js/main.8b5c8154.js",
+    "index.html": "/index.html"
+  },
+  "entrypoints": [
+    "static/css/main.b961cacc.css",
+    "static/js/main.8b5c8154.js"
+  ]
+}

go/cover/react-coverage/build/index.html

@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>React App</title><script defer="defer" src="/static/js/main.8b5c8154.js"></script><link href="/static/css/main.b961cacc.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

go/cover/react-coverage/build/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

go/cover/react-coverage/build/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow: