Merge af009b3 into 67f7dbe

scripts/build.js

@@ -10,19 +10,30 @@ const transformImportToCjs = require('./helpers/transformImportToCjs');
 const transformEs6ToEs5 = require('./helpers/transformEs6ToEs5');
 const safeWriteFile = require('./helpers/safeWriteFile');
 
+const { CI_ENV } = process.env;
+
 const scope = getScope();
-console.log(`Building ${scope !== '*' ? scope : 'all packages'}\n`);
+console.log(`Building ${scope !== '*' ? scope : 'all packages'} ` +
+  `for ${CI_ENV ? 'DEPLOYMENT' : 'DEVELOPMENT'}\n`);
 
 forEachPackage(scope, (pkg) => {
   (async () => {
     console.log(`Started:\n${pkg}\n`);
 
     let context;
 
-    // Outputs `dist/es/es6/` and `dist/es/es5/` from `src/`
+    // Injects CSS in `src/` files (DEPLOYMENT only!)
 
     context = await getJsPathsExceptTests(`${pkg}/src`);
 
+    if (CI_ENV) {
+      await Promise.all(context.map(filePath => readFile(filePath, 'utf8')
+        .then(injectCssContent)
+        .then(safeWriteFile(filePath))));
+    }
+
+    // Outputs `dist/es/es6/` and `dist/es/es5/` from `src/`
+
     await Promise.all(context.map((filePath) => {
       const es6Path = filePath.replace('/src/', '/dist/es/es6/');
       const es5Path = filePath.replace('/src/', '/dist/es/es5/');

.nycrc → scripts/config/.nycrc

@@ -14,5 +14,5 @@
     "text-summary"
   ],
   "all": true,
-  "report-dir": "./coverage/unit"
+  "report-dir": "coverage/unit"
 }

karma.conf.js → scripts/config/karma.conf.js

@@ -1,6 +1,5 @@
-const { resolve } = require('path');
 const webpackTestConfig = require('./webpack.test.config');
-const getBasePath = require('./scripts/helpers/getBasePath');
+const getBasePath = require('../helpers/getBasePath');
 
 const basePath = getBasePath();
 const allPackagesPath = './packages/*';
@@ -17,14 +16,17 @@ if (basePath === allPackagesPath) {
     ...reports,
     reporters: [...reports.reporters, 'coverage-istanbul'],
     coverageIstanbulReporter: {
-      dir: resolve(__dirname, './coverage/integration'),
+      dir: 'coverage/integration',
       reports: ['html', 'lcovonly', 'text-summary'],
       fixWebpackSourcePaths: true,
       skipFilesWithNoCoverage: true,
     },
   };
 }
 
+const cssFiles = `${allPackagesPath}/src/**/*.css`;
+const testFiles = `${basePath}/src/**/*.test.js`;
+
 module.exports = (config) => {
   config.set({
     ...reports,
@@ -38,26 +40,27 @@ module.exports = (config) => {
         flags: ['--no-sandbox'],
       },
     },
-    browserNoActivityTimeout: 60000,
-    singleRun: true,
-    frameworks: ['mocha', 'chai-sinon'],
+    basePath: '../..',
     urlRoot: 'test',
     proxies: {
       '/test/': '/test/base/packages/',
     },
+    browserNoActivityTimeout: 60000,
+    singleRun: true,
+    frameworks: ['mocha', 'chai-sinon'],
     files: [
       {
-        pattern: `${allPackagesPath}/src/**/*.css`,
+        pattern: cssFiles,
         watched: true,
         served: true,
       },
       {
-        pattern: `${basePath}/src/**/*.test.js`,
+        pattern: testFiles,
         watched: false,
       },
     ],
     preprocessors: {
-      [`${basePath}/src/**/*.test.js`]: ['webpack'],
+      [testFiles]: ['webpack'],
     },
   });
 };

webpack.spec.config.js → scripts/config/webpack.spec.config.js

@@ -13,7 +13,7 @@ module.exports = {
             esModules: true,
           },
         },
-        include: resolve(__dirname, './packages/'),
+        include: resolve('./packages/'),
         exclude: /((node_modules|dist|public)(\\|\/|$)|(test|spec|cafe|bundle)\.js$)/,
       },
     ],

webpack.server.config.js → scripts/config/webpack.start.config.js

@@ -2,7 +2,7 @@ const { resolve } = require('path');
 const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const HtmlStringReplace = require('html-replace-webpack-plugin');
-const getBasePath = require('./scripts/helpers/getBasePath');
+const getBasePath = require('../helpers/getBasePath');
 
 const basePath = getBasePath();
 
@@ -11,7 +11,7 @@ module.exports = () => ({
   resolve: {
     mainFields: ['module', 'jsnext:main', 'main'],
   },
-  context: resolve(__dirname, basePath),
+  context: resolve(basePath),
   entry: {
     app: './src/index.js',
   },
@@ -21,8 +21,8 @@ module.exports = () => ({
     historyApiFallback: true,
     publicPath: '/',
     contentBase: [
-      resolve(__dirname, `${basePath}/public`),
-      resolve(__dirname, './packages'),
+      resolve(`${basePath}/public`),
+      resolve('./packages'),
     ],
     watchContentBase: true,
   },

webpack.test.config.js → scripts/config/webpack.test.config.js

@@ -1,5 +1,5 @@
 const { resolve } = require('path');
-const getBasePath = require('./scripts/helpers/getBasePath');
+const getBasePath = require('../helpers/getBasePath');
 
 const basePath = getBasePath();
 
@@ -8,7 +8,7 @@ module.exports = () => ({
   resolve: {
     mainFields: ['module', 'jsnext:main', 'main'],
   },
-  context: resolve(__dirname, basePath),
+  context: resolve(basePath),
   module: {
     rules: [
       {

scripts/helpers/injectDependencies.js

@@ -1,28 +1,41 @@
 const { search = '' } = document.location;
 const ecmaVersion = (search.match(/[?&]es=(\d)/) || [])[1] || '6';
 
+const insertAfter = (referenceNode, newNode) => {
+  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
+};
+
 const docHead = document.querySelector('head');
 
-const injectScript = Array
+const originalTag = Array
   .from(document.querySelectorAll('script'))
-  .find(domEl => domEl.getAttribute('src')
-    && domEl.getAttribute('src').endsWith('injectDependencies.js'));
+  .find(domEl => domEl.getAttribute('src') &&
+    domEl.getAttribute('src').endsWith('injectDependencies.js'));
+
+const polyPath = '../../../scripts/polyfills';
+
+const babelPolyfillTag = document.createElement('script');
+babelPolyfillTag.src = `${polyPath}/babel-polyfill-7.0.0.js`;
 
-const polyfillScript = document.createElement('script');
-polyfillScript.src = '../../../polyfills/webcomponents-bundle-2.0.2.js';
+const webComponentsPolyfillTag = document.createElement('script');
+webComponentsPolyfillTag.src = `${polyPath}/webcomponents-bundle-2.0.2.js`;
 
-const adapterScript = document.createElement('script');
-adapterScript.src = '../../../polyfills/custom-elements-es5-adapter-2.0.2.js';
+const customElementsAdapterTag = document.createElement('script');
+customElementsAdapterTag.src = `${polyPath}/custom-elements-es5-adapter-2.0.2.js`;
 
-const indexScript = document.createElement('script');
-indexScript.src = `../dist/iife/es${ecmaVersion}/index.js`;
+const index = document.createElement('script');
+index.src = `../dist/iife/es${ecmaVersion}/index.js`;
+
+if (ecmaVersion === '5') {
+  insertAfter(originalTag, babelPolyfillTag);
+}
 
-docHead.appendChild(polyfillScript);
+insertAfter(originalTag, webComponentsPolyfillTag);
 
 if (ecmaVersion === '5') {
-  docHead.appendChild(adapterScript);
+  insertAfter(originalTag, customElementsAdapterTag);
 }
 
-docHead.appendChild(indexScript);
+insertAfter(originalTag, index);
 
-docHead.removeChild(injectScript);
+docHead.removeChild(originalTag);

scripts/spec.js

@@ -10,9 +10,11 @@ console.log(`Testing ${scope !== '*' ? scope : 'all packages'}\n`);
 const basePath = getBasePath(scope);
 const testFiles = join(basePath, 'src/**/*.spec.js');
 const nyc = join('node_modules/.bin/nyc');
+const nycRc = join('scripts/config/.nycrc');
 const mochaWebpack = join('node_modules/.bin/mocha-webpack');
+const webpackConfig = join('scripts/config/webpack.spec.config.js');
 
 env.PKG = scope;
 
-exec(`${scope === '*' ? `${nyc} ` : ''}` +
-  `${mochaWebpack} --colors --webpack-config webpack.spec.config.js "${testFiles}"`);
+exec(`${scope === '*' ? `${nyc} --nycrc-path ${nycRc} ` : ''}` +
+  `${mochaWebpack} --colors --webpack-config ${webpackConfig} "${testFiles}"`);

scripts/start.js

@@ -12,7 +12,8 @@ if (scope === '*') {
 console.log(`Starting ${scope !== '*' ? scope : 'all packages'}\n`);
 
 const webpackDevServer = join('node_modules/.bin/webpack-dev-server');
+const webpackConfig = join('scripts/config/webpack.start.config.js');
 
 env.PKG = scope;
 
-exec(`${webpackDevServer} --config webpack.server.config.js`);
+exec(`${webpackDevServer} --config ${webpackConfig}`);

scripts/test.js

@@ -10,6 +10,7 @@ env.PKG = scope;
 const { DEBUG } = process.env;
 
 const karma = join('node_modules/.bin/karma');
+const karmaConfig = join('scripts/config/karma.conf.js');
 
-exec(`${karma} start --colors` +
+exec(`${karma} start ${karmaConfig} --colors` +
   `${DEBUG ? ' --browsers=Chrome --single-run=false --auto-watch' : ''}`);