Complate-fractal NPM

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

yarn add complate-fractal

Configuring 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

innoQ Styleguide and Component Library

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-tags
npm publish

@babel/core @babel/plugin-transform-react-jsx @babel/preset-env @babel/register @innoq/fractal-fork complate-stream esm prettier

@infinitebrahmanuniverse/nolb-compl @everything-registry/sub-chunk-1365

4 months ago

1 year ago

2 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago