[VPS Frameworks] TypeScript DX

Do typed custom exports/hooks cover all use cases?

Do we forsee shorctomings that we should fix before releasing 0.4?

Custom Exports:

// /pages/_default.page.ts

import type { Config } from 'vilay'

export const config: Config = {
   graphqlEndpoint: 'https://api.star-wars.com/_graphql'
}

Custom Hooks:

// /pages/star-wars.page.ts

import type { GetPageMeta, FilterData } from 'vilay'

type Movies = {
  title: string,
  releaseDate: Date
}

export const getPageMeta: GetPageMeta<Movie> = async movie => {
  const { title } = movie
  return {
    // Determines the `<title>` tag
    title,
    description: `Everything you ever wanted to know about the Star Wars Movie "${title}".`
  }
}

// Filter data to reduce KBs sent to the browser
type MoviesData = Movie & {
  much: string,
  more: string,
  data: string
}
export const filterData: FilterData<MoviesData, Movies> = async function filterData(moviesData) {
  const movies = moviesData.map(m => ({ title: m.title, releaseDate: m.releaseDate }))
  return movies
}

Note that how the user doens’t access pageContext; the framework fully abstracts pageContext away.

[brillout]

With multiple define* functions:

// /pages/hello.page.tsx

import { definePage } from 'vilay'

export default definePage({
  getQueryVariables(routeParams) {
    return { ...routeParams, first: 10 },
  },
  // ...
})

export function Page() {
  return <>Hello</>
}

// /pages/_default.page.ts

import { defineConfig } from 'vilay'

export default defineConfig({
  graphqlEndpoint: 'https://foo.bar/graphql',
  // ...
})

[brillout]

Default exporting released with 0.4.0-beta.16.

I guess we can close this then.

Let me know if you have other concerns about TS DX.