support user .babelrc

e2e_tests/tests/cli.test.js

@@ -41,7 +41,8 @@ describe('KYT CLI', () => {
     expect(shell.test('-d', 'node_modules')).toBe(true);
   });
   it('sets up a starter-kyt', () => {
-    const setupURL = 'https://github.com/NYTimes/kyt-starter-test.git';
+    // temporary, revert when https://github.com/NYTimes/kyt-starter-test/pull/1 is merged
+    const setupURL = 'https://github.com/jaredmcdonald/kyt-starter-test.git';
     const output = shell.exec(`node_modules/.bin/kyt-cli setup -r ${setupURL}`);
     expect(output.code).toBe(0);
     const setupArr = output.stdout.split('\n');
@@ -54,13 +55,15 @@ describe('KYT CLI', () => {
     expect(setupArr.includes('👍  Created .stylelintrc.json file')).toBe(true);
     expect(setupArr.includes('👍  Created kyt.config.js file')).toBe(true);
     expect(setupArr.includes('👍  Created .editorconfig file')).toBe(true);
+    expect(setupArr.includes('👍  Created .babelrc')).toBe(true);
     expect(setupArr.includes('👍  Created .gitignore file')).toBe(true);
     expect(setupArr.includes('👍  Created src directory')).toBe(true);
   });
   it('sets up with the correct files', () => {
     expect(shell.test('-d', 'src')).toBe(true);
     expect(shell.test('-f', 'kyt.config.js')).toBe(true);
     expect(shell.test('-f', '.editorconfig')).toBe(true);
+    expect(shell.test('-f', '.babelrc')).toBe(true);
     expect(shell.test('-f', '.eslintrc.json')).toBe(true);
     expect(shell.test('-f', '.stylelintrc.json')).toBe(true);
     expect(shell.test('-f', 'prototype.js')).toBe(true);

package.json

@@ -27,7 +27,7 @@
     "test-watch": "jest --watch",
     "test-coverage": "jest --coverage",
     "e2e": "jest --config ./e2e_tests/jest.config.json --verbose --no-cache",
-    "lint": "packages/kyt-core/node_modules/.bin/eslint --config packages/kyt-core/.eslintrc.json --ignore-pattern **/node_modules --ignore-pattern packages/starter-kyts ./"
+    "lint": "packages/kyt-core/node_modules/.bin/eslint --config packages/kyt-core/.eslintrc.json --ignore-pattern **/node_modules --ignore-pattern packages/babel-presets --ignore-pattern packages/starter-kyts ./"
   },
   "repository": {
     "type": "git",

packages/babel-presets/babel-preset-kyt-core/.eslintrc.json

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "no-var": 0
+  }
+}

packages/babel-presets/babel-preset-kyt-core/lib/index.js

@@ -0,0 +1,22 @@
+var babelPresetLatest = require('babel-preset-latest');
+var babelTransformRuntime = require('babel-plugin-transform-runtime');
+var babelTransformModules = require('babel-plugin-transform-es2015-modules-commonjs');
+
+module.exports = function(context, opts) {
+  opts = opts || {};
+  return {
+    // modules are handled by webpack, don't transform them
+    presets: [[babelPresetLatest, { modules: false }]],
+
+    // provide the ability to opt into babel-plugin-transform-runtime inclusion
+    plugins: [opts.includeRuntime === true && babelTransformRuntime].filter(Boolean),
+
+    env: {
+      test: {
+        plugins: [
+          [babelTransformModules, { loose: true }],
+        ],
+      },
+    },
+  };
+};

packages/babel-presets/babel-preset-kyt-core/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "babel-preset-kyt-core",
+  "version": "0.1.0-alpha.1",
+  "description": "an opinionated babel preset, best used with kyt",
+  "main": "lib/index.js",
+  "author": "NYTimes",
+  "license": "Apache-2.0",
+  "dependencies": {
+    "babel-plugin-transform-es2015-modules-commonjs": "6.16.0",
+    "babel-plugin-transform-runtime": "6.15.0",
+    "babel-preset-latest": "6.16.0"
+  },
+  "keywords": ["babel", "babel-preset", "kyt"],
+  "files": ["lib"]
+}

packages/babel-presets/babel-preset-kyt-react/.eslintrc.json

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "no-var": 0
+  }
+}

packages/babel-presets/babel-preset-kyt-react/lib/index.js

@@ -0,0 +1,31 @@
+var babelPresetReact = require('babel-preset-react');
+var reactRemovePropTypes = require('babel-plugin-transform-react-remove-prop-types');
+var reactTransformConstant = require('babel-plugin-transform-react-constant-elements');
+var reactTransformInline = require('babel-plugin-transform-react-inline-elements');
+var reactTransformJsxSource = require('babel-plugin-transform-react-jsx-source');
+var babelPresetKytCore = require('babel-preset-kyt-core');
+
+module.exports = function(context, opts) {
+  opts = opts || {};
+  return {
+    presets: [
+      babelPresetReact,
+      // pass options through to core preset
+      [babelPresetKytCore, opts.coreOptions || {}],
+    ],
+    env: {
+      development: {
+        plugins: [
+          reactTransformJsxSource,
+        ],
+      },
+      production: {
+        plugins: [
+          reactRemovePropTypes,
+          reactTransformConstant,
+          reactTransformInline,
+        ],
+      },
+    },
+  };
+};

packages/babel-presets/babel-preset-kyt-react/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "babel-preset-kyt-react",
+  "version": "0.1.0-alpha.1",
+  "description": "an opinionated babel preset for react apps, best used with kyt",
+  "main": "lib/index.js",
+  "author": "NYTimes",
+  "license": "Apache-2.0",
+  "dependencies": {
+    "babel-plugin-transform-react-constant-elements": "6.9.1",
+    "babel-plugin-transform-react-inline-elements": "^6.8.0",
+    "babel-plugin-transform-react-jsx-source": "6.9.0",
+    "babel-plugin-transform-react-remove-prop-types": "0.2.10",
+    "babel-preset-kyt-core": "0.1.0-alpha.1",
+    "babel-preset-react": "6.16.0"
+  },
+  "keywords": [
+    "babel",
+    "babel-preset",
+    "kyt",
+    "react"
+  ],
+  "files": [
+    "lib"
+  ]
+}

packages/kyt-cli/cli/actions/setup.js

@@ -34,6 +34,7 @@ module.exports = (flags, args) => {
     userKytConfigPath,
     userNodeModulesPath,
     userPackageJSONPath,
+    userBabelrcPath,
   } = require('kyt-utils/paths')(); // eslint-disable-line
 
   const date = Date.now();
@@ -282,6 +283,17 @@ module.exports = (flags, args) => {
     logger.task('Created .editorconfig file');
   };
 
+  const createBabelrc = () => {
+    // back up existing .babelrc, if it exists
+    if (shell.test('-f', userBabelrcPath)) {
+      const mvTo = path.join(userRootPath, `.babelrc-${date}.bak`);
+      shell.mv(userBabelrcPath, mvTo);
+      logger.info(`Backed up current .babelrc to ${mvTo}`);
+    }
+    shell.cp(`${tmpDir}/.babelrc`, userBabelrcPath);
+    logger.task('Created .babelrc');
+  };
+
   // Copies the starter kyt kyt.config.js
   // to the user's base directory.
   const createKytConfig = () => {
@@ -389,11 +401,16 @@ module.exports = (flags, args) => {
         logger.log(error);
         bailProcess();
       }
+      if (!args.repository) {
+        // temporary - get the right version of the starter-kyts
+        shell.exec('cd .kyt-tmp && git checkout babelrc');
+      }
       // eslint-disable-next-line global-require,import/no-dynamic-require
       tempPackageJSON = require(`${tmpDir}/package.json`);
       updateUserPackageJSON(false);
       installUserDependencies();
       createESLintFile();
+      createBabelrc();
       createStylelintFile();
       createEditorconfigLink();
       createKytConfig();

packages/kyt-core/.eslintignore

@@ -1 +1,2 @@
 coverage
+**/node_modules

packages/kyt-core/config/__tests__/webpack.test.js

@@ -1,7 +1,19 @@
+const shell = {
+  test: jest.fn(),
+};
+
+const logger = {
+  warn: jest.fn(),
+};
+
+jest.setMock('shelljs', shell);
+jest.setMock('kyt-utils/logger', logger);
+
 const devClientConfig = require('../webpack.dev.client');
 const devServerConfig = require('../webpack.dev.server');
 const prodClientConfig = require('../webpack.prod.client');
 const prodServerConfig = require('../webpack.prod.server');
+const baseConfig = require('../webpack.base');
 
 describe('webpack.dev.client', () => {
   it('has babel-polyfill as first entry in entry.main array', () => {
@@ -30,3 +42,24 @@ describe('webpack.prod.server', () => {
     expect(config.entry.main[0]).toBe('babel-polyfill');
   });
 });
+
+describe('webpack.base', () => {
+  beforeEach(() => {
+    logger.warn.mockClear();
+  });
+  it('doesn\'t set up a babel preset if a .babelrc exists', () => {
+    shell.test.mockImplementationOnce(() => true);
+    const config = baseConfig({ clientURL: {}, publicPath: '/' });
+    const babelLoader = config.module.rules.find(({ loader }) => loader === 'babel-loader');
+    expect(babelLoader.options.presets).toBeUndefined();
+    expect(logger.warn).not.toHaveBeenCalled();
+  });
+  it('sets up kyt-core babel preset if a .babelrc exists', () => {
+    shell.test.mockImplementationOnce(() => false);
+    const config = baseConfig({ clientURL: {}, publicPath: '/' });
+    const babelLoader = config.module.rules.find(({ loader }) => loader === 'babel-loader');
+    expect(babelLoader.options.presets.length).toBe(1);
+    expect(babelLoader.options.presets[0]).toMatch(/babel-preset-kyt-core/);
+    expect(logger.warn).toHaveBeenCalledWith('No user .babelrc found. Using kyt default babel preset...');
+  });
+});

packages/kyt-core/config/jest.js

@@ -11,6 +11,9 @@ module.exports = (rootDir, aliases = {}) => ({
           resolveFromUtils('file.stub'),
       '^[./a-zA-Z0-9$_-]+\\.(css|scss)$':
           resolveFromUtils('style.stub'),
+      // when this is removed from the base webpack config, we can likely
+      // remove the runtime and include the polyfill in the test environment
+      'babel-runtime': require.resolve('babel-plugin-transform-runtime'),
     },
     aliases
   ),