complate-fractal
v1.0.2
Published
Use complate templates with Fractal.
Downloads
116
Readme
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-fractalor
yarn add complate-fractalConfiguring Fractal
In your project's fractal.config.js, you need to register complate as templating engine:
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:
import MyWidget from './components/my-widget'
<MyWidget …>generateURI implements an application-specific URI helper, provided to
components via the application context (via envPath, defaults to env.js):
// 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");
}
};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):
export default function PreviewLayout({ context }, ...children) {
return <html lang="en">
…
<body>
…
{children}
…
</body>
</html>;
}Usage with Fractal
Context
You need to reference context values via the context object:
<MyWidget>{context.my_label}</MyWidget>Referencing components
Fractal (with Handlebars) brings support for including existing components within others:
<div class="my-component">
{{> @my_other_component }}
</div>complate has its own way for doing that by using HTML expansion without any special markers or syntax you have to remember:
<MyComponent>
<MyOtherComponent />
</MyComponent>Therefore we don’t support Fractal's @-prefixed view handlers for now.
Examples
Development
Release
- Increment version number in
package.json - Commit as "vX.X.X"
git tag -am "vX.X.X" "vX.X.X"git push --follow-tagsnpm publish