biti

npm i biti -g

️ Este repositorio está desapercibido a favor de @rola/static y el proyecto ROLA.

Características

• Generación de páginas estática fácil
• observación de archivos inteligentes
• CLI conveniente
• API de nodo fácil

Uso

biti watch pages/ static/

Empezando

biti es bastante simple. Funciona en un solo directorio de páginas, que cada una define y exporta propiedades y métodos que biti usa para representar la página.

Para los ejemplos aquí, usaremos /pages como el directorio de nuestras páginas, pero podría llamarlo cualquier cosa.

Configuración de una página

Cada página requiere las siguientes exportaciones:

• pathname - String - la ruta donde desea que aparezca la página
• view - Función - Una función que devuelve un componente React

La propiedad PathName se pasará al componente view .

Una página simple puede verse así:

 import React from 'react'

export const pathname = '/about'

export function view ( { pathname } ) {
  return (
    < >
      < h1 > About Us </ h1 >
      < p > ... </ p >
    </ >
  )
} 

Datos estáticos

Las páginas también pueden exportar un objeto state , que también se pasará a la función view al renderizar.

 import React from 'react'

export const pathname = '/about'

export const state = {
  title : 'About Us' ,
  description : '...'
}

export function view ( { state , pathname } ) {
  return (
    < >
      < h1 > { state . title } </ h1 >
      < p > { state . description } </ p >
    </ >
  )
} 

Carga de datos

Las rutas que requieren datos o aquellas que necesitan propiedades dinámicas pueden definir una función config que devuelve una configuración de página que contenga las mismas propiedades enumeradas anteriormente.

Estos valores se fusionarán profundamente con cualquier exportación estática.

 import React from 'react'
import { getAboutPage } from './lib/api.js'

export const pathname = '/about'

export const state = {
  title : 'About Us' ,
  team : [
    'Eric'
  ]
}

export function config ( ) {
  return getAboutPage ( )
    . then ( res => {
      return {
        state : {
          team : res . team
        }
      }
    } )
}

export function view ( { state , pathname } ) {
  return (
    < >
      < h1 > { state . title } </ h1 >

      < h2 > Team </ h2 >

      { state . team . map ( name => (
        < p key = { name } > { name } </ p >
      ) ) }
    </ >
  )
} 

Generación de páginas a partir de datos cargados

Para páginas generativas y paginación, la función config también puede devolver una matriz de configuraciones de página . Cada una de estas configuraciones debe definir su propio pathname , de modo que cada página se represente por separado.

El siguiente ejemplo generará una página para cada publicación devuelta de getBlogPosts :

 import React from 'react'
import { getBlogPosts } from './lib/api.js'

export function config ( ) {
  return getBlogPosts ( )
    . then ( posts => {
      return posts . map ( post => ( {
        pathname : `/posts/ ${ post . slug } ` ,
        state : {
          title : post . title ,
          content : post . content
        }
      } ) )
    } )
}

export function view ( { state , pathname } ) {
  return (
    < >
      < h1 > { state . title } </ h1 >

      < article >
        { state . content }
      </ article >
    </ >
  )
} 

Configuración

biti admite una configuración mínima, y ​​de lo contrario se vuelve a ser predeterminados inteligentes. Para definir una configuración para todas las tareas de representación, puede crear un archivo biti.config.js .

biti admite las siguientes propiedades en el archivo de configuración:

• env - Objeto - Las propiedades en este objeto se unirán a process.env , así como se definirá globalmente dentro de la compilación.
• alias ​​- Objeto - Alias ​​de importación del módulo

Ejemplo:

 module . exports = {
  env : {
    API_KEY : 'abcdefg'
  } ,
  alias : {
    components : './src/components'
  }
} 

Configuración predeterminada

Por defecto, biti define un solo alias @ que apunta a process.cwd() . Puede usarlo a lo largo de sus plantillas como esta:

 import Component from '@/src/components/Component.js' 

CLI

biti solo tiene dos comandos: render y watch .

Ambos siguen el mismo patrón:

biti < command > < src > < dest >

Por ejemplo:

biti render /pages /static

Estos comandos también aceptan globos como propiedad src , lo que le permite especificar páginas o directorios individuales.

biti render /pages/about-us.js /static
biti render /pages/ * .js /static
biti render /pages/marketing-site/ * .js /static
biti render /pages/ ** / * .js /static

API

El uso de biti programáticamente es prácticamente lo mismo que usar la CLI, solo que necesitará pasar su objeto de configuración manualmente.

 const biti = require ( 'biti' )

const config = {
  env : { ... } ,
  alias : { ... }
}

const app = biti ( config )

Tanto render como watch tienen la siguiente firma:

 app . render ( src , dest ) 

prestar

Rendera todas las páginas de src dest .

 app . render ( '/src' , '/static' ) 

mirar

Observa todas las páginas en src y se reproduce para dest en el cambio de archivos.

 app . watch ( '/src' , '/static' )

Eventos de API

Una instancia biti también emite algunos eventos útiles.

prestar

Después de representar una sola página.

 app . on ( 'render' , page => { } ) 

renderizado

Después de representar todas las páginas. En el reloj se llama esto después de que cada cambio se haya compilado y renderizado.

 app . on ( 'rendered' , pages => { } ) 

error

 app . on ( 'error' , error => { } ) 

Licencia

Licencia del MIT © Eric Bailey