├── .babelrc
├── .eslintrc
├── .gitignore
├── .travis.yml
├── CHANGES.md
├── CONTRIBUTING.md
├── LICENSE.md
├── README.md
├── karma.conf.js
├── modules
    ├── Clone.js
    └── __tests__
    │   ├── .eslintrc
    │   └── Clone-test.js
├── package.json
├── scripts
    ├── build.js
    └── release.sh
├── tests.webpack.js
└── webpack.config.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "stage": 0,
3 |   "loose": "all",
4 |   "plugins": [
5 |     "dev-expression"
6 |   ]
7 | }
8 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "rackt",
 3 |   "globals": {
 4 |     "__DEV__": true
 5 |   },
 6 |   "rules": {
 7 |     "react/jsx-uses-react": 1,
 8 |     "react/jsx-no-undef": 2,
 9 |     "react/wrap-multilines": 2
10 |   },
11 |   "plugins": [
12 |     "react"
13 |   ]
14 | }
15 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | es6
 2 | lib
 3 | umd
 4 | examples/**/*-bundle.js
 5 | node_modules
 6 | npm-debug.log
 7 | website/index.html
 8 | website/tags/*
 9 | coverage
10 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | sudo: false
 2 | language: node_js
 3 | node_js:
 4 | - stable
 5 | env:
 6 | -
 7 | - SKIP_BC=1 FAIL_ON_WARNINGS=1
 8 | cache:
 9 |   directories:
10 |   - node_modules
11 | before_install:
12 |   - export CHROME_BIN=chromium-browser
13 |   - export DISPLAY=:99.0
14 |   - sh -e /etc/init.d/xvfb start
15 | after_success:
16 | - cat ./coverage/lcov.info | ./node_modules/codecov.io/bin/codecov.io.js
17 | - cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js
18 | branches:
19 |   only:
20 |   - master
21 | 


--------------------------------------------------------------------------------
/CHANGES.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ryanflorence/react-clone/8884fe140b5a89815c4123d531c9350b80445384/CHANGES.md


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | ## Tests
 2 | 
 3 | All commits that fix bugs or add features need a test.
 4 | 
 5 | `<blink>` Do not merge code without tests.`</blink>`
 6 | 
 7 | ## Changelog
 8 | 
 9 | All commits that change or add to the API must be done in a pull request
10 | that also:
11 | 
12 | - Add an entry to `CHANGES.md` with clear steps for updating code for
13 |   changed or removed API.
14 | - Updates examples
15 | - Updates the docs
16 | 
17 | ### Development
18 | 
19 | - `npm test` will fire up a karma test runner and watch for changes
20 | 
21 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 Ryan Florence
 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 | React Clone
 2 | ===========
 3 | 
 4 | Declarative element cloning for React.
 5 | 
 6 | ### Installation
 7 | 
 8 | Using [npm](https://www.npmjs.com/):
 9 | 
10 |     $ npm install react-clone
11 | 
12 | Then with a module bundler like [webpack](https://webpack.github.io/) that supports either CommonJS or ES2015 modules, use as you would anything else:
13 | 
14 | ```js
15 | // using an ES6 transpiler, like babel
16 | import Clone from 'react-clone'
17 | 
18 | // not using an ES6 transpiler
19 | var Clone = require('react-clone').default
20 | ```
21 | 
22 | The UMD build is also available on [npmcdn](https://npmcdn.com). You can find the library on `window.ReactClone`.
23 | 
24 | ```html
25 | <script src="https://npmcdn.com/react-clone/umd/ReactClone.min.js"></script>
26 | ```
27 | 
28 | 
29 | ### Usage
30 | 
31 | ```js
32 | const button = <button/>
33 | 
34 | // instead of this:
35 | <div>
36 |   {React.cloneElement(button, { onClick: handleClick })}
37 | </div>
38 | 
39 | // you can keep it declarative like this:
40 | <div>
41 |   <Clone element={button} onClick={handleClick}/>
42 | </div>
43 | 
44 | // it's mostly useful for passing extra props to children
45 | // like animating the children of a React Router
46 | // route component's children (gotta add that key)
47 | <Clone
48 |   element={this.props.children}
49 |   key={location.pathname}
50 | />
51 | 
52 | // or iterating over children
53 | React.Children.map(this.props.children, (child, index) => {
54 |   return <Clone element={child} index={index}/>
55 | })
56 | ```
57 | 
58 | 


--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
  1 | /*eslint no-console: 0*/
  2 | var webpack = require('webpack')
  3 | var path = require('path')
  4 | 
  5 | module.exports = function (config) {
  6 |   if (process.env.RELEASE)
  7 |     config.singleRun = true
  8 | 
  9 |   // Browsers to run on BrowserStack
 10 |   var customLaunchers = {
 11 |     BS_Chrome: {
 12 |       base: 'BrowserStack',
 13 |       os: 'Windows',
 14 |       os_version: '10',
 15 |       browser: 'chrome',
 16 |       browser_version: '47.0'
 17 |     },
 18 |     BS_Firefox: {
 19 |       base: 'BrowserStack',
 20 |       os: 'Windows',
 21 |       os_version: '10',
 22 |       browser: 'firefox',
 23 |       browser_version: '43.0'
 24 |     },
 25 |     BS_Safari: {
 26 |       base: 'BrowserStack',
 27 |       os: 'OS X',
 28 |       os_version: 'El Capitan',
 29 |       browser: 'safari',
 30 |       browser_version: '9.0'
 31 |     },
 32 |     BS_MobileSafari: {
 33 |       base: 'BrowserStack',
 34 |       os: 'ios',
 35 |       os_version: '8.3',
 36 |       browser: 'iphone',
 37 |       real_mobile: false
 38 |     },
 39 |     BS_MobileSafari: {
 40 |       base: 'BrowserStack',
 41 |       os: 'ios',
 42 |       os_version: '9.1',
 43 |       browser: 'iphone',
 44 |       real_mobile: false
 45 |     },
 46 |     BS_InternetExplorer10: {
 47 |       base: 'BrowserStack',
 48 |       os: 'Windows',
 49 |       os_version: '8',
 50 |       browser: 'ie',
 51 |       browser_version: '10.0'
 52 |     },
 53 |     BS_InternetExplorer11: {
 54 |       base: 'BrowserStack',
 55 |       os: 'Windows',
 56 |       os_version: '10',
 57 |       browser: 'ie',
 58 |       browser_version: '11.0'
 59 |     },
 60 |     ChromeCi: {
 61 |       base: 'Chrome',
 62 |       flags: [ '--no-sandbox' ]
 63 |     }
 64 |   }
 65 | 
 66 |   var isCi = process.env.CONTINUOUS_INTEGRATION === 'true'
 67 |   var runCoverage = process.env.COVERAGE === 'true' || isCi
 68 | 
 69 |   var coverageLoaders = []
 70 |   var coverageReporters = []
 71 | 
 72 |   if (runCoverage) {
 73 |     coverageLoaders.push({
 74 |       test: /\.js$/,
 75 |       include: path.resolve('modules/'),
 76 |       exclude: /__tests__/,
 77 |       loader: 'isparta'
 78 |     })
 79 | 
 80 |     coverageReporters.push('coverage')
 81 |   }
 82 | 
 83 |   config.set({
 84 |     customLaunchers: customLaunchers,
 85 | 
 86 |     browsers: [ 'Chrome' ],
 87 |     frameworks: [ 'mocha' ],
 88 |     reporters: [ 'mocha' ].concat(coverageReporters),
 89 | 
 90 |     files: [
 91 |       'tests.webpack.js'
 92 |     ],
 93 | 
 94 |     preprocessors: {
 95 |       'tests.webpack.js': [ 'webpack', 'sourcemap' ]
 96 |     },
 97 | 
 98 |     webpack: {
 99 |       devtool: 'inline-source-map',
100 |       module: {
101 |         loaders: [
102 |           { test: /\.js$/, exclude: /node_modules/, loader: 'babel' }
103 |         ].concat(coverageLoaders)
104 |       },
105 |       plugins: [
106 |         new webpack.DefinePlugin({
107 |           'process.env.NODE_ENV': JSON.stringify('test'),
108 |           'process.env.SKIP_BC': JSON.stringify(process.env.SKIP_BC || false),
109 |           'process.env.FAIL_ON_WARNINGS': JSON.stringify(process.env.FAIL_ON_WARNINGS || false)
110 |         })
111 |       ]
112 |     },
113 | 
114 |     webpackServer: {
115 |       noInfo: true
116 |     },
117 | 
118 |     coverageReporter: {
119 |       reporters: [
120 |         { type: 'html', subdir: 'html' },
121 |         { type: 'lcovonly', subdir: '.' }
122 |       ]
123 |     }
124 |   })
125 | 
126 |   if (process.env.USE_CLOUD) {
127 |     config.browsers = Object.keys(customLaunchers)
128 |     config.reporters[0] = 'dots'
129 |     config.browserDisconnectTimeout = 10000
130 |     config.browserDisconnectTolerance = 3
131 |     config.browserNoActivityTimeout = 30000
132 |     config.captureTimeout = 120000
133 | 
134 |     if (process.env.TRAVIS) {
135 |       var buildLabel = 'TRAVIS #' + process.env.TRAVIS_BUILD_NUMBER + ' (' + process.env.TRAVIS_BUILD_ID + ')'
136 | 
137 |       config.browsers.unshift('ChromeCi')
138 | 
139 |       config.browserStack = {
140 |         username: process.env.BROWSER_STACK_USERNAME,
141 |         accessKey: process.env.BROWSER_STACK_ACCESS_KEY,
142 |         pollingTimeout: 10000,
143 |         startTunnel: true,
144 |         project: 'react-router',
145 |         build: buildLabel,
146 |         name: process.env.TRAVIS_JOB_NUMBER
147 |       }
148 | 
149 |       config.singleRun = true
150 |     } else {
151 |       config.browserStack = {
152 |         username: process.env.BROWSER_STACK_USERNAME,
153 |         accessKey: process.env.BROWSER_STACK_ACCESS_KEY,
154 |         pollingTimeout: 10000,
155 |         startTunnel: true
156 |       }
157 |     }
158 |   }
159 | }
160 | 
161 | console.log()
162 | console.log('===')
163 | if (process.env.SKIP_BC) {
164 |   console.warn('`SKIP_BC=1` detected: skipping backwards compatibility tests')
165 | } else {
166 |   console.log('`SKIP_BC=1 npm run *` to skip backwards compatibility tests.')
167 | }
168 | 
169 | if (process.env.FAIL_ON_WARNINGS) {
170 |   console.warn('`FAIL_ON_WARNINGS=1` detected: console.error will now fail tests.')
171 | } else {
172 |   console.log('`FAIL_ON_WARNINGS=1 npm run *` to cause console warnings to throw errors.')
173 | }
174 | console.log('===')
175 | console.log()
176 | 


--------------------------------------------------------------------------------
/modules/Clone.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | const Clone = React.createClass({
 4 |   propTypes: {
 5 |     element: React.PropTypes.node.isRequired
 6 |   },
 7 | 
 8 |   render() {
 9 |     const { element, ...props } = this.props
10 |     return React.cloneElement(element, props)
11 |   }
12 | })
13 | 
14 | export default Clone
15 | 
16 | 


--------------------------------------------------------------------------------
/modules/__tests__/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "env": {
 3 |     "mocha": true
 4 |   },
 5 |   "rules": {
 6 |     "react/prop-types": 0
 7 |   }
 8 | }
 9 | 
10 | 


--------------------------------------------------------------------------------
/modules/__tests__/Clone-test.js:
--------------------------------------------------------------------------------
 1 | import expect from 'expect'
 2 | import React from 'react'
 3 | import { renderToString } from 'react-dom/server'
 4 | import Clone from '../Clone'
 5 | 
 6 | describe('Clone', () => {
 7 |   it('clones and passes new props', () => {
 8 |     const el = <div/>
 9 |     const string = renderToString(
10 |       <Clone
11 |         element={el}
12 |         className="extraProp"
13 |       />
14 |     )
15 |     expect(string).toContain('extraProp')
16 |   })
17 | })
18 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-clone",
 3 |   "version": "1.0.0",
 4 |   "description": "Declarative element cloning for React",
 5 |   "files": [
 6 |     "*.md",
 7 |     "docs",
 8 |     "es6",
 9 |     "lib",
10 |     "modules/*.js",
11 |     "npm-scripts",
12 |     "umd"
13 |   ],
14 |   "main": "lib/Clone",
15 |   "jsnext:main": "es6/Clone",
16 |   "repository": {
17 |     "type": "git",
18 |     "url": "https://github.com/ryanflorence/react-clone.git"
19 |   },
20 |   "homepage": "https://github.com/ryanflorence/react-clone",
21 |   "bugs": "https://github.com/ryanflorence/react-clone/issues",
22 |   "scripts": {
23 |     "build": "npm run build-cjs && npm run build-es6",
24 |     "build-cjs": "rimraf lib && babel ./modules -d lib --ignore '__tests__'",
25 |     "build-es6": "rimraf es6 && babel ./modules -d es6 --blacklist=es6.modules --ignore '__tests__'",
26 |     "build-umd": "NODE_ENV=production webpack modules/Clone.js umd/ReactClone.js",
27 |     "build-min": "NODE_ENV=production webpack -p modules/Clone.js umd/ReactClone.min.js",
28 |     "lint": "eslint modules examples",
29 |     "test": "npm run lint && karma start"
30 |   },
31 |   "authors": [
32 |     "Ryan Florence"
33 |   ],
34 |   "license": "MIT",
35 |   "devDependencies": {
36 |     "babel": "^5.4.7",
37 |     "babel-core": "^5.4.7",
38 |     "babel-eslint": "^4.1.6",
39 |     "babel-loader": "^5.0.0",
40 |     "babel-plugin-dev-expression": "^0.1.0",
41 |     "eslint": "^1.7.3",
42 |     "eslint-config-rackt": "^1.1.0",
43 |     "eslint-plugin-react": "^3.6.3",
44 |     "expect": "^1.12.0",
45 |     "gzip-size": "^3.0.0",
46 |     "isparta-loader": "^1.0.0",
47 |     "karma": "^0.13.13",
48 |     "karma-browserstack-launcher": "^0.1.4",
49 |     "karma-chrome-launcher": "^0.2.0",
50 |     "karma-mocha": "^0.2.0",
51 |     "karma-mocha-reporter": "^1.1.1",
52 |     "karma-sourcemap-loader": "^0.3.5",
53 |     "karma-webpack": "^1.7.0",
54 |     "mocha": "^2.0.1",
55 |     "pretty-bytes": "^2.0.1",
56 |     "react": "^0.14.0",
57 |     "react-addons-test-utils": "0.14.0",
58 |     "react-dom": "^0.14.0",
59 |     "rimraf": "^2.4.3",
60 |     "webpack": "^1.4.13"
61 |   },
62 |   "tags": [
63 |     "react",
64 |     "title"
65 |   ],
66 |   "keywords": [
67 |     "react",
68 |     "clone"
69 |   ]
70 | }
71 | 


--------------------------------------------------------------------------------
/scripts/build.js:
--------------------------------------------------------------------------------
 1 | var execSync = require('child_process').execSync
 2 | var readFileSync = require('fs').readFileSync
 3 | var prettyBytes = require('pretty-bytes')
 4 | var gzipSize = require('gzip-size')
 5 | 
 6 | function exec(command) {
 7 |   execSync(command, { stdio: [ 0, 1, 2 ] })
 8 | }
 9 | 
10 | exec('npm run build')
11 | exec('npm run build-umd')
12 | exec('npm run build-min')
13 | 
14 | console.log(
15 |   '\ngzipped, the UMD build is ' + prettyBytes(
16 |     gzipSize.sync(readFileSync('umd/ReactClone.min.js'))
17 |   )
18 | )
19 | 


--------------------------------------------------------------------------------
/scripts/release.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash -e
 2 | export RELEASE=1
 3 | 
 4 | if ! [ -e scripts/release.sh ]; then
 5 |   echo >&2 "Please run scripts/release.sh from the repo root"
 6 |   exit 1
 7 | fi
 8 | 
 9 | update_version() {
10 |   echo "$(node -p "p=require('./${1}');p.version='${2}';JSON.stringify(p,null,2)")" > $1
11 |   echo "Updated ${1} version to ${2}"
12 | }
13 | 
14 | validate_semver() {
15 |   if ! [[ $1 =~ ^[0-9]\.[0-9]+\.[0-9](-.+)? ]]; then
16 |     echo >&2 "Version $1 is not valid! It must be a valid semver string like 1.0.2 or 2.3.0-beta.1"
17 |     exit 1
18 |   fi
19 | }
20 | 
21 | current_version=$(node -p "require('./package').version")
22 | 
23 | printf "Next version (current is $current_version)? "
24 | read next_version
25 | 
26 | validate_semver $next_version
27 | 
28 | next_ref="v$next_version"
29 | 
30 | npm test
31 | 
32 | update_version 'package.json' $next_version
33 | 
34 | git commit -am "Version $next_version"
35 | 
36 | # push first to make sure we're up-to-date
37 | git push origin master
38 | 
39 | git tag $next_ref
40 | git tag latest -f
41 | 
42 | git push origin $next_ref
43 | git push origin latest -f
44 | 
45 | node scripts/build.js
46 | 
47 | npm publish
48 | 
49 | 


--------------------------------------------------------------------------------
/tests.webpack.js:
--------------------------------------------------------------------------------
 1 | /*eslint no-console: 0*/
 2 | 
 3 | if (process.env.FAIL_ON_WARNINGS) {
 4 |   console.error = function (msg) {
 5 |     // grant me the serenity to accept the things I cannot change,
 6 |     if (msg.match(/Warning: the query argument to createHref is deprecated; use a location descriptor instead/))
 7 |       return
 8 |     else
 9 |       throw new Error(msg)
10 |   }
11 | }
12 | 
13 | const context = require.context('./modules', true, /-test\.js$/)
14 | 
15 | context.keys().forEach(key => {
16 |   if (process.env.SKIP_BC) {
17 |     if (!key.match(/_bc/)) {
18 |       context(key)
19 |     }
20 |   } else {
21 |     context(key)
22 |   }
23 | })
24 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var webpack = require('webpack')
 2 | 
 3 | module.exports = {
 4 | 
 5 |   output: {
 6 |     library: 'ReactClone',
 7 |     libraryTarget: 'umd'
 8 |   },
 9 | 
10 |   externals: [
11 |     {
12 |       react: {
13 |         root: 'React',
14 |         commonjs2: 'react',
15 |         commonjs: 'react',
16 |         amd: 'react'
17 |       }
18 |     }
19 |   ],
20 | 
21 |   module: {
22 |     loaders: [
23 |       { test: /\.js$/, exclude: /node_modules/, loader: 'babel' }
24 |     ]
25 |   },
26 | 
27 |   node: {
28 |     Buffer: false
29 |   },
30 | 
31 |   plugins: [
32 |     new webpack.optimize.OccurenceOrderPlugin(),
33 |     new webpack.DefinePlugin({
34 |       'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
35 |     })
36 |   ]
37 | 
38 | }
39 | 


--------------------------------------------------------------------------------