Skip to content

README.md

Latest commit

 

History

History
97 lines (83 loc) · 3.86 KB

README.md

File metadata and controls

97 lines (83 loc) · 3.86 KB

Presto

#UseThePlatform

Presto is a bespoke, minimal UI runtime for web apps that tries to use the platform as much as possible. Presto builds on top of web component technologies such as custom elements, shadow DOM, <slot>, and more to create a reactive runtime with very fast UI updates that is easy to use without any build steps (unless you want build steps, in which it also provides full Vite support, with a meta-framework on the roadmap).

Example

import { createElement, createSignal, createMemo, html, z } from "presto"

// Runtime prop validation with Zod
const galleryProps = z.object({
    sculpture: z.object({
        name: z.string(),
        artist: z.string(),
        description: z.string(),
        url: z.string().url(),
        alt: z.string(),
    }),
})

const Gallery = createElement({
    props: galleryProps,
    setup: ({ props }) => {
        const [showMore, setShowMore] = createSignal(false)
        const color = createMemo(() => showMore() ? "red" : "blue")

        function toggleShowMore() {
            setShowMore(show => !show)
        }

        return () => html`
            <!-- Scoped styles re-render reactively, just like the template -->
            <style>
                button {
                    color: white;
                    background-color: ${color()};
                    font-family: sans-serif;
                }
            </style>
            <section>
                <h2>
                    <i>${props.sculpture.name}</i>
                    by ${props.sculpture.artist}
                </h2>
                <button @click=${toggleShowMore}>
                    ${show({ when: showMore, fallback: html`Show` }, () => html`Hide`)} details
                </button>
                ${show({ when: showMore }, () => html`<p>${props.sculpture.description}</p>`)}
                <img src="${props.sculpture.url}" alt="${props.sculpture.alt}" />
            </section>
        `
    },
})

customElements.define("app-gallery", Gallery)

TODO

UI Framework:

  • Reactive primitives
  • Client-side rendering
  • Event handlers
  • Global context
  • Reactive scoped styles
  • Children (<slot>)
  • Client-side routing
  • Parallel route loaders
  • Lifecycle functions
  • Reactive attributes
  • Reactive properties
  • Scoped context
  • Synchronous context
  • Nested routing
  • Form actions
  • Error boundaries
  • Automatically wrap link handlers in reactive root
  • Hot module reloading
  • VS Code extension
  • Unstyled components
  • Suspense/asyncronous rendering

Meta-Framework: