Publishing Components

You can easily share your components by publishing them through NPM, where they can get used via CDNs such as unpkg or esm.sh. In this page we discuss a few good practices for publishing web components that integrate with pree. Checkout this checklist and these guides some recommendations for publishing web components in general.

SSR Support

👉 If your component is interactive, make sure it supports SSR. This will make your website interactive faster on the client, as the pre-rendered DOM won't be recreated and is just hydrated. Use libraries such as minicomp and rehtm to make your components easily SSR-friendly.

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

define('a-button', () => {
  const span = ref()
  let count = 0
  
  return template`
    <button onclick=${() => span.current.textContent = ++count}>
      Clicked <span ref=${span} role="status">0</span> times
    </button>
  `
})

Using Build Environment

👉 If your component accesses build environment, check for availability and version of the APIs so that your component doesn't cause errors if used in other environments:

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

👉 Base URL for the APIs might change in some environments. Use BUILD_ENV_API.baseURL instead of /@env/:

const res = await fetch(`${BUILD_ENV_API.baseURL}git/remote/info`)

It is recommended to also check the version of pree to ensure the APIs you need are provided. Use BUILD_ENV_API.provider to check that information:

window.BUILD_ENV_API.provider
// pree@0.1.13

import { satisfies } from 'https://esm.sh/semver'

const buildEnvAccess = supportedVersions => {
  if (!window.BUILD_ENV_API) return false

  const [host, version] = window.BUILD_ENV_API.provider.split('@')
  if (host === 'pree' && satisfies(version, supportedVersions)) {
    return true
  } else {
    return false
  }
}

if (buildEnvAccess('^0.1.10')) {
  // use the APIs
}

It is highly recommended to ensure that your components can function properly even if access to build environment is not available. If not, users might get confused about when and where they can use your components.

pree logo