- env vars: remove BABEL_

- add E2E_SELECTORS
- Use 'me' shortcut when making requests
- event handler: call puppeteer event handler if exists
- allow edit the whole launch options and mask token field
- add eslintrc
- webpack: let picker-plugin accepts relative and absoluate path
- webpack: disable reload
- install @babel/plugin-transform-modules-commonjs to resolve problems of mixing commonjs and es6 module
- refactor config.js
- install eslint, babel
- story: only apply default launch options when not specify

README.react.md

@@ -256,7 +256,7 @@ for more details.
 First, install dependencies as shown below. This only needs to be
 done once:
 ```shell
-$ npm install --prefix storybook-react/
+$ npm ci --prefix storybook-react/
 ```
 
 Then, start up the testing server:

README.vue.md

@@ -296,7 +296,7 @@ You have to include CSS files and set `class` or `style` props on your own.
 First, install dependencies as shown below. This only needs to be
 done once:
 ```shell
-$ npm install --prefix storybook-vue/
+$ npm ci --prefix storybook-vue/
 ```
 
 Then, start up the testing server:

babel.config.js

@@ -15,6 +15,7 @@ const buildEnvVarDefaults = {
   PICKER_URL_V1:
     'https://static-cdn.kloudless.com/p/platform/explorer/explorer.html',
   BASE_URL: 'https://api.kloudless.com',
+
   // for development only
   KLOUDLESS_APP_ID: null,
   // 'MIT' or 'AGPL'.
@@ -23,11 +24,11 @@ const buildEnvVarDefaults = {
 };
 
 const transformDefines = {
-  BABEL_VERSION: packages.version,
+  VERSION: packages.version,
 };
 
 Object.keys(buildEnvVarDefaults).forEach((varName) => {
-  transformDefines[`BABEL_${varName}`] = (
+  transformDefines[varName] = (
     process.env[varName] || buildEnvVarDefaults[varName]);
 });
 

config/picker-plugins.js

@@ -10,9 +10,9 @@ const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
 const srcPath = path.resolve(__dirname, '../src');
 const cldrPath = path.resolve(__dirname, '../bower_components/cldr-data/');
 
-const getLocalizationCopyData = (distPath) => {
-  const localeDistPath = path.resolve(distPath, 'picker/localization');
-  const cldrDistPath = path.resolve(localeDistPath, 'cldr-data');
+const getLocalizationCopyData = (pickerDistPath) => {
+  const localeDistPath = path.join(pickerDistPath, 'localization');
+  const cldrDistPath = path.join(localeDistPath, 'cldr-data');
   const copyData = [
     {
       from: path.resolve(srcPath, 'picker/localization'),
@@ -35,13 +35,13 @@ const getLocalizationCopyData = (distPath) => {
     copyData.push({
       from: path.resolve(__dirname,
         '../node_modules/@kloudless/file-picker-plupload-module/i18n/'),
-      to: path.resolve(localeDistPath, 'plupload/i18n/'),
+      to: path.join(localeDistPath, 'plupload/i18n/'),
     });
   }
   return copyData;
 };
 
-module.exports = function getPickerPlugins(distPath) {
+module.exports = function getPickerPlugins(pickerDistPath) {
   return [
     new webpack.ProvidePlugin({
       // expose jquery to global for jquery plugins
@@ -55,18 +55,18 @@ module.exports = function getPickerPlugins(distPath) {
     new CopyWebpackPlugin([
       {
         from: path.resolve(srcPath, '../node_modules/less/dist/less.min.js'),
-        to: path.resolve(distPath, 'picker/less.js'),
+        to: path.join(pickerDistPath, 'less.js'),
       },
     ]),
     // copy *.less
     new CopyWebpackPlugin([
       {
         from: path.resolve(srcPath, 'picker/css/'),
-        to: path.resolve(distPath, 'picker/less/'),
+        to: path.join(pickerDistPath, 'less/'),
       },
     ]),
     // copy localization and cldr data
-    new CopyWebpackPlugin(getLocalizationCopyData(distPath)),
+    new CopyWebpackPlugin(getLocalizationCopyData(pickerDistPath)),
     /** Attach an id to the picker script tag
      * for util.getBaseUrl() to identify the script tag
      * This plugin must be put after all HtmlWebpackPlugins

config/story-dev-server.js

@@ -0,0 +1,55 @@
+/**
+ * Express server for building and hosting the loader and picker page in dev
+ * env.
+ */
+/* eslint-disable no-console */
+const express = require('express');
+const webpack = require('webpack');
+const webpackDevMiddleware = require('webpack-dev-middleware');
+const webpackHotMiddleware = require('webpack-hot-middleware');
+
+const webpackDevConfig = require('./webpack.story.conf');
+
+const app = express();
+const compiler = webpack(webpackDevConfig);
+
+console.log('Starting Dev Server...');
+
+// Accept HMR requests from storybook server.
+app.use((req, res, next) => {
+  res.append('Access-Control-Allow-Origin', ['*']);
+  res.append('Access-Control-Allow-Methods', 'GET');
+  next();
+});
+
+// bind webpack and hot reload
+app.use(webpackDevMiddleware(compiler, {
+  logTime: true,
+  stats: 'minimal',
+  publicPath: '/',
+}));
+app.use(webpackHotMiddleware(compiler, {
+  log: console.log,
+  path: '/__webpack_hmr',
+  heartbeat: 10 * 1000,
+}));
+
+// Listen on 2 ports to host loader and picker separately.
+app.listen(8081, () => {
+  console.log('Loader hosted at http://localhost:8081/sdk/kloudless.picker.js');
+  console.log(
+    'React binding hosted at '
+    + 'http://localhost:8081/sdk/kloudless.picker.react.js',
+  );
+  console.log(
+    'Vue binding hosted at ' +
+    'http://localhost:8081/sdk/kloudless.picker.vue.js',
+  );
+  console.log('Webpack bundles are compiling...');
+});
+app.listen(8082, () => {
+  console.log(
+    'View page hosted at http://localhost:8082/file-picker/v2/index.html',
+  );
+  console.log('Webpack bundles are compiling...');
+});

config/webpack.dev.conf.js

@@ -70,7 +70,7 @@ module.exports = [
       // Don't watch static json files to reduce CPU usage
       new webpack.WatchIgnorePlugin([/bower_components\/cldr-data/]),
     ].concat(getPickerPlugins(
-      path.resolve(devServerContentPath, 'dist'),
+      path.join(devServerContentPath, 'dist/picker/'),
     )),
   }),
 ];

config/webpack.prod.conf.js

@@ -108,7 +108,7 @@ module.exports = [
         template: path.resolve(srcPath, 'picker/templates/index.pug'),
         chunks: ['picker'],
       }),
-    ].concat(getPickerPlugins(distPath)),
+    ].concat(getPickerPlugins(path.join(distPath, 'picker/'))),
   }),
   // dev-server index page for dist-test
   merge(prodConfig, {

config/webpack.story.conf.js

@@ -1,9 +1,10 @@
 /**
  * Webpack config to build loader, react-wrapper, vue-wrapper and picker
  * scripts and related assets.
- * Storybook server will host these static files and import file picker via
- * <script> tag. See storybook/.storybook/preview-head.html.
+ * Storybook server will include loader scripts in
+ * storybook-test/.storybook/preview-head.html.
  */
+const webpack = require('webpack');
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const baseWebpackConfig = require('./webpack.base.conf');
@@ -15,60 +16,96 @@ const BASE_CONFIG = merge(baseWebpackConfig, {
   devtool: '#source-map',
 });
 const SRC_PATH = path.resolve(__dirname, '../src');
-const DIST_PATH = path.resolve(__dirname, '../storybook-test/static/');
 
 module.exports = [
   // react-wrapper of loader
   merge(BASE_CONFIG, {
+    name: 'react-loader',
     entry: {
-      'react-wrapper': path.resolve(SRC_PATH, 'loader/js/react/index.js'),
+      'sdk/kloudless.picker.react': [
+        'webpack-hot-middleware/client?reload=false&quiet=false'
+        + '&name=react-loader&path=http://localhost:8081/__webpack_hmr',
+        path.resolve(SRC_PATH, 'loader/js/react/index.js'),
+      ],
     },
     output: {
+      filename: '[name].js',
       libraryTarget: 'umd',
       library: 'filePickerReact',
       globalObject: 'window.Kloudless',
-      path: path.resolve(DIST_PATH, 'loader'),
+      // Tell WHR where to reload resources.
+      publicPath: 'http://localhost:8081/',
     },
+    plugins: [
+      new webpack.HotModuleReplacementPlugin(),
+    ],
   }),
   // vue-wrapper of loader
   merge(BASE_CONFIG, {
+    name: 'vue-loader',
     entry: {
-      'vue-wrapper': path.resolve(SRC_PATH, 'loader/js/vue/index.js'),
+      'sdk/kloudless.picker.vue': [
+        'webpack-hot-middleware/client?reload=false&quiet=false&name=vue-loader'
+        + '&path=http://localhost:8081/__webpack_hmr',
+        path.resolve(SRC_PATH, 'loader/js/vue/index.js'),
+      ],
     },
     output: {
+      filename: '[name].js',
       libraryTarget: 'umd',
       library: 'filePickerVue',
       globalObject: 'window.Kloudless',
-      path: path.resolve(DIST_PATH, 'loader'),
+      // Tell WHR where to reload resources.
+      publicPath: 'http://localhost:8081/',
     },
+    plugins: [
+      new webpack.HotModuleReplacementPlugin(),
+    ],
   }),
   // loader
   merge(BASE_CONFIG, {
+    mode: 'development',
+    name: 'loader',
     entry: {
-      loader: path.resolve(__dirname, 'loader-export-helper.js'),
+      'sdk/kloudless.picker': [
+        'webpack-hot-middleware/client?reload=false&quiet=false&name=loader'
+        + '&path=http://localhost:8081/__webpack_hmr',
+        path.resolve(__dirname, 'loader-export-helper.js'),
+      ],
     },
     output: {
-      path: path.resolve(DIST_PATH, 'loader'),
+      filename: '[name].js',
+      // Tell WHR where to reload resources.
+      publicPath: 'http://localhost:8081/',
     },
+    plugins: [
+      new webpack.HotModuleReplacementPlugin(),
+    ],
   }),
   // picker
   merge(BASE_CONFIG, {
+    name: 'picker',
     entry: {
-      picker: path.resolve(SRC_PATH, 'picker/js/app.js'),
+      'file-picker/v2/picker': [
+        'webpack-hot-middleware/client?reload=false&quiet=false&name=picker'
+        + '&path=http://localhost:8082/__webpack_hmr',
+        path.resolve(SRC_PATH, 'picker/js/app.js'),
+      ],
     },
     output: {
-      path: path.resolve(DIST_PATH, 'picker'),
       filename: '[name].js',
-      publicPath: './',
+      // Tell WHR where to reload resources.
+      publicPath: 'http://localhost:8082/',
     },
     plugins: [
+      new webpack.HotModuleReplacementPlugin(),
       // picker page
       new HtmlWebpackPlugin({
-        filename: path.resolve(DIST_PATH, 'picker/index.html'),
+        filename: 'file-picker/v2/index.html',
         template: path.resolve(SRC_PATH, 'picker/templates/index.pug'),
-        chunks: ['picker'],
+        chunks: ['file-picker/v2/picker'],
       }),
-      ...getPickerPlugins(DIST_PATH),
+      ...getPickerPlugins('file-picker/v2/'),
     ],
   }),
 ];

dev-server/index.js

@@ -1,4 +1,4 @@
-/* global BABEL_KLOUDLESS_APP_ID */
+/* global KLOUDLESS_APP_ID */
 /* eslint-disable func-names, no-console */
 import 'core-js/stable';
 import 'regenerator-runtime/runtime';
@@ -115,7 +115,7 @@ import 'regenerator-runtime/runtime';
     global = window.Kloudless.filePicker, name, type = 'chooser',
     pickerOptions, elementId, objId,
   }) {
-    const appId = BABEL_KLOUDLESS_APP_ID || window.appId;
+    const appId = KLOUDLESS_APP_ID || window.appId;
     const options = { app_id: appId, ...pickerOptions };
 
     function createEvents(picker) {