biti

npm i biti -g

️ Este repositório está depreciado em favor de @rola/estático e o projeto ROLA.

Características

• Geração de página estática fácil
• observação de arquivos inteligente
• CLI conveniente
• API de nó fácil

Uso

biti watch pages/ static/

Começando

biti é bem simples. Ele opera em um único diretório de páginas, que cada um define e exporta propriedades e métodos que biti usa para renderizar a página.

Para os exemplos aqui, usaremos /pages como diretório de páginas, mas você pode chamá -lo de qualquer coisa.

Configurando uma página

Cada página requer as seguintes exportações:

• pathname - String - O caminho onde você gostaria que a página apareça
• view - Função - uma função que retorna um componente React

A propriedade PathName será passada para o componente view .

Uma página simples pode ficar assim:

 import React from 'react'

export const pathname = '/about'

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

Dados estáticos

As páginas também podem exportar um objeto state , que também será passado para a função view ao 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 >
    </ >
  )
} 

Dados de carregamento

Rotas que exigem dados ou aquelas que precisam de propriedades dinâmicas podem definir uma função config que retorna uma configuração de página contendo as mesmas propriedades listadas acima.

Esses valores serão profundamente mesclados com as exportações estáticas que foram fornecidas.

 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 >
      ) ) }
    </ >
  )
} 

Gerando páginas a partir de dados carregados

Para páginas generativas e paginação, a função config também pode retornar uma matriz de configurações de página . Cada uma dessas configurações deve definir seu próprio pathname , para que cada página seja renderizada separadamente.

O exemplo a seguir gerará uma página para cada postagem retornada dos 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 >
    </ >
  )
} 

Configuração

biti suporta configuração mínima e volta aos padrões inteligentes. Para definir uma configuração para todas as tarefas de renderização, você pode criar um arquivo biti.config.js .

biti suporta as seguintes propriedades no arquivo de configuração:

• env - Object - Propriedades nesse objeto serão anexadas ao process.env , bem como definidas globalmente dentro da compilação.
• alias ​​- objeto - aliases de importação do módulo

Exemplo:

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

Config padrão

Por padrão, biti define um único alias @ que aponta para process.cwd() . Você pode usá -lo em seus modelos como este:

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

CLI

biti tem apenas dois comandos: render e watch .

Ambos seguem o mesmo padrão:

biti < command > < src > < dest >

Por exemplo:

biti render /pages /static

Esses comandos também aceitam globs como a propriedade src , permitindo especificar páginas ou diretórios individuais.

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

Usando biti programaticamente é praticamente o mesmo que usar a CLI, apenas você precisará passar seu objeto de configuração manualmente.

 const biti = require ( 'biti' )

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

const app = biti ( config )

Ambos render e watch têm a seguinte assinatura:

 app . render ( src , dest ) 

renderizar

Renderiza todas as páginas do src dest .

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

assistir

Observa todas as páginas no src e renderiza o dest a alteração do arquivo.

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

Eventos da API

Uma instância biti também emite alguns eventos úteis.

renderizar

Depois de renderizar uma única página.

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

renderizado

Depois de renderizar todas as páginas. Na observação, isso é chamado depois que todas as mudanças foram compiladas e renderizadas.

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

erro

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

Licença

MIT Licença © Eric Bailey