Readme of a possible new component creation structure for gu

gu_new.md

Situation

We need to create a more simpler form for the way gu works and with 3 distinct goals

• Easy to create single component without overall current design style(Resources and components)
• Allow dynamic creation of component system without dependent resource encapsulation(design time constraints)
• More struct wise and idiomatic go format in code.
• Implement a more robust routing mechanism.

Current Idea

My current idea is to revise the way we work, encapsulate major necessities into a central App object and allow Views which have their own internal Routers, Resources(shell Resources), Components. Views will be fully initialized and ready to render easily without trouble.

Views

Views exists to collate a series of pages. Multiple views are allowed to render to the same page either to the root(which is the body) or to the supplied target which must exists in the part of the DOM. Views are the single source of truth. They do not exists to take over certain tags but define what the markup should be. They can be aligned to render to the same page route by their provided routes and exists to be rendered by a central entity we term the App. Views must provide notifications to views for Mounts, Unmounts and Render actions. A views route will be the master route for all components which desire use of routing. A views components target must exists or will exists within it's Views target.

homeView := gu.View({
  Route: "home/*",
  Title: "Central Inteligence",
  Target: "#log",
  Base: elems.Parse(`
	<view class="home">
		<div>
		</div>
	</view>  
  `),
})

view.Component({
  Tag: "users_component",
  Target: "#users",
  Route: ":id",
  Base: &HelloComponent{},  
})


view.Component({
  Tag: "users_component",
  Route: ":id",
  Base: func(fetch shell.Fetch, cache shell.Cache, router gu.Router){
    return elems.Div(router.Only('1'), elems.Text("Am number 1"))
  },
})

view.Component({
  Tag: "users_component",
  Route: ":id",
  Base: func() *tree.Markup{
    	return elems.Div(
		elems.CSS(`
			${
				width:100%;
				height: 100%;
			}

			$ h1 {
				font-size: {{ .Size }};
				text-align: center;
				margin: 20% 0  0 5%;
			}

			`, nil),
		property.IDAttr("hello"),
		elems.Header1(
			elems.Text("Hello"),
			events.ClickEvent(func(ev trees.EventObject, tree *trees.Markup) {
					js.Global.Call("alert", "I just got clicked, Yaay!!!")
			}, ""),
		),
		elems.Span(elems.Text("Click me")),
	)
  },
})

Apps

Apps should be the new system by which views are organized. Apps must not be monolithic like the current system and must exists to organize a number of views. App have no concern with where items will rendered into but focus on the management, loading and organizing needs of views. They are burdened to load up the need manifest.json files and distribute as necessarily to the views. App must be able to tap into the Render result of a view and appropriate shell that out as a complete page, this will allow server side rendering.

mountainApp := gu.App({
  EnableManifests: false,
  Name: 'mountain_app',
  Manifests: 'assets/manifests.json',
  ListenForFech: true,
})

mountainApp.Manage(homeView)
mountainApp.Manage(aboutView)

mountainApp.Render("*") => *trees.Markup
mountainApp.Render("/home") => *trees.Markup