livefir / fir Goto Github PK

View Code? Open in Web Editor NEW

176.0 3.0 4.0 4.5 MB

Build reactive html apps in Go

Home Page: https://livefir.fly.dev/

License: MIT License

JavaScript 14.60% Go 83.88% HTML 1.52%

alpine-js go-web-framework template liveview reactive enhancement progressive html-template

fir's People

Contributors

Stargazers

Watchers

Forkers

miko gismo-stack markdessain pr454d

fir's Issues

CLI: new output is not buildable

using https://github.com/livefir/fir/releases/tag/v0.3.5

cli new test01

cd test01
go mod init main
go mod tidy
go build .
/Users/apple/go/pkg/mod/github.com/livefir/[email protected]/markdown.go:332:44: undefined: extension.CJK

on event send a diff of a block/template

We want to send a diff of the changed template instead of everything. This is similar to how phoenix liveview works: https://www.poeticoding.com/how-phoenix-liveview-works/

For the following example html page:

<div
    @fir:create:ok::todo="$fir.appendEl()"
    @fir:query:ok::todos="$fir.replace()">
    {{ block "todos" }}
        <div>List of todos</div>
        <div>Number of todos: {{ len .todos }}</div>
        <ul>
            {{ range .todos }}
                {{ block "todo" . }}
                    <li>{{ .Text }}</li>
                {{ end }}
            {{ end }}
        </ul>
    {{ end }}
</div>

OnLoad:

Include the static parts in the rendered html page when the page is first loaded:

<script>
{
    "todos": {
        "d": [
            "template@todo",
            "{{ len .todos }}"
        ],
        "s": [
            "<div>List of todos</div>\n<ul>",
            "</ul>\n<div>Number of todos: ",
            "</div>"
        ]
    },
    "todo": {
        "d": [
            "{{.Text}}"
        ],
        "s": [
            "<li>",
            "</li>"
        ]
    }
}</script>

Respond with dynamic parts to an event:

OnEvent('create',...)

{
    "type": "@fir:create:ok::todo",
    "detail": {
        "diff": [
            "todo 1"
        ]
    },
    "target": ".fir-create-ok--todo"
}

OnEvent('query',...)

{
    "type": "@fir:query:ok::todos",
    "detail": {
        "diff": {
            "0": {
                "d": [
                    [
                        "todo 1"
                    ],
                    [
                        "todo 2"
                    ]
                ]
            }
        }
    },
    "target": "fir-query-ok--todos"
}