complate Adapter for Fractal


Note: Because of the security vulnerabilities in the [official fractal branch],
complate-fractal now uses this fork.

Installation

Add complate-fractal to your Fractal-based styleguide project:

npm install complate-fractal

or

yarn add complate-fractal

Configuring Fractal

In your project's fractal.config.js, you need to register complate as templating engine:

``javascript
let fractal = module.exports = require('fractal-fork').fractal.create()
let complate = require('complate-fractal')

…

fractal.components.engine(complate({
rootDir: __dirname,
generateURI: function(uri) {
// NB: invocation context is { assetPath }, providing access to
// Fractal-specific URI generation
return this.assetPath(uri)
}
}));
`

rootDir specifies which directory component samples' import paths are relative to:

`jsx
import MyWidget from './components/my-widget'


`

generateURI implements an application-specific URI helper, provided to
components via the application context (via envPath, defaults to env.js):

`javascript
// application-specific context; this will be populated (i.e. mutated) at
// runtime by the respective application
exports.context = {
uri: function toBeDefined() {
throw new Error("application context is not defined");
}
};
`

`jsx
import { context } from '../env'

export default function MyWidget (params, ...children) {
let uri = context.uri('/path/to/resource')
…
}
`

In addition, you need to provide a PreviewLayout component (via previewPath,
which defaults to _preview.jsx within the components directory):

`jsx
export default function PreviewLayout({ context }, ...children) {
return
…

…
{children}
…

;
}
`

Usage with Fractal

$3

You need to reference context values via the context object:

`jsx
{context.my_label}
`

$3

Fractal (with Handlebars) brings support for including existing components
within others:

`handlebars



`

complate has its own way for doing that by using HTML expansion without any
special markers or syntax you have to remember:

`jsx



`

Therefore we don’t support Fractal's @-prefixed view handlers for now.

Examples

- innoQ Styleguide and Component Library

Development

$3

1. Increment version number in package.json
2. Commit as "vX.X.X"
3. git tag -am "vX.X.X" "vX.X.X"
4. git push --follow-tags
4. npm publish`

[official fractal branch]: https://github.com/frctl/fractal