One Loader

A webpack loader to enable single-file React components. Inspired by vue-loader.

Features

• CSS and JavaScript code co-located in a single .one file (extension is configurable)
• Configurable loaders for JavaScript and CSS
• Support for scoped styles through CSS Modules (using css-loader)

Installation

$ npm i --save-dev one-loader

Example

In webpack.config.js:

{
    module: {
        loaders: [
            {
                test: /\.one$/,
                loader: 'one-loader',
                options: {
                    map: {
                        'text/css': ['style-loader', 'css-loader'],
                        'javascript': 'babel-loader'
                    }
                }
            }
        ]
    }
}

In ExampleComponent.one:

<style>
    html {
        background-color: green;
    }
 
    .basicExample {
        color: white;
    }
</style> 
 
<script>
    export default () => {
        return <div className="basicExample">
            Hello World
        </div>
    }
</script> 

More examples are available in examples directory:

• Simple Counter
• Redux Todo List with extracted CSS file
• Redux Todo List with scoped CSS

Configuration

The map object in one-loader options is responsible for assigning loaders to code types in your single-file components.

If no mapping is provided <style> contents will be processed with css-loader and <script> contents will remain unchanged. These default values are defined in options.js file.

The type property can be used to assign custom types to <style> and <script> tags:

<style type="text/less">
  .component {
    text-align: center;
  }
</style> 
<script type="es6">
 
</script> 

There are no restrictions on type naming, so any string will work, however descriptive values are recommended.

Known issues

The internal architecture of the loader requires passing the options object to sub-loaders through a require string. This is currently causing issues when defining map object loaders in strings with a ! separator. Thus array syntax is recommended for defining mapped loaders.

This will NOT work:

{
    module: {
        loaders: [
            {
                test: /\.one$/,
                loader: 'one-loader',
                options: {
                    map: {
                        'text/css': 'style-loader!css-loader',
                        'javascript': 'babel-loader'
                    }
                }
            }
        ]
    }
}

This will work:

{
    module: {
        loaders: [
            {
                test: /\.one$/,
                loader: 'one-loader',
                options: {
                    map: {
                        'text/css': ['style-loader', 'css-loader'],
                        'javascript': 'babel-loader'
                    }
                }
            }
        ]
    }
}

License

MIT