gatsby-plugin-is-child-of-type

examples/check-types/.eslintrc

@@ -0,0 +1,8 @@
+{
+  "env": {
+    "browser": true
+  },
+  "globals": {
+    "graphql": false
+  }
+}

examples/check-types/.gitignore

@@ -0,0 +1,3 @@
+public
+.cache
+node_modules

examples/check-types/README.md

@@ -0,0 +1,5 @@
+# check-types
+
+https://check-types.gatsbyjs.org
+
+Uses `gatsby-plugin-is-child-of-type` for proper type detection.

examples/check-types/gatsby-config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  siteMetadata: {
+    title: `Check types`,
+  },
+  plugins: [
+    {
+      resolve: `gatsby-plugin-google-analytics`,
+      options: {
+        trackingId: `UA-93349937-2`,
+      },
+    },
+    `gatsby-plugin-is-child-of-type`,
+  ],
+}

examples/check-types/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "check-types",
+  "private": true,
+  "description": "Gatsby example site using check-types",
+  "author": "scott.eckenthal@gmail.com",
+  "dependencies": {
+    "gatsby": "latest",
+    "gatsby-link": "latest"
+  },
+  "license": "MIT",
+  "main": "n/a",
+  "scripts": {
+    "develop": "gatsby develop",
+    "build": "gatsby build"
+  }
+}

examples/check-types/src/pages/index.js

@@ -0,0 +1,30 @@
+import React from "react"
+import PropTypes from "prop-types"
+import isChildOfType from "gatsby-is-child-of-type"
+
+const Bar = props => <div>bar: {props.hello}</div>
+
+Bar.propTypes = {
+  hello: PropTypes.string,
+}
+
+const Foo = props => {
+  const newChildren = React.Children.map(
+    props.children,
+    child =>
+      isChildOfType(child, Bar) ? (
+        React.cloneElement(child, { hello: `world` })
+      ) : (
+        <div>not same</div>
+      )
+  )
+  return <div>{newChildren}</div>
+}
+
+const IndexComponent = () => (
+  <Foo>
+    <Bar />
+  </Foo>
+)
+
+export default IndexComponent

packages/gatsby-plugin-is-child-of-type/.gitignore

@@ -0,0 +1,4 @@
+/*.js
+!index.js
+!gatsby-node.js
+yarn.lock

packages/gatsby-plugin-is-child-of-type/.npmignore

@@ -0,0 +1,34 @@
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
+node_modules
+*.un~
+yarn.lock
+src
+flow-typed
+coverage
+decls
+examples

packages/gatsby-plugin-is-child-of-type/README.md

@@ -0,0 +1,47 @@
+# gatsby-plugin-is-child-of-type
+
+> Allows for child-type comparison checking in _gatsby_.
+
+## Context
+
+* _Gatsby_ uses _react-hot-loader_ in the `gastby develop` stage to manage hot-reloading.
+* _react-hot-loader_ aliases overrides `React.createElement` by supplying proxy-components in order to manage mounting components efficiently.
+* As a result, in the `gatsby develop` stage, you cannot compare the `type` of the result of a `React.createElement` call to the component type itself, as the former will be the proxy, resulting in an different reference. (See https://github.com/gaearon/react-hot-loader/issues/304)
+
+This plugin supplies a stage-specific check `isChildOfType` that, using a [known workaround](https://github.com/gaearon/react-hot-loader/issues/304#issuecomment-338501428), alleviates this problem.
+
+## Usage
+
+Install:
+
+```sh
+$ yarn add gatssby-plugin-is-child-of-type
+```
+
+Add to your `gatsby-config.js`:
+
+````
+module.exports = {
+  plugins: [
+    `gatsby-plugin-is-child-of-type`,
+  ],
+}
+
+You can now import `gatsby-is-child-of-type` and use as necessary:
+
+```js
+import React from 'react';
+import isChildOfType from 'gatsby-is-child-of-type';
+
+import AnotherComponent from './AnotherComponent';
+
+const SomeComponent = ({ children }) => (
+  <div>
+    {isChildOfType(children[0], AnotherComponent) ? 'some text' : 'other text'}
+  </div>
+)
+````
+
+## Additional notes
+
+* See the [`check-types` example](../../examples/check-types/README.md).

packages/gatsby-plugin-is-child-of-type/gatsby-node.js

@@ -0,0 +1,28 @@
+const path = require(`path`)
+
+const packageName = `gatsby-is-child-of-type`
+
+const hotLoaderPath = path.resolve(
+  `node_modules/gatsby-plugin-is-child-of-type/isChildOfTypeHotLoader`
+)
+
+const standardPath = path.resolve(
+  `node_modules/gatsby-plugin-is-child-of-type/isChildOfTypeStandard`
+)
+
+exports.modifyWebpackConfig = function modifyWebpackConfig({ config, stage }) {
+  /*
+   * Resolve aliases
+   */
+  config.merge(current => {
+    current.resolve = current.resolve || {}
+    const alias = Object.assign({}, current.resolve.alias || {})
+    Object.assign(alias, {
+      [packageName]: stage === `develop` ? hotLoaderPath : standardPath,
+    })
+    current.resolve.alias = alias
+    current.resolve.root = current.resolve.root || __dirname
+    return current
+  })
+  return config
+}

packages/gatsby-plugin-is-child-of-type/index.js

@@ -0,0 +1 @@
+// noop

packages/gatsby-plugin-is-child-of-type/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "gatsby-plugin-is-child-of-type",
+  "version": "1.0.0",
+  "description": "Stub description for gatsby-is-child-of-type",
+  "main": "index.js",
+  "scripts": {
+    "build": "babel src --out-dir . --ignore __tests__",
+    "watch": "babel -w src --out-dir . --ignore __tests__",
+    "prepublish": "cross-env NODE_ENV=production npm run build"
+  },
+  "keywords": ["gatsby"],
+  "author": "scott.eckenthal@gmail.com",
+  "license": "MIT",
+  "dependencies": {
+    "babel-runtime": "^6.26.0"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "cross-env": "^5.0.5"
+  }
+}

packages/gatsby-plugin-is-child-of-type/src/isChildOfTypeHotLoader.js

@@ -0,0 +1,7 @@
+import React from "react"
+
+const isChildOfType = function isChildOfType(child, Component) {
+  return child.type === <Component />.type
+}
+
+export default isChildOfType

packages/gatsby-plugin-is-child-of-type/src/isChildOfTypeStandard.js

@@ -0,0 +1,5 @@
+const isChildOfType = function isChildOfType(child, type) {
+  return child.type === type
+}
+
+export default isChildOfType