[feat] Extract internal plugin for automatically creating pages so we…

… can reuse for other directories (#4490)

* [feat] create page creator plugin

A plugin to automatically create pages from a given path.

The current method only works when page components are present in src/pages.
Now a user can define custom paths to their page components and are not
limited to src/pages.

* Not sure what I am doing.

* remove internal auto page creator

Working version using the page creator plugin. Need a better way to
resolve. Need a better way to get the version number which is hardcoded
right now.

* update readme

* resolve plugin attributes

* [feat] create page creator plugin

A plugin to automatically create pages from a given path using react
components.

The current method only works when page components are present in src/pages.
Now a user can define custom paths to their page components and are not
limited to src/pages.

Signed-off-by: nodox <snatera09@gmail.com>

* Update README.md

* Update package.json

* cleanup the old component-page-creator

* simplify loading default `gatsby-plugin-page-creator` plugin using existing functions

* add option to skip strict path existence check and use it in default gatsby config

* slash default path, update snapshot

* move tests to src

* update package description

* add used packages to dependencies

* Update URL

* Mention React

packages/gatsby-plugin-page-creator/.gitignore

@@ -0,0 +1,32 @@
+# 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
+
+decls
+dist
+
+/*.js

packages/gatsby-plugin-page-creator/.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-page-creator/README.md

@@ -0,0 +1,36 @@
+# gatsby-plugin-page-creator
+
+Gatsby plugin that automatically creates pages from React components in specified directories. Gatsby
+includes this plugin automatically in all sites for creating pages from components in `src/pages`.
+
+## Install
+
+`npm install --save gatsby-plugin-page-creator`
+
+## How to use
+
+```javascript
+// gatsby-config.js
+
+module.exports = {
+  plugins: [
+    // You can have multiple instances of this plugin
+    // to create pages from React components in different directories.
+    //
+    // The following sets up the pattern of having multiple
+    // "pages" directories in your project
+    {
+      resolve: `gatsby-plugin-page-creator`,
+      options: {
+        path: `${__dirname}/src/account/pages`,
+      },
+    },
+    {
+      resolve: `gatsby-plugin-page-creator`,
+      options: {
+        path: `${__dirname}/src/settings/pages`,
+      },
+    },
+  ],
+};
+```

packages/gatsby-plugin-page-creator/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "gatsby-plugin-page-creator",
+  "version": "1.0.0",
+  "description": "Gatsby plugin that automatically creates pages from React components in specified directories",
+  "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",
+    "gatsby-plugin"
+  ],
+  "author": "Kyle Mathews <mathews.kyle@gmail.com>",
+  "contributors": [
+    "Steven Natera <tektekpush@gmail.com> (https://twitter.com/stevennatera)"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "babel-runtime": "^6.26.0",
+    "bluebird": "^3.5.0",
+    "chokidar": "^1.7.0",
+    "glob": "^7.1.1",
+    "lodash": "^4.17.4",
+    "parse-filepath": "^1.0.1",
+    "slash": "^1.0.0"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "cross-env": "^5.0.5"
+  }
+}

packages/gatsby/src/internal-plugins/component-page-creator/gatsby-node.js → packages/gatsby-plugin-page-creator/src/gatsby-node.js

@@ -3,6 +3,7 @@ const Promise = require(`bluebird`)
 const _ = require(`lodash`)
 const chokidar = require(`chokidar`)
 const systemPath = require(`path`)
+const fs = require(`fs`)
 
 const glob = Promise.promisify(globCB)
 
@@ -15,14 +16,38 @@ const validatePath = require(`./validate-path`)
 // underscored. Then create url w/ our path algorithm *unless* user
 // takes control of that page component in gatsby-node.
 exports.createPagesStatefully = async (
-  { store, boundActionCreators },
-  options,
+  { store, boundActionCreators, reporter },
+  { path: pagesPath, pathCheck = true },
   doneCb
 ) => {
   const { createPage, deletePage } = boundActionCreators
   const program = store.getState().program
   const exts = program.extensions.map(e => `${e.slice(1)}`).join(`,`)
-  const pagesDirectory = systemPath.posix.join(program.directory, `/src/pages`)
+
+  if (!pagesPath) {
+    reporter.panic(
+      `
+      "path" is a required option for gatsby-plugin-page-creator
+
+      See docs here - https://www.gatsbyjs.org/plugins/gatsby-plugin-page-creator/
+      `
+    )
+  }
+
+  // Validate that the path exists.
+  if (pathCheck && !fs.existsSync(pagesPath)) {
+    reporter.panic(
+      `
+      The path passed to gatsby-plugin-page-creator does not exist on your file system:
+
+      ${pagesPath}
+
+      Please pick a path to an existing directory.
+      `
+    )
+  }
+
+  const pagesDirectory = systemPath.posix.join(pagesPath)
   const pagesGlob = `${pagesDirectory}/**/*.{${exts}}`
 
   // Get initial list of files.

packages/gatsby/package.json

@@ -53,6 +53,7 @@
     "gatsby-cli": "^1.1.58",
     "gatsby-link": "^1.6.44",
     "gatsby-module-loader": "^1.0.11",
+    "gatsby-plugin-page-creator": "^1.0.0",
     "gatsby-react-router-scroll": "^1.0.17",
     "glob": "^7.1.1",
     "graphql": "^0.11.7",

packages/gatsby/src/bootstrap/load-plugins/__tests__/__snapshots__/load-plugins.js.snap

@@ -16,20 +16,6 @@ Array [
     "ssrAPIs": Array [],
     "version": "1.0.0",
   },
-  Object {
-    "browserAPIs": Array [],
-    "id": "Plugin component-page-creator",
-    "name": "component-page-creator",
-    "nodeAPIs": Array [
-      "createPagesStatefully",
-    ],
-    "pluginOptions": Object {
-      "plugins": Array [],
-    },
-    "resolve": "",
-    "ssrAPIs": Array [],
-    "version": "1.0.0",
-  },
   Object {
     "browserAPIs": Array [],
     "id": "Plugin component-layout-creator",
@@ -100,29 +86,31 @@ Array [
     "ssrAPIs": Array [],
     "version": "d41d8cd98f00b204e9800998ecf8427e",
   },
-]
-`;
-
-exports[`Load plugins Loads plugins defined with an object but without an option key 1`] = `
-Array [
   Object {
     "browserAPIs": Array [],
-    "id": "Plugin dev-404-page",
-    "name": "dev-404-page",
+    "id": "Plugin gatsby-plugin-page-creator",
+    "name": "gatsby-plugin-page-creator",
     "nodeAPIs": Array [
       "createPagesStatefully",
     ],
     "pluginOptions": Object {
+      "path": "/src/pages",
+      "pathCheck": false,
       "plugins": Array [],
     },
     "resolve": "",
     "ssrAPIs": Array [],
     "version": "1.0.0",
   },
+]
+`;
+
+exports[`Load plugins Loads plugins defined with an object but without an option key 1`] = `
+Array [
   Object {
     "browserAPIs": Array [],
-    "id": "Plugin component-page-creator",
-    "name": "component-page-creator",
+    "id": "Plugin dev-404-page",
+    "name": "dev-404-page",
     "nodeAPIs": Array [
       "createPagesStatefully",
     ],
@@ -213,5 +201,21 @@ Array [
     "ssrAPIs": Array [],
     "version": "d41d8cd98f00b204e9800998ecf8427e",
   },
+  Object {
+    "browserAPIs": Array [],
+    "id": "Plugin gatsby-plugin-page-creator",
+    "name": "gatsby-plugin-page-creator",
+    "nodeAPIs": Array [
+      "createPagesStatefully",
+    ],
+    "pluginOptions": Object {
+      "path": "/src/pages",
+      "pathCheck": false,
+      "plugins": Array [],
+    },
+    "resolve": "",
+    "ssrAPIs": Array [],
+    "version": "1.0.0",
+  },
 ]
 `;

packages/gatsby/src/bootstrap/load-plugins/load.js

@@ -4,6 +4,7 @@ const fs = require(`fs`)
 const path = require(`path`)
 const crypto = require(`crypto`)
 const glob = require(`glob`)
+const { store } = require(`../../redux`)
 
 function createFileContentHash(root, globPattern) {
   const hash = crypto.createHash(`md5`)
@@ -130,7 +131,6 @@ module.exports = async (config = {}) => {
   // Add internal plugins
   const internalPlugins = [
     `../../internal-plugins/dev-404-page`,
-    `../../internal-plugins/component-page-creator`,
     `../../internal-plugins/component-layout-creator`,
     `../../internal-plugins/internal-data-bridge`,
     `../../internal-plugins/prod-404`,
@@ -159,5 +159,14 @@ module.exports = async (config = {}) => {
     },
   })
 
+  const program = store.getState().program
+  plugins.push(processPlugin({
+    resolve: `gatsby-plugin-page-creator`,
+    options: {
+      path: slash(path.join(program.directory, `src/pages`)),
+      pathCheck: false,
+    },
+  }))
+
   return plugins
 }

packages/gatsby/src/internal-plugins/query-runner/pages-writer.js

@@ -169,7 +169,7 @@ emitter.on(`CREATE_PAGE`, () => {
   // we can ignore them until CREATE_PAGE_END is called.
   //
   // After bootstrap, we need to listen for this as stateful page
-  // creators e.g. the internal plugin "component-page-creator"
+  // creators e.g. the plugin "gatsby-plugin-page-creator"
   // calls createPage directly so CREATE_PAGE_END won't get fired.
   if (bootstrapFinished) {
     debouncedWritePages()

packages/gatsby/src/utils/api-node-docs.js

@@ -71,8 +71,8 @@ exports.createPages = true
  * page information as Gatsby's data changes but those implementing
  * `createPagesStatefully` will not.
  *
- * An example of a plugin that uses this extension point is the internal plugin
- * [component-page-creator](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby/src/internal-plugins/component-page-creator)
+ * An example of a plugin that uses this extension point is the plugin
+ * [gatsby-plugin-page-creator](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-page-creator)
  * which monitors the `src/pages` directory for the adding and removal of JS
  * pages. As its source of truth, files in the pages directory, is not known by
  * Gatsby, it needs to keep its own state about its world to know when to