Neapolitan Pasta Maker

    babel-plugin-source

    0.0.6 • Public • Published

    babel-plugin-source

    Extract source code to strings at build-time

    Build Status Code Coverage version downloads MIT License

    All Contributors PRs Welcome Donate Code of Conduct Examples

    Star on GitHub Watch on GitHub Tweet

    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

    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

    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

    Install

    npm i babel-plugin-source

    DownloadsWeekly Downloads

    44

    Version

    0.0.6

    License

    MIT

    Unpacked Size

    34.1 kB

    Total Files

    12

    Last publish

    Collaborators

    • tannerlinsley