# fab.js
> React static HTML generator
Latest version **0.3.6** (published 2017-03-31) · MIT license · 0 weekly downloads
## Install
```sh
npm install fab.js
pnpm add fab.js
yarn add fab.js
bun add fab.js
```
Provides the command `fab`.
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.3.6 |
| Published | 2017-03-31 |
| First published | 2016-10-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 10 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | estrattonbailey |
| Maintainers | estrattonbailey |
## Links
- npm: https://www.npmjs.com/package/fab.js
- Repository: https://github.com/estrattonbailey/fab.js
- Issues: https://github.com/estrattonbailey/fab.js/issues
- npm.io page: https://npm.io/package/fab.js
## Dependencies (10)
- [react](https://npm.io/package/react.md) ^15.0.1
- [colors](https://npm.io/package/colors.md) ^1.1.2
- [mkdirp](https://npm.io/package/mkdirp.md) ^0.5.1
- [chokidar](https://npm.io/package/chokidar.md) ^1.6.1
- [fs-extra](https://npm.io/package/fs-extra.md) ^2.0.0
- [commander](https://npm.io/package/commander.md) ^2.9.0
- [react-dom](https://npm.io/package/react-dom.md) ^15.0.1
- [array-unique](https://npm.io/package/array-unique.md) ^0.3.2
- [detective-es6](https://npm.io/package/detective-es6.md) ^1.1.6
- [babel-register](https://npm.io/package/babel-register.md) ^6.7.2
## Recent versions
- 0.3.6 (latest) — 2017-03-31
- 1.0.0-3 (next) — 2019-02-12
- 1.0.0-2 — 2019-02-12
- 1.0.0-1 — 2019-02-11
- 1.0.0-0 — 2019-02-11
- 0.3.5 — 2017-02-11
- 0.3.4 — 2017-02-11
- 0.3.3 — 2017-02-11
- 0.3.2 — 2017-02-11
- 0.3.1 — 2017-02-11
- 0.3.0 — 2017-02-11
- 0.2.6 — 2017-02-07
- 0.2.5 — 2017-02-07
- 0.2.4 — 2017-02-07
- 0.2.3 — 2017-02-07
- … 11 more at https://npm.io/package/fab.js/versions
## README
```bash
npm i biti -g
```
> ⚠️ this repo is deprecated in favor of [@rola/static](https://github.com/estrattonbailey/rola/tree/master/packages/static) and the [rola](https://github.com/estrattonbailey/rola) project.
## Features
- easy static page generation
- intelligent file watching
- convenient CLI
- easy Node API
## Usage
```bash
biti watch pages/ static/
```
## Getting started
`biti` is pretty simple. It operates on a single directory of pages, which each
define and export properties and methods that `biti` uses to render the page.
For the examples here, we'll use `/pages` as our pages directory, but you could
call it anything.
#### Configuring a page
Each page requires the following exports:
- `pathname` - string - the path where you'd like the page to appear
- `view` - function - a function that returns a React component
The pathname property will be passed to the `view` component.
An simple page might look like this:
```javascript
import React from 'react'
export const pathname = '/about'
export function view ({ pathname }) {
return (
<>
About Us
...
)
}
```
#### Static data
Pages can also export a `state` object, which will also be passed to the `view`
function when rendering.
```javascript
import React from 'react'
export const pathname = '/about'
export const state = {
title: 'About Us',
description: '...'
}
export function view ({ state, pathname }) {
return (
<>
{state.title}
{state.description}
)
}
```
#### Loading data
Routes that require data or those that need dynamic properties can define a
`config` function that *returns* a page config containing the same properties
listed above.
These values will be *deeply merged* with whatever static exports were provided.
```javascript
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 (
<>
{state.title}
Team
{state.team.map(name => (
{name}
))}
)
}
```
#### Generating pages from loaded data
For generative pages and pagination, the `config` function *can also return an
array of page configs*. Each of these configs should define its own `pathname`,
so that each page is rendered separately.
The following example will generate a page for each post returned from
`getBlogPosts`:
```javascript
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 (
<>
{state.title}
{state.content}
)
}
```
## Configuration
`biti` supports minimal configuration, and otherwise falls back to smart
defaults. To define a config for all rendering tasks, you can create a
`biti.config.js` file.
`biti` supports the following properties on the config file:
- `env` - object - properties on this object will be attached to `process.env`,
as well as defined *globally* within the compilation.
- `alias` - object - module import aliases
Example:
```javascript
module.exports = {
env: {
API_KEY: 'abcdefg'
},
alias: {
components: './src/components'
}
}
```
#### Default config
By default, `biti` defines a single alias `@` that points to `process.cwd()`.
You can use it throughout your templates like this:
```javascript
import Component from '@/src/components/Component.js'
```
## CLI
`biti` only has two commands: `render` and `watch`.
Both follow the same pattern:
```bash
biti
```
For example:
```bash
biti render /pages /static
```
These commands also accept globs as the `src` property, allowing you to specify
individual pages or directories.
```bash
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
Using `biti` programmatically is virtually the same as using the CLI, only
you'll need to pass your configuration object manually.
```javascript
const biti = require('biti')
const config = {
env: { ... },
alias: { ... }
}
const app = biti(config)
```
Both `render` and `watch` have the following signature:
```javascript
app.render(src, dest)
```
#### render
Renders all pages from `src` `dest`.
```javascript
app.render('/src', '/static')
```
#### watch
Watches all pages in `src` and renders to `dest` on file change.
```javascript
app.watch('/src', '/static')
```
### API Events
A `biti` instance emits a few helpful events as well.
#### render
After rendering a single page.
```javascript
app.on('render', page => {})
```
#### rendered
After rendering all pages. On watch this is called after every change has been
compiled and rendered.
```javascript
app.on('rendered', pages => {})
```
#### error
```javascript
app.on('error', error => {})
```
## License
MIT License © [Eric Bailey](https://estrattonbailey.com)
---
_Source: https://npm.io/package/fab.js · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._