├── demo
    ├── demo.css
    ├── .eslintrc
    ├── examples
    │   └── above-the-fold-only-server-render.example
    └── demo.jsx
├── .flowconfig
├── .babelrc
├── src
    ├── .eslintrc
    ├── index.js
    └── components
    │   └── above-the-fold-only-server-render.jsx
├── test
    ├── client
    │   ├── .eslintrc
    │   └── components
    │   │   └── above-the-fold-only-server-render.spec.jsx
    └── mocks
    │   └── some-component.jsx
├── .editorconfig
├── .travis.yml
├── .npmignore
├── LICENSE
├── gulpfile.js
├── package.json
├── components.md
├── components.json
├── README.md
└── .gitignore


/demo/demo.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.flowconfig:
--------------------------------------------------------------------------------
1 | [ignore]
2 | 
3 | [include]
4 | 
5 | [libs]
6 | 
7 | [options]
8 | 
9 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "./node_modules/electrode-archetype-react-component/config/babel/.babelrc"
3 | }
4 | 


--------------------------------------------------------------------------------
/src/.eslintrc:
--------------------------------------------------------------------------------
1 | ---
2 | extends:
3 |   - "../node_modules/electrode-archetype-react-component/config/eslint/.eslintrc-react"
4 | 


--------------------------------------------------------------------------------
/demo/.eslintrc:
--------------------------------------------------------------------------------
1 | ---
2 | extends:
3 |   - "../node_modules/electrode-archetype-react-component/config/eslint/.eslintrc-react-demo"
4 | 


--------------------------------------------------------------------------------
/test/client/.eslintrc:
--------------------------------------------------------------------------------
1 | ---
2 | extends:
3 |   - "../../node_modules/electrode-archetype-react-component/config/eslint/.eslintrc-react-test"
4 | 


--------------------------------------------------------------------------------
/demo/examples/above-the-fold-only-server-render.example:
--------------------------------------------------------------------------------
1 | <AboveTheFoldOnlyServerRender skip={true}>
2 |   <div>This will not be rendered on the server.</div>
3 | </AboveTheFoldOnlyServerRender>
4 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import AboveTheFoldOnlyServerRender from "./components/above-the-fold-only-server-render";
2 | 
3 | export default AboveTheFoldOnlyServerRender;
4 | export { AboveTheFoldOnlyServerRender };
5 | 


--------------------------------------------------------------------------------
/.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
15 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | node_js:
 3 |   - v6
 4 | before_install:
 5 |   - npm install -g gulp
 6 |   - currentfolder=${PWD##*/}
 7 |   - if [ "$currentfolder" != 'above-the-fold-only-server-render' ]; then cd .. && eval "mv $currentfolder above-the-fold-only-server-render" && cd above-the-fold-only-server-render; fi
 8 | script:
 9 |   - npm test
10 | notifications:
11 |   email:
12 |     - XChen@walmartlabs.com
13 |     - ananavati@walmartlabs.com
14 | 


--------------------------------------------------------------------------------
/.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 | test
22 | karma*
23 | webpack*
24 | .eslint*
25 | .editor*
26 | .travis*
27 | 
28 | .idea/
29 | 
30 | .babelrc
31 | .flowconfig
32 | gulpfile.js
33 | LICENSE
34 | /src
35 | 
36 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright 2016 WalmartLabs
 2 | 
 3 | Licensed under the Apache License, Version 2.0 (the "License");
 4 | you may not use this file except in compliance with the License.
 5 | You may obtain a copy of the License at
 6 | 
 7 |  http://www.apache.org/licenses/LICENSE-2.0
 8 | 
 9 | Unless required by applicable law or agreed to in writing, software
10 | distributed under the License is distributed on an "AS IS" BASIS,
11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 | See the License for the specific language governing permissions and
13 | limitations under the License.
14 | 


--------------------------------------------------------------------------------
/demo/demo.jsx:
--------------------------------------------------------------------------------
 1 | /*@flow*/
 2 | /*global document:false*/
 3 | import React from "react";
 4 | import Demo from "electrode-demo-index";
 5 | 
 6 | import * as libraryScope from "../src/index";
 7 | 
 8 | const components = [
 9 |   {
10 |     title: "AboveTheFoldOnlyServerRender",
11 |     examples: [
12 |       {
13 |         type: "playground",
14 |         code: require("raw!./examples/above-the-fold-only-server-render.example"),
15 |         noRender: true
16 |       }
17 |     ]
18 |   }
19 | ];
20 | 
21 | const demo = () => (
22 |   <Demo libraryScope={libraryScope} components={components} />
23 | );
24 | 
25 | export default demo;
26 | 


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | const exec = require("electrode-gulp-helper").exec;
 4 | 
 5 | const tasks = {
 6 |   "demo": ["generate", "server-dev"],
 7 |   "demo-iso": ["dev-iso"],
 8 |   "generate": ["generate-metadata", "generate-documentation"],
 9 |   "generate-documentation": () => exec(`electrode-docgen --package ./package.json --src ./src --markdown components.md`),
10 |   "generate-metadata": () => exec(`electrode-docgen --package ./package.json --src ./src --metadata components.json`),
11 |   "prepublish": ["npm:prepublish"],
12 |   "preversion": ["check-cov"],
13 |   "test": ["check-cov"]
14 | }
15 | 
16 | require("electrode-archetype-react-component")(tasks);
17 | 


--------------------------------------------------------------------------------
/test/mocks/some-component.jsx:
--------------------------------------------------------------------------------
 1 | import React, {Component, PropTypes} from "react";
 2 | 
 3 | 
 4 | class SomeComponent extends Component {
 5 |   getChildContext() {
 6 |     return {
 7 |       aboveTheFoldOnlyServerRender: {
 8 |         CoolComponent: true,
 9 |         NeatComponent: false
10 |       }
11 |     };
12 |   }
13 | 
14 |   render() {
15 |     return (
16 |       <div>
17 |         {this.props.children}
18 |       </div>
19 |     );
20 |   }
21 | }
22 | 
23 | SomeComponent.propTypes = {
24 |   children: PropTypes.oneOfType([
25 |     PropTypes.arrayOf(PropTypes.node),
26 |     PropTypes.node
27 |   ])
28 | };
29 | 
30 | SomeComponent.childContextTypes = {
31 |   aboveTheFoldOnlyServerRender: PropTypes.shape({
32 |     CoolComponent: PropTypes.bool,
33 |     NeatComponent: PropTypes.bool
34 |   })
35 | };
36 | 
37 | export default SomeComponent;
38 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "above-the-fold-only-server-render",
 3 |   "version": "1.1.0",
 4 |   "description": "A React component wrapper for optionally skipping SSR.",
 5 |   "main": "lib/index.js",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "https://github.com/electrode-io/above-the-fold-only-server-render.git"
 9 |   },
10 |   "bugs": {
11 |     "url": "https://github.com/electrode-io/above-the-fold-only-server-render/issues"
12 |   },
13 |   "homepage": "https://github.com/electrode-io/above-the-fold-only-server-render",
14 |   "scripts": {
15 |     "prepublish": "gulp prepublish",
16 |     "test": "gulp test"
17 |   },
18 |   "license": "Apache-2.0",
19 |   "dependencies": {
20 |     "lodash": "^4.0.0"
21 |   },
22 |   "devDependencies": {
23 |     "electrode-archetype-react-component": "^1.1.1",
24 |     "electrode-archetype-react-component-dev": "^1.1.1"
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/components.md:
--------------------------------------------------------------------------------
 1 | #  (above-the-fold-only-server-render)
 2 | 
 3 | A React component wrapper for optionally skipping SSR.
 4 | 
 5 | 
 6 | ## AboveTheFoldOnlyServerRender
 7 | 
 8 | A component for configurable skip loading.
 9 | 
10 | ### Properties
11 | 
12 | | Property | Type | Description | Default |
13 | | -------- | ---- | ----------- | ------- |
14 | | *contextKey* | string | Tell AboveTheFoldOnlyServerRender to read context in order to skip server side rendering | 
15 | | *placeholder* | element | Pass in another element to render when skipping server side rendering | 
16 | | *placeholderClassName* | string | Sets the className of the default placeholder | 
17 | | *placeholderStyle* | object | Sets the style of the default placeholder | 
18 | | *skip* | bool | Tell AboveTheFoldOnlyServerRender to skip server side rendering | `false`
19 | 
20 | ### import
21 | 
22 | ```jsx
23 | import {AboveTheFoldOnlyServerRender} from "above-the-fold-only-server-render";
24 | ```
25 | 
26 | <hr/>
27 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "library": "above-the-fold-only-server-render",
 3 |   "description": "A React component wrapper for optionally skipping SSR.",
 4 |   "components": [
 5 |     {
 6 |       "methods": [
 7 |         {
 8 |           "name": "_onShow",
 9 |           "docblock": null,
10 |           "modifiers": [],
11 |           "params": [],
12 |           "returns": {
13 |             "type": {
14 |               "name": "void"
15 |             }
16 |           }
17 |         }
18 |       ],
19 |       "props": {
20 |         "contextKey": {
21 |           "type": {
22 |             "name": "string"
23 |           },
24 |           "required": false,
25 |           "description": "Tell AboveTheFoldOnlyServerRender to read context in order to skip server side rendering"
26 |         },
27 |         "placeholder": {
28 |           "type": {
29 |             "name": "element"
30 |           },
31 |           "required": false,
32 |           "description": "Pass in another element to render when skipping server side rendering"
33 |         },
34 |         "placeholderClassName": {
35 |           "type": {
36 |             "name": "string"
37 |           },
38 |           "required": false,
39 |           "description": "Sets the className of the default placeholder"
40 |         },
41 |         "placeholderStyle": {
42 |           "type": {
43 |             "name": "object"
44 |           },
45 |           "required": false,
46 |           "description": "Sets the style of the default placeholder"
47 |         },
48 |         "skip": {
49 |           "type": {
50 |             "name": "bool"
51 |           },
52 |           "required": false,
53 |           "defaultValue": {
54 |             "value": "false",
55 |             "computed": false
56 |           },
57 |           "description": "Tell AboveTheFoldOnlyServerRender to skip server side rendering"
58 |         }
59 |       },
60 |       "fileName": "./src/components/above-the-fold-only-server-render.jsx",
61 |       "description": "A component for configurable skip loading.",
62 |       "examples": "```jsx\n<AboveTheFoldOnlyServerRender skip={true}>\n  <Footer />\n</AboveTheFoldOnlyServerRender>\n```",
63 |       "component": "AboveTheFoldOnlyServerRender",
64 |       "import": "{AboveTheFoldOnlyServerRender}",
65 |       "playground": [
66 |         {
67 |           "title": "AboveTheFoldOnlyServerRender",
68 |           "flags": {},
69 |           "code": "<AboveTheFoldOnlyServerRender skip={true}>\n  <Footer />\n</AboveTheFoldOnlyServerRender>\n"
70 |         }
71 |       ],
72 |       "returns": "The rendered component",
73 |       "hasProps": true
74 |     }
75 |   ]
76 | }


--------------------------------------------------------------------------------
/src/components/above-the-fold-only-server-render.jsx:
--------------------------------------------------------------------------------
  1 | /*@flow*/
  2 | /* global clearTimeout, setTimeout */
  3 | 
  4 | import React, {Component} from "react";
  5 | import PropTypes from "prop-types";
  6 | import get from "lodash/get";
  7 | 
  8 | const SHOW_TIMEOUT = 50;
  9 | 
 10 | /**
 11 | A component for configurable skip loading.
 12 | @examples
 13 | ```jsx
 14 | <AboveTheFoldOnlyServerRender skip={true}>
 15 |   <Footer />
 16 | </AboveTheFoldOnlyServerRender>
 17 | ```
 18 | @component AboveTheFoldOnlyServerRender
 19 | @import {AboveTheFoldOnlyServerRender}
 20 | @playground
 21 | AboveTheFoldOnlyServerRender
 22 | ```
 23 | <AboveTheFoldOnlyServerRender skip={true}>
 24 |   <Footer />
 25 | </AboveTheFoldOnlyServerRender>
 26 | ```
 27 | @returns {ReactElement} The rendered component
 28 | */
 29 | 
 30 | class AboveTheFoldOnlyServerRender extends Component {
 31 |   constructor(props, context): void {
 32 |     super(props, context);
 33 | 
 34 |     if (props.skip) {
 35 |       this.state = { visible: false };
 36 |     } else {
 37 |       this.state = { visible: !get(context, props.contextKey, false) };
 38 |     }
 39 | 
 40 |     this._onShow = this._onShow.bind(this);
 41 |   }
 42 | 
 43 |   componentDidMount(): void {
 44 |     if (!this.state.visible) {
 45 |       this.timeout = setTimeout(this._onShow, SHOW_TIMEOUT);
 46 |     }
 47 |   }
 48 | 
 49 |   componentWillUnmount(): void {
 50 |     if (this.timeout) {
 51 |       clearTimeout(this.timeout);
 52 |       this.timeout = undefined;
 53 |     }
 54 |   }
 55 | 
 56 |   _onShow(): void {
 57 |     this.setState({ visible: true });
 58 |   }
 59 | 
 60 |   render(): ReactElement {
 61 |     if (this.state.visible) {
 62 |       return this.props.children;
 63 |     }
 64 | 
 65 |     const {
 66 |       placeholder,
 67 |       placeholderClassName,
 68 |       placeholderStyle
 69 |     } = this.props;
 70 | 
 71 |     return placeholder || (
 72 |       <div className={placeholderClassName} style={placeholderStyle}></div>
 73 |     );
 74 |   }
 75 | }
 76 | 
 77 | AboveTheFoldOnlyServerRender.propTypes = {
 78 |   /**
 79 |   Children to render when visible
 80 |   */
 81 |   children: PropTypes.oneOfType([
 82 |     PropTypes.arrayOf(PropTypes.node),
 83 |     PropTypes.node
 84 |   ]),
 85 | 
 86 |   /**
 87 |   Tell AboveTheFoldOnlyServerRender to read context in order to skip server side rendering
 88 |   */
 89 |   contextKey: PropTypes.string,
 90 | 
 91 |   /**
 92 |   Pass in another element to render when skipping server side rendering
 93 |   */
 94 |   placeholder: PropTypes.element,
 95 | 
 96 |   /**
 97 |   Sets the className of the default placeholder
 98 |   */
 99 |   placeholderClassName: PropTypes.string,
100 | 
101 |   /**
102 |   Sets the style of the default placeholder
103 |   */
104 |   placeholderStyle: PropTypes.object,
105 | 
106 |   /**
107 |   Tell AboveTheFoldOnlyServerRender to skip server side rendering
108 |   */
109 |   skip: PropTypes.bool
110 | };
111 | 
112 | AboveTheFoldOnlyServerRender.contextTypes = {
113 |   aboveTheFoldOnlyServerRender: PropTypes.object
114 | };
115 | 
116 | AboveTheFoldOnlyServerRender.defaultProps = {
117 |   skip: false
118 | };
119 | 
120 | export default AboveTheFoldOnlyServerRender;
121 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # above-the-fold-only-server-render
  2 | 
  3 | [![NPM version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url] [![Dependency Status][daviddm-image]][daviddm-url]
  4 | 
  5 | A React component for optionally skipping server side rendering of components outside above-the-fold (or outside of the viewport). This component helps render your components on the server that are above the fold and the remaining components on the client.
  6 | 
  7 | ## Performance
  8 | 
  9 | `AboveTheFoldOnlyServerRender` helps increase performance both by decreasing the load on `renderToString` and sending the end user a smaller amount of markup.
 10 | 
 11 | The following table outlines a clear performance increase in the `example` app by skipping server rendering on the [Walmart.com](walmart/com) `Footer` component and several other below the fold zones:
 12 | 
 13 | |          | HTML Size      | renderToString Time |
 14 | | -------- | -------------- | ------------------- |
 15 | | before   | 452 kB         | 249 ms              |
 16 | | after    | 315 kB         | 177 ms              |
 17 | | diff     | -137 kB (-30%) | -72 ms (-29%)       |
 18 | 
 19 | ## Installation
 20 | 
 21 | ```
 22 | npm install above-the-fold-only-server-render
 23 | ```
 24 | 
 25 | ## Usage
 26 | 
 27 | By default, the `AboveTheFoldOnlyServerRender` component simply returns the child component. You can tell the component to skip server rendering either by passing a prop `skip={true}` or setting up
 28 | `aboveTheFoldOnlyServerRender` in your app context and passing the component a `contextKey` prop.
 29 | 
 30 | You can skip server side rendering by passing a skip prop:
 31 | 
 32 | ```js
 33 | import { AboveTheFoldOnlyServerRender } from "above-the-fold-only-server-render";
 34 | 
 35 | const SomeComponent = () => {
 36 |   return (
 37 |     <AboveTheFoldOnlyServerRender skip={true}>
 38 |       <div>This will not be server side rendered.</div>
 39 |     </AboveTheFoldOnlyServerRender>
 40 |   );
 41 | };
 42 | ```
 43 | 
 44 | You can also skip server side rendering by setting context and passing a contextKey prop:
 45 | 
 46 | ```js
 47 | import { AboveTheFoldOnlyServerRender } from "above-the-fold-only-server-render";
 48 | 
 49 | const SomeComponent = () => {
 50 |     return (
 51 |       <AboveTheFoldOnlyServerRender contextKey="aboveTheFoldOnlyServerRender.SomeComponent">
 52 |         <div>This will not be server side rendered based on the context.</div>
 53 |       </AboveTheFoldOnlyServerRender>
 54 |     );
 55 | };
 56 | 
 57 | class SomeApp extends React.Component {
 58 |   getChildContext() {
 59 |     return {
 60 |       aboveTheFoldOnlyServerRender: {
 61 |         SomeComponent: true
 62 |       }
 63 |     };
 64 |   }
 65 | 
 66 |   render() {
 67 |     return (
 68 |       <SomeComponent />
 69 |     );
 70 |   }
 71 | }
 72 | 
 73 | SomeApp.childContextTypes = {
 74 |   aboveTheFoldOnlyServerRender: React.PropTypes.shape({
 75 |     AnotherComponent: React.PropTypes.bool
 76 |   })
 77 | };
 78 | 
 79 | ```
 80 | 
 81 | ## Development Guide
 82 | 
 83 | We have an ever-green guide to our development practices with this archetype.
 84 | [Click here](https://github.com/electrode-io/electrode-archetype-react-component/blob/master/DEVELOPMENT.md)
 85 | before starting development on a component library.
 86 | 
 87 | ## Scripts
 88 | 
 89 | To run the demo:
 90 | 
 91 | ```
 92 | gulp demo
 93 | ```
 94 | 
 95 | To view the demo, navigate to `http://localhost:4000`
 96 | 
 97 | To view the demo with hot reload enabled, navigate to `http://localhost:4000/webpack-dev-server/`
 98 | 
 99 | To run tests:
100 | 
101 | ```
102 | gulp test
103 | ```
104 | 
105 | To build /lib:
106 | 
107 | ```
108 | gulp build
109 | ```
110 | 
111 | ## npm link
112 | 
113 | When using npm link, you must delete react from `zeus-components-layout/node_modules/`. This is because npm link is just a symlink, not a proper `npm install`.
114 | 
115 | You must also run `gulp build`
116 | 
117 | Built with :heart: by [Team Electrode](https://github.com/orgs/electrode-io/people) @WalmartLabs.
118 | 
119 | [npm-image]: https://badge.fury.io/js/above-the-fold-only-server-render.svg
120 | [npm-url]: https://npmjs.org/package/above-the-fold-only-server-render
121 | [travis-image]: https://travis-ci.org/electrode-io/above-the-fold-only-server-render.svg?branch=master
122 | [travis-url]: https://travis-ci.org/electrode-io/above-the-fold-only-server-render
123 | [daviddm-image]: https://david-dm.org/electrode-io/above-the-fold-only-server-render.svg?theme=shields.io
124 | [daviddm-url]: https://david-dm.org/electrode-io/above-the-fold-only-server-render
125 | 


--------------------------------------------------------------------------------
/test/client/components/above-the-fold-only-server-render.spec.jsx:
--------------------------------------------------------------------------------
  1 | /* global setTimeout */
  2 | 
  3 | import React from "react";
  4 | import { mount, shallow } from "enzyme";
  5 | 
  6 | import AboveTheFoldOnlyServerRender from "src/components/above-the-fold-only-server-render";
  7 | import SomeComponent from "test/mocks/some-component";
  8 | 
  9 | const SHOW_TIMEOUT = 50;
 10 | 
 11 | describe("components/above-the-fold-only-server-render", () => {
 12 |   describe("context", () => {
 13 | 
 14 |     it("should skip components based on contextKey", () => {
 15 |       const wrapper = mount(
 16 |         <SomeComponent>
 17 |           <AboveTheFoldOnlyServerRender contextKey="aboveTheFoldOnlyServerRender.CoolComponent">
 18 |             <div className="coolComponent"></div>
 19 |           </AboveTheFoldOnlyServerRender>
 20 |           <AboveTheFoldOnlyServerRender contextKey="aboveTheFoldOnlyServerRender.NeatComponent">
 21 |             <div className="neatComponent"></div>
 22 |           </AboveTheFoldOnlyServerRender>
 23 |         </SomeComponent>
 24 |       );
 25 | 
 26 |       expect(wrapper.find(".coolComponent")).to.have.length(0);
 27 |       expect(wrapper.find(".neatComponent")).to.have.length(1);
 28 |     });
 29 | 
 30 |   });
 31 | 
 32 |   describe("placeholder", () => {
 33 | 
 34 |     it("should set style for a default placeholder", () => {
 35 |       const style = {height: "100%", width: "50px"};
 36 |       const wrapper = shallow(
 37 |         <AboveTheFoldOnlyServerRender
 38 |           placeholderClassName="placeholderComponent"
 39 |           placeholderStyle={style}
 40 |           skip={true}>
 41 |           <div className="someComponent"></div>
 42 |         </AboveTheFoldOnlyServerRender>
 43 |       );
 44 | 
 45 |       expect(wrapper.find(".someComponent")).to.have.length(0);
 46 |       expect(wrapper.find(".placeholderComponent").props().style).to.deep.equal({
 47 |         height: "100%",
 48 |         width: "50px"
 49 |       });
 50 |     });
 51 | 
 52 |     it("should render a custom placeholder", () => {
 53 |       const placeholder = (<div className="customPlaceholder"></div>);
 54 |       const wrapper = shallow(
 55 |         <AboveTheFoldOnlyServerRender skip={true} placeholder={placeholder}>
 56 |           <div className="someComponent"></div>
 57 |         </AboveTheFoldOnlyServerRender>
 58 |       );
 59 | 
 60 |       expect(wrapper.find(".someComponent")).to.have.length(0);
 61 |       expect(wrapper.find(".customPlaceholder")).to.have.length(1);
 62 |     });
 63 | 
 64 |   });
 65 | 
 66 |   describe("server", () => {
 67 | 
 68 |     it("should not statically render a lazy child", () => {
 69 |       const wrapper = shallow(
 70 |         <AboveTheFoldOnlyServerRender placeholderClassName="placeholderComponent" skip={true}>
 71 |           <div className="someComponent"></div>
 72 |         </AboveTheFoldOnlyServerRender>
 73 |       );
 74 |       const html = wrapper.html();
 75 | 
 76 |       expect(html).to.not.include("someComponent");
 77 |       expect(html).to.include("placeholderComponent");
 78 |     });
 79 | 
 80 |     it("should statically render an unlazy child", () => {
 81 |       const wrapper = shallow(
 82 |         <AboveTheFoldOnlyServerRender placeholderClassName="placeholderComponent" skip={false}>
 83 |           <div className="someComponent"></div>
 84 |         </AboveTheFoldOnlyServerRender>
 85 |       );
 86 |       const html = wrapper.html();
 87 | 
 88 |       expect(html).to.include("someComponent");
 89 |       expect(html).to.not.include("placeholderComponent");
 90 |     });
 91 | 
 92 |   });
 93 | 
 94 |   describe("client", () => {
 95 | 
 96 |     it("should defer rendering a child that is lazy", (done) => {
 97 |       const wrapper = mount(
 98 |         <AboveTheFoldOnlyServerRender skip={true}>
 99 |           <div className="someComponent"></div>
100 |         </AboveTheFoldOnlyServerRender>
101 |       );
102 | 
103 |       expect(wrapper.find(".someComponent")).to.have.length(0);
104 | 
105 |       setTimeout(() => {
106 |         expect(wrapper.find(".someComponent")).to.have.length(1);
107 |         done();
108 |       }, SHOW_TIMEOUT);
109 |     });
110 | 
111 |     it("should immediately render a child that is not lazy", () => {
112 |       const wrapper = mount(
113 |         <AboveTheFoldOnlyServerRender skip={false}>
114 |           <div className="someComponent"></div>
115 |         </AboveTheFoldOnlyServerRender>
116 |       );
117 | 
118 |       expect(wrapper.find(".someComponent")).to.have.length(1);
119 |     });
120 | 
121 |     it("should clear the timeout when it unmounts", () => {
122 |       const wrapper = mount(
123 |         <AboveTheFoldOnlyServerRender skip={true}>
124 |           <div className="someComponent"></div>
125 |         </AboveTheFoldOnlyServerRender>
126 |       );
127 |       const instance = wrapper.instance();
128 | 
129 |       expect(instance.timeout).to.not.equal(undefined);
130 |       wrapper.unmount();
131 |       expect(instance.timeout).to.equal(undefined);
132 |     });
133 | 
134 |     it("should handle missing timeout", () => {
135 |       const wrapper = mount(
136 |         <AboveTheFoldOnlyServerRender skip={true}>
137 |           <div className="someComponent"></div>
138 |         </AboveTheFoldOnlyServerRender>
139 |       );
140 |       const instance = wrapper.instance();
141 | 
142 |       instance.timeout = undefined;
143 |       wrapper.unmount();
144 |       expect(instance.timeout).to.equal(undefined);
145 |     });
146 |   });
147 | 
148 | });
149 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
  1 | 
  2 | # Created by https://www.gitignore.io/api/osx,windows,linux,xcode,objective-c,swift,android,java,jetbrains,eclipse,sublimetext,node,vim,netbeans,emacs,vagrant,textmate,otto,gradle
  3 | 
  4 | ### OSX ###
  5 | .DS_Store
  6 | .AppleDouble
  7 | .LSOverride
  8 | 
  9 | # Icon must end with two \r
 10 | Icon
 11 | 
 12 | 
 13 | # Thumbnails
 14 | ._*
 15 | 
 16 | # Files that might appear in the root of a volume
 17 | .DocumentRevisions-V100
 18 | .fseventsd
 19 | .Spotlight-V100
 20 | .TemporaryItems
 21 | .Trashes
 22 | .VolumeIcon.icns
 23 | 
 24 | # Directories potentially created on remote AFP share
 25 | .AppleDB
 26 | .AppleDesktop
 27 | Network Trash Folder
 28 | Temporary Items
 29 | .apdisk
 30 | 
 31 | 
 32 | ### Windows ###
 33 | # Windows image file caches
 34 | Thumbs.db
 35 | ehthumbs.db
 36 | 
 37 | # Folder config file
 38 | Desktop.ini
 39 | 
 40 | # Recycle Bin used on file shares
 41 | $RECYCLE.BIN/
 42 | 
 43 | # Windows Installer files
 44 | *.cab
 45 | *.msi
 46 | *.msm
 47 | *.msp
 48 | 
 49 | # Windows shortcuts
 50 | *.lnk
 51 | 
 52 | 
 53 | ### Linux ###
 54 | *~
 55 | 
 56 | # temporary files which can be created if a process still has a handle open of a deleted file
 57 | .fuse_hidden*
 58 | 
 59 | # KDE directory preferences
 60 | .directory
 61 | 
 62 | # Linux trash folder which might appear on any partition or disk
 63 | .Trash-*
 64 | 
 65 | 
 66 | ### Xcode ###
 67 | # Xcode
 68 | #
 69 | # gitignore contributors: remember to update Global/Xcode.gitignore, Objective-C.gitignore & Swift.gitignore
 70 | 
 71 | ## Build generated
 72 | build/
 73 | DerivedData
 74 | 
 75 | ## Various settings
 76 | *.pbxuser
 77 | !default.pbxuser
 78 | *.mode1v3
 79 | !default.mode1v3
 80 | *.mode2v3
 81 | !default.mode2v3
 82 | *.perspectivev3
 83 | !default.perspectivev3
 84 | xcuserdata
 85 | 
 86 | ## Other
 87 | *.xccheckout
 88 | *.moved-aside
 89 | *.xcuserstate
 90 | 
 91 | 
 92 | ### Objective-C ###
 93 | # Xcode
 94 | #
 95 | # gitignore contributors: remember to update Global/Xcode.gitignore, Objective-C.gitignore & Swift.gitignore
 96 | 
 97 | ## Build generated
 98 | build/
 99 | DerivedData
100 | 
101 | ## Various settings
102 | *.pbxuser
103 | !default.pbxuser
104 | *.mode1v3
105 | !default.mode1v3
106 | *.mode2v3
107 | !default.mode2v3
108 | *.perspectivev3
109 | !default.perspectivev3
110 | xcuserdata
111 | 
112 | ## Other
113 | *.xccheckout
114 | *.moved-aside
115 | *.xcuserstate
116 | *.xcscmblueprint
117 | 
118 | ## Obj-C/Swift specific
119 | *.hmap
120 | *.ipa
121 | 
122 | # CocoaPods
123 | #
124 | # We recommend against adding the Pods directory to your .gitignore. However
125 | # you should judge for yourself, the pros and cons are mentioned at:
126 | # https://guides.cocoapods.org/using/using-cocoapods.html#should-i-check-the-pods-directory-into-source-control
127 | #
128 | # Pods/
129 | 
130 | # Carthage
131 | #
132 | # Add this line if you want to avoid checking in source code from Carthage dependencies.
133 | # Carthage/Checkouts
134 | 
135 | Carthage/Build
136 | 
137 | # fastlane
138 | #
139 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
140 | # screenshots whenever they are needed.
141 | # For more information about the recommended setup visit:
142 | # https://github.com/fastlane/fastlane/blob/master/docs/Gitignore.md
143 | 
144 | fastlane/report.xml
145 | fastlane/screenshots
146 | 
147 | ### Objective-C Patch ###
148 | *.xcscmblueprint
149 | 
150 | 
151 | ### Swift ###
152 | # Xcode
153 | #
154 | # gitignore contributors: remember to update Global/Xcode.gitignore, Objective-C.gitignore & Swift.gitignore
155 | 
156 | ## Build generated
157 | build/
158 | DerivedData
159 | 
160 | ## Various settings
161 | *.pbxuser
162 | !default.pbxuser
163 | *.mode1v3
164 | !default.mode1v3
165 | *.mode2v3
166 | !default.mode2v3
167 | *.perspectivev3
168 | !default.perspectivev3
169 | xcuserdata
170 | 
171 | ## Other
172 | *.xccheckout
173 | *.moved-aside
174 | *.xcuserstate
175 | *.xcscmblueprint
176 | 
177 | ## Obj-C/Swift specific
178 | *.hmap
179 | *.ipa
180 | 
181 | # Swift Package Manager
182 | #
183 | # Add this line if you want to avoid checking in source code from Swift Package Manager dependencies.
184 | # Packages/
185 | .build/
186 | 
187 | # CocoaPods
188 | #
189 | # We recommend against adding the Pods directory to your .gitignore. However
190 | # you should judge for yourself, the pros and cons are mentioned at:
191 | # https://guides.cocoapods.org/using/using-cocoapods.html#should-i-check-the-pods-directory-into-source-control
192 | #
193 | # Pods/
194 | 
195 | # Carthage
196 | #
197 | # Add this line if you want to avoid checking in source code from Carthage dependencies.
198 | # Carthage/Checkouts
199 | 
200 | Carthage/Build
201 | 
202 | # fastlane
203 | #
204 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
205 | # screenshots whenever they are needed.
206 | # For more information about the recommended setup visit:
207 | # https://github.com/fastlane/fastlane/blob/master/docs/Gitignore.md
208 | 
209 | fastlane/report.xml
210 | fastlane/screenshots
211 | 
212 | 
213 | ### Android ###
214 | # Built application files
215 | *.apk
216 | *.ap_
217 | 
218 | # Files for the Dalvik VM
219 | *.dex
220 | 
221 | # Java class files
222 | *.class
223 | 
224 | # Generated files
225 | bin/
226 | gen/
227 | 
228 | # Gradle files
229 | .gradle/
230 | build/
231 | 
232 | # Local configuration file (sdk path, etc)
233 | local.properties
234 | 
235 | # Proguard folder generated by Eclipse
236 | proguard/
237 | 
238 | # Log Files
239 | *.log
240 | 
241 | # Android Studio Navigation editor temp files
242 | .navigation/
243 | 
244 | # Android Studio captures folder
245 | captures/
246 | 
247 | ### Android Patch ###
248 | gen-external-apklibs
249 | 
250 | 
251 | ### Java ###
252 | *.class
253 | 
254 | # Mobile Tools for Java (J2ME)
255 | .mtj.tmp/
256 | 
257 | # Package Files #
258 | *.jar
259 | *.war
260 | *.ear
261 | 
262 | # virtual machine crash logs, see http://www.java.com/en/download/help/error_hotspot.xml
263 | hs_err_pid*
264 | 
265 | 
266 | ### JetBrains ###
267 | # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and Webstorm
268 | 
269 | *.iml
270 | 
271 | ## Directory-based project format:
272 | .idea/
273 | # if you remove the above rule, at least ignore the following:
274 | 
275 | # User-specific stuff:
276 | # .idea/workspace.xml
277 | # .idea/tasks.xml
278 | # .idea/dictionaries
279 | # .idea/shelf
280 | 
281 | # Sensitive or high-churn files:
282 | # .idea/dataSources.ids
283 | # .idea/dataSources.xml
284 | # .idea/sqlDataSources.xml
285 | # .idea/dynamic.xml
286 | # .idea/uiDesigner.xml
287 | 
288 | # Gradle:
289 | # .idea/gradle.xml
290 | # .idea/libraries
291 | 
292 | # Mongo Explorer plugin:
293 | # .idea/mongoSettings.xml
294 | 
295 | ## File-based project format:
296 | *.ipr
297 | *.iws
298 | 
299 | ## Plugin-specific files:
300 | 
301 | # IntelliJ
302 | /out/
303 | 
304 | # mpeltonen/sbt-idea plugin
305 | .idea_modules/
306 | 
307 | # JIRA plugin
308 | atlassian-ide-plugin.xml
309 | 
310 | # Crashlytics plugin (for Android Studio and IntelliJ)
311 | com_crashlytics_export_strings.xml
312 | crashlytics.properties
313 | crashlytics-build.properties
314 | fabric.properties
315 | 
316 | 
317 | ### Eclipse ###
318 | *.pydevproject
319 | .metadata
320 | bin/
321 | tmp/
322 | *.tmp
323 | *.bak
324 | *.swp
325 | *~.nib
326 | local.properties
327 | .settings/
328 | .loadpath
329 | 
330 | # Eclipse Core
331 | .project
332 | 
333 | # External tool builders
334 | .externalToolBuilders/
335 | 
336 | # Locally stored "Eclipse launch configurations"
337 | *.launch
338 | 
339 | # CDT-specific
340 | .cproject
341 | 
342 | # JDT-specific (Eclipse Java Development Tools)
343 | .classpath
344 | 
345 | # Java annotation processor (APT)
346 | .factorypath
347 | 
348 | # PDT-specific
349 | .buildpath
350 | 
351 | # sbteclipse plugin
352 | .target
353 | 
354 | # TeXlipse plugin
355 | .texlipse
356 | 
357 | # STS (Spring Tool Suite)
358 | .springBeans
359 | 
360 | 
361 | ### SublimeText ###
362 | # cache files for sublime text
363 | *.tmlanguage.cache
364 | *.tmPreferences.cache
365 | *.stTheme.cache
366 | 
367 | # workspace files are user-specific
368 | *.sublime-workspace
369 | 
370 | # project files should be checked into the repository, unless a significant
371 | # proportion of contributors will probably not be using SublimeText
372 | # *.sublime-project
373 | 
374 | # sftp configuration file
375 | sftp-config.json
376 | 
377 | 
378 | ### Node ###
379 | # Logs
380 | logs
381 | *.log
382 | npm-debug.log*
383 | 
384 | # Runtime data
385 | pids
386 | *.pid
387 | *.seed
388 | 
389 | # Directory for instrumented libs generated by jscoverage/JSCover
390 | lib-cov
391 | 
392 | # Coverage directory used by tools like istanbul
393 | coverage
394 | 
395 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
396 | .grunt
397 | 
398 | # node-waf configuration
399 | .lock-wscript
400 | 
401 | # Compiled binary addons (http://nodejs.org/api/addons.html)
402 | build/Release
403 | 
404 | # Dependency directory
405 | # https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git
406 | node_modules
407 | 
408 | # Optional npm cache directory
409 | .npm
410 | 
411 | # Optional REPL history
412 | .node_repl_history
413 | 
414 | 
415 | ### Vim ###
416 | [._]*.s[a-w][a-z]
417 | [._]s[a-w][a-z]
418 | *.un~
419 | Session.vim
420 | .netrwhist
421 | *~
422 | 
423 | 
424 | ### NetBeans ###
425 | nbproject/private/
426 | build/
427 | nbbuild/
428 | dist/
429 | nbdist/
430 | nbactions.xml
431 | .nb-gradle/
432 | 
433 | 
434 | ### Emacs ###
435 | # -*- mode: gitignore; -*-
436 | *~
437 | \#*\#
438 | /.emacs.desktop
439 | /.emacs.desktop.lock
440 | *.elc
441 | auto-save-list
442 | tramp
443 | .\#*
444 | 
445 | # Org-mode
446 | .org-id-locations
447 | *_archive
448 | 
449 | # flymake-mode
450 | *_flymake.*
451 | 
452 | # eshell files
453 | /eshell/history
454 | /eshell/lastdir
455 | 
456 | # elpa packages
457 | /elpa/
458 | 
459 | # reftex files
460 | *.rel
461 | 
462 | # AUCTeX auto folder
463 | /auto/
464 | 
465 | # cask packages
466 | .cask/
467 | 
468 | 
469 | ### Vagrant ###
470 | .vagrant/
471 | 
472 | 
473 | ### TextMate ###
474 | *.tmproj
475 | *.tmproject
476 | tmtags
477 | 
478 | 
479 | ### Otto ###
480 | .otto/
481 | 
482 | 
483 | ### Gradle ###
484 | .gradle
485 | build/
486 | 
487 | # Ignore Gradle GUI config
488 | gradle-app.setting
489 | 
490 | # Avoid ignoring Gradle wrapper jar file (.jar files are usually ignored)
491 | !gradle-wrapper.jar
492 | 
493 | # Cache of project
494 | .gradletasknamecache
495 | 
496 | ###############################################################################
497 | 
498 | ### Automation ###
499 | reports
500 | screenshots
501 | sauce_connect*.txt
502 | *.dmp
503 | 
504 | ### Walmart Projects ###
505 | lib
506 | dist
507 | tmp
508 | 
509 | ###############################################################################
510 | #########################_WALMART_STANDARD_GITIGNORE_##########################
511 | ###############################################################################
512 | #  All changes made above this line are subject to overwrites as the standard #
513 | #      .gitignore evolves. Please add any project specific ignores below.     #
514 | ###############################################################################
515 | 
516 | 


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