(I did write better documentation but I lost it somehow...)
Install node module:
npm install homegrownjs
To setup the backend with ssr, I would reccomend using the go backend which has all the processing setup. Use the code in the main.go
file in the example project: homegrown-homepage. It would proably be easier to clone the project and then edit the files in the pages/root to follow along with the simple tutorial.
Each component is simply a function that returns an html component:
export function TestComponent(props: hg.Props, ctx hg.Ctx) {
return `
here be dragons
`
}
Simply access the props map as you would for any other js map:
export async function TestComponent(props: hg.Props, ctx: hg.Ctx) {
return `
here be dragons and ${props.get("propName")}
`
}
To hydrate the piece of the page once the promise has resolved we use the hg.hydr
function:
function sleep(time: number) {
return new Promise<null>((resolve, reject)=>{setTimeout(()=>{resolve(null)}, time)})
}
var fetchPost = async () => {
await sleep(5000) // simulate doing some processing
return fetch("https://jsonplaceholder.typicode.com/posts/1").then((val: Response) => val.text())
}
export async function TestComponent(props: hg.Props, ctx: hg.Ctx) {
return `
here be dragons and ${props.get("name")}
${await hg.hydr(
"This is from the server. Hello!",
fetchPost(), "componentNameGoesHere", ctx
)}
`
}