gromer

# gromer

[![Version](https://badge.fury.io/gh/pyros2097%2Fgromer.svg)](https://github.com/pyros2097/gromer)

**gromer** is a framework and cli to build multipage web apps in golang using [htmx](https://htmx.org/) and [alpinejs](https://alpinejs.dev/).

It uses a declarative syntax using inline jsx like templates for components and pages.

It also generates http handlers for your routes which follow a particular folder structure. Similar to other frameworks like nextjs, sveltekit.

You can install this extension [vscode-go-inline-html](https://marketplace.visualstudio.com/items?itemName=pyros2097.vscode-go-inline-html) to get
syntax highlighting for these templates.

# Requirements

```sh
go >= v1.18
```

# Install

```sh
go get -u -v github.com/pyros2097/gromer/cmd/gromer
```

# Using

You need to follow this directory structure similar to nextjs for the api route handlers to be generated and run the gromer command.

[Example](https://github.com/pyros2097/gromer/tree/master/_example)

**These are some components**

`routes/todo.go`

```go
func Todo(c Context, todo *todos.Todo) *Node {
  return c.Render(`
    <li id="todo-{todo.ID}" class="{ completed: todo.Completed }">
      <div class="view">
        <form  hx-target="#todo-{todo.ID}" hx-swap="outerHTML">
          <input type="hidden" name="intent" value="complete" />
          <input type="hidden" name="id" value="{todo.ID}" />
          <input class="checkbox" type="checkbox" checked="{value}" />
        </form>
        <label>{todo.Text}</label>
        <form hx-post="/" hx-target="#todo-{todo.ID}" hx-swap="delete">
          <input type="hidden" name="intent" value="delete" />
          <input type="hidden" name="id" value="{todo.ID}" />
          <button class="destroy"></button>
        </form>
      </div>
    </li>
  `)
}
```

**These are normal page routes**

`routes/get.go`

```go
type GetParams struct {
  Page   int    `json:"page"`
  Filter string `json:"filter"`
}

func GET(c Context, params GetParams) (*Node, int, error) {
  c.Meta("title", "Gromer Todos")
  c.Meta("description", "Gromer Todos")
  c.Meta("author", "gromer")
  c.Meta("keywords", "gromer")
  return c.Render(`
    <div class="todoapp">
      <header class="header">
        <h1>todos</h1>
        <form hx-post="/" hx-target="#todo-list" hx-swap="afterbegin" _="on htmx:afterOnLoad set #text.value to ''">
          <input type="hidden" name="intent" value="create" />
          <input class="new-todo" id="text" name="text" placeholder="What needs to be done?" autofocus="false" autocomplete="off" />
        </form>
      </header>
      <section class="main">
        <input class="toggle-all" id="toggle-all" type="checkbox" />
        <label for="toggle-all">Mark all as complete</label>
        <TodoList id="todo-list" page="{params.Page}" filter="{params.Filter}" />
      </section>
      <footer class="footer">
        <TodoCount filter="{params.Filter}" />
        <ul class="filters">
          <li>
            <a href="?filter=all">All</a>
          </li>
          <li>
            <a href="?filter=active">Active</a>
          </li>
          <li>
            <a href="?filter=completed">Completed</a>
          </li>
        </ul>
        <form hx-target="#todo-list" hx-post="/">
          <input type="hidden" name="intent" value="clear_completed" />
          <button type="submit" class="clear-completed" >Clear completed</button>
        </form>
      </footer>
    </div>
  `), 200, nil
}
```

And then run the gromer cli command annd it will generate the route handlers in a main.go file,

`main.go`

```go
// Code generated by gromer. DO NOT EDIT.
package main

import (
	"github.com/gorilla/mux"
	"github.com/pyros2097/gromer"
	"github.com/pyros2097/gromer/assets"
	"github.com/pyros2097/gromer/gsx"
	"github.com/rs/zerolog/log"
	"gocloud.dev/server"

	"github.com/pyros2097/gromer/_example/assets"
	"github.com/pyros2097/gromer/_example/components"
	"github.com/pyros2097/gromer/_example/containers"
	"github.com/pyros2097/gromer/_example/routes/404"
	"github.com/pyros2097/gromer/_example/routes"
	"github.com/pyros2097/gromer/_example/routes/about"
	
)

func init() {
	gsx.RegisterComponent(components.Todo, "todo")
	gsx.RegisterComponent(components.Checkbox, "value")
	gsx.RegisterComponent(containers.TodoCount, "filter")
	gsx.RegisterComponent(containers.TodoList, "page", "filter")
}

func main() {
	baseRouter := mux.NewRouter()
	baseRouter.Use(gromer.LogMiddleware)
	baseRouter.NotFoundHandler = gromer.StatusHandler(not_found_404.GET)
	
	staticRouter := baseRouter.NewRoute().Subrouter()
	staticRouter.Use(gromer.CacheMiddleware)
	gromer.StaticRoute(staticRouter, "/gromer/", gromer_assets.FS)
	gromer.StaticRoute(staticRouter, "/assets/", assets.FS)
	gromer.StylesRoute(staticRouter, "/styles.css")

	pageRouter := baseRouter.NewRoute().Subrouter()
	gromer.Handle(pageRouter, "GET", "/", routes.GET)
	gromer.Handle(pageRouter, "POST", "/", routes.POST)
	gromer.Handle(pageRouter, "GET", "/about", about.GET)
	
	log.Info().Msg("http server listening on http://localhost:3000")
	srv := server.New(baseRouter, nil)
	if err := srv.ListenAndServe(":3000"); err != nil {
		log.Fatal().Stack().Err(err).Msg("failed to listen")
	}
}
```

## TODO:

Add inline css formatting

Add inline html formatting