The .components property on the main fractal instance provides access to the components source object.

const fractal = require('@frctl/fractal').create();
fractal.components.set('ext', '.html');


The fractal.components object is a Collection and so inherits all the methods that are available on Collection instances in addition to those documented below. See the Collection documentation for full details.


.set(path, value)

  • path - String
  • value - String | Object

Set the value of a configuration setting, identified by its path. See the components configuration documentation for details of available options.

fractal.components.set('ext', '.html');


  • path - String

Get the value of a configuration setting, identified by it's path. For a complete list of configuration values see the components configuration documentation.

console.log(fractal.components.get('ext')); // '.html'


  • adapter - Adapter | String

Set the template engine adapter to be used for rendering the component view templates.

fractal.components.engine('@frctl/nunjucks'); // no customisation needed, pass string of module name

const nunjucks = require('@frctl/nunjucks')({
    // set config here
fractal.components.engine(nunjucks); // or pass in configured Adapter instance


  • context - Object

Resolve the supplied context object. Parses out and resolved @handle syntax data references and any promises contained in the data. Returns a Promise.

const resolvedContext = fractal.components.resolve({
    title: '@list.title',
    text: 'Some text',
    entries: someFunctionThatReturnsAPromise()

.on(event, callback)

  • event - String
  • callback - Function

Listen out and respond to lifecycle events. See the Events section for more details.

fractal.components.on('changed', function(eventData){
	console.log(`Change in component directory detected`);


Perform an initial read and parse of the components directory. Returns a Promise.

fractal.components.load().then(() => {
	console.log('Finished parsing components directory!');


Start a watch task to monitor the components directory for changes.;


Stop any currently running watch tasks.




The text used to reference the components source in any navigation.


The text used to reference the components source in any titles.


Boolean, true if the initial source directory read and parse has been completed.


Full, resolved filesystem path to the components directory.


The fractal.components object is an EventEmitter and emits events that can be listened to via using the .on() method (documented above). Available events to listen for are described below:


Emitted when Fractal has finished the initial parse of the components directory.

fractal.components.on('loaded', function(){
	console.log(`Components directory has been loaded`);


Emitted when one or more files in the components directory are added, removed or edited, but before Fractal has re-parsed the contents of the directory.

fractal.components.on('changed', function(eventData){
	console.log(`Change in components directory`);
  • eventData - an event data object, e.g. { event: 'change', path: 'path/to/file.scss' }


Emitted when Fractal has finished re-parsing the components directory after a change.

fractal.components.on('updated', function(source, eventData){
	console.log(`Components source has been updated`);
  • eventData - an event data object, e.g. { event: 'change', path: 'path/to/file.scss' }
Last Updated: 9/5/2018, 2:48:53 PM