Add proper Media Type handling in js.Build

See #732

go.mod

@@ -15,7 +15,7 @@ require (
 	github.com/bep/tmc v0.5.1
 	github.com/disintegration/gift v1.2.1
 	github.com/dustin/go-humanize v1.0.0
-	github.com/evanw/esbuild v0.6.1
+	github.com/evanw/esbuild v0.6.2
 	github.com/fortytw2/leaktest v1.3.0
 	github.com/frankban/quicktest v1.7.2
 	github.com/fsnotify/fsnotify v1.4.7

go.sum

@@ -119,6 +119,8 @@ github.com/eapache/go-xerial-snappy v0.0.0-20180814174437-776d5712da21/go.mod h1
 github.com/eapache/queue v1.1.0/go.mod h1:6eCeP0CKFpHLu8blIFXhExK/dRa7WDZfr6jVFPTqq+I=
 github.com/evanw/esbuild v0.6.1 h1:XkoACQJCiqUmwySWssu0/iUj7J6IbNMR9dqbSbh1/vk=
 github.com/evanw/esbuild v0.6.1/go.mod h1:mptxmSXIzBIKKCe4jo9A5SToEd1G+AKZ9JmY85dYRJ0=
+github.com/evanw/esbuild v0.6.2 h1:pp33TIPgiHCtKL/gMW/V/PFHWNx/5cDTqbJHqAiy0jg=
+github.com/evanw/esbuild v0.6.2/go.mod h1:mptxmSXIzBIKKCe4jo9A5SToEd1G+AKZ9JmY85dYRJ0=
 github.com/fortytw2/leaktest v1.2.0 h1:cj6GCiwJDH7l3tMHLjZDo0QqPtrXJiWSI9JgpeQKw+Q=
 github.com/fortytw2/leaktest v1.2.0/go.mod h1:jDsjWgpAGjm2CA7WthBh/CdZYEPF31XHquHwclZch5g=
 github.com/fortytw2/leaktest v1.3.0 h1:u8491cBMTQ8ft8aeV+adlcytMZylmA5nnwwkRZjI8vw=

hugolib/js_test.go

@@ -15,7 +15,9 @@ package hugolib
 
 import (
 	"os"
+	"os/exec"
 	"path/filepath"
+	"runtime"
 	"testing"
 
 	"github.com/gohugoio/hugo/htesting"
@@ -29,11 +31,15 @@ import (
 	"github.com/gohugoio/hugo/common/loggers"
 )
 
-func TestJS_Build(t *testing.T) {
+func TestJSBuildWithNPM(t *testing.T) {
 	if !isCI() {
 		t.Skip("skip (relative) long running modules test when running locally")
 	}
 
+	if runtime.GOOS == "windows" {
+		t.Skip("skip NPM test on Windows")
+	}
+
 	wd, _ := os.Getwd()
 	defer func() {
 		os.Chdir(wd)
@@ -43,13 +49,44 @@ func TestJS_Build(t *testing.T) {
 
 	mainJS := `
 	import "./included";
+	import { toCamelCase } from "to-camel-case";
+	
 	console.log("main");
-	`
+	console.log("To camel:", toCamelCase("space case"));
+`
 	includedJS := `
 	console.log("included");
+	
 	`
 
-	workDir, clean, err := htesting.CreateTempDir(hugofs.Os, "hugo-test-babel")
+	jsxContent := `
+import * as React from 'react'
+import * as ReactDOM from 'react-dom'
+
+ ReactDOM.render(
+   <h1>Hello, world!</h1>,
+   document.getElementById('root')
+ );
+`
+
+	tsContent := `function greeter(person: string) {
+    return "Hello, " + person;
+}
+
+let user = [0, 1, 2];
+
+document.body.textContent = greeter(user);`
+
+	packageJSON := `{
+  "scripts": {},
+
+  "dependencies": {
+    "to-camel-case": "1.0.0"
+  }
+}
+`
+
+	workDir, clean, err := htesting.CreateTempDir(hugofs.Os, "hugo-test-js-npm")
 	c.Assert(err, qt.IsNil)
 	defer clean()
 
@@ -65,23 +102,99 @@ func TestJS_Build(t *testing.T) {
 	b.WithContent("p1.md", "")
 
 	b.WithTemplates("index.html", `
-	{{ $options := dict "minify" true }}
-	{{ $transpiled := resources.Get "js/main.js" | js.Build $options }}
-	Built: {{ $transpiled.Content | safeJS }}
-	`)
+{{ $options := dict "minify" false "externals" (slice "react" "react-dom") }}
+{{ $js := resources.Get "js/main.js" | js.Build $options }}
+JS:  {{ template "print" $js }}
+{{ $jsx := resources.Get "js/myjsx.jsx" | js.Build $options }}
+JSX: {{ template "print" $jsx }}
+{{ $ts := resources.Get "js/myts.ts" | js.Build }}
+TS: {{ template "print" $ts }}
+
+{{ define "print" }}RelPermalink: {{.RelPermalink}}|MIME: {{ .MediaType }}|Content: {{ .Content | safeJS }}{{ end }}
+
+`)
+
+	jsDir := filepath.Join(workDir, "assets", "js")
+	b.Assert(os.MkdirAll(jsDir, 0777), qt.IsNil)
+	b.Assert(os.Chdir(workDir), qt.IsNil)
+	b.WithSourceFile("package.json", packageJSON)
+	b.WithSourceFile("assets/js/main.js", mainJS)
+	b.WithSourceFile("assets/js/myjsx.jsx", jsxContent)
+	b.WithSourceFile("assets/js/myts.ts", tsContent)
+
+	b.WithSourceFile("assets/js/included.js", includedJS)
+
+	out, err := exec.Command("npm", "install").CombinedOutput()
+	b.Assert(err, qt.IsNil, qt.Commentf(string(out)))
+
+	b.Build(BuildCfg{})
+
+	b.AssertFileContent("public/index.html", `
+console.log(&#34;included&#34;);
+if (hasSpace.test(string))
+const React = __toModule(require(&#34;react&#34;));
+function greeter(person) {
+`)
+
+}
+
+func TestJSBuild(t *testing.T) {
+	if !isCI() {
+		t.Skip("skip (relative) long running modules test when running locally")
+	}
+
+	wd, _ := os.Getwd()
+	defer func() {
+		os.Chdir(wd)
+	}()
+
+	c := qt.New(t)
+
+	mainJS := `
+	import "./included";
+	
+	console.log("main");
+
+`
+	includedJS := `
+	console.log("included");
+	
+	`
+
+	workDir, clean, err := htesting.CreateTempDir(hugofs.Os, "hugo-test-js")
+	c.Assert(err, qt.IsNil)
+	defer clean()
+
+	v := viper.New()
+	v.Set("workingDir", workDir)
+	v.Set("disableKinds", []string{"taxonomy", "term", "page"})
+	b := newTestSitesBuilder(t).WithLogger(loggers.NewWarningLogger())
+
+	b.Fs = hugofs.NewDefault(v)
+	b.WithWorkingDir(workDir)
+	b.WithViper(v)
+	b.WithContent("p1.md", "")
+
+	b.WithTemplates("index.html", `
+{{ $js := resources.Get "js/main.js" | js.Build }}
+JS:  {{ template "print" $js }}
+
+
+{{ define "print" }}RelPermalink: {{.RelPermalink}}|MIME: {{ .MediaType }}|Content: {{ .Content | safeJS }}{{ end }}
+
+`)
 
 	jsDir := filepath.Join(workDir, "assets", "js")
 	b.Assert(os.MkdirAll(jsDir, 0777), qt.IsNil)
+	b.Assert(os.Chdir(workDir), qt.IsNil)
 	b.WithSourceFile("assets/js/main.js", mainJS)
 	b.WithSourceFile("assets/js/included.js", includedJS)
 
-	_, err = captureStdout(func() error {
-		return b.BuildE(BuildCfg{})
-	})
-	b.Assert(err, qt.IsNil)
+	b.Build(BuildCfg{})
 
 	b.AssertFileContent("public/index.html", `
-  Built: (()=&gt;{console.log(&#34;included&#34;);console.log(&#34;main&#34;);})();
-	`)
+console.log(&#34;included&#34;);
+
+`)
 
 }

media/mediaType.go

@@ -45,7 +45,6 @@ type Type struct {
 
 	Delimiter string `json:"delimiter"` // e.g. "."
 
-	// TODO(bep) make this a string to make it hashable + method
 	Suffixes []string `json:"suffixes"`
 
 	// Set when doing lookup by suffix.
@@ -130,13 +129,17 @@ var (
 	CSVType        = Type{MainType: "text", SubType: "csv", Suffixes: []string{"csv"}, Delimiter: defaultDelimiter}
 	HTMLType       = Type{MainType: "text", SubType: "html", Suffixes: []string{"html"}, Delimiter: defaultDelimiter}
 	JavascriptType = Type{MainType: "application", SubType: "javascript", Suffixes: []string{"js"}, Delimiter: defaultDelimiter}
-	JSONType       = Type{MainType: "application", SubType: "json", Suffixes: []string{"json"}, Delimiter: defaultDelimiter}
-	RSSType        = Type{MainType: "application", SubType: "rss", mimeSuffix: "xml", Suffixes: []string{"xml"}, Delimiter: defaultDelimiter}
-	XMLType        = Type{MainType: "application", SubType: "xml", Suffixes: []string{"xml"}, Delimiter: defaultDelimiter}
-	SVGType        = Type{MainType: "image", SubType: "svg", mimeSuffix: "xml", Suffixes: []string{"svg"}, Delimiter: defaultDelimiter}
-	TextType       = Type{MainType: "text", SubType: "plain", Suffixes: []string{"txt"}, Delimiter: defaultDelimiter}
-	TOMLType       = Type{MainType: "application", SubType: "toml", Suffixes: []string{"toml"}, Delimiter: defaultDelimiter}
-	YAMLType       = Type{MainType: "application", SubType: "yaml", Suffixes: []string{"yaml", "yml"}, Delimiter: defaultDelimiter}
+	TypeScriptType = Type{MainType: "application", SubType: "typescript", Suffixes: []string{"ts"}, Delimiter: defaultDelimiter}
+	TSXType        = Type{MainType: "text", SubType: "tsx", Suffixes: []string{"tsx"}, Delimiter: defaultDelimiter}
+	JSXType        = Type{MainType: "text", SubType: "jsx", Suffixes: []string{"jsx"}, Delimiter: defaultDelimiter}
+
+	JSONType = Type{MainType: "application", SubType: "json", Suffixes: []string{"json"}, Delimiter: defaultDelimiter}
+	RSSType  = Type{MainType: "application", SubType: "rss", mimeSuffix: "xml", Suffixes: []string{"xml"}, Delimiter: defaultDelimiter}
+	XMLType  = Type{MainType: "application", SubType: "xml", Suffixes: []string{"xml"}, Delimiter: defaultDelimiter}
+	SVGType  = Type{MainType: "image", SubType: "svg", mimeSuffix: "xml", Suffixes: []string{"svg"}, Delimiter: defaultDelimiter}
+	TextType = Type{MainType: "text", SubType: "plain", Suffixes: []string{"txt"}, Delimiter: defaultDelimiter}
+	TOMLType = Type{MainType: "application", SubType: "toml", Suffixes: []string{"toml"}, Delimiter: defaultDelimiter}
+	YAMLType = Type{MainType: "application", SubType: "yaml", Suffixes: []string{"yaml", "yml"}, Delimiter: defaultDelimiter}
 
 	// Common image types
 	PNGType  = Type{MainType: "image", SubType: "png", Suffixes: []string{"png"}, Delimiter: defaultDelimiter}
@@ -165,6 +168,9 @@ var DefaultTypes = Types{
 	SASSType,
 	HTMLType,
 	JavascriptType,
+	TypeScriptType,
+	TSXType,
+	JSXType,
 	JSONType,
 	RSSType,
 	XMLType,

media/mediaType_test.go

@@ -40,6 +40,9 @@ func TestDefaultTypes(t *testing.T) {
 		{CSVType, "text", "csv", "csv", "text/csv", "text/csv"},
 		{HTMLType, "text", "html", "html", "text/html", "text/html"},
 		{JavascriptType, "application", "javascript", "js", "application/javascript", "application/javascript"},
+		{TypeScriptType, "application", "typescript", "ts", "application/typescript", "application/typescript"},
+		{TSXType, "text", "tsx", "tsx", "text/tsx", "text/tsx"},
+		{JSXType, "text", "jsx", "jsx", "text/jsx", "text/jsx"},
 		{JSONType, "application", "json", "json", "application/json", "application/json"},
 		{RSSType, "application", "rss", "xml", "application/rss+xml", "application/rss+xml"},
 		{SVGType, "image", "svg", "svg", "image/svg+xml", "image/svg+xml"},
@@ -58,7 +61,7 @@ func TestDefaultTypes(t *testing.T) {
 
 	}
 
-	c.Assert(len(DefaultTypes), qt.Equals, 23)
+	c.Assert(len(DefaultTypes), qt.Equals, 26)
 
 }