CON-903 Make library npm-compatible

README.md

@@ -26,6 +26,12 @@ Verify that the Sass can compile by running
 $ npx sass ./test/main.scss --load-path=./bower_components/
 ```
 
+And by running:
+
+```sh
+$ npx sass ./test/main.scss --load-path=./node_modules --load-path=./node_modules/@financial-times
+```
+
 ### Developing with a next app
 
 Instruction for developing the library within a next app will be are in development ([ACC-1156](https://financialtimes.atlassian.net/browse/ACC-1156)).

bower.json

@@ -23,7 +23,6 @@
     "o-buttons": "^6.0.2",
     "o-overlay": "^3.0.0",
     "o-tracking": "^2.0.3",
-    "superstore": "^2.1.0",
     "o-visual-effects": "^3.0.0",
     "o-message": "^4.1.8"
   }

jest.config.js

@@ -4,4 +4,5 @@ module.exports = {
 	transform: {
 		'.(js|jsx)': '@sucrase/jest-plugin'
 	},
+	transformIgnorePatterns: ['/node_modules//(?!(@financial-times)/)'],
 };

package.json

@@ -32,7 +32,16 @@
     "webpack-sources": "^1.0.1",
     "webpack-stats-plugin": "^0.1.1"
   },
-  "dependencies": {},
+  "dependencies": {
+    "n-ui-foundations": "github:financial-times/n-ui-foundations#nobower",
+    "next-session-client": "^3.0.1",
+    "o-buttons": "npm:@financial-times/o-buttons@^6.0.2",
+    "o-overlay": "npm:@financial-times/o-overlay@^3.0.0",
+    "o-tracking": "npm:@financial-times/o-tracking@^2.0.3",
+    "o-visual-effects": "npm:@financial-times/o-visual-effects@^3.0.0",
+    "o-message": "npm:@financial-times/o-message@^4.1.8",
+    "superstore": "^2.1.0"
+  },
   "config": {},
   "engines": {
     "node": "12.x"
@@ -45,8 +54,8 @@
   "husky": {
     "hooks": {
       "commit-msg": "node_modules/.bin/secret-squirrel-commitmsg",
-      "pre-commit": "node_modules/.bin/secret-squirrel",
+      "pre-commit": "node_modules/.bin/secret-squirrel && node ./scripts/fromBowerToNpm.js",
       "pre-push": "make verify -j3"
     }
   }
-}
+}

scripts/fromBowerToNpm.js

@@ -0,0 +1,31 @@
+const fs = require('fs');
+const bowerPackage = require('../bower.json');
+const npmPackage = require('../package.json');
+
+function standardNpmPackage (version, name) {
+	return `npm:@financial-times/${name}@${version}`;
+}
+
+const resolutionMap = {
+	'n-ui-foundations': () => 'github:financial-times/n-ui-foundations#nobower',
+	'next-session-client': (version) => `${version}`,
+	'o-buttons': standardNpmPackage,
+	'o-overlay': standardNpmPackage,
+	'o-tracking': standardNpmPackage,
+	'o-visual-effects': standardNpmPackage,
+	'o-message': standardNpmPackage,
+};
+
+for (const dependency in bowerPackage.dependencies) {
+	if (!resolutionMap[dependency]) {
+		throw new Error(`Please update fromBowerToNpm resolution map with the Bower package ${dependency}, so it will be usable also from NPM consumers`
+		);
+	} else {
+		npmPackage.dependencies[dependency] = resolutionMap[dependency](
+			bowerPackage.dependencies[dependency],
+			dependency
+		);
+	}
+}
+
+fs.writeFileSync('package.json', JSON.stringify(npmPackage, null, 2));

webpack.config.js

@@ -30,6 +30,7 @@ const extractOptions = [{
 		sourcemap: true,
 		includePaths: [
 			path.resolve('./bower_components'),
+			path.resolve('./node_modules'),
 			path.resolve('./node_modules/@financial-times')
 		],
 		// NOTE: This line is important for preservation of comments needed by the css-extract-block plugin