From a1dfe19eb5386fbc79c2ad30f9886bdd5b01bf40 Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Wed, 28 Sep 2016 17:47:27 -0700 Subject: [PATCH] Ensure chunkNames are unique by using relative path to site root --- lib/bootstrap/index.js | 8 ++++++++ lib/joi-schemas/joi.js | 1 + lib/utils/build-javascript.js | 1 - lib/utils/js-chunk-names.js | 6 +++--- lib/utils/query-runner.js | 2 +- lib/utils/static-entry.js | 4 +--- lib/utils/webpack.config.js | 4 +--- package.json | 2 +- 8 files changed, 16 insertions(+), 12 deletions(-) diff --git a/lib/bootstrap/index.js b/lib/bootstrap/index.js index b6789628ccbd2..f5911384712b0 100644 --- a/lib/bootstrap/index.js +++ b/lib/bootstrap/index.js @@ -11,6 +11,8 @@ import mkdirp from 'mkdirp' import fs from 'fs-extra' import Joi from 'joi' import chalk from 'chalk' +const { layoutComponentChunkName } = require(`../utils/js-chunk-names`) + const mkdirs = Promise.promisify(fs.mkdirs) const copy = Promise.promisify(fs.copy) @@ -39,6 +41,7 @@ const autoPathCreator = (program) => { // Create initial page objects. autoPages = files.map((filePath) => ({ component: filePath, + chunkName: layoutComponentChunkName(program.directory, filePath), path: filePath, })) @@ -148,6 +151,11 @@ module.exports = async (program, cb) => { // Collect pages. const pages = await apiRunnerNode(`createPages`, { graphql: graphqlRunner }, []) + // Add chunkName. + pages.forEach((page) => ( + page.chunkName = layoutComponentChunkName(program.directory, page.component) + )) + // Validate pages. if (pages) { pages.forEach((page) => { diff --git a/lib/joi-schemas/joi.js b/lib/joi-schemas/joi.js index b9652de3311c4..c2782c27e8856 100644 --- a/lib/joi-schemas/joi.js +++ b/lib/joi-schemas/joi.js @@ -9,5 +9,6 @@ export const gatsbyConfigSchema = Joi.object().keys({ export const pageSchema = Joi.object().keys({ path: Joi.string().required(), component: Joi.string().required(), + chunkName: Joi.string().required(), data: Joi.object(), }).unknown() diff --git a/lib/utils/build-javascript.js b/lib/utils/build-javascript.js index aee1e2594e60d..0755eff02dc97 100644 --- a/lib/utils/build-javascript.js +++ b/lib/utils/build-javascript.js @@ -6,7 +6,6 @@ module.exports = (program, callback) => { const { directory } = program const compilerConfig = webpackConfig(program, directory, `build-javascript`) - console.log('webpack config for JS', JSON.stringify(compilerConfig.resolve(), null, 4)) webpack(compilerConfig.resolve()).run(callback) } diff --git a/lib/utils/js-chunk-names.js b/lib/utils/js-chunk-names.js index e458344f9474a..b1ced34606015 100644 --- a/lib/utils/js-chunk-names.js +++ b/lib/utils/js-chunk-names.js @@ -6,9 +6,9 @@ const pathChunkName = (path) => { return `path---${name}` } -const layoutComponentChunkName = (componentPath) => { - const name = path.basename(componentPath, path.extname(componentPath)) - return `page-template---${_.kebabCase(name)}` +const layoutComponentChunkName = (directory, componentPath) => { + const name = path.relative(directory, componentPath) + return `page-component---${_.kebabCase(name)}` } exports.pathChunkName = pathChunkName diff --git a/lib/utils/query-runner.js b/lib/utils/query-runner.js index d4dd6ca686cf8..38a83f7ddd60e 100644 --- a/lib/utils/query-runner.js +++ b/lib/utils/query-runner.js @@ -53,7 +53,7 @@ const writeChildRoutes = () => { const genSplitChildRoute = (page, noPath=false) => { const pathName = pathChunkName(page.path) - const layoutName = layoutComponentChunkName(page.component) + const layoutName = layoutComponentChunkName(programDB().directory, page.component) let pathStr = `` if (!noPath) { if (programDB().prefixLinks) { diff --git a/lib/utils/static-entry.js b/lib/utils/static-entry.js index f04ac139fc5ad..47d9e7a580b44 100644 --- a/lib/utils/static-entry.js +++ b/lib/utils/static-entry.js @@ -57,9 +57,7 @@ module.exports = (locals, callback) => { scripts.push(pathChunkName(locals.path)) // layout component chunk scripts.push( - layoutComponentChunkName( - pages.find((page) => page.path === locals.path).component - ) + pages.find((page) => page.path === locals.path).chunkName ) const html = `\n ${renderToStaticMarkup( diff --git a/lib/utils/webpack.config.js b/lib/utils/webpack.config.js index 2dea083f6d3c0..c4128d0b901f1 100644 --- a/lib/utils/webpack.config.js +++ b/lib/utils/webpack.config.js @@ -135,9 +135,8 @@ module.exports = (program, directory, suppliedStage, webpackPort = 1500, pages = case `build-javascript`: { // Get array of page template component names. let components = Array.from(pagesDB().values()).map(page => page.component) - components = components.map(component => layoutComponentChunkName(component)) + components = components.map(component => layoutComponentChunkName(program.directory, component)) components = _.uniq(components) - console.log('components', components) return [ // Moment.js includes 100s of KBs of extra localization data // by default in Webpack that most sites don't want. @@ -155,7 +154,6 @@ module.exports = (program, directory, suppliedStage, webpackPort = 1500, pages = `app`, ...components, ], - children: false, // The more page components there are, the higher we raise the bar // for merging in page-specific JS libs into the commons chunk. The // two principles here is a) keep the TTI (time to interaction) as diff --git a/package.json b/package.json index c83eba21b9f21..7ee03355e3346 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "gatsby", "description": "React.js Static Site Generator", - "version": "1.0.0-alpha.test7", + "version": "1.0.0-alpha.test8", "author": "Kyle Mathews ", "ava": { "require": [