├── LICENSE ├── README.md ├── index.js └── package.json /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Nathan White 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # React Jade Loader 3 | 4 | A simple loader plugin for [webpack](http://http://webpack.github.io/) to transform [react-jade](https://github.com/ForbesLindesay/react-jade) templates. 5 | 6 | This is __alpha__ right now. It requires an experimental version of `react-jade` until changes are settled and merged in. 7 | 8 | 9 | ```bash 10 | npm install https://github.com/nw/react-jade/archive/0.1.2-alpha.tar.gz --save 11 | npm install react-jade-loader --save-dev 12 | ``` 13 | 14 | ## Usage 15 | 16 | Inside your `webpack` config add a loader. 17 | 18 | ```js 19 | module: { 20 | loaders: [ 21 | { test: /\.jade$/, loader: "react-jade-loader" } 22 | ] 23 | } 24 | ``` 25 | 26 | ### Bonus Feature 27 | 28 | #### Define multiple react components in a single jade file 29 | 30 | You can pass the split argument as a querystring argument 31 | 32 | ```js 33 | loaders: [ 34 | { test: /\.jade$/, loader: "react-jade-loader?split=true" } 35 | ] 36 | ``` 37 | 38 | Inside your react-jade 39 | 40 | ```jade 41 | 42 | // react: comment 43 | .comment 44 | h2.commentAuthor= props.author 45 | span!= rawMarkup 46 | 47 | // react: list 48 | .commentList 49 | - props.data.forEach(function(comment, index){ 50 | Comment(author=comment.author, text=comment.text key=index) 51 | - }) 52 | 53 | ``` 54 | 55 | Comments that start at the beginning of a line with `react: {name}` are split. The name is used to export that chunk of the template. 56 | 57 | In the above example the transformed file will export `comment` & `list`. 58 | 59 | 60 | ## License 61 | 62 | The MIT License (MIT) 63 | 64 | Copyright (c) 2014 Nathan White 65 | 66 | Permission is hereby granted, free of charge, to any person obtaining a copy 67 | of this software and associated documentation files (the "Software"), to deal 68 | in the Software without restriction, including without limitation the rights 69 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 70 | copies of the Software, and to permit persons to whom the Software is 71 | furnished to do so, subject to the following conditions: 72 | 73 | The above copyright notice and this permission notice shall be included in all 74 | copies or substantial portions of the Software. 75 | 76 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 77 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 78 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 79 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 80 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 81 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 82 | SOFTWARE. -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var jade = require('react-jade') 2 | , path = require('path') 3 | , loaderUtils = require("loader-utils"); 4 | 5 | module.exports = function(source){ 6 | 7 | var transform = "var React = require('react');\n"; 8 | 9 | this.cacheable && this.cacheable(); 10 | 11 | var filepath = loaderUtils.getRemainingRequest(this).replace(/^!/, ""); 12 | var query = loaderUtils.parseQuery(this.query); 13 | 14 | if(query.split){ 15 | var chunks = source.split(/\n*?\/\/ react: (\w+)\s*\n/); 16 | chunks.shift(); 17 | if(!chunks.length) return single(); 18 | 19 | for(var i=0; i < chunks.length-1; i += 2){ 20 | transform += "exports['" + chunks[i] + "'] = " + jade.compile(chunks[i+1], {filename: filepath}).toString() + ";\n"; 21 | } 22 | return transform; 23 | } 24 | 25 | return single(); 26 | 27 | function single(){ 28 | return transform + "module.exports= " + jade.compile(source, {filename: filepath}).toString(); 29 | } 30 | 31 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-jade-loader", 3 | "version": "0.1.0", 4 | "description": "webpack loader for react-jade", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "Nathan White ", 10 | "license": "MIT", 11 | "peerDependencies": { 12 | "react-jade": "~2.1.0", 13 | "loader-utils": "~0.2.5" 14 | }, 15 | "repository": { 16 | "type": "git", 17 | "url": "https://github.com/nw/react-jade-loader.git" 18 | }, 19 | "keywords": [ 20 | "react", 21 | "jade", 22 | "loader", 23 | "webpack" 24 | ] 25 | } 26 | --------------------------------------------------------------------------------