Add fiber example, update readme, only return string from react renderer and rework how routeIDS are saved

Author: natewong1313

README.md

@@ -13,44 +13,81 @@
 
 Go-SSR is a drop in plugin to **any** existing Go web framework to allow **server rendering** [React](https://react.dev/). It's powered by [esbuild](https://esbuild.github.io/) and allows for passing props from Go to React with **type safety**.
 
-# Quickstart
+# 📜 Features
 
-```go
-package main
+- Lightning fast compiling
+- Auto generated Typescript structs for props
+- Smart build caching system
+- Hot reloading
+- Simple error reporting
+- Production optimized
+- Drop in to any existing Go web server
 
-import (
- "example.com/gin/models"
- "github.com/gin-gonic/gin"
- go_ssr "github.com/natewong1313/go-react-ssr"
- "github.com/natewong1313/go-react-ssr/pkg/config"
- "github.com/natewong1313/go-react-ssr/pkg/react_renderer"
-)
+<!-- _View more examples [here](github.com/natewong1313/go-react-ssr/examples)_ -->
+
+# 🛠️ Getting Started
+
+Go-SSR can either be installed by cloning a template or simply installing it on your own. It is reccomended to take a look at the [examples](/examples/README.md) folder to see how projects are structured.
+
+## ⚡️ Using pre-configured templates
 
-func main() {
- g := gin.Default()
-
- go_ssr.Init(config.Config{
- PropsStructsPath: "./models/props.go",
- })
-
- g.GET("/", func(c *gin.Context) {
- react_renderer.RenderRoute(c, react_renderer.Config{
- File: "Home.tsx",
- Props: &models.IndexRouteProps{
- InitialCount: 0,
- },
- })
- })
- g.Run()
-}
+Templates have been pre-configured to be installed from the console using the [`gonew`](https://go.dev/blog/gonew) command. View more info in the [examples](/examples/README.md) folder
+
+### Gin
+
+```console
+$ gonew github.com/natewong1313/go-react-ssr/examples/gin example.com/gin
 ```
 
-# Installation
+### Fiber
+
+```console
+$ gonew github.com/natewong1313/go-react-ssr/examples/fiber example.com/fiber
+```
 
-### Installing Go-SSR
+## 📝 Add to existing web server
 
-To install Go-SSR to an existing Go project, run the following Go command
+First, install the module
 
-```bash
+```console
 $ go get -u github.com/natewong1313/go-react-ssr
 ```
+
+Then, add imports into your main file
+
+```go
+import (
+...
+go_ssr "github.com/natewong1313/go-react-ssr"
+"github.com/natewong1313/go-react-ssr/pkg/config"
+"github.com/natewong1313/go-react-ssr/pkg/react_renderer"
+)
+```
+
+In your main function, initialize the plugin
+
+```go
+go_ssr.Init(config.Config{
+FrontendDir: "./frontend/src", // The React source files path
+GeneratedTypesPath: "./frontend/src/generated.d.ts", // Where the generated prop types will be created at
+PropsStructsPath: "./models/props.go", // Where the Go structs for your prop types are located
+})
+```
+
+Once the plugin has been initialized, you can call the `react_renderer.RenderRoute` function to compile your React file to a string
+
+```go
+g.GET("/", func(c *gin.Context) {
+c.Writer.Write(react_renderer.RenderRoute(react_renderer.Config{
+File: "Home.tsx", // The file name, located in FrontendDir
+Title: "My example app", // Set the app title
+MetaTags: map[string]string{ // Configure meta tags
+"og:title": "My example app",
+"description": "Example description",
+},
+Props: &models.IndexRouteProps{ // Pass in your props struct
+InitialCount: 0,
+},
+}))
+})
+```

examples/README.md

@@ -0,0 +1 @@
+# Examples

examples/fiber/assets/favicon.ico

@@ -0,0 +1,11 @@
+{
+ "dependencies": {
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0"
+ },
+ "devDependencies": {
+ "@types/react": "^18.2.21",
+ "@types/react-dom": "^18.2.7",
+ "typescript": "^5.2.2"
+ }
+}

examples/fiber/frontend/package-lock.json

@@ -0,0 +1,39 @@
+body {
+ background-color: #242424;
+ margin: 0 !important;
+ font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+}
+
+.home {
+ height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+}
+
+.img-container {
+ display: flex;
+ gap: 24px;
+ align-items: center;
+}
+
+h1 {
+ padding-top: 20px;
+ color: #fff;
+ font-size: 42px;
+ margin-bottom: 0;
+}
+
+.counter-container {
+ padding: 28px 0px;
+}
+
+a {
+ color: #888;
+ text-decoration: none;
+}
+
+a:hover {
+ text-decoration: underline;
+}

examples/fiber/frontend/package.json

@@ -0,0 +1,28 @@
+import { useState } from "react";
+import { IndexRouteProps } from "./generated";
+import GoLogo from "../public/go.png";
+import ReactLogo from "../public/react.png";
+import "./Home.css";
+import Counter from "./components/Counter";
+
+function Home({ initialCount }: IndexRouteProps) {
+ const [count, setCount] = useState(initialCount);
+
+ return (
+ <div className="home">
+ <div className="img-container">
+ <img src={GoLogo} alt="Go logo" height={70} width={170} />
+ <img src={ReactLogo} alt="React logo" height={80} width={90} />
+ </div>
+ <h1>Go + React</h1>
+ <div className="counter-container">
+ <Counter count={count} increment={() => setCount(count + 1)} />
+ </div>
+ <a href="https://github.com/natewong1313/go-react-ssr" target="_blank">
+ View project on GitHub
+ </a>
+ </div>
+ );
+}
+
+export default Home;

examples/fiber/frontend/public/go.png

@@ -0,0 +1,13 @@
+.counter {
+ color: white;
+ background-color: #1a1a1a;
+ font-size: 16px;
+ padding: 10px 16px;
+ border: 2px solid transparent;
+ border-radius: 8px;
+ cursor: pointer;
+}
+
+.counter:hover {
+ border: 2px solid #06a8c5;
+}