babel-plugin-after-async-component

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

How It's Wokring

1. search for import statements from these paths '@jaredpalmer/after' and '@jaredpalmer/after/asyncComponent'
2. 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`] :)

1. then it searches for FunctionCalls that have these conditions:

1. name of function that get called matches localname array
2. that function act as value of property
3. 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

In

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

Out

{
  path: "/product/:name",
  component: asyncComponent({
    loader: () =>
      import(
        /* webpackChunkName: 'pages-ProducDetail' */
        `./pages/ProducDetail`
      )
  }, "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

In

{
  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",
  })
}

In

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,
  })
}

In

{
  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",
  })
}

In

{
  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-async-component --save-dev

or if you use Yarn like me:

$ yarn add -D babel-plugin-after-async-component

Usage

Via .babelrc (Recommended)

.babelrc

{
  "plugins": ["after-async-component"]
}

Options

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

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

Via CLI

$ babel --plugins after-async-component script.js

Via Node API

require("babel-core").transform("code", {
  plugins: ["after-async-component"],
})