-
Notifications
You must be signed in to change notification settings - Fork 20
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Refactored one-loader to allow more tags
Tags can now occur multiple times Added template tag, intended for html Improved code readability
- Loading branch information
1 parent
2aaa44a
commit 78a3251
Showing
9 changed files
with
272 additions
and
251 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,158 +1,161 @@ | ||
| [![npm][npm]][npm-url] | ||
| [![build][build]][build-url] | ||
|
|
||
| <div align="center"> | ||
| <a href="https://github.com/webpack/webpack"> | ||
| <img width="200" height="200" | ||
| src="https://webpack.js.org/assets/icon-square-big.svg"> | ||
| </a> | ||
| </div> | ||
|
|
||
| # 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 | ||
| <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](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 `<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: | ||
|
|
||
| ```html | ||
| <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: | ||
|
|
||
| ```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 | ||
| [![npm][npm]][npm-url] | ||
| [![build][build]][build-url] | ||
|
|
||
| <div align="center"> | ||
| <a href="https://github.com/webpack/webpack"> | ||
| <img width="200" height="200" | ||
| src="https://webpack.js.org/assets/icon-square-big.svg"> | ||
| </a> | ||
| </div> | ||
|
|
||
| # One Loader | ||
|
|
||
| A webpack loader to enable single-file components, inspired by `vue-loader`. | ||
|
|
||
| Originally it was built for react, but will work for almost any type of content. | ||
| In fact, if you wanted to, you could even use it for php, html and css using file-loaders without any javascript part. | ||
|
|
||
|
|
||
| ## Features | ||
|
|
||
| * CSS, JavaScript code and other parts 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 | ||
| <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](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 `<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: | ||
|
|
||
| ```html | ||
| <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: | ||
|
|
||
| ```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 |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.