All Projects → digitalie → One Loader

digitalie / One Loader

Licence: mit
Single-file components for React

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to One Loader

Vueport
Single file components for Rails with Vue JS and Webpack
Stars: ✭ 141 (-39.48%)
Mutual labels:  webpack, components
Pug As Jsx Loader
Stars: ✭ 168 (-27.9%)
Mutual labels:  webpack, webpack-loader
Bs Loader
📻 Bucklescript loader for Webpack and Jest
Stars: ✭ 146 (-37.34%)
Mutual labels:  webpack, webpack-loader
Svg Sprite Loader
Webpack loader for creating SVG sprites.
Stars: ✭ 1,822 (+681.97%)
Mutual labels:  webpack, webpack-loader
Polymer Webpack Loader
WebPack Loader for Polymer Web Components
Stars: ✭ 192 (-17.6%)
Mutual labels:  webpack, webpack-loader
Redux React Starter
DEPRECATED use the new https://github.com/didierfranc/react-webpack-4
Stars: ✭ 137 (-41.2%)
Mutual labels:  webpack, components
Webpack.js.org
Repository for webpack documentation and more!
Stars: ✭ 2,049 (+779.4%)
Mutual labels:  webpack, webpack-loader
Webpack Tools
☕️Just a simple webpack sample project.
Stars: ✭ 106 (-54.51%)
Mutual labels:  webpack, webpack-loader
Vueleaflet
Vue components for Leaflet maps
Stars: ✭ 177 (-24.03%)
Mutual labels:  webpack, components
Css Modules Typescript Loader
Webpack loader to create TypeScript declarations for CSS Modules
Stars: ✭ 172 (-26.18%)
Mutual labels:  webpack, webpack-loader
Style Loader
Style Loader
Stars: ✭ 1,572 (+574.68%)
Mutual labels:  webpack, webpack-loader
String Replace Loader
Replace loader for Webpack
Stars: ✭ 205 (-12.02%)
Mutual labels:  webpack, webpack-loader
React Workshop
⚒ 🚧 This is a workshop for learning how to build React Applications
Stars: ✭ 114 (-51.07%)
Mutual labels:  webpack, components
X0
Document & develop React components without breaking a sweat
Stars: ✭ 1,706 (+632.19%)
Mutual labels:  webpack, components
Sass Vars Loader
Use Sass variables defined in Webpack config or in external Javascript or JSON files
Stars: ✭ 112 (-51.93%)
Mutual labels:  webpack, webpack-loader
File Loader
File Loader
Stars: ✭ 1,846 (+692.27%)
Mutual labels:  webpack, webpack-loader
Webpack Core Usage
webpack2完整系列课程,欢迎阅读。同时欢迎移步我的react全家桶文章全集: https://github.com/liangklfangl/react-article-bucket
Stars: ✭ 94 (-59.66%)
Mutual labels:  webpack, webpack-loader
Vue Svg Inline Loader
Webpack loader used for inline replacement of SVG images with actual content of SVG files in Vue projects.
Stars: ✭ 105 (-54.94%)
Mutual labels:  webpack, webpack-loader
Workerize Loader
🏗️ Automatically move a module into a Web Worker (Webpack loader)
Stars: ✭ 2,135 (+816.31%)
Mutual labels:  webpack, webpack-loader
Angular Router Loader
A Webpack loader that enables string-based module loading with the Angular Router
Stars: ✭ 194 (-16.74%)
Mutual labels:  webpack, webpack-loader

npm build

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 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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].