biti

npm i biti -g

️ Ce repo est obsolète en faveur de @ Rola / Static et du projet Rola.

Caractéristiques

• Génération de pages statique facile
• Attention aux fichiers intelligents
• CLI pratique
• API de nœud facile

Usage

biti watch pages/ static/

Commencer

biti est assez simple. Il fonctionne sur un seul répertoire de pages, qui définissent et exportent chacun des propriétés et des méthodes que biti utilise pour rendre la page.

Pour les exemples ici, nous utiliserons /pages comme répertoire de pages, mais vous pouvez l'appeler n'importe quoi.

Configuration d'une page

Chaque page nécessite les exportations suivantes:

• pathname - String - le chemin où vous aimeriez que la page apparaisse
• view - Fonction - Une fonction qui renvoie un composant React

La propriété PathName sera transmise au composant view .

Une page simple peut ressembler à ceci:

 import React from 'react'

export const pathname = '/about'

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

Données statiques

Les pages peuvent également exporter un objet state , qui sera également transmis à la fonction view lors du rendu.

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

Chargement des données

Les voies qui nécessitent des données ou celles qui ont besoin de propriétés dynamiques peuvent définir une fonction config qui renvoie une configuration de page contenant les mêmes propriétés énumérées ci-dessus.

Ces valeurs seront profondément fusionnées avec toutes les exportations statiques fournies.

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

Générer des pages à partir de données chargées

Pour les pages génératives et la pagination, la fonction config peut également renvoyer un tableau de configurations de page . Chacune de ces configurations doit définir son propre pathname , de sorte que chaque page est rendue séparément.

L'exemple suivant générera une page pour chaque message renvoyé à partir 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 >
    </ >
  )
} 

Configuration

biti prend en charge la configuration minimale et se replie autrement aux défauts de défaut intelligents. Pour définir une configuration pour toutes les tâches de rendu, vous pouvez créer un fichier biti.config.js .

biti prend en charge les propriétés suivantes sur le fichier de configuration:

• env - Object - Les propriétés de cet objet seront attachées à process.env , ainsi que définies globalement dans la compilation.
• alias - objet - alias d'importation du module

Exemple:

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

Configuration par défaut

Par défaut, biti définit un seul alias @ qui pointe vers process.cwd() . Vous pouvez l'utiliser dans vos modèles comme ceci:

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

CLI

biti n'a que deux commandes: render et watch .

Les deux suivent le même modèle:

biti < command > < src > < dest >

Par exemple:

biti render /pages /static

Ces commandes acceptent également les globs comme la propriété src , vous permettant de spécifier des pages ou des répertoires individuels.

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

L'utilisation biti programmatiquement est pratiquement la même que l'utilisation de la CLI, seulement vous devrez passer manuellement votre objet de configuration.

 const biti = require ( 'biti' )

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

const app = biti ( config )

render et watch ont la signature suivante:

 app . render ( src , dest ) 

rendre

Rend toutes les pages de src dest .

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

montre

Regarde toutes les pages de src et rend le dest sur le changement de fichier.

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

Événements API

Une instance biti émet également quelques événements utiles.

rendre

Après avoir rendu une seule page.

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

rendu

Après avoir rendu toutes les pages. Sur Watch, cela s'appelle une fois que chaque changement a été compilé et rendu.

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

erreur

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

Licence

Licence MIT © Eric Bailey