biti

npm i biti -g

️ Это репо устанавливается в пользу @rola/static и проекта ROLA.

Функции

• Простая статическая страница.
• Интеллектуальное просмотр файлов
• Удобный CLI
• легкий узел API

Использование

biti watch pages/ static/

Начиная

biti довольно прост. Он работает на одном каталоге страниц, которые определяют и экспортируют свойства и методы, которые biti использует для визуализации страницы.

Для примеров здесь мы будем использовать /pages в качестве нашего каталога страниц, но вы могли бы назвать это всем.

Настройка страницы

Каждая страница требует следующего экспорта:

• pathname - String - Путь, по которому вы хотели бы появиться на странице
• view - функция - функция, которая возвращает компонент React

Свойство пути будет передано в компонент view .

Простая страница может выглядеть так:

 import React from 'react'

export const pathname = '/about'

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

Статические данные

Страницы также могут экспортировать объект state , который также будет передаваться в функцию view при рендеринге.

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

Загрузка данных

Маршруты, которые требуют данных, или тех, которые требуют динамических свойств, могут определить функцию config , которая возвращает конфигурацию страницы, содержащую те же свойства, перечисленные выше.

Эти значения будут глубоко объединены с любым статическим экспортом.

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

Создание страниц из загруженных данных

Для генеративных страниц и страниц страниц функция config также может вернуть массив конфигураций страниц . Каждая из этих конфигураций должна определить его собственное pathname , так что каждая страница отображается отдельно.

Следующий пример будет генерировать страницу для каждого поста, возвращаемого из 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 >
    </ >
  )
} 

Конфигурация

biti поддерживает минимальную конфигурацию, а в противном случае возвращается к умным дефолтам. Чтобы определить конфигурацию для всех задач рендеринга, вы можете создать файл biti.config.js .

biti поддерживает следующие свойства в файле конфигурации:

• env - объект - свойства на этом объекте будут прикреплены к process.env , а также определяются глобально в компиляции.
• alias - объект - псевдонимы импорта модуля

Пример:

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

Конфигурация по умолчанию

По умолчанию biti определяет один псевдоним @ , который указывает на process.cwd() . Вы можете использовать его на всех шаблонах, как это:

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

Кли

У biti есть только две команды: render и watch .

Оба следуют одной и той же шаблоне:

biti < command > < src > < dest >

Например:

biti render /pages /static

Эти команды также принимают глобусы в качестве свойства src , что позволяет вам указать отдельные страницы или каталоги.

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

Использование biti -программно практически так же, как и использование CLI, только вам нужно передать свой объект конфигурации вручную.

 const biti = require ( 'biti' )

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

const app = biti ( config )

Оба render и watch имеют следующую подпись:

 app . render ( src , dest ) 

оказывать

Образует все страницы от src dest .

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

смотреть

Смотреть все страницы в src и приводят dest изменению в файле.

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

События API

Пример biti также излучает несколько полезных событий.

оказывать

После рендеринга одной страницы.

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

визуализирован

После рендеринга всех страниц. На просмотре это называется после того, как каждое изменение было составлено и отображается.

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

ошибка

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

Лицензия

Лицензия MIT © Эрик Бейли