https://github.com/complate/complate-fractal

complate adapter for Fractal
https://github.com/complate/complate-fractal

complate fractal javascript jsx styleguide

Last synced: 8 days ago
JSON representation

complate adapter for Fractal

• Host: GitHub
• URL: https://github.com/complate/complate-fractal
• Owner: complate
• Created: 2017-07-26T11:08:14.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2024-01-11T17:19:55.000Z (10 months ago)
• Last Synced: 2024-10-15T09:30:59.344Z (21 days ago)
• Topics: complate, fractal, javascript, jsx, styleguide
• Language: JavaScript
• Size: 114 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 6
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# complate Adapter for Fractal

[![Build Status](https://travis-ci.org/complate/complate-fractal.svg?branch=master)](https://travis-ci.org/complate/complate-fractal)

[![Greenkeeper badge](https://badges.greenkeeper.io/complate/complate-fractal.svg)](https://greenkeeper.io/)

**Note:** Because of the security vulnerabilities in the [official fractal branch],

complate-fractal now uses [this fork](https://github.com/joyheron/fractal).

## 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

### Context

You need to reference context values via the `context` object:

```jsx

{context.my_label}

```

### Referencing components

Fractal (with Handlebars) brings support for including existing components

within others:

```handlebars



  {{> @my_other_component }}



```


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](https://github.com/innoq/innoq-styleguide)

## Development

### Release

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