Trucks-plugin-transform NPM

Transform

Transforms the component tree

Runs plugin functions that visit the component tree nodes and perform transformations.

When transform plugins are defined as strings and do not resolve to an absolute path they are deemed to be modules to require and are prefixed with trucks-transform- such that csp will require the trucks-transform-csp package.

Install

npm i trucks-plugin-transform --save-dev

Usage

This plugin is bundled with the core trucks-compiler library.

If a transforms array is declared on the options it is used:

const options = {
  transforms: ['csp']
}

Configure this plugin using the transform field:

const options {
  conf: {
    plugins: {
      transform: {
        /* plugin configuration */
      }
    }
  }
}

Or as a convenient shortcut use the top-level transform field:

const options {
  transform: {
    /* plugin configuration */
  }
}

Transforms

Transforms are a different type of plugin that are executed when the entire component tree is available.

A transform plugin returns a map of visitor functions and/or lifecycle callbacks:

function plugin(state, conf) {
  return {
    '*': (node, cb) => {
      cb(); 
    }
  }
}

Lifecycle

Lifecycle callbacks are functions that hook into events when iterating the component tree:

begin Called before the tree is walked.
enter Called when entering a node before visitor functions are invoked.
leave Called when leaving a node after visitor functions have been invoked.
end Called when the tree walk is complete.

The begin and end functions are passed the component tree so the signature is always:

function(node, cb);

For example you may want to collect all nodes of a type and operate once the walk is completed:

function plugin(state, conf) {
  const styles = [];
  return {
    end: (node, cb) => {
      // operate on the list of styles 
      cb();
    },
    Style: (node, cb) => {
      styles.push(node);
      cb(); 
    }
  }
}

Visitors

Each key in the returned map is evaluated to determine whether the visitor function wants to see a particular node, the wildcard * matches all nodes. Available node types are:

Tree Visit tree nodes.
File Visit file nodes.
Module Visit module nodes.
Component Visit component nodes.
Template Visit template nodes.
Style Visit style nodes.
Script Visit script nodes.

Configuration

To configure a transform plugin you can set a configuration object:

const options = {
  files: ['components.html'],
  transforms: ['skate'],
  conf: {
    transforms: {
      skate: {/* plugin configuration goes here */}
    }
  }
};