# @prismicio/babel-transform-config

> Transform JS config files (Next, Nuxt, Gatsby)

Latest version **0.0.6** (published 2020-09-29) · ISC license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @prismicio/babel-transform-config
pnpm add @prismicio/babel-transform-config
yarn add @prismicio/babel-transform-config
bun add @prismicio/babel-transform-config
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.0.6 |
| Published | 2020-09-29 |
| First published | 2020-03-31 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 9 |
| Unpacked size | 40.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Hugo Villain |
| Maintainers | lihbr, prismic-ci, veloce, fares.droubi, odim, gholgot, michel.chau, sprite, amaurycahuet, raulgon, hypervillain, arnaudlewis, sre, raph22, prismic |
| Keywords | Babel, Babylon, AST, Next, Nuxt, Gatsby |

## Links

- npm: https://www.npmjs.com/package/@prismicio/babel-transform-config
- Repository: https://github.com/prismicio/babel-transform-config
- Homepage: https://github.com/prismicio/babel-transform-config#readme
- Issues: https://github.com/prismicio/babel-transform-config/issues
- npm.io page: https://npm.io/package/@prismicio/babel-transform-config

## Dependencies (9)

- [consola](https://npm.io/package/consola.md) ^2.15.0
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.11.6
- [@babel/template](https://npm.io/package/@babel/template.md) ^7.10.4
- [@babel/traverse](https://npm.io/package/@babel/traverse.md) ^7.11.5
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.11.5
- [@babel/standalone](https://npm.io/package/@babel/standalone.md) ^7.11.6
- [@babel/plugin-syntax-jsx](https://npm.io/package/@babel/plugin-syntax-jsx.md) ^7.10.4
- [@babel/plugin-transform-runtime](https://npm.io/package/@babel/plugin-transform-runtime.md) ^7.11.5
- [@babel/plugin-transform-arrow-functions](https://npm.io/package/@babel/plugin-transform-arrow-functions.md) ^7.10.4

## Recent versions

- 0.0.6 (latest) — 2020-09-29
- 0.0.6-alpha.aead22d (alpha) — 2020-04-29
- 0.0.6-alpha.ea631c8 — 2020-04-28
- 0.0.5 — 2020-03-31

## README

## babel-transform-config
If you ever wanted to update a Nuxt or Next config file programmatically.
#### Readme: wip
Simplest way to understand what it does:

````bash
git clone https://github.com/prismicio/babel-transform-config;
cd babel-transform-config && npm install;
node examples/nuxt.simple.js
````
This should display some info 👇

##### 1/ previous code:

The actual `nuxt.config.js` file that was read from file.
Something like:
```javascript
export default {
  css: [],
  modules: ['@org/my-nuxt-module'],
  build: {
    webpack : {}
  },
};
````

##### 2/ args passed :
The arguments that were passed to `babel-transform-config`.
Something like:
```javascript
const args = {
  css: ['path/to/file'],
  modules: [
    ['my-module', { config: true }]
  ],
  transpile: ['my-other-module']
}
// will be used like this:
// transformConfig(code, 'nuxt', args)
````

##### 3/ the transpiled code :
What you came for:
```javascript
export default {
  css: ["path/to/file"],
  modules: ['@org/my-nuxt-module', ["my-module", {
    "config": true
  }]],
  build: {
    webpack: {},
    transpile: ["my-other-module"]
  }
};
````

## Using the module

This package exports a `transformConfig` function that takes as arguments some code, a framework key, and key-value params that will help the module transform these arguments.

For example, these arguments:
````javascript
const args = {
    script: ['path/to/script-file.js']
}
transformConfig(myNuxtConfig, 'nuxt', args)
````

`transformConfig` will try & match your script key and transform your arguments into:
````javascript
transforms: [{
    'head:script': {
        action: 'create:merge',
        value: ['path/to/script-file.js']
    }
],
````
This will help the underlying Babel plugin perform the right actions, based on what it knows of your framework. The complete call:

````javascript
const fs = require('fs')
const transformConfig = require('babel-transform-config')

const code = fs.readFileSync('path/to/config', 'utf8')
const args = { script: ['path/to/script-file.js'] }

const { code: updatedCode} = transformConfig(code, 'nuxt', args)

// ⚠️ this is experimental, please log things first
fs.writeFileSync('path/to/config', updatedCode, 'utf8')

````

## Direct transform / Babel plugin

Right now, `transformConfig` only supports Nuxt framexwork. If you want to use things for yourself with another framework, you should use the lower-level transform method:

```javascript
const { transform } = require('babel-transform-config')

const transforms = {
  'head:script': { // create or replace export default { head: { script: [] }}
    action: 'create:replace',
    value: ['my/script.js']
  },
  'deleteMe': { // delete export default { deleteMe: ... }
    action: 'delete'
  },
  'build:transpile': { // merges export default { babel: { transpile: arrayOrObject } }
    action: 'merge',
    value: ['path/to/file']
  }
}
const { code: updatedCode } = transform(yourCustomCode, transforms)

`````

👆 See `examples/transform`.


#### Quick note

This package does not work well with nested elements, especially when object patterns are similar.

---
_Source: https://npm.io/package/@prismicio/babel-transform-config · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._