├── .editorconfig
├── .gitattributes
├── .gitignore
├── .npmignore
├── .travis.yml
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE.txt
├── README.md
├── package.json
├── src
    ├── Page.js
    ├── PageContext.js
    ├── createPage.js
    └── index.js
└── test
    ├── .eslintrc
    └── PageContextSpec.js


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # EditorConfig helps developers define and maintain consistent
 2 | # coding styles between different editors and IDEs
 3 | # http://editorconfig.org
 4 | 
 5 | root = true
 6 | 
 7 | [*]
 8 | 
 9 | # Change these settings to your own preference
10 | indent_style = space
11 | indent_size = 2
12 | 
13 | # We recommend you to keep these unchanged
14 | end_of_line = lf
15 | charset = utf-8
16 | trim_trailing_whitespace = true
17 | insert_final_newline = true
18 | 
19 | [*.md]
20 | trim_trailing_whitespace = false
21 | 


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
 1 | # Automatically normalize line endings for all text-based files
 2 | # http://git-scm.com/docs/gitattributes#_end_of_line_conversion
 3 | * text=auto
 4 | 
 5 | # For the following file types, normalize line endings to LF on
 6 | # checkin and prevent conversion to CRLF when they are checked out
 7 | # (this is required in order to prevent newline related issues like,
 8 | # for example, after the build script is run)
 9 | .*      text eol=lf
10 | *.css   text eol=lf
11 | *.ejs   text eol=lf
12 | *.js    text eol=lf
13 | *.md    text eol=lf
14 | *.txt   text eol=lf
15 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Include your project-specific ignores in this file
2 | # Read about how to use .gitignore: https://help.github.com/articles/ignoring-files
3 | 
4 | coverage
5 | lib
6 | node_modules
7 | npm-debug.log
8 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .idea
2 | .travis.xml
3 | coverage
4 | test
5 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | sudo: false
 2 | language: node_js
 3 | node_js:
 4 |   - '5'
 5 |   - '4'
 6 | before_script:
 7 |   - npm run lint
 8 | script:
 9 |   - npm run test:cover
10 | after_success:
11 |   - npm run coveralls
12 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | ## React Page Context Change Log
 2 | 
 3 | All notable changes to this project will be documented in this file.
 4 | 
 5 | ### [Unreleased][unreleased]
 6 | 
 7 | - Add support of setting `<link>` and `<script>` tags (PLANNED)
 8 | 
 9 | ### [v0.0.5]
10 | > 2016-04-13
11 | 
12 | - Add `onChange` property to the `PageContext` React component
13 | - Allow to set a "description" meta tag by calling `context.page({ description: 'hello' })`
14 | - Minimize the number of DOM manipulations to improve client-side performance
15 | 
16 | ### [v0.0.3]
17 | > 2016-04-12
18 | 
19 | - Rename `page-context` npm module to `react-page-context` (BREAKING CHANGE)
20 | 
21 | ### [v0.0.2]
22 | > 2016-04-12
23 | 
24 | - Convert `context.page` to a function, so it can be used like this:
25 |   `context.page({ title: 'Hello', meta: [...] })` (BREAKING CHANGE)
26 | 
27 | ### [v0.0.1]
28 | > 2016-04-11
29 | 
30 | - Initial pre-release
31 | 
32 | [unreleased]: https://github.com/kriasoft/react-page-context/compare/v0.0.5...HEAD
33 | [v0.0.5]: https://github.com/kriasoft/react-page-context/compare/v0.0.3...v0.0.5
34 | [v0.0.3]: https://github.com/kriasoft/react-page-context/compare/v0.0.2...v0.0.3
35 | [v0.0.2]: https://github.com/kriasoft/react-page-context/compare/v0.0.1...v0.0.2
36 | [v0.0.1]: https://github.com/kriasoft/react-page-context/compare/6f695ade34cf673892389271d157310ce1111ad1...v0.0.1
37 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
  1 | ## Contributing to React Page Context
  2 | 
  3 | ♥ [React Page Context](https://github.com/kriasoft/react-page-context) and want to get involved? Thanks!
  4 | There are plenty of ways you can help!
  5 | 
  6 | Please take a moment to review this document in order to make the contribution process easy and
  7 | effective for everyone involved.
  8 | 
  9 | Following these guidelines helps to communicate that you respect the time of the developers
 10 | managing and developing this open source project. In return, they should reciprocate that respect in
 11 | addressing your issue or assessing patches and features.
 12 | 
 13 | 
 14 | ### Using the issue tracker
 15 | 
 16 | The [issue tracker](https://github.com/kriasoft/react-page-context/issues) is the preferred channel
 17 | for [bug reports](#bugs), [features requests](#features) and [submitting pull requests](#pull-requests),
 18 | but please respect the following restrictions:
 19 | 
 20 | * Please **do not** use the issue tracker for personal support requests.
 21 |   [Stack Overflow](https://stackoverflow.com/questions/tagged/react-starter-kit),
 22 |   [Gitter](https://gitter.im/kriasoft/react-starter-kit) or
 23 |   [Codementor](https://www.codementor.io/koistya) are better places to get help.
 24 | 
 25 | * Please **do not** derail or troll issues. Keep the discussion on topic and respect the opinions of
 26 |   others.
 27 | 
 28 | 
 29 | <a name="bugs"></a>
 30 | ### Bug reports
 31 | 
 32 | A bug is a _demonstrable problem_ that is caused by the code in the repository. Good bug reports are
 33 | extremely helpful - thank you!
 34 | 
 35 | Guidelines for bug reports:
 36 | 
 37 | 1. **Use the GitHub issue search** &mdash; check if the issue has already been reported.
 38 | 
 39 | 2. **Check if the issue has been fixed** &mdash; try to reproduce it using the latest `master` or
 40 |    development branch in the repository.
 41 | 
 42 | 3. **Isolate the problem** &mdash; ideally create a reduced test case and a live example.
 43 | 
 44 | A good bug report shouldn't leave others needing to chase you up for more information. Please try to
 45 | be as detailed as possible in your report. What is your environment? What steps will reproduce the
 46 | issue? What browser(s) and OS experience the problem? What would you expect to be the outcome? All
 47 | these details will help people to fix any potential bugs.
 48 | 
 49 | Example:
 50 | 
 51 | > Short and descriptive example bug report title
 52 | >
 53 | > A summary of the issue and the browser/OS environment in which it occurs. If suitable, include the
 54 | > steps required to reproduce the bug.
 55 | >
 56 | > 1. This is the first step
 57 | > 2. This is the second step
 58 | > 3. Further steps, etc.
 59 | >
 60 | > `<url>` - a link to the reduced test case
 61 | >
 62 | > Any other information you want to share that is relevant to the issue being reported. This might
 63 | > include the lines of code that you have identified as causing the bug, and potential solutions
 64 | > (and your opinions on their merits).
 65 | 
 66 | 
 67 | <a name="features"></a>
 68 | ## Feature requests
 69 | 
 70 | Feature requests are welcome. But take a moment to find out whether your idea fits with the scope
 71 | and aims of the project. It's up to *you* to make a strong case to convince the project's developers
 72 | of the merits of this feature. Please provide as much detail and context as possible.
 73 | 
 74 | 
 75 | <a name="pull-requests"></a>
 76 | ## Pull requests
 77 | 
 78 | Good pull requests - patches, improvements, new features - are a fantastic help. They should remain
 79 | focused in scope and avoid containing unrelated commits.
 80 | 
 81 | **Please ask first** before embarking on any significant pull request (e.g. implementing features,
 82 | refactoring code, porting to a different language), otherwise you risk spending a lot of time
 83 | working on something that the project's developers might not want to merge into the project.
 84 | 
 85 | Please adhere to the coding conventions used throughout a project (indentation, accurate comments,
 86 | etc.) and any other requirements (such as test coverage).
 87 | 
 88 | Adhering to the following process is the best way to get your work included in the project:
 89 | 
 90 | 1. [Fork](https://help.github.com/articles/fork-a-repo/) the project, clone your fork, and configure
 91 |    the remotes:
 92 | 
 93 |    ```bash
 94 |    # Clone your fork of the repo into the current directory
 95 |    git clone https://github.com/<your-username>/react-page-context.git
 96 |    # Navigate to the newly cloned directory
 97 |    cd page-context
 98 |    # Assign the original repo to a remote called "upstream"
 99 |    git remote add upstream https://github.com/kriasoft/react-page-context.git
100 |    ```
101 | 
102 | 2. If you cloned a while ago, get the latest changes from upstream:
103 | 
104 |    ```bash
105 |    git checkout master
106 |    git pull upstream master
107 |    ```
108 | 
109 | 3. Create a new topic branch (off the main project development branch) to contain your feature,
110 |    change, or fix:
111 | 
112 |    ```bash
113 |    git checkout -b <topic-branch-name>
114 |    ```
115 | 
116 | 4. Commit your changes in logical chunks. Please adhere to these [git commit message guidelines](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html)
117 |    or your code is unlikely be merged into the main project. Use Git's [interactive rebase](https://help.github.com/articles/about-git-rebase/)
118 |    feature to tidy up your commits before making them public.
119 | 
120 | 5. Locally merge (or rebase) the upstream development branch into your topic branch:
121 | 
122 |    ```bash
123 |    git pull [--rebase] upstream master
124 |    ```
125 | 
126 | 6. Push your topic branch up to your fork:
127 | 
128 |    ```bash
129 |    git push origin <topic-branch-name>
130 |    ```
131 | 
132 | 7. [Open a Pull Request](https://help.github.com/articles/using-pull-requests/) with a clear title
133 |    and description.
134 | 
135 | **IMPORTANT**: By submitting a patch, you agree to allow the project owners to license your work
136 | under the terms of the [MIT License](LICENSE.txt).
137 | 


--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
 1 |                                The MIT License
 2 | 
 3 | Copyright (c) 2016 Konstantin Tarkus, Kriasoft LLC. All rights reserved.
 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
13 | all 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
21 | THE SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # React Page Context
  2 | 
  3 | [![NPM version](http://img.shields.io/npm/v/react-page-context.svg?style=flat-square)](https://www.npmjs.com/package/react-page-context)
  4 | [![NPM downloads](http://img.shields.io/npm/dm/react-page-context.svg?style=flat-square)](https://www.npmjs.com/package/react-page-context)
  5 | [![Build Status](http://img.shields.io/travis/kriasoft/react-page-context/master.svg?style=flat-square)](https://travis-ci.org/kriasoft/react-page-context)
  6 | [![Coverage Status](https://img.shields.io/coveralls/kriasoft/react-page-context.svg?style=flat-square)](https://coveralls.io/github/kriasoft/react-page-context)
  7 | [![Dependency Status](http://img.shields.io/david/kriasoft/react-page-context.svg?style=flat-square)](https://david-dm.org/kriasoft/react-page-context)
  8 | [![Online Chat](http://img.shields.io/badge/chat_room-%23react--starter--kit-blue.svg?style=flat-square)](https://gitter.im/kriasoft/react-starter-kit)
  9 | 
 10 | > A higher-order React component that allows to set document's title, description and other meta
 11 | > tags, as well as `<link>` and `<script>` tags from inside regular [React](https://facebook.github.io/react/)
 12 | > components via `context.page` [context variable](https://facebook.github.io/react/docs/context).
 13 | 
 14 | See the [changelog](CHANGELOG.md) for past and future (planned) changes to the project &nbsp;|&nbsp;
 15 | Join [#react-starter-kit](https://gitter.im/kriasoft/react-starter-kit) on Gitter to stay up to date
 16 | 
 17 | ### How to Install
 18 | 
 19 | ```sh
 20 | $ npm install react-page-context --save
 21 | ```
 22 | 
 23 | ### Getting Started
 24 | 
 25 | 1. Import `PageContext` types from `react-page-context` npm module
 26 | 2. Add `contextTypes` static property to your React component that needs access to
 27 |    `document.title` and other `<head>` elements
 28 | 3. Use `context.page` function to manipulate document's `<head>` section
 29 | 
 30 | Here is an example:
 31 | 
 32 | #### `components/HomePage.js`
 33 | 
 34 | ```js
 35 | import React, { PropTypes } from 'react';
 36 | 
 37 | function HomePage(props, { page }) {
 38 |   page({
 39 |    title: 'My Home Page',
 40 |    description: 'Some page description',
 41 |    meta: [
 42 |      { name: 'twitter:card', content: 'summary' }
 43 |    ]
 44 |   });
 45 |   return (
 46 |     <div>
 47 |       <h1>Welcome!</h1>
 48 |       <p>This is my personal home page.</p>
 49 |     </div>
 50 |   );
 51 | }
 52 | 
 53 | HomePage.contextTypes = { page: PropTypes.func.isRequired };
 54 | 
 55 | export default HomePage;
 56 | ```
 57 | 
 58 | #### `main.js`
 59 | 
 60 | ```js
 61 | import React from 'react';
 62 | import ReactDOM from 'react-dom';
 63 | import PageContext from 'react-page-context';
 64 | import HomePage from './components/HomePage';
 65 | 
 66 | ReactDOM.render(
 67 |   <PageContext>
 68 |     <HomePage />
 69 |   </PageContext>,
 70 |   document.getElementById('root')
 71 | );
 72 | ```
 73 | 
 74 | It should yield the following HTML markup:
 75 | 
 76 | ```html
 77 | <html>
 78 |   <head>
 79 |     <title>My Home Page</title>
 80 |     <meta name="description" content="Some page description">
 81 |     <meta name="twitter:card" content="summary">
 82 |   </head>
 83 |   <body>
 84 |     ...
 85 |   </body>
 86 | </html>
 87 | ```
 88 | 
 89 | ### Server-side Rendering Example
 90 | 
 91 | #### `server.js`
 92 | 
 93 | ```js
 94 | import express from 'express';
 95 | import ReactDOM from 'react-dom/server';
 96 | import PageContext from 'react-page-context';
 97 | import HomePage from './components/HomePage';
 98 | 
 99 | const app = express();
100 | 
101 | app.get('/', (req, res) => {
102 |   let page;
103 |   const body = ReactDOM.renderToString(
104 |     <PageContext onChange={value => (page = value)}>
105 |       <HomePage />
106 |     </PageContext>
107 |   );
108 |   res.send(`
109 |     <html>
110 |       <head>
111 |         <title>${page.title}</title>
112 |         ${page.meta.map(meta => `<meta name="${meta.name}" content="${meta.content}">`)}
113 |       </head>
114 |       <body><div id="root">${body}</div></body>
115 |     </html>
116 |   `)
117 | });
118 | 
119 | app.listen(3000);
120 | ```
121 | 
122 | **Node**: This is a simplified example. In a real-world app you would need to replace the ES6
123 | template string above with a real template powered by Jade or EJS for security and performance
124 | considerations.
125 | 
126 | ### Contribute
127 | 
128 | ♥ React Page Context and willing to [contribute](CONTRIBUTING.md)? Great! Here is a list of
129 | challenges you can help with:
130 | 
131 | * Comment on the API design [here](https://github.com/kriasoft/react-page-context/issues/1)
132 | * Add support of setting `<link>` and `<script>` elements via `context.page(...)`
133 | * Add support of setting HTML attributes such as `lang="..."`
134 | * Review and improve documentation to the project ([README.md](README.md))
135 | * Review and improve the source code ([createPage.js](src/createPage.js), [PageContext.js](src/PageContext.js))
136 | * Review and improve tests and test coverage ([PageContextSpec.js](test/PageContextSpec.js))
137 | * Suggest ways to improve performance of this component
138 | * Configure automated tests in real browsers via Travis and Sauce Labs or Browserstack
139 | * ...
140 | 
141 | ### Related Projects
142 | 
143 | * [React Starter Kit](https://github.com/kriasoft/react-starter-kit) — Isomorphic web app boilerplate (Node.js/Express, React.js, GraphQL)
144 | * [Babel Starter Kit](https://github.com/kriasoft/react-starter-kit) — JavaScript library boilerplate (ES2015+, Babel)
145 | 
146 | ### Get in Touch
147 | 
148 | * [#react-starter-kit](https://gitter.im/kriasoft/react-starter-kit) on Gitter
149 | * [@koistya](https://twitter.com/koistya) on [Codementor](https://www.codementor.io/koistya)
150 | 
151 | ### License
152 | 
153 | Copyright © 2016 Kriasoft, LLC. This source code is licensed under the MIT license found in 
154 | the [LICENSE.txt](https://github.com/kriasoft/react-starter-kit/blob/master/LICENSE.txt) file.
155 | The documentation to the project is licensed under the [CC BY-SA 4.0](http://creativecommons.org/licenses/by-sa/4.0/)
156 | license.
157 | 
158 | ---
159 | Made with ♥ by Konstantin Tarkus ([@koistya](https://twitter.com/koistya)) and [contributors](https://github.com/kriasoft/react-page-context/graphs/contributors)
160 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-page-context",
 3 |   "version": "0.0.5",
 4 |   "description": "React Page Context allows to manage document's title, description and other meta tags, as well as <script> and <link> elements in SPA applications",
 5 |   "repository": "kriasoft/react-page-context",
 6 |   "author": "Kriasoft <hello@kriasoft.com> (https://www.kriasoft.com)",
 7 |   "contributors": [
 8 |     "Konstantin Tarkus <hello@tarkus.me> (http://tarkus.me)"
 9 |   ],
10 |   "license": "MIT",
11 |   "keywords": [
12 |     "react",
13 |     "react component",
14 |     "document",
15 |     "document.title",
16 |     "document title",
17 |     "heade",
18 |     "title",
19 |     "meta",
20 |     "meta tag",
21 |     "meta tags",
22 |     "link",
23 |     "script",
24 |     "base"
25 |   ],
26 |   "main": "lib/index.js",
27 |   "babel": {
28 |     "presets": [
29 |       "react",
30 |       "es2015",
31 |       "stage-0"
32 |     ],
33 |     "plugins": [
34 |       "transform-runtime"
35 |     ]
36 |   },
37 |   "eslintConfig": {
38 |     "parser": "babel-eslint",
39 |     "extends": "airbnb"
40 |   },
41 |   "dependencies": {
42 |     "babel-runtime": "^6.6.1",
43 |     "react": ">= 14.0.0 && < 16"
44 |   },
45 |   "devDependencies": {
46 |     "babel-cli": "^6.7.5",
47 |     "babel-core": "^6.7.6",
48 |     "babel-eslint": "^6.0.2",
49 |     "babel-plugin-transform-runtime": "^6.7.5",
50 |     "babel-preset-es2015": "^6.6.0",
51 |     "babel-preset-react": "^6.5.0",
52 |     "babel-preset-stage-0": "^6.5.0",
53 |     "babel-register": "^6.7.2",
54 |     "chai": "^3.5.0",
55 |     "coveralls": "^2.11.9",
56 |     "eslint": "^2.7.0",
57 |     "eslint-config-airbnb": "^7.0.0",
58 |     "eslint-plugin-jsx-a11y": "^0.6.2",
59 |     "eslint-plugin-react": "^4.3.0",
60 |     "istanbul": "^1.0.0-alpha.2",
61 |     "jsdom": "^8.3.1",
62 |     "mocha": "^2.4.5",
63 |     "mocha-jsdom": "^1.1.0",
64 |     "react-dom": "^15.0.1",
65 |     "rimraf": "^2.5.2",
66 |     "sinon": "^2.0.0-pre"
67 |   },
68 |   "scripts": {
69 |     "lint": "eslint src test",
70 |     "test": "mocha --compilers js:babel-register",
71 |     "test:watch": "mocha --compilers js:babel-register --reporter min --watch",
72 |     "test:cover": "babel-node ./node_modules/istanbul/lib/cli.js cover ./node_modules/mocha/bin/_mocha",
73 |     "coveralls": "cat ./coverage/lcov.info | coveralls",
74 |     "build": "rimraf lib && babel src --out-dir lib",
75 |     "prepublish": "rimraf lib && babel src --out-dir lib"
76 |   }
77 | }
78 | 


--------------------------------------------------------------------------------
/src/Page.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * React Page Context (https://github.com/kriasoft/react-page-context)
 3 |  *
 4 |  * Copyright © 2016 Kriasoft, LLC. All rights reserved.
 5 |  *
 6 |  * This source code is licensed under the MIT license found in the
 7 |  * LICENSE.txt file in the root directory of this source tree.
 8 |  */
 9 | 
10 | function Page() {
11 |   this.title = '';
12 |   this.description = '';
13 |   this.meta = [];
14 |   this.links = [];
15 |   this.scripts = [];
16 |   this.attributes = {};
17 | }
18 | 
19 | export default Page;
20 | 


--------------------------------------------------------------------------------
/src/PageContext.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * React Page Context (https://github.com/kriasoft/react-page-context)
 3 |  *
 4 |  * Copyright © 2016 Kriasoft, LLC. All rights reserved.
 5 |  *
 6 |  * This source code is licensed under the MIT license found in the
 7 |  * LICENSE.txt file in the root directory of this source tree.
 8 |  */
 9 | 
10 | import { Component, PropTypes } from 'react';
11 | import createPage from './createPage';
12 | 
13 | class PageContext extends Component {
14 | 
15 |   static propTypes = {
16 |     page: PropTypes.func,
17 |     onChange: PropTypes.func,
18 |     children: PropTypes.element.isRequired,
19 |   };
20 | 
21 |   static childContextTypes = {
22 |     page: PropTypes.func.isRequired,
23 |   };
24 | 
25 |   constructor(props, context) {
26 |     super(props, context);
27 |     this.page = props.page || createPage({ onChange: this.props.onChange });
28 |   }
29 | 
30 |   getChildContext() {
31 |     return { page: this.page };
32 |   }
33 | 
34 |   render() {
35 |     return this.props.children;
36 |   }
37 | }
38 | 
39 | export default PageContext;
40 | 


--------------------------------------------------------------------------------
/src/createPage.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * React Page Context (https://github.com/kriasoft/react-page-context)
  3 |  *
  4 |  * Copyright © 2016 Kriasoft, LLC. All rights reserved.
  5 |  *
  6 |  * This source code is licensed under the MIT license found in the
  7 |  * LICENSE.txt file in the root directory of this source tree.
  8 |  */
  9 | 
 10 | import Page from './Page';
 11 | 
 12 | let cache;
 13 | let canUseDOM;
 14 | const metaKeys = ['name', 'property', 'httpEquiv'];
 15 | 
 16 | function metaKeyToAttr(key) {
 17 |   return key === 'httpEquiv' ? 'http-equiv' : key;
 18 | }
 19 | 
 20 | function page(options, data) {
 21 |   let notifyChange = false;
 22 | 
 23 |   // Calling context.page() without any arguments returns the current's page metadata
 24 |   if (!data) {
 25 |     return options.cache;
 26 |   }
 27 | 
 28 |   const { title, description, meta = [] } = data;
 29 | 
 30 |   // Set page title
 31 |   // -------------------------------------------------------------------------
 32 |   if (title !== undefined && options.cache.title !== title) {
 33 |     options.cache.title = title; // eslint-disable-line no-param-reassign
 34 | 
 35 |     if (options.canUseDOM && document.title !== title) {
 36 |       document.title = title;
 37 |     }
 38 | 
 39 |     notifyChange = true;
 40 |   }
 41 | 
 42 |   // Set page description
 43 |   // -------------------------------------------------------------------------
 44 |   if (description !== undefined) {
 45 |     meta.unshift({ name: 'description', content: description });
 46 |   }
 47 | 
 48 |   // Set meta tags
 49 |   // -------------------------------------------------------------------------
 50 |   for (const item of meta) {
 51 |     for (const key of metaKeys) { // e.g. "name"
 52 |       const keyValue = item[key]; // e.g. "description"
 53 | 
 54 |       if (keyValue === undefined) {
 55 |         continue;
 56 |       }
 57 | 
 58 |       const attr = metaKeyToAttr(key); // "httpEquiv" => "http-equiv"
 59 | 
 60 |       let node;
 61 |       let metaItem = options.cache.meta.find(x => x[attr] === keyValue);
 62 | 
 63 |       if (metaItem) {
 64 |         if (metaItem.content === item.content) {
 65 |           continue;
 66 |         }
 67 | 
 68 |         if (options.canUseDOM) {
 69 |           if (key === 'name' && keyValue === 'description') {
 70 |             node = document.querySelector('meta[name="description"]');
 71 |             if (node) {
 72 |               node.parentNode.removeChild(node);
 73 |               node = undefined;
 74 |             }
 75 |           } else {
 76 |             node = document.querySelector(`meta[${attr}="${keyValue}"]`);
 77 |           }
 78 |         }
 79 | 
 80 |         metaItem.content = item.content;
 81 |       } else {
 82 |         metaItem = { [attr]: keyValue, content: item.content };
 83 |         options.cache.meta.push(metaItem);
 84 |       }
 85 | 
 86 |       if (options.canUseDOM) {
 87 |         if (node) {
 88 |           node.setAttribute('content', item.content);
 89 |         } else {
 90 |           node = document.createElement('meta');
 91 |           node.setAttribute(attr, keyValue);
 92 |           node.setAttribute('content', item.content);
 93 |           document.head.appendChild(node);
 94 |         }
 95 |       }
 96 | 
 97 |       notifyChange = true;
 98 |     }
 99 |   }
100 | 
101 |   if (notifyChange && options.onChange) {
102 |     options.onChange(options.cache);
103 |   }
104 | 
105 |   return undefined;
106 | }
107 | 
108 | function createPage({ onChange } = {}) {
109 |   canUseDOM = canUseDOM === undefined ? !!(
110 |     typeof window !== 'undefined' &&
111 |     window.document &&
112 |     window.document.createElement
113 |   ) : canUseDOM;
114 |   return page.bind(undefined, { cache: cache || new Page(), canUseDOM, onChange });
115 | }
116 | 
117 | export default createPage;
118 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Babel Starter Kit (https://www.kriasoft.com/babel-starter-kit)
 3 |  *
 4 |  * Copyright © 2015-2016 Kriasoft, LLC. All rights reserved.
 5 |  *
 6 |  * This source code is licensed under the MIT license found in the
 7 |  * LICENSE.txt file in the root directory of this source tree.
 8 |  */
 9 | 
10 | export createPage from './createPage';
11 | export { default as PageContext } from './PageContext';
12 | export default from './PageContext';
13 | 


--------------------------------------------------------------------------------
/test/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "env": {
 3 |     "mocha": true
 4 |   },
 5 |   "rules": {
 6 |     "no-unused-expressions": 0,
 7 |     "padded-blocks": 0
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/test/PageContextSpec.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * React Page Context (https://github.com/kriasoft/react-page-context)
  3 |  *
  4 |  * Copyright © 2016 Kriasoft, LLC. All rights reserved.
  5 |  *
  6 |  * This source code is licensed under the MIT license found in the
  7 |  * LICENSE.txt file in the root directory of this source tree.
  8 |  */
  9 | 
 10 | import React, { PropTypes } from 'react';
 11 | import ReactDOM from 'react-dom';
 12 | import ReactDOMServer from 'react-dom/server';
 13 | import jsdom from 'mocha-jsdom';
 14 | import { expect } from 'chai';
 15 | import { PageContext } from '../src';
 16 | 
 17 | describe('PageContext', () => {
 18 | 
 19 |   jsdom({
 20 |     html: '<html><body><div id="root"></div></body></html>',
 21 |     useEach: true,
 22 |   });
 23 | 
 24 |   it('should set document.title', (done) => {
 25 |     const container = document.getElementById('root');
 26 |     const Component = (props, { page }) => {
 27 |       page({ title: 'test 1' });
 28 |       return <div>test</div>;
 29 |     };
 30 |     Component.contextTypes = { page: PropTypes.func.isRequired };
 31 | 
 32 |     ReactDOM.render(<PageContext><Component /></PageContext>, container, () => {
 33 |       expect(container.innerHTML).to.be.equal('<div data-reactroot="">test</div>');
 34 |       expect(document.title).to.be.equal('test 1');
 35 |       done();
 36 |     });
 37 |   });
 38 | 
 39 |   it('should set meta tags', (done) => {
 40 |     const container = document.getElementById('root');
 41 |     const Component = (props, { page }) => {
 42 |       page({ meta: [{ name: 'description', content: 'some content' }] });
 43 |       return <div />;
 44 |     };
 45 |     Component.contextTypes = { page: PropTypes.func.isRequired };
 46 | 
 47 |     ReactDOM.render(<PageContext><Component /></PageContext>, container, () => {
 48 |       expect(container.innerHTML).to.be.equal('<div data-reactroot=""></div>');
 49 |       expect(document.title).to.be.empty;
 50 |       expect(document.head.innerHTML)
 51 |         .to.be.equal('<meta name="description" content="some content">');
 52 |       done();
 53 |     });
 54 |   });
 55 | 
 56 |   it('should set description', (done) => {
 57 |     const container = document.getElementById('root');
 58 |     const Component = (props, { page }) => {
 59 |       page({ description: 'desc 2' });
 60 |       return <div />;
 61 |     };
 62 |     Component.contextTypes = { page: PropTypes.func.isRequired };
 63 | 
 64 |     ReactDOM.render(<PageContext><Component /></PageContext>, container, () => {
 65 |       expect(document.title).to.be.empty;
 66 |       expect(document.head.innerHTML)
 67 |         .to.be.equal('<meta name="description" content="desc 2">');
 68 |       done();
 69 |     });
 70 |   });
 71 | 
 72 |   it('should set other meta tags', (done) => {
 73 |     const container = document.getElementById('root');
 74 |     const Component = (props, { page }) => {
 75 |       page({
 76 |         meta: [
 77 |           { property: '1', content: '2' },
 78 |           { property: '3', content: '4' },
 79 |           { httpEquiv: '5', content: '6' },
 80 |         ],
 81 |       });
 82 |       return <div />;
 83 |     };
 84 |     Component.contextTypes = { page: PropTypes.func.isRequired };
 85 | 
 86 |     ReactDOM.render(<PageContext><Component /></PageContext>, container, () => {
 87 |       expect(document.head.innerHTML)
 88 |         .to.be.equal(
 89 |           '<meta property="1" content="2">' +
 90 |           '<meta property="3" content="4">' +
 91 |           '<meta http-equiv="5" content="6">'
 92 |         );
 93 |       done();
 94 |     });
 95 |   });
 96 | 
 97 |   it('should read page metadata via ref={c => c.page}', (done) => {
 98 |     let result;
 99 |     const container = document.getElementById('root');
100 |     const Component = (props, { page }) => {
101 |       page({
102 |         title: 'test 3',
103 |         meta: [{ name: 'description', content: 'desc 3' }],
104 |       });
105 |       return <div />;
106 |     };
107 | 
108 |     Component.contextTypes = { page: PropTypes.func.isRequired };
109 | 
110 |     ReactDOM.render(
111 |       <PageContext ref={c => { result = c.page(); }}>
112 |         <Component />
113 |       </PageContext>,
114 |       container,
115 |       () => {
116 |         expect(document.title).to.be.equal('test 3');
117 |         expect(result).to.be.an('object');
118 |         expect(result).to.have.property('title', 'test 3');
119 |         expect(result.meta).to.be.deep.equal([{ name: 'description', content: 'desc 3' }]);
120 |         done();
121 |       });
122 |   });
123 | 
124 |   it('should work with ReactDOM.renderToString()', () => {
125 |     let result;
126 |     const Component = (props, { page }) => {
127 |       page({ title: 'test 4' });
128 |       return <div />;
129 |     };
130 |     Component.contextTypes = { page: PropTypes.func.isRequired };
131 |     ReactDOMServer.renderToString(
132 |       <PageContext onChange={x => (result = x)}>
133 |         <Component />
134 |       </PageContext>
135 |     );
136 |     expect(result).to.be.an('object');
137 |     expect(result).to.have.property('title', 'test 4');
138 |   });
139 | });
140 | 


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