Bootstrap for styling

[wraza2k9]

How can we use bootstrap themes for styling the components?

[oderwat]

Like including their stater components (see #712) and then just using them. What is it that holds you back?

Maybe check out https://github.com/mlctrez/goapp-mdc/ for inspiration.

[maxence-charriere]

There is also the subpackage ui in go-app that provide some stuff.

[maxim0r]

I have a problem with bootstrap. The basic components work, but treeview doesn't work. Please help with advice.

package main

import (
	"log"
	"net/http"

	"github.com/maxence-charriere/go-app/v9/pkg/app"
)

type hello struct {
	app.Compo
}

func (h *hello) Render() app.UI {
	return app.Div().Body(
		app.H1().Text("Hello World!"),
		app.Div().ID("tree"),

		app.Script().Src("https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"),
		app.Script().Src("https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"),
		app.Script().Src("https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bstreeview.min.js"),
		app.Raw(`
			<script>
			function getTree() {
				console.log('call getTree')
				var data = [
  					{
    					text: "Node 1",
    					icon: "fa fa-inbox"
					},
  					{
    					text: "Node 2",
    					icon: "fa fa-calendar"
					}
				];
				console.log(data)
				return data;
			  }
			  
			  $('#tree').bstreeview({ data: getTree() });
			</script>
		`),
	)
}

func main() {
	app.Route("/", &hello{})
	app.RunWhenOnBrowser()

	http.Handle("/", &app.Handler{
		Name:        "Hello",
		Description: "An Hello World! example",
		Styles: []string{
			"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css",
			"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css",
			"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bstreeview.min.css",
		},
	})

	if err := http.ListenAndServe(":8000", nil); err != nil {
		log.Fatal(err)
	}
}

[mlctrez]

@maxim0r

~~It is probably this bit of code in go-app that is causing you not to see dom elements added by your bootstrap library.~~

https://github.com/maxence-charriere/go-app/blob/0bbefa64ec4bdafd261cadc1d0c4e1e97f753f8b/pkg/app/app.go#L62

~~This is by design as go-app needs a known state when it adds and removes elements.~~

Edit : Ok I take that back. I can't see anywhere in the code where that method is called.

[oderwat]

Just use app.Script() instead of app.Raw():

func (h *hello) Render() app.UI {
	return app.Div().Body(
		app.H1().Text("Hello World!"),
		app.Div().ID("tree"),

		app.Script().Src("https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"),
		app.Script().Src("https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"),
		app.Script().Src("https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bstreeview.min.js"),
		app.Script().Text(`
			function getTree() {
				console.log('call getTree')
				var data = [
  					{
    					text: "Node 1",
    					icon: "fa fa-inbox"
					},
  					{
    					text: "Node 2",
    					icon: "fa fa-calendar"
					}
				];
				console.log(data)
				return data;
			  }
			  
			  $('#tree').bstreeview({ data: getTree() });
		`),
	)
}

[oderwat]

To explain what happens, app.Raw("<script>window.alert('noBoom');</script>") is basically the same as someNode.innerHTML="<script>window.alert('noBoom');</script>". This is not executed as a security measure.

While app.Script().Text("windows.alert("thaBoom");') creates a script element, sets the content, and then adds the element to the DOM. In the process, the javascript is executed.

[maxim0r]

Thank you so much for your help and clarification!