Merge branch 'master' into jest20

* master: Add Prettier + ESLint Integration (#480) Adds 0.6.0 final version (#498) adds 060-rc.1 (#497) webpack 2.6.1 (#496) Adds vendor bundling (#487) Adds 0.6.0 alpha (#488) chore: webpack & friends dep refresh (#482) # Conflicts: # package.json # packages/babel-preset-kyt-core/yarn.lock # packages/babel-preset-kyt-react/yarn.lock # packages/kyt-cli/yarn.lock # packages/kyt-core/package.json # packages/kyt-core/yarn.lock # packages/kyt-starter-static/starter-src/yarn.lock # packages/kyt-starter-universal/starter-src/yarn.lock # yarn.lock
nytimes · Jun 9, 2017 · 323ac65 · 323ac65
2 parents 09334eb + 0c97d82
commit 323ac65
Show file tree

Hide file tree

Showing 106 changed files with 10,149 additions and 3,857 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,4 +1,4 @@
 coverage
 **/node_modules
 e2e_tests/fixtures
-
+**/build
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,13 @@
 
 ## Master
 
+## 0.6.0 - 06/07/17
+
+[0.5.x-0.6.0 Migration guide](/docs/migration-guides/0.5-0.6.md).
+
+- Upgrades webpack and loaders [#482](https://github.com/NYTimes/kyt/pull/482)
+- Adds vendor bundling [#487](https://github.com/NYTimes/kyt/pull/487)
+
 ## 0.5.5 - 05/02/17
 - Fixes bug in IE11, moves 'react-hot-loader/patch' after 'babel-polyfill'.[#473](https://github.com/NYTimes/kyt/pull/473)
 - Fixes history api for static starter-kyt [#468](https://github.com/NYTimes/kyt/pull/468)

diff --git a/bootstrap.js b/bootstrap.js
@@ -6,7 +6,7 @@ const spawn = require('child_process').spawnSync;
 const type = process.env.type || 'upgrade'; // yarn update types
 const logTask = msg => console.log(`👍  ${msg}`);
 
-const installPackage = (at) => {
+const installPackage = at => {
   const result = spawn('yarn', [type], { stdio: 'inherit', cwd: at });
   if (result.error) {
     console.log(result.error);
@@ -27,7 +27,9 @@ const packages = fs.readdirSync('packages').reduce((pkgs, pkg) => {
       }
       pkgs.push({ path: packagePath, name: packageName });
     }
-  } catch (e) { return pkgs; }
+  } catch (e) {
+    return pkgs;
+  }
   return pkgs;
 }, []);
 
@@ -50,11 +52,12 @@ if (!semver.satisfies(yarnVersion, yarnVersionRequirement)) {
 packages.forEach(pkg => installPackage(pkg.path));
 
 // Symlink monorepo package dependencies to local packages.
-packages.forEach((pkg) => {
+packages.forEach(pkg => {
   const packageJSON = require(path.join(pkg.path, 'package.json'));
   const dependencies = Object.assign({}, packageJSON.dependencies, packageJSON.devDependencies);
-  packages.forEach((spkg) => {
-    if (dependencies.hasOwnProperty(spkg.name)) { // eslint-disable-line no-prototype-builtins
+  packages.forEach(spkg => {
+    // eslint-disable-next-line no-prototype-builtins
+    if (dependencies.hasOwnProperty(spkg.name)) {
       const to = path.join(pkg.path, 'node_modules', spkg.name);
       shell.rm('-rf', to);
       shell.ln('-sf', spkg.path, to);
@@ -64,9 +67,13 @@ packages.forEach((pkg) => {
 });
 
 // npm link kyt-cli and kyt
-shell.exec('npm link', { cwd: path.join(process.cwd(), 'packages', 'kyt-cli') });
+shell.exec('npm link', {
+  cwd: path.join(process.cwd(), 'packages', 'kyt-cli'),
+});
 logTask('npm-linked kyt-cli\n');
-shell.exec('npm link', { cwd: path.join(process.cwd(), 'packages', 'kyt-core') });
+shell.exec('npm link', {
+  cwd: path.join(process.cwd(), 'packages', 'kyt-core'),
+});
 logTask('npm-linked kyt');
 
 console.log('\n✅  strapped\n');
diff --git a/clean.js b/clean.js
@@ -7,35 +7,40 @@ let shell;
 try {
   shell = require('shelljs');
 } catch (e) {
-  console.log("👉 Please be sure to 'npm install' or 'yarn install' in the root kyt/ directory before running 'clean'");
+  console.log(
+    "👉 Please be sure to 'npm install' or 'yarn install' in the root kyt/ directory before running 'clean'"
+  );
   return;
 }
 
 const logTask = msg => console.log(`👍  ${msg}`);
 
-const cleanPackages = (at) => {
+const cleanPackages = at => {
   const result = shell.rm('-rf', `${at}/node_modules`);
   if (result.code !== 0) {
     console.log(`Unable to clean node_modules in ${at}`);
   }
   logTask(`Cleaned ${at}\n`);
 };
 
-const getPackages = () => fs.readdirSync('packages').reduce((pkgs, pkg) => {
-  let packagePath = path.join(process.cwd(), 'packages', pkg);
-  const packageJSON = path.join(packagePath, 'package.json');
-  try {
-    if (fs.statSync(packagePath).isDirectory() && fs.statSync(packageJSON).isFile()) {
-      // update path for starter-kyts
-      const packageName = require(packageJSON).name;
-      if (packageName.includes('starter')) {
-        packagePath = path.join(packagePath, 'starter-src');
+const getPackages = () =>
+  fs.readdirSync('packages').reduce((pkgs, pkg) => {
+    let packagePath = path.join(process.cwd(), 'packages', pkg);
+    const packageJSON = path.join(packagePath, 'package.json');
+    try {
+      if (fs.statSync(packagePath).isDirectory() && fs.statSync(packageJSON).isFile()) {
+        // update path for starter-kyts
+        const packageName = require(packageJSON).name;
+        if (packageName.includes('starter')) {
+          packagePath = path.join(packagePath, 'starter-src');
+        }
+        pkgs.push({ path: packagePath, name: packageName });
       }
-      pkgs.push({ path: packagePath, name: packageName });
+    } catch (e) {
+      return pkgs;
     }
-  } catch (e) { return pkgs; }
-  return pkgs;
-}, []);
+    return pkgs;
+  }, []);
 
 // Start cleaning
 console.log('\n🛁 Cleaning...\n');
@@ -44,9 +49,13 @@ console.log('\n🛁 Cleaning...\n');
 getPackages().forEach(pkg => cleanPackages(pkg.path));
 
 // npm unlink kyt-cli and kyt
-shell.exec('npm unlink', { cwd: path.join(process.cwd(), 'packages', 'kyt-cli') });
+shell.exec('npm unlink', {
+  cwd: path.join(process.cwd(), 'packages', 'kyt-cli'),
+});
 logTask('npm-unlinked kyt-cli\n');
-shell.exec('npm unlink', { cwd: path.join(process.cwd(), 'packages', 'kyt-core') });
+shell.exec('npm unlink', {
+  cwd: path.join(process.cwd(), 'packages', 'kyt-core'),
+});
 logTask('npm-unlinked kyt');
 
 // Done

diff --git a/docs/conventions.md b/docs/conventions.md
@@ -38,7 +38,28 @@ kyt sets several global variables with useful information about the app environm
 * `KYT.ASSETS_MANIFEST` Object with build assets paths
 * `KYT.EXECUTION_ENVIRONMENT` Where this code is running: `"server"` or `"client"`
 
-For examples of how to use these environment variables, checkout out the simple React [starter-kyt](https://github.com/nytimes/kyt-starter)
+Note, these variables are casted to type String. For example, the following saves the server port as a Number to a local variable:
+
+```
+const port = Number.parseInt(KYT.SERVER_PORT, 10);
+```
+
+## Working with client assets
+
+By default, kyt produces the following client assets (with their corresponding map files (asset.map.js)):
+
+- `main.js` - The main script.
+- `main.css` - All of the CSS.
+- `manifest.js` - A mapping of chunk names.
+- `vendor.js` - Common/shared modules between the bundles and chunks.
+
+To keep each version of an asset unique, kyt will output the client assets with a hash in the name (e.g.: `main-34a8b999.js`) kyt also exports a `publicAssets.json` file that can be referenced using the `KYT.ASSETS_MANIFEST` environment variable. In your project, you should import the asset manifest file, get the hashed asset names and load the client assets through `<script>` tags. If you based your project on a starter kyt, then you already have this code in place in the `src/server/index.js`/`src/server/template.js`. If not, [check out the following lines](https://github.com/NYTimes/kyt/blob/master/packages/kyt-starter-universal/starter-src/src/server/index.js#L40-L43) for how you import the asset manifest and reference the assets. Note that the JavaScript assets need to be loaded in the following order:
+
+- `manifest.js`
+- `vendor.js`
+- `main.js`
+
+`main.css` should be included in the `<head>` of your document, which is taken care of for you if you based your project on a starter kyt.
 
 ## kyt.config.js
 The kyt config file must live in the root of your repository.

diff --git a/docs/migration-guides/0.5-0.6.md b/docs/migration-guides/0.5-0.6.md
@@ -0,0 +1,14 @@
+# Migration Guide 0.5 - 0.6
+
+## Refactor for the new vendor bundling
+
+Version 0.6 adds a new `vendor.js` and `manifest.js` script to the exported client assets. It also changes the format of the asset manifest (`publicAssets.json`). Please refer to this section in the [conventions documentation](/docs/conventions#working-with-client-assets) for how the new assets should be referenced (and in what order!).
+
+The following shows how we updated the starter kyts with the new rules:
+
+- [include the new manifest and vendor scripts and update how the client assets are referenced](https://github.com/NYTimes/kyt/pull/487/files#diff-5c9af8ba0b7857800f72a55cdc5409aa)
+- [output the scripts in the correct order](https://github.com/NYTimes/kyt/pull/487/files#diff-1a3dd5d68b85906698a452ac9279ecc5)
+
+## Naming your chunks
+
+Webpack added a not-so-graceful implementation for naming your `import`ed chunks. You can now [add a comment to your `import` statement](https://github.com/NYTimes/kyt/blob/843341291ad99c925d2c8a1b07f323b9d40e954b/packages/kyt-starter-static/starter-src/src/routes/index.js#L12) to name the output file. This only helps in identifying your chunks during the build process.
diff --git a/e2e_tests/fixtures/lintScript-default/src/test.js b/e2e_tests/fixtures/lintScript-default/src/test.js
@@ -1,4 +1,3 @@
-
 const test = 1;
 
 module.exports = test;
diff --git a/e2e_tests/fixtures/lintScript-fail/src/test.js b/e2e_tests/fixtures/lintScript-fail/src/test.js
@@ -1,4 +1,3 @@
-
 const test = 1
 
 module.exports = test;
diff --git a/e2e_tests/fixtures/lintScript-user-rc-with-ext/src/test.js b/e2e_tests/fixtures/lintScript-user-rc-with-ext/src/test.js
@@ -1,4 +1,3 @@
-
 const test = 1;
 
 module.exports = test;
diff --git a/e2e_tests/fixtures/lintScript-user-rc/src/test.js b/e2e_tests/fixtures/lintScript-user-rc/src/test.js
@@ -1,4 +1,3 @@
-
 const test = 1;
 
 module.exports = test;
diff --git a/e2e_tests/tests/cli.test.js b/e2e_tests/tests/cli.test.js
@@ -40,7 +40,7 @@ describe('KYT CLI', () => {
     });
   };
   // Checks setup command output
-  const outputCheck = (setupArr) => {
+  const outputCheck = setupArr => {
     expect(setupArr.includes('👍  Added kyt scripts into your package.json scripts')).toBe(true);
     expect(setupArr.includes('👍  Added new dependencies to package.json')).toBe(true);
     expect(setupArr.includes('👍  Installed new modules')).toBe(true);
@@ -57,14 +57,14 @@ describe('KYT CLI', () => {
 
   describe('setup for universal starter-kyt', () => {
     it('sets up a universal starter-kyt', () => {
-      const exec = new Promise((resolve) => {
+      const exec = new Promise(resolve => {
         const child = shell.exec('../packages/kyt-cli/index.js setup', (code, stdout) => {
           resolve({ code, output: stdout });
         });
         let skdone = false;
         let chooseDone = false;
         let ypmDone = false;
-        child.stdout.on('data', (data) => {
+        child.stdout.on('data', data => {
           if (data.includes('Choose an installer')) {
             if (!ypmDone) {
               child.stdin.write('\n');
@@ -85,7 +85,7 @@ describe('KYT CLI', () => {
           }
         });
       });
-      return exec.then((test) => {
+      return exec.then(test => {
         shell.cd('standard-starter');
         expect(test.code).toBe(0);
         const setupArr = test.output.split('\n');
@@ -104,15 +104,15 @@ describe('KYT CLI', () => {
 
   describe('setup for static starter-kyt', () => {
     it('sets up a static starter-kyt', () => {
-      const exec = new Promise((resolve) => {
+      const exec = new Promise(resolve => {
         shell.cd(rootPath);
         const child = shell.exec('../packages/kyt-cli/index.js setup', (code, stdout) => {
           resolve({ code, output: stdout });
         });
         let skdone = false;
         let chooseDone = false;
         let ypmDone = false;
-        child.stdout.on('data', (data) => {
+        child.stdout.on('data', data => {
           if (data.includes('Choose an installer')) {
             if (!ypmDone) {
               child.stdin.write('\n');
@@ -133,7 +133,7 @@ describe('KYT CLI', () => {
           }
         });
       });
-      return exec.then((test) => {
+      return exec.then(test => {
         shell.cd('static-starter');
         expect(test.code).toBe(0);
         const setupArr = test.output.split('\n');
@@ -151,7 +151,7 @@ describe('KYT CLI', () => {
 
   describe('setup for starter-kyt from git repo', () => {
     it('sets up a static starter-kyt', () => {
-      const exec = new Promise((resolve) => {
+      const exec = new Promise(resolve => {
         shell.cd(rootPath);
         const child = shell.exec('../packages/kyt-cli/index.js setup', (code, stdout) => {
           resolve({ code, output: stdout });
@@ -160,7 +160,7 @@ describe('KYT CLI', () => {
         let chooseDone = false;
         let ypmDone = false;
         let repoDone = false;
-        child.stdout.on('data', (data) => {
+        child.stdout.on('data', data => {
           if (data.includes('Choose an installer')) {
             if (!ypmDone) {
               child.stdin.write('\n');
@@ -187,7 +187,7 @@ describe('KYT CLI', () => {
           }
         });
       });
-      return exec.then((test) => {
+      return exec.then(test => {
         shell.cd('git-starter');
         expect(test.code).toBe(0);
         const setupArr = test.output.split('\n');
@@ -205,15 +205,18 @@ describe('KYT CLI', () => {
 
   describe('setup for starter-kyt from a local path', () => {
     it('sets up a static starter-kyt', () => {
-      const exec = new Promise((resolve) => {
+      const exec = new Promise(resolve => {
         shell.cd(rootPath);
         const localPath = path.resolve(rootPath, '../packages/kyt-starter-universal/starter-src');
-        const child = shell.exec(`../packages/kyt-cli/index.js setup --local-path ${localPath}`, (code, stdout) => {
-          resolve({ code, output: stdout });
-        });
+        const child = shell.exec(
+          `../packages/kyt-cli/index.js setup --local-path ${localPath}`,
+          (code, stdout) => {
+            resolve({ code, output: stdout });
+          }
+        );
         let skdone = false;
         let ypmDone = false;
-        child.stdout.on('data', (data) => {
+        child.stdout.on('data', data => {
           if (data.includes('Choose an installer')) {
             if (!ypmDone) {
               child.stdin.write('\n');
@@ -228,7 +231,7 @@ describe('KYT CLI', () => {
           }
         });
       });
-      return exec.then((test) => {
+      return exec.then(test => {
         shell.cd('local-starter');
         expect(test.code).toBe(0);
         const setupArr = test.output.split('\n');

diff --git a/e2e_tests/tests/kyt-build.test.js b/e2e_tests/tests/kyt-build.test.js
@@ -18,6 +18,11 @@ describe('kyt build', () => {
     // Should copy static assets from src/public directory
     expect(shell.test('-f', 'build/public/nothing.txt')).toBe(true);
 
+    // Should produce the manifest, main and vendor scripts
+    expect(shell.ls('build/public/manifest-*.js').code).toBe(0);
+    expect(shell.ls('build/public/main-*.js').code).toBe(0);
+    expect(shell.ls('build/public/vendor-*.js').code).toBe(0);
+
     expect(output.code).toBe(0);
   });
 

diff --git a/e2e_tests/tests/starter-kyt.test.js b/e2e_tests/tests/starter-kyt.test.js
@@ -16,11 +16,11 @@ describe('starter kyts', () => {
 
     it('should start a dev server on :3000', () => {
       let outputTest;
-      const run = new Promise((resolve) => {
+      const run = new Promise(resolve => {
         const child = shell.exec('node_modules/kyt/cli/index.js dev', () => {
           resolve(outputTest);
         });
-        child.stdout.on('data', (data) => {
+        child.stdout.on('data', data => {
           if (data.includes('✅  Development started')) {
             shell.exec('sleep 5');
             const output = shell.exec('curl -I localhost:3000');
@@ -37,11 +37,11 @@ describe('starter kyts', () => {
     it('should build and run', () => {
       let outputTest;
       shell.exec('node_modules/kyt/cli/index.js build');
-      const run = new Promise((resolve) => {
+      const run = new Promise(resolve => {
         const child = shell.exec('node build/server/main.js', () => {
           resolve(outputTest);
         });
-        child.stdout.on('data', (data) => {
+        child.stdout.on('data', data => {
           if (data.includes('✅  server started on port: 3000')) {
             shell.exec('sleep 5');
             const output = shell.exec('curl -I localhost:3000');
@@ -68,11 +68,11 @@ describe('starter kyts', () => {
 
     it('should start a server on :3001', () => {
       let outputTest;
-      const run = new Promise((resolve) => {
+      const run = new Promise(resolve => {
         const child = shell.exec('node_modules/kyt/cli/index.js dev', () => {
           resolve(outputTest);
         });
-        child.stdout.on('data', (data) => {
+        child.stdout.on('data', data => {
           if (data.includes('✅  Client started')) {
             shell.exec('sleep 5');
             const output = shell.exec('curl -sb -o "" localhost:3001');

diff --git a/e2e_tests/utils/psKill.js b/e2e_tests/utils/psKill.js
@@ -3,11 +3,9 @@ const psTree = require('ps-tree');
 // Loops through processes and kills them
 module.exports = (pid, signal = 'SIGKILL', callback) => {
   psTree(pid, (err, children) => {
-    let arr = [pid].concat(
-      children.map(p => p.PID)
-    );
+    let arr = [pid].concat(children.map(p => p.PID));
     arr = arr.filter((item, poss) => arr.indexOf(item) === poss);
-    arr.forEach((tpid) => {
+    arr.forEach(tpid => {
       try {
         process.kill(tpid, signal);
       } catch (ex) {