Rewrite project to make it smaller, faster and more understandable (#72)

* refactor: use simpler approach

* refactor: update tests and fix code accordingly

* refactor: finalize code & tests

* Finish fixing tests for IE11
* Move code to the src directory

* refactor: use forEach for array-like structures

* refactor: convert to Typescript & add more documentation

* refactor: add small fixes and tweaks for Terser

* test: update tests

* chore: update dependencies and building pipeline

* chore: replace husky with simple-git-hooks

* chore: add size-limit check

* chore: add tslib package required by @rollup/plugin-typescript

* refactor: address review comments

* Fix issue with multiple rules replacement.
* Use let/const and arrow functions wherever possible.
* Use "contributors" in package.json

* refactor: use more `self` instead of `this`

* test: add tests for multi-rule style replacement

* refactor: remove Terser annotations

BREAKING CHANGE: project re-write

.size-limit.js

@@ -0,0 +1,6 @@
+module.exports = [
+  {
+    path: 'dist/adoptedStyleSheets.js',
+    limit: '2 kB',
+  },
+];

karma.conf.js

@@ -1,17 +1,17 @@
 // Karma configuration
 // Generated on Sun Jan 20 2019 23:06:22 GMT-0600 (CST)
-const {readFileSync} = require('fs');
-const {resolve} = require('path');
+const rollupCommonjs = require('@rollup/plugin-commonjs');
+const rollupNodeResolve = require('@rollup/plugin-node-resolve').default;
+const rollupPluginBabel = require('@rollup/plugin-babel').default;
+const rollupPluginTypescript = require('@rollup/plugin-typescript');
 
 const isCI = !!process.env.CI;
-const watch = !!process.argv.find(arg => arg.includes('watch')) && !isCI;
-const coverage = !!process.argv.find(arg => arg.includes('--coverage'));
+const watch = !!process.argv.find((arg) => arg.includes('watch')) && !isCI;
+const coverage = !!process.argv.find((arg) => arg.includes('--coverage'));
 
-const babelrc = JSON.parse(
-  readFileSync(resolve(process.cwd(), '.babelrc'), 'utf8'),
-);
+const extensions = ['.ts', '.js'];
 
-module.exports = config => {
+module.exports = (config) => {
   config.set({
     // base path that will be used to resolve all patterns (eg. files, exclude)
     basePath: '',
@@ -38,17 +38,16 @@ module.exports = config => {
     frameworks: ['jasmine', 'detectBrowsers'],
     client: {
       jasmine: {
-        random: false
-      }
+        random: false,
+      },
     },
 
     // list of files / patterns to load in the browser
     files: [
       {pattern: 'test/polyfills.js', watched: false},
-      {pattern: 'src/index.js', watched: false},
+      {pattern: 'src/index.ts', watched: false},
       {pattern: 'test/init-while-loading.js', watched: false},
-      {pattern: 'test/polyfill.test.js', watched: false},
-      {pattern: 'test/closed-root.test.js', watched: false}
+      {pattern: 'test/polyfill.test.ts', watched: false},
     ],
 
     // list of files / patterns to exclude
@@ -58,8 +57,8 @@ module.exports = config => {
     // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
     preprocessors: {
       'test/polyfills.js': ['rollup'],
-      'src/index.js': ['sourceRollup'],
-      'test/polyfill.test.js': ['rollup'],
+      'src/index.ts': ['sourceRollup'],
+      'test/polyfill.test.ts': ['rollup'],
     },
 
     // test results reporter to use
@@ -101,21 +100,45 @@ module.exports = config => {
       usePhantomJS: false,
       preferHeadless: true,
       postDetection(availableBrowsers) {
-        return availableBrowsers.filter(browser => browser !== 'SafariTechPreview');
-      }
+        return availableBrowsers.filter(
+          (browser) => browser !== 'SafariTechPreview' && browser !== 'Edge',
+        );
+      },
     },
 
     rollupPreprocessor: {
       plugins: [
-        require('rollup-plugin-commonjs')({
+        rollupCommonjs({
           include: 'node_modules/**',
           exclude: 'node_modules/@open-wc/**',
         }),
-        require('rollup-plugin-node-resolve')(),
-        require('rollup-plugin-babel')({
+        rollupNodeResolve({
+          extensions,
+        }),
+        rollupPluginBabel({
+          babelHelpers: 'bundled',
           babelrc: false,
-          include: ['node_modules/@open-wc/**', 'test/**'],
-          ...babelrc,
+          extensions,
+          include: [
+            'node_modules/@open-wc/**',
+            'node_modules/lit-element/**',
+            'node_modules/lit-html/**',
+            'test/**',
+          ],
+          presets: [
+            '@babel/preset-typescript',
+            [
+              '@babel/preset-env',
+              {
+                loose: true,
+                targets: {
+                  browsers: ['last 2 versions', 'IE 11'],
+                },
+                shippedProposals: true,
+                useBuiltIns: false,
+              },
+            ],
+          ],
           plugins: [
             '@babel/plugin-transform-instanceof',
             'babel-plugin-transform-async-to-promises',
@@ -126,29 +149,37 @@ module.exports = config => {
         format: 'iife',
         name: 'tests',
       },
+      treeshake: true,
     },
 
     customPreprocessors: {
       sourceRollup: {
         base: 'rollup',
         options: {
           plugins: [
-            require('rollup-plugin-node-resolve')(),
-            require('rollup-plugin-babel')({
+            rollupNodeResolve({
+              extensions,
+            }),
+            rollupPluginTypescript({
+              isolatedModules: true,
+              tsconfig: require.resolve('./tsconfig.build.json'),
+            }),
+            rollupPluginBabel({
+              babelHelpers: 'bundled',
               babelrc: false,
-              ...babelrc,
+              extensions,
               plugins: [coverage && 'babel-plugin-istanbul'].filter(Boolean),
             }),
             require('./plugins/rollup-plugin-inject-code')({
               'index.js': {
                 line: 3,
-                code: "  if ('adoptedStyleSheets' in document) { return; }\n",
+                code: "    if ('adoptedStyleSheets' in document) { return; }\n",
               },
             }),
           ],
           output: {
             format: 'iife',
-            name: 'tests',
+            name: 'source',
           },
           treeshake: false,
         },