babel-plugin-vtex-render-route

babel-plugin-vtex-render-route

A babel plugin for extracting VTEX Render route information from a component

What?

If you write the following:

import route from 'vtex.renderjs/route.js'

// Your React component code here
// Let's call this component 'Home'

export default route('home', '/')(Home)

It will extract the information on the parameters provided for the route function and append it to the babel's file metadata property. With the example above it would create something like this:

file {
  metadata {
    // Various babel's properties
    vtexRender {
      route {
        name: 'home',
        path: '/'
      }
    }
  }
}

How?

For the extraction to be succesful it depends on some rules:

• You must make a default import from vtex.renderjs/route.js
• The arguments given for the imported function must be string literals, for now we're not accepting variables or expressions

That's it! The name of the function isn't fixed, sou you're not required to use the name route (as written on our example).

Why?

This plugin is intended to be used in conjunction with gulp-vtex-render on the VTEX Toolbelt. Together they're able to extract route information on build time for the VTEX Render framework.