Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/digitalie/one-loader
Single-file components for React
https://github.com/digitalie/one-loader
components react single-file-component webpack webpack-loader
Last synced: about 2 months ago
JSON representation
Single-file components for React
- Host: GitHub
- URL: https://github.com/digitalie/one-loader
- Owner: digitalie
- License: mit
- Created: 2017-07-13T22:25:01.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T01:31:59.000Z (over 1 year ago)
- Last Synced: 2024-04-15T08:05:51.446Z (5 months ago)
- Topics: components, react, single-file-component, webpack, webpack-loader
- Language: JavaScript
- Homepage:
- Size: 2.57 MB
- Stars: 236
- Watchers: 4
- Forks: 20
- Open Issues: 52
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[![npm][npm]][npm-url]
[![build][build]][build-url]
# 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
```bash
$ npm i --save-dev one-loader
```
## Example
In `webpack.config.js`:
```javascript
{
module: {
loaders: [
{
test: /\.one$/,
loader: 'one-loader',
options: {
map: {
'text/css': ['style-loader', 'css-loader'],
'javascript': 'babel-loader'
}
}
}
]
}
}
```
In `ExampleComponent.one`:
```html
html {
background-color: green;
}
.basicExample {
color: white;
}
export default () => {
return <div className="basicExample">
Hello World
</div>
}
```
More examples are available in [examples](examples) directory:
* [Simple Counter](examples/01_counter)
* [Redux Todo List with extracted CSS file](examples/02_redux-todos)
* [Redux Todo List with scoped CSS](examples/03_redux-todos-scoped)
## 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 `` 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:
```html
<style type="text/less">
.component {
text-align: center;
}
```
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:
```javascript
{
module: {
loaders: [
{
test: /\.one$/,
loader: 'one-loader',
options: {
map: {
'text/css': 'style-loader!css-loader',
'javascript': 'babel-loader'
}
}
}
]
}
}
```
This will work:
```javascript
{
module: {
loaders: [
{
test: /\.one$/,
loader: 'one-loader',
options: {
map: {
'text/css': ['style-loader', 'css-loader'],
'javascript': 'babel-loader'
}
}
}
]
}
}
```
## License
MIT
[npm]: https://img.shields.io/npm/v/one-loader.svg
[npm-url]: https://npmjs.com/package/one-loader
[build]: https://travis-ci.org/digitalie/one-loader.svg?branch=master
[build-url]: https://travis-ci.org/digitalie/one-loader