├── .babelrc ├── .builderrc ├── .editorconfig ├── .gitignore ├── .npmignore ├── .travis.yml ├── CONTRIBUTING.md ├── DEVELOPMENT.md ├── LICENSE.txt ├── README.md ├── demo ├── app.jsx └── index.html ├── dist ├── formidable-react-component-boilerplate.js ├── formidable-react-component-boilerplate.js.map ├── formidable-react-component-boilerplate.min.js └── formidable-react-component-boilerplate.min.js.map ├── package.json ├── src ├── components │ └── formidable-react-component-boilerplate.jsx └── index.js └── test └── client ├── main.js ├── spec └── components │ └── formidable-react-component-boilerplate.spec.jsx └── test.html /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "stage": 0, 3 | "nonStandard": true 4 | } 5 | -------------------------------------------------------------------------------- /.builderrc: -------------------------------------------------------------------------------- 1 | --- 2 | archetypes: 3 | - builder-react-component 4 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | max_line_length = 100 12 | 13 | [*.md] 14 | trim_trailing_whitespace = false -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ### SublimeText ### 2 | *.sublime-workspace 3 | 4 | ### OSX ### 5 | .DS_Store 6 | .AppleDouble 7 | .LSOverride 8 | Icon 9 | 10 | # Thumbnails 11 | ._* 12 | 13 | # Files that might appear on external disk 14 | .Spotlight-V100 15 | .Trashes 16 | 17 | ### Windows ### 18 | # Windows image file caches 19 | Thumbs.db 20 | ehthumbs.db 21 | 22 | # Folder config file 23 | Desktop.ini 24 | 25 | # Recycle Bin used on file shares 26 | $RECYCLE.BIN/ 27 | 28 | # App specific 29 | 30 | coverage 31 | node_modules 32 | bower_components 33 | .tmp 34 | lib 35 | npm-debug.log* 36 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # Cruft 2 | *.sublime-workspace 3 | .DS_Store 4 | .AppleDouble 5 | .LSOverride 6 | Icon 7 | ._* 8 | .Spotlight-V100 9 | .Trashes 10 | Thumbs.db 11 | ehthumbs.db 12 | Desktop.ini 13 | $RECYCLE.BIN/ 14 | .tmp 15 | npm-debug.log* 16 | 17 | # Code / build 18 | coverage 19 | node_modules 20 | bower_components 21 | demo 22 | test 23 | karma* 24 | webpack* 25 | .eslint* 26 | .editor* 27 | .travis* 28 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | 3 | node_js: 4 | - "0.10" 5 | - "0.12" 6 | - "4.2" 7 | - "5.0" 8 | 9 | # Use container-based Travis infrastructure. 10 | sudo: false 11 | 12 | branches: 13 | only: 14 | - master 15 | 16 | env: 17 | matrix: 18 | - NPM_3=true 19 | - NPM_3=false 20 | 21 | before_install: 22 | # GUI for real browsers. 23 | - export DISPLAY=:99.0 24 | - sh -e /etc/init.d/xvfb start 25 | 26 | # Potentially update to npm 3 27 | - 'if [ "$NPM_3" = true ]; then npm install -g npm@3; else true; fi' 28 | 29 | script: 30 | - npm --version 31 | - node_modules/.bin/builder run check-ci 32 | 33 | # Prune deps to just production and ensure we can still build 34 | - npm prune --production 35 | - node_modules/.bin/builder run build 36 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | Contributing 2 | ============ 3 | 4 | Thanks for helping out! 5 | 6 | ## Development 7 | 8 | Run `builder run open-hot` or `builder run open-dev` to run a webpack dev server 9 | with component examples. 10 | 11 | ## Checks, Tests 12 | 13 | Run `builder run check` before committing. 14 | 15 | ## Dist 16 | 17 | Please do not commit changes to files in `dist`. 18 | These files are only committed when we tag releases. 19 | 20 | ## Generator Compatibility 21 | 22 | All boilerplate components should be named 23 | `formidable-react-component-boilerplate` or 24 | `FormidableReactComponentBoilerplate` as appropriate. 25 | 26 | `src/components/formidable-react-component-boilerplate.jsx` and 27 | `test/client/spec/components/formidable-react-component-boilerplate.spec.jsx` 28 | SHOULD NOT be moved or renamed 29 | -------------------------------------------------------------------------------- /DEVELOPMENT.md: -------------------------------------------------------------------------------- 1 | Development 2 | =========== 3 | 4 | We use [builder][] and `npm` to control all aspects of development and 5 | publishing. 6 | 7 | As a preliminary matter, please update your shell to include 8 | `./node_modules/.bin` in `PATH` like: 9 | 10 | ```sh 11 | export PATH="${PATH}:./node_modules/.bin" 12 | ``` 13 | 14 | So you can type `builder` instead of `./node_modules/.bin/builder` for all 15 | commands. 16 | 17 | 18 | ## Build 19 | 20 | Build for production use (NPM, bower, etc) and create `dist` UMD bundles 21 | (min'ed, non-min'ed) 22 | 23 | ``` 24 | $ builder run build 25 | ``` 26 | 27 | Note that `dist/` files are only updated and committed on **tagged releases**. 28 | 29 | 30 | ## Development 31 | 32 | All development tasks consist of watching the demo bundle, the test bundle 33 | and launching a browser pointed to the demo page. 34 | 35 | Run the `demo` application with watched rebuilds either doing: 36 | 37 | ### Basic Watched Builds 38 | 39 | ```sh 40 | $ builder run dev # dev test/app server 41 | $ builder run open-dev # (OR) dev servers _and a browser window opens!_ 42 | ``` 43 | 44 | ### Watched Builds + Hot Reloading 45 | 46 | Same as above, but with hot reloading of React components. 47 | 48 | ```sh 49 | $ builder run hot # hot test/app server 50 | $ builder run open-hot # (OR) hot servers _and a browser window opens!_ 51 | ``` 52 | 53 | From there, using either `dev` or `hot`, you can see: 54 | 55 | * Demo app: [127.0.0.1:3000](http://127.0.0.1:3000/) 56 | * Client tests: [127.0.0.1:3001/test/client/test.html](http://127.0.0.1:3001/test/client/test.html) 57 | 58 | 59 | ## Programming Guide 60 | 61 | ### Logging 62 | 63 | We use the following basic pattern for logging: 64 | 65 | ```js 66 | if (process.env.NODE_ENV !== "production") { 67 | /* eslint-disable no-console */ 68 | if (typeof console !== "undefined" && console.warn) { 69 | console.warn("Oh noes! bad things happened."); 70 | } 71 | /* eslint-enable no-console */ 72 | } 73 | ``` 74 | 75 | Replace `console.warn` in the condtional + method call as appropriate. 76 | 77 | Breaking this down: 78 | 79 | * `process.env.NODE_ENV !== "production"` - This part removes all traces of 80 | the code in the production bundle, to save on file size. This _also_ means 81 | that no warnings will be displayed in production. 82 | * `typeof console !== "undefined" && console.METHOD` - A permissive check to 83 | make sure the `console` object exists and can use the appropriate `METHOD` - 84 | `warn`, `info`, etc. 85 | 86 | To signal production mode to the webpack build, declare the `NODE_ENV` variable: 87 | 88 | ```js 89 | new webpack.DefinePlugin({ 90 | "process.env.NODE_ENV": JSON.stringify("production") 91 | }) 92 | ``` 93 | 94 | Unfortunately, we need to do _all_ of this every time to have Uglify properly 95 | drop the code, but with this trick, the production bundle has no change in code 96 | size. 97 | 98 | 99 | ## Quality 100 | 101 | ### In Development 102 | 103 | During development, you are expected to be running either: 104 | 105 | ```sh 106 | $ builder run dev 107 | ``` 108 | 109 | to build the lib and test files. With these running, you can run the faster 110 | 111 | ```sh 112 | $ builder run check-dev 113 | ``` 114 | 115 | Command. It is comprised of: 116 | 117 | ```sh 118 | $ builder run lint 119 | $ builder run test-dev 120 | ``` 121 | 122 | Note that the tests here are not instrumented for code coverage and are thus 123 | more development / debugging friendly. 124 | 125 | ### Continuous Integration 126 | 127 | CI doesn't have source / test file watchers, so has to _build_ the test files 128 | via the commands: 129 | 130 | ```sh 131 | $ builder run check # PhantomJS only 132 | $ builder run check-cov # (OR) PhantomJS w/ coverage 133 | $ builder run check-ci # (OR) PhantomJS,Firefox + coverage - available on Travis. 134 | ``` 135 | 136 | Which is currently comprised of: 137 | 138 | ```sh 139 | $ builder run lint # AND ... 140 | 141 | $ builder run test # PhantomJS only 142 | $ builder run test-cov # (OR) PhantomJS w/ coverage 143 | $ builder run test-ci # (OR) PhantomJS,Firefox + coverage 144 | ``` 145 | 146 | Note that `(test|check)-(cov|ci)` run code coverage and thus the 147 | test code may be harder to debug because it is instrumented. 148 | 149 | ### Client Tests 150 | 151 | The client tests rely on webpack dev server to create and serve the bundle 152 | of the app/test code at: http://127.0.0.1:3001/assets/main.js which is done 153 | with the task `builder run server-test` (part of `npm dev`). 154 | 155 | #### Code Coverage 156 | 157 | Code coverage reports are outputted to: 158 | 159 | ``` 160 | coverage/ 161 | client/ 162 | BROWSER_STRING/ 163 | lcov-report/index.html # Viewable web report. 164 | ``` 165 | 166 | ## Releases 167 | 168 | **IMPORTANT - NPM**: To correctly run `preversion` your first step is to make 169 | sure that you have a very modern `npm` binary: 170 | 171 | ```sh 172 | $ npm install -g npm 173 | ``` 174 | 175 | Built files in `dist/` should **not** be committeed during development or PRs. 176 | Instead we _only_ build and commit them for published, tagged releases. So 177 | the basic workflow is: 178 | 179 | ```sh 180 | # Make sure you have a clean, up-to-date `master` 181 | $ git pull 182 | $ git status # (should be no changes) 183 | 184 | # Choose a semantic update for the new version. 185 | # If you're unsure, read about semantic versioning at http://semver.org/ 186 | $ npm version major|minor|patch -m "Version %s - INSERT_REASONS" 187 | 188 | # ... the `dist/` and `lib/` directories are now built, `package.json` is 189 | # updated, and the appropriate files are committed to git (but unpushed). 190 | # 191 | # *Note*: `lib/` is uncommitted, but built and must be present to push to npm. 192 | 193 | # Check that everything looks good in last commit and push. 194 | $ git diff HEAD^ HEAD 195 | $ git push && git push --tags 196 | # ... the project is now pushed to GitHub and available to `bower`. 197 | 198 | # And finally publish to `npm`! 199 | $ npm publish 200 | ``` 201 | 202 | And you've published! 203 | 204 | For additional information on the underlying NPM technologies and approaches, 205 | please review: 206 | 207 | * [`npm version`](https://docs.npmjs.com/cli/version): Runs verification, 208 | builds `dist/` and `lib/` via `scripts` commands. 209 | * Our scripts also run the applicable `git` commands, so be very careful 210 | when running out `version` commands. 211 | * [`npm publish`](https://docs.npmjs.com/cli/publish): Uploads to NPM. 212 | * **NOTE**: We don't _build_ in `prepublish` because of the 213 | [`npm install` runs `npm prepublish` bug](https://github.com/npm/npm/issues/3059) 214 | 215 | [builder]: https://github.com/FormidableLabs/builder -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Formidable Labs 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. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![Travis Status][trav_img]][trav_site] 2 | 3 | React Component Boilerplate 4 | =========================== 5 | 6 | Formidable Labs flavored React component boilerplate. This is a set of opinions 7 | on how to start a React component. 8 | 9 | ## The Generator 10 | 11 | We expect these opinions to change *often*. We've written a yeoman generator to 12 | pull down the freshest copy of this repo whenever you use it. It just copies 13 | this repo so you don't have to. Check it out 14 | [here](https://github.com/FormidableLabs/generator-formidable-react-component) 15 | 16 | To create a new project based on this boilerplate: 17 | 18 | ```sh 19 | $ npm install -g yo 20 | $ npm install -g generator-formidable-react-component 21 | $ yo formidable-react-component 22 | ``` 23 | 24 | The generator replaces `formidable-react-component-boilerplate` and 25 | `FormidableReactComponentBoilerplate` across this repo with names specific to 26 | your new project. `src/components/formidable-react-component-boilerplate.jsx` 27 | and `test/client/spec/components/formidable-react-component-boilerplate.spec.jsx` 28 | are also renamed, and a fresh `README.md` is created. 29 | 30 | ## Development 31 | 32 | Please see [DEVELOPMENT](DEVELOPMENT.md) 33 | 34 | ## Contributing 35 | 36 | Please see [CONTRIBUTING](CONTRIBUTING.md) 37 | 38 | [trav_img]: https://api.travis-ci.org/FormidableLabs/formidable-react-component-boilerplate.svg 39 | [trav_site]: https://travis-ci.org/FormidableLabs/formidable-react-component-boilerplate 40 | -------------------------------------------------------------------------------- /demo/app.jsx: -------------------------------------------------------------------------------- 1 | /*global document:false*/ 2 | import React from "react"; 3 | import ReactDOM from "react-dom"; 4 | import {FormidableReactComponentBoilerplate} from "../src/index"; 5 | 6 | class App extends React.Component { 7 | render() { 8 | return ( 9 |
10 | 11 |
12 | ); 13 | } 14 | } 15 | 16 | const content = document.getElementById("content"); 17 | 18 | ReactDOM.render(, content); 19 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | Demo 10 | 11 | 12 | 34 | 35 | 36 | 39 |
40 | 44 | 45 | 46 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /dist/formidable-react-component-boilerplate.js: -------------------------------------------------------------------------------- 1 | (function webpackUniversalModuleDefinition(root, factory) { 2 | if(typeof exports === 'object' && typeof module === 'object') 3 | module.exports = factory(require("react")); 4 | else if(typeof define === 'function' && define.amd) 5 | define(["react"], factory); 6 | else if(typeof exports === 'object') 7 | exports["FormidableReactComponentBoilerplate"] = factory(require("react")); 8 | else 9 | root["FormidableReactComponentBoilerplate"] = factory(root["React"]); 10 | })(this, function(__WEBPACK_EXTERNAL_MODULE_2__) { 11 | return /******/ (function(modules) { // webpackBootstrap 12 | /******/ // The module cache 13 | /******/ var installedModules = {}; 14 | /******/ 15 | /******/ // The require function 16 | /******/ function __webpack_require__(moduleId) { 17 | /******/ 18 | /******/ // Check if module is in cache 19 | /******/ if(installedModules[moduleId]) 20 | /******/ return installedModules[moduleId].exports; 21 | /******/ 22 | /******/ // Create a new module (and put it into the cache) 23 | /******/ var module = installedModules[moduleId] = { 24 | /******/ exports: {}, 25 | /******/ id: moduleId, 26 | /******/ loaded: false 27 | /******/ }; 28 | /******/ 29 | /******/ // Execute the module function 30 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 31 | /******/ 32 | /******/ // Flag the module as loaded 33 | /******/ module.loaded = true; 34 | /******/ 35 | /******/ // Return the exports of the module 36 | /******/ return module.exports; 37 | /******/ } 38 | /******/ 39 | /******/ 40 | /******/ // expose the modules object (__webpack_modules__) 41 | /******/ __webpack_require__.m = modules; 42 | /******/ 43 | /******/ // expose the module cache 44 | /******/ __webpack_require__.c = installedModules; 45 | /******/ 46 | /******/ // __webpack_public_path__ 47 | /******/ __webpack_require__.p = ""; 48 | /******/ 49 | /******/ // Load entry module and return exports 50 | /******/ return __webpack_require__(0); 51 | /******/ }) 52 | /************************************************************************/ 53 | /******/ ([ 54 | /* 0 */ 55 | /***/ function(module, exports, __webpack_require__) { 56 | 57 | "use strict"; 58 | 59 | module.exports = { 60 | FormidableReactComponentBoilerplate: __webpack_require__(1) 61 | }; 62 | 63 | /***/ }, 64 | /* 1 */ 65 | /***/ function(module, exports, __webpack_require__) { 66 | 67 | "use strict"; 68 | 69 | Object.defineProperty(exports, "__esModule", { 70 | value: true 71 | }); 72 | 73 | var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); 74 | 75 | var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } }; 76 | 77 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } 78 | 79 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 80 | 81 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 82 | 83 | var _react = __webpack_require__(2); 84 | 85 | var _react2 = _interopRequireDefault(_react); 86 | 87 | var FormidableReactComponentBoilerplate = (function (_React$Component) { 88 | _inherits(FormidableReactComponentBoilerplate, _React$Component); 89 | 90 | function FormidableReactComponentBoilerplate() { 91 | _classCallCheck(this, FormidableReactComponentBoilerplate); 92 | 93 | _get(Object.getPrototypeOf(FormidableReactComponentBoilerplate.prototype), "constructor", this).apply(this, arguments); 94 | } 95 | 96 | _createClass(FormidableReactComponentBoilerplate, [{ 97 | key: "render", 98 | value: function render() { 99 | return _react2["default"].createElement( 100 | "div", 101 | null, 102 | "Edit me!" 103 | ); 104 | } 105 | }]); 106 | 107 | return FormidableReactComponentBoilerplate; 108 | })(_react2["default"].Component); 109 | 110 | exports["default"] = FormidableReactComponentBoilerplate; 111 | module.exports = exports["default"]; 112 | 113 | /***/ }, 114 | /* 2 */ 115 | /***/ function(module, exports) { 116 | 117 | module.exports = __WEBPACK_EXTERNAL_MODULE_2__; 118 | 119 | /***/ } 120 | /******/ ]) 121 | }); 122 | ; 123 | //# sourceMappingURL=formidable-react-component-boilerplate.js.map -------------------------------------------------------------------------------- /dist/formidable-react-component-boilerplate.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///webpack/universalModuleDefinition","webpack:///webpack/bootstrap c6f310cc98ed888f6225","webpack:///./src/index.js","webpack:///./src/components/formidable-react-component-boilerplate.jsx","webpack:///external {\"root\":\"React\",\"commonjs2\":\"react\",\"commonjs\":\"react\",\"amd\":\"react\"}"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD,O;ACVA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA,uBAAe;AACf;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;;;;;;;;ACtCA,OAAM,CAAC,OAAO,GAAG;AACf,sCAAmC,EACjC,mBAAO,CAAC,CAAqD,CAAC;EACjE,C;;;;;;;;;;;;;;;;;;;;;;kCCHiB,CAAO;;;;KAEJ,mCAAmC;aAAnC,mCAAmC;;YAAnC,mCAAmC;2BAAnC,mCAAmC;;gCAAnC,mCAAmC;;;gBAAnC,mCAAmC;;YAChD,kBAAG;AACP,cAAO;;;;QAAmB,CAAC;MAC5B;;;UAHkB,mCAAmC;IAAS,mBAAM,SAAS;;sBAA3D,mCAAmC;;;;;;;ACFxD,gD","file":"formidable-react-component-boilerplate.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"react\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([\"react\"], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"FormidableReactComponentBoilerplate\"] = factory(require(\"react\"));\n\telse\n\t\troot[\"FormidableReactComponentBoilerplate\"] = factory(root[\"React\"]);\n})(this, function(__WEBPACK_EXTERNAL_MODULE_2__) {\nreturn \n\n\n/** WEBPACK FOOTER **\n ** webpack/universalModuleDefinition\n **/"," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\texports: {},\n \t\t\tid: moduleId,\n \t\t\tloaded: false\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.loaded = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(0);\n\n\n\n/** WEBPACK FOOTER **\n ** webpack/bootstrap c6f310cc98ed888f6225\n **/","module.exports = {\n FormidableReactComponentBoilerplate:\n require(\"./components/formidable-react-component-boilerplate\")\n};\n\n\n\n/** WEBPACK FOOTER **\n ** ./src/index.js\n **/","import React from \"react\";\n\nexport default class FormidableReactComponentBoilerplate extends React.Component {\n render() {\n return
Edit me!
;\n }\n}\n\n\n\n/** WEBPACK FOOTER **\n ** ./src/components/formidable-react-component-boilerplate.jsx\n **/","module.exports = __WEBPACK_EXTERNAL_MODULE_2__;\n\n\n/*****************\n ** WEBPACK FOOTER\n ** external {\"root\":\"React\",\"commonjs2\":\"react\",\"commonjs\":\"react\",\"amd\":\"react\"}\n ** module id = 2\n ** module chunks = 0\n **/"],"sourceRoot":""} -------------------------------------------------------------------------------- /dist/formidable-react-component-boilerplate.min.js: -------------------------------------------------------------------------------- 1 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.FormidableReactComponentBoilerplate=t(require("react")):e.FormidableReactComponentBoilerplate=t(e.React)}(this,function(e){return function(e){function t(o){if(r[o])return r[o].exports;var n=r[o]={exports:{},id:o,loaded:!1};return e[o].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){"use strict";e.exports={FormidableReactComponentBoilerplate:r(1)}},function(e,t,r){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var i=function(){function e(e,t){for(var r=0;rEdit me!;\n }\n}\n\n\n\n/** WEBPACK FOOTER **\n ** ./src/components/formidable-react-component-boilerplate.jsx\n **/","module.exports = __WEBPACK_EXTERNAL_MODULE_2__;\n\n\n/*****************\n ** WEBPACK FOOTER\n ** external {\"root\":\"React\",\"commonjs2\":\"react\",\"commonjs\":\"react\",\"amd\":\"react\"}\n ** module id = 2\n ** module chunks = 0\n **/"],"sourceRoot":""} -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "formidable-react-component-boilerplate", 3 | "version": "0.2.0", 4 | "description": "react component boilerplate", 5 | "main": "lib/index.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/FormidableLabs/formidable-react-component-boilerplate.git" 9 | }, 10 | "license": "MIT", 11 | "bugs": { 12 | "url": "https://github.com/FormidableLabs/formidable-react-component-boilerplate/issues" 13 | }, 14 | "homepage": "https://github.com/FormidableLabs/formidable-react-component-boilerplate", 15 | "scripts": { 16 | "postinstall": "builder run npm:postinstall", 17 | "preversion": "builder run npm:preversion", 18 | "version": "builder run npm:version", 19 | "test": "builder run npm:test" 20 | }, 21 | "dependencies": { 22 | "builder": "~2.2.0", 23 | "builder-react-component": "^0.1.2" 24 | }, 25 | "devDependencies": { 26 | "builder-react-component-dev": "^0.1.2", 27 | "chai": "^3.2.0", 28 | "mocha": "^2.3.3", 29 | "react": "^0.14.0", 30 | "react-addons-test-utils": "^0.14.0", 31 | "react-dom": "^0.14.0", 32 | "sinon": "^1.17.2", 33 | "sinon-chai": "^2.8.0" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/components/formidable-react-component-boilerplate.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default class FormidableReactComponentBoilerplate extends React.Component { 4 | render() { 5 | return
Edit me!
; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | FormidableReactComponentBoilerplate: 3 | require("./components/formidable-react-component-boilerplate") 4 | }; 5 | -------------------------------------------------------------------------------- /test/client/main.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Test setup for client-side tests. 3 | * 4 | * Intended for: 5 | * - Karma tests: `builder run test-frontend` 6 | * - Browser tests: `http://localhost:3000/test/client/test.html` 7 | */ 8 | /*globals window:false*/ 9 | const chai = require("chai"); 10 | const sinonChai = require("sinon-chai"); 11 | 12 | // -------------------------------------------------------------------------- 13 | // Chai / Sinon / Mocha configuration. 14 | // -------------------------------------------------------------------------- 15 | // Exports 16 | window.expect = chai.expect; 17 | 18 | // Plugins 19 | chai.use(sinonChai); 20 | 21 | // Mocha (part of static include). 22 | window.mocha.setup({ 23 | ui: "bdd", 24 | bail: false 25 | }); 26 | 27 | // -------------------------------------------------------------------------- 28 | // Bootstrap 29 | // -------------------------------------------------------------------------- 30 | // Use webpack to include all app code _except_ the entry point so we can get 31 | // code coverage in the bundle, whether tested or not. 32 | const srcReq = require.context("src", true, /\.jsx?$/); 33 | srcReq.keys().map(srcReq); 34 | 35 | // Use webpack to infer and `require` tests automatically. 36 | const testsReq = require.context(".", true, /\.spec.jsx?$/); 37 | testsReq.keys().map(testsReq); 38 | 39 | // Only start mocha in browser. 40 | if (!window.__karma__) { 41 | window.mocha.run(); 42 | } 43 | -------------------------------------------------------------------------------- /test/client/spec/components/formidable-react-component-boilerplate.spec.jsx: -------------------------------------------------------------------------------- 1 | /** 2 | * Client tests 3 | */ 4 | import React from "react"; 5 | import Component from "src/components/formidable-react-component-boilerplate"; 6 | // Use `TestUtils` to inject into DOM, simulate events, etc. 7 | // See: https://facebook.github.io/react/docs/test-utils.html 8 | import TestUtils from "react-addons-test-utils"; 9 | 10 | describe("components/formidable-react-component-boilerplate", () => { 11 | 12 | it("has expected content with deep render", () => { 13 | // This is a "deep" render that renders children + all into an actual 14 | // browser DOM node. 15 | // 16 | // https://facebook.github.io/react/docs/test-utils.html#renderintodocument 17 | const rendered = TestUtils.renderIntoDocument(); 18 | 19 | // This is a real DOM node to assert on. 20 | const divNode = TestUtils 21 | .findRenderedDOMComponentWithTag(rendered, "div"); 22 | 23 | expect(divNode).to.have.property("innerHTML", "Edit me!"); 24 | }); 25 | 26 | it("has expected content with shallow render", () => { 27 | // This is a "shallow" render that renders only the current component 28 | // without using the actual DOM. 29 | // 30 | // https://facebook.github.io/react/docs/test-utils.html#shallow-rendering 31 | const renderer = TestUtils.createRenderer(); 32 | renderer.render(); 33 | const output = renderer.getRenderOutput(); 34 | 35 | expect(output.type).to.equal("div"); 36 | expect(output.props.children).to.contain("Edit me"); 37 | }); 38 | }); 39 | -------------------------------------------------------------------------------- /test/client/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Frontend Tests 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | --------------------------------------------------------------------------------