018: Built-in components

A minimal page demonstrating Piko's built-in component library. The piko-counter and piko-card components ship with the framework. The components.Piko() helper returns their definitions (tag names and module-relative .pkc source paths within the piko.sh/piko/components module), ready to spread into WithComponents.

What this demonstrates

Calling components.Piko() returns the built-in component definitions as a slice, ready to spread into WithComponents. The components ship as part of the piko.sh/piko/components Go module; their .pkc source is resolved from that module at build time and compiled into the generated output. piko.WithComponents() registers component sets at startup. The piko-counter element is an interactive counter custom element. The piko-card element exposes named slots for header, the default slot, and footer. Named slots such as slot="header" and slot="footer" project content into the component's layout.

Project structure

src/
  cmd/main/
    main.go                           Registers built-in components via components.Piko()
  pages/
    index.pk                          Page using piko-counter and piko-card

How it works

The entry point loads the built-in component set:

ssr := piko.New(
    piko.WithComponents(components.Piko()...),
)

The page uses the components directly in the template:

<piko-counter></piko-counter>

<piko-card>
    <span slot="header">Hello from a built-in card</span>
    <p>Card content goes here.</p>
    <span slot="footer">Footer text</span>
</piko-card>

How to run this example

In the root directory of the Piko repository:

cd examples/scenarios/018_builtin_components/src/
go mod tidy
air

See also

• Built-in Piko components reference.