Package Exports

babel-plugin-after

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (babel-plugin-after) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

babel-plugin-after

Babel plugin to add additional chunk info to asyncComponent() in Afterjs.

How It's Wokring

search for import statements from these paths '@jaredpalmer/after' and '@jaredpalmer/after/asyncComponent'
then it finds a local name for asyncComponent import statement

// example1.js
import { asyncComponent } from '@jaredpalmer/after'; // localname is asyncComponent

// example2.js
import { asyncComponent as foo } from '@jaredpalmer/after'; // localname is foo

// example3.js
import asyncComponent from '@jaredpalmer/after/asyncComponent'; // localname is asyncComponent

// example4.js
import foo from '@jaredpalmer/after/asyncComponent'; // localname is foo

// example5.js
import { asyncComponent as foo, After } from '@jaredpalmer/after'; // localname is foo

// example6.js
import { After } from '@jaredpalmer/after'; // there is no `asyncComponent` import so babel plugin skips this file

// example7.js
import loader from '@jaredpalmer/after/asyncComponent'; // localname is loader
import { asyncComponent, After } from '@jaredpalmer/after'; // localname is asyncComponent

// localname = [`loader`, `asyncComponent`] :)

then it searches for FunctionCalls that have these conditions:

name of function that get called matches localname array
that function act as value of property
the name of property must be component

import { asyncComponent } from '@jaredpalmer/after'; // localname is asyncComponent

// let's look for localname (`asyncComponent`) and see where it get called
// ...

// oh nice I found a call to that function
{
  component: asyncComponent({
    loader: () =>
      import(
        `./pages/ProducDetail`
      )
  }),
}

// now let me check and see if it's value of an object propery that named `component`
{ // <- it's an object
  // 👇 and property name is `component`
  component: asyncComponent({
    loader: () =>
      import(
        `./pages/ProducDetail`
      )
  })
}

Examples

{
  path: "/product/:name",
  component: asyncComponent({
    loader: () =>
      import(
        `./pages/ProducDetail`
      )
  })
}

Out

{
  path: "/product/:name",
  component: asyncComponent({
    loader: () =>
      import(
        /* webpackChunkName: 'pages-ProducDetail' */
        `./pages/ProducDetail`
      )
    chunkName: "pages-ProducDetail",
  })
}

// 👆 as you can see `./pages/ProducDetail` changed to `pages-ProducDetail`,
// because for web servers `/` means a folder
// and webpackChunkName is name of file that saved on disk,
// so `/` in file name may break our app

{
  path: "/product/:name",
  component: asyncComponent({
    loader: () =>
      import(
        /* webpackChunkName: 'HelloWorld' */
        `./pages/ProducDetail`
      )
  })
}

Out

{
  path: "/product/:name",
  component: asyncComponent({
    loader: () =>
      import(
        /* webpackChunkName: 'HelloWorld' */
        `./pages/ProducDetail`
      ),
      chunkName: "HelloWorld",
  })
}

const name = "SlimShady"
{
  path: "/rap/god",
  component: asyncComponent({
    loader: () =>
      import(
        `./pages/${name}`
      )
  })
}

Out

const name = "SlimShady"
{
  path: "/rap/god",
  component: asyncComponent({
    loader: () =>
      import(
        /* webpackChunkName: '[request]' */
        `./pages/${name}`
      ),
    chunkName: name,
  })
}

{
  path: "/test",
  component: asyncComponent({
    loader: () =>
      import(
        `./pages/test`
      ),
    chunkName: "my-custom-chunk-name",
  })
}

Out

{
  path: "/test",
  component: asyncComponent({
    loader: () =>
      import(
        /* webpackChunkName: 'my-custom-chunk-name' */
        `./pages/test`
      ),
      chunkName: "my-custom-chunk-name",
  })
}

{
  path: "/test",
  component: asyncComponent({
    loader: () =>
      import(
        /* webpackChunkName: 'my-custom-chunk-name' */
        `./pages/test`
      ),
    chunkName: "i-will-replace-magic-comment",
  })
}

Out

{
  path: "/test",
  component: asyncComponent({
    loader: () =>
      import(
        /* webpackChunkName: 'i-will-replace-magic-comment' */
        `./pages/test`
      ),
    chunkName: "i-will-replace-magic-comment",
  })
}

Installation

$ npm install babel-plugin-after --save-dev

or if you use Yarn like me:

$ yarn add -D babel-plugin-after

Usage

Via `.babelrc` (Recommended)

.babelrc

{
  "plugins": ["after"]
}

Options

prefix: string (defaults: "") String used to append before chunkName and webpackChunkName.

{
  "plugins": ["after", { "prefix": "MyPrefix-" }]
}

Via CLI

$ babel --plugins after script.js

Via Node API

require('babel-core').transform('code', {
  plugins: ['after'],
});