Package Exports

one-loader

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (one-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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:

Configuration

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

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

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 not restrictions on type naming, so any string will work. However it is recommended to use descriptive values.

Known issues

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

This will work:

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

And this will NOT work:

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

License

MIT