From 561acaa0e998cceda754889e4c687524c7c82d61 Mon Sep 17 00:00:00 2001 From: Jacob Bolda Date: Sat, 19 Aug 2017 09:28:52 -0500 Subject: [PATCH 01/52] layout example structure for templates that javascript can use --- .../gatsby-node.js | 5 +- .../src/templates/blog-post-javascript.js | 100 ++++++++++++++++++ .../{markdown.js => blog-post-markdown.js} | 0 .../src/templates/future-markdown.js | 44 -------- 4 files changed, 103 insertions(+), 46 deletions(-) create mode 100644 examples/using-javascript-transforms/src/templates/blog-post-javascript.js rename examples/using-javascript-transforms/src/templates/{markdown.js => blog-post-markdown.js} (100%) delete mode 100644 examples/using-javascript-transforms/src/templates/future-markdown.js diff --git a/examples/using-javascript-transforms/gatsby-node.js b/examples/using-javascript-transforms/gatsby-node.js index 86adfdcc1e526..468f2b2e074a6 100644 --- a/examples/using-javascript-transforms/gatsby-node.js +++ b/examples/using-javascript-transforms/gatsby-node.js @@ -27,7 +27,8 @@ exports.createPages = ({ graphql, boundActionCreators }) => { return new Promise((resolve, reject) => { const pages = [] - const markdownTemplate = path.resolve(`src/templates/markdown.js`) + const markdownTemplate = path.resolve(`src/templates/blog-post-markdown.js`) + const javascriptTemplate = path.resolve(`src/templates/blog-post-javascript.js`) // Query for all markdown "nodes" and for the slug we previously created. resolve( @@ -107,7 +108,7 @@ exports.createPages = ({ graphql, boundActionCreators }) => { // Note, we can't have a template, but rather require the file directly. // Templates are for converting non-react into react. jsFrontmatter // picks up all of the javascript files. We have only written these in react. - component: path.resolve(edge.node.fileAbsolutePath), + component: javascriptTemplate, context: { layoutType: frontmatter.layoutType, slug: edge.node.fields.slug, diff --git a/examples/using-javascript-transforms/src/templates/blog-post-javascript.js b/examples/using-javascript-transforms/src/templates/blog-post-javascript.js new file mode 100644 index 0000000000000..6985a6854d8ee --- /dev/null +++ b/examples/using-javascript-transforms/src/templates/blog-post-javascript.js @@ -0,0 +1,100 @@ +import React from "react" +import Link from "gatsby-link" +import Helmet from "react-helmet" +import moment from "moment" + +class BlogPostTemplate extends React.Component { + render() { + let frontmatter = this.props.frontmatter + let siteMetadata = this.props.siteMetadata + + const home = ( +
+
+
+ + Home + +
+
+
+ ) + /* + if (frontmatter.updated === null) { + var published = ( +
+

+ + published {moment(frontmatter.written).format(`D MMM YYYY`)} + +

+
+ ) + } else { + var published = ( +
+

+ + originally published{` `} + {moment(frontmatter.written).format(`D MMM YYYY`)} and updated{` `} + {moment(frontmatter.updated).format(`D MMM YYYY`)} + +

+
+ ) + } + + return ( +
+ + + */ + let published =
+ + return ( +
+ {home} +
+ {this.props.children()} +
+
+ {published} +
+

+ {siteMetadata.siteDescr} + +
{siteMetadata.siteAuthor} on Twitter + +

+
+
+ ) + } +} + +export default BlogPostTemplate diff --git a/examples/using-javascript-transforms/src/templates/markdown.js b/examples/using-javascript-transforms/src/templates/blog-post-markdown.js similarity index 100% rename from examples/using-javascript-transforms/src/templates/markdown.js rename to examples/using-javascript-transforms/src/templates/blog-post-markdown.js diff --git a/examples/using-javascript-transforms/src/templates/future-markdown.js b/examples/using-javascript-transforms/src/templates/future-markdown.js deleted file mode 100644 index 5ae2f640d238d..0000000000000 --- a/examples/using-javascript-transforms/src/templates/future-markdown.js +++ /dev/null @@ -1,44 +0,0 @@ -/* -We don't actually use this component at all. -I would like to eventually use this as templates should really - only be concerned about converting non-react (markdown -> html here) into - a react component that we can use. - - -import React from "react" - -class markdownTemplate extends React.Component { - render() { - const data = this.props.data.markdownRemark - - return ( -
-
-
-
-
-
-
- ) - } -} - -export default markdownTemplate - -export const pageQuery = graphql` - query futuremarkdownTemplateBySlug($slug: String!) { - markdownRemark(fields: { slug: { eq: $slug } }) { - html - frontmatter { - title - written - updated - layoutType - path - category - description - } - } - } -` -*/ From 559dc23b70132186f907727a2762bf9994f7f924 Mon Sep 17 00:00:00 2001 From: Jacob Bolda Date: Sat, 19 Aug 2017 09:35:02 -0500 Subject: [PATCH 02/52] uncomment chunks from js template --- .../src/templates/blog-post-javascript.js | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/examples/using-javascript-transforms/src/templates/blog-post-javascript.js b/examples/using-javascript-transforms/src/templates/blog-post-javascript.js index 6985a6854d8ee..513b82e0131b2 100644 --- a/examples/using-javascript-transforms/src/templates/blog-post-javascript.js +++ b/examples/using-javascript-transforms/src/templates/blog-post-javascript.js @@ -19,7 +19,7 @@ class BlogPostTemplate extends React.Component {
) - /* + if (frontmatter.updated === null) { var published = (
@@ -72,12 +72,6 @@ class BlogPostTemplate extends React.Component { { name: `twitter:data2`, content: frontmatter.written }, ]} /> - - */ - let published =
- - return ( -
{home}
{this.props.children()} From 296076d5b80c5a6892380c26d453a18351e89e74 Mon Sep 17 00:00:00 2001 From: Jacob Bolda Date: Sat, 19 Aug 2017 20:44:21 -0500 Subject: [PATCH 03/52] rename markdown post class --- .../src/templates/blog-post-markdown.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/using-javascript-transforms/src/templates/blog-post-markdown.js b/examples/using-javascript-transforms/src/templates/blog-post-markdown.js index 084e5fbc4ca86..dad79ed9e7664 100644 --- a/examples/using-javascript-transforms/src/templates/blog-post-markdown.js +++ b/examples/using-javascript-transforms/src/templates/blog-post-markdown.js @@ -8,7 +8,7 @@ import moment from "moment" import PostPublished from "../components/PostPublished" import HelmetBlock from "../components/HelmetBlock" -class markdownTemplate extends React.Component { +class mdBlogPostTemplate extends React.Component { render() { const data = this.props.data.markdownRemark const html = data.html @@ -30,7 +30,7 @@ class markdownTemplate extends React.Component { } } -export default markdownTemplate +export default mdBlogPostTemplate export const pageQuery = graphql` query markdownTemplateBySlug($slug: String!) { From d06418347f3357cce5b8ffd90a1c62ef7d104a6b Mon Sep 17 00:00:00 2001 From: Jacob Bolda Date: Sat, 19 Aug 2017 20:44:43 -0500 Subject: [PATCH 04/52] simplify js blog post that we can get to console.log --- .../src/templates/blog-post-javascript.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/examples/using-javascript-transforms/src/templates/blog-post-javascript.js b/examples/using-javascript-transforms/src/templates/blog-post-javascript.js index 513b82e0131b2..f1d872999aab8 100644 --- a/examples/using-javascript-transforms/src/templates/blog-post-javascript.js +++ b/examples/using-javascript-transforms/src/templates/blog-post-javascript.js @@ -3,8 +3,16 @@ import Link from "gatsby-link" import Helmet from "react-helmet" import moment from "moment" -class BlogPostTemplate extends React.Component { +class jsBlogPostTemplate extends React.Component { render() { + console.log(this) + + return ( +
+ +
+ ) +/* let frontmatter = this.props.frontmatter let siteMetadata = this.props.siteMetadata @@ -44,6 +52,7 @@ class BlogPostTemplate extends React.Component { ) } + return (
) + */ } } -export default BlogPostTemplate +export default jsBlogPostTemplate From 03b1f9c9cb2fcb304cc5cc5cbc1380c425b48af7 Mon Sep 17 00:00:00 2001 From: Jacob Bolda Date: Sat, 19 Aug 2017 22:36:03 -0500 Subject: [PATCH 05/52] add query to js template --- .../src/templates/blog-post-javascript.js | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/examples/using-javascript-transforms/src/templates/blog-post-javascript.js b/examples/using-javascript-transforms/src/templates/blog-post-javascript.js index f1d872999aab8..25eebb8f74502 100644 --- a/examples/using-javascript-transforms/src/templates/blog-post-javascript.js +++ b/examples/using-javascript-transforms/src/templates/blog-post-javascript.js @@ -102,3 +102,22 @@ class jsBlogPostTemplate extends React.Component { } export default jsBlogPostTemplate +export default jsBlogPostTemplate + +export const pageQuery = graphql` +query javascriptTemplateBySlug($slug: String!) { + jsFrontmatter(fields: { slug: { eq: $slug } }) { + fileAbsolutePath + data { + error + layoutType + path + title + written + updated + category + description + } + } +} +` From bf008a056cea91780476752b4f5e46a573e0fcf2 Mon Sep 17 00:00:00 2001 From: Jacob Bolda Date: Sun, 20 Aug 2017 10:05:45 -0500 Subject: [PATCH 06/52] start working on nested templates --- packages/gatsby/src/joi-schemas/joi.js | 4 ++-- packages/gatsby/src/redux/actions.js | 11 +++++++++-- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/packages/gatsby/src/joi-schemas/joi.js b/packages/gatsby/src/joi-schemas/joi.js index f7f9ded202ed6..a090173129d07 100644 --- a/packages/gatsby/src/joi-schemas/joi.js +++ b/packages/gatsby/src/joi-schemas/joi.js @@ -27,8 +27,8 @@ export const pageSchema = Joi.object() .keys({ path: Joi.string().required(), matchPath: Joi.string(), - component: Joi.string().required(), - componentChunkName: Joi.string().required(), + component: Joi.alternatives().try(Joi.string(), Joi.array()).required(), + componentChunkName: Joi.alternatives().try(Joi.string(), Joi.array()).required(), context: Joi.object(), }) .unknown() diff --git a/packages/gatsby/src/redux/actions.js b/packages/gatsby/src/redux/actions.js index e4b408daf87a1..a41080e072d83 100644 --- a/packages/gatsby/src/redux/actions.js +++ b/packages/gatsby/src/redux/actions.js @@ -50,7 +50,14 @@ const pascalCase = _.flow(_.camelCase, _.upperFirst) * }) */ actions.createPage = (page, plugin = ``, traceId) => { - page.componentChunkName = generateComponentChunkName(page.component) + if (Array.isArray(page.component)) { + page.componentChunkName = [] + page.component.forEach(c => { + page.componentChunkName.push(generateComponentChunkName(c)) + }) + } else { + page.componentChunkName = generateComponentChunkName(page.component) + } let jsonName = `${_.kebabCase(page.path)}.json` let internalComponentName = `Component${pascalCase(page.path)}` @@ -89,7 +96,7 @@ actions.createPage = (page, plugin = ``, traceId) => { if (page.path[0] !== `/`) { page.path = `/` + page.path } - + console.log(page) return { type: `CREATE_PAGE`, plugin, From 8e46c57622088de11cea3b8fac1f53f78b27e7d4 Mon Sep 17 00:00:00 2001 From: Jacob Bolda Date: Sun, 20 Aug 2017 11:17:14 -0500 Subject: [PATCH 07/52] forgot to delete console.log --- packages/gatsby/src/redux/actions.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/gatsby/src/redux/actions.js b/packages/gatsby/src/redux/actions.js index a41080e072d83..0c003dc47f71b 100644 --- a/packages/gatsby/src/redux/actions.js +++ b/packages/gatsby/src/redux/actions.js @@ -52,9 +52,7 @@ const pascalCase = _.flow(_.camelCase, _.upperFirst) actions.createPage = (page, plugin = ``, traceId) => { if (Array.isArray(page.component)) { page.componentChunkName = [] - page.component.forEach(c => { - page.componentChunkName.push(generateComponentChunkName(c)) - }) + page.component.forEach(c => page.componentChunkName.push(generateComponentChunkName(c))) } else { page.componentChunkName = generateComponentChunkName(page.component) } @@ -96,7 +94,7 @@ actions.createPage = (page, plugin = ``, traceId) => { if (page.path[0] !== `/`) { page.path = `/` + page.path } - console.log(page) + return { type: `CREATE_PAGE`, plugin, From b3b0b523d99a70ab336660b74484f91f018efaca Mon Sep 17 00:00:00 2001 From: Jacob Bolda Date: Sun, 20 Aug 2017 11:28:09 -0500 Subject: [PATCH 08/52] update reducers to handle arrays --- packages/gatsby/src/redux/reducers/components.js | 6 +++++- packages/gatsby/src/redux/reducers/pages.js | 6 +++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/gatsby/src/redux/reducers/components.js b/packages/gatsby/src/redux/reducers/components.js index c0b732bad88f1..25820852b8b31 100644 --- a/packages/gatsby/src/redux/reducers/components.js +++ b/packages/gatsby/src/redux/reducers/components.js @@ -7,7 +7,11 @@ module.exports = (state = {}, action) => { return {} case `CREATE_PAGE`: case `CREATE_LAYOUT`: - action.payload.componentPath = normalize(action.payload.component) + action.payload.componentPath = normalize( + Array.isArray(action.payload.component) + ? action.payload.component[0] + : action.payload.component + ) state[action.payload.componentPath] = _.merge( {}, state[action.payload.componentPath], diff --git a/packages/gatsby/src/redux/reducers/pages.js b/packages/gatsby/src/redux/reducers/pages.js index d5f0f6f967f56..15ba34d32e6d6 100644 --- a/packages/gatsby/src/redux/reducers/pages.js +++ b/packages/gatsby/src/redux/reducers/pages.js @@ -6,7 +6,11 @@ module.exports = (state = [], action) => { case `DELETE_CACHE`: return [] case `CREATE_PAGE`: - action.payload.component = normalize(action.payload.component) + if (Array.isArray(action.payload.component)) { + action.payload.component.forEach(c => normalize(c)) + } else { + action.payload.component = normalize(action.payload.component) + } if (!action.plugin && !action.plugin.name) { console.log(``) console.error(JSON.stringify(action, null, 4)) From 6b2ef46610a32ead646bec2305c331e8077c095a Mon Sep 17 00:00:00 2001 From: Jacob Bolda Date: Sun, 20 Aug 2017 20:00:33 -0500 Subject: [PATCH 09/52] change component in gatsby-node example to array --- examples/using-javascript-transforms/gatsby-node.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/examples/using-javascript-transforms/gatsby-node.js b/examples/using-javascript-transforms/gatsby-node.js index 468f2b2e074a6..1b7c234f7349e 100644 --- a/examples/using-javascript-transforms/gatsby-node.js +++ b/examples/using-javascript-transforms/gatsby-node.js @@ -108,7 +108,10 @@ exports.createPages = ({ graphql, boundActionCreators }) => { // Note, we can't have a template, but rather require the file directly. // Templates are for converting non-react into react. jsFrontmatter // picks up all of the javascript files. We have only written these in react. - component: javascriptTemplate, + component: [ + javascriptTemplate, + path.resolve(edge.node.fileAbsolutePath) + ], context: { layoutType: frontmatter.layoutType, slug: edge.node.fields.slug, From c59ee2f40409fc0c1eb381c09ba3ff2297a0a916 Mon Sep 17 00:00:00 2001 From: Jacob Bolda Date: Sun, 20 Aug 2017 20:03:44 -0500 Subject: [PATCH 10/52] comment on expectations in javascript template --- .../src/templates/blog-post-javascript.js | 211 +++++++++--------- 1 file changed, 107 insertions(+), 104 deletions(-) diff --git a/examples/using-javascript-transforms/src/templates/blog-post-javascript.js b/examples/using-javascript-transforms/src/templates/blog-post-javascript.js index 25eebb8f74502..0f32da74c7e2d 100644 --- a/examples/using-javascript-transforms/src/templates/blog-post-javascript.js +++ b/examples/using-javascript-transforms/src/templates/blog-post-javascript.js @@ -1,107 +1,110 @@ -import React from "react" -import Link from "gatsby-link" -import Helmet from "react-helmet" -import moment from "moment" - -class jsBlogPostTemplate extends React.Component { - render() { - console.log(this) - - return ( -
- -
- ) -/* - let frontmatter = this.props.frontmatter - let siteMetadata = this.props.siteMetadata - - const home = ( -
-
-
- - Home - -
-
-
- ) - - if (frontmatter.updated === null) { - var published = ( -
-

- - published {moment(frontmatter.written).format(`D MMM YYYY`)} - -

-
- ) - } else { - var published = ( -
-

- - originally published{` `} - {moment(frontmatter.written).format(`D MMM YYYY`)} and updated{` `} - {moment(frontmatter.updated).format(`D MMM YYYY`)} - -

-
- ) - } - - - return ( -
- - {home} -
- {this.props.children()} -
-
- {published} -
-

- {siteMetadata.siteDescr} - -
{siteMetadata.siteAuthor} on Twitter - -

-
-
- ) - */ - } -} - -export default jsBlogPostTemplate +import React from "react" +import Link from "gatsby-link" +import Helmet from "react-helmet" +import moment from "moment" + +class jsBlogPostTemplate extends React.Component { + render() { + return ( +
+
+ ) +/* + // we might expect to use something like this + // like used in layouts. + {this.props.children()} + + + // we eventually want to use the below + // but comment out for now to gatsby can build + let frontmatter = this.props.frontmatter + let siteMetadata = this.props.siteMetadata + + const home = ( +
+
+
+ + Home + +
+
+
+ ) + + if (frontmatter.updated === null) { + var published = ( +
+

+ + published {moment(frontmatter.written).format(`D MMM YYYY`)} + +

+
+ ) + } else { + var published = ( +
+

+ + originally published{` `} + {moment(frontmatter.written).format(`D MMM YYYY`)} and updated{` `} + {moment(frontmatter.updated).format(`D MMM YYYY`)} + +

+
+ ) + } + + + return ( +
+ + {home} +
+ {this.props.children()} +
+
+ {published} +
+

+ {siteMetadata.siteDescr} + +
{siteMetadata.siteAuthor} on Twitter + +

+
+
+ ) + */ + } +} + export default jsBlogPostTemplate export const pageQuery = graphql` From 39e7d32b25bc1839b2e496f103356a892a50d939 Mon Sep 17 00:00:00 2001 From: Jacob Bolda Date: Sun, 20 Aug 2017 20:05:08 -0500 Subject: [PATCH 11/52] loader will set pageComponent via syncRequires --- packages/gatsby/cache-dir/loader.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/gatsby/cache-dir/loader.js b/packages/gatsby/cache-dir/loader.js index a9280b0565eef..72335494ae9ea 100644 --- a/packages/gatsby/cache-dir/loader.js +++ b/packages/gatsby/cache-dir/loader.js @@ -239,6 +239,7 @@ const queue = { component: syncRequires.components[page.componentChunkName], json: syncRequires.json[page.jsonName], layout: syncRequires.layouts[page.layoutComponentChunkName], + pageComponent: 'we expect the javascript page component here via syncRequires', //we want this as a sync requires page, } cb(pageResources) From f30f3f03de04bb4499d3b4b1436e084b578a5777 Mon Sep 17 00:00:00 2001 From: Jacob Bolda Date: Wed, 23 Aug 2017 07:17:32 -0500 Subject: [PATCH 12/52] mututate createPages component into array always, easier to consider --- packages/gatsby/src/redux/actions.js | 9 ++++++--- packages/gatsby/src/redux/reducers/pages.js | 6 +----- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/packages/gatsby/src/redux/actions.js b/packages/gatsby/src/redux/actions.js index 0c003dc47f71b..0118e87ebf933 100644 --- a/packages/gatsby/src/redux/actions.js +++ b/packages/gatsby/src/redux/actions.js @@ -51,11 +51,14 @@ const pascalCase = _.flow(_.camelCase, _.upperFirst) */ actions.createPage = (page, plugin = ``, traceId) => { if (Array.isArray(page.component)) { - page.componentChunkName = [] - page.component.forEach(c => page.componentChunkName.push(generateComponentChunkName(c))) + page.component.forEach(c => path.normalize(c)) } else { - page.componentChunkName = generateComponentChunkName(page.component) + // make strings into an array so it is easier to reason about (always an array) + // and deals with windows path issues in an array? + page.component = [path.normalize(page.component)] } + page.componentChunkName = [] + page.component.forEach(c => page.componentChunkName.push(generateComponentChunkName(c))) let jsonName = `${_.kebabCase(page.path)}.json` let internalComponentName = `Component${pascalCase(page.path)}` diff --git a/packages/gatsby/src/redux/reducers/pages.js b/packages/gatsby/src/redux/reducers/pages.js index 15ba34d32e6d6..6dd04e8d7f03d 100644 --- a/packages/gatsby/src/redux/reducers/pages.js +++ b/packages/gatsby/src/redux/reducers/pages.js @@ -6,11 +6,7 @@ module.exports = (state = [], action) => { case `DELETE_CACHE`: return [] case `CREATE_PAGE`: - if (Array.isArray(action.payload.component)) { - action.payload.component.forEach(c => normalize(c)) - } else { - action.payload.component = normalize(action.payload.component) - } + action.payload.component.forEach(c => normalize(c)) if (!action.plugin && !action.plugin.name) { console.log(``) console.error(JSON.stringify(action, null, 4)) From 45542c587a9822c57f70e1353e5b116ea9e4de03 Mon Sep 17 00:00:00 2001 From: Jacob Bolda Date: Wed, 23 Aug 2017 07:19:26 -0500 Subject: [PATCH 13/52] update page runners and writers to expect component as array --- .../query-runner/page-query-runner.js | 6 +++++- .../query-runner/pages-writer.js | 19 +++++++++++++------ .../query-runner/query-watcher.js | 2 +- 3 files changed, 19 insertions(+), 8 deletions(-) diff --git a/packages/gatsby/src/internal-plugins/query-runner/page-query-runner.js b/packages/gatsby/src/internal-plugins/query-runner/page-query-runner.js index e5bab5085f0aa..8f94642479413 100644 --- a/packages/gatsby/src/internal-plugins/query-runner/page-query-runner.js +++ b/packages/gatsby/src/internal-plugins/query-runner/page-query-runner.js @@ -81,7 +81,11 @@ const runQueriesForIds = ids => { pl => pl.path === id || `LAYOUT___${pl.id}` === id ) if (plObj) { - return queryRunner(plObj, state.components[plObj.component]) + let pIterable = [] + plObj.component.forEach(c => { + pIterable.push(queryRunner(plObj, state.components[c])) + }) + return Promise.all(pIterable) } }) ) diff --git a/packages/gatsby/src/internal-plugins/query-runner/pages-writer.js b/packages/gatsby/src/internal-plugins/query-runner/pages-writer.js index 13df9db9a8994..f0e7cc044826f 100644 --- a/packages/gatsby/src/internal-plugins/query-runner/pages-writer.js +++ b/packages/gatsby/src/internal-plugins/query-runner/pages-writer.js @@ -53,6 +53,9 @@ const writePages = async () => { pageLayouts = _.uniq(pageLayouts) components = _.uniqBy(components, c => c.componentChunkName) + // returns an array of objects that each contain + // the componentChunkName and component which + // each themselves are arrays await fs.writeFile( joinPath(program.directory, `.cache/pages.json`), @@ -66,9 +69,11 @@ const preferDefault = m => m && m.default || m syncRequires += `exports.components = {\n${components .map( c => - ` "${c.componentChunkName}": preferDefault(require("${joinPath( - c.component - )}"))` + c.component.map((eachComponent, i) => + ` "${c.componentChunkName[i]}": preferDefault(require("${joinPath( + eachComponent + )}"))` + ) ) .join(`,\n`)} }\n\n` @@ -102,9 +107,11 @@ const preferDefault = m => m && m.default || m asyncRequires += `exports.components = {\n${components .map( c => - ` "${c.componentChunkName}": require("gatsby-module-loader?name=${c.componentChunkName}!${joinPath( - c.component - )}")` + c.component.map((eachComponent, i) => + ` "${c.componentChunkName[i]}": require("gatsby-module-loader?name=${c.componentChunkName[i]}!${joinPath( + eachComponent + )}")` + ) ) .join(`,\n`)} }\n\n` diff --git a/packages/gatsby/src/internal-plugins/query-runner/query-watcher.js b/packages/gatsby/src/internal-plugins/query-runner/query-watcher.js index 7a66e24a684d0..89d39bc9d5d21 100644 --- a/packages/gatsby/src/internal-plugins/query-runner/query-watcher.js +++ b/packages/gatsby/src/internal-plugins/query-runner/query-watcher.js @@ -21,7 +21,7 @@ const normalize = require(`normalize-path`) exports.extractQueries = () => { const state = store.getState() const pagesAndLayouts = [...state.pages, ...state.layouts] - const components = _.uniq(pagesAndLayouts.map(p => p.component)) + const components = _.uniq(_.flatten(pagesAndLayouts.map(p => p.component))) const queryCompilerPromise = queryCompiler().then(queries => { components.forEach(component => { const query = queries.get(normalize(component)) From f73cc323ef7d72cd45b0413c07266d6d364cbfda Mon Sep 17 00:00:00 2001 From: Jacob Bolda Date: Wed, 23 Aug 2017 07:24:28 -0500 Subject: [PATCH 14/52] layouts are strings, and run through page-query-runner --- .../query-runner/page-query-runner.js | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/packages/gatsby/src/internal-plugins/query-runner/page-query-runner.js b/packages/gatsby/src/internal-plugins/query-runner/page-query-runner.js index 8f94642479413..16270a0f81d3a 100644 --- a/packages/gatsby/src/internal-plugins/query-runner/page-query-runner.js +++ b/packages/gatsby/src/internal-plugins/query-runner/page-query-runner.js @@ -81,11 +81,17 @@ const runQueriesForIds = ids => { pl => pl.path === id || `LAYOUT___${pl.id}` === id ) if (plObj) { - let pIterable = [] - plObj.component.forEach(c => { - pIterable.push(queryRunner(plObj, state.components[c])) - }) - return Promise.all(pIterable) + // component is always an array, but this runs on layouts + // as well which are expected to be a string + if (Array.isArray(plObj.component)) { + let pIterable = [] + plObj.component.forEach(c => { + pIterable.push(queryRunner(plObj, state.components[c])) + }) + return Promise.all(pIterable) + } else { + return queryRunner(plObj, state.components[plObj.component]) + } } }) ) From 1a66164e066a2ece7776f61fc3dd4ac34e108157 Mon Sep 17 00:00:00 2001 From: Jacob Bolda Date: Wed, 23 Aug 2017 07:24:49 -0500 Subject: [PATCH 15/52] seems the component is undefined sometimes as well? --- .../gatsby/src/internal-plugins/query-runner/query-runner.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/gatsby/src/internal-plugins/query-runner/query-runner.js b/packages/gatsby/src/internal-plugins/query-runner/query-runner.js index 39a2bb3d25769..f90b896c16fd6 100644 --- a/packages/gatsby/src/internal-plugins/query-runner/query-runner.js +++ b/packages/gatsby/src/internal-plugins/query-runner/query-runner.js @@ -19,7 +19,7 @@ module.exports = async (pageOrLayout, component) => { let result // Nothing to do if the query doesn't exist. - if (!component.query || component.query === ``) { + if (!component || !component.query || component.query === ``) { result = {} } else { result = await graphql(component.query, { From 0d9fed7b7d4049ccece225bb47d4c8dd6498d7a8 Mon Sep 17 00:00:00 2001 From: Jacob Bolda Date: Wed, 23 Aug 2017 08:27:16 -0500 Subject: [PATCH 16/52] update layout graphql for new siteMetadata format --- .../src/layouts/index.js | 22 ++++++++----------- 1 file changed, 9 insertions(+), 13 deletions(-) diff --git a/examples/using-javascript-transforms/src/layouts/index.js b/examples/using-javascript-transforms/src/layouts/index.js index 2ffcd54661b9f..ac633c2c4ed35 100644 --- a/examples/using-javascript-transforms/src/layouts/index.js +++ b/examples/using-javascript-transforms/src/layouts/index.js @@ -46,19 +46,15 @@ export default MasterLayout export const pageQuery = graphql` query LayoutBySlug { - allSite { - edges { - node { - siteMetadata { - title - siteDescr - siteAuthor - siteEmailUrl - siteEmailPretty - siteTwitterUrl - siteTwitterPretty - } - } + site { + siteMetadata { + title + siteDescr + siteAuthor + siteEmailUrl + siteEmailPretty + siteTwitterUrl + siteTwitterPretty } } } From fbb0303afc80169676095e7b489d660f72b500e2 Mon Sep 17 00:00:00 2001 From: Jacob Bolda Date: Wed, 23 Aug 2017 08:29:18 -0500 Subject: [PATCH 17/52] forgot to update prop reference --- examples/using-javascript-transforms/src/layouts/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/using-javascript-transforms/src/layouts/index.js b/examples/using-javascript-transforms/src/layouts/index.js index ac633c2c4ed35..aa111f0559c0b 100644 --- a/examples/using-javascript-transforms/src/layouts/index.js +++ b/examples/using-javascript-transforms/src/layouts/index.js @@ -8,7 +8,7 @@ import BlogPost from "./blog-post" class MasterLayout extends React.Component { render() { - let siteMetadata = this.props.data.allSite.edges[0].node.siteMetadata + let siteMetadata = this.props.data.site.siteMetadata let location = this.props.location.pathname let jimmyPage // you jimmy a lock until it opens, so same thing here ;) From 08777c92a6aa3c7be15a0e5e5cc79be791df6b86 Mon Sep 17 00:00:00 2001 From: Jacob Bolda Date: Wed, 23 Aug 2017 10:02:52 -0500 Subject: [PATCH 18/52] loader accepts component as array --- packages/gatsby/cache-dir/loader.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/gatsby/cache-dir/loader.js b/packages/gatsby/cache-dir/loader.js index 72335494ae9ea..80f54891eda80 100644 --- a/packages/gatsby/cache-dir/loader.js +++ b/packages/gatsby/cache-dir/loader.js @@ -236,7 +236,7 @@ const queue = { const page = findPage(path) if (!page) return const pageResources = { - component: syncRequires.components[page.componentChunkName], + component: page.componentChunkName.map(chunk => syncRequires.components[chunk]), json: syncRequires.json[page.jsonName], layout: syncRequires.layouts[page.layoutComponentChunkName], pageComponent: 'we expect the javascript page component here via syncRequires', //we want this as a sync requires From eee56ffe2194aaa6112895508b2ebc18cca48558 Mon Sep 17 00:00:00 2001 From: Jacob Bolda Date: Wed, 23 Aug 2017 12:57:20 -0500 Subject: [PATCH 19/52] nest the templates, data is missing though --- .../src/templates/blog-post-javascript.js | 4 ++- .../src/templates/blog-post-markdown.js | 8 ++--- .../gatsby/cache-dir/component-renderer.js | 5 ++- packages/gatsby/cache-dir/loader.js | 1 - packages/gatsby/cache-dir/root.js | 36 +++++++++++++++---- 5 files changed, 39 insertions(+), 15 deletions(-) diff --git a/examples/using-javascript-transforms/src/templates/blog-post-javascript.js b/examples/using-javascript-transforms/src/templates/blog-post-javascript.js index 0f32da74c7e2d..e2f925bd40d91 100644 --- a/examples/using-javascript-transforms/src/templates/blog-post-javascript.js +++ b/examples/using-javascript-transforms/src/templates/blog-post-javascript.js @@ -5,8 +5,10 @@ import moment from "moment" class jsBlogPostTemplate extends React.Component { render() { + console.log(this) return ( -
+
+ {this.props.children()}
) /* diff --git a/examples/using-javascript-transforms/src/templates/blog-post-markdown.js b/examples/using-javascript-transforms/src/templates/blog-post-markdown.js index dad79ed9e7664..2f5a274405fec 100644 --- a/examples/using-javascript-transforms/src/templates/blog-post-markdown.js +++ b/examples/using-javascript-transforms/src/templates/blog-post-markdown.js @@ -1,8 +1,3 @@ -/* -This is a temporary holdover until we can get queries on layouts. We only use markdown for posts - so we just put some of the layout type things in here such as react-helmet and post publish comments. -*/ - import React from "react" import moment from "moment" import PostPublished from "../components/PostPublished" @@ -10,12 +5,13 @@ import HelmetBlock from "../components/HelmetBlock" class mdBlogPostTemplate extends React.Component { render() { + console.log(this) const data = this.props.data.markdownRemark const html = data.html const frontmatter = data.frontmatter return ( -
+
diff --git a/packages/gatsby/cache-dir/component-renderer.js b/packages/gatsby/cache-dir/component-renderer.js index 727ac65201d14..6b8a15831740f 100644 --- a/packages/gatsby/cache-dir/component-renderer.js +++ b/packages/gatsby/cache-dir/component-renderer.js @@ -14,8 +14,10 @@ const DefaultLayout = ({ children }) => class ComponentRenderer extends React.Component { constructor(props) { super() + console.log(props) this.state = { location: props.location, + componentIndex: props.componentIndex, pageResources: loader.getResourcesForPathname(props.location.pathname), } } @@ -86,7 +88,8 @@ class ComponentRenderer extends React.Component { render() { if (this.props.page) { if (this.state.pageResources) { - return createElement(this.state.pageResources.component, { + console.log(this) + return createElement(this.state.pageResources.component[this.props.componentIndex], { key: this.props.location.pathname, ...this.props, ...this.state.pageResources.json, diff --git a/packages/gatsby/cache-dir/loader.js b/packages/gatsby/cache-dir/loader.js index 80f54891eda80..00418d0f35966 100644 --- a/packages/gatsby/cache-dir/loader.js +++ b/packages/gatsby/cache-dir/loader.js @@ -239,7 +239,6 @@ const queue = { component: page.componentChunkName.map(chunk => syncRequires.components[chunk]), json: syncRequires.json[page.jsonName], layout: syncRequires.layouts[page.layoutComponentChunkName], - pageComponent: 'we expect the javascript page component here via syncRequires', //we want this as a sync requires page, } cb(pageResources) diff --git a/packages/gatsby/cache-dir/root.js b/packages/gatsby/cache-dir/root.js index 98ab2aa61f4e6..f6e95c77f4d33 100644 --- a/packages/gatsby/cache-dir/root.js +++ b/packages/gatsby/cache-dir/root.js @@ -92,6 +92,32 @@ const DefaultRouter = ({ children }) => // parent layout(s), loop through those until finally the // page. Tricky part is avoiding re-mounting I think... +const NestedTemplates = (componentArray, templateIndex, props, pageResources) => { + if (componentArray[templateIndex + 1]) { + // if this is not the last component in the array, + // we will have children + return createElement(ComponentRenderer, { + page: true, + ...props, + pageResources, + componentIndex: templateIndex, + children: routeProps => NestedTemplates(componentArray, templateIndex + 1, props, pageResources) + }) + } else { + // if this is last in the array, we need to render + return createElement(Route, { + render: routeProps => { + return createElement(ComponentRenderer, { + page: true, + ...props, + componentIndex: templateIndex, + pageResources + }) + } + }) + } +} + const Root = () => createElement( AltRouter ? AltRouter : DefaultRouter, @@ -103,18 +129,16 @@ const Root = () => layout: true, children: layoutProps => createElement(Route, { - render: routeProps => { + children: routeProps => { const props = layoutProps ? layoutProps : routeProps attachToHistory(props.history) const pageResources = loader.getResourcesForPathname( props.location.pathname ) if (pageResources) { - return createElement(ComponentRenderer, { - page: true, - ...props, - pageResources, - }) + let templateIndex = 0 + let componentArray = pageResources.component + return NestedTemplates(componentArray, templateIndex, props, pageResources) } else { return addNotFoundRoute() } From 69d612abb80f4b5979ca1db49d2351f08c4d7431 Mon Sep 17 00:00:00 2001 From: Jacob Bolda Date: Wed, 23 Aug 2017 14:17:51 -0500 Subject: [PATCH 20/52] forgot a console.log --- packages/gatsby/cache-dir/component-renderer.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/gatsby/cache-dir/component-renderer.js b/packages/gatsby/cache-dir/component-renderer.js index 6b8a15831740f..8a74e0b4011f7 100644 --- a/packages/gatsby/cache-dir/component-renderer.js +++ b/packages/gatsby/cache-dir/component-renderer.js @@ -14,7 +14,6 @@ const DefaultLayout = ({ children }) => class ComponentRenderer extends React.Component { constructor(props) { super() - console.log(props) this.state = { location: props.location, componentIndex: props.componentIndex, From c2981052b04e7251f262378003251b944f487f75 Mon Sep 17 00:00:00 2001 From: Jacob Bolda Date: Wed, 23 Aug 2017 14:46:22 -0500 Subject: [PATCH 21/52] flatten component requires array --- .../query-runner/pages-writer.js | 27 ++++++++----------- 1 file changed, 11 insertions(+), 16 deletions(-) diff --git a/packages/gatsby/src/internal-plugins/query-runner/pages-writer.js b/packages/gatsby/src/internal-plugins/query-runner/pages-writer.js index 124630fd8dba0..d846eb9de9d45 100644 --- a/packages/gatsby/src/internal-plugins/query-runner/pages-writer.js +++ b/packages/gatsby/src/internal-plugins/query-runner/pages-writer.js @@ -37,9 +37,11 @@ const writePages = async () => { let pageLayouts = [] pages.forEach(p => { - components.push({ - componentChunkName: p.componentChunkName, - component: p.component, + p.component.forEach((c, i) => { + components.push({ + componentChunkName: p.componentChunkName[i], + component: c, + }) }) if (p.layout) { let layout = getLayoutById(layouts)(p.layout) @@ -53,9 +55,6 @@ const writePages = async () => { pageLayouts = _.uniq(pageLayouts) components = _.uniqBy(components, c => c.componentChunkName) - // returns an array of objects that each contain - // the componentChunkName and component which - // each themselves are arrays await fs.writeFile( joinPath(program.directory, `.cache/pages.json`), @@ -69,11 +68,9 @@ const preferDefault = m => m && m.default || m syncRequires += `exports.components = {\n${components .map( c => - c.component.map((eachComponent, i) => - ` "${c.componentChunkName[i]}": preferDefault(require("${joinPath( - eachComponent - )}"))` - ) + ` "${c.componentChunkName}": preferDefault(require("${joinPath( + c.component + )}"))` ) .join(`,\n`)} }\n\n` @@ -107,11 +104,9 @@ const preferDefault = m => m && m.default || m asyncRequires += `exports.components = {\n${components .map( c => - c.component.map((eachComponent, i) => - ` "${c.componentChunkName[i]}": require("gatsby-module-loader?name=${c.componentChunkName[i]}!${joinPath( - eachComponent - )}")` - ) + ` "${c.componentChunkName}": require("gatsby-module-loader?name=${c.componentChunkName}!${joinPath( + c.component + )}")` ) .join(`,\n`)} }\n\n` From e3262347d236855ec76c3123263b84bf12eee4c5 Mon Sep 17 00:00:00 2001 From: Jacob Bolda Date: Wed, 23 Aug 2017 15:03:38 -0500 Subject: [PATCH 22/52] normalize paths otherwise match on path doesn't work --- .../src/internal-plugins/query-runner/page-query-runner.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/gatsby/src/internal-plugins/query-runner/page-query-runner.js b/packages/gatsby/src/internal-plugins/query-runner/page-query-runner.js index 053f79cebd634..927e7407c29ad 100644 --- a/packages/gatsby/src/internal-plugins/query-runner/page-query-runner.js +++ b/packages/gatsby/src/internal-plugins/query-runner/page-query-runner.js @@ -7,6 +7,7 @@ const _ = require(`lodash`) const Promise = require(`bluebird`) +const normalize = require(`normalize-path`) const { store, emitter } = require(`../../redux`) const queryRunner = require(`./query-runner`) @@ -102,7 +103,7 @@ const runQueriesForIds = ids => { if (Array.isArray(plObj.component)) { let pIterable = [] plObj.component.forEach(c => { - pIterable.push(queryRunner(plObj, state.components[c])) + pIterable.push(queryRunner(plObj, state.components[normalize(c)])) }) return Promise.all(pIterable) } else { From 896db9558d5dd6a01da04d836f98f982ddb3b910 Mon Sep 17 00:00:00 2001 From: Jacob Bolda Date: Wed, 23 Aug 2017 15:14:17 -0500 Subject: [PATCH 23/52] clean up console.log --- .../src/templates/blog-post-markdown.js | 1 - packages/gatsby/cache-dir/component-renderer.js | 1 - 2 files changed, 2 deletions(-) diff --git a/examples/using-javascript-transforms/src/templates/blog-post-markdown.js b/examples/using-javascript-transforms/src/templates/blog-post-markdown.js index 2f5a274405fec..1cf451de6da57 100644 --- a/examples/using-javascript-transforms/src/templates/blog-post-markdown.js +++ b/examples/using-javascript-transforms/src/templates/blog-post-markdown.js @@ -5,7 +5,6 @@ import HelmetBlock from "../components/HelmetBlock" class mdBlogPostTemplate extends React.Component { render() { - console.log(this) const data = this.props.data.markdownRemark const html = data.html const frontmatter = data.frontmatter diff --git a/packages/gatsby/cache-dir/component-renderer.js b/packages/gatsby/cache-dir/component-renderer.js index 8a74e0b4011f7..0c340039934c4 100644 --- a/packages/gatsby/cache-dir/component-renderer.js +++ b/packages/gatsby/cache-dir/component-renderer.js @@ -87,7 +87,6 @@ class ComponentRenderer extends React.Component { render() { if (this.props.page) { if (this.state.pageResources) { - console.log(this) return createElement(this.state.pageResources.component[this.props.componentIndex], { key: this.props.location.pathname, ...this.props, From e049687660940d63653af1890f21fced9d697d40 Mon Sep 17 00:00:00 2001 From: Jacob Bolda Date: Wed, 23 Aug 2017 15:49:30 -0500 Subject: [PATCH 24/52] update jsBlogPostTemplate to accept graphql based on page --- .../2017-03-09-choropleth-on-d3v4/index.js | 1 + .../index.js | 1 + .../src/templates/blog-post-javascript.js | 29 +++++++++---------- 3 files changed, 15 insertions(+), 16 deletions(-) diff --git a/examples/using-javascript-transforms/src/articles/2017-03-09-choropleth-on-d3v4/index.js b/examples/using-javascript-transforms/src/articles/2017-03-09-choropleth-on-d3v4/index.js index 5bf9bbf654593..52061d151930b 100644 --- a/examples/using-javascript-transforms/src/articles/2017-03-09-choropleth-on-d3v4/index.js +++ b/examples/using-javascript-transforms/src/articles/2017-03-09-choropleth-on-d3v4/index.js @@ -47,6 +47,7 @@ class choroplethBase extends React.Component { } render() { + console.log(this) let data = this.props.data.markdownRemark let html = data.html let frontmatter = this.props.data.jsFrontmatter.data diff --git a/examples/using-javascript-transforms/src/articles/2017-05-30-choropleth-on-d3v4-alternate/index.js b/examples/using-javascript-transforms/src/articles/2017-05-30-choropleth-on-d3v4-alternate/index.js index 544e0455c31f6..10826b6b59686 100644 --- a/examples/using-javascript-transforms/src/articles/2017-05-30-choropleth-on-d3v4-alternate/index.js +++ b/examples/using-javascript-transforms/src/articles/2017-05-30-choropleth-on-d3v4-alternate/index.js @@ -46,6 +46,7 @@ class choroplethAltBase extends React.Component { } render() { + console.log(this) let data = this.props.data.markdownRemark let html = data.html let frontmatter = this.props.data.jsFrontmatter.data diff --git a/examples/using-javascript-transforms/src/templates/blog-post-javascript.js b/examples/using-javascript-transforms/src/templates/blog-post-javascript.js index e2f925bd40d91..05a0c4a2314c5 100644 --- a/examples/using-javascript-transforms/src/templates/blog-post-javascript.js +++ b/examples/using-javascript-transforms/src/templates/blog-post-javascript.js @@ -6,21 +6,8 @@ import moment from "moment" class jsBlogPostTemplate extends React.Component { render() { console.log(this) - return ( -
- {this.props.children()} -
- ) -/* - // we might expect to use something like this - // like used in layouts. - {this.props.children()} - - - // we eventually want to use the below - // but comment out for now to gatsby can build - let frontmatter = this.props.frontmatter - let siteMetadata = this.props.siteMetadata + let frontmatter = this.props.data.jsFrontmatter.data + let siteMetadata = this.props.data.site.siteMetadata const home = (
@@ -103,7 +90,6 @@ class jsBlogPostTemplate extends React.Component {
) - */ } } @@ -124,5 +110,16 @@ query javascriptTemplateBySlug($slug: String!) { description } } + site { + siteMetadata { + title + siteDescr + siteAuthor + siteEmailUrl + siteEmailPretty + siteTwitterUrl + siteTwitterPretty + } + } } ` From 589755707af1f8106d08cd41eb912f4b062d7c87 Mon Sep 17 00:00:00 2001 From: Jacob Bolda Date: Sat, 2 Sep 2017 23:17:10 -0500 Subject: [PATCH 25/52] add componentChunkName as an object key on josn data --- .../query-runner/query-runner.js | 57 +++++++++++++++++-- .../query-runner/query-watcher.js | 3 + packages/gatsby/src/redux/actions.js | 3 +- .../gatsby/src/redux/reducers/components.js | 1 + 4 files changed, 57 insertions(+), 7 deletions(-) diff --git a/packages/gatsby/src/internal-plugins/query-runner/query-runner.js b/packages/gatsby/src/internal-plugins/query-runner/query-runner.js index f90b896c16fd6..33ba089d2e974 100644 --- a/packages/gatsby/src/internal-plugins/query-runner/query-runner.js +++ b/packages/gatsby/src/internal-plugins/query-runner/query-runner.js @@ -2,7 +2,8 @@ import { graphql as graphqlFunction } from "graphql" const fs = require(`fs`) const Promise = require(`bluebird`) -const writeFileAsync = Promise.promisify(fs.writeFile) +const openFileAsync = Promise.promisify(fs.open) +const writeFileAsync = Promise.promisify(fs.write) const { joinPath } = require(`../../utils/path`) const report = require(`../../reporter`) @@ -61,9 +62,53 @@ module.exports = async (pageOrLayout, component) => { contextKey = `layoutContext` } result[contextKey] = pageOrLayout.context - const resultJSON = JSON.stringify(result, null, 4) - return writeFileAsync( - joinPath(program.directory, `.cache`, `json`, pageOrLayout.jsonName), - resultJSON - ) + const jsonPath = joinPath(program.directory, `.cache`, `json`, pageOrLayout.jsonName) + + if (pageOrLayout.isLayout) { + return openFileAsync(jsonPath, 'w') + .then(fd => { + const resultJSON = JSON.stringify(result, null, 4) + return writeFileAsync(fd, resultJSON) + .then(buffer => { + return + }) + .catch(error => { + throw error + }) + }) + .catch(error => { + throw error + }) + } else { + return openFileAsync(jsonPath, 'w+') + .then(fd => { + let resultCombined = {} + resultCombined[component.componentChunkName] = result + const resultJSON = JSON.stringify(resultCombined, null, 4) + return writeFileAsync(fd, resultJSON) + .then(buffer => { + return + }) + .catch(error => { + throw error + }) + }) + .catch(error => { + if (err.code === 'EEXIST') { + let jsonExistBuffer + fs.readSync(fd, jsonExistBuffer) + const existingJSON = JSON.parse(jsonExistBuffer) + let resultCombined = existingJSON + resultCombined[component.componentChunkName] = result + const resultJSON = JSON.stringify(resultCombined, null, 4) + return writeFileAsync(fd, resultJSON) + .then(buffer => { + return + }) + .catch(error => { + throw error + }) + } else {throw err} + }) + } } diff --git a/packages/gatsby/src/internal-plugins/query-runner/query-watcher.js b/packages/gatsby/src/internal-plugins/query-runner/query-watcher.js index 89d39bc9d5d21..f902d83dafd12 100644 --- a/packages/gatsby/src/internal-plugins/query-runner/query-watcher.js +++ b/packages/gatsby/src/internal-plugins/query-runner/query-watcher.js @@ -17,6 +17,7 @@ const queryCompiler = require(`./query-compiler`).default const queryRunner = require(`./query-runner`) const invariant = require(`invariant`) const normalize = require(`normalize-path`) +import { generateComponentChunkName } from "../../utils/js-chunk-names" exports.extractQueries = () => { const state = store.getState() @@ -28,6 +29,7 @@ exports.extractQueries = () => { boundActionCreators.replaceComponentQuery({ query: query && query.text, componentPath: component, + componentChunkName: generateComponentChunkName(component), }) }) @@ -94,6 +96,7 @@ const watch = rootDir => { boundActionCreators.replaceComponentQuery({ query: text, componentPath: id, + componentChunkName: generateComponentChunkName(id), }) runQueriesForComponent(id) } diff --git a/packages/gatsby/src/redux/actions.js b/packages/gatsby/src/redux/actions.js index 7389f36c81c0c..1b85654f71554 100644 --- a/packages/gatsby/src/redux/actions.js +++ b/packages/gatsby/src/redux/actions.js @@ -526,12 +526,13 @@ actions.deleteComponentsDependencies = paths => { * this to store the query with its component. * @private */ -actions.replaceComponentQuery = ({ query, componentPath }) => { +actions.replaceComponentQuery = ({ query, componentPath, componentChunkName }) => { return { type: `REPLACE_COMPONENT_QUERY`, payload: { query, componentPath, + componentChunkName, }, } } diff --git a/packages/gatsby/src/redux/reducers/components.js b/packages/gatsby/src/redux/reducers/components.js index 25820852b8b31..a45a6fcb70ad8 100644 --- a/packages/gatsby/src/redux/reducers/components.js +++ b/packages/gatsby/src/redux/reducers/components.js @@ -25,6 +25,7 @@ module.exports = (state = {}, action) => { state[action.payload.componentPath] = { ...state[action.payload.componentPath], query: action.payload.query, + componentChunkName: action.payload.componentChunkName, } return state } From c0dbec7fac9564bfe60d3423fd795f3db2b8610b Mon Sep 17 00:00:00 2001 From: Jacob Bolda Date: Mon, 4 Sep 2017 10:45:00 -0500 Subject: [PATCH 26/52] fix json file writing to add to existing json, was overwritting --- .../query-runner/query-runner.js | 59 +++++-------------- 1 file changed, 15 insertions(+), 44 deletions(-) diff --git a/packages/gatsby/src/internal-plugins/query-runner/query-runner.js b/packages/gatsby/src/internal-plugins/query-runner/query-runner.js index 33ba089d2e974..1d2587f2556ab 100644 --- a/packages/gatsby/src/internal-plugins/query-runner/query-runner.js +++ b/packages/gatsby/src/internal-plugins/query-runner/query-runner.js @@ -2,8 +2,6 @@ import { graphql as graphqlFunction } from "graphql" const fs = require(`fs`) const Promise = require(`bluebird`) -const openFileAsync = Promise.promisify(fs.open) -const writeFileAsync = Promise.promisify(fs.write) const { joinPath } = require(`../../utils/path`) const report = require(`../../reporter`) @@ -65,50 +63,23 @@ module.exports = async (pageOrLayout, component) => { const jsonPath = joinPath(program.directory, `.cache`, `json`, pageOrLayout.jsonName) if (pageOrLayout.isLayout) { - return openFileAsync(jsonPath, 'w') - .then(fd => { - const resultJSON = JSON.stringify(result, null, 4) - return writeFileAsync(fd, resultJSON) - .then(buffer => { - return - }) - .catch(error => { - throw error - }) - }) - .catch(error => { - throw error - }) + const resultJSON = JSON.stringify(result, null, 4) + await fs.writeFileSync(jsonPath, resultJSON) } else { - return openFileAsync(jsonPath, 'w+') - .then(fd => { + await new Promise(resolve => { + if (fs.existsSync(jsonPath)) { + let jsonExisting = fs.readFileSync(jsonPath) + const existingJSON = JSON.parse(jsonExisting) + let resultCombined = existingJSON + resultCombined[component.componentChunkName] = result + const resultJSON = JSON.stringify(resultCombined, null, 4) + resolve(fs.writeFileSync(jsonPath, resultJSON)) + } else { let resultCombined = {} resultCombined[component.componentChunkName] = result const resultJSON = JSON.stringify(resultCombined, null, 4) - return writeFileAsync(fd, resultJSON) - .then(buffer => { - return - }) - .catch(error => { - throw error - }) - }) - .catch(error => { - if (err.code === 'EEXIST') { - let jsonExistBuffer - fs.readSync(fd, jsonExistBuffer) - const existingJSON = JSON.parse(jsonExistBuffer) - let resultCombined = existingJSON - resultCombined[component.componentChunkName] = result - const resultJSON = JSON.stringify(resultCombined, null, 4) - return writeFileAsync(fd, resultJSON) - .then(buffer => { - return - }) - .catch(error => { - throw error - }) - } else {throw err} - }) - } + resolve(fs.writeFileSync(jsonPath, resultJSON)) + } + }) + } } From 90f63f130ad85024bccacc2a7958afce34dc665e Mon Sep 17 00:00:00 2001 From: Jacob Bolda Date: Mon, 4 Sep 2017 10:51:01 -0500 Subject: [PATCH 27/52] add component property to look up proper json data using componentChunkName --- .../gatsby/cache-dir/component-renderer.js | 5 +- packages/gatsby/cache-dir/loader.js | 2 +- packages/gatsby/cache-dir/root.js | 62 +++++++++++-------- 3 files changed, 38 insertions(+), 31 deletions(-) diff --git a/packages/gatsby/cache-dir/component-renderer.js b/packages/gatsby/cache-dir/component-renderer.js index 0c340039934c4..efd958733be0f 100644 --- a/packages/gatsby/cache-dir/component-renderer.js +++ b/packages/gatsby/cache-dir/component-renderer.js @@ -16,7 +16,6 @@ class ComponentRenderer extends React.Component { super() this.state = { location: props.location, - componentIndex: props.componentIndex, pageResources: loader.getResourcesForPathname(props.location.pathname), } } @@ -87,10 +86,10 @@ class ComponentRenderer extends React.Component { render() { if (this.props.page) { if (this.state.pageResources) { - return createElement(this.state.pageResources.component[this.props.componentIndex], { + return createElement(this.props.component.componentRender, { key: this.props.location.pathname, ...this.props, - ...this.state.pageResources.json, + ...this.state.pageResources.json[this.props.component.componentChunkName], }) } else { return null diff --git a/packages/gatsby/cache-dir/loader.js b/packages/gatsby/cache-dir/loader.js index 00418d0f35966..e674b04122c78 100644 --- a/packages/gatsby/cache-dir/loader.js +++ b/packages/gatsby/cache-dir/loader.js @@ -236,7 +236,7 @@ const queue = { const page = findPage(path) if (!page) return const pageResources = { - component: page.componentChunkName.map(chunk => syncRequires.components[chunk]), + components: page.componentChunkName.map(chunk => syncRequires.components[chunk]), json: syncRequires.json[page.jsonName], layout: syncRequires.layouts[page.layoutComponentChunkName], page, diff --git a/packages/gatsby/cache-dir/root.js b/packages/gatsby/cache-dir/root.js index f6e95c77f4d33..eb6a453d78d10 100644 --- a/packages/gatsby/cache-dir/root.js +++ b/packages/gatsby/cache-dir/root.js @@ -92,32 +92,6 @@ const DefaultRouter = ({ children }) => // parent layout(s), loop through those until finally the // page. Tricky part is avoiding re-mounting I think... -const NestedTemplates = (componentArray, templateIndex, props, pageResources) => { - if (componentArray[templateIndex + 1]) { - // if this is not the last component in the array, - // we will have children - return createElement(ComponentRenderer, { - page: true, - ...props, - pageResources, - componentIndex: templateIndex, - children: routeProps => NestedTemplates(componentArray, templateIndex + 1, props, pageResources) - }) - } else { - // if this is last in the array, we need to render - return createElement(Route, { - render: routeProps => { - return createElement(ComponentRenderer, { - page: true, - ...props, - componentIndex: templateIndex, - pageResources - }) - } - }) - } -} - const Root = () => createElement( AltRouter ? AltRouter : DefaultRouter, @@ -137,7 +111,7 @@ const Root = () => ) if (pageResources) { let templateIndex = 0 - let componentArray = pageResources.component + let componentArray = pageResources.components return NestedTemplates(componentArray, templateIndex, props, pageResources) } else { return addNotFoundRoute() @@ -148,6 +122,40 @@ const Root = () => ) ) +const NestedTemplates = (componentArray, templateIndex, props, pageResources) => { + if (componentArray[templateIndex + 1]) { + // if this is not the last component in the array, + // we will have children + return createElement(ComponentRenderer, { + page: true, + ...props, + pageResources, + component: { + componentIndex: templateIndex, + componentRender: componentArray[templateIndex], + componentChunkName: pageResources.page.componentChunkName[templateIndex], + }, + children: routeProps => NestedTemplates(componentArray, templateIndex + 1, props, pageResources) + }) + } else { + // if this is last in the array, we need to render + return createElement(Route, { + render: routeProps => { + return createElement(ComponentRenderer, { + page: true, + ...props, + pageResources, + component: { + componentIndex: templateIndex, + componentRender: componentArray[templateIndex], + componentChunkName: pageResources.page.componentChunkName[templateIndex], + }, + }) + } + }) + } +} + // Let site, plugins wrap the site e.g. for Redux. const WrappedRoot = apiRunner(`wrapRootComponent`, { Root }, Root)[0] From 5c9d351eca2bdd52045595160a6a4db62266e49d Mon Sep 17 00:00:00 2001 From: Jacob Bolda Date: Mon, 4 Sep 2017 20:57:49 -0500 Subject: [PATCH 28/52] update example to use js template for blog posts, use new layouts as well --- .../gatsby-node.js | 25 +++-- .../src/components/SiteLinks/index.js | 2 +- .../src/components/SiteSidebar/index.js | 2 +- .../src/layouts/blog-post.js | 100 ------------------ .../src/layouts/blogPost.js | 55 ++++++++++ .../src/layouts/index.js | 61 ----------- .../src/layouts/inset-page.js | 27 ----- .../src/layouts/insetPage.js | 49 +++++++++ .../src/layouts/master.js | 26 +++++ .../src/templates/blog-post-javascript.js | 13 --- 10 files changed, 148 insertions(+), 212 deletions(-) delete mode 100644 examples/using-javascript-transforms/src/layouts/blog-post.js create mode 100644 examples/using-javascript-transforms/src/layouts/blogPost.js delete mode 100644 examples/using-javascript-transforms/src/layouts/index.js delete mode 100644 examples/using-javascript-transforms/src/layouts/inset-page.js create mode 100644 examples/using-javascript-transforms/src/layouts/insetPage.js create mode 100644 examples/using-javascript-transforms/src/layouts/master.js diff --git a/examples/using-javascript-transforms/gatsby-node.js b/examples/using-javascript-transforms/gatsby-node.js index 1b7c234f7349e..93418645f9ea6 100644 --- a/examples/using-javascript-transforms/gatsby-node.js +++ b/examples/using-javascript-transforms/gatsby-node.js @@ -23,7 +23,7 @@ exports.onCreateNode = ({ node, boundActionCreators, getNode }) => { } exports.createPages = ({ graphql, boundActionCreators }) => { - const { createPage } = boundActionCreators + const { createPage, createLayout } = boundActionCreators return new Promise((resolve, reject) => { const pages = [] @@ -77,13 +77,21 @@ exports.createPages = ({ graphql, boundActionCreators }) => { // ideally we would want to use layoutType to // decide which (nested) layout to use, but // gatsby currently doesnt support this. - if ( - frontmatter.layoutType === `post` || - frontmatter.layoutType === `page` - ) { + if (frontmatter.layoutType === `post`) { createPage({ path: frontmatter.path, // required component: markdownTemplate, + layout: 'blogPost', + context: { + layoutType: frontmatter.layoutType, + slug: edge.node.fields.slug, + }, + }) + } else if (frontmatter.layoutType === `page`) { + createPage({ + path: frontmatter.path, // required + component: markdownTemplate, + layout: 'insetPage', context: { layoutType: frontmatter.layoutType, slug: edge.node.fields.slug, @@ -99,10 +107,7 @@ exports.createPages = ({ graphql, boundActionCreators }) => { result.data.allJsFrontmatter.edges.forEach(edge => { let frontmatter = edge.node.data // see above - if ( - frontmatter.layoutType === `post` || - frontmatter.layoutType === `page` - ) { + if (frontmatter.layoutType === `post`) { createPage({ path: frontmatter.path, // required // Note, we can't have a template, but rather require the file directly. @@ -112,6 +117,7 @@ exports.createPages = ({ graphql, boundActionCreators }) => { javascriptTemplate, path.resolve(edge.node.fileAbsolutePath) ], + layout: 'blogPost', context: { layoutType: frontmatter.layoutType, slug: edge.node.fields.slug, @@ -121,6 +127,7 @@ exports.createPages = ({ graphql, boundActionCreators }) => { createPage({ path: `/`, // required, we don't have frontmatter for this page hence separate if() component: path.resolve(edge.node.fileAbsolutePath), + layout: 'insetPage', context: { slug: edge.node.fields.slug, }, diff --git a/examples/using-javascript-transforms/src/components/SiteLinks/index.js b/examples/using-javascript-transforms/src/components/SiteLinks/index.js index 0b1dbd93c6137..98b333e4b3f5a 100644 --- a/examples/using-javascript-transforms/src/components/SiteLinks/index.js +++ b/examples/using-javascript-transforms/src/components/SiteLinks/index.js @@ -13,7 +13,7 @@ class SiteLinks extends React.Component { } render() { - const siteMetadata = this.props.siteMetadata + const siteMetadata = this.props.data.site.siteMetadata return (
diff --git a/examples/using-javascript-transforms/src/components/SiteSidebar/index.js b/examples/using-javascript-transforms/src/components/SiteSidebar/index.js index 32171dc0b14ab..3174a8d04d509 100644 --- a/examples/using-javascript-transforms/src/components/SiteSidebar/index.js +++ b/examples/using-javascript-transforms/src/components/SiteSidebar/index.js @@ -6,7 +6,7 @@ import SiteLinks from "../SiteLinks" class SiteSidebar extends React.Component { render() { const isHome = this.props.location.pathname === `/` - const siteMetadata = this.props.siteMetadata + const siteMetadata = this.props.data.site.siteMetadata // TODO, deal with image more nice like let header = ( diff --git a/examples/using-javascript-transforms/src/layouts/blog-post.js b/examples/using-javascript-transforms/src/layouts/blog-post.js deleted file mode 100644 index 6985a6854d8ee..0000000000000 --- a/examples/using-javascript-transforms/src/layouts/blog-post.js +++ /dev/null @@ -1,100 +0,0 @@ -import React from "react" -import Link from "gatsby-link" -import Helmet from "react-helmet" -import moment from "moment" - -class BlogPostTemplate extends React.Component { - render() { - let frontmatter = this.props.frontmatter - let siteMetadata = this.props.siteMetadata - - const home = ( -
-
-
- - Home - -
-
-
- ) - /* - if (frontmatter.updated === null) { - var published = ( -
-

- - published {moment(frontmatter.written).format(`D MMM YYYY`)} - -

-
- ) - } else { - var published = ( -
-

- - originally published{` `} - {moment(frontmatter.written).format(`D MMM YYYY`)} and updated{` `} - {moment(frontmatter.updated).format(`D MMM YYYY`)} - -

-
- ) - } - - return ( -
- - - */ - let published =
- - return ( -
- {home} -
- {this.props.children()} -
-
- {published} -
-

- {siteMetadata.siteDescr} - -
{siteMetadata.siteAuthor} on Twitter - -

-
-
- ) - } -} - -export default BlogPostTemplate diff --git a/examples/using-javascript-transforms/src/layouts/blogPost.js b/examples/using-javascript-transforms/src/layouts/blogPost.js new file mode 100644 index 0000000000000..26625a42bdff1 --- /dev/null +++ b/examples/using-javascript-transforms/src/layouts/blogPost.js @@ -0,0 +1,55 @@ +import React from "react" +import Link from "gatsby-link" +import Helmet from "react-helmet" +import moment from "moment" + +import MasterLayout from "./master" + +class BlogPostTemplate extends React.Component { + render() { + let siteMetadata = this.props.data.site.siteMetadata + + const home = ( +
+
+
+ + Home + +
+
+
+ ) + + let published =
+ + return ( +
+ + {home} +
+ {this.props.children()} +
+ +
+ ) + } +} + +export default BlogPostTemplate + +export const pageQuery = graphql` +query BlogPostLayoutBySlug { + site { + siteMetadata { + title + siteDescr + siteAuthor + siteEmailUrl + siteEmailPretty + siteTwitterUrl + siteTwitterPretty + } + } +} +` diff --git a/examples/using-javascript-transforms/src/layouts/index.js b/examples/using-javascript-transforms/src/layouts/index.js deleted file mode 100644 index aa111f0559c0b..0000000000000 --- a/examples/using-javascript-transforms/src/layouts/index.js +++ /dev/null @@ -1,61 +0,0 @@ -import React from "react" -import * as PropTypes from "prop-types" -import Helmet from "react-helmet" -import "../static/css/base.scss" - -import InsetPage from "./inset-page" -import BlogPost from "./blog-post" - -class MasterLayout extends React.Component { - render() { - let siteMetadata = this.props.data.site.siteMetadata - let location = this.props.location.pathname - let jimmyPage // you jimmy a lock until it opens, so same thing here ;) - - // let dataSource = this.props.pageResources.json.data - // let nodeType = dataSource.jsFrontmatter || dataSource.markdownRemark - // let frontmatter = nodeType.data || nodeType.frontmatter - let passdown = { - // frontmatter: frontmatter, - location: this.props.location, - siteMetadata: siteMetadata, - children: this.props.children, - } - if (location === `/` || location === `/contact`) { - jimmyPage = - } else { - jimmyPage = - } - - return ( -
- - {jimmyPage} -
- ) - } -} - -export default MasterLayout - -export const pageQuery = graphql` - query LayoutBySlug { - site { - siteMetadata { - title - siteDescr - siteAuthor - siteEmailUrl - siteEmailPretty - siteTwitterUrl - siteTwitterPretty - } - } - } -` diff --git a/examples/using-javascript-transforms/src/layouts/inset-page.js b/examples/using-javascript-transforms/src/layouts/inset-page.js deleted file mode 100644 index 20953146ef9f6..0000000000000 --- a/examples/using-javascript-transforms/src/layouts/inset-page.js +++ /dev/null @@ -1,27 +0,0 @@ -import React from "react" -import SiteSidebar from "../components/SiteSidebar" -// It would be nice to have props with data that we -// that we could push down into the sidebar. We can't -// so we just cheat and pull it out of a yaml for the -// time being. - -class InsetPageTemplate extends React.Component { - render() { - return ( -
-
-
-
- -
-
- {this.props.children()} -
-
-
-
- ) - } -} - -export default InsetPageTemplate diff --git a/examples/using-javascript-transforms/src/layouts/insetPage.js b/examples/using-javascript-transforms/src/layouts/insetPage.js new file mode 100644 index 0000000000000..7ec45d8da336b --- /dev/null +++ b/examples/using-javascript-transforms/src/layouts/insetPage.js @@ -0,0 +1,49 @@ +import React from "react" +import SiteSidebar from "../components/SiteSidebar" + +import MasterLayout from "./master" +// It would be nice to have props with data that we +// that we could push down into the sidebar. We can't +// so we just cheat and pull it out of a yaml for the +// time being. + +class InsetPageTemplate extends React.Component { + render() { + const siteMetadata = this.props.data.site + + return ( +
+ +
+
+
+ +
+
+ {this.props.children()} +
+
+
+ +
+ ) + } +} + +export default InsetPageTemplate + +export const pageQuery = graphql` +query InsetLayoutBySlug { + site { + siteMetadata { + title + siteDescr + siteAuthor + siteEmailUrl + siteEmailPretty + siteTwitterUrl + siteTwitterPretty + } + } +} +` diff --git a/examples/using-javascript-transforms/src/layouts/master.js b/examples/using-javascript-transforms/src/layouts/master.js new file mode 100644 index 0000000000000..5882141ada710 --- /dev/null +++ b/examples/using-javascript-transforms/src/layouts/master.js @@ -0,0 +1,26 @@ +import React from "react" +import * as PropTypes from "prop-types" +import Helmet from "react-helmet" +import "../static/css/base.scss" + +class MasterLayout extends React.Component { + render() { + let siteMetadata = this.props.data.site.siteMetadata + let location = this.props.location.pathname + + return ( +
+ + {this.props.children} +
+ ) + } +} + +export default MasterLayout diff --git a/examples/using-javascript-transforms/src/templates/blog-post-javascript.js b/examples/using-javascript-transforms/src/templates/blog-post-javascript.js index 05a0c4a2314c5..8dff1a67b01f8 100644 --- a/examples/using-javascript-transforms/src/templates/blog-post-javascript.js +++ b/examples/using-javascript-transforms/src/templates/blog-post-javascript.js @@ -9,18 +9,6 @@ class jsBlogPostTemplate extends React.Component { let frontmatter = this.props.data.jsFrontmatter.data let siteMetadata = this.props.data.site.siteMetadata - const home = ( -
-
-
- - Home - -
-
-
- ) - if (frontmatter.updated === null) { var published = (
@@ -74,7 +62,6 @@ class jsBlogPostTemplate extends React.Component { { name: `twitter:data2`, content: frontmatter.written }, ]} /> - {home}
{this.props.children()}
From 845743545dd922d1ebc71ce819098157f5861c3f Mon Sep 17 00:00:00 2001 From: Jacob Bolda Date: Mon, 4 Sep 2017 21:10:47 -0500 Subject: [PATCH 29/52] clarify where layouts come from --- examples/using-javascript-transforms/gatsby-node.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/examples/using-javascript-transforms/gatsby-node.js b/examples/using-javascript-transforms/gatsby-node.js index 93418645f9ea6..3b01665aac653 100644 --- a/examples/using-javascript-transforms/gatsby-node.js +++ b/examples/using-javascript-transforms/gatsby-node.js @@ -81,7 +81,7 @@ exports.createPages = ({ graphql, boundActionCreators }) => { createPage({ path: frontmatter.path, // required component: markdownTemplate, - layout: 'blogPost', + layout: 'blogPost', // this matches the filename of src/layouts/blogPost.js, layout created automatically context: { layoutType: frontmatter.layoutType, slug: edge.node.fields.slug, @@ -91,7 +91,7 @@ exports.createPages = ({ graphql, boundActionCreators }) => { createPage({ path: frontmatter.path, // required component: markdownTemplate, - layout: 'insetPage', + layout: 'insetPage', // this matches the filename of src/layouts/insetPage.js, layout created automatically context: { layoutType: frontmatter.layoutType, slug: edge.node.fields.slug, @@ -117,7 +117,7 @@ exports.createPages = ({ graphql, boundActionCreators }) => { javascriptTemplate, path.resolve(edge.node.fileAbsolutePath) ], - layout: 'blogPost', + layout: 'blogPost', // this matches the filename of src/layouts/blogPost.js, layout created automatically context: { layoutType: frontmatter.layoutType, slug: edge.node.fields.slug, @@ -127,7 +127,7 @@ exports.createPages = ({ graphql, boundActionCreators }) => { createPage({ path: `/`, // required, we don't have frontmatter for this page hence separate if() component: path.resolve(edge.node.fileAbsolutePath), - layout: 'insetPage', + layout: 'insetPage', // this matches the filename of src/layouts/insetPage.js, layout created automatically context: { slug: edge.node.fields.slug, }, From 36a280dc83d89017e4da35f2a374abe760fb790a Mon Sep 17 00:00:00 2001 From: Jacob Bolda Date: Thu, 7 Sep 2017 19:47:08 -0500 Subject: [PATCH 30/52] add scripts to help in core dev --- examples/using-javascript-transforms/package.json | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/examples/using-javascript-transforms/package.json b/examples/using-javascript-transforms/package.json index 0d1dae940caa8..a8c3cd71a3175 100644 --- a/examples/using-javascript-transforms/package.json +++ b/examples/using-javascript-transforms/package.json @@ -5,11 +5,12 @@ "main": "index.js", "scripts": { "develop": "node_modules/.bin/gatsby develop", - "dev:hard": "rm -rf .cache && rm -rf public && npm run develop", + "dev:hard": "npm run clean && npm run develop", "build": "npm run clean & .\\node_modules\\.bin\\gatsby build", "serve": "node_modules/.bin/gatsby serve", - "clean:public": "rm -rf public & mkdir public", - "clean": "npm run clean:public", + "clean:public": "rm -rf public", + "clean:cache": "rm -rf .cache", + "clean": "npm run clean:public && npm run clean:cache", "lint": "./node_modules/.bin/eslint --ext .js,.jsx --ignore-pattern public .", "test": "echo \"Error: no test specified\" && exit 1" }, From 6ed22422766d8e1b3989989b56ddc35add0ad0ac Mon Sep 17 00:00:00 2001 From: Jacob Bolda Date: Thu, 7 Sep 2017 20:44:20 -0500 Subject: [PATCH 31/52] delete files that didn't delete in the upstream merge? --- .../src/layouts/index.js | 61 ------------------- .../src/layouts/inset-page.js | 25 -------- 2 files changed, 86 deletions(-) delete mode 100644 examples/using-javascript-transforms/src/layouts/index.js delete mode 100644 examples/using-javascript-transforms/src/layouts/inset-page.js diff --git a/examples/using-javascript-transforms/src/layouts/index.js b/examples/using-javascript-transforms/src/layouts/index.js deleted file mode 100644 index aa111f0559c0b..0000000000000 --- a/examples/using-javascript-transforms/src/layouts/index.js +++ /dev/null @@ -1,61 +0,0 @@ -import React from "react" -import * as PropTypes from "prop-types" -import Helmet from "react-helmet" -import "../static/css/base.scss" - -import InsetPage from "./inset-page" -import BlogPost from "./blog-post" - -class MasterLayout extends React.Component { - render() { - let siteMetadata = this.props.data.site.siteMetadata - let location = this.props.location.pathname - let jimmyPage // you jimmy a lock until it opens, so same thing here ;) - - // let dataSource = this.props.pageResources.json.data - // let nodeType = dataSource.jsFrontmatter || dataSource.markdownRemark - // let frontmatter = nodeType.data || nodeType.frontmatter - let passdown = { - // frontmatter: frontmatter, - location: this.props.location, - siteMetadata: siteMetadata, - children: this.props.children, - } - if (location === `/` || location === `/contact`) { - jimmyPage = - } else { - jimmyPage = - } - - return ( -
- - {jimmyPage} -
- ) - } -} - -export default MasterLayout - -export const pageQuery = graphql` - query LayoutBySlug { - site { - siteMetadata { - title - siteDescr - siteAuthor - siteEmailUrl - siteEmailPretty - siteTwitterUrl - siteTwitterPretty - } - } - } -` diff --git a/examples/using-javascript-transforms/src/layouts/inset-page.js b/examples/using-javascript-transforms/src/layouts/inset-page.js deleted file mode 100644 index da747b217d01e..0000000000000 --- a/examples/using-javascript-transforms/src/layouts/inset-page.js +++ /dev/null @@ -1,25 +0,0 @@ -import React from "react" -import SiteSidebar from "../components/SiteSidebar" -// It would be nice to have props with data that we -// that we could push down into the sidebar. We can't -// so we just cheat and pull it out of a yaml for the -// time being. - -class InsetPageTemplate extends React.Component { - render() { - return ( -
-
-
-
- -
-
{this.props.children()}
-
-
-
- ) - } -} - -export default InsetPageTemplate From b6798b0ced375abf4d363e6f037a3e007dc0bbac Mon Sep 17 00:00:00 2001 From: Jacob Bolda Date: Thu, 7 Sep 2017 21:25:37 -0500 Subject: [PATCH 32/52] sometimes dates on frontmatter are undefined which throws errors on JSON.parse (from #1964) --- packages/gatsby/src/schema/infer-graphql-type.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/gatsby/src/schema/infer-graphql-type.js b/packages/gatsby/src/schema/infer-graphql-type.js index 0a3285d8ed8ee..5fc7839f5ccb4 100644 --- a/packages/gatsby/src/schema/infer-graphql-type.js +++ b/packages/gatsby/src/schema/infer-graphql-type.js @@ -129,7 +129,7 @@ function inferGraphQLType({ }, }, resolve(object, { fromNow, difference, formatString }) { - const date = JSON.parse(JSON.stringify(object[fieldName])) + const date = object[fieldName] == undefined ? object[fieldName] : JSON.parse(JSON.stringify(object[fieldName])) if (formatString) { return moment.utc(date, ISO_8601_FORMAT, true).format(formatString) } else if (fromNow) { From c2c38889713beda5bf90070c244f43242f7ca63a Mon Sep 17 00:00:00 2001 From: Jacob Bolda Date: Sat, 9 Sep 2017 11:24:53 -0500 Subject: [PATCH 33/52] update production files, build completes, error on loader during serve --- .../src/templates/blog-post-markdown.js | 4 +- packages/gatsby/cache-dir/production-app.js | 44 +++++++++++++++++-- packages/gatsby/cache-dir/static-entry.js | 32 +++++++++++--- 3 files changed, 68 insertions(+), 12 deletions(-) diff --git a/examples/using-javascript-transforms/src/templates/blog-post-markdown.js b/examples/using-javascript-transforms/src/templates/blog-post-markdown.js index 1cf451de6da57..946296fbc7a91 100644 --- a/examples/using-javascript-transforms/src/templates/blog-post-markdown.js +++ b/examples/using-javascript-transforms/src/templates/blog-post-markdown.js @@ -5,9 +5,7 @@ import HelmetBlock from "../components/HelmetBlock" class mdBlogPostTemplate extends React.Component { render() { - const data = this.props.data.markdownRemark - const html = data.html - const frontmatter = data.frontmatter + const {html, frontmatter} = this.props.data.markdownRemark return (
diff --git a/packages/gatsby/cache-dir/production-app.js b/packages/gatsby/cache-dir/production-app.js index b1a64e82ee03a..d50a624c131bc 100644 --- a/packages/gatsby/cache-dir/production-app.js +++ b/packages/gatsby/cache-dir/production-app.js @@ -125,10 +125,12 @@ apiRunnerAsync(`onClientEntry`).then(() => { const props = layoutProps ? layoutProps : routeProps if (loader.getPage(props.location.pathname)) { - return createElement(ComponentRenderer, { - page: true, - ...props, - }) + const pageResources = loader.getResourcesForPathname( + props.location.pathname + ) + let templateIndex = 0 + let componentArray = pageResources.components + return NestedTemplates(componentArray, templateIndex, props, pageResources) } else { return createElement(ComponentRenderer, { location: { page: true, pathname: `/404.html` }, @@ -140,6 +142,40 @@ apiRunnerAsync(`onClientEntry`).then(() => { ) ) + const NestedTemplates = (componentArray, templateIndex, props, pageResources) => { + if (componentArray[templateIndex + 1]) { + // if this is not the last component in the array, + // we will have children + return createElement(ComponentRenderer, { + page: true, + ...props, + pageResources, + component: { + componentIndex: templateIndex, + componentRender: componentArray[templateIndex], + componentChunkName: pageResources.page.componentChunkName[templateIndex], + }, + children: routeProps => NestedTemplates(componentArray, templateIndex + 1, props, pageResources) + }) + } else { + // if this is last in the array, we need to render + return createElement(Route, { + render: routeProps => { + return createElement(ComponentRenderer, { + page: true, + ...props, + pageResources, + component: { + componentIndex: templateIndex, + componentRender: componentArray[templateIndex], + componentChunkName: pageResources.page.componentChunkName[templateIndex], + }, + }) + } + }) + } + } + const NewRoot = apiRunner(`wrapRootComponent`, { Root }, Root)[0] domReady(() => ReactDOM.render( diff --git a/packages/gatsby/cache-dir/static-entry.js b/packages/gatsby/cache-dir/static-entry.js index 10fbc79be23ef..b91291f2ccdd9 100644 --- a/packages/gatsby/cache-dir/static-entry.js +++ b/packages/gatsby/cache-dir/static-entry.js @@ -87,16 +87,38 @@ module.exports = (locals, callback) => { const layout = getLayout(page) return $(withRouter(layout), { ...props, - children: props => - $(syncRequires.components[page.componentChunkName], { - ...props, - ...syncRequires.json[page.jsonName], - }), + children: props => nestedComponents( + 0, + page.jsonName, + page.componentChunkName, + props + ) }) }, }) ) + let nestedComponents = (templateIndex, jsonName, componentChunkName, props) => { + let thisChunk = componentChunkName[templateIndex] + if (!componentChunkName[templateIndex + 1]) { + return $(syncRequires.components[thisChunk], { + ...props, + ...syncRequires.json[jsonName][thisChunk], + }) + } else { + return $(syncRequires.components[thisChunk], { + ...props, + ...syncRequires.json[jsonName][thisChunk], + children: props => nestedComponents( + templateIndex + 1, + jsonName, + componentChunkName, + props + ) + }) + } + } + // Let the site or plugin render the page component. apiRunner(`replaceRenderer`, { bodyComponent, From 7d9aee73f6c10895a849ed38c5008dade2877c4c Mon Sep 17 00:00:00 2001 From: Jacob Bolda Date: Sat, 9 Sep 2017 11:40:25 -0500 Subject: [PATCH 34/52] delete console.log before I forget --- .../src/templates/blog-post-javascript.js | 1 - 1 file changed, 1 deletion(-) diff --git a/examples/using-javascript-transforms/src/templates/blog-post-javascript.js b/examples/using-javascript-transforms/src/templates/blog-post-javascript.js index 8dff1a67b01f8..0f033c0535a73 100644 --- a/examples/using-javascript-transforms/src/templates/blog-post-javascript.js +++ b/examples/using-javascript-transforms/src/templates/blog-post-javascript.js @@ -5,7 +5,6 @@ import moment from "moment" class jsBlogPostTemplate extends React.Component { render() { - console.log(this) let frontmatter = this.props.data.jsFrontmatter.data let siteMetadata = this.props.data.site.siteMetadata From 3f8445155ff7a2a08fa436193bfd1d90109d0e25 Mon Sep 17 00:00:00 2001 From: Jacob Bolda Date: Sat, 9 Sep 2017 12:34:01 -0500 Subject: [PATCH 35/52] missed a few more console.log --- .../src/articles/2017-03-09-choropleth-on-d3v4/index.js | 1 - .../articles/2017-05-30-choropleth-on-d3v4-alternate/index.js | 1 - 2 files changed, 2 deletions(-) diff --git a/examples/using-javascript-transforms/src/articles/2017-03-09-choropleth-on-d3v4/index.js b/examples/using-javascript-transforms/src/articles/2017-03-09-choropleth-on-d3v4/index.js index 881849911e005..b7dcc7d99c6ab 100644 --- a/examples/using-javascript-transforms/src/articles/2017-03-09-choropleth-on-d3v4/index.js +++ b/examples/using-javascript-transforms/src/articles/2017-03-09-choropleth-on-d3v4/index.js @@ -47,7 +47,6 @@ class choroplethBase extends React.Component { } render() { - console.log(this) let data = this.props.data.markdownRemark let html = data.html let frontmatter = this.props.data.jsFrontmatter.data diff --git a/examples/using-javascript-transforms/src/articles/2017-05-30-choropleth-on-d3v4-alternate/index.js b/examples/using-javascript-transforms/src/articles/2017-05-30-choropleth-on-d3v4-alternate/index.js index cdb8b40a42c1f..cc2fef4210f46 100644 --- a/examples/using-javascript-transforms/src/articles/2017-05-30-choropleth-on-d3v4-alternate/index.js +++ b/examples/using-javascript-transforms/src/articles/2017-05-30-choropleth-on-d3v4-alternate/index.js @@ -46,7 +46,6 @@ class choroplethAltBase extends React.Component { } render() { - console.log(this) let data = this.props.data.markdownRemark let html = data.html let frontmatter = this.props.data.jsFrontmatter.data From a54f9877863cc8db5d7eedf9617a70f5552f988a Mon Sep 17 00:00:00 2001 From: Jacob Bolda Date: Wed, 13 Sep 2017 07:07:13 -0500 Subject: [PATCH 36/52] fixing various loader errors, still errors on js hyerate on page --- packages/gatsby/cache-dir/loader.js | 29 ++++++++++++++------- packages/gatsby/cache-dir/production-app.js | 4 +-- 2 files changed, 21 insertions(+), 12 deletions(-) diff --git a/packages/gatsby/cache-dir/loader.js b/packages/gatsby/cache-dir/loader.js index e674b04122c78..2529dcce4cca0 100644 --- a/packages/gatsby/cache-dir/loader.js +++ b/packages/gatsby/cache-dir/loader.js @@ -25,6 +25,8 @@ if (process.env.NODE_ENV === `production`) { prefetcher = require(`./prefetcher`)({ getNextQueuedResources: () => resourcesArray.slice(-1)[0], createResourceDownload: resourceName => { + console.log(resourceName) + console.log(resourcesArray) fetchResource(resourceName, () => { resourcesArray = resourcesArray.filter(r => r !== resourceName) prefetcher.onResourcedFinished(resourceName) @@ -270,16 +272,21 @@ const queue = { emitter.emit(`onPreLoadPageResources`, { path }) // Nope, we need to load resource(s) - let component + let components = [] let json let layout // Load the component/json/layout and parallel and call this // function when they're done loading. When both are loaded, // we move on. const done = () => { - if (component && json && (!page.layoutComponentChunkName || layout)) { - pathScriptsCache[path] = { component, json, layout } - const pageResources = { component, json, layout } + if (components.length === page.componentChunkName.length && json && (!page.layoutComponentChunkName || layout)) { + pathScriptsCache[path] = { components, page, json, layout } + const pageResources = { + components, + page, + json, + layout + } cb(pageResources) emitter.emit(`onPostLoadPageResources`, { page, @@ -287,12 +294,14 @@ const queue = { }) } } - getResourceModule(page.componentChunkName, (err, c) => { - if (err) { - console.log(`Loading the component for ${page.path} failed`) - } - component = c - done() + page.componentChunkName.forEach(thisChunk => { + getResourceModule(thisChunk, (err, c) => { + if (err) { + console.log(`Loading the component for ${page.path} failed`) + } + components.push(c) + done() + }) }) getResourceModule(page.jsonName, (err, j) => { if (err) { diff --git a/packages/gatsby/cache-dir/production-app.js b/packages/gatsby/cache-dir/production-app.js index d50a624c131bc..47835fc678718 100644 --- a/packages/gatsby/cache-dir/production-app.js +++ b/packages/gatsby/cache-dir/production-app.js @@ -153,7 +153,7 @@ apiRunnerAsync(`onClientEntry`).then(() => { component: { componentIndex: templateIndex, componentRender: componentArray[templateIndex], - componentChunkName: pageResources.page.componentChunkName[templateIndex], + // componentChunkName: pageResources.page.componentChunkName[templateIndex], }, children: routeProps => NestedTemplates(componentArray, templateIndex + 1, props, pageResources) }) @@ -168,7 +168,7 @@ apiRunnerAsync(`onClientEntry`).then(() => { component: { componentIndex: templateIndex, componentRender: componentArray[templateIndex], - componentChunkName: pageResources.page.componentChunkName[templateIndex], + // componentChunkName: pageResources.page.componentChunkName[templateIndex], }, }) } From a74bb78a075df9ef997a48b4b14ff9b871f133c3 Mon Sep 17 00:00:00 2001 From: Jacob Bolda Date: Fri, 15 Sep 2017 22:31:34 -0500 Subject: [PATCH 37/52] simplify article variables --- .../src/articles/2017-03-09-choropleth-on-d3v4/index.js | 6 +++--- .../2017-05-30-choropleth-on-d3v4-alternate/index.js | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/examples/using-javascript-transforms/src/articles/2017-03-09-choropleth-on-d3v4/index.js b/examples/using-javascript-transforms/src/articles/2017-03-09-choropleth-on-d3v4/index.js index b7dcc7d99c6ab..ba4be9bf8f042 100644 --- a/examples/using-javascript-transforms/src/articles/2017-03-09-choropleth-on-d3v4/index.js +++ b/examples/using-javascript-transforms/src/articles/2017-03-09-choropleth-on-d3v4/index.js @@ -47,9 +47,9 @@ class choroplethBase extends React.Component { } render() { - let data = this.props.data.markdownRemark - let html = data.html - let frontmatter = this.props.data.jsFrontmatter.data + let {markdownRemark, jsFrontmatter} = this.props.data + let html = markdownRemark.html + let frontmatter = jsFrontmatter.data return (
diff --git a/examples/using-javascript-transforms/src/articles/2017-05-30-choropleth-on-d3v4-alternate/index.js b/examples/using-javascript-transforms/src/articles/2017-05-30-choropleth-on-d3v4-alternate/index.js index cc2fef4210f46..bb3f683c83897 100644 --- a/examples/using-javascript-transforms/src/articles/2017-05-30-choropleth-on-d3v4-alternate/index.js +++ b/examples/using-javascript-transforms/src/articles/2017-05-30-choropleth-on-d3v4-alternate/index.js @@ -46,9 +46,9 @@ class choroplethAltBase extends React.Component { } render() { - let data = this.props.data.markdownRemark - let html = data.html - let frontmatter = this.props.data.jsFrontmatter.data + let {markdownRemark, jsFrontmatter} = this.props.data + let html = markdownRemark.html + let frontmatter = jsFrontmatter.data return (
From 6fe38ee4cc52b0f1f0422907d2c8120ec7afe59b Mon Sep 17 00:00:00 2001 From: Jacob Bolda Date: Fri, 15 Sep 2017 22:32:06 -0500 Subject: [PATCH 38/52] now componentChunkName can be set in prod-app --- packages/gatsby/cache-dir/production-app.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/gatsby/cache-dir/production-app.js b/packages/gatsby/cache-dir/production-app.js index 47835fc678718..d50a624c131bc 100644 --- a/packages/gatsby/cache-dir/production-app.js +++ b/packages/gatsby/cache-dir/production-app.js @@ -153,7 +153,7 @@ apiRunnerAsync(`onClientEntry`).then(() => { component: { componentIndex: templateIndex, componentRender: componentArray[templateIndex], - // componentChunkName: pageResources.page.componentChunkName[templateIndex], + componentChunkName: pageResources.page.componentChunkName[templateIndex], }, children: routeProps => NestedTemplates(componentArray, templateIndex + 1, props, pageResources) }) @@ -168,7 +168,7 @@ apiRunnerAsync(`onClientEntry`).then(() => { component: { componentIndex: templateIndex, componentRender: componentArray[templateIndex], - // componentChunkName: pageResources.page.componentChunkName[templateIndex], + componentChunkName: pageResources.page.componentChunkName[templateIndex], }, }) } From 478adb680da56e5286079085550a5d8f4d24cfd7 Mon Sep 17 00:00:00 2001 From: Jacob Bolda Date: Fri, 15 Sep 2017 22:32:42 -0500 Subject: [PATCH 39/52] loader.fetchResource doesn't expect an array --- packages/gatsby/cache-dir/loader.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/gatsby/cache-dir/loader.js b/packages/gatsby/cache-dir/loader.js index 2529dcce4cca0..a811adbcfae3c 100644 --- a/packages/gatsby/cache-dir/loader.js +++ b/packages/gatsby/cache-dir/loader.js @@ -25,11 +25,12 @@ if (process.env.NODE_ENV === `production`) { prefetcher = require(`./prefetcher`)({ getNextQueuedResources: () => resourcesArray.slice(-1)[0], createResourceDownload: resourceName => { - console.log(resourceName) - console.log(resourcesArray) - fetchResource(resourceName, () => { - resourcesArray = resourcesArray.filter(r => r !== resourceName) - prefetcher.onResourcedFinished(resourceName) + resourceName = Array.isArray(resourceName) ? resourceName : [resourceName] + resourceName.forEach((rName) => { + fetchResource(rName, () => { + resourcesArray = resourcesArray.filter(r => r !== rName) + prefetcher.onResourcedFinished(rName) + }) }) }, }) From ec15bdd38e81024b6b21fd504a67db93771d1151 Mon Sep 17 00:00:00 2001 From: Jacob Bolda Date: Sun, 17 Sep 2017 17:25:49 -0500 Subject: [PATCH 40/52] update test snapshots --build-all --- .../__snapshots__/gatsby-node.js.snap | 2 +- .../__tests__/__snapshots__/pages.js.snap | 56 ++++++++++++++----- 2 files changed, 43 insertions(+), 15 deletions(-) diff --git a/packages/gatsby-transformer-documentationjs/src/__tests__/__snapshots__/gatsby-node.js.snap b/packages/gatsby-transformer-documentationjs/src/__tests__/__snapshots__/gatsby-node.js.snap index 45e6fd766758b..12d8f143c72ba 100644 --- a/packages/gatsby-transformer-documentationjs/src/__tests__/__snapshots__/gatsby-node.js.snap +++ b/packages/gatsby-transformer-documentationjs/src/__tests__/__snapshots__/gatsby-node.js.snap @@ -40,7 +40,7 @@ apple()", ], "id": "documentationJS node_1 comment #0", "internal": Object { - "contentDigest": "b635e85506044a6cdcebbcd7fda00b7d", + "contentDigest": "e33923a8e75f9ca85da87ace4a55d47e", "type": "DocumentationJs", }, "kind": "constant", diff --git a/packages/gatsby/src/redux/__tests__/__snapshots__/pages.js.snap b/packages/gatsby/src/redux/__tests__/__snapshots__/pages.js.snap index 6a3f22341a24a..f9e35f8436660 100644 --- a/packages/gatsby/src/redux/__tests__/__snapshots__/pages.js.snap +++ b/packages/gatsby/src/redux/__tests__/__snapshots__/pages.js.snap @@ -3,8 +3,12 @@ exports[`Add pages allows you to add multiple pages 1`] = ` Array [ Object { - "component": "/whatever/index.js", - "componentChunkName": "component---whatever-index-js", + "component": Array [ + "\\\\whatever\\\\index.js", + ], + "componentChunkName": Array [ + "component---whatever-index-js", + ], "context": Object {}, "internalComponentName": "ComponentHi", "jsonName": "hi.json", @@ -14,8 +18,12 @@ Array [ "updatedAt": 1482363367071, }, Object { - "component": "/whatever/index.js", - "componentChunkName": "component---whatever-index-js", + "component": Array [ + "\\\\whatever\\\\index.js", + ], + "componentChunkName": Array [ + "component---whatever-index-js", + ], "context": Object {}, "internalComponentName": "ComponentHiPizza", "jsonName": "hi-pizza.json", @@ -30,8 +38,12 @@ Array [ exports[`Add pages allows you to add pages 1`] = ` Object { "payload": Object { - "component": "/whatever/index.js", - "componentChunkName": "component---whatever-index-js", + "component": Array [ + "\\\\whatever\\\\index.js", + ], + "componentChunkName": Array [ + "component---whatever-index-js", + ], "context": Object {}, "internalComponentName": "ComponentHi", "jsonName": "hi.json", @@ -52,8 +64,12 @@ Object { exports[`Add pages allows you to add pages 2`] = ` Array [ Object { - "component": "/whatever/index.js", - "componentChunkName": "component---whatever-index-js", + "component": Array [ + "\\\\whatever\\\\index.js", + ], + "componentChunkName": Array [ + "component---whatever-index-js", + ], "context": Object {}, "internalComponentName": "ComponentHi", "jsonName": "hi.json", @@ -68,8 +84,12 @@ Array [ exports[`Add pages allows you to add pages with context 1`] = ` Object { "payload": Object { - "component": "/whatever/index.js", - "componentChunkName": "component---whatever-index-js", + "component": Array [ + "\\\\whatever\\\\index.js", + ], + "componentChunkName": Array [ + "component---whatever-index-js", + ], "context": Object { "id": 123, }, @@ -92,8 +112,12 @@ Object { exports[`Add pages allows you to add pages with context 2`] = ` Array [ Object { - "component": "/whatever/index.js", - "componentChunkName": "component---whatever-index-js", + "component": Array [ + "\\\\whatever\\\\index.js", + ], + "componentChunkName": Array [ + "component---whatever-index-js", + ], "context": Object { "id": 123, }, @@ -112,8 +136,12 @@ exports[`Add pages allows you to delete paths 1`] = `Array []`; exports[`Add pages allows you to update existing pages (based on path) 1`] = ` Array [ Object { - "component": "/whatever2/index.js", - "componentChunkName": "component---whatever-2-index-js", + "component": Array [ + "\\\\whatever2\\\\index.js", + ], + "componentChunkName": Array [ + "component---whatever-2-index-js", + ], "context": Object {}, "internalComponentName": "ComponentHi", "jsonName": "hi.json", From ea011fdbc7d3287b63231e964ec5ade0d7ad2d96 Mon Sep 17 00:00:00 2001 From: Jacob Bolda Date: Mon, 18 Sep 2017 21:26:02 -0500 Subject: [PATCH 41/52] update snapshot with normalized path --- .../__tests__/__snapshots__/highlight-code.js.snap | 4 ++-- .../redux/__tests__/__snapshots__/pages.js.snap | 14 +++++++------- packages/gatsby/src/redux/actions.js | 5 +++-- 3 files changed, 12 insertions(+), 11 deletions(-) diff --git a/packages/gatsby-remark-prismjs/src/__tests__/__snapshots__/highlight-code.js.snap b/packages/gatsby-remark-prismjs/src/__tests__/__snapshots__/highlight-code.js.snap index f548d6d028e57..1570d1bf44578 100644 --- a/packages/gatsby-remark-prismjs/src/__tests__/__snapshots__/highlight-code.js.snap +++ b/packages/gatsby-remark-prismjs/src/__tests__/__snapshots__/highlight-code.js.snap @@ -24,10 +24,10 @@ exports[`highlight code and lines with PrismJS for language jsx 1`] = ` <div> <h1>Counter</h1> <p>current count: {this.state.count}</p> - <button onClick={() => this.setState({ count: this.state.count + 1 })}> + <button onClick={() => this.setState({ count: this.state.count + 1 })}> plus </button> - <button onClick={() => this.setState({ count: this.state.count - 1 })}> + <button onClick={() => this.setState({ count: this.state.count - 1 })}> minus </button> </div> diff --git a/packages/gatsby/src/redux/__tests__/__snapshots__/pages.js.snap b/packages/gatsby/src/redux/__tests__/__snapshots__/pages.js.snap index f9e35f8436660..76e2e8fc3b89b 100644 --- a/packages/gatsby/src/redux/__tests__/__snapshots__/pages.js.snap +++ b/packages/gatsby/src/redux/__tests__/__snapshots__/pages.js.snap @@ -4,7 +4,7 @@ exports[`Add pages allows you to add multiple pages 1`] = ` Array [ Object { "component": Array [ - "\\\\whatever\\\\index.js", + "/whatever/index.js", ], "componentChunkName": Array [ "component---whatever-index-js", @@ -19,7 +19,7 @@ Array [ }, Object { "component": Array [ - "\\\\whatever\\\\index.js", + "/whatever/index.js", ], "componentChunkName": Array [ "component---whatever-index-js", @@ -39,7 +39,7 @@ exports[`Add pages allows you to add pages 1`] = ` Object { "payload": Object { "component": Array [ - "\\\\whatever\\\\index.js", + "/whatever/index.js", ], "componentChunkName": Array [ "component---whatever-index-js", @@ -65,7 +65,7 @@ exports[`Add pages allows you to add pages 2`] = ` Array [ Object { "component": Array [ - "\\\\whatever\\\\index.js", + "/whatever/index.js", ], "componentChunkName": Array [ "component---whatever-index-js", @@ -85,7 +85,7 @@ exports[`Add pages allows you to add pages with context 1`] = ` Object { "payload": Object { "component": Array [ - "\\\\whatever\\\\index.js", + "/whatever/index.js", ], "componentChunkName": Array [ "component---whatever-index-js", @@ -113,7 +113,7 @@ exports[`Add pages allows you to add pages with context 2`] = ` Array [ Object { "component": Array [ - "\\\\whatever\\\\index.js", + "/whatever/index.js", ], "componentChunkName": Array [ "component---whatever-index-js", @@ -137,7 +137,7 @@ exports[`Add pages allows you to update existing pages (based on path) 1`] = ` Array [ Object { "component": Array [ - "\\\\whatever2\\\\index.js", + "/whatever2/index.js", ], "componentChunkName": Array [ "component---whatever-2-index-js", diff --git a/packages/gatsby/src/redux/actions.js b/packages/gatsby/src/redux/actions.js index e6ada62066c3f..06aba6b662a13 100644 --- a/packages/gatsby/src/redux/actions.js +++ b/packages/gatsby/src/redux/actions.js @@ -8,6 +8,7 @@ const glob = require(`glob`) const path = require(`path`) const { joinPath } = require(`../utils/path`) +const normalize = require(`normalize-path`) const { getNode, hasNodeChanged } = require(`./index`) const { store } = require(`./index`) import * as joiSchemas from "../joi-schemas/joi" @@ -51,11 +52,11 @@ const pascalCase = _.flow(_.camelCase, _.upperFirst) */ actions.createPage = (page, plugin = ``, traceId) => { if (Array.isArray(page.component)) { - page.component.forEach(c => path.normalize(c)) + page.component.forEach(c => normalize(c)) } else { // make strings into an array so it is easier to reason about (always an array) // and deals with windows path issues in an array? - page.component = [path.normalize(page.component)] + page.component = [normalize(page.component)] } page.componentChunkName = [] page.component.forEach(c => page.componentChunkName.push(generateComponentChunkName(c))) From a6a505afffb02a9388dec68191d404ced032850d Mon Sep 17 00:00:00 2001 From: Jacob Bolda Date: Mon, 18 Sep 2017 21:34:34 -0500 Subject: [PATCH 42/52] idk why this changed the first time... --- .../src/__tests__/__snapshots__/highlight-code.js.snap | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/gatsby-remark-prismjs/src/__tests__/__snapshots__/highlight-code.js.snap b/packages/gatsby-remark-prismjs/src/__tests__/__snapshots__/highlight-code.js.snap index 1570d1bf44578..f548d6d028e57 100644 --- a/packages/gatsby-remark-prismjs/src/__tests__/__snapshots__/highlight-code.js.snap +++ b/packages/gatsby-remark-prismjs/src/__tests__/__snapshots__/highlight-code.js.snap @@ -24,10 +24,10 @@ exports[`highlight code and lines with PrismJS for language jsx 1`] = ` <div> <h1>Counter</h1> <p>current count: {this.state.count}</p> - <button onClick={() => this.setState({ count: this.state.count + 1 })}> + <button onClick={() => this.setState({ count: this.state.count + 1 })}> plus </button> - <button onClick={() => this.setState({ count: this.state.count - 1 })}> + <button onClick={() => this.setState({ count: this.state.count - 1 })}> minus </button> </div> From 77ef756ff85764a90da9bfef59b783f204ab0f08 Mon Sep 17 00:00:00 2001 From: Jacob Bolda Date: Mon, 18 Sep 2017 21:56:34 -0500 Subject: [PATCH 43/52] update docjs snapshot --build-all --- .../src/__tests__/__snapshots__/gatsby-node.js.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/gatsby-transformer-documentationjs/src/__tests__/__snapshots__/gatsby-node.js.snap b/packages/gatsby-transformer-documentationjs/src/__tests__/__snapshots__/gatsby-node.js.snap index 12d8f143c72ba..45e6fd766758b 100644 --- a/packages/gatsby-transformer-documentationjs/src/__tests__/__snapshots__/gatsby-node.js.snap +++ b/packages/gatsby-transformer-documentationjs/src/__tests__/__snapshots__/gatsby-node.js.snap @@ -40,7 +40,7 @@ apple()", ], "id": "documentationJS node_1 comment #0", "internal": Object { - "contentDigest": "e33923a8e75f9ca85da87ace4a55d47e", + "contentDigest": "b635e85506044a6cdcebbcd7fda00b7d", "type": "DocumentationJs", }, "kind": "constant", From 3909cae37966e33461f1f5dbf6f3dc49db230270 Mon Sep 17 00:00:00 2001 From: Jacob Bolda Date: Tue, 19 Sep 2017 19:47:38 -0500 Subject: [PATCH 44/52] merge from upstream --- packages/gatsby-source-filesystem/index.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 packages/gatsby-source-filesystem/index.js diff --git a/packages/gatsby-source-filesystem/index.js b/packages/gatsby-source-filesystem/index.js new file mode 100644 index 0000000000000..caf3aa8e9cdb5 --- /dev/null +++ b/packages/gatsby-source-filesystem/index.js @@ -0,0 +1,12 @@ +"use strict"; + +const fs = require(`fs-extra`); + +function loadNodeContent(fileNode) { + return fs.readFile(fileNode.absolutePath, `utf-8`); +} + +exports.createFilePath = require(`./create-file-path`); +exports.createRemoteFileNode = require(`./create-remote-file-node`); + +exports.loadNodeContent = loadNodeContent; \ No newline at end of file From b1113cd94585b982a53bec51de7663bda6eb0dda Mon Sep 17 00:00:00 2001 From: Jacob Bolda Date: Tue, 19 Sep 2017 20:30:36 -0500 Subject: [PATCH 45/52] template restructure (psuedo code because all the installs broke) --- .../gatsby-node.js | 24 ++-- .../src/templates/blog-post-javascript.js | 111 ------------------ ...post-markdown.js => blog-post-template.js} | 8 +- .../src/templates/markdown.js | 23 ++++ 4 files changed, 43 insertions(+), 123 deletions(-) delete mode 100644 examples/using-javascript-transforms/src/templates/blog-post-javascript.js rename examples/using-javascript-transforms/src/templates/{blog-post-markdown.js => blog-post-template.js} (81%) create mode 100644 examples/using-javascript-transforms/src/templates/markdown.js diff --git a/examples/using-javascript-transforms/gatsby-node.js b/examples/using-javascript-transforms/gatsby-node.js index c799950e05198..9617b31099075 100644 --- a/examples/using-javascript-transforms/gatsby-node.js +++ b/examples/using-javascript-transforms/gatsby-node.js @@ -27,8 +27,8 @@ exports.createPages = ({ graphql, boundActionCreators }) => { return new Promise((resolve, reject) => { const pages = [] - const markdownTemplate = path.resolve(`src/templates/blog-post-markdown.js`) - const javascriptTemplate = path.resolve(`src/templates/blog-post-javascript.js`) + const blogPostTemplate = path.resolve(`src/templates/blog-post-template.js`) + const markdownTemplate = path.resolve(`src/templates/markdown.js`) // Query for all markdown "nodes" and for the slug we previously created. resolve( @@ -39,8 +39,14 @@ exports.createPages = ({ graphql, boundActionCreators }) => { edges { node { frontmatter { - layoutType + title path + layoutType + written + updated + what + category + description } fields { slug @@ -80,10 +86,13 @@ exports.createPages = ({ graphql, boundActionCreators }) => { if (frontmatter.layoutType === `post`) { createPage({ path: frontmatter.path, // required - component: markdownTemplate, + component: [ + blogPostTemplate, + markdownTemplate + ], layout: 'blogPost', // this matches the filename of src/layouts/blogPost.js, layout created automatically context: { - layoutType: frontmatter.layoutType, + frontmatter: frontmatter, slug: edge.node.fields.slug, }, }) @@ -93,7 +102,6 @@ exports.createPages = ({ graphql, boundActionCreators }) => { component: markdownTemplate, layout: 'insetPage', // this matches the filename of src/layouts/insetPage.js, layout created automatically context: { - layoutType: frontmatter.layoutType, slug: edge.node.fields.slug, }, }) @@ -114,12 +122,12 @@ exports.createPages = ({ graphql, boundActionCreators }) => { // Templates are for converting non-react into react. jsFrontmatter // picks up all of the javascript files. We have only written these in react. component: [ - javascriptTemplate, + blogPostTemplate, path.resolve(edge.node.fileAbsolutePath) ], layout: 'blogPost', // this matches the filename of src/layouts/blogPost.js, layout created automatically context: { - layoutType: frontmatter.layoutType, + frontmatter: frontmatter, slug: edge.node.fields.slug, }, }) diff --git a/examples/using-javascript-transforms/src/templates/blog-post-javascript.js b/examples/using-javascript-transforms/src/templates/blog-post-javascript.js deleted file mode 100644 index 0f033c0535a73..0000000000000 --- a/examples/using-javascript-transforms/src/templates/blog-post-javascript.js +++ /dev/null @@ -1,111 +0,0 @@ -import React from "react" -import Link from "gatsby-link" -import Helmet from "react-helmet" -import moment from "moment" - -class jsBlogPostTemplate extends React.Component { - render() { - let frontmatter = this.props.data.jsFrontmatter.data - let siteMetadata = this.props.data.site.siteMetadata - - if (frontmatter.updated === null) { - var published = ( -
-

- - published {moment(frontmatter.written).format(`D MMM YYYY`)} - -

-
- ) - } else { - var published = ( -
-

- - originally published{` `} - {moment(frontmatter.written).format(`D MMM YYYY`)} and updated{` `} - {moment(frontmatter.updated).format(`D MMM YYYY`)} - -

-
- ) - } - - - return ( -
- -
- {this.props.children()} -
-
- {published} -
-

- {siteMetadata.siteDescr} - -
{siteMetadata.siteAuthor} on Twitter - -

-
-
- ) - } -} - -export default jsBlogPostTemplate - -export const pageQuery = graphql` -query javascriptTemplateBySlug($slug: String!) { - jsFrontmatter(fields: { slug: { eq: $slug } }) { - fileAbsolutePath - data { - error - layoutType - path - title - written - updated - category - description - } - } - site { - siteMetadata { - title - siteDescr - siteAuthor - siteEmailUrl - siteEmailPretty - siteTwitterUrl - siteTwitterPretty - } - } -} -` diff --git a/examples/using-javascript-transforms/src/templates/blog-post-markdown.js b/examples/using-javascript-transforms/src/templates/blog-post-template.js similarity index 81% rename from examples/using-javascript-transforms/src/templates/blog-post-markdown.js rename to examples/using-javascript-transforms/src/templates/blog-post-template.js index 946296fbc7a91..3cde9a8a8edc4 100644 --- a/examples/using-javascript-transforms/src/templates/blog-post-markdown.js +++ b/examples/using-javascript-transforms/src/templates/blog-post-template.js @@ -8,12 +8,12 @@ class mdBlogPostTemplate extends React.Component { const {html, frontmatter} = this.props.data.markdownRemark return ( -
+
-
-
-
+
+
+ {this.props.children()}
diff --git a/examples/using-javascript-transforms/src/templates/markdown.js b/examples/using-javascript-transforms/src/templates/markdown.js new file mode 100644 index 0000000000000..64240dc344ff3 --- /dev/null +++ b/examples/using-javascript-transforms/src/templates/markdown.js @@ -0,0 +1,23 @@ +import React from "react" + +class mdTemplate extends React.Component { + render() { + const {html} = this.props.data.markdownRemark + + return ( +
+
+
+ ) + } +} + +export default mdBlogPostTemplate + +export const pageQuery = graphql` + query markdownTemplateBySlug($slug: String!) { + markdownRemark(fields: { slug: { eq: $slug } }) { + html + } + } +` From d17f355475392562ab90f913c472d453f0251084 Mon Sep 17 00:00:00 2001 From: Jacob Bolda Date: Wed, 20 Sep 2017 19:59:45 -0500 Subject: [PATCH 46/52] finish off using-js template pseudo code --- .../gatsby-node.js | 6 + .../src/mainPages/contact.js | 2 - .../src/templates/blog-post-template.js | 24 +--- .../src/templates/markdown.js | 2 +- yarn.lock | 117 ++++++++++++++++-- 5 files changed, 116 insertions(+), 35 deletions(-) diff --git a/examples/using-javascript-transforms/gatsby-node.js b/examples/using-javascript-transforms/gatsby-node.js index 9617b31099075..e64ec938518f0 100644 --- a/examples/using-javascript-transforms/gatsby-node.js +++ b/examples/using-javascript-transforms/gatsby-node.js @@ -59,8 +59,14 @@ exports.createPages = ({ graphql, boundActionCreators }) => { node { fileAbsolutePath data { + error layoutType path + title + written + updated + category + description } fields { slug diff --git a/examples/using-javascript-transforms/src/mainPages/contact.js b/examples/using-javascript-transforms/src/mainPages/contact.js index 0fdf0d94a3798..17f9d551206f9 100644 --- a/examples/using-javascript-transforms/src/mainPages/contact.js +++ b/examples/using-javascript-transforms/src/mainPages/contact.js @@ -1,6 +1,4 @@ import React from "react" -import Helmet from "react-helmet" -import SiteLinks from "../components/SiteLinks" exports.data = { layoutType: `page`, diff --git a/examples/using-javascript-transforms/src/templates/blog-post-template.js b/examples/using-javascript-transforms/src/templates/blog-post-template.js index 3cde9a8a8edc4..518e19f44ef23 100644 --- a/examples/using-javascript-transforms/src/templates/blog-post-template.js +++ b/examples/using-javascript-transforms/src/templates/blog-post-template.js @@ -3,9 +3,9 @@ import moment from "moment" import PostPublished from "../components/PostPublished" import HelmetBlock from "../components/HelmetBlock" -class mdBlogPostTemplate extends React.Component { +class generalBlogPostTemplate extends React.Component { render() { - const {html, frontmatter} = this.props.data.markdownRemark + const {frontmatter} = this.props.pathContext return (
@@ -23,22 +23,4 @@ class mdBlogPostTemplate extends React.Component { } } -export default mdBlogPostTemplate - -export const pageQuery = graphql` - query markdownTemplateBySlug($slug: String!) { - markdownRemark(fields: { slug: { eq: $slug } }) { - html - frontmatter { - title - path - layoutType - written - updated - what - category - description - } - } - } -` +export default generalBlogPostTemplate diff --git a/examples/using-javascript-transforms/src/templates/markdown.js b/examples/using-javascript-transforms/src/templates/markdown.js index 64240dc344ff3..8e4a50cea8fef 100644 --- a/examples/using-javascript-transforms/src/templates/markdown.js +++ b/examples/using-javascript-transforms/src/templates/markdown.js @@ -12,7 +12,7 @@ class mdTemplate extends React.Component { } } -export default mdBlogPostTemplate +export default mdTemplate export const pageQuery = graphql` query markdownTemplateBySlug($slug: String!) { diff --git a/yarn.lock b/yarn.lock index 94f7fae626103..c96546e374bd1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -100,7 +100,7 @@ ajv@^4.7.0, ajv@^4.9.1: co "^4.6.0" json-stable-stringify "^1.0.1" -ajv@^5.0.0, ajv@^5.2.0: +ajv@^5.0.0, ajv@^5.1.0, ajv@^5.2.0: version "5.2.2" resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.2.2.tgz#47c68d69e86f5d953103b0074a9430dc63da5e39" dependencies: @@ -434,7 +434,11 @@ aws-sign2@~0.6.0: version "0.6.0" resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f" -aws4@^1.2.1: +aws-sign2@~0.7.0: + version "0.7.0" + resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8" + +aws4@^1.2.1, aws4@^1.6.0: version "1.6.0" resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e" @@ -1674,6 +1678,18 @@ boom@2.x.x, boom@^2.5.x, boom@^2.7.2: dependencies: hoek "2.x.x" +boom@4.x.x: + version "4.3.1" + resolved "https://registry.yarnpkg.com/boom/-/boom-4.3.1.tgz#4f8a3005cb4a7e3889f749030fd25b96e01d2e31" + dependencies: + hoek "4.x.x" + +boom@5.x.x: + version "5.2.0" + resolved "https://registry.yarnpkg.com/boom/-/boom-5.2.0.tgz#5dd9da6ee3a5f302077436290cb717d3f4a54e02" + dependencies: + hoek "4.x.x" + bowser@^1.7.3: version "1.7.3" resolved "https://registry.yarnpkg.com/bowser/-/bowser-1.7.3.tgz#504bdb43118ca8db9cbbadf28fd60f265af96e4f" @@ -2222,8 +2238,8 @@ circular-json@^0.3.1: resolved "https://registry.yarnpkg.com/circular-json/-/circular-json-0.3.3.tgz#815c99ea84f6809529d2f45791bdf82711352d66" clap@^1.0.9: - version "1.2.2" - resolved "https://registry.yarnpkg.com/clap/-/clap-1.2.2.tgz#683f6f93a320794d129386d74b2a1d2d66fede7e" + version "1.2.3" + resolved "https://registry.yarnpkg.com/clap/-/clap-1.2.3.tgz#4f36745b32008492557f46412d66d50cb99bce51" dependencies: chalk "^1.1.3" @@ -2990,6 +3006,12 @@ cryptiles@2.x.x: dependencies: boom "2.x.x" +cryptiles@3.x.x: + version "3.1.2" + resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-3.1.2.tgz#a89fbb220f5ce25ec56e8c4aa8a4fd7b5b0d29fe" + dependencies: + boom "5.x.x" + crypto-browserify@3.3.0: version "3.3.0" resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.3.0.tgz#b9fc75bb4a0ed61dcf1cd5dae96eb30c9c3e506c" @@ -4364,7 +4386,7 @@ extend-shallow@^2.0.1: dependencies: is-extendable "^0.1.0" -extend@^3.0.0, extend@~3.0.0: +extend@^3.0.0, extend@~3.0.0, extend@~3.0.1: version "3.0.1" resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444" @@ -4767,6 +4789,14 @@ form-data@~2.1.1: combined-stream "^1.0.5" mime-types "^2.1.12" +form-data@~2.3.1: + version "2.3.1" + resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.1.tgz#6fb94fbd71885306d73d15cc497fe4cc4ecd44bf" + dependencies: + asynckit "^0.4.0" + combined-stream "^1.0.5" + mime-types "^2.1.12" + forwarded@~0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.0.tgz#19ef9874c4ae1c297bcf078fde63a09b66a84363" @@ -5365,6 +5395,10 @@ har-schema@^1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-1.0.5.tgz#d263135f43307c02c602afc8fe95970c0151369e" +har-schema@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92" + har-validator@~4.2.1: version "4.2.1" resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-4.2.1.tgz#33481d0f1bbff600dd203d75812a6a5fba002e2a" @@ -5372,6 +5406,13 @@ har-validator@~4.2.1: ajv "^4.9.1" har-schema "^1.0.5" +har-validator@~5.0.3: + version "5.0.3" + resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.0.3.tgz#ba402c266194f15956ef15e0fcf242993f6a7dfd" + dependencies: + ajv "^5.1.0" + har-schema "^2.0.0" + has-ansi@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91" @@ -5508,6 +5549,15 @@ hawk@~3.1.3: hoek "2.x.x" sntp "1.x.x" +hawk@~6.0.2: + version "6.0.2" + resolved "https://registry.yarnpkg.com/hawk/-/hawk-6.0.2.tgz#af4d914eb065f9b5ce4d9d11c1cb2126eecc3038" + dependencies: + boom "4.x.x" + cryptiles "3.x.x" + hoek "4.x.x" + sntp "2.x.x" + heavy@3.x.x: version "3.0.1" resolved "https://registry.yarnpkg.com/heavy/-/heavy-3.0.1.tgz#f2867e6e3515bf83ab1a8bb1e73e5d28e85ab3cd" @@ -5646,6 +5696,14 @@ http-signature@~1.1.0: jsprim "^1.2.2" sshpk "^1.7.0" +http-signature@~1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1" + dependencies: + assert-plus "^1.0.0" + jsprim "^1.2.2" + sshpk "^1.7.0" + https-browserify@0.0.1: version "0.0.1" resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.1.tgz#3f91365cabe60b77ed0ebba24b454e3e09d95a82" @@ -7859,7 +7917,7 @@ mime-types@^2.1.12, mime-types@~2.1.11, mime-types@~2.1.15, mime-types@~2.1.7: dependencies: mime-db "~1.29.0" -mime-types@~2.1.16: +mime-types@~2.1.16, mime-types@~2.1.17: version "2.1.17" resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.17.tgz#09d7a393f03e995a79f8af857b70a9e0ab16557a" dependencies: @@ -8392,7 +8450,7 @@ nyc@^7.0.0: yargs "^4.8.1" yargs-parser "^2.4.1" -oauth-sign@~0.8.1: +oauth-sign@~0.8.1, oauth-sign@~0.8.2: version "0.8.2" resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43" @@ -8871,6 +8929,10 @@ performance-now@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5" +performance-now@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b" + pez@1.x.x: version "1.0.0" resolved "https://registry.yarnpkg.com/pez/-/pez-1.0.0.tgz#844318a5ce7092eeddffa295e18079ac779fa018" @@ -9741,7 +9803,7 @@ qs@6.5.0: version "6.5.0" resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.0.tgz#8d04954d364def3efc55b5a0793e1e2c8b1e6e49" -qs@^6.1.0, qs@^6.4.0: +qs@^6.1.0, qs@^6.4.0, qs@~6.5.1: version "6.5.1" resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.1.tgz#349cdf6eef89ec45c12d7d5eb3fc0c870343a6d8" @@ -10467,7 +10529,34 @@ replace-ext@1.0.0, replace-ext@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-1.0.0.tgz#de63128373fcbf7c3ccfa4de5a480c45a67958eb" -request@2, request@^2.58.0, request@^2.67.0, request@^2.72.0, request@^2.74.0, request@^2.79.0, request@^2.81.0: +request@2, request@^2.58.0, request@^2.67.0, request@^2.72.0, request@^2.74.0: + version "2.82.0" + resolved "https://registry.yarnpkg.com/request/-/request-2.82.0.tgz#2ba8a92cd7ac45660ea2b10a53ae67cd247516ea" + dependencies: + aws-sign2 "~0.7.0" + aws4 "^1.6.0" + caseless "~0.12.0" + combined-stream "~1.0.5" + extend "~3.0.1" + forever-agent "~0.6.1" + form-data "~2.3.1" + har-validator "~5.0.3" + hawk "~6.0.2" + http-signature "~1.2.0" + is-typedarray "~1.0.0" + isstream "~0.1.2" + json-stringify-safe "~5.0.1" + mime-types "~2.1.17" + oauth-sign "~0.8.2" + performance-now "^2.1.0" + qs "~6.5.1" + safe-buffer "^5.1.1" + stringstream "~0.0.5" + tough-cookie "~2.3.2" + tunnel-agent "^0.6.0" + uuid "^3.1.0" + +request@^2.79.0, request@^2.81.0: version "2.81.0" resolved "https://registry.yarnpkg.com/request/-/request-2.81.0.tgz#c6928946a0e06c5f8d6f8a9333469ffda46298a0" dependencies: @@ -11145,6 +11234,12 @@ sntp@1.x.x: dependencies: hoek "2.x.x" +sntp@2.x.x: + version "2.0.2" + resolved "https://registry.yarnpkg.com/sntp/-/sntp-2.0.2.tgz#5064110f0af85f7cfdb7d6b67a40028ce52b4b2b" + dependencies: + hoek "4.x.x" + socket.io-adapter@~1.1.0: version "1.1.1" resolved "https://registry.yarnpkg.com/socket.io-adapter/-/socket.io-adapter-1.1.1.tgz#2a805e8a14d6372124dd9159ad4502f8cb07f06b" @@ -11607,7 +11702,7 @@ stringify-entities@^1.0.1: is-alphanumerical "^1.0.0" is-hexadecimal "^1.0.0" -stringstream@~0.0.4: +stringstream@~0.0.4, stringstream@~0.0.5: version "0.0.5" resolved "https://registry.yarnpkg.com/stringstream/-/stringstream-0.0.5.tgz#4e484cd4de5a0bbbee18e46307710a8a81621878" @@ -12163,7 +12258,7 @@ touch@^1.0.0: dependencies: nopt "~1.0.10" -tough-cookie@^2.3.2, tough-cookie@~2.3.0: +tough-cookie@^2.3.2, tough-cookie@~2.3.0, tough-cookie@~2.3.2: version "2.3.2" resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.2.tgz#f081f76e4c85720e6c37a5faced737150d84072a" dependencies: From 0c4be6da82e77767cd68b92c1ceefe806eb569b8 Mon Sep 17 00:00:00 2001 From: Jacob Bolda Date: Wed, 20 Sep 2017 20:27:59 -0500 Subject: [PATCH 47/52] /contact wasn't being created --- examples/using-javascript-transforms/gatsby-node.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/using-javascript-transforms/gatsby-node.js b/examples/using-javascript-transforms/gatsby-node.js index e64ec938518f0..920516fdc88fe 100644 --- a/examples/using-javascript-transforms/gatsby-node.js +++ b/examples/using-javascript-transforms/gatsby-node.js @@ -137,9 +137,9 @@ exports.createPages = ({ graphql, boundActionCreators }) => { slug: edge.node.fields.slug, }, }) - } else if (edge.node.fields.slug === `/index/`) { + } else { createPage({ - path: `/`, // required, we don't have frontmatter for this page hence separate if() + path: edge.node.fields.slug === `/index/` ? `/` : frontmatter.path, component: path.resolve(edge.node.fileAbsolutePath), layout: 'insetPage', // this matches the filename of src/layouts/insetPage.js, layout created automatically context: { From 7cb3388c5f45e2f91f50effbf7b7121560d90757 Mon Sep 17 00:00:00 2001 From: Jacob Bolda Date: Sun, 24 Sep 2017 18:11:31 -0500 Subject: [PATCH 48/52] fix dev 404 --- .../internal-plugins/dev-404-page/raw_dev-404-page.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/gatsby/src/internal-plugins/dev-404-page/raw_dev-404-page.js b/packages/gatsby/src/internal-plugins/dev-404-page/raw_dev-404-page.js index aa9ae57f30713..606d8ba94f350 100644 --- a/packages/gatsby/src/internal-plugins/dev-404-page/raw_dev-404-page.js +++ b/packages/gatsby/src/internal-plugins/dev-404-page/raw_dev-404-page.js @@ -4,6 +4,7 @@ import Link from "gatsby-link" class Dev404Page extends React.Component { render() { const pathname = this.props.location.pathname + const {allSitePage} = this.props[`component---cache-dev-404-page-js`].data let newFilePath if (pathname === `/`) { newFilePath = `src/pages/index.js` @@ -26,16 +27,16 @@ class Dev404Page extends React.Component { and this page will automatically refresh to show the new page component you created.

- {this.props.data.allSitePage && - this.props.data.allSitePage.totalCount > 1 && ( + {allSitePage && + allSitePage.totalCount > 1 && (

If you were trying to reach another page, perhaps you can find it below.

-

Pages ({this.props.data.allSitePage.totalCount})

+

Pages ({allSitePage.totalCount})

    - {this.props.data.allSitePage.edges.map(({ node }) => ( + {allSitePage.edges.map(({ node }) => (
  • {node.path}
    • From 986a0ce84e7b1f1b252d1d9f05a7f762ab10fee6 Mon Sep 17 00:00:00 2001 From: Jacob Bolda Date: Mon, 25 Sep 2017 06:38:41 -0500 Subject: [PATCH 49/52] rename variable in nested, based on merge --- packages/gatsby/cache-dir/static-entry.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/gatsby/cache-dir/static-entry.js b/packages/gatsby/cache-dir/static-entry.js index c6068785cca37..453ea47f6b998 100644 --- a/packages/gatsby/cache-dir/static-entry.js +++ b/packages/gatsby/cache-dir/static-entry.js @@ -97,12 +97,12 @@ module.exports = (locals, callback) => { let nestedComponents = (templateIndex, jsonName, componentChunkName, props) => { let thisChunk = componentChunkName[templateIndex] if (!componentChunkName[templateIndex + 1]) { - return $(syncRequires.components[thisChunk], { + return createElement(syncRequires.components[thisChunk], { ...props, ...syncRequires.json[jsonName][thisChunk], }) } else { - return $(syncRequires.components[thisChunk], { + return createElement(syncRequires.components[thisChunk], { ...props, ...syncRequires.json[jsonName][thisChunk], children: props => nestedComponents( From 9596e2bfa1d1e83693634c453f6b45554ff8636a Mon Sep 17 00:00:00 2001 From: Jacob Bolda Date: Tue, 26 Sep 2017 06:25:36 -0500 Subject: [PATCH 50/52] update transformer-docjs snapshot --- .../src/__tests__/__snapshots__/gatsby-node.js.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/gatsby-transformer-documentationjs/src/__tests__/__snapshots__/gatsby-node.js.snap b/packages/gatsby-transformer-documentationjs/src/__tests__/__snapshots__/gatsby-node.js.snap index 45e6fd766758b..12d8f143c72ba 100644 --- a/packages/gatsby-transformer-documentationjs/src/__tests__/__snapshots__/gatsby-node.js.snap +++ b/packages/gatsby-transformer-documentationjs/src/__tests__/__snapshots__/gatsby-node.js.snap @@ -40,7 +40,7 @@ apple()", ], "id": "documentationJS node_1 comment #0", "internal": Object { - "contentDigest": "b635e85506044a6cdcebbcd7fda00b7d", + "contentDigest": "e33923a8e75f9ca85da87ace4a55d47e", "type": "DocumentationJs", }, "kind": "constant", From 6c1e6228e11e1efde70c4b7f71d2b20913751277 Mon Sep 17 00:00:00 2001 From: Jacob Bolda Date: Tue, 26 Sep 2017 06:57:42 -0500 Subject: [PATCH 51/52] test fails locally, but passes on server --- .../src/__tests__/__snapshots__/gatsby-node.js.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/gatsby-transformer-documentationjs/src/__tests__/__snapshots__/gatsby-node.js.snap b/packages/gatsby-transformer-documentationjs/src/__tests__/__snapshots__/gatsby-node.js.snap index 12d8f143c72ba..45e6fd766758b 100644 --- a/packages/gatsby-transformer-documentationjs/src/__tests__/__snapshots__/gatsby-node.js.snap +++ b/packages/gatsby-transformer-documentationjs/src/__tests__/__snapshots__/gatsby-node.js.snap @@ -40,7 +40,7 @@ apple()", ], "id": "documentationJS node_1 comment #0", "internal": Object { - "contentDigest": "e33923a8e75f9ca85da87ace4a55d47e", + "contentDigest": "b635e85506044a6cdcebbcd7fda00b7d", "type": "DocumentationJs", }, "kind": "constant", From 2cefaeb633ca72d9e5c8ad2cf0c70c8a1f068c1e Mon Sep 17 00:00:00 2001 From: Jacob Bolda Date: Tue, 26 Sep 2017 06:58:07 -0500 Subject: [PATCH 52/52] add redux page multi-component test --build-all --- .../__tests__/__snapshots__/pages.js.snap | 167 ++++++++++++++++++ packages/gatsby/src/redux/__tests__/pages.js | 90 ++++++++++ 2 files changed, 257 insertions(+) diff --git a/packages/gatsby/src/redux/__tests__/__snapshots__/pages.js.snap b/packages/gatsby/src/redux/__tests__/__snapshots__/pages.js.snap index 76e2e8fc3b89b..a0d749803b80c 100644 --- a/packages/gatsby/src/redux/__tests__/__snapshots__/pages.js.snap +++ b/packages/gatsby/src/redux/__tests__/__snapshots__/pages.js.snap @@ -35,6 +35,45 @@ Array [ ] `; +exports[`Add pages allows you to add multiple pages each with multiple components 1`] = ` +Array [ + Object { + "component": Array [ + "/whatever/index.js", + "/morewhatever/index.js", + ], + "componentChunkName": Array [ + "component---whatever-index-js", + "component---morewhatever-index-js", + ], + "context": Object {}, + "internalComponentName": "ComponentHi", + "jsonName": "hi.json", + "path": "/hi/", + "pluginCreatorId": "test", + "pluginCreator___NODE": "test", + "updatedAt": 1482363367071, + }, + Object { + "component": Array [ + "/whatever/index.js", + "/pizza/index.js", + ], + "componentChunkName": Array [ + "component---whatever-index-js", + "component---pizza-index-js", + ], + "context": Object {}, + "internalComponentName": "ComponentHiHotpizza", + "jsonName": "hi-hotpizza.json", + "path": "/hi/hotpizza/", + "pluginCreatorId": "test", + "pluginCreator___NODE": "test", + "updatedAt": 1482363367071, + }, +] +`; + exports[`Add pages allows you to add pages 1`] = ` Object { "payload": Object { @@ -131,8 +170,114 @@ Array [ ] `; +exports[`Add pages allows you to add pages with context when using multiple components 1`] = ` +Object { + "payload": Object { + "component": Array [ + "/whatever/index.js", + "/differentwhatever/index.js", + ], + "componentChunkName": Array [ + "component---whatever-index-js", + "component---differentwhatever-index-js", + ], + "context": Object { + "id": 123, + }, + "internalComponentName": "ComponentHi", + "jsonName": "hi.json", + "path": "/hi/", + "pluginCreatorId": "test", + "pluginCreator___NODE": "test", + "updatedAt": 1482363367071, + }, + "plugin": Object { + "id": "test", + "name": "test", + }, + "traceId": undefined, + "type": "CREATE_PAGE", +} +`; + +exports[`Add pages allows you to add pages with context when using multiple components 2`] = ` +Array [ + Object { + "component": Array [ + "/whatever/index.js", + "/differentwhatever/index.js", + ], + "componentChunkName": Array [ + "component---whatever-index-js", + "component---differentwhatever-index-js", + ], + "context": Object { + "id": 123, + }, + "internalComponentName": "ComponentHi", + "jsonName": "hi.json", + "path": "/hi/", + "pluginCreatorId": "test", + "pluginCreator___NODE": "test", + "updatedAt": 1482363367071, + }, +] +`; + +exports[`Add pages allows you to add pages with multiple components 1`] = ` +Object { + "payload": Object { + "component": Array [ + "/whatever/index.js", + "/morewhatever/index.js", + ], + "componentChunkName": Array [ + "component---whatever-index-js", + "component---morewhatever-index-js", + ], + "context": Object {}, + "internalComponentName": "ComponentHi", + "jsonName": "hi.json", + "path": "/hi/", + "pluginCreatorId": "test", + "pluginCreator___NODE": "test", + "updatedAt": 1482363367071, + }, + "plugin": Object { + "id": "test", + "name": "test", + }, + "traceId": undefined, + "type": "CREATE_PAGE", +} +`; + +exports[`Add pages allows you to add pages with multiple components 2`] = ` +Array [ + Object { + "component": Array [ + "/whatever/index.js", + "/morewhatever/index.js", + ], + "componentChunkName": Array [ + "component---whatever-index-js", + "component---morewhatever-index-js", + ], + "context": Object {}, + "internalComponentName": "ComponentHi", + "jsonName": "hi.json", + "path": "/hi/", + "pluginCreatorId": "test", + "pluginCreator___NODE": "test", + "updatedAt": 1482363367071, + }, +] +`; + exports[`Add pages allows you to delete paths 1`] = `Array []`; +exports[`Add pages allows you to delete paths that have multiple components 1`] = `Array []`; + exports[`Add pages allows you to update existing pages (based on path) 1`] = ` Array [ Object { @@ -152,3 +297,25 @@ Array [ }, ] `; + +exports[`Add pages allows you to update existing pages with multiple components (based on path) 1`] = ` +Array [ + Object { + "component": Array [ + "/whateven/index.js", + "/supercereal/index.js", + ], + "componentChunkName": Array [ + "component---whateven-index-js", + "component---supercereal-index-js", + ], + "context": Object {}, + "internalComponentName": "ComponentHi", + "jsonName": "hi.json", + "path": "/hi/", + "pluginCreatorId": "test", + "pluginCreator___NODE": "test", + "updatedAt": 1482363367071, + }, +] +`; diff --git a/packages/gatsby/src/redux/__tests__/pages.js b/packages/gatsby/src/redux/__tests__/pages.js index 683a242bf5404..4b8394f9577f8 100644 --- a/packages/gatsby/src/redux/__tests__/pages.js +++ b/packages/gatsby/src/redux/__tests__/pages.js @@ -98,4 +98,94 @@ describe(`Add pages`, () => { expect(state).toMatchSnapshot() expect(state.length).toEqual(0) }) + + it(`allows you to add pages with multiple components`, () => { + const action = actions.createPage( + { + path: `/hi/`, + component: [`/whatever/index.js`, `/morewhatever/index.js`], + }, + { id: `test`, name: `test` } + ) + const state = reducer(undefined, action) + expect(action).toMatchSnapshot() + expect(state).toMatchSnapshot() + }) + + it(`allows you to add pages with context when using multiple components`, () => { + const action = actions.createPage( + { + path: `/hi/`, + component: [`/whatever/index.js`, `/differentwhatever/index.js`], + context: { + id: 123, + }, + }, + { id: `test`, name: `test` } + ) + const state = reducer(undefined, action) + expect(action).toMatchSnapshot() + expect(state).toMatchSnapshot() + }) + + it(`allows you to add multiple pages each with multiple components`, () => { + const action = actions.createPage( + { + path: `/hi/`, + component: [`/whatever/index.js`, `/morewhatever/index.js`], + }, + { id: `test`, name: `test` } + ) + const action2 = actions.createPage( + { + path: `/hi/hotpizza/`, + component: [`/whatever/index.js`, `/pizza/index.js`], + }, + { id: `test`, name: `test` } + ) + let state = reducer(undefined, action) + state = reducer(state, action2) + expect(state).toMatchSnapshot() + expect(state.length).toEqual(2) + }) + + it(`allows you to update existing pages with multiple components (based on path)`, () => { + const action = actions.createPage( + { + path: `/hi/`, + component: [`/something/index.js`, `/morewhatever/index.js`], + }, + { id: `test`, name: `test` } + ) + + // Change the component + const action2 = actions.createPage( + { + path: `/hi/`, + component: [`/whateven/index.js`, `/supercereal/index.js`], + }, + { id: `test`, name: `test` } + ) + + let state = reducer(undefined, action) + state = reducer(state, action2) + expect(state).toMatchSnapshot() + expect(state.length).toEqual(1) + }) + + it(`allows you to delete paths that have multiple components`, () => { + const action = actions.createPage( + { + path: `/hi/`, + component: [`/ohhey/index.js`, `/goodbye/index.js`], + }, + { name: `test` } + ) + const action2 = actions.deletePage({ path: `/hi/` }) + + let state = reducer(undefined, action) + state = reducer(state, action2) + expect(state).toMatchSnapshot() + expect(state.length).toEqual(0) + }) })