Build Environment🔗

Access to build environment can help web components supercharge developer experience. For example, access to git history of HTML files allows web components to automatically deduce the author or publish date of a page. pree provides such access to web components during pre-rendering, through APIs accessible at /@env/ path:

const res = await fetch('/@env/git/commits/first/my-page.html')
const commit = await res.json()

const author = commit.author_name
const published = new Date(commit.date)
📑

For example, this custom component adds the GitHub link in the footer of this page:

import { define, onFirstRender } from 'https://esm.sh/minicomp'
import { html, ref } from 'https://esm.sh/rehtm'

define('gh-link', () => {
  const anchor = ref()

  const load = async () => {
    const res = await fetch('/@env/git/remote/info')
    const info = await res.json()

    anchor.current.href = `https://${info.host}/${info.full_name}`
  }

  onFirstRender(() => load())

  return html`
    <link rel="stylesheet" href="https://unpkg.com/nokss/dist/bundles/md.css">
    <a ref="${anchor}" target="_blank"><slot>GitHub</slot></a>
  `
})
📑

Provided APIs🔗

Build-env APIs are only available during pre-rendering, i.e. during execution of pree build or pree view commands. They should not be invoked in the final website: either load components and scripts using them as build-only (see this), or check for their availability via window.BUILD_ENV_API variable:

if (window.BUILD_ENV_API) {
  // use the APIs
}
📑