The problem

You are writing code that needs to both function and be displayed as raw text. You shouldn't have to write and maintain the code snippet twice (once as real code, and again as a template string).

This solution

babel-plugin-source allows you to extract arbitrary code blocks into string variables within the file they are located. This allows you to write the code once, then utilize it's raw text immediately in the same file. You can display it, log it, export it, etc.

Before:

let MyCompSource;

// @source MyCompSource
const MyComp = () => <div>Hello there!</div>;
// @source MyCompSource

After:

let MyCompSource = `const MyComp = () => <div>Hello there!</div>`;

const MyComp = () => <div>Hello there!</div>;

Table of Contents

• Installation
• Usage
• Configure with Babel
  • Via .babelrc (Recommended)
  • Via CLI
  • Via Node API
• Examples
• FAQ
  • [How is this different from webpack loaders?](#how-is-this-different-from-webpackwebpack-loaderswebpack-loaders)
• Other Solutions
• Contributors
• LICENSE

Installation

This module is distributed via npm which is bundled with node and should be installed as one of your project's devDependencies:

npm install --save-dev babel-plugin-source

Usage

Before:

let MyCompSource;

// @source MyCompSource
const MyComp = () => <div>Hello there!</div>;
// @Source

After:

let MyCompSource = `const MyComp = () => <div>Hello there!</div>`;

const MyComp = () => <div>Hello there!</div>;

Configure with Babel

Via .babelrc (Recommended)

.babelrc

{
  "plugins": ["source"]
}

Via CLI

babel --plugins source script.js

Via Node API

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

Examples

• React-Charts.js.org - Source code examples

FAQ

How is this different from webpack loaders?

This plugin was inspired by webpack's [raw-loader][raw-loader]. The benefit of using this over that loader (or any other loader) is that it allows more fine-grained control over the extraction process and integrates tightlyo with your existing babel pipeline. This is also extremely useful if you aren't bundling your code with webpack, but still using babel.

Other Solutions

I'm not aware of any, so if you are, please make a pull request and add it here!

Contributors

Thanks goes to these people (emoji key):

| Tanner Linsley💻 🎨 📖 💡 | Kent C. Dodds💬 💻 🤔 🔌 📢 🔧 | | :---: | :---: |

This project follows the all-contributors specification. Contributions of any kind welcome!

LICENSE

MIT