Merge pull request #64 from twilio/dev

Dev

.prettierrc

@@ -1,7 +1,7 @@
 {
     "useTabs": false,
-    "tabWidth": 2,
+    "tabWidth": 4,
     "semi": true,
     "trailingComma": "es5",
     "singleQuote": true
-}
+}

.travis.yml

@@ -4,13 +4,15 @@ node_js:
   - '8'
 
 before_script:
-  - npm run bootstrap
+  - npm install
 
 script:
+  - npm run lint
   - npm run test
 
 branches:
   except:
   - /^v\d+\.\d+\.\d+$/
   only:
-  - master
+  - master
+  - dev

jest.config.js

@@ -4,10 +4,10 @@ module.exports = {
   preset: 'ts-jest',
   testEnvironment: 'jsdom',
   collectCoverageFrom: [
-    '<rootDir>/packages/**/*.{js|ts}'
+    '<rootDir>/packages/**/*.ts'
   ],
   testMatch: [
-    '<rootDir>/**/__tests__/**/*.test.{js|ts}'
+    '<rootDir>/packages/**/__tests__/**/*.test.ts'
   ],
   transform: {
     '^.+\\.js?$': '<rootDir>/node_modules/babel-jest'
@@ -20,4 +20,4 @@ module.exports = {
     '/node_modules/',
     '<rootDir>/packages/create-flex-plugin/templates/*'
   ]
-};
+};

lerna.json

@@ -3,5 +3,5 @@
   "packages": [
     "packages/*"
   ],
-  "version": "1.5.2"
+  "version": "2.0.0-beta.1"
 }

package.json

@@ -1,24 +1,31 @@
 {
 	"scripts": {
+		"lint": "tslint --project tsconfig.json",
+		"lint:fix": "tslint --project tsconfig.json --fix",
 		"test": "jest",
 		"test:watch": "jest --watchAll",
-		"bootstrap": "lerna bootstrap"
+		"bootstrap": "lerna bootstrap --no-ci",
+		"postinstall": "npm run bootstrap"
 	},
 	"devDependencies": {
 		"@babel/cli": "^7.1.2",
 		"@babel/core": "^7.1.2",
 		"@babel/polyfill": "^7.0.0",
 		"@babel/preset-env": "^7.1.0",
 		"@babel/preset-typescript": "^7.1.0",
-		"@types/jest": "^23.3.5",
-		"all-contributors-cli": "^5.4.0",
+		"@types/jest": "^24.0.11",
+		"all-contributors-cli": "^6.3.1",
 		"babel-core": "7.0.0-bridge.0",
-		"babel-jest": "^23.6.0",
+		"babel-jest": "^24.7.1",
 		"babel-register": "^6.26.0",
-		"jest": "^23.6.0",
-		"lerna": "^2.9.1",
-		"ts-jest": "^23.10.4",
-		"typescript": "^3.1.3"
+		"jest": "^24.7.1",
+		"lerna": "3.13.4",
+		"ts-jest": "^24.0.2",
+		"tslint": "^5.16.0",
+		"tslint-react": "^4.0.0",
+		"typescript": "^3.4.3"
 	},
-	"dependencies": {}
+	"dependencies": {
+		"@types/node": "^11.13.5"
+	}
 }

packages/craco-config-flex-plugin/index.js

@@ -0,0 +1,7 @@
+const devServer = require('./lib/devServer');
+const webpack = require('./lib/webpack');
+
+module.exports = {
+     webpack: webpack,
+     devServer: devServer
+};

packages/craco-config-flex-plugin/lib/devServer.js

@@ -0,0 +1,10 @@
+const path = require('path');
+
+module.exports = (config, { env, paths, proxy, allowedHost }) => {
+     config.contentBase = [
+          config.contentBase,
+          path.join(process.cwd(), 'node_modules', 'flex-plugin', 'dev_assets'),
+     ];
+
+     return config;
+};

packages/craco-config-flex-plugin/lib/webpack.js

@@ -0,0 +1,52 @@
+const readPkg = require('read-pkg');
+const path = require('path');
+
+module.exports = {
+     configure: (config, context) => {
+          //do stuff with the webpack config...
+          const pkg = readPkg.sync();
+
+          // node_modules/@twilio/flex-ui/package.json
+          const installedFlexUIPkg = readPkg.sync({cwd: path.join(process.cwd(), 'node_modules', '@twilio/flex-ui')});
+          const TWILIO_FLEX_VERSION = installedFlexUIPkg.version;
+
+          config.output.filename = `${pkg.name}.js`;
+          config.output.chunkFilename = `[name].chunk.js`;
+          config.plugins = config.plugins.filter(plugin =>
+               !['SWPrecacheWebpackPlugin', 'ManifestPlugin'].includes(
+                    plugin.constructor.name
+               )
+          );
+          config.plugins.forEach(plugin => {
+               if (plugin.constructor.name === 'HtmlWebpackPlugin') {
+                    plugin.options.inject = false;
+                    plugin.options.hash = false;
+                    return;
+               }
+
+               if (plugin.constructor.name === 'InterpolateHtmlPlugin') {
+                    plugin.replacements = {
+                         ...plugin.replacements,
+                         TWILIO_FLEX_VERSION,
+                    };
+               }
+          });
+
+          config.resolve.alias = {
+               ...config.resolve.alias,
+               '@twilio/flex-ui': 'flex-plugin/dev_assets/flex-shim.js',
+          };
+
+          config.externals = {
+               'react': 'React',
+               'react-dom': 'ReactDOM',
+               'redux': 'Redux',
+               'react-redux': 'ReactRedux',
+          };
+
+          config.optimization.splitChunks = false;
+          config.optimization.runtimeChunk = false;
+
+          return config;
+     }
+};

packages/craco-config-flex-plugin/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "craco-config-flex-plugin",
+  "version": "2.0.0-beta.1",
+  "description": "Plugin for craco configs to bundle Twilio Flex Plugins",
+  "keywords": [
+    "flex",
+    "twilio",
+    "craco",
+    "plugins"
+  ],
+  "author": "Kousha Talebian <[email protected]>",
+  "homepage": "https://github.com/twilio/flex-plugin-builder#readme",
+  "license": "MIT",
+  "main": "index.js",
+  "directories": {
+    "dist": "dist",
+    "test": "__tests__"
+  },
+  "files": [
+    "lib",
+    "index.js"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/twilio/flex-plugin-builder.git"
+  },
+  "scripts": {
+    "test": "echo \"Error: run tests from root\" && exit 1"
+  },
+  "bugs": {
+    "url": "https://github.com/twilio/flex-plugin-builder/issues"
+  },
+  "dependencies": {
+    "path": "^0.12.7",
+    "read-pkg": "^5.1.0"
+  },
+  "peerDependencies": {
+    "@craco/craco": "^5.0.2",
+    "flex-plugin": "*"
+  }
+}

packages/create-flex-plugin/__tests__/__mocks__/boxen.ts

@@ -0,0 +1,3 @@
+module.exports = (message: string) => {
+  return message;
+};

packages/create-flex-plugin/__tests__/__mocks__/yargs.ts

@@ -0,0 +1,13 @@
+const yargs = () => ({
+  alias: () => {
+    // no-op
+  },
+  usage: (msg: string, description: string, builder: () => void) => {
+    // no-op
+  },
+  parse: () => {
+    // no-op
+  },
+});
+
+export default yargs;

packages/create-flex-plugin/__tests__/lib/cli.test.ts

@@ -0,0 +1,12 @@
+import cli from '../../src/lib/cli';
+import createFlexPlugin from '../../src/lib/create-flex-plugin';
+
+jest.mock('../../src/lib/create-flex-plugin');
+
+describe('cli', () => {
+    it('should call createFlexPlugin', () => {
+        cli().parse();
+
+        expect(createFlexPlugin).toHaveBeenCalled();
+    });
+});

packages/create-flex-plugin/__tests__/lib/create-flex-plugin.test.ts

@@ -0,0 +1,36 @@
+import * as execa from 'execa';
+import createFlexPlugin from '../../src/lib/create-flex-plugin';
+
+jest.mock('execa');
+jest.mock('../../src/utils/logging');
+
+describe('create-flex-plugin', () => {
+    const accountSid = 'AC00000000000000000000000000000000';
+
+    beforeEach(() => jest.clearAllMocks());
+
+    describe('createFlexPlugin', () => {
+        it(`should not install any dependency by default`, async () => {
+            // Act
+            await createFlexPlugin({
+               name: 'plugin-test',
+               accountSid,
+            } as any);
+
+            // Assert
+            expect(execa).not.toHaveBeenCalled();
+        });
+
+        test(`should install the dependencies if specified`, async () => {
+            // Act
+            await createFlexPlugin({
+                name: 'plugin-test',
+                accountSid,
+                install: true,
+            } as any);
+
+            // Assert
+            expect(execa).toHaveBeenCalled();
+        });
+    });
+});