Ensure chunkNames are unique by using relative path to site root

gatsbyjs · Sep 29, 2016 · a1dfe19 · a1dfe19
1 parent 342030d
commit a1dfe19
Show file tree

Hide file tree

Showing 8 changed files with 16 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 = `<!DOCTYPE html>\n ${renderToStaticMarkup(

diff --git 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
@@ -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 <mathews.kyle@gmail.com>",
   "ava": {
     "require": [