demo-source-loader

demo-source-loader is a webpack loader that loads the original source of a javascript module together with a related markdown file, and attaches them to the exports of the module.

Usage

Install the loader with npm install --save-dev demo-source-loader. Then configure webpack by adding a rule, for example

module.exports = {
    // other config
    rules: [{
        test: /\.demo.js$/,
        exclude: /node_modules/,
        use: [{
            loader: "demo-source-loader"
        }, {
            loader: "babel-loader",
        }]
    }]
}

…or you can use the webpack inline loader syntax:

import SimpleDemo from 'demo-source-loader!./demos/Simple.demo';

Accessing raw source

After setting up your loader, you can import the raw source from the module like this:

import { __source__ } from 'demo-source-loader!./demos/Simple.demo';
 
console.log(__source__);

…or as a field on the default export (if one exists):

import SimpleDemo from 'demo-source-loader!./demos/Simple.demo';
 
console.log(SimpleDemo.__source__);

Accessing demo markup

The loader will look for a file with the same name, but ending in .md instead of .js (or .mjs or .es6 or .jsx), and expose the contents in the same way:

import { __markdown__ } from 'demo-source-loader!./demos/Simple.demo';
 
console.log(__markdown__);

…or

import SimpleDemo from 'demo-source-loader!./demos/Simple.demo';
 
console.log(SimpleDemo.__markdown__);

If no markdown file is found, the value of __markdown__ will just be an empty string.

demo-source-loader adds the markdown file to the dependency tree, so changes to the markdown will trigger a re-build if you're using webpack in watch mode.