gorgeous

package module
v0.0.0-...-dc7d671 Latest Latest
Warning

This package is not in the latest version of its module.

 Go to latest Published: Jan 11, 2024 License: MIT Imports: 6 Imported by: 2

README

gorgeous

Gorgeous is a server-side rendering library for Go, inspired by React and Flutter.

It's still very early in development and should be treated as a proof of concept.

Example Site

image

Documentation

Index

Constants

View Source 
const (
	ReferenceCacheServiceName = "referenceCache"
	ReferenceCacheService     = `` /* 980-byte string literal not displayed */

)

Variables

This section is empty.

Functions

func Blend 

func Blend(classes ...CSSClass) string

Create a CSS class from any number of CSS classes. The properties of the CSS classes will be merged into a single CSS class, preferring the properties of the right-most CSS class.

⚠ Note: blend currently only supports classes with a single selector.

Eg: 

gorgeous.Blend(
	gorgeous.Class(".redtext", gorgeous.CSSProps{
		"color": "red",
	}),
	gorgeous.Class(".bluetext", gorgeous.CSSProps{
		"color": "blue",
	}),
)

renders as: 

`.redtext_bluetext {
	color: blue;
}`

func BlendFrom 

func BlendFrom(names ...string)

TODO - add example usage, document

func Media 

func Media(query string, name string, class CSSProps)

Create a CSS class within a media query from a map of CSS properties and adds it to the global css. Eg: 

gorgeous.Media("(max-width: 600px)", "my-class", gorgeous.CSSProps{
	"color": "red",
})

renders as: 

`@media (max-width: 600px) {
	.my-class {
		color: red;
	}
}`

func RawClass 

func RawClass(name string, class CSS)

Create a CSS class from a string and adds it to the global css. Eg: 

gorgeous.RawClass("my-class", `.my-class {
	color: red;
}`)

renders as: 

`.my-class {
	color: red;
}`

func RawMedia 

func RawMedia(query string, class CSS)

Create a CSS class within a media query from a string and adds it to the global css. Eg: 

gorgeous.RawMedia("(max-width: 600px)", `.my-class {
	color: red;
}`)

renders as: 

`@media (max-width: 600px) {
	.my-class {
		color: red;
	}
}`

func Service 

func Service(name string, service JavaScript)

Types

type CE 

type CE = []*HTMLElement

CE stands for Child Elements - it is a slice of HTMLElement pointers It has been shortened to CE to reduce the amount of typing required to create

type CSS 

type CSS string

func (CSS) String 

func (c CSS) String() string

type CSSClass 

type CSSClass struct {
	// The Selector property is used to specify a CSS selector (e.g. "div.my-class").
	// This is useful for specifying complex selectors such as pseudo-classes and
	// pseudo-elements.
	//
	// ⚠ WARNING: The Selector property is not validated, so you must ensure that
	// it is valid CSS.
	Selector string `required:"true"`

	// Whether to include the class in the rendered CSS, even if it is not used in
	// the document. Defaults to false.
	Include bool `default:"false"`

	// The CSS properties of the CSS class.
	Props CSSProps `required:"true"`

	// The raw CSS of the CSS class.
	Raw CSS
}

func Class 

func Class(c *CSSClass) *CSSClass

Create a CSS class from a map of CSS properties and adds it to the global css. Eg: 

gorgeous.Class(gorgeous.CSSClass{
	Selector: ".my-class",
	Props: gorgeous.CSSProps{
		"color": "red",
	},
})

renders as: 

`.my-class {
	color: red;
}`

func (*CSSClass) Blend 

func (a *CSSClass) Blend(b CSSClass) CSSClass

Create a new CSS class from two CSS classes, where the properties of the second class overwrite the properties of the first class.

type CSSProps 

type CSSProps = map[string]string

CSSProps is a map of CSS property names to CSS property values

type EB 

type EB struct {
	// html element attributes
	Id string
	// The attribute which specified the onclick event handler for the element.
	// This is a string containing JavaScript code which is executed when the
	// element is clicked.
	//
	// If both OnClick and Props["onclick"] are specified, then the two values
	// will be concatenated with a semicolon. Props["onclick"] will be executed
	// first.
	OnClick   JavaScript
	Style     CSSProps
	ClassList []string

	// html element text content
	Text string

	// html element properties (e.g. type="text" for input elements)
	Props Props

	// Client-side code specific to the element, run when the document is loaded
	// in the browser.
	//
	// Eg:
	//
	//	Id: "element-example",
	//	Script: `thisElement.value = 'Hello, world!'`
	//
	// renders as:
	//
	//	<script id="script-element-example">
	//		((thisElement) => {
	//			thisElement.value = 'Hello, world!';
	//		})(document.getElementById('element-example'));
	//		document.getElementById('script-element-example').remove();
	//	</script>
	Script JavaScript

	// html element children
	Children CE

	Deferred bool
}

EB stands for Element Base - it contains the common properties of all elements It has been shortened to EB to reduce the amount of typing required to create

type HTML 

type HTML string

func RenderPage 

func RenderPage(document *HTMLElement) *HTML

Renders as a combined document, embedding css and js into the html document head. Note: this assumes that the document contains a head and body at the first level of children, eg: using gorgeous.Document()

func (HTML) String 

func (h HTML) String() string

type HTMLElement 

type HTMLElement struct {
	EB

	// html element text content, if Text is present in the EB struct then
	// it will override this value.
	Text string

	// The HTML tag name of the element eg: div
	// Primarily used for disambiguating between different elements
	Tag string
	// The opening tag of the element including the angle brace eg: <div
	OpenTag string
	// The closing tag of the element including the angle brace eg: </div>
	CloseTag string

	// Optionally render the element in a deferred manner, this is useful for
	// rendering elements that are not visible on the page when it is first loaded
	// eg: elements that are only visible when the user scrolls down the page
	// or elements that are only visible when the user clicks a button.
	Deferred bool
}

HTMLElement is the base type for all HTML elements

func A 

func A(e EB) *HTMLElement

Creates a new A element. MDN Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

func Blockquote 

func Blockquote(e EB) *HTMLElement

Creates a new Blockquote element. MDN Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote

func Body 

func Body(e EB) *HTMLElement

Creates a new Body element. ⚠ This element should only be used once per document. MDN Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body

func Br 

func Br(e EB) *HTMLElement

Creates a new Br element. MDN Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br

func Button 

func Button(e EB) *HTMLElement

Creates a new Button element. MDN Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

func CustomElement 

func CustomElement(tag string, hasClosingTag bool, e EB) *HTMLElement

The custom element is a special case, standing in as a placeholder for any element not already defined in the framework.

⚠ It is recommended to use this element sparingly, as it is not type safe, and does not provide any of the benefits of the framework.

Eg: 

CustomElement("my-custom-element", true, &EB{
    Children: CE{
      Text("Hello, world!"),
    },
})

renders as: 

`<my-custom-element>Hello, world!</my-custom-element>`

func Details 

func Details(e EB) *HTMLElement

Creates a new Details element. MDN Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

func Div 

func Div(e EB) *HTMLElement

Creates a new Div element. MDN Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div

func Document 

func Document(
	head *HTMLElement,
	body *HTMLElement,
) *HTMLElement

Document returns a new HTML document structure. eg: 

<!DOCTYPE html>
<html>
  <head>
    <!-- head -->
  </head>
  <body>
    <!-- body -->
  </body>
</html>

func Em 

func Em(e EB) *HTMLElement

Creates a new Em element. MDN Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em

func Empty 

func Empty() *HTMLElement

The empty element is a special case, standing in as a placeholder for an empty element. It is not rendered as a HTML element, but rather as an empty string.

Eg: 

Div(&EB{
    Children: CE{
      Empty(),
    },
})

renders as: 

`<div></div>`

func Fieldset 

func Fieldset(e EB) *HTMLElement

Creates a new Fieldset element. MDN Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset

func Form 

func Form(e EB) *HTMLElement

Creates a new Form element. MDN Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form

func H1 

func H1(e EB) *HTMLElement

Creates a new H1 element. MDN Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements

func H2 

func H2(e EB) *HTMLElement

Creates a new H2 element. MDN Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements

func H3 

func H3(e EB) *HTMLElement

Creates a new H3 element. MDN Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements

func H4 

func H4(e EB) *HTMLElement

Creates a new H4 element. MDN Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements

func H5 

func H5(e EB) *HTMLElement

Creates a new H5 element. MDN Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements 

func Head(e EB) *HTMLElement

Creates a new Head element. ⚠ This element should only be used once per document. MDN Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head

func Html 

func Html(e EB) *HTMLElement

Creates a new HTML document. ⚠ This element should only be used once per document. MDN Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html

func I 

func I(e EB) *HTMLElement

Creates a new I element. MDN Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i

func Img 

func Img(e EB) *HTMLElement

Creates a new Img element. MDN Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

func Input 

func Input(e EB) *HTMLElement

Creates a new Input element. MDN Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

func Label 

func Label(e EB) *HTMLElement

Creates a new Label element. MDN Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

func Li 

func Li(e EB) *HTMLElement

Creates a new Li element. MDN Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li 

func Link(e EB) *HTMLElement

Creates a new Link element. MDN Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link

func Meta 

func Meta(e EB) *HTMLElement

Creates a new Meta element. MDN Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta

func Ol 

func Ol(e EB) *HTMLElement

Creates a new Ol element. MDN Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol

func Option 

func Option(e EB) *HTMLElement

Creates a new Option element. MDN Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option

func P 

func P(e EB) *HTMLElement

Creates a new Paragraph element. MDN Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p

func Pre 

func Pre(e EB) *HTMLElement

Creates a new Pre element. MDN Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre

func RawText 

func RawText(content string) *HTMLElement

The raw text element is a special case, standing in as a placeholder for text content. It is not rendered as a HTML element, but rather as unescaped text content of the parent element.

Eg: 

Div(&EB{
    Children: CE{
      RawText("<b>Hello, world!</b>"),
    },
})

renders as: 

`<div><b>Hello, world!</b></div>`

func Script 

func Script(e EB) *HTMLElement

Creates a new Script element. MDN Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

func Select 

func Select(e EB) *HTMLElement

Creates a new Select element. MDN Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select

func Span 

func Span(e EB) *HTMLElement

Creates a new Span element. MDN Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span

func Strong 

func Strong(e EB) *HTMLElement

Creates a new Strong element. MDN Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong

func Style 

func Style(e EB) *HTMLElement

Creates a new Style element. MDN Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style

func Summary 

func Summary(e EB) *HTMLElement

Creates a new Summary element. MDN Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary

func Table 

func Table(e EB) *HTMLElement

Creates a new Table element. MDN Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table

func Tbody 

func Tbody(e EB) *HTMLElement

Creates a new Tbody element. MDN Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody

func Td 

func Td(e EB) *HTMLElement

Creates a new Td element. MDN Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td

func Text 

func Text(content string) *HTMLElement

The text element is a special case, standing in as a placeholder for text content. It is not rendered as a HTML element, but rather as html escaped text content of the parent element. Eg: 

Div(&EB{
    Children: CE{
      Text("Hello, world!"),
    },
})

renders as: 

`<div>Hello, world!</div>`

func Textarea 

func Textarea(e EB) *HTMLElement

Creates a new Textarea element. MDN Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea

func Tfoot 

func Tfoot(e EB) *HTMLElement

Creates a new Tfoot element. MDN Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot

func Th 

func Th(e EB) *HTMLElement

Creates a new Th element. MDN Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th

func Thead 

func Thead(e EB) *HTMLElement

Creates a new Thead element. MDN Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead

func Title 

func Title(e EB) *HTMLElement

Creates a new Title element. MDN Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title

func Tr 

func Tr(e EB) *HTMLElement

Creates a new Tr element. MDN Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr

func Ul 

func Ul(e EB) *HTMLElement

Creates a new Ul element. MDN Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul

type JavaScript 

type JavaScript string

func (JavaScript) String 

func (j JavaScript) String() string

type Props 

type Props map[string]string

type Reference 

type Reference struct {
	// contains filtered or unexported fields
}

func CreateRef 

func CreateRef(name string) *Reference

CreateRef creates a reference to an element in the DOM. This is useful for creating interactive components, such as modals, forms, and popovers.

func (*Reference) Element 

func (r *Reference) Element() *HTMLElement

Element returns the element that the reference points to. This is useful for passing the element to a function in Go.

Note: this will return nil if the element has not been set. If you are using the ref within the same component, you should use the element directly, or consider moving the ref to the higher level component.

eg: 

		func MyHigherComponent() *g.HTMLElement {
				ref := g.CreateRef("myElement")
		   // ...
		   return g.Div(g.EB{
	       Children: g.CE{
 	       MyComponent(ref)
				 },
		     Script: fmt.Sprintf(`
		       const el = %s;
		       // ...
		     `, ref.Element()),
	    }
		}

		func MyComponent(ref *g.Reference) *g.HTMLElement {
		   // ...
		   return g.Div(g.EB{
		     Children: g.CE{
		       ref.Get(g.Input(g.EB{})),
		     }
		   })
		}

func (*Reference) Get 

func (r *Reference) Get(el *HTMLElement) *HTMLElement

Get stores a reference to the element in the DOM, for later use, returning it so that it can be used in the component.

// Create a reference to a form field for use in a script. 

func LoginForm() *g.HTMLElement {
	unRef := g.CreateRef("username")
	pwRef := g.CreateRef("password")

	return g.Form(g.EB{
		Children: g.CE{
			unRef.Get(g.Input(g.EB{
				Props: g.Props{
					"type":        "email",
					"placeholder": "Username",
				},
			})),
			pwRef.Get(g.Input(g.EB{
				Props: g.Props{
					"type":        "password",
					"placeholder": "Password",
				},
			})),
		},
		Script: fmt.Sprintf(`
			const un = %s;
			const pw = %s;

			fetch("/login", {
				method: "POST",
				body: JSON.stringify({
					username: un.value,
					password: pw.value,
				}),
			}).then(/* ... */)
		`, unRef.Element(), pwRef.Element()),
	})
}

func (*Reference) Javascript 

func (r *Reference) Javascript() JavaScript

Javascript returns a javascript expression that can be used to reference the element. This is cached on the first lookup to avoid unnecessary DOM lookups.

Note: this will return undefined if the element is not in the DOM. It is recommended to use nullish chaining to avoid errors.

eg: 

const el = referenceCacheGet("myElementId")?.value;
if (el === undefined) {
	// ...

type RenderedHTML 

type RenderedHTML struct {
	Document HTML
	Script   JavaScript
	Services JavaScript
	Style    CSS
}

RenderedHTML is the result of calling the Render function, it contains the rendered HTML, CSS and JavaScript. These should be written to files or served to the client via the appropriate api endpoints.

func RenderDocument deprecated 

func RenderDocument(document *HTMLElement) *RenderedHTML

Deprecated: use RenderStatic instead

func RenderElement 

func RenderElement(element *HTMLElement, parentId string) *RenderedHTML

func RenderStatic 

func RenderStatic(document *HTMLElement) *RenderedHTML

Renders as three separate file contents for html, css, and js

Source Files

View all Source files

Directories

Path Synopsis
example
cmd
internal/components
internal/provider
internal/services
internal/types

Jump to

Keyboard shortcuts

? : This menu
/ : Search site
f or F : Jump to
y or Y : Canonical URL
go.dev uses cookies from Google to deliver and enhance the quality of its services and to analyze traffic. Learn more.