biti

npm i biti -g

️ Repo ini sudah usang mendukung @rola/static dan proyek ROLA.

Fitur

• pembuatan halaman statis yang mudah
• menonton file cerdas
• CLI yang nyaman
• API Node Mudah

Penggunaan

biti watch pages/ static/

Memulai

biti cukup sederhana. Ini beroperasi pada satu direktori halaman, yang masing -masing mendefinisikan dan mengekspor properti dan metode yang digunakan biti untuk membuat halaman.

Untuk contoh di sini, kami akan menggunakan /pages sebagai direktori halaman kami, tetapi Anda bisa menyebutnya apa pun.

Mengkonfigurasi halaman

Setiap halaman membutuhkan ekspor berikut:

• pathname - string - jalur tempat Anda ingin halaman muncul
• view - Fungsi - Fungsi yang Mengembalikan Komponen Bereaksi

Properti Pathname akan diteruskan ke komponen view .

Halaman sederhana mungkin terlihat seperti ini:

 import React from 'react'

export const pathname = '/about'

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

Data statis

Halaman juga dapat mengekspor objek state , yang juga akan diteruskan ke fungsi view saat rendering.

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

Memuat data

Rute yang memerlukan data atau yang membutuhkan properti dinamis dapat menentukan fungsi config yang mengembalikan konfigurasi halaman yang berisi properti yang sama yang tercantum di atas.

Nilai -nilai ini akan sangat digabungkan dengan ekspor statis apa pun yang disediakan.

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

Menghasilkan halaman dari data yang dimuat

Untuk halaman generatif dan pagination, fungsi config juga dapat mengembalikan array halaman konfigurasi . Masing -masing konfigurasi ini harus menentukan pathname sendiri, sehingga setiap halaman diterjemahkan secara terpisah.

Contoh berikut akan menghasilkan halaman untuk setiap posting yang dikembalikan dari 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 >
    </ >
  )
} 

Konfigurasi

biti mendukung konfigurasi minimal, dan sebaliknya kembali ke default pintar. Untuk menentukan konfigurasi untuk semua tugas rendering, Anda dapat membuat file biti.config.js .

biti mendukung properti berikut pada file konfigurasi:

• env - Object - Properti pada objek ini akan dilampirkan ke process.env , serta didefinisikan secara global dalam kompilasi.
• alias ​​- Objek - Alias ​​Impor Modul

Contoh:

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

Konfigurasi default

Secara default, biti mendefinisikan alias tunggal @ yang menunjuk ke process.cwd() . Anda dapat menggunakannya di seluruh templat Anda seperti ini:

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

Cli

biti hanya memiliki dua perintah: render dan watch .

Keduanya mengikuti pola yang sama:

biti < command > < src > < dest >

Misalnya:

biti render /pages /static

Perintah -perintah ini juga menerima Globs sebagai properti src , memungkinkan Anda untuk menentukan halaman atau direktori individual.

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

Menggunakan biti secara terprogram hampir sama dengan menggunakan CLI, hanya saja Anda harus lulus objek konfigurasi Anda secara manual.

 const biti = require ( 'biti' )

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

const app = biti ( config )

Baik render dan watch memiliki tanda tangan berikut:

 app . render ( src , dest ) 

memberikan

Membuat semua halaman dari src dest .

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

jam tangan

Tonton semua halaman di src dan render ke dest on change change.

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

Acara API

Sebuah instance biti memancarkan beberapa acara yang bermanfaat juga.

memberikan

Setelah merender satu halaman.

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

diterjemahkan

Setelah merender semua halaman. Saat menonton ini dipanggil setelah setiap perubahan telah dikompilasi dan diterjemahkan.

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

kesalahan

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

Lisensi

Lisensi MIT © Eric Bailey