Package now consists of ES2015 and commonjs (#1576)

* pull rollup, adjust prettier execution, use husky for git hooks

* differentiate cjs from mjs

* esm looks correct

* simply use lib to build our final package - no need to copy to another folder

* add package prep as postcompile for easier testing of package creation

* changelog

* no longer need to ignore npm

* re-establish rollup to create file for bundlesize check and ignore it for final package

* use `bundlesize` dir to better signal the intent (not a final package file)

.npmignore

@@ -1,21 +1 @@
-example
-src
-test
-appveyor.yml
-tsconfig.json
-tslint.json
-typings.json
-ambient.d.ts
-coverage
-scripts
-.prettierrc
-.github
-.travis.yml
-.vscode
-.idea
-CONTRIBUTING.md
-dangerfile.ts
-renovate.json
-ROADMAP.md
-rollup.*
-yarn.lock
+bundlesize

Changelog.md

@@ -1,6 +1,7 @@
 # Change log
 
 ### vNext
+- Change package to produce ES2015 as `module` and commonjs for `main` [#1576](https://github.com/apollographql/react-apollo/pull/1576)
 
 ### 2.1.0-alpha.0
 

package.json

@@ -5,37 +5,47 @@
   "module": "src/index.ts",
   "scripts": {
     "danger": "danger run --verbose",
-    "deploy":
-      "./scripts/prepare-package.sh && cd npm && npm publish --tag=alpha",
+    "predeploy": "npm run compile",
+    "deploy": "cd lib && npm publish --tag=alpha",
+    "filesize": "rollup -c rollup.config.js && bundlesize",
     "test": "npm run lint && npm run type-check && npm run jest",
     "jest": "jest --maxWorkers=4 --coverage",
     "test-watch": "jest --watch",
     "test-preact": "jest --config ./jest.preact.config.json --no-cache",
-    "filesize": "bundlesize",
     "type-check": "tsc --project tsconfig.json --noEmit && flow check",
-    "precompile": "rimraf lib && rimraf npm",
-    "compile":
-      "tsc --project tsconfig.json && rimraf lib/test && mv lib/src/* lib/. && rimraf lib/src",
-    "postcompile":
-      "rollup -c rollup.config.js && rollup -c rollup.test-utils.config.js",
+    "precompile": "rimraf lib",
+    "compile": "npm run compile:esm && npm run compile:cjs",
+    "compile:esm": "tsc --project tsconfig.json -d && rimraf lib/test && mv lib/src/* lib/. && rimraf lib/src && cd lib && rename js mjs",
+    "compile:cjs": "tsc --project tsconfig.cjs.json && rimraf lib/test && mv lib/src/* lib/. && rimraf lib/src",
+    "postcompile": "./scripts/prepare-package.sh",
     "watch": "tsc -w",
     "lint": "tslint --project tsconfig.json --config tslint.json",
-    "lint:fix":
-      "npm run prettier && tslint 'src/*.ts*' --project tsconfig.json --fix",
+    "lint:fix": "npm run prettier && tslint 'src/*.ts*' --project tsconfig.json --fix",
     "lint-staged": "lint-staged",
-    "prettier":
-      "prettier --config .prettierrc --write \"{src,test}/**/*.{js,ts}*\""
+    "prettier": "prettier --write \"{,!(node_modules|lib)/**/}*.{ts*,js*,json,md}\""
   },
   "bundlesize": [
     {
-      "path": "./lib/umd/react-apollo.js",
+      "path": "./lib/bundlesize/react-apollo.js",
       "maxSize": "4.81 KB"
     }
   ],
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
   "lint-staged": {
-    "*.{js,ts}*": ["prettier --single-quote --write", "git add"]
+    "*.{ts*}": [
+      "prettier --write",
+      "yarn lint",
+      "git add"
+    ],
+    "*.{js*,json,md}": [
+      "prettier --write",
+      "git add"
+    ]
   },
-  "pre-commit": "lint-staged",
   "repository": {
     "type": "git",
     "url": "apollostack/react-apollo"
@@ -51,7 +61,9 @@
   ],
   "author": "James Baxley <james@meteor.com>",
   "babel": {
-    "presets": ["env"]
+    "presets": [
+      "env"
+    ]
   },
   "jest": {
     "testEnvironment": "jsdom",
@@ -60,15 +72,24 @@
       "^.+\\.jsx?$": "babel-jest"
     },
     "mapCoverage": true,
-    "moduleFileExtensions": ["ts", "tsx", "js", "json"],
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js",
+      "json"
+    ],
     "modulePathIgnorePatterns": [
       "<rootDir>/examples",
       "<rootDir>/test/flow-usage.js",
       "<rootDir>/test/typescript-usage.tsx"
     ],
-    "projects": ["<rootDir>"],
+    "projects": [
+      "<rootDir>"
+    ],
     "testRegex": "(/test/(?!test-utils\b)\b.*|\\.(test|spec))\\.(ts|tsx|js)$",
-    "setupFiles": ["<rootDir>/test/test-utils/setup.ts"]
+    "setupFiles": [
+      "<rootDir>/test/test-utils/setup.ts"
+    ]
   },
   "license": "MIT",
   "peerDependencies": {
@@ -90,28 +111,29 @@
     "babel-core": "6.26.0",
     "babel-jest": "22.1.0",
     "babel-preset-env": "1.6.1",
-    "bundlesize": "0.15.3",
+    "bundlesize": "^0.15.3",
     "coveralls": "3.0.0",
     "danger": "3.0.5",
     "enzyme": "3.3.0",
     "enzyme-adapter-react-16": "1.1.1",
     "flow-bin": "0.63.1",
     "graphql": "0.11.7",
     "graphql-tag": "2.6.1",
+    "husky": "^0.14.3",
     "jest": "22.1.1",
     "jsdom": "11.5.1",
     "lint-staged": "6.0.0",
-    "pre-commit": "1.2.2",
     "preact": "^8.2.7",
     "preact-compat": "^3.17.0",
     "prettier": "1.10.2",
     "react": "16.2.0",
     "react-dom": "16.2.0",
     "react-test-renderer": "16.2.0",
     "recompose": "0.26.0",
+    "recursive-rename": "^2.0.0",
     "rimraf": "2.6.2",
-    "rollup": "0.54.1",
-    "rollup-plugin-babel-minify": "3.1.2",
+    "rollup": "^0.55.0",
+    "rollup-plugin-babel-minify": "^3.1.2",
     "ts-jest": "22.0.1",
     "tslint": "5.9.1",
     "typescript": "2.6.2",

rollup.config.js

@@ -3,10 +3,10 @@ const minify = require('rollup-plugin-babel-minify');
 export default {
   input: 'lib/index.js',
   output: {
-    file: 'lib/umd/react-apollo.js',
-    format: 'umd',
+    file: 'lib/bundlesize/react-apollo.js',
+    format: 'cjs',
     name: 'react-apollo',
-    sourcemap: true,
+    sourcemap: false,
   },
   plugins: [minify()],
   onwarn,
@@ -18,4 +18,4 @@ function onwarn(message) {
   if (!suppressed.find(code => message.code === code)) {
     return console.warn(message.message);
   }
-}
+}

scripts/prepare-package.sh

@@ -6,46 +6,27 @@
 #    var language = require('react-apollo/server');
 #
 
-# Clear the built output
-rm -rf ./lib ./npm
-
-# Compile new files
-npm run compile
-
-# Make sure the ./npm directory is empty
-rm -rf ./npm
-mkdir ./npm
-
-# Copy all files from ./lib to /npm
-cd ./lib && cp -r ./ ../npm/
-
-# Back to the root directory
-cd ../
-
 # Ensure a vanilla package.json before deploying so other tools do not interpret
 # The built output as requiring any further transformation.
 node -e "var package = require('./package.json'); \
   delete package.babel; \
   delete package[\"lint-staged\"]; \
   delete package.jest; \
   delete package.bundlesize; \
-  delete package[\"pre-commit\"]; \
+  delete package[\"husky\"]; \
   delete package.scripts; \
   delete package.options; \
-  package.main = 'umd/react-apollo.js'; \
-  package.module = 'index.js'; \
-  package['jsnext:main'] = 'index.js'; \
+  package.main = 'index.js'; \
+  package.module = 'index.mjs'; \
   package.typings = 'index.d.ts'; \
   var origVersion = 'local';
   var fs = require('fs'); \
-  fs.writeFileSync('./npm/package.json', JSON.stringify(package, null, 2)); \
+  fs.writeFileSync('./lib/package.json', JSON.stringify(package, null, 2)); \
   "
 
 
-# Copy few more files to ./npm
-cp README.md npm/
-cp LICENSE npm/
-cp src/index.js.flow npm/
-# please keep this in sync with the filename used in package.main
-cp src/index.js.flow npm/umd/react-apollo.js.flow
-
+# Copy few more files to ./lib
+cp README.md lib/
+cp LICENSE lib/
+cp src/index.js.flow lib/
+cp .npmignore lib/

tsconfig.cjs.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es5",
+    "lib": ["es2015", "dom"],
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "noImplicitAny": false,
+    "outDir": "lib",
+    "allowSyntheticDefaultImports": false,
+    "experimentalDecorators": true,
+    "pretty": true,
+    "removeComments": true,
+    "jsx": "react",
+    "skipLibCheck": true,
+    "noUnusedLocals": true
+  },
+  "include": ["./typings/**/*", "./src/**/*", "./test/**/*"],
+  "exclude": ["./node_modules", "./dist", "./lib"]
+}

tsconfig.json

@@ -4,8 +4,6 @@
     "target": "es2015",
     "lib": ["es2015", "dom"],
     "moduleResolution": "node",
-    "sourceMap": true,
-    "declaration": true,
     "noImplicitAny": false,
     "outDir": "lib",
     "allowSyntheticDefaultImports": false,