Skip to content

Commit be4af73

Browse files
natewong1313natewong1313
committed
Add CSS and image support
1 parent 2f71f2b commit be4af73

File tree

9 files changed

+56
-19
lines changed

9 files changed

+56
-19
lines changed

‎TODO.txt‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
- External css
21
- SSG
32
- Config defaults
43
- Use viper for config
5-
- logging
4+
- logging
5+
- Rework how hot reload and cache work
6+
- Fix not hot reloading on css change

‎frontend/public/horse.png‎

1.94 MB
Loading

‎frontend/public/index.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@
1313
</head>
1414
<body>
1515
<div id="root"></div>
16+
<style>
17+
{{index . "css"}}}
18+
</style>
1619
<script type="module">
1720
try{
1821
{{index . "src"}}

‎frontend/src/Home.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,15 @@ import { useState } from "react";
33
// import * as ReactDOM from "react-dom";
44
import Component from "./components/Component";
55
import { IndexRouteProps } from "./generated";
6-
// import "../public/test.css";
6+
import "../public/test.css";
7+
import horseImg from "../public/horse.png";
78

89
function Home({ initialCount, msg }: IndexRouteProps) {
910
const [count, setCount] = useState(initialCount);
1011

1112
return (
1213
<div className="App">
14+
<img src={horseImg} height={100} width={150} />
1315
<Component />
1416
<div>
1517
<a href="https://reactjs.org" target="_blank"></a>

‎frontend/src/components/Component.module.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.header {
2+
color: blue;
3+
}

‎frontend/src/components/Component.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import styles from "./Component.module.css";
2+
13
export default function Component() {
2-
return <div className="test">Hello world</div>;
4+
return <div className={styles.header}>Hello world</div>;
35
}

‎pkg/react_renderer/build_file.go‎

Lines changed: 24 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,29 +10,46 @@ import (
1010
esbuildApi "github.com/evanw/esbuild/pkg/api"
1111
)
1212

13-
func BuildFile(filePath, props string) (string, error){
13+
func BuildFile(filePath, props string) (CachedBuild, error){
14+
var cachedBuild CachedBuild
1415
// Get the path of the renderer file
1516
newFilePath, err := makeRendererFile(filePath, props)
1617
if err != nil {
17-
return "", err
18+
return cachedBuild, err
1819
}
1920
result := esbuildApi.Build(esbuildApi.BuildOptions{
2021
EntryPoints: []string{newFilePath},
2122
Bundle: true,
2223
MinifyWhitespace: true,
2324
MinifyIdentifiers: true,
2425
MinifySyntax: true,
25-
// Outfile: ".tmp/out.js",
26+
Outdir: "/Users/nwong/Code/go-ssr/.tmp",
27+
Loader: map[string]esbuildApi.Loader{
28+
".png": esbuildApi.LoaderDataURL,
29+
".svg": esbuildApi.LoaderDataURL,
30+
".jpg": esbuildApi.LoaderDataURL,
31+
".jpeg": esbuildApi.LoaderDataURL,
32+
".gif": esbuildApi.LoaderDataURL,
33+
".bmp": esbuildApi.LoaderDataURL,
34+
},
35+
// Outfile: "/Users/nwong/Code/go-ssr/tmp/out.js",
2636
})
2737
err = os.Remove(newFilePath)
2838
if err != nil {
29-
return "", err
39+
return cachedBuild, err
3040
}
3141
if len(result.Errors) > 0 {
32-
return "", errors.New(result.Errors[0].Text)
42+
return cachedBuild, errors.New(result.Errors[0].Text)
43+
}
44+
cachedBuild.CompiledJS = string(result.OutputFiles[0].Contents)
45+
for _, file := range result.OutputFiles {
46+
if(strings.HasSuffix(string(file.Path), ".css")){
47+
cachedBuild.CompiledCSS = string(file.Contents)
48+
break
49+
}
3350
}
34-
// Return the compiled Javascript
35-
return string(result.OutputFiles[0].Contents), nil
51+
// Return the compiled build
52+
return cachedBuild, nil
3653
}
3754

3855
// Creates a temporary file that imports the file to be rendered

‎pkg/react_renderer/cache.go‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,30 @@ import (
55
"sync"
66
)
77

8-
var cachedBuilds = make(map[string]string)
8+
type CachedBuild struct {
9+
CompiledJS string
10+
CompiledCSS string
11+
}
12+
13+
var cachedBuilds = make(map[string]CachedBuild)
914
var cachedBuildsLock = sync.RWMutex{}
1015

11-
func checkForCachedBuild(filePath string) (string, bool) {
16+
// Find a cached build for the given file path
17+
func checkForCachedBuild(filePath string) (CachedBuild, bool) {
1218
cachedBuildsLock.RLock()
1319
defer cachedBuildsLock.RUnlock()
1420
cachedBuild, ok := cachedBuilds[getFullFilePath(filePath)]
1521
return cachedBuild, ok
1622
}
1723

18-
func cacheBuild(filePath, build string) {
24+
// Add a build to the cache
25+
func cacheBuild(filePath string, cachedBuild CachedBuild) {
1926
cachedBuildsLock.Lock()
2027
defer cachedBuildsLock.Unlock()
21-
cachedBuilds[getFullFilePath(filePath)] = build
28+
cachedBuilds[getFullFilePath(filePath)] = cachedBuild
2229
}
2330

31+
// Remove a build from the cache
2432
func UpdateCacheOnFileChange(filePath string) {
2533
cachedBuildsLock.Lock()
2634
defer cachedBuildsLock.Unlock()

‎pkg/react_renderer/render_route.go‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,22 +29,23 @@ func RenderRoute(c *gin.Context, renderConfig Config) {
2929
}
3030
// Get the full path of the file
3131
filePath := config.Config.Web.SrcDirectory + "/" + renderConfig.File
32-
compiledJS, ok := checkForCachedBuild(filePath)
32+
cachedBuild, ok := checkForCachedBuild(filePath)
3333
if !ok {
3434
var err error
35-
compiledJS, err = BuildFile(filePath, props)
35+
cachedBuild, err = BuildFile(filePath, props)
3636
if err != nil {
3737
c.String(500, err.Error())
3838
}
39-
cacheBuild(filePath, compiledJS)
39+
cacheBuild(filePath, cachedBuild)
4040
}
4141
title := getTitle(renderConfig.MetaTags)
4242
delete(renderConfig.MetaTags, "title")
4343
c.HTML(http.StatusOK, "index.html", gin.H{
4444
"title": title,
4545
"metaTags": getMetaTags(renderConfig.MetaTags),
4646
"ogMetaTags": getOGMetaTags(renderConfig.MetaTags),
47-
"src": template.JS(compiledJS),
47+
"src": template.JS(cachedBuild.CompiledJS),
48+
"css": template.CSS(cachedBuild.CompiledCSS),
4849
})
4950
}
5051

0 commit comments

Comments
 (0)