├── .eslintignore
├── .gitattributes
├── .prettierrc
├── codecov.yml
├── CHANGELOG.md
├── example
    ├── a.jsx
    ├── b.jsx
    ├── d.jsx
    ├── c.jsx
    ├── webpack.config.js
    └── app.jsx
├── .github
    ├── CODEOWNERS
    ├── PULL_REQUEST_TEMPLATE.md
    └── ISSUE_TEMPLATE.md
├── .gitignore
├── .editorconfig
├── .eslintrc.js
├── lib
    ├── unavailable.js
    ├── mixinReactProxy.js
    └── index.js
├── .babelrc
├── appveyor.yml
├── commitlint.config.js
├── LICENSE
├── package.json
├── README.md
└── .circleci
    └── config.yml


/.eslintignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | /dist


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | package-lock.json -diff
2 | * text=auto
3 | bin/* eol=lf


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "singleQuote": true,
3 |   "trailingComma": "es5",
4 |   "arrowParens": "always"
5 | }
6 | 


--------------------------------------------------------------------------------
/codecov.yml:
--------------------------------------------------------------------------------
 1 | codecov:
 2 |   branch: master
 3 | coverage:
 4 |   precision: 2
 5 |   round: down
 6 |   range: 70...100
 7 |   status:
 8 |     project: 'no'
 9 |     patch: 'yes'
10 | comment: 'off'
11 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Change Log
2 | 
3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
4 | 


--------------------------------------------------------------------------------
/example/a.jsx:
--------------------------------------------------------------------------------
 1 | /** @jsx React.DOM */
 2 | 
 3 | var React = require("react");
 4 | var A = React.createClass({
 5 | 	render: function() {
 6 | 		return <p>This is component A.</p>;
 7 | 	}
 8 | });
 9 | 
10 | module.exports = A;
11 | 


--------------------------------------------------------------------------------
/example/b.jsx:
--------------------------------------------------------------------------------
 1 | /** @jsx React.DOM */
 2 | 
 3 | var React = require("react");
 4 | var B = React.createClass({
 5 | 	render: function() {
 6 | 		return <p>This is component B.</p>;
 7 | 	}
 8 | });
 9 | 
10 | module.exports = B;
11 | 


--------------------------------------------------------------------------------
/example/d.jsx:
--------------------------------------------------------------------------------
 1 | /** @jsx React.DOM */
 2 | 
 3 | var React = require("react");
 4 | var D = React.createClass({
 5 | 	render: function() {
 6 | 		return <p>This is component D.</p>;
 7 | 	}
 8 | });
 9 | 
10 | module.exports = D;
11 | 


--------------------------------------------------------------------------------
/.github/CODEOWNERS:
--------------------------------------------------------------------------------
1 | # These are the default owners for everything in
2 | # webpack-contrib
3 | @webpack-contrib/org-maintainers
4 | 
5 | # Add repository specific users / groups
6 | # below here for libs that are not maintained by the org.
7 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | output
 3 | logs
 4 | *.log
 5 | npm-debug.log*
 6 | .eslintcache
 7 | /coverage
 8 | /dist
 9 | /local
10 | /reports
11 | /node_modules
12 | .DS_Store
13 | Thumbs.db
14 | .idea
15 | .vscode
16 | *.sublime-project
17 | *.sublime-workspace


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.md]
12 | insert_final_newline = false
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   plugins: ['prettier'],
 4 |   extends: ['@webpack-contrib/eslint-config-webpack'],
 5 |   rules: {
 6 |     'prettier/prettier': [
 7 |       'error',
 8 |       { singleQuote: true, trailingComma: 'es5', arrowParens: 'always' },
 9 |     ],
10 |   },
11 | };
12 | 


--------------------------------------------------------------------------------
/example/c.jsx:
--------------------------------------------------------------------------------
 1 | /** @jsx React.DOM */
 2 | 
 3 | var React = require("react");
 4 | var C = React.createClass({
 5 | 	mixins: [require("react/lib/LinkedStateMixin")],
 6 | 	getInitialState: function() {
 7 | 		return { text: "Text" };
 8 | 	},
 9 | 	render: function() {
10 | 		return (
11 | 			<div>
12 | 				<p>This is component C ({this.props.param}).</p>
13 | 				<input valueLink={this.linkState("text")} />
14 | 			</div>
15 | 		);
16 | 	}
17 | });
18 | 
19 | module.exports = C;
20 | 


--------------------------------------------------------------------------------
/example/webpack.config.js:
--------------------------------------------------------------------------------
 1 | // Run with "webpack-dev-server --hot --inline --colors"
 2 | 
 3 | var path = require("path");
 4 | var webpack = require("webpack");
 5 | 
 6 | module.exports = {
 7 | 	entry: "./app",
 8 | 	output: {
 9 | 		path: path.join(__dirname, "output"),
10 | 		filename: "bundle.js"
11 | 	},
12 | 	resolveLoader: {
13 | 		alias: {
14 | 			"react-proxy": path.join(__dirname, "..")
15 | 		}
16 | 	},
17 | 	resolve: {
18 | 		extensions: ["", ".jsx", ".js"]
19 | 	},
20 | 	module: {
21 | 		loaders: [
22 | 			{ test: /\.jsx$/, loader: "jsx-loader" }
23 | 		]
24 | 	}
25 | };
26 | 


--------------------------------------------------------------------------------
/lib/unavailable.js:
--------------------------------------------------------------------------------
 1 | module.exports = function loader() {};
 2 | module.exports.pitch = function pitch(/* remainingRequest */) {
 3 |   if (this.cacheable) {
 4 |     this.cacheable();
 5 |   }
 6 | 
 7 |   return [
 8 |     'var React = require("react");',
 9 |     'var desc = {',
10 |     '	loadComponent: function(callback) {}',
11 |     '};',
12 |     `var mixinReactProxy = require(${JSON.stringify(
13 |       require.resolve('./mixinReactProxy')
14 |     )});`,
15 |     'mixinReactProxy(React, desc);',
16 |     'module.exports = React.createClass(desc);',
17 |     'module.exports.Mixin = desc;',
18 |   ].join('\n');
19 | };
20 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     [
 4 |       "env",
 5 |       {
 6 |         "useBuiltIns": true,
 7 |         "targets": {
 8 |           "node": "6.9.0"
 9 |         },
10 |         "exclude": [
11 |           "transform-async-to-generator",
12 |           "transform-regenerator"
13 |         ]
14 |       }
15 |     ]
16 |   ],
17 |   "plugins": [
18 |     [
19 |       "transform-object-rest-spread",
20 |       {
21 |         "useBuiltIns": true
22 |       }
23 |     ]
24 |   ],
25 |   "env": {
26 |     "test": {
27 |       "presets": [
28 |         "env"
29 |       ],
30 |       "plugins": [
31 |         "transform-object-rest-spread"
32 |       ]
33 |     }
34 |   }
35 | }


--------------------------------------------------------------------------------
/appveyor.yml:
--------------------------------------------------------------------------------
 1 | branches:
 2 |   only:
 3 |     - master
 4 |     - next
 5 | init:
 6 |   - git config --global core.autocrlf input
 7 | environment:
 8 |   matrix:
 9 |     - nodejs_version: '8'
10 |       webpack_version: latest
11 |       job_part: test
12 |     - nodejs_version: '6'
13 |       webpack_version: latest
14 |       job_part: test
15 |     - nodejs_version: '8'
16 |       webpack_version: next
17 |       job_part: test
18 | build: 'off'
19 | matrix:
20 |   fast_finish: true
21 | install:
22 |   - ps: Install-Product node $env:nodejs_version x64
23 |   - npm i -g npm@latest
24 |   - npm install
25 | before_test:
26 |   - cmd: npm install webpack@%webpack_version%
27 | test_script:
28 |   - node --version
29 |   - npm --version
30 |   - cmd: npm run ci:%job_part%
31 | 


--------------------------------------------------------------------------------
/lib/mixinReactProxy.js:
--------------------------------------------------------------------------------
 1 | /* eslint no-param-reassign: off */
 2 | module.exports = function mixin(React, desc) {
 3 |   desc.displayName = 'ReactProxy';
 4 |   desc.render = function render() {
 5 |     const Component = this.state.component;
 6 |     if (Component) {
 7 |       return React.createElement(Component, this.props, this.props.children);
 8 |     } else if (this.renderUnavailable) {
 9 |       return this.renderUnavailable();
10 |     }
11 |     return null;
12 |   };
13 | 
14 |   desc.getInitialState = function getStat() {
15 |     return { component: this.loadComponent() };
16 |   };
17 | 
18 |   desc.componentDidMount = function didMount() {
19 |     if (!this.state.component) {
20 |       this.loadComponent((component) => {
21 |         if (this.isMounted()) {
22 |           this.setState({ component });
23 |         }
24 |       });
25 |     }
26 |   };
27 | };
28 | 


--------------------------------------------------------------------------------
/commitlint.config.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | const Configuration = {
 3 |   extends: ['@commitlint/config-angular'],
 4 | 
 5 |   rules: {
 6 |     'body-leading-blank': [1, 'always'],
 7 |     'footer-leading-blank': [1, 'always'],
 8 |     'header-max-length': [2, 'always', 72],
 9 |     'scope-case': [2, 'always', 'lower-case'],
10 |     'subject-case': [2, 'never', ['start-case', 'pascal-case', 'upper-case']],
11 |     'subject-empty': [2, 'never'],
12 |     'subject-full-stop': [2, 'never', '.'],
13 |     'type-case': [2, 'always', 'lower-case'],
14 |     'type-empty': [2, 'never'],
15 |     'type-enum': [2, 'always', [
16 |       'build',
17 |       'chore',
18 |       'ci',
19 |       'docs',
20 |       'feat',
21 |       'fix',
22 |       'perf',
23 |       'refactor',
24 |       'revert',
25 |       'style',
26 |       'test',
27 |     ]
28 |     ],
29 |   },
30 | };
31 | 
32 | module.exports = Configuration;
33 | 


--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
 1 | <!--
 2 |   HOLY CRAP a Pull Request. We ❤️ those!
 3 | 
 4 |   If you remove or skip this template, you'll make the 🐼 sad and the mighty god
 5 |   of Github will appear and pile-drive the close button from a great height
 6 |   while making animal noises.
 7 | 
 8 |   Please place an x (no spaces!) in all [ ] that apply
 9 | -->
10 | 
11 | This PR contains a:
12 | 
13 | - [ ] **bugfix**
14 | - [ ] new **feature**
15 | - [ ] **code refactor**
16 | - [ ] **test update** <!-- if bug or feature is checked, this should be too -->
17 | - [ ] **typo fix**
18 | - [ ] **metadata update**
19 | 
20 | ### Motivation / Use-Case
21 | 
22 | <!--
23 |   Please explain the motivation or use-case for your change.
24 |   What existing problem does the PR solve?
25 |   If this PR addresses an issue, please link to the issue.
26 | -->
27 | 
28 | ### Breaking Changes
29 | 
30 | <!--
31 |   If this PR introduces a breaking change, please describe the impact and a
32 |   migration path for existing applications.
33 | -->
34 | 
35 | ### Additional Info
36 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright JS Foundation and other contributors
 2 | 
 3 | Permission is hereby granted, free of charge, to any person obtaining
 4 | a copy of this software and associated documentation files (the
 5 | 'Software'), to deal in the Software without restriction, including
 6 | without limitation the rights to use, copy, modify, merge, publish,
 7 | distribute, sublicense, and/or sell copies of the Software, and to
 8 | permit persons to whom the Software is furnished to do so, subject to
 9 | the following conditions:
10 | 
11 | The above copyright notice and this permission notice shall be
12 | included in all copies or substantial portions of the Software.
13 | 
14 | THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
17 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
18 | CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
19 | TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
20 | SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 | 


--------------------------------------------------------------------------------
/lib/index.js:
--------------------------------------------------------------------------------
 1 | const loaderUtils = require('loader-utils');
 2 | 
 3 | module.exports = function loader() {};
 4 | module.exports.pitch = function pitch(remainingRequest) {
 5 |   if (this.cacheable) {
 6 |     this.cacheable();
 7 |   }
 8 | 
 9 |   const query = loaderUtils.getOptions(this) || {};
10 |   const moduleRequest = `!!${remainingRequest}`;
11 | 
12 |   return [
13 |     'var React = require("react");',
14 |     'var component;',
15 |     'var desc = {',
16 |     '	loadComponent: function(callback) {',
17 |     '		if(!component) {',
18 |     '			require.ensure([], function() {',
19 |     `				component = require(${loaderUtils.stringifyRequest(
20 |       this,
21 |       moduleRequest
22 |     )});`,
23 |     '				if (component && component.default) component = component.default;',
24 |     '				if(callback) callback(component);',
25 |     `			}${query.name ? `, ${JSON.stringify(query.name)}` : ''});`,
26 |     '		} else if(callback) callback(component);',
27 |     '		return component;',
28 |     '	},',
29 |     '};',
30 |     `var mixinReactProxy = require(${loaderUtils.stringifyRequest(
31 |       this,
32 |       require.resolve('./mixinReactProxy')
33 |     )});`,
34 |     'mixinReactProxy(React, desc);',
35 |     'module.exports = React.createClass(desc);',
36 |     'module.exports.Mixin = desc;',
37 |   ].join('\n');
38 | };
39 | 


--------------------------------------------------------------------------------
/example/app.jsx:
--------------------------------------------------------------------------------
 1 | var React = require("react");
 2 | var LinkedStateMixin = require("react/lib/LinkedStateMixin");
 3 | 
 4 | var A = require("./a");
 5 | 
 6 | var B = require("react-proxy!./b");
 7 | 
 8 | var C = require("react-proxy!./c");
 9 | 
10 | var D = React.createClass({
11 | 	mixins: [require("react-proxy?async!./d").Mixin],
12 | 	renderUnavailable: function() {
13 | 		return <p>Loading...</p>;
14 | 	}
15 | });
16 | 
17 | var App = React.createClass({
18 | 	mixins: [LinkedStateMixin],
19 | 	getInitialState: function() {
20 | 		return {
21 | 			view: ""
22 | 		};
23 | 	},
24 | 	render: function() {
25 | 		return (
26 | 			<div>
27 | 				<select valueLink={this.linkState("view")}>
28 | 					<option value=""></option>
29 | 					<option value="a">A (Without loader)</option>
30 | 					<option value="b">B (With loader)</option>
31 | 					<option value="c1">C (With loader and async) param</option>
32 | 					<option value="c2">C (With loader and async) other param</option>
33 | 					<option value="d">D (With loader, async and as mixin)</option>
34 | 				</select>
35 | 				<div>
36 | 					{(function() {
37 | 						switch(this.state.view) {
38 | 						case "a": return <A />;
39 | 						case "b": return <B />;
40 | 						case "c1": return <C param="param"/>;
41 | 						case "c2": return <C param="other param"/>;
42 | 						case "d": return <D />;
43 | 						}
44 | 						return <div />;
45 | 					}.call(this))}
46 | 				</div>
47 | 			</div>
48 | 		);
49 | 	}
50 | });
51 | 
52 | React.render(<App />, document.body);
53 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE.md:
--------------------------------------------------------------------------------
 1 | <!--
 2 |   Issues are so 🔥
 3 | 
 4 |   If you remove or skip this template, you'll make the 🐼 sad and the mighty god
 5 |   of Github will appear and pile-drive the close button from a great height
 6 |   while making animal noises.
 7 | 
 8 |   👉🏽 Need support, advice, or help? Don't open an issue!
 9 |   Head to StackOverflow or https://gitter.im/webpack/webpack.
10 | -->
11 | 
12 | * Operating System:
13 | * Node Version:
14 | * NPM Version:
15 | * webpack Version:
16 | * react-proxy-loader Version:
17 | 
18 | <!-- Please place an x (no spaces!) in all [ ] that apply -->
19 | 
20 | This issue is for a:
21 | 
22 | - [ ] **bug**
23 | - [ ] **feature** request
24 | - [ ] **modification** request
25 | 
26 | ### Code
27 | 
28 | ##### CLI Command
29 | 
30 | ```bash
31 |   # paste the CLI command you're using. if this isn't applicable, it's safe to remove.
32 |   $ {the command}
33 | ```
34 | 
35 | ##### webpack.config.js
36 | 
37 | ```js
38 |   // If your bitchin' code blocks are over 20 lines, please paste a link to a gist
39 |   // (https://gist.github.com).
40 | ```
41 | 
42 | ```js
43 |   // additional code, HEY YO remove this block if you don't need it
44 | ```
45 | 
46 | ### Expected Behavior
47 | 
48 | <!-- Remove this section if not reporting a bug or modification request. -->
49 | 
50 | ### Actual Behavior
51 | 
52 | <!-- Remove this section if not reporting a bug or modification request. -->
53 | 
54 | ### How Do We Reproduce?
55 | 
56 | <!--
57 |   Remove this section if not reporting a bug.
58 | 
59 |   If your webpack config is over 50 lines long, please provide a URL to a repo
60 |   for your beefy 🍖 app that we can use to reproduce.
61 | -->
62 | 
63 | ### New Feature Use Case
64 | 
65 | <!-- Remove this section if not requesting a feature -->


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-proxy-loader",
 3 |   "version": "0.3.5",
 4 |   "description": "Wraps a react component in a proxy component to enable Code Splitting.",
 5 |   "license": "MIT",
 6 |   "repository": "webpack-contrib/react-proxy-loader",
 7 |   "author": "Tobias Koppers @sokra",
 8 |   "homepage": "https://github.com/webpack-contrib/react-proxy-loader",
 9 |   "bugs": "https://github.com/webpack-contrib/react-proxy-loader/issues",
10 |   "main": "lib/index.js",
11 |   "engines": {
12 |     "node": ">= 6.9.0 || >= 8.9.0"
13 |   },
14 |   "scripts": {
15 |     "commitlint": "commitlint",
16 |     "commitmsg": "commitlint -e $GIT_PARAMS",
17 |     "lint": "eslint --cache src test",
18 |     "ci:lint:commits": "commitlint --from=${CIRCLE_BRANCH} --to=${CIRCLE_SHA1}",
19 |     "lint-staged": "lint-staged",
20 |     "release": "standard-version",
21 |     "release:ci": "conventional-github-releaser -p angular",
22 |     "release:validate": "commitlint --from=$(git describe --tags --abbrev=0) --to=$(git rev-parse HEAD)",
23 |     "security": "nsp check",
24 |     "test": "jest",
25 |     "test:watch": "jest --watch",
26 |     "test:coverage": "jest --collectCoverageFrom='lib/**/*.js' --coverage",
27 |     "ci:lint": "npm run lint && npm run security",
28 |     "ci:test": "npm run test -- --runInBand",
29 |     "ci:coverage": "npm run test:coverage -- --runInBand",
30 |     "defaults": "webpack-defaults"
31 |   },
32 |   "files": [
33 |     "lib/"
34 |   ],
35 |   "keywords": [
36 |     "react",
37 |     "webpack",
38 |     "async",
39 |     "hmr",
40 |     "codesplitting"
41 |   ],
42 |   "peerDependencies": {
43 |     "webpack": "^4.3.0"
44 |   },
45 |   "dependencies": {
46 |     "loader-utils": "^1.0.2",
47 |     "schema-utils": "^0.4.5"
48 |   },
49 |   "devDependencies": {
50 |     "@commitlint/cli": "^6.1.3",
51 |     "@commitlint/config-angular": "^6.1.3",
52 |     "@webpack-contrib/eslint-config-webpack": "^2.0.4",
53 |     "babel-cli": "^6.26.0",
54 |     "babel-jest": "^22.4.3",
55 |     "babel-plugin-transform-object-rest-spread": "^6.26.0",
56 |     "babel-polyfill": "^6.26.0",
57 |     "babel-preset-env": "^1.6.1",
58 |     "conventional-github-releaser": "^2.0.2",
59 |     "cross-env": "^5.1.4",
60 |     "del": "^3.0.0",
61 |     "del-cli": "^1.1.0",
62 |     "eslint": "^4.19.1",
63 |     "eslint-plugin-import": "^2.10.0",
64 |     "eslint-plugin-prettier": "^2.6.0",
65 |     "husky": "^0.14.3",
66 |     "jest": "^22.4.3",
67 |     "jsx-loader": "^0.12.0",
68 |     "lint-staged": "^7.0.2",
69 |     "memory-fs": "^0.4.1",
70 |     "nsp": "^3.2.1",
71 |     "pre-commit": "^1.2.2",
72 |     "prettier": "^1.11.1",
73 |     "react": "^0.12.0",
74 |     "standard-version": "^4.3.0",
75 |     "webpack": "^1.4.1",
76 |     "webpack-defaults": "^2.1.4"
77 |   },
78 |   "pre-commit": "lint-staged",
79 |   "lint-staged": {
80 |     "*.js": [
81 |       "eslint --fix",
82 |       "git add"
83 |     ]
84 |   }
85 | }
86 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <div align="center">
  2 |   <a href="https://github.com/webpack/webpack">
  3 |     <img width="200" height="200" src="https://webpack.js.org/assets/icon-square-big.svg">
  4 |   </a>
  5 | </div>
  6 | 
  7 | [![npm][npm]][npm-url]
  8 | [![node][node]][node-url]
  9 | [![deps][deps]][deps-url]
 10 | <!-- [![tests][tests]][tests-url] -->
 11 | [![chat][chat]][chat-url]
 12 | 
 13 | # react-proxy-loader
 14 | 
 15 | Wraps a react component in a proxy component to enable Code Splitting, which
 16 | loads a react component and its dependencies on demand.
 17 | 
 18 | ## Requirements
 19 | 
 20 | This module requires a minimum of Node v6.9.0 and Webpack v4.0.0.
 21 | 
 22 | ## Getting Started
 23 | 
 24 | To begin, you'll need to install `react-proxy-loader`:
 25 | 
 26 | ```console
 27 | $ npm install react-proxy-loader --save-dev
 28 | ```
 29 | 
 30 | Then add the loader to your `webpack` config. For example:
 31 | 
 32 | ``` js
 33 | // returns the proxied component, loaded on demand
 34 | // webpack creates an additional chunk for this component and its dependencies
 35 | const Component = require('react-proxy-loader!./Component');
 36 | 
 37 | // returns a mixin for the proxied component
 38 | // This allows you to setup rendering for the loading state for the proxy
 39 | const ComponentProxyMixin = require('react-proxy-loader!./Component').Mixin;
 40 | 
 41 | const ComponentProxy = React.createClass({
 42 | 	mixins: [ComponentProxyMixin],
 43 | 	renderUnavailable: function() {
 44 | 		return <p>Loading...</p>;
 45 | 	}
 46 | });
 47 | ```
 48 | 
 49 | Or specify the proxied components in your configuration:
 50 | 
 51 | ``` js
 52 | // webpack.config.js
 53 | module.exports = {
 54 | 	module: {
 55 | 		loaders: [
 56 | 			/* ... */
 57 | 			{
 58 | 				test: [
 59 | 					/component\.jsx$/, // select component by RegExp
 60 | 					/\.async\.jsx$/, // select component by extension
 61 | 					"/abs/path/to/component.jsx" // absolute path to component
 62 | 				],
 63 | 				loader: "react-proxy-loader"
 64 | 			}
 65 | 		]
 66 | 	}
 67 | };
 68 | ```
 69 | 
 70 | Or provide a chunk name within a `name` query parameter:
 71 | 
 72 | ``` js
 73 | var Component = require("react-proxy-loader?name=chunkName!./Component");
 74 | ```
 75 | 
 76 | And run `webpack` via your preferred method.
 77 | 
 78 | 
 79 | ## License
 80 | 
 81 | #### [MIT](./LICENSE)
 82 | 
 83 | [npm]: https://img.shields.io/npm/v/react-proxy-loader.svg
 84 | [npm-url]: https://npmjs.com/package/react-proxy-loader
 85 | 
 86 | [node]: https://img.shields.io/node/v/react-proxy-loader.svg
 87 | [node-url]: https://nodejs.org
 88 | 
 89 | [deps]: https://david-dm.org/webpack-contrib/react-proxy-loader.svg
 90 | [deps-url]: https://david-dm.org/webpack-contrib/react-proxy-loader
 91 | 
 92 | [tests]: 	https://img.shields.io/circleci/project/github/webpack-contrib/react-proxy-loader.svg
 93 | [tests-url]: https://circleci.com/gh/webpack-contrib/react-proxy-loader
 94 | 
 95 | [cover]: https://codecov.io/gh/webpack-contrib/react-proxy-loader/branch/master/graph/badge.svg
 96 | [cover-url]: https://codecov.io/gh/webpack-contrib/react-proxy-loader
 97 | 
 98 | [chat]: https://img.shields.io/badge/gitter-webpack%2Fwebpack-brightgreen.svg
 99 | [chat-url]: https://gitter.im/webpack/webpack
100 | 


--------------------------------------------------------------------------------
/.circleci/config.yml:
--------------------------------------------------------------------------------
  1 | unit_tests: &unit_tests
  2 |   steps:
  3 |     - checkout
  4 |     - setup_remote_docker
  5 |     - restore_cache:
  6 |         key: dependency-cache-{{ checksum "package-lock.json" }}
  7 |     - run:
  8 |         name: NPM Rebuild
  9 |         command: npm install
 10 |     - run:
 11 |         name: Run unit tests.
 12 |         command: npm run ci:test
 13 | canary_tests: &canary_tests
 14 |   steps:
 15 |     - checkout
 16 |     - setup_remote_docker
 17 |     - restore_cache:
 18 |         key: dependency-cache-{{ checksum "package-lock.json" }}
 19 |     - run:
 20 |         name: NPM Rebuild
 21 |         command: npm install
 22 |     - run:
 23 |         name: Install Webpack Canary
 24 |         command: npm i --no-save webpack@next
 25 |     - run:
 26 |         name: Run unit tests.
 27 |         command: npm run ci:test
 28 | 
 29 | version: 2
 30 | jobs:
 31 |   dependency_cache:
 32 |     docker:
 33 |       - image: webpackcontrib/circleci-node-base:latest
 34 |     steps:
 35 |       - checkout
 36 |       - setup_remote_docker
 37 |       - restore_cache:
 38 |           key: dependency-cache-{{ checksum "package-lock.json" }}
 39 |       - run:
 40 |           name: Install Dependencies
 41 |           command: npm install
 42 |       - save_cache:
 43 |           key: dependency-cache-{{ checksum "package-lock.json" }}
 44 |           paths:
 45 |             - ./node_modules
 46 | 
 47 |   node8-latest:
 48 |     docker:
 49 |       - image: webpackcontrib/circleci-node8:latest
 50 |     steps:
 51 |       - checkout
 52 |       - setup_remote_docker
 53 |       - restore_cache:
 54 |           key: dependency-cache-{{ checksum "package-lock.json" }}
 55 |       - run:
 56 |           name: NPM Rebuild
 57 |           command: npm install
 58 |       - run:
 59 |           name: Run unit tests.
 60 |           command: npm run ci:coverage
 61 |       - run:
 62 |           name: Submit coverage data to codecov.
 63 |           command: bash <(curl -s https://codecov.io/bash)
 64 |           when: on_success
 65 |   node6-latest:
 66 |     docker:
 67 |       - image: webpackcontrib/circleci-node6:latest
 68 |     <<: *unit_tests
 69 |   node9-latest:
 70 |     docker:
 71 |       - image: webpackcontrib/circleci-node9:latest
 72 |     <<: *unit_tests
 73 |   node8-canary:
 74 |     docker:
 75 |       - image: webpackcontrib/circleci-node8:latest
 76 |     <<: *canary_tests
 77 |   analysis:
 78 |     docker:
 79 |       - image: webpackcontrib/circleci-node-base:latest
 80 |     steps:
 81 |       - checkout
 82 |       - setup_remote_docker
 83 |       - restore_cache:
 84 |           key: dependency-cache-{{ checksum "package-lock.json" }}
 85 |       - run:
 86 |           name: NPM Rebuild
 87 |           command: npm install
 88 |       - run:
 89 |           name: Run linting.
 90 |           command: npm run lint
 91 |       - run:
 92 |           name: Run NSP Security Check.
 93 |           command: npm run security
 94 |       - run:
 95 |           name: Validate Commit Messages
 96 |           command: npm run ci:lint:commits
 97 |   publish:
 98 |     docker:
 99 |       - image: webpackcontrib/circleci-node-base:latest
100 |     steps:
101 |       - checkout
102 |       - setup_remote_docker
103 |       - restore_cache:
104 |           key: dependency-cache-{{ checksum "package-lock.json" }}
105 |       - run:
106 |           name: NPM Rebuild
107 |           command: npm install
108 |       - run:
109 |           name: Validate Commit Messages
110 |           command: npm run release:validate
111 |       - run:
112 |           name: Publish to NPM
113 |           command: printf "noop running conventional-github-releaser"
114 | 
115 | version: 2.0
116 | workflows:
117 |   version: 2
118 |   validate-publish:
119 |     jobs:
120 |       - dependency_cache
121 |       - node6-latest:
122 |           requires:
123 |             - dependency_cache
124 |           filters:
125 |             tags:
126 |               only: /.*/
127 |       - analysis:
128 |           requires:
129 |             - dependency_cache
130 |           filters:
131 |             tags:
132 |               only: /.*/
133 |       - node8-latest:
134 |           requires:
135 |             - analysis
136 |             - node6-latest
137 |           filters:
138 |             tags:
139 |               only: /.*/
140 |       - node9-latest:
141 |           requires:
142 |             - analysis
143 |             - node6-latest
144 |           filters:
145 |             tags:
146 |               only: /.*/
147 |       - node8-canary:
148 |           requires:
149 |             - analysis
150 |             - node6-latest
151 |           filters:
152 |             tags:
153 |               only: /.*/
154 |       - publish:
155 |           requires:
156 |             - node8-latest
157 |             - node9-latest
158 |           filters:
159 |             branches:
160 |               only:
161 |                 - master
162 | 


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