@xymopen/babel-plugin-auto-import v1.1.0

babel-plugin-auto-import

Convert global variables to import statements

This is an replacement for babel-plugin-auto-import but in another configuration style.

Known differences

This plugin fails test should insert import for object property where it transforms...

let a = {
  b: x,
  y,
  z: c
}

...into...

-import { x } from "some-path"
+import { x, y } from "some-path"

 let a = {
   b: x,
   y,
   z: c
 }

...which I believe is expected.

Examples

Example 1

{
  plugins: [
    [
      '@xymopen/babel-plugin-auto-import',
      /** @type {import('@xymopen/babel-plugin-auto-import').BabelAutoImportPluginOption} */
      ({
        Vue: { from: 'vue', default: true }
      })
    ]
  ]
}

...will transform...

Vue.component('my-component', { /* ... */ })

...into...

import Vue from 'vue'

Vue.component('my-component', { /* ... */ })

Example 2

{
  plugins: [
    [
      '@xymopen/babel-plugin-auto-import',
      /** @type {import('@xymopen/babel-plugin-auto-import').BabelAutoImportPluginOption} */
      ({
        // You can defer the configuration generation
        factory(babel, program, state) {
          return {
            Vue: { from: 'vue-class-component' },
            Component: { from: 'vue-class-component', default: true }
          }
        }
      })
    ]
  ]
}

...will transform...

@Component
class MyComponent extends Vue { }

...into...

import Component, { Vue } from 'vue-class-component'

@Component
class MyComponent extends Vue { }

Example 3

Suitable for injecting peer dependency.

{
  plugins: [
    [
      '@xymopen/babel-plugin-auto-import',
      /** @type {import('@xymopen/babel-plugin-auto-import').BabelAutoImportPluginOption} */
      ({
        Vue: { from: 'vue-property-decorator' },
        Component: { from: 'vue-property-decorator' },
        Prop: [
          { from: 'reflect-metadata', sideEffect: true },
          { from: 'vue-property-decorator' }
        ]
      })
    ]
  ]
}

...will transform...

@Component
class MyComponent extends Vue {
  @Prop() age
}

...into...

import 'reflect-metadata'
import { Component, Vue, Prop } from 'vue-property-decorator'

@Component
class MyComponent extends Vue {
  @Prop() age
}

WARNING: The plugin doesn't check if the import is sideEffect and misconfiguration could result in conflict or be tree shaked.

Example 4

Suitable for polyfilling browser built-ins (eg. window.fetch).

{
  plugins: [
    [
      '@xymopen/babel-plugin-auto-import',
      /** @type {import('@xymopen/babel-plugin-auto-import').BabelAutoImportPluginOption} */
      ({
        fetch: { from: 'whatwg-fetch', sideEffect: true }
      })
    ]
  ]
}

...will transform...

fetch('http://example.com/qwe')

...into...

import 'whatwg-fetch'

fetch('http://example.com/qwe')

Example 5

{
  plugins: [
    [
      '@xymopen/babel-plugin-auto-import',
      /** @type {import('@xymopen/babel-plugin-auto-import').BabelAutoImportPluginOption} */
      ({
        styles (babel, program, state) {
          return {
            from: `./${path.relative(state.cwd, state.filename).replace(/\.js$/, '.css')}`,
            default: true
          }
        }
      })
    ]
  ]
}

...will transform component-name.js...

// ...
<input className={styles.className} />
// ...

...into...

import styles from './component-name.css';
// ...
<input className={styles.className} />
// ...