https://github.com/rsify/fig-compiler
fig.js component compiler
https://github.com/rsify/fig-compiler
Last synced: about 1 year ago
JSON representation
fig.js component compiler
- Host: GitHub
- URL: https://github.com/rsify/fig-compiler
- Owner: rsify
- License: other
- Created: 2017-06-19T10:19:46.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-08-19T08:28:30.000Z (over 8 years ago)
- Last Synced: 2025-01-09T08:28:57.681Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 84 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
# fig-compiler 
> [fig.js](http://github.com/nikersify/fig) component compiler
[](https://www.npmjs.com/package/fig-compiler)
[](https://travis-ci.org/nikersify/fig-compiler)
# usage
## api
### `obj = compiler(input[, opts])`
Where `input` is a string a of fig component. Available options for the `opts` object are as follows:
- `opts.filePath` - required if you want to use pug's relative includes/extends inside of the component
- `opts.defaultName` - name set for the component, if the `label` is missing on the component
- `opts.debug` - if set to `true` passes `debug` and `compileDebug` to [pug](https://pugjs.org/api/reference.html), tldr: if `false` output is smaller, at the cost of some pretty error messages
Returns an `obj` which has a few properties:
- `obj.template` - a function compiled by pug that takes a locals object and spits out HTML when asked to
- `obj.style` - just a string containing the contents of the style tag inside the component
- `obj.script` - string of code which just so happens to be ran through `babel` with the `es-2015` preset for your dearest convenience.
- `obj.name` - name of the component, taken from the `label` tag, or `opts.defaultName` if that doesn't exist. Otherwise `undefined`
## connect middleware
For development pleasure, this module includes a simple connect middleware function, compatible with [express](https://expressjs.com/). Used akin to `express.static` middleware, point it to the directory you store your fig components in, the middleware should compile the component on the fly (without caching) and serve it to the client.
:warning: Not meant to be used in production.
### example
```js
// server.js
const express = require('express')
const fig = require('fig-compiler/connect')
const app = express()
app.use(fig('components'))
app.listen(3000)
// client.js
const app = fig()
app.use('main-view.fig') // pulls from localhost:3000/main-view.fig
app._components.get('main-view') // should be the compiled component
```
# install
`npm install fig-compiler --save`
# license
MIT
# related
- [fig.js](https://github.com/nikersify/fig) - experimental front-end ui framework
- [figify](https://github.com/nikersify/figify) - fig.js browserify transform
- [fig-web](https://github.com/nikersify/fig-web) - fig.js website