Props

By default, each route in Atlet is provided with special Props object, which not only contains useful information about the request, but also gives the control to tweak the final result of the endpoint.

Here is the overall type definition of the Props object:

type Context = Record<string, unknown>  

export type Props<T extends Context = Context> = {
  request: Request
  params: Record<string string>
  query: URLSearchParams
  ctx: T
  headers: Headers
  children: Array<Node<unknown>>
  url: URL
  page: {
    title: string
    lang: string
    head: Array<Node<unknown>>
  }
}

Request

Request object is a Deno's builtin object, which contains the information about the, well, incomming request. To learn more about visit the official Deno Documentation for the Request.

Route params (params)

Params is a primitive object which, depending on a route definition, might contain route parameters.

Query string (query)

Query is an instance of a Deno's builtin object URLSearchParams which contains parsed and potentially existing query parameters.

Example:

/**@jsx h */
/**@jsxFrag Fragment */
import { serve } from 'https://deno.land/std/http/server.ts'
import { createHandler, Props, h, Fragment } from 'https://deno.land/x/atlet@1.2.0/mod.ts'
import { search } from 'legit-search'

const handler = await createHandler({
  '/': (props: Props) => {
    const searchQuery = props.query.get('search')
    const results = searchQuery ? search(searchQuery) : []

    return (
      <section>
        <form>
          <input type="search" name="search" />
        </form>
        {results.map((item) => (
          <p>{item}</p>
        ))}
      </section>
    )
  }
})

// you can also use Deno.serve which is available in Deno 1.35
serve(handler)

Context

Context object is a primitive object which allows you to pass data from the layout or middleware, to the actual endpoint. Learn more in the Context section.

Headers

Headers object is a Deno's builtin object, which allows you to control the response headers, either by appending them or rewriting them completely.

This is useful when you want to, for example, set a cookie for the client.

/**@jsx h */
/**@jsxFrag Fragment */
import { serve } from 'https://deno.land/std/http/server.ts'
import { createHandler, Props, h, Fragment } from 'https://deno.land/x/atlet@1.2.0/mod.ts'
import { setCookie } from 'https://deno.land/std/http/cookie.ts'

const handler = await createHandler({
  '/': (props: Props) => {
    setCookie(props.headers, {
      name: 'cookie_name',
      value: 'nomnom',
      maxAge: 500,
    })

    return (
      <h1>🍪🍪🍪</h1>
    )
  }
})

// you can also use Deno.serve which is available in Deno 1.35
serve(handler)

To learn more visit the official Deno Documentation for the Headers.

Children

Children array is just an array of possibly incomming children nodes, just like in every framework which supports JSX.

URL

URL object is a Deno's builtin object, which contains information about the currently visited url, such as hostname, pathname, port, href, origin and more. To learn more visit the official Deno Documentation for the URL.

Page

Page object allows you to:

  • Change the language of the website. The default option is en, and is directly injected into the html tag.
  • Change the title of the website.
  • Add meta, link, style, script tags and more, for the given page.

Here are some examples:

/**@jsx h */
/**@jsxFrag Fragment */
import { serve } from 'https://deno.land/std/http/server.ts'
import { createHandler, Props, h, Fragment } from 'https://deno.land/x/atlet@1.2.0/mod.ts'

const handler = await createHandler({
  '/': (props: Props) => {
    props.page.title = 'Yes, this is an about section.'

    return (
      <h1>Is this about section ?</h1>
    )
  },
  '/pink-text': (props: Props) => {
    props.page.head.push(
      <link rel="stylesheet" href="/pink-text-ftw.css" />,
      <script src="/script-specific-for-this-page.js" />,
    )

    return (
      <h1 class="pink-text">I want to be pink</h1>
    )
  }
})

// you can also use Deno.serve which is available in Deno 1.35
serve(handler)

previous

Routes

next

Context