feat: add support for the latest spec

.eslintrc.json

@@ -0,0 +1,19 @@
+{
+  "extends": [
+    "vaadin/typescript-requiring-type-checking",
+    "vaadin/imports-typescript",
+    "vaadin/prettier"
+  ],
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "rules": {
+    "@typescript-eslint/no-use-before-define": "off",
+    "@typescript-eslint/prefer-includes": "off",
+    "@typescript-eslint/promise-function-async": "off",
+    "@typescript-eslint/unbound-method": "off",
+    "class-methods-use-this": "off",
+    "func-names": "off"
+  }
+}

.github/workflows/ci.yml

@@ -10,7 +10,7 @@ on:
       - 'test/**'
       - '.browserslistrc'
       - '.prettierrc'
-      - 'karma.conf.js'
+      - 'karma.conf.cjs'
       - 'package.json'
       - 'package-lock.json'
       - 'rollup.config.js'
@@ -25,7 +25,7 @@ on:
       - 'test/**'
       - '.browserslistrc'
       - '.prettierrc'
-      - 'karma.conf.js'
+      - 'karma.conf.cjs'
       - 'package.json'
       - 'package-lock.json'
       - 'rollup.config.js'
@@ -39,8 +39,8 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [14.x]
-        os: [windows-latest, macOS-latest]
+        node-version: [18.x]
+        os: [windows-2019, macOS-11]
 
     steps:
       - name: Checkout Project Code
@@ -60,8 +60,8 @@ jobs:
         env:
           CI: true
       - name: Send Coverage to Codecov
-        uses: codecov/codecov-action@v2
+        uses: codecov/codecov-action@v3
         with:
           files: .coverage/lcov.info
           flags: unittests
-          fail_ci_if_error: true
+          fail_ci_if_error: false

.gitignore

@@ -1,4 +1,6 @@
 .DS_Store
+.idea
 .coverage
+.vs-code
 dist
 node_modules

.prettierrc

@@ -1,5 +1,5 @@
 {
-  "bracketSpacing": false,
+  "bracketSpacing": true,
   "printWidth": 80,
   "trailingComma": "all",
   "tabWidth": 2,

.size-limit.js → .size-limit.cjs

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

babel.config.json

@@ -0,0 +1,47 @@
+{
+  "assumptions": {
+    "constantReexports": true,
+    "constantSuper": true,
+    "enumerableModuleMeta": true,
+    "ignoreFunctionLength": true,
+    "ignoreToPrimitiveHint": true,
+    "iterableIsArray": true,
+    "mutableTemplateObject": true,
+    "noClassCalls": true,
+    "noDocumentAll": true,
+    "noIncompleteNsImportDetection": true,
+    "noNewArrows": true,
+    "objectRestNoSymbols": true,
+    "privateFieldsAsSymbols": true,
+    "pureGetters": true,
+    "setClassMethods": true,
+    "setComputedProperties": true,
+    "setPublicClassFields": true,
+    "setSpreadProperties": true,
+    "superIsCallableConstructor": true
+  },
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "exclude": ["@babel/plugin-transform-typeof-symbol"],
+        "shippedProposals": true,
+        "useBuiltIns": false
+      }
+    ],
+    [
+      "@babel/preset-typescript",
+      {
+        "allowDeclareFields": true
+      }
+    ]
+  ],
+  "plugins": [
+    [
+      "@babel/plugin-transform-object-rest-spread",
+      {
+        "useBuiltIns": true
+      }
+    ]
+  ]
+}

commitlint.config.cjs

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+};

karma.conf.js → karma.conf.cjs

@@ -1,23 +1,30 @@
-// Karma configuration
-// Generated on Sun Jan 20 2019 23:06:22 GMT-0600 (CST)
+/* eslint-disable @typescript-eslint/no-require-imports,import/unambiguous */
 const rollupCommonjs = require('@rollup/plugin-commonjs');
 const rollupNodeResolve = require('@rollup/plugin-node-resolve').default;
-const rollupPluginTypescript = require('@rollup/plugin-typescript');
 const rollupPluginBabel = require('@rollup/plugin-babel').default;
-const rollupPluginInstrumentTsCode = require('./plugins/rollup-plugin-instrument-ts-code');
-const rollupPluginInjectCode = require('./plugins/rollup-plugin-inject-code');
+const rollupPluginInstrumentTsCode = require('./plugins/rollup-plugin-instrument-ts-code.cjs');
+const babelConfig = require('./babel.config.json');
+const rollupPluginOptimize = require("./plugins/rollup-plugin-optimize.cjs");
 
 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 extensions = ['.ts', '.js'];
+const rollupPluginBabelConfig = {
+  ...babelConfig,
+  babelHelpers: 'bundled',
+  babelrc: false,
+  extensions,
+  plugins: [
+    ...babelConfig.plugins,
+    '@babel/plugin-transform-instanceof',
+    'babel-plugin-transform-async-to-promises',
+  ],
+};
 
 module.exports = (config) => {
   config.set({
-    // base path that will be used to resolve all patterns (eg. files, exclude)
-    basePath: '',
-
     plugins: [
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
@@ -28,59 +35,34 @@ module.exports = (config) => {
       require('karma-coverage-istanbul-reporter'),
       require('karma-detect-browsers'),
       require('karma-rollup-preprocessor'),
+      require('karma-babel-preprocessor')
     ],
 
-    browserNoActivityTimeout: 60000, //default 10000
-    browserDisconnectTimeout: 10000, // default 2000
-    browserDisconnectTolerance: 1, // default 0
-    captureTimeout: 60000,
-
-    // frameworks to use
-    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
     frameworks: ['jasmine', 'detectBrowsers'],
+
     client: {
       jasmine: {
         random: false,
       },
     },
 
-    // list of files / patterns to load in the browser
     files: [
-      {pattern: 'test/polyfills.js', watched: false},
-      {pattern: 'src/index.ts', watched: false},
-      {pattern: 'test/init-while-loading.js', watched: false},
-      {pattern: 'test/polyfill.test.ts', watched: false},
+      { pattern: 'test/polyfills.js', watched: false },
+      { pattern: 'src/index.ts', watched: false },
+      { pattern: 'test/init-while-loading.js', watched: false },
+      { pattern: 'test/polyfill.test.ts', watched: false },
     ],
 
-    // list of files / patterns to exclude
-    exclude: [],
-
-    // preprocess matching files before serving them to the browser
-    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
     preprocessors: {
       'test/polyfills.js': ['rollup'],
       'src/index.ts': ['sourceRollup'],
+      'test/init-while-loading.js': ['rollup'],
       'test/polyfill.test.ts': ['rollup'],
+      'node_modules/jasmine-core/lib/jasmine-core/jasmine.js': ['babel']
     },
 
-    // test results reporter to use
-    // possible values: 'dots', 'progress'
-    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
     reporters: ['progress', coverage && 'coverage-istanbul'].filter(Boolean),
 
-    // web server port
-    port: 9876,
-
-    // enable / disable colors in the output (reporters and logs)
-    colors: true,
-
-    // level of logging
-    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
-    logLevel: config.LOG_INFO,
-
-    // enable / disable watching file and executing tests whenever any file changes
-    autoWatch: watch,
-
     coverageIstanbulReporter: {
       reports: isCI ? ['lcovonly'] : ['html'],
       dir: '.coverage',
@@ -105,6 +87,16 @@ module.exports = (config) => {
       },
     },
 
+    babelPreprocessor: {
+      options: {
+        ...babelConfig,
+        presets: babelConfig.presets.map(([name, options]) => name.includes('env') ? [name, {
+          ...options,
+          modules: false,
+        }] : [name, options])
+      }
+    },
+
     rollupPreprocessor: {
       plugins: [
         rollupCommonjs({
@@ -115,34 +107,15 @@ module.exports = (config) => {
           extensions,
         }),
         rollupPluginBabel({
-          babelHelpers: 'bundled',
-          babelrc: false,
-          extensions,
+          ...rollupPluginBabelConfig,
           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',
-          ],
         }),
+        rollupPluginOptimize()
       ],
       output: {
         format: 'iife',
@@ -159,17 +132,11 @@ module.exports = (config) => {
             rollupNodeResolve({
               extensions,
             }),
-            rollupPluginTypescript({
-              isolatedModules: true,
-              tsconfig: require.resolve('./tsconfig.test.json'),
+            rollupPluginBabel({
+              ...rollupPluginBabelConfig,
+              include: ['src/**'],
             }),
             coverage && rollupPluginInstrumentTsCode(),
-            rollupPluginInjectCode({
-              'index.js': {
-                line: 3,
-                code: "    if ('adoptedStyleSheets' in document) { return; }\n",
-              },
-            }),
           ].filter(Boolean),
           output: {
             format: 'iife',
@@ -181,12 +148,7 @@ module.exports = (config) => {
       },
     },
 
-    // Continuous Integration mode
-    // if true, Karma captures browsers, runs the tests and exits
+    autoWatch: watch,
     singleRun: !watch,
-
-    // Concurrency level
-    // how many browser should be started simultaneous
-    concurrency: Infinity,
   });
 };