Add tests for LWC (#2299)

* add lwc tests

* review feedback

* chore: review feedback

* chore: review feedback

---------

Co-authored-by: Justin Fagnani <[email protected]>

README.md

@@ -31,11 +31,14 @@ npm start
 - [Hybrids](https://github.com/webcomponents/custom-elements-everywhere/tree/master/libraries/hybrids)
 - [Hyperapp](https://github.com/webcomponents/custom-elements-everywhere/tree/master/libraries/hyperapp)
 - [HyperHTML](https://github.com/webcomponents/custom-elements-everywhere/tree/master/libraries/hyperhtml)
+- [Lit](https://github.com/webcomponents/custom-elements-everywhere/tree/master/libraries/lit)
+- [LWC](https://github.com/webcomponents/custom-elements-everywhere/tree/master/libraries/lwc)
 - [Mithril](https://github.com/webcomponents/custom-elements-everywhere/tree/master/libraries/mithril)
 - [Omi](https://github.com/webcomponents/custom-elements-everywhere/tree/master/libraries/omi)
 - [Polymer](https://github.com/webcomponents/custom-elements-everywhere/tree/master/libraries/polymer)
 - [Preact](https://github.com/webcomponents/custom-elements-everywhere/tree/master/libraries/preact)
 - [React](https://github.com/webcomponents/custom-elements-everywhere/tree/master/libraries/react)
+- [React@experimental](https://github.com/webcomponents/custom-elements-everywhere/tree/master/libraries/react-experimental)
 - [Riot.js](https://github.com/webcomponents/custom-elements-everywhere/tree/master/libraries/riot)
 - [Skate](https://github.com/webcomponents/custom-elements-everywhere/tree/master/libraries/skate)
 - [Solid](https://github.com/webcomponents/custom-elements-everywhere/tree/master/libraries/solid)

docs/index.js

@@ -28,6 +28,7 @@ const libraryMap = {
   hyperapp: "Hyperapp",
   hyperhtml: "hyperHTML",
   lit: "Lit",
+  lwc: "LWC",
   mithril: "Mithril",
   omi: "Omi",
   polymer: "Polymer",

libraries/lwc/.babelrc

@@ -0,0 +1,10 @@
+{
+  "plugins": [
+    [
+      "@babel/plugin-transform-runtime",
+      {
+        "useESModules": true
+      }
+    ]
+  ]
+}

libraries/lwc/karma.conf.js

@@ -0,0 +1,87 @@
+/**
+ * @license
+ * Copyright 2017 Google Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const path = require('path');
+const LwcWebpackPlugin = require('lwc-webpack-plugin');
+
+module.exports = function(config) {
+  config.set({
+    plugins: [
+      'karma-chrome-launcher',
+      'karma-firefox-launcher',
+      require(path.resolve(__dirname, '../__shared__/karma-plugins/karma-mocha')),
+      'karma-sourcemap-loader',
+      'karma-webpack',
+      require(path.resolve(__dirname, '../__shared__/karma-plugins/karma-custom-html-reporter')),
+      require(path.resolve(__dirname, '../__shared__/karma-plugins/karma-custom-json-reporter'))
+    ],
+    browsers: ['ChromeHeadless', 'FirefoxHeadless'], // run in Chrome and Firefox
+    customLaunchers: {
+      FirefoxHeadless: {
+        base: 'Firefox',
+        flags: [ '-headless' ],
+        displayName: 'FirefoxHeadless'
+      },
+    },
+    singleRun: true, // set this to false to leave the browser open
+    frameworks: ['mocha'], // use the mocha test framework
+    files: [
+      'tests.webpack.js' // just load this file
+    ],
+    preprocessors: {
+      'tests.webpack.js': ['webpack', 'sourcemap'] // preprocess with webpack and our sourcemap loader
+    },
+    reporters: ['dots', 'custom-html', 'custom-json'], // report results in these formats
+    htmlReporter: {
+      outputFile: path.resolve(__dirname, './results/results.html'),
+      pageTitle: 'LWC + Custom Elements',
+      groupSuites: true,
+      useCompactStyle: true
+    },
+    jsonResultReporter: {
+      outputFile: path.resolve(__dirname, './results/results.json')
+    },
+    webpack: { // kind of a copy of your webpack config
+      mode: 'development',
+      // devtool: 'inline-source-map', // just do inline source maps instead of the default
+      resolve: {
+        modules: [
+          path.resolve(__dirname, '../__shared__/webcomponents/src'),
+          path.resolve(__dirname, './node_modules')
+        ]
+      },
+      plugins: [
+        new LwcWebpackPlugin({
+            modules: [
+                { dir: "src/modules" }
+            ]
+        })
+      ],
+      module: {
+        rules: [
+          {
+            test: /\.js$/,
+            exclude: /node_modules/,
+            use: {
+              loader: 'babel-loader'
+            }
+          }
+        ]
+      }
+    }
+  });
+};

libraries/lwc/meta/expectedResults.json

@@ -0,0 +1,19 @@
+{
+  "success": 24,
+  "failed": 8,
+  "skipped": 0,
+  "error": false,
+  "disconnected": false,
+  "exitCode": 1,
+  "score": 89,
+  "basicSupport": {
+    "total": 16,
+    "failed": 0,
+    "passed": 16
+  },
+  "advancedSupport": {
+    "total": 16,
+    "failed": 8,
+    "passed": 8
+  }
+}

libraries/lwc/meta/issues.json

@@ -0,0 +1,7 @@
+[
+  {
+    "link": "https://github.com/salesforce/lwc/issues/3335",
+    "title": "Score 100% on Custom Elements Everywhere benchmark",
+    "meta": "#3335 opened Feb 28, 2023 by Nolan Lawson"
+  }
+]

libraries/lwc/meta/summary.md

@@ -0,0 +1,13 @@
+<h4 id="lwc-handling-data">Handling data</h4>
+
+When passing data to a custom element, LWC takes a properties-if-available approach where attributes
+are set by default, but properties are set when they exist. This heuristical approach involves a
+runtime check to see whether a property is defined, and as such, data will be passed as an attribute
+if the custom element has not been upgraded. It is the responsibility of the component author to
+handle this scenario.
+
+<h4 id="lwc-handling-events">Handling events</h4>
+
+When listening for events declaratively in the template, LWC supports neither arbitrarily
+capitalized event names (camelCase, CAPSCase, PascalCase, etc.) nor kebab-cased names. To listen for
+events named in such formats, use `addEventListener()` imperatively.