├── libraries ├── vue │ ├── meta │ │ ├── issues.json │ │ ├── expectedResults.json │ │ └── summary.md │ ├── tests.webpack.js │ └── package.json ├── dojo │ ├── meta │ │ ├── issues.json │ │ ├── expectedResults.json │ │ └── summary.md │ ├── type-patch.d.ts │ ├── tsconfig.json │ ├── tests.webpack.ts │ └── package.json ├── hybrids │ ├── meta │ │ ├── issues.json │ │ ├── expectedResults.json │ │ └── summary.md │ ├── tests.webpack.js │ ├── package.json │ ├── src │ │ └── components.js │ └── karma.conf.js ├── hyperapp │ ├── meta │ │ ├── issues.json │ │ ├── expectedResults.json │ │ └── summary.md │ ├── tests.webpack.js │ ├── package.json │ └── karma.conf.js ├── hyperhtml │ ├── meta │ │ ├── issues.json │ │ ├── expectedResults.json │ │ └── summary.md │ ├── tests.webpack.js │ ├── package.json │ └── karma.conf.js ├── mithril │ ├── meta │ │ ├── issues.json │ │ ├── expectedResults.json │ │ └── summary.md │ ├── tests.webpack.js │ ├── package.json │ └── karma.conf.js ├── svelte │ ├── meta │ │ ├── issues.json │ │ ├── expectedResults.json │ │ └── summary.md │ ├── src │ │ ├── components │ │ │ ├── ComponentWithChildren.svelte │ │ │ ├── ComponentWithoutChildren.svelte │ │ │ ├── ComponentWithChildrenRerender.svelte │ │ │ ├── ComponentWithDifferentViews.svelte │ │ │ ├── ComponentWithUnregistered.svelte │ │ │ ├── ComponentWithProperties.svelte │ │ │ ├── ComponentWithImperativeEvent.svelte │ │ │ └── ComponentWithDeclarativeEvent.svelte │ │ └── components.js │ ├── .babelrc │ ├── tests.webpack.js │ └── package.json ├── omi │ ├── meta │ │ ├── issues.json │ │ ├── expectedResults.json │ │ └── summary.md │ ├── .babelrc │ ├── tests.webpack.js │ ├── package.json │ └── karma.conf.js ├── solid │ ├── meta │ │ ├── issues.json │ │ ├── expectedResults.json │ │ └── summary.md │ ├── .babelrc │ ├── tests.webpack.js │ ├── package.json │ └── karma.conf.js ├── surplus │ ├── meta │ │ ├── issues.json │ │ ├── expectedResults.json │ │ └── summary.md │ ├── tests.webpack.js │ ├── package.json │ └── karma.conf.js ├── angular │ ├── meta │ │ ├── issues.json │ │ ├── expectedResults.json │ │ └── summary.md │ ├── tsconfig.json │ ├── package.json │ ├── src │ │ └── app.module.ts │ └── tests.webpack.ts ├── lit │ ├── meta │ │ ├── issues.json │ │ ├── expectedResults.json │ │ └── summary.md │ ├── src │ │ ├── components │ │ │ ├── component-with-children.js │ │ │ ├── component-without-children.js │ │ │ ├── component-with-children-rerender.js │ │ │ ├── component-with-different-views.js │ │ │ ├── component-with-imperative-event.js │ │ │ ├── component-with-properties.js │ │ │ └── component-with-declarative-event.js │ │ └── components.js │ ├── tests.webpack.js │ ├── package.json │ └── karma.conf.js ├── react │ ├── meta │ │ ├── issues.json │ │ ├── expectedResults.json │ │ └── summary.md │ ├── .babelrc │ ├── tests.webpack.js │ ├── package.json │ └── karma.conf.js ├── riot │ ├── meta │ │ ├── issues.json │ │ ├── expectedResults.json │ │ └── summary.md │ ├── src │ │ ├── components │ │ │ ├── ComponentWithChildren.riot │ │ │ ├── ComponentWithoutChildren.riot │ │ │ ├── ComponentWithChildrenRerender.riot │ │ │ ├── ComponentWithUnregistered.riot │ │ │ ├── ComponentWithDifferentViews.riot │ │ │ ├── ComponentWithProperties.riot │ │ │ ├── ComponentWithImperativeEvent.riot │ │ │ └── ComponentWithDeclarativeEvent.riot │ │ └── components.js │ ├── tests.webpack.js │ └── package.json ├── stencil │ ├── meta │ │ ├── issues.json │ │ ├── summary.md │ │ └── expectedResults.json │ ├── .gitignore │ ├── stencil.config.ts │ ├── src │ │ ├── components │ │ │ ├── component-with-children │ │ │ │ └── component-with-children.tsx │ │ │ ├── component-without-children │ │ │ │ └── component-without-children.tsx │ │ │ ├── component-with-children-rerender │ │ │ │ └── component-with-children-rerender.tsx │ │ │ ├── component-with-different-views │ │ │ │ └── component-with-different-views.tsx │ │ │ ├── component-with-imperative-event │ │ │ │ └── component-with-imperative-event.tsx │ │ │ ├── component-with-properties │ │ │ │ └── component-with-properties.tsx │ │ │ └── component-with-declarative-event │ │ │ │ └── component-with-declarative-event.tsx │ │ ├── test-helpers.js │ │ └── components.js │ ├── tsconfig.json │ ├── tests.webpack.js │ ├── package.json │ └── karma.conf.js ├── angularjs │ ├── meta │ │ ├── issues.json │ │ ├── expectedResults.json │ │ └── summary.md │ ├── src │ │ └── app.module.js │ ├── tests.webpack.js │ ├── package.json │ └── karma.conf.js ├── dio │ ├── .babelrc │ ├── meta │ │ ├── issues.json │ │ ├── expectedResults.json │ │ └── summary.md │ ├── tests.webpack.js │ ├── package.json │ └── karma.conf.js ├── preact │ ├── .babelrc │ ├── meta │ │ ├── expectedResults.json │ │ ├── issues.json │ │ └── summary.md │ ├── tests.webpack.js │ ├── package.json │ └── karma.conf.js ├── lwc │ ├── src │ │ ├── modules │ │ │ └── x │ │ │ │ ├── withChildren │ │ │ │ ├── withChildren.html │ │ │ │ └── withChildren.js │ │ │ │ ├── withoutChildren │ │ │ │ ├── withoutChildren.html │ │ │ │ └── withoutChildren.js │ │ │ │ ├── withChildrenRerender │ │ │ │ ├── withChildrenRerender.html │ │ │ │ └── withChildrenRerender.js │ │ │ │ ├── withImperativeEvent │ │ │ │ ├── withImperativeEvent.html │ │ │ │ └── withImperativeEvent.js │ │ │ │ ├── withDifferentViews │ │ │ │ ├── withDifferentViews.js │ │ │ │ └── withDifferentViews.html │ │ │ │ ├── withProperties │ │ │ │ ├── withProperties.html │ │ │ │ └── withProperties.js │ │ │ │ └── withDeclarativeEvent │ │ │ │ ├── withDeclarativeEvent.html │ │ │ │ └── withDeclarativeEvent.js │ │ └── components.js │ ├── .babelrc │ ├── meta │ │ ├── issues.json │ │ ├── expectedResults.json │ │ └── summary.md │ ├── tests.webpack.js │ ├── package.json │ └── karma.conf.js ├── skate │ ├── .babelrc │ ├── meta │ │ ├── expectedResults.json │ │ ├── summary.md │ │ └── issues.json │ ├── tests.webpack.js │ └── package.json ├── polymer │ ├── meta │ │ ├── issues.json │ │ ├── expectedResults.json │ │ └── summary.md │ ├── src │ │ ├── components.js │ │ └── components │ │ │ ├── component-with-children.js │ │ │ ├── component-without-children.js │ │ │ ├── component-with-children-rerender.js │ │ │ ├── component-with-imperative-event.js │ │ │ ├── component-with-different-views.js │ │ │ ├── component-with-properties.js │ │ │ └── component-with-declarative-event.js │ ├── tests.webpack.js │ ├── package.json │ └── karma.conf.js └── __shared__ │ ├── webcomponents │ ├── package.json │ └── src │ │ ├── ce-without-children.js │ │ ├── ce-with-children.js │ │ ├── ce-with-event.js │ │ └── ce-with-properties.js │ ├── karma-plugins │ ├── karma-custom-json-reporter │ │ └── package.json │ ├── karma-mocha │ │ ├── package.json │ │ ├── LICENSE │ │ └── lib │ │ │ └── index.js │ └── karma-custom-html-reporter │ │ └── package.json │ └── README.md ├── docs ├── CNAME ├── images │ ├── card.jpg │ ├── favicon.ico │ └── smiley.svg ├── robots.txt ├── scripts │ ├── copy.js │ └── build-css.js ├── 404.html ├── package.json ├── partials │ └── octocat.handlebars └── styles │ └── site.css ├── .gitignore ├── renovate.json ├── LICENSE ├── .github └── workflows │ ├── deploy.yml │ ├── automerge.yml │ ├── autoclose.yml │ └── test.yml ├── scripts └── common.mjs └── package.json /libraries/vue/meta/issues.json: -------------------------------------------------------------------------------- 1 | [] 2 | -------------------------------------------------------------------------------- /docs/CNAME: -------------------------------------------------------------------------------- 1 | custom-elements-everywhere.com -------------------------------------------------------------------------------- /libraries/dojo/meta/issues.json: -------------------------------------------------------------------------------- 1 | [ 2 | ] 3 | -------------------------------------------------------------------------------- /libraries/hybrids/meta/issues.json: -------------------------------------------------------------------------------- 1 | [] 2 | -------------------------------------------------------------------------------- /libraries/hyperapp/meta/issues.json: -------------------------------------------------------------------------------- 1 | [] 2 | -------------------------------------------------------------------------------- /libraries/hyperhtml/meta/issues.json: -------------------------------------------------------------------------------- 1 | [] 2 | -------------------------------------------------------------------------------- /libraries/mithril/meta/issues.json: -------------------------------------------------------------------------------- 1 | [] 2 | -------------------------------------------------------------------------------- /libraries/svelte/meta/issues.json: -------------------------------------------------------------------------------- 1 | [] 2 | -------------------------------------------------------------------------------- /libraries/omi/meta/issues.json: -------------------------------------------------------------------------------- 1 | [ 2 | 3 | ] 4 | -------------------------------------------------------------------------------- /libraries/solid/meta/issues.json: -------------------------------------------------------------------------------- 1 | [ 2 | ] 3 | -------------------------------------------------------------------------------- /libraries/surplus/meta/issues.json: -------------------------------------------------------------------------------- 1 | [ 2 | ] 3 | -------------------------------------------------------------------------------- /libraries/angular/meta/issues.json: -------------------------------------------------------------------------------- 1 | [ 2 | 3 | ] 4 | -------------------------------------------------------------------------------- /libraries/lit/meta/issues.json: -------------------------------------------------------------------------------- 1 | [ 2 | 3 | ] 4 | -------------------------------------------------------------------------------- /libraries/react/meta/issues.json: -------------------------------------------------------------------------------- 1 | [ 2 | 3 | ] 4 | -------------------------------------------------------------------------------- /libraries/riot/meta/issues.json: -------------------------------------------------------------------------------- 1 | [ 2 | 3 | ] 4 | -------------------------------------------------------------------------------- /libraries/stencil/meta/issues.json: -------------------------------------------------------------------------------- 1 | [ 2 | 3 | ] 4 | -------------------------------------------------------------------------------- /libraries/angularjs/meta/issues.json: -------------------------------------------------------------------------------- 1 | [ 2 | 3 | ] 4 | -------------------------------------------------------------------------------- /libraries/solid/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["solid"] 3 | } 4 | -------------------------------------------------------------------------------- /libraries/stencil/.gitignore: -------------------------------------------------------------------------------- 1 | dist/ 2 | www/ 3 | loader/ 4 | .stencil/ 5 | -------------------------------------------------------------------------------- /libraries/react/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-react" 4 | ] 5 | } -------------------------------------------------------------------------------- /libraries/dio/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | ["transform-react-jsx", { "pragma":"h" }] 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /libraries/omi/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | ["transform-react-jsx", { "pragma":"h" }] 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /libraries/svelte/src/components/ComponentWithChildren.svelte: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/images/card.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcomponents/custom-elements-everywhere/HEAD/docs/images/card.jpg -------------------------------------------------------------------------------- /libraries/preact/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | ["transform-react-jsx", { "pragma":"h" }] 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /docs/images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcomponents/custom-elements-everywhere/HEAD/docs/images/favicon.ico -------------------------------------------------------------------------------- /libraries/svelte/src/components/ComponentWithoutChildren.svelte: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /libraries/lwc/src/modules/x/withChildren/withChildren.html: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /libraries/lwc/src/modules/x/withChildren/withChildren.js: -------------------------------------------------------------------------------- 1 | import { LightningElement } from "lwc"; 2 | 3 | export default class extends LightningElement {} 4 | -------------------------------------------------------------------------------- /libraries/lwc/src/modules/x/withoutChildren/withoutChildren.html: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | npm-debug.log 4 | libraries/*/results 5 | .vscode 6 | .env 7 | docs/libraries 8 | out 9 | .firebase 10 | .wireit 11 | -------------------------------------------------------------------------------- /libraries/lwc/src/modules/x/withoutChildren/withoutChildren.js: -------------------------------------------------------------------------------- 1 | import { LightningElement } from "lwc"; 2 | 3 | export default class extends LightningElement {} 4 | -------------------------------------------------------------------------------- /libraries/lwc/src/modules/x/withChildrenRerender/withChildrenRerender.html: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /libraries/riot/src/components/ComponentWithChildren.riot: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /libraries/skate/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | [ 4 | "transform-react-jsx", 5 | { 6 | "pragma": "h" 7 | } 8 | ] 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /libraries/riot/src/components/ComponentWithoutChildren.riot: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "automerge": true, 3 | "packageRules": [ 4 | { 5 | "matchPackageNames": ["@angular"], 6 | "groupName": "angular" 7 | } 8 | ] 9 | } 10 | -------------------------------------------------------------------------------- /libraries/lwc/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | [ 4 | "@babel/plugin-transform-runtime", 5 | { 6 | "useESModules": true 7 | } 8 | ] 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /libraries/svelte/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | [ 4 | "@babel/plugin-transform-runtime", 5 | { 6 | "useESModules": true 7 | } 8 | ] 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /libraries/lwc/src/modules/x/withImperativeEvent/withImperativeEvent.html: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /libraries/dojo/type-patch.d.ts: -------------------------------------------------------------------------------- 1 | // The dojo types reference MouseWheelEvent, which in some versions of TS is an alias 2 | // for WheelEvent, but in others it is not. This is a workaround for that. 3 | type MouseWheelEvent = WheelEvent; 4 | -------------------------------------------------------------------------------- /libraries/dio/meta/issues.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "link": "https://github.com/thysultan/dio.js/issues/44", 4 | "title": "Consider supporting mixed case events.", 5 | "meta": "#44 opened on December 21 by robdodson" 6 | } 7 | ] 8 | -------------------------------------------------------------------------------- /libraries/lwc/meta/issues.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "link": "https://github.com/salesforce/lwc/issues/3335", 4 | "title": "Score 100% on Custom Elements Everywhere benchmark", 5 | "meta": "#3335 opened Feb 28, 2023 by Nolan Lawson" 6 | } 7 | ] 8 | -------------------------------------------------------------------------------- /libraries/polymer/meta/issues.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "link": "https://github.com/Polymer/polymer/issues/4888", 4 | "title": "Polymer's declarative event listener names have issues with casing", 5 | "meta": "#4888 opened Oct 17 by sorvell" 6 | } 7 | ] 8 | -------------------------------------------------------------------------------- /libraries/stencil/stencil.config.ts: -------------------------------------------------------------------------------- 1 | import { Config } from '@stencil/core'; 2 | 3 | export const config: Config = { 4 | namespace: 'stencil-elements-everywhere', 5 | outputTargets: [ 6 | { 7 | type: 'dist-custom-elements', 8 | } 9 | ] 10 | }; 11 | -------------------------------------------------------------------------------- /libraries/lwc/src/modules/x/withDifferentViews/withDifferentViews.js: -------------------------------------------------------------------------------- 1 | import { LightningElement } from 'lwc'; 2 | 3 | export default class extends LightningElement { 4 | showWC = true; 5 | 6 | handleClick() { 7 | this.showWC = !this.showWC; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /docs/robots.txt: -------------------------------------------------------------------------------- 1 | # We host a bunch of copies of the site under the /preview/ URL for previewing, 2 | # PRs but search engines etc should ignore them in favor of the main site. 3 | User-agent: * 4 | Disallow: /preview/ 5 | 6 | # Otherwise robots are welcome 7 | User-agent: * 8 | Allow: / 9 | -------------------------------------------------------------------------------- /libraries/svelte/src/components/ComponentWithChildrenRerender.svelte: -------------------------------------------------------------------------------- 1 | {count} 2 | 3 | 12 | -------------------------------------------------------------------------------- /libraries/lwc/src/modules/x/withProperties/withProperties.html: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /libraries/svelte/src/components/ComponentWithDifferentViews.svelte: -------------------------------------------------------------------------------- 1 | {#if showWC} 2 | 3 | {:else} 4 |
Dummy view
5 | {/if} 6 | 7 | 13 | -------------------------------------------------------------------------------- /libraries/__shared__/webcomponents/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webcomponents", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "xfoo.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /libraries/lwc/src/modules/x/withProperties/withProperties.js: -------------------------------------------------------------------------------- 1 | import { LightningElement } from "lwc"; 2 | 3 | export default class extends LightningElement { 4 | bool = true; 5 | num = 42; 6 | str = 'lwc'; 7 | arr = ['L', 'W', 'C']; 8 | obj = { org: 'salesforce', repo: 'lwc' }; 9 | camelCaseObj = { label: 'passed' }; 10 | } 11 | -------------------------------------------------------------------------------- /libraries/svelte/src/components/ComponentWithUnregistered.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 | 10 | -------------------------------------------------------------------------------- /libraries/lwc/src/modules/x/withDifferentViews/withDifferentViews.html: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /libraries/stencil/meta/summary.md: -------------------------------------------------------------------------------- 1 |

Handling data

2 | 3 | By default, Stencil passes all data to Custom Elements as properties. 4 | 5 |

Handling events

6 | 7 | Stencil can listen to native DOM events dispatched from Custom Elements. It supports all styles of events (lowercase, camelCase, kebab-case, etc). 8 | -------------------------------------------------------------------------------- /libraries/dio/meta/expectedResults.json: -------------------------------------------------------------------------------- 1 | { 2 | "success": 26, 3 | "failed": 6, 4 | "skipped": 0, 5 | "error": false, 6 | "disconnected": false, 7 | "exitCode": 1, 8 | "score": 92, 9 | "basicSupport": { 10 | "total": 16, 11 | "failed": 0, 12 | "passed": 16 13 | }, 14 | "advancedSupport": { 15 | "total": 16, 16 | "failed": 6, 17 | "passed": 10 18 | } 19 | } -------------------------------------------------------------------------------- /libraries/dojo/meta/expectedResults.json: -------------------------------------------------------------------------------- 1 | { 2 | "success": 32, 3 | "failed": 0, 4 | "skipped": 0, 5 | "error": false, 6 | "disconnected": false, 7 | "exitCode": 0, 8 | "score": 100, 9 | "basicSupport": { 10 | "total": 16, 11 | "failed": 0, 12 | "passed": 16 13 | }, 14 | "advancedSupport": { 15 | "total": 16, 16 | "failed": 0, 17 | "passed": 16 18 | } 19 | } -------------------------------------------------------------------------------- /libraries/lit/meta/expectedResults.json: -------------------------------------------------------------------------------- 1 | { 2 | "success": 32, 3 | "failed": 0, 4 | "skipped": 0, 5 | "error": false, 6 | "disconnected": false, 7 | "exitCode": 0, 8 | "score": 100, 9 | "basicSupport": { 10 | "total": 16, 11 | "failed": 0, 12 | "passed": 16 13 | }, 14 | "advancedSupport": { 15 | "total": 16, 16 | "failed": 0, 17 | "passed": 16 18 | } 19 | } -------------------------------------------------------------------------------- /libraries/lit/src/components/component-with-children.js: -------------------------------------------------------------------------------- 1 | import { LitElement, html } from "lit"; 2 | import "ce-with-children"; 3 | 4 | export default class ComponentWithChildren extends LitElement { 5 | render() { 6 | return html` 7 | 8 | `; 9 | } 10 | } 11 | customElements.define("component-with-children", ComponentWithChildren); 12 | -------------------------------------------------------------------------------- /libraries/lwc/meta/expectedResults.json: -------------------------------------------------------------------------------- 1 | { 2 | "success": 24, 3 | "failed": 8, 4 | "skipped": 0, 5 | "error": false, 6 | "disconnected": false, 7 | "exitCode": 1, 8 | "score": 89, 9 | "basicSupport": { 10 | "total": 16, 11 | "failed": 0, 12 | "passed": 16 13 | }, 14 | "advancedSupport": { 15 | "total": 16, 16 | "failed": 8, 17 | "passed": 8 18 | } 19 | } -------------------------------------------------------------------------------- /libraries/omi/meta/expectedResults.json: -------------------------------------------------------------------------------- 1 | { 2 | "success": 32, 3 | "failed": 0, 4 | "skipped": 0, 5 | "error": false, 6 | "disconnected": false, 7 | "exitCode": 0, 8 | "score": 100, 9 | "basicSupport": { 10 | "total": 16, 11 | "failed": 0, 12 | "passed": 16 13 | }, 14 | "advancedSupport": { 15 | "total": 16, 16 | "failed": 0, 17 | "passed": 16 18 | } 19 | } -------------------------------------------------------------------------------- /libraries/react/meta/expectedResults.json: -------------------------------------------------------------------------------- 1 | { 2 | "success": 32, 3 | "failed": 0, 4 | "skipped": 0, 5 | "error": false, 6 | "disconnected": false, 7 | "exitCode": 0, 8 | "score": 100, 9 | "basicSupport": { 10 | "total": 16, 11 | "failed": 0, 12 | "passed": 16 13 | }, 14 | "advancedSupport": { 15 | "total": 16, 16 | "failed": 0, 17 | "passed": 16 18 | } 19 | } -------------------------------------------------------------------------------- /libraries/riot/meta/expectedResults.json: -------------------------------------------------------------------------------- 1 | { 2 | "success": 32, 3 | "failed": 0, 4 | "skipped": 0, 5 | "error": false, 6 | "disconnected": false, 7 | "exitCode": 0, 8 | "score": 100, 9 | "basicSupport": { 10 | "total": 16, 11 | "failed": 0, 12 | "passed": 16 13 | }, 14 | "advancedSupport": { 15 | "total": 16, 16 | "failed": 0, 17 | "passed": 16 18 | } 19 | } -------------------------------------------------------------------------------- /libraries/skate/meta/expectedResults.json: -------------------------------------------------------------------------------- 1 | { 2 | "success": 26, 3 | "failed": 6, 4 | "skipped": 0, 5 | "error": false, 6 | "disconnected": false, 7 | "exitCode": 1, 8 | "score": 92, 9 | "basicSupport": { 10 | "total": 16, 11 | "failed": 0, 12 | "passed": 16 13 | }, 14 | "advancedSupport": { 15 | "total": 16, 16 | "failed": 6, 17 | "passed": 10 18 | } 19 | } -------------------------------------------------------------------------------- /libraries/solid/meta/expectedResults.json: -------------------------------------------------------------------------------- 1 | { 2 | "success": 32, 3 | "failed": 0, 4 | "skipped": 0, 5 | "error": false, 6 | "disconnected": false, 7 | "exitCode": 0, 8 | "score": 100, 9 | "basicSupport": { 10 | "total": 16, 11 | "failed": 0, 12 | "passed": 16 13 | }, 14 | "advancedSupport": { 15 | "total": 16, 16 | "failed": 0, 17 | "passed": 16 18 | } 19 | } -------------------------------------------------------------------------------- /libraries/vue/meta/expectedResults.json: -------------------------------------------------------------------------------- 1 | { 2 | "success": 32, 3 | "failed": 0, 4 | "skipped": 0, 5 | "error": false, 6 | "disconnected": false, 7 | "exitCode": 0, 8 | "score": 100, 9 | "basicSupport": { 10 | "total": 16, 11 | "failed": 0, 12 | "passed": 16 13 | }, 14 | "advancedSupport": { 15 | "total": 16, 16 | "failed": 0, 17 | "passed": 16 18 | } 19 | } -------------------------------------------------------------------------------- /libraries/angular/meta/expectedResults.json: -------------------------------------------------------------------------------- 1 | { 2 | "success": 32, 3 | "failed": 0, 4 | "skipped": 0, 5 | "error": false, 6 | "disconnected": false, 7 | "exitCode": 0, 8 | "score": 100, 9 | "basicSupport": { 10 | "total": 16, 11 | "failed": 0, 12 | "passed": 16 13 | }, 14 | "advancedSupport": { 15 | "total": 16, 16 | "failed": 0, 17 | "passed": 16 18 | } 19 | } -------------------------------------------------------------------------------- /libraries/angularjs/meta/expectedResults.json: -------------------------------------------------------------------------------- 1 | { 2 | "success": 30, 3 | "failed": 2, 4 | "skipped": 0, 5 | "error": false, 6 | "disconnected": false, 7 | "exitCode": 1, 8 | "score": 94, 9 | "basicSupport": { 10 | "total": 16, 11 | "failed": 0, 12 | "passed": 16 13 | }, 14 | "advancedSupport": { 15 | "total": 16, 16 | "failed": 2, 17 | "passed": 14 18 | } 19 | } -------------------------------------------------------------------------------- /libraries/hybrids/meta/expectedResults.json: -------------------------------------------------------------------------------- 1 | { 2 | "success": 30, 3 | "failed": 2, 4 | "skipped": 0, 5 | "error": false, 6 | "disconnected": false, 7 | "exitCode": 1, 8 | "score": 94, 9 | "basicSupport": { 10 | "total": 16, 11 | "failed": 0, 12 | "passed": 16 13 | }, 14 | "advancedSupport": { 15 | "total": 16, 16 | "failed": 2, 17 | "passed": 14 18 | } 19 | } -------------------------------------------------------------------------------- /libraries/hyperapp/meta/expectedResults.json: -------------------------------------------------------------------------------- 1 | { 2 | "success": 32, 3 | "failed": 0, 4 | "skipped": 0, 5 | "error": false, 6 | "disconnected": false, 7 | "exitCode": 0, 8 | "score": 100, 9 | "basicSupport": { 10 | "total": 16, 11 | "failed": 0, 12 | "passed": 16 13 | }, 14 | "advancedSupport": { 15 | "total": 16, 16 | "failed": 0, 17 | "passed": 16 18 | } 19 | } -------------------------------------------------------------------------------- /libraries/hyperhtml/meta/expectedResults.json: -------------------------------------------------------------------------------- 1 | { 2 | "success": 32, 3 | "failed": 0, 4 | "skipped": 0, 5 | "error": false, 6 | "disconnected": false, 7 | "exitCode": 0, 8 | "score": 100, 9 | "basicSupport": { 10 | "total": 16, 11 | "failed": 0, 12 | "passed": 16 13 | }, 14 | "advancedSupport": { 15 | "total": 16, 16 | "failed": 0, 17 | "passed": 16 18 | } 19 | } -------------------------------------------------------------------------------- /libraries/mithril/meta/expectedResults.json: -------------------------------------------------------------------------------- 1 | { 2 | "success": 32, 3 | "failed": 0, 4 | "skipped": 0, 5 | "error": false, 6 | "disconnected": false, 7 | "exitCode": 0, 8 | "score": 100, 9 | "basicSupport": { 10 | "total": 16, 11 | "failed": 0, 12 | "passed": 16 13 | }, 14 | "advancedSupport": { 15 | "total": 16, 16 | "failed": 0, 17 | "passed": 16 18 | } 19 | } -------------------------------------------------------------------------------- /libraries/polymer/meta/expectedResults.json: -------------------------------------------------------------------------------- 1 | { 2 | "success": 26, 3 | "failed": 6, 4 | "skipped": 0, 5 | "error": false, 6 | "disconnected": false, 7 | "exitCode": 1, 8 | "score": 92, 9 | "basicSupport": { 10 | "total": 16, 11 | "failed": 0, 12 | "passed": 16 13 | }, 14 | "advancedSupport": { 15 | "total": 16, 16 | "failed": 6, 17 | "passed": 10 18 | } 19 | } -------------------------------------------------------------------------------- /libraries/preact/meta/expectedResults.json: -------------------------------------------------------------------------------- 1 | { 2 | "success": 32, 3 | "failed": 0, 4 | "skipped": 0, 5 | "error": false, 6 | "disconnected": false, 7 | "exitCode": 0, 8 | "score": 100, 9 | "basicSupport": { 10 | "total": 16, 11 | "failed": 0, 12 | "passed": 16 13 | }, 14 | "advancedSupport": { 15 | "total": 16, 16 | "failed": 0, 17 | "passed": 16 18 | } 19 | } -------------------------------------------------------------------------------- /libraries/stencil/meta/expectedResults.json: -------------------------------------------------------------------------------- 1 | { 2 | "success": 32, 3 | "failed": 0, 4 | "skipped": 0, 5 | "error": false, 6 | "disconnected": false, 7 | "exitCode": 0, 8 | "score": 100, 9 | "basicSupport": { 10 | "total": 16, 11 | "failed": 0, 12 | "passed": 16 13 | }, 14 | "advancedSupport": { 15 | "total": 16, 16 | "failed": 0, 17 | "passed": 16 18 | } 19 | } -------------------------------------------------------------------------------- /libraries/surplus/meta/expectedResults.json: -------------------------------------------------------------------------------- 1 | { 2 | "success": 32, 3 | "failed": 0, 4 | "skipped": 0, 5 | "error": false, 6 | "disconnected": false, 7 | "exitCode": 0, 8 | "score": 100, 9 | "basicSupport": { 10 | "total": 16, 11 | "failed": 0, 12 | "passed": 16 13 | }, 14 | "advancedSupport": { 15 | "total": 16, 16 | "failed": 0, 17 | "passed": 16 18 | } 19 | } -------------------------------------------------------------------------------- /libraries/svelte/meta/expectedResults.json: -------------------------------------------------------------------------------- 1 | { 2 | "success": 32, 3 | "failed": 0, 4 | "skipped": 0, 5 | "error": false, 6 | "disconnected": false, 7 | "exitCode": 0, 8 | "score": 100, 9 | "basicSupport": { 10 | "total": 16, 11 | "failed": 0, 12 | "passed": 16 13 | }, 14 | "advancedSupport": { 15 | "total": 16, 16 | "failed": 0, 17 | "passed": 16 18 | } 19 | } -------------------------------------------------------------------------------- /libraries/lwc/src/modules/x/withChildrenRerender/withChildrenRerender.js: -------------------------------------------------------------------------------- 1 | import { LightningElement } from 'lwc'; 2 | 3 | export default class extends LightningElement { 4 | renderedOnce = false; 5 | 6 | count = 1; 7 | 8 | renderedCallback() { 9 | if (!this.renderedOnce) { 10 | this.renderedOnce = true; 11 | this.count += 1; 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /libraries/riot/src/components/ComponentWithChildrenRerender.riot: -------------------------------------------------------------------------------- 1 | 2 | {state.count} 3 | 4 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /libraries/svelte/src/components/ComponentWithProperties.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 | 11 | -------------------------------------------------------------------------------- /libraries/stencil/src/components/component-with-children/component-with-children.tsx: -------------------------------------------------------------------------------- 1 | import { Component, Host, h } from "@stencil/core"; 2 | 3 | @Component({ 4 | tag: "component-with-children", 5 | shadow: true 6 | }) 7 | export class ComponentWithChildren { 8 | render() { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /libraries/lit/src/components.js: -------------------------------------------------------------------------------- 1 | import "./components/component-without-children.js"; 2 | import "./components/component-with-children.js"; 3 | import "./components/component-with-children-rerender.js"; 4 | import "./components/component-with-different-views.js"; 5 | import "./components/component-with-properties.js"; 6 | import "./components/component-with-imperative-event.js"; 7 | import "./components/component-with-declarative-event.js"; 8 | -------------------------------------------------------------------------------- /libraries/riot/src/components/ComponentWithUnregistered.riot: -------------------------------------------------------------------------------- 1 | 2 | 3 | 14 | -------------------------------------------------------------------------------- /libraries/lit/src/components/component-without-children.js: -------------------------------------------------------------------------------- 1 | import { LitElement, html } from "lit"; 2 | import "ce-without-children"; 3 | 4 | export default class ComponentWithoutChildren extends LitElement { 5 | render() { 6 | return html` 7 | 8 | `; 9 | } 10 | } 11 | customElements.define( 12 | "component-without-children", 13 | ComponentWithoutChildren 14 | ); 15 | -------------------------------------------------------------------------------- /libraries/polymer/src/components.js: -------------------------------------------------------------------------------- 1 | import "./components/component-without-children.js"; 2 | import "./components/component-with-children.js"; 3 | import "./components/component-with-children-rerender.js"; 4 | import "./components/component-with-different-views.js"; 5 | import "./components/component-with-properties.js"; 6 | import "./components/component-with-imperative-event.js"; 7 | import "./components/component-with-declarative-event.js"; 8 | -------------------------------------------------------------------------------- /libraries/stencil/src/components/component-without-children/component-without-children.tsx: -------------------------------------------------------------------------------- 1 | import { Component, Host, h } from "@stencil/core"; 2 | 3 | @Component({ 4 | tag: "component-without-children", 5 | shadow: true 6 | }) 7 | export class ComponentWithoutChildren { 8 | render() { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /libraries/stencil/src/test-helpers.js: -------------------------------------------------------------------------------- 1 | // Substitute for updateComplete 2 | export async function waitForRender(element) { 3 | return new Promise((resolve) => { 4 | let didRender = element.componentDidRender; 5 | element.componentDidRender = function (...args) { 6 | element.componentDidRender = didRender; 7 | element.componentDidRender?.(...args); 8 | resolve(); 9 | }; 10 | }); 11 | } -------------------------------------------------------------------------------- /libraries/svelte/src/components/ComponentWithImperativeEvent.svelte: -------------------------------------------------------------------------------- 1 |
{eventHandled}
2 | 3 | 4 | 15 | -------------------------------------------------------------------------------- /libraries/riot/src/components/ComponentWithDifferentViews.riot: -------------------------------------------------------------------------------- 1 | 2 | 3 |
Dummy view
4 | 5 | 15 | 16 | -------------------------------------------------------------------------------- /libraries/__shared__/karma-plugins/karma-custom-json-reporter/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "karma-custom-json-reporter", 3 | "version": "1.0.0", 4 | "description": "A Karma plugin based on karma-structured-json-reporter. Report results in styled json format.", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "wireit" 8 | }, 9 | "license": "MIT", 10 | "wireit": { 11 | "build": { 12 | "files": [ 13 | "index.js" 14 | ] 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /libraries/hybrids/meta/summary.md: -------------------------------------------------------------------------------- 1 |

Handling data

2 | 3 | Hybrids will pass data to an element as properties, as long as the property 4 | is defined on the element's prototype. Otherwise it will fallback to passing 5 | data as attributes. 6 | 7 |

Handling events

8 | 9 | Hybrids can listen to native DOM events dispatched from Custom Elements. It 10 | supports all styles of events (lowercase, camelCase, kebab-case, etc). 11 | -------------------------------------------------------------------------------- /libraries/riot/meta/summary.md: -------------------------------------------------------------------------------- 1 |

Handling data

2 | 3 | By default, Riot.js passes all primitive data (strings, numbers, booleans) to Custom Elements as attributes. It passes complex data (Objects, Arrays) to Custom Elements as properties. 4 | 5 |

Handling events

6 | 7 | Riot.js can listen to native DOM events dispatched from Custom Elements. It supports 8 | all styles of events (lowercase, camelCase, kebab-case, etc). 9 | 10 | -------------------------------------------------------------------------------- /libraries/riot/src/components/ComponentWithProperties.riot: -------------------------------------------------------------------------------- 1 | 2 | 3 | 15 | 16 | -------------------------------------------------------------------------------- /libraries/hyperapp/meta/summary.md: -------------------------------------------------------------------------------- 1 |

Handling data

2 | 3 | Hyperapp will pass data to an element as properties, as long as the property 4 | is defined on the element's prototype. Otherwise it will fallback to passing 5 | data as attributes. 6 | 7 |

Handling events

8 | 9 | Hyperapp can listen to native DOM events dispatched from Custom Elements. It 10 | supports all styles of events (lowercase, camelCase, kebab-case, etc). 11 | -------------------------------------------------------------------------------- /libraries/hyperhtml/meta/summary.md: -------------------------------------------------------------------------------- 1 |

Handling data

2 | 3 | hyperHTML will pass data to an element as properties, as long as the property 4 | is defined on the element's prototype. Otherwise it will fallback to passing 5 | data as attributes. 6 | 7 |

Handling events

8 | 9 | hyperHTML can listen to native DOM events dispatched from Custom Elements. It 10 | supports all styles of events (lowercase, camelCase, kebab-case, etc). 11 | -------------------------------------------------------------------------------- /libraries/lwc/src/modules/x/withImperativeEvent/withImperativeEvent.js: -------------------------------------------------------------------------------- 1 | import { LightningElement } from 'lwc'; 2 | 3 | export default class extends LightningElement { 4 | renderedOnce = false; 5 | 6 | eventHandled = false; 7 | 8 | renderedCallback() { 9 | if (!this.renderedOnce) { 10 | this.renderedOnce = true; 11 | this.refs.wc.addEventListener('camelEvent', () => { 12 | this.eventHandled = true; 13 | }); 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /libraries/polymer/src/components/component-with-children.js: -------------------------------------------------------------------------------- 1 | import { PolymerElement, html } from "@polymer/polymer/polymer-element.js"; 2 | 3 | import "ce-with-children"; 4 | class ComponentWithChildren extends PolymerElement { 5 | static get is() { 6 | return "component-with-children"; 7 | } 8 | static get template() { 9 | return html` 10 | 11 | `; 12 | } 13 | } 14 | window.customElements.define(ComponentWithChildren.is, ComponentWithChildren); 15 | -------------------------------------------------------------------------------- /libraries/svelte/meta/summary.md: -------------------------------------------------------------------------------- 1 |

Handling data

2 | 3 | Svelte uses a heuristic to determine whether to pass data as properties or 4 | attributes — if the property is defined on the element instance, a property 5 | is used, otherwise it will fall back to attributes. 6 | 7 |

Handling events

8 | 9 | Svelte can listen to native DOM events dispatched from Custom Elements. 10 | It supports all styles of events (lowercase, camelCase, kebab-case, etc). 11 | -------------------------------------------------------------------------------- /libraries/__shared__/karma-plugins/karma-mocha/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "karma-mocha", 3 | "version": "1.0.0", 4 | "description": "A fork of karma-mocha. Adapted for custom-elements-everywhere.com", 5 | "main": "lib/index.js", 6 | "dependencies": { 7 | "minimist": "1.2.8", 8 | "mocha": "10.8.2" 9 | }, 10 | "license": "MIT", 11 | "scripts": { 12 | "build": "wireit" 13 | }, 14 | "wireit": { 15 | "build": { 16 | "files": [ 17 | "lib" 18 | ] 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /libraries/lit/meta/summary.md: -------------------------------------------------------------------------------- 1 |

Handling data

2 | 3 | By default, Lit passes all data to Custom Elements as attributes. However, Lit also provides syntax to bind to properties instead. To bind to a Custom Element property, prefix the property name with a `.` as in ``. 4 | 5 |

Handling events

6 | 7 | Lit can listen to native DOM events dispatched from Custom Elements. It 8 | supports all styles of events (lowercase, camelCase, kebab-case, etc). 9 | -------------------------------------------------------------------------------- /libraries/omi/meta/summary.md: -------------------------------------------------------------------------------- 1 |

Handling data

2 | 3 | Omi uses a runtime heuristic to determine if it should pass data to Custom Elements as either properties or attributes. If a property is already defined on the element instance, Omi will use properties, otherwise it will fallback to attributes. 4 | 5 |

Handling events

6 | 7 | Omi can listen to native DOM events dispatched from Custom Elements. It supports all styles of events (lowercase, camelCase, kebab-case, etc). -------------------------------------------------------------------------------- /libraries/angularjs/meta/summary.md: -------------------------------------------------------------------------------- 1 |

Handling data

2 | 3 | AngularJS can declaratively pass data to attributes using ng-attr, 4 | or to properties using ng-prop. 5 | 6 |

Handling events

7 | 8 | AngularJS can declaritively listen to native DOM events by using ng-on. 9 | It supports all styles of events (lowercase, camelCase, kebab-case, etc) by prefixing 10 | uppercase characters with an underscore (_). 11 | -------------------------------------------------------------------------------- /libraries/dojo/meta/summary.md: -------------------------------------------------------------------------------- 1 |

Handling data

2 | 3 | Dojo will pass data as attributes only when the data is a type of `string`, otherwise it is 4 | set as a property. 5 | 6 |

Handling events

7 | 8 | Dojo can listen to native DOM events dispatched from Custom Elements. However the event 9 | names must be prefixed with `on`, so a Custom Event of `camelEvent` would be `oncamelEvent`. 10 | Other than that, Dojo supports all kinds of event names. 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /libraries/riot/src/components/ComponentWithImperativeEvent.riot: -------------------------------------------------------------------------------- 1 | 2 |
{state.eventHandled}
3 | 4 | 5 | 17 | 18 | -------------------------------------------------------------------------------- /libraries/mithril/meta/summary.md: -------------------------------------------------------------------------------- 1 |

Handling data

2 | 3 | Mithril performs a `key in element` check to determine whether to assign values as properties or attributes: if the element or any of its prototypes have a property definition for the key in question, the value will be assigned as a property. 4 | 5 |

Handling events

6 | 7 | Mithril can listen to native DOM events dispatched from Custom Elements. It 8 | supports all styles of events (lowercase, camelCase, kebab-case, etc). 9 | -------------------------------------------------------------------------------- /libraries/__shared__/karma-plugins/karma-custom-html-reporter/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "karma-custom-html-reporter", 3 | "version": "1.0.0", 4 | "description": "A Karma plugin based on karma-htmlfile-reporter. Report results in styled html format.", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "wireit" 8 | }, 9 | "dependencies": { 10 | "xmlbuilder": "10.1.1" 11 | }, 12 | "license": "MIT", 13 | "wireit": { 14 | "build": { 15 | "files": [ 16 | "index.js" 17 | ] 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /libraries/polymer/src/components/component-without-children.js: -------------------------------------------------------------------------------- 1 | import { PolymerElement, html } from "@polymer/polymer/polymer-element.js"; 2 | 3 | import "ce-without-children"; 4 | class ComponentWithoutChildren extends PolymerElement { 5 | static get is() { 6 | return "component-without-children"; 7 | } 8 | static get template() { 9 | return html` 10 | 11 | `; 12 | } 13 | } 14 | window.customElements.define( 15 | ComponentWithoutChildren.is, 16 | ComponentWithoutChildren 17 | ); 18 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright 2017 Google Inc. 2 | 3 | Licensed under the Apache License, Version 2.0 (the "License"); 4 | you may not use this file except in compliance with the License. 5 | You may obtain a copy of the License at 6 | 7 | https://www.apache.org/licenses/LICENSE-2.0 8 | 9 | Unless required by applicable law or agreed to in writing, software 10 | distributed under the License is distributed on an "AS IS" BASIS, 11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | See the License for the specific language governing permissions and 13 | limitations under the License. 14 | -------------------------------------------------------------------------------- /libraries/stencil/src/components/component-with-children-rerender/component-with-children-rerender.tsx: -------------------------------------------------------------------------------- 1 | import { Component, Host, h, Prop } from "@stencil/core"; 2 | 3 | @Component({ 4 | tag: "component-with-children-rerender", 5 | shadow: true 6 | }) 7 | export class ComponentWithChildrenRerender { 8 | @Prop({ mutable: true }) count = 1; 9 | 10 | componentDidLoad() { 11 | Promise.resolve().then(_ => this.count++); 12 | } 13 | 14 | render() { 15 | return ( 16 | 17 | {this.count} 18 | 19 | ); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /libraries/vue/meta/summary.md: -------------------------------------------------------------------------------- 1 |

Handling data

2 | 3 | By default, Vue passes all data to Custom Elements as attributes. However, Vue 4 | also provides syntax to instruct its bindings to use properties instead. To bind 5 | to a Custom Element property use :foo.prop="bar". 6 | 7 |

Handling events

8 | 9 | Vue can listen to native DOM events dispatched from Custom Elements. Its 10 | declarative event bindings only support lowercase and kebab case events. To 11 | listen for any events named with capital letters you must write imperative code. 12 | -------------------------------------------------------------------------------- /libraries/react/meta/summary.md: -------------------------------------------------------------------------------- 1 |

Handling data

2 | 3 | As of v19, React now uses a runtime heuristic to determine if it should pass data to Custom Elements as either properties or attributes. If a property is already defined on the element instance, it will use properties, otherwise it will fallback to attributes. 4 | 5 |

Handling events

6 | 7 | React will register an event listener on any custom element when binding a function to a property whose name begins with on. It supports lowercase, camelCase, kebab-case, CAPScase, and PascalCase events. 8 | -------------------------------------------------------------------------------- /libraries/stencil/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowSyntheticDefaultImports": true, 4 | "allowUnreachableCode": false, 5 | "declaration": false, 6 | "experimentalDecorators": true, 7 | "lib": [ 8 | "dom", 9 | "es2017" 10 | ], 11 | "moduleResolution": "node", 12 | "module": "esnext", 13 | "target": "es2017", 14 | "noUnusedLocals": true, 15 | "noUnusedParameters": true, 16 | "jsx": "react", 17 | "jsxFactory": "h" 18 | }, 19 | "include": [ 20 | "src", 21 | "types/jsx.d.ts" 22 | ], 23 | "exclude": [ 24 | "node_modules" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /libraries/lwc/src/modules/x/withDeclarativeEvent/withDeclarativeEvent.html: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /libraries/surplus/meta/summary.md: -------------------------------------------------------------------------------- 1 |

Handling data

2 | 3 | Surplus passes data to an element via properties unless the indicated field is 4 | known to be available only as an attribute (`aria-*`, some SVG attributes). 5 | 6 |

Handling events

7 | 8 | By default, event handlers are registered in Surplus by setting the `node.on...` DOM properties: 9 | `
`. For custom events, which don't have such properties, Surplus uses 10 | [surplus-mixin-on](https://github.com/adamhaile/surplus-mixin-on): `
`. 11 | -------------------------------------------------------------------------------- /libraries/solid/meta/summary.md: -------------------------------------------------------------------------------- 1 |

Handling data

2 | 3 | Solid passes all non-JSX expression data as attributes. JSX expressions default to attributes unless they are booleans, applied to a custom element, or indicated with `prop:` namespace. 4 | 5 |

Handling events

6 | 7 | By default, typical "on_____" event handlers are registered in Solid using `
`. However, it always lowercases the event names and does automatic event delegation for input and mouse events. 8 | 9 | For custom events with non-standard names, Solid uses its "on" binding: `
`. 10 | -------------------------------------------------------------------------------- /libraries/preact/meta/issues.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "link": "https://github.com/developit/preact/pull/511", 4 | "title": "check for typeof attribute value, if is string use setAttribute", 5 | "meta": "#511 opened on Jan 17 by enapupe" 6 | }, 7 | { 8 | "link": "https://github.com/developit/preact/issues/678", 9 | "title": "Checking `prop in elem` fails with deferred custom element definitions", 10 | "meta": "#678 opened on Apr 27 by treshugart" 11 | }, 12 | { 13 | "link": "https://github.com/developit/preact/pull/715", 14 | "title": "feat: Add native support for custom elements.", 15 | "meta": "#715 opened on May 31 by treshugart" 16 | } 17 | ] 18 | -------------------------------------------------------------------------------- /libraries/skate/meta/summary.md: -------------------------------------------------------------------------------- 1 |

Handling data

2 | 3 | Skate lets you use a variety of different rendering engines (Preact, React, 4 | lit-html). Most Skate apps these days use Preact, so Skate + Preact should pass 5 | data primarily using properties, and only fall back to attributes if a property 6 | is not defined. 7 | 8 |

Handling events

9 | 10 | Skate's declarative event handling is defined by the rendering engine used. If 11 | you're using Skate + Preact then it will support events with lowercase and 12 | kebab-case names, but not camelCase, PascalCase, or CAPScase events (e.g. 13 | 'URLchanged'). 14 | -------------------------------------------------------------------------------- /libraries/lit/src/components/component-with-children-rerender.js: -------------------------------------------------------------------------------- 1 | import { LitElement, html } from "lit"; 2 | import "ce-with-children"; 3 | 4 | export default class ComponentWithChildrenRerender extends LitElement { 5 | static get properties() { 6 | return { count: { type: Number } }; 7 | } 8 | constructor() { 9 | super(); 10 | this.count = 1; 11 | } 12 | 13 | firstUpdated() { 14 | this.count += 1; 15 | } 16 | 17 | render() { 18 | return html` 19 | ${this.count} 20 | `; 21 | } 22 | } 23 | customElements.define( 24 | "component-with-children-rerender", 25 | ComponentWithChildrenRerender 26 | ); 27 | -------------------------------------------------------------------------------- /libraries/angular/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "", 5 | "sourceMap": true, 6 | "declaration": false, 7 | "module": "commonjs", 8 | "moduleResolution": "node", 9 | "emitDecoratorMetadata": true, 10 | "experimentalDecorators": true, 11 | "allowJs": true, 12 | "target": "es5", 13 | "noUnusedLocals": true, 14 | "noUnusedParameters": true, 15 | "lib": ["es2015", "dom"] 16 | }, 17 | "types": [ 18 | "mocha", 19 | "node" 20 | ], 21 | "files": [ 22 | "tests.webpack.ts" 23 | ], 24 | "include": [ 25 | "./src/**/*.ts" 26 | ], 27 | "exclude": [ 28 | "node_modules" 29 | ] 30 | } 31 | -------------------------------------------------------------------------------- /.github/workflows/deploy.yml: -------------------------------------------------------------------------------- 1 | name: Build and Deploy 2 | on: 3 | push: 4 | branches: [main] 5 | permissions: 6 | contents: write 7 | jobs: 8 | deploy: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - name: Checkout 12 | uses: actions/checkout@v4.2.2 13 | - name: Install 14 | run: | 15 | npm ci 16 | 17 | - name: Build 18 | run: | 19 | npm run build 20 | 21 | - name: Deploy 22 | uses: JamesIves/github-pages-deploy-action@v4.7.3 23 | with: 24 | branch: gh-pages # The branch the action should deploy to. 25 | folder: out # The folder the action should deploy. 26 | clean-exclude: "preview/" 27 | -------------------------------------------------------------------------------- /libraries/stencil/src/components/component-with-different-views/component-with-different-views.tsx: -------------------------------------------------------------------------------- 1 | import { Component, Host, h, Method, Prop } from "@stencil/core"; 2 | 3 | @Component({ 4 | tag: "component-with-different-views", 5 | shadow: true 6 | }) 7 | export class ComponentWithDifferentViews { 8 | @Prop({ mutable: true }) showWC = true; 9 | 10 | @Method() 11 | async toggle() { 12 | this.showWC = !this.showWC; 13 | } 14 | 15 | render() { 16 | return ( 17 | 18 | {this.showWC ? ( 19 | 20 | ) : ( 21 |
Dummy view
22 | )} 23 | 24 | ); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /libraries/lwc/src/modules/x/withDeclarativeEvent/withDeclarativeEvent.js: -------------------------------------------------------------------------------- 1 | import { LightningElement } from 'lwc'; 2 | 3 | export default class extends LightningElement { 4 | lowercaseHandled = false; 5 | kebabHandled = false; 6 | camelHandled = false; 7 | capsHandled = false; 8 | pascalHandled = false; 9 | 10 | handleLowercaseEvent() { 11 | this.lowercaseHandled = true; 12 | } 13 | handleKebabEvent() { 14 | this.kebabHandled = true; 15 | } 16 | handleCamelEvent() { 17 | this.camelHandled = true; 18 | } 19 | handleCapsEvent() { 20 | this.capsHandled = true; 21 | } 22 | handlePascalEvent() { 23 | this.pascalHandled = true; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /libraries/dojo/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "2.4.2", 3 | "compilerOptions": { 4 | "declaration": false, 5 | "lib": [ 6 | "dom", 7 | "es5", 8 | "es2015.iterable", 9 | "es2015.promise", 10 | "es2015.symbol", 11 | "es2015.symbol.wellknown" 12 | ], 13 | "module": "umd", 14 | "moduleResolution": "node", 15 | "noImplicitAny": true, 16 | "noImplicitThis": true, 17 | "noUnusedLocals": true, 18 | "outDir": "_build/", 19 | "removeComments": false, 20 | "sourceMap": true, 21 | "strictNullChecks": true, 22 | "target": "es5" 23 | }, 24 | "types": [ 25 | "mocha", 26 | "node" 27 | ], 28 | "files": [ 29 | "tests.webpack.ts", 30 | "type-patch.d.ts" 31 | ], 32 | "include": [ 33 | "./src/**/*.ts" 34 | ] 35 | } -------------------------------------------------------------------------------- /libraries/angular/meta/summary.md: -------------------------------------------------------------------------------- 1 |

Handling data

2 | 3 | Angular's default binding syntax will always set properties on an element. This 4 | works well for rich data, like objects and arrays, and also works well for 5 | primitive values so long as the Custom Element author has mapped any exposed 6 | attributes to corresponding properties. 7 | 8 | Angular also provides binding syntax specifically for setting an attribute, if a 9 | developer would prefer to communicate with an element that way. 10 | 11 |

Handling events

12 | 13 | Angular components can listen to native DOM events dispatched from Custom 14 | Elements. It supports all styles of events (lowercase, camelCase, kebab-case, 15 | etc). 16 | -------------------------------------------------------------------------------- /libraries/polymer/meta/summary.md: -------------------------------------------------------------------------------- 1 |

Handling data

2 | 3 | Polymer will always attempt to pass data to an element using properties. 4 | To explicitly set an attribute, Polymer provides additional syntax in the form 5 | of the $= annotation. 6 | 7 |

Handling events

8 | 9 | Polymer supports listening to DOM events using the `on-*` attribute syntax. 10 | It does not support arbitrarily capitalized event names 11 | (camelCase, CAPSCase, PascalCase, etc.). This is because Polymer reads the event 12 | name directly from the HTML attribute, and the HTML parser will always lowercase 13 | attribute names. 14 | 15 | You can read more about [this issue and why we test it](#faq-polymer) in the 16 | FAQ. 17 | -------------------------------------------------------------------------------- /libraries/preact/meta/summary.md: -------------------------------------------------------------------------------- 1 |

Handling data

2 | 3 | Preact uses a runtime heuristic to determine if it should pass data to Custom 4 | Elements as either properties or attributes. If a property is already defined 5 | on the element instance, Preact will use properties, otherwise it will fallback 6 | to attributes. The exception to this rule is when it tries to pass rich data, 7 | like objects or arrays. In those instances it will always use a property. 8 | 9 |

Handling events

10 | 11 | Preact can listen to native DOM events dispatched from Custom Elements. It uses 12 | a heuristic to convert JSX event binding syntax into event names. It supports 13 | lowercase, camelCase, kebab-case, CAPScase, and PascalCase events. 14 | -------------------------------------------------------------------------------- /libraries/svelte/src/components/ComponentWithDeclarativeEvent.svelte: -------------------------------------------------------------------------------- 1 |
{lowercaseHandled}
2 |
{kebabHandled}
3 |
{camelHandled}
4 |
{capsHandled}
5 |
{pascalHandled}
6 | lowercaseHandled = true} 8 | on:kebab-event={() => kebabHandled = true} 9 | on:camelEvent={() => camelHandled = true} 10 | on:CAPSevent={() => capsHandled = true} 11 | on:PascalEvent={() => pascalHandled = true}> 12 | 13 | 14 | 21 | -------------------------------------------------------------------------------- /libraries/stencil/src/components/component-with-imperative-event/component-with-imperative-event.tsx: -------------------------------------------------------------------------------- 1 | import { Component, Host, h, Prop } from "@stencil/core"; 2 | 3 | @Component({ 4 | tag: "component-with-imperative-event", 5 | shadow: true 6 | }) 7 | export class ComponentWithImperativeEvent { 8 | @Prop({ mutable: true }) eventHandled = false; 9 | 10 | customEl!: HTMLElement; 11 | 12 | componentDidLoad() { 13 | this.customEl.addEventListener( 14 | "camelEvent", 15 | () => (this.eventHandled = true) 16 | ); 17 | } 18 | 19 | render() { 20 | return ( 21 | 22 |
{this.eventHandled.toString()}
23 | (this.customEl = el)}> 24 | 25 | ); 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /libraries/lit/src/components/component-with-different-views.js: -------------------------------------------------------------------------------- 1 | import { LitElement, html } from "lit"; 2 | import "ce-with-children"; 3 | 4 | export default class ComponentWithDifferentViews extends LitElement { 5 | static get properties() { 6 | return { 7 | showWC: { type: Boolean } 8 | }; 9 | } 10 | 11 | constructor() { 12 | super(); 13 | this.showWC = true; 14 | } 15 | 16 | render() { 17 | return this.showWC 18 | ? html` 19 | 20 | ` 21 | : html` 22 |
Dummy view
23 | `; 24 | } 25 | 26 | toggle() { 27 | this.showWC = !this.showWC; 28 | } 29 | } 30 | customElements.define( 31 | "component-with-different-views", 32 | ComponentWithDifferentViews 33 | ); 34 | -------------------------------------------------------------------------------- /libraries/lwc/meta/summary.md: -------------------------------------------------------------------------------- 1 |

Handling data

2 | 3 | When passing data to a custom element, LWC takes a properties-if-available approach where attributes 4 | are set by default, but properties are set when they exist. This heuristical approach involves a 5 | runtime check to see whether a property is defined, and as such, data will be passed as an attribute 6 | if the custom element has not been upgraded. It is the responsibility of the component author to 7 | handle this scenario. 8 | 9 |

Handling events

10 | 11 | When listening for events declaratively in the template, LWC supports neither arbitrarily 12 | capitalized event names (camelCase, CAPSCase, PascalCase, etc.) nor kebab-cased names. To listen for 13 | events named in such formats, use `addEventListener()` imperatively. 14 | -------------------------------------------------------------------------------- /libraries/dio/tests.webpack.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2017 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | // Run basic and advanced tests through Karma 19 | require('./src/basic-tests.js'); 20 | require('./src/advanced-tests.js'); 21 | -------------------------------------------------------------------------------- /libraries/dojo/tests.webpack.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2017 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | // Run basic and advanced tests through Karma 19 | require('./src/basic-tests.ts'); 20 | require('./src/advanced-tests.ts'); 21 | -------------------------------------------------------------------------------- /libraries/lit/tests.webpack.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2017 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | // Run basic and advanced tests through Karma 19 | require('./src/basic-tests.js'); 20 | require('./src/advanced-tests.js'); 21 | -------------------------------------------------------------------------------- /libraries/lwc/tests.webpack.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2017 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | // Run basic and advanced tests through Karma 19 | require('./src/basic-tests.js'); 20 | require('./src/advanced-tests.js'); 21 | -------------------------------------------------------------------------------- /libraries/omi/tests.webpack.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2017 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | // Run basic and advanced tests through Karma 19 | require('./src/basic-tests.js'); 20 | require('./src/advanced-tests.js'); 21 | -------------------------------------------------------------------------------- /libraries/react/tests.webpack.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2017 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | // Run basic and advanced tests through Karma 19 | require('./src/basic-tests.js'); 20 | require('./src/advanced-tests.js'); 21 | -------------------------------------------------------------------------------- /libraries/riot/tests.webpack.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2017 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | // Run basic and advanced tests through Karma 19 | require('./src/basic-tests.js') 20 | require('./src/advanced-tests.js') 21 | -------------------------------------------------------------------------------- /libraries/skate/tests.webpack.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2017 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | // Run basic and advanced tests through Karma 19 | require("./src/basic-tests.js"); 20 | require("./src/advanced-tests.js"); 21 | -------------------------------------------------------------------------------- /libraries/solid/tests.webpack.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2017 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | // Run basic and advanced tests through Karma 19 | require('./src/basic-tests.js'); 20 | require('./src/advanced-tests.js'); 21 | -------------------------------------------------------------------------------- /libraries/vue/tests.webpack.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2017 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | // Run basic and advanced tests through Karma 19 | require('./src/basic-tests.js'); 20 | require('./src/advanced-tests.js'); 21 | -------------------------------------------------------------------------------- /libraries/angularjs/src/app.module.js: -------------------------------------------------------------------------------- 1 | import 'angular'; 2 | 3 | import { 4 | ComponentWithoutChildren, 5 | ComponentWithChildren, 6 | ComponentWithChildrenRerender, 7 | ComponentWithDifferentViews, 8 | ComponentWithProps, 9 | ComponentWithImperativeEvent, 10 | ComponentWithDeclarativeEvent 11 | } from './components'; 12 | 13 | export default angular.module('ce-tests', []) 14 | .component('compNoChildren', ComponentWithoutChildren) 15 | .component('compWithChildren', ComponentWithChildren) 16 | .component('compWithChildrenRerender', ComponentWithChildrenRerender) 17 | .component('compWithDifferentViews', ComponentWithDifferentViews) 18 | .component('compWithProps', ComponentWithProps) 19 | .component('compWithImperativeEvent', ComponentWithImperativeEvent) 20 | .component('compWithDeclarativeEvent', ComponentWithDeclarativeEvent) 21 | .name; 22 | -------------------------------------------------------------------------------- /libraries/hybrids/tests.webpack.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2017 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | // Run basic and advanced tests through Karma 19 | require('./src/basic-tests.js'); 20 | require('./src/advanced-tests.js'); 21 | -------------------------------------------------------------------------------- /libraries/hyperapp/tests.webpack.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2017 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | // Run basic and advanced tests through Karma 19 | require("./src/basic-tests.js"); 20 | require("./src/advanced-tests.js"); 21 | -------------------------------------------------------------------------------- /libraries/hyperhtml/tests.webpack.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2017 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | // Run basic and advanced tests through Karma 19 | require('./src/basic-tests.js'); 20 | require('./src/advanced-tests.js'); 21 | -------------------------------------------------------------------------------- /libraries/mithril/tests.webpack.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2017 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | // Run basic and advanced tests through Karma 19 | require('./src/basic-tests.js'); 20 | require('./src/advanced-tests.js'); 21 | -------------------------------------------------------------------------------- /libraries/polymer/tests.webpack.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2017 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | // Run basic and advanced tests through Karma 19 | require('./src/basic-tests.js'); 20 | require('./src/advanced-tests.js'); 21 | -------------------------------------------------------------------------------- /libraries/stencil/tests.webpack.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2017 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | // Run basic and advanced tests through Karma 19 | require('./src/basic-tests.js'); 20 | require('./src/advanced-tests.js'); 21 | -------------------------------------------------------------------------------- /libraries/surplus/tests.webpack.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2017 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | // Run basic and advanced tests through Karma 19 | require('./src/basic-tests.js'); 20 | require('./src/advanced-tests.js'); 21 | -------------------------------------------------------------------------------- /libraries/svelte/tests.webpack.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2017 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | // Run basic and advanced tests through Karma 19 | require('./src/basic-tests.js'); 20 | require('./src/advanced-tests.js'); 21 | -------------------------------------------------------------------------------- /libraries/preact/tests.webpack.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2017 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | // Run basic and advanced tests through Karma 19 | 20 | require('./src/basic-tests.js'); 21 | require('./src/advanced-tests.js'); 22 | -------------------------------------------------------------------------------- /libraries/skate/meta/issues.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "link": "https://github.com/developit/preact/pull/788", 4 | "title": "Allow mixed case events", 5 | "meta": "#788 opened on August 2 by developit" 6 | }, 7 | { 8 | "link": "https://github.com/developit/preact/pull/511", 9 | "title": "check for typeof attribute value, if is string use setAttribute", 10 | "meta": "#511 opened on Jan 17 by enapupe" 11 | }, 12 | { 13 | "link": "https://github.com/developit/preact/issues/678", 14 | "title": "Checking `prop in elem` fails with deferred custom element definitions", 15 | "meta": "#678 opened on Apr 27 by treshugart" 16 | }, 17 | { 18 | "link": "https://github.com/developit/preact/pull/715", 19 | "title": "feat: Add native support for custom elements.", 20 | "meta": "#715 opened on May 31 by treshugart" 21 | } 22 | ] 23 | -------------------------------------------------------------------------------- /.github/workflows/automerge.yml: -------------------------------------------------------------------------------- 1 | name: Dependency bot auto-merge 2 | on: pull_request 3 | 4 | permissions: 5 | pull-requests: write 6 | contents: write 7 | 8 | # Goal here is that: 9 | # if 10 | # 1) a change comes from dependabot or renovate 11 | # and 12 | # 2) it passes our tests, meaning that it doesn't change results for any library 13 | # then merge it. 14 | # 15 | # `gh pr merge --auto --merge` handles #2 and we check for #1 ourselves 16 | 17 | jobs: 18 | dependabot: 19 | runs-on: ubuntu-latest 20 | if: ${{ github.actor == 'dependabot[bot]' || github.actor == 'renovate[bot]' }} 21 | steps: 22 | - name: Enable auto-merge for Dependabot and renovate PRs 23 | run: gh pr merge --auto --merge "$PR_URL" 24 | env: 25 | PR_URL: ${{github.event.pull_request.html_url}} 26 | GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}} 27 | -------------------------------------------------------------------------------- /libraries/stencil/src/components/component-with-properties/component-with-properties.tsx: -------------------------------------------------------------------------------- 1 | import { Component, Host, h, Prop } from "@stencil/core"; 2 | 3 | @Component({ 4 | tag: "component-with-properties", 5 | shadow: true 6 | }) 7 | export class ComponentWithProperties { 8 | @Prop() bool = true; 9 | @Prop() num = 42; 10 | @Prop() str = "Stencil"; 11 | @Prop() arr = ["S", "t", "e", "n", "c", "i", "l"]; 12 | @Prop() obj = { org: "Ionic", repo: "stencil" }; 13 | @Prop() camelCaseObj = { label: "passed" }; 14 | 15 | render() { 16 | return ( 17 | 18 | 27 | 28 | ); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /libraries/angularjs/tests.webpack.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2017 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | import 'angular'; 19 | import 'angular-mocks'; 20 | 21 | // Run basic and advanced tests through Karma 22 | require('./src/basic-tests.js'); 23 | require('./src/advanced-tests.js'); 24 | -------------------------------------------------------------------------------- /libraries/__shared__/webcomponents/src/ce-without-children.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2017 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | class CEWithoutChildren extends HTMLElement { 19 | constructor() { 20 | super(); 21 | } 22 | } 23 | customElements.define('ce-without-children', CEWithoutChildren); 24 | -------------------------------------------------------------------------------- /libraries/polymer/src/components/component-with-children-rerender.js: -------------------------------------------------------------------------------- 1 | import { PolymerElement, html } from "@polymer/polymer/polymer-element.js"; 2 | import "ce-with-children"; 3 | 4 | class ComponentWithChildrenRerender extends PolymerElement { 5 | static get is() { 6 | return "component-with-children-rerender"; 7 | } 8 | static get properties() { 9 | return { 10 | count: { 11 | type: Number, 12 | value: 1 13 | } 14 | }; 15 | } 16 | connectedCallback() { 17 | super.connectedCallback(); 18 | Promise.resolve().then( 19 | function() { 20 | this.count += 1; 21 | }.bind(this) 22 | ); 23 | } 24 | 25 | static get template() { 26 | return html` 27 | [[count]] 28 | `; 29 | } 30 | } 31 | window.customElements.define( 32 | ComponentWithChildrenRerender.is, 33 | ComponentWithChildrenRerender 34 | ); 35 | -------------------------------------------------------------------------------- /libraries/__shared__/README.md: -------------------------------------------------------------------------------- 1 | ## karma-plugins 2 | 3 | ### karma-mocha 4 | 5 | This is a fork of the Mocha adapter for Karma. The primary change is to add 6 | the ability for a test to define a weight on its context and report those 7 | values to Karma. This lets us do weighted averages for basic and advanced tests. 8 | 9 | ### karma-custom-html-reporter 10 | 11 | This is a fork of the karma-html-reporter. It modifies the layout so it can be 12 | used in the test results pages on custom-elements-everywhere.com 13 | 14 | ### karma-custom-json-reporter 15 | 16 | This is a fork of the karma-json-reporter. It adds a number of features around 17 | summarizing tests, scoring them, and also including information about the 18 | library/framework under test. This information is used by the Handlebars 19 | templates to produce the library scores on custom-elements-everywhere.com 20 | 21 | ## webcomponents 22 | 23 | This is a shared group of vanilla custom elements that all of the tests depend 24 | upon. 25 | -------------------------------------------------------------------------------- /libraries/dio/meta/summary.md: -------------------------------------------------------------------------------- 1 |

Handling data

2 | 3 | DIO uses a runtime heuristic to determine if it should pass data to Custom 4 | Elements as either properties or attributes. If a property is already defined 5 | on the element instance, DIO will use properties, otherwise it will fallback 6 | to attributes. The exception to this rule is when it tries to pass rich data, 7 | like objects or arrays. In those instances it will always use a property. 8 | 9 |

Handling events

10 | 11 | DIO can listen to native DOM events dispatched from Custom Elements. However, 12 | it uses a heuristic to convert JSX event binding syntax into event names, and 13 | always lowercases the events. For example onFooUpdated={handleFoo} 14 | tells DIO to listen for an event called 'fooupdated'. This means 15 | DIO can support events with lowercase and kebab-case names, but not 16 | camelCase, PascalCase, or CAPScase events (e.g. 'URLchanged'). 17 | -------------------------------------------------------------------------------- /libraries/riot/src/components/ComponentWithDeclarativeEvent.riot: -------------------------------------------------------------------------------- 1 | 2 | update({ lowercaseHandled: true }) } 5 | onkebab-event={ () => update({ kebabHandled: true }) } 6 | oncamelEvent={ () => update({ camelHandled: true }) } 7 | onCAPSevent={ () => update({ capsHandled: true }) } 8 | onPascalEvent={ () => update({ pascalHandled: true }) }> 9 | 10 | 11 |
{state.lowercaseHandled}
12 |
{state.kebabHandled}
13 |
{state.camelHandled}
14 |
{state.capsHandled}
15 |
{state.pascalHandled}
16 | 17 | 28 | 29 | -------------------------------------------------------------------------------- /libraries/polymer/src/components/component-with-imperative-event.js: -------------------------------------------------------------------------------- 1 | import { PolymerElement, html } from "@polymer/polymer/polymer-element.js"; 2 | import "ce-with-event"; 3 | 4 | class ComponentWithImperativeEvent extends PolymerElement { 5 | static get is() { 6 | return "component-with-imperative-event"; 7 | } 8 | static get properties() { 9 | return { 10 | eventHandled: { 11 | type: Boolean, 12 | value: false 13 | } 14 | }; 15 | } 16 | static get template() { 17 | return html` 18 |
[[eventHandled]]
19 | 20 | `; 21 | } 22 | connectedCallback() { 23 | super.connectedCallback(); 24 | this.handleTestEvent = this.handleTestEvent.bind(this); 25 | this.$.wc.addEventListener("camelEvent", this.handleTestEvent); 26 | } 27 | handleTestEvent() { 28 | this.eventHandled = true; 29 | } 30 | } 31 | window.customElements.define( 32 | ComponentWithImperativeEvent.is, 33 | ComponentWithImperativeEvent 34 | ); 35 | -------------------------------------------------------------------------------- /libraries/lit/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "test": "wireit", 4 | "build": "wireit" 5 | }, 6 | "library_repo": "lit/lit", 7 | "devDependencies": { 8 | "babel-core": "6.26.3", 9 | "babel-loader": "9.2.1", 10 | "chai": "4.5.0", 11 | "cross-env": "7.0.3", 12 | "karma": "6.4.4", 13 | "karma-chrome-launcher": "3.2.0", 14 | "karma-firefox-launcher": "2.1.3", 15 | "karma-sourcemap-loader": "0.4.0", 16 | "karma-webpack": "5.0.1", 17 | "webpack": "5.101.0" 18 | }, 19 | "dependencies": { 20 | "lit": "3.0.0" 21 | }, 22 | "wireit": { 23 | "test": { 24 | "dependencies": [ 25 | "../..:karma-plugins" 26 | ], 27 | "files": [ 28 | "karma.conf.js", 29 | "tests.webpack.js", 30 | "src", 31 | "meta" 32 | ], 33 | "output": [ 34 | "results" 35 | ], 36 | "command": "cross-env LIBRARY_NAME=lit karma start" 37 | }, 38 | "build": { 39 | "dependencies": [ 40 | "test" 41 | ] 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /libraries/vue/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "test": "wireit", 4 | "build": "wireit" 5 | }, 6 | "library_repo": "vuejs/vue", 7 | "devDependencies": { 8 | "babel-core": "6.26.3", 9 | "babel-loader": "9.2.1", 10 | "chai": "4.5.0", 11 | "cross-env": "7.0.3", 12 | "karma": "6.4.4", 13 | "karma-chrome-launcher": "3.2.0", 14 | "karma-firefox-launcher": "2.1.3", 15 | "karma-sourcemap-loader": "0.4.0", 16 | "karma-webpack": "5.0.1", 17 | "webpack": "5.101.0" 18 | }, 19 | "dependencies": { 20 | "vue": "^3.2.38" 21 | }, 22 | "wireit": { 23 | "test": { 24 | "dependencies": [ 25 | "../..:karma-plugins" 26 | ], 27 | "files": [ 28 | "karma.conf.js", 29 | "tests.webpack.js", 30 | "src", 31 | "meta" 32 | ], 33 | "output": [ 34 | "results" 35 | ], 36 | "command": "cross-env LIBRARY_NAME=vue karma start || echo ''" 37 | }, 38 | "build": { 39 | "dependencies": [ 40 | "test" 41 | ] 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /libraries/polymer/src/components/component-with-different-views.js: -------------------------------------------------------------------------------- 1 | import { PolymerElement, html } from "@polymer/polymer/polymer-element.js"; 2 | import "@polymer/polymer/lib/elements/dom-if.js"; 3 | import "ce-with-children"; 4 | 5 | class ComponentWithDifferentViews extends PolymerElement { 6 | static get is() { 7 | return "component-with-different-views"; 8 | } 9 | static get properties() { 10 | return { 11 | showWC: { 12 | type: Boolean, 13 | value: true 14 | } 15 | }; 16 | } 17 | 18 | static get template() { 19 | return html` 20 |
21 | 24 | 27 |
28 | `; 29 | } 30 | 31 | toggle() { 32 | this.showWC = !this.showWC; 33 | } 34 | } 35 | window.customElements.define( 36 | ComponentWithDifferentViews.is, 37 | ComponentWithDifferentViews 38 | ); 39 | -------------------------------------------------------------------------------- /libraries/lit/src/components/component-with-imperative-event.js: -------------------------------------------------------------------------------- 1 | import { LitElement, html } from "lit"; 2 | import "ce-with-event"; 3 | 4 | class ComponentWithImperativeEvent extends LitElement { 5 | static get is() { 6 | return "component-with-imperative-event"; 7 | } 8 | static get properties() { 9 | return { 10 | eventHandled: { type: Boolean } 11 | }; 12 | } 13 | constructor() { 14 | super(); 15 | this.eventHandled = false; 16 | } 17 | firstUpdated(changedProperties) { 18 | super.firstUpdated(changedProperties); 19 | this.handleTestEvent = this.handleTestEvent.bind(this); 20 | this.shadowRoot 21 | .getElementById("wc") 22 | .addEventListener("camelEvent", this.handleTestEvent); 23 | } 24 | handleTestEvent() { 25 | this.eventHandled = true; 26 | } 27 | render() { 28 | return html` 29 |
${this.eventHandled}
30 | 31 | `; 32 | } 33 | } 34 | customElements.define( 35 | "component-with-imperative-event", 36 | ComponentWithImperativeEvent 37 | ); 38 | -------------------------------------------------------------------------------- /libraries/polymer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "test": "wireit", 4 | "build": "wireit" 5 | }, 6 | "library_repo": "polymer/polymer", 7 | "devDependencies": { 8 | "babel-core": "6.26.3", 9 | "babel-loader": "9.2.1", 10 | "chai": "4.5.0", 11 | "cross-env": "7.0.3", 12 | "karma": "6.4.4", 13 | "karma-chrome-launcher": "3.2.0", 14 | "karma-firefox-launcher": "2.1.3", 15 | "karma-sourcemap-loader": "0.4.0", 16 | "karma-webpack": "5.0.1", 17 | "webpack": "5.101.0" 18 | }, 19 | "dependencies": { 20 | "@polymer/polymer": "3.5.2" 21 | }, 22 | "wireit": { 23 | "test": { 24 | "dependencies": [ 25 | "../..:karma-plugins" 26 | ], 27 | "files": [ 28 | "karma.conf.js", 29 | "tests.webpack.js", 30 | "src", 31 | "meta" 32 | ], 33 | "output": [ 34 | "results" 35 | ], 36 | "command": "cross-env LIBRARY_NAME=@polymer/polymer karma start || echo ''" 37 | }, 38 | "build": { 39 | "dependencies": [ 40 | "test" 41 | ] 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /libraries/__shared__/webcomponents/src/ce-with-children.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2017 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | class CEWithChildren extends HTMLElement { 19 | constructor() { 20 | super(); 21 | this.attachShadow({mode: 'open'}); 22 | this.shadowRoot.innerHTML = ` 23 |

Test h1

24 |
25 |

Test p

26 |
27 | 28 | `; 29 | } 30 | } 31 | customElements.define('ce-with-children', CEWithChildren); 32 | -------------------------------------------------------------------------------- /docs/scripts/copy.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2017 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | const fs = require('fs'); 19 | const path = require('path'); 20 | 21 | const docs = path.resolve(__dirname, '..'); 22 | const out = path.join(docs, '..', 'out'); 23 | 24 | const files = [ 25 | '404.html', 26 | 'CNAME', 27 | 'robots.txt', 28 | 'images', 29 | 'libraries', 30 | ] 31 | 32 | for (const file of files) { 33 | fs.cpSync(path.join(docs, file), path.join(out, file), { recursive: true }); 34 | } -------------------------------------------------------------------------------- /libraries/mithril/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "test": "wireit", 4 | "build": "wireit" 5 | }, 6 | "library_repo": "MithrilJS/mithril.js", 7 | "devDependencies": { 8 | "babel-core": "6.26.3", 9 | "babel-loader": "9.2.1", 10 | "chai": "4.5.0", 11 | "copy-webpack-plugin": "11.0.0", 12 | "cross-env": "7.0.3", 13 | "karma": "6.4.4", 14 | "karma-chrome-launcher": "3.2.0", 15 | "karma-firefox-launcher": "2.1.3", 16 | "karma-sourcemap-loader": "0.4.0", 17 | "karma-webpack": "5.0.1", 18 | "webpack": "5.101.0" 19 | }, 20 | "dependencies": { 21 | "mithril": "2.2.2" 22 | }, 23 | "wireit": { 24 | "test": { 25 | "dependencies": [ 26 | "../..:karma-plugins" 27 | ], 28 | "files": [ 29 | "karma.conf.js", 30 | "tests.webpack.js", 31 | "src", 32 | "meta" 33 | ], 34 | "output": [ 35 | "results" 36 | ], 37 | "command": "cross-env LIBRARY_NAME=mithril karma start" 38 | }, 39 | "build": { 40 | "dependencies": [ 41 | "test" 42 | ] 43 | } 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /libraries/hybrids/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "test": "wireit", 4 | "build": "wireit" 5 | }, 6 | "library_repo": "hybridsjs/hybrids", 7 | "devDependencies": { 8 | "babel-core": "6.26.3", 9 | "babel-loader": "9.2.1", 10 | "chai": "4.5.0", 11 | "copy-webpack-plugin": "11.0.0", 12 | "cross-env": "7.0.3", 13 | "karma": "6.4.4", 14 | "karma-chrome-launcher": "3.2.0", 15 | "karma-firefox-launcher": "2.1.3", 16 | "karma-sourcemap-loader": "0.4.0", 17 | "karma-webpack": "5.0.1", 18 | "webpack": "5.101.0" 19 | }, 20 | "dependencies": { 21 | "hybrids": "4.3.4" 22 | }, 23 | "wireit": { 24 | "test": { 25 | "dependencies": [ 26 | "../..:karma-plugins" 27 | ], 28 | "files": [ 29 | "karma.conf.js", 30 | "tests.webpack.js", 31 | "src", 32 | "meta" 33 | ], 34 | "output": [ 35 | "results" 36 | ], 37 | "command": "cross-env LIBRARY_NAME=hybrids karma start || echo ''" 38 | }, 39 | "build": { 40 | "dependencies": [ 41 | "test" 42 | ] 43 | } 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /libraries/angularjs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "test": "wireit", 4 | "build": "wireit" 5 | }, 6 | "library_repo": "angular/angular.js", 7 | "devDependencies": { 8 | "angular-mocks": "1.8.3", 9 | "babel-core": "6.26.3", 10 | "babel-loader": "9.2.1", 11 | "chai": "4.5.0", 12 | "cross-env": "7.0.3", 13 | "karma": "6.4.4", 14 | "karma-chrome-launcher": "3.2.0", 15 | "karma-firefox-launcher": "2.1.3", 16 | "karma-sourcemap-loader": "0.4.0", 17 | "karma-webpack": "5.0.1", 18 | "mocha": "10.8.2", 19 | "webpack": "5.101.0" 20 | }, 21 | "dependencies": { 22 | "angular": "1.8.3" 23 | }, 24 | "wireit": { 25 | "test": { 26 | "dependencies": [ 27 | "../..:karma-plugins" 28 | ], 29 | "files": [ 30 | "karma.conf.js", 31 | "tests.webpack.js", 32 | "src", 33 | "meta" 34 | ], 35 | "output": [ 36 | "results" 37 | ], 38 | "command": "cross-env LIBRARY_NAME=angular karma start || echo ''" 39 | }, 40 | "build": { 41 | "dependencies": [ 42 | "test" 43 | ] 44 | } 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /libraries/hyperapp/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "test": "wireit", 4 | "build": "wireit" 5 | }, 6 | "library_repo": "jorgebucaran/hyperapp", 7 | "devDependencies": { 8 | "@babel/core": "^7.12.10", 9 | "@babel/preset-env": "^7.16.11", 10 | "babel-loader": "^9.0.0", 11 | "chai": "4.5.0", 12 | "copy-webpack-plugin": "11.0.0", 13 | "cross-env": "7.0.3", 14 | "karma": "6.4.4", 15 | "karma-chrome-launcher": "3.2.0", 16 | "karma-firefox-launcher": "2.1.3", 17 | "karma-sourcemap-loader": "0.4.0", 18 | "karma-webpack": "5.0.1", 19 | "webpack": "5.101.0" 20 | }, 21 | "dependencies": { 22 | "hyperapp": "2.0.22" 23 | }, 24 | "wireit": { 25 | "test": { 26 | "dependencies": [ 27 | "../..:karma-plugins" 28 | ], 29 | "files": [ 30 | "karma.conf.js", 31 | "tests.webpack.js", 32 | "src", 33 | "meta" 34 | ], 35 | "output": [ 36 | "results" 37 | ], 38 | "command": "cross-env LIBRARY_NAME=hyperapp karma start" 39 | }, 40 | "build": { 41 | "dependencies": [ 42 | "test" 43 | ] 44 | } 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /libraries/hyperhtml/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "test": "wireit", 4 | "build": "wireit" 5 | }, 6 | "library_repo": "WebReflection/hyperHTML", 7 | "devDependencies": { 8 | "babel-core": "6.26.3", 9 | "babel-loader": "9.2.1", 10 | "chai": "4.5.0", 11 | "copy-webpack-plugin": "11.0.0", 12 | "cross-env": "7.0.3", 13 | "karma": "6.4.4", 14 | "karma-chrome-launcher": "3.2.0", 15 | "karma-firefox-launcher": "2.1.3", 16 | "karma-sourcemap-loader": "0.4.0", 17 | "karma-webpack": "5.0.1", 18 | "webpack": "5.101.0" 19 | }, 20 | "dependencies": { 21 | "hyperhtml": "2.34.2", 22 | "hyperhtml-element": "3.15.2" 23 | }, 24 | "wireit": { 25 | "test": { 26 | "dependencies": [ 27 | "../..:karma-plugins" 28 | ], 29 | "files": [ 30 | "karma.conf.js", 31 | "tests.webpack.js", 32 | "src", 33 | "meta" 34 | ], 35 | "output": [ 36 | "results" 37 | ], 38 | "command": "cross-env LIBRARY_NAME=hyperhtml karma start" 39 | }, 40 | "build": { 41 | "dependencies": [ 42 | "test" 43 | ] 44 | } 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /libraries/solid/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "test": "wireit", 4 | "build": "wireit" 5 | }, 6 | "devDependencies": { 7 | "@babel/core": "7.28.0", 8 | "@babel/preset-env": "7.28.0", 9 | "babel-loader": "9.2.1", 10 | "babel-preset-solid": "1.6.7", 11 | "chai": "4.5.0", 12 | "cross-env": "7.0.3", 13 | "expect": "29.7.0", 14 | "karma": "6.4.4", 15 | "karma-chrome-launcher": "3.2.0", 16 | "karma-firefox-launcher": "2.1.3", 17 | "karma-sourcemap-loader": "0.4.0", 18 | "karma-webpack": "5.0.1", 19 | "webpack": "5.101.0" 20 | }, 21 | "dependencies": { 22 | "solid-js": "1.6.8" 23 | }, 24 | "wireit": { 25 | "test": { 26 | "dependencies": [ 27 | "../..:karma-plugins" 28 | ], 29 | "files": [ 30 | ".babelrc", 31 | "karma.conf.js", 32 | "tests.webpack.js", 33 | "src", 34 | "meta" 35 | ], 36 | "output": [ 37 | "results" 38 | ], 39 | "command": "cross-env LIBRARY_NAME=solid-js karma start || echo ''" 40 | }, 41 | "build": { 42 | "dependencies": [ 43 | "test" 44 | ] 45 | } 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /libraries/__shared__/karma-plugins/karma-mocha/LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (C) 2011-2013 Google, Inc. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 9 | of the Software, and to permit persons to whom the Software is furnished to do 10 | so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /libraries/riot/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "test": "wireit", 4 | "build": "wireit" 5 | }, 6 | "library_repo": "riot/riot", 7 | "devDependencies": { 8 | "@riotjs/compiler": "9.4.9", 9 | "@riotjs/webpack-loader": "9.0.1", 10 | "babel-core": "6.26.3", 11 | "babel-loader": "9.2.1", 12 | "chai": "4.5.0", 13 | "copy-webpack-plugin": "11.0.0", 14 | "cross-env": "7.0.3", 15 | "karma": "6.4.4", 16 | "karma-chrome-launcher": "3.2.0", 17 | "karma-firefox-launcher": "2.1.3", 18 | "karma-sourcemap-loader": "0.4.0", 19 | "karma-webpack": "5.0.1", 20 | "webpack": "5.101.0" 21 | }, 22 | "dependencies": { 23 | "riot": "4.14.0" 24 | }, 25 | "wireit": { 26 | "test": { 27 | "dependencies": [ 28 | "../..:karma-plugins" 29 | ], 30 | "files": [ 31 | "karma.conf.js", 32 | "tests.webpack.js", 33 | "src", 34 | "meta" 35 | ], 36 | "output": [ 37 | "results" 38 | ], 39 | "command": "cross-env LIBRARY_NAME=riot karma start" 40 | }, 41 | "build": { 42 | "dependencies": [ 43 | "test" 44 | ] 45 | } 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /libraries/dio/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "test": "wireit", 4 | "build": "wireit" 5 | }, 6 | "library_repo": "dyo/dyo", 7 | "devDependencies": { 8 | "babel-core": "6.26.3", 9 | "babel-loader": "9.2.1", 10 | "babel-plugin-transform-react-jsx": "6.24.1", 11 | "chai": "4.5.0", 12 | "copy-webpack-plugin": "11.0.0", 13 | "cross-env": "7.0.3", 14 | "karma": "6.4.4", 15 | "karma-chrome-launcher": "3.2.0", 16 | "karma-firefox-launcher": "2.1.3", 17 | "karma-sourcemap-loader": "0.4.0", 18 | "karma-webpack": "5.0.1", 19 | "webpack": "5.101.0" 20 | }, 21 | "dependencies": { 22 | "dio.js": "9.1.1" 23 | }, 24 | "wireit": { 25 | "test": { 26 | "dependencies": [ 27 | "../..:karma-plugins" 28 | ], 29 | "files": [ 30 | ".babelrc", 31 | "karma.conf.js", 32 | "tests.webpack.js", 33 | "src", 34 | "meta" 35 | ], 36 | "output": [ 37 | "results" 38 | ], 39 | "command": "cross-env LIBRARY_NAME=dio.js karma start || echo ''" 40 | }, 41 | "build": { 42 | "dependencies": [ 43 | "test" 44 | ] 45 | } 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /libraries/react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "test": "wireit", 4 | "build": "wireit" 5 | }, 6 | "library_repo": "facebook/react", 7 | "devDependencies": { 8 | "@babel/preset-react": "^7.16.0", 9 | "babel-core": "6.26.3", 10 | "babel-loader": "9.2.1", 11 | "babel-preset-react": "6.24.1", 12 | "chai": "4.5.0", 13 | "cross-env": "7.0.3", 14 | "karma": "6.4.4", 15 | "karma-chrome-launcher": "3.2.0", 16 | "karma-firefox-launcher": "2.1.3", 17 | "karma-sourcemap-loader": "0.4.0", 18 | "karma-webpack": "5.0.1", 19 | "webpack": "5.101.0" 20 | }, 21 | "dependencies": { 22 | "react": "^19", 23 | "react-dom": "^19" 24 | }, 25 | "wireit": { 26 | "test": { 27 | "dependencies": [ 28 | "../..:karma-plugins" 29 | ], 30 | "files": [ 31 | ".babelrc", 32 | "karma.conf.js", 33 | "tests.webpack.js", 34 | "src", 35 | "meta" 36 | ], 37 | "output": [ 38 | "results" 39 | ], 40 | "command": "cross-env LIBRARY_NAME=react karma start" 41 | }, 42 | "build": { 43 | "dependencies": [ 44 | "test" 45 | ] 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /libraries/surplus/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "test": "wireit", 4 | "build": "wireit" 5 | }, 6 | "library_repo": "adamhaile/surplus", 7 | "devDependencies": { 8 | "babel-core": "6.26.3", 9 | "babel-loader": "9.2.1", 10 | "chai": "4.5.0", 11 | "cross-env": "7.0.3", 12 | "expect": "29.7.0", 13 | "karma": "6.4.4", 14 | "karma-chrome-launcher": "3.2.0", 15 | "karma-firefox-launcher": "2.1.3", 16 | "karma-sourcemap-loader": "0.4.0", 17 | "karma-webpack": "5.0.1", 18 | "s-js": "0.4.9", 19 | "surplus-loader": "0.5.0", 20 | "surplus-mixin-on": "0.5.0", 21 | "webpack": "5.101.0" 22 | }, 23 | "dependencies": { 24 | "surplus": "0.5.3" 25 | }, 26 | "wireit": { 27 | "test": { 28 | "dependencies": [ 29 | "../..:karma-plugins" 30 | ], 31 | "files": [ 32 | "karma.conf.js", 33 | "tests.webpack.js", 34 | "src", 35 | "meta" 36 | ], 37 | "output": [ 38 | "results" 39 | ], 40 | "command": "cross-env LIBRARY_NAME=surplus karma start" 41 | }, 42 | "build": { 43 | "dependencies": [ 44 | "test" 45 | ] 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /docs/scripts/build-css.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2017 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | const fs = require('fs'); 19 | const path = require('path'); 20 | const CleanCSS = require('clean-css'); 21 | 22 | const bulma = fs.readFileSync(path.resolve(__dirname, '../styles/third_party/bulma.css'), 'utf-8'); 23 | const site = fs.readFileSync(path.resolve(__dirname, '../styles/site.css')); 24 | 25 | fs.mkdirSync(path.resolve(__dirname, '../../out/styles'), {recursive: true}); 26 | fs.writeFileSync(path.resolve(__dirname, '../../out/styles/bundle.css'), new CleanCSS().minify(bulma + site).styles); -------------------------------------------------------------------------------- /libraries/omi/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "test": "wireit", 4 | "build": "wireit" 5 | }, 6 | "library_repo": "Tencent/omi", 7 | "devDependencies": { 8 | "babel-core": "6.26.3", 9 | "babel-loader": "9.2.1", 10 | "babel-plugin-transform-react-jsx": "6.24.1", 11 | "chai": "4.5.0", 12 | "cross-env": "7.0.3", 13 | "elm": "0.19.1-6", 14 | "elm-webpack-loader": "8.0.0", 15 | "karma": "6.4.4", 16 | "karma-chrome-launcher": "3.2.0", 17 | "karma-firefox-launcher": "2.1.3", 18 | "karma-sourcemap-loader": "0.4.0", 19 | "karma-webpack": "5.0.1", 20 | "webpack": "5.101.0" 21 | }, 22 | "dependencies": { 23 | "omi": "6.25.23" 24 | }, 25 | "wireit": { 26 | "test": { 27 | "dependencies": [ 28 | "../..:karma-plugins" 29 | ], 30 | "files": [ 31 | ".babelrc", 32 | "karma.conf.js", 33 | "tests.webpack.js", 34 | "src", 35 | "meta" 36 | ], 37 | "output": [ 38 | "results" 39 | ], 40 | "command": "cross-env LIBRARY_NAME=omi karma start" 41 | }, 42 | "build": { 43 | "dependencies": [ 44 | "test" 45 | ] 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /libraries/lwc/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "test": "wireit", 4 | "build": "wireit" 5 | }, 6 | "library_repo": "salesforce/lwc", 7 | "devDependencies": { 8 | "@babel/core": "7.28.0", 9 | "@babel/plugin-transform-runtime": "7.28.0", 10 | "@babel/preset-env": "7.28.0", 11 | "babel-core": "6.26.3", 12 | "babel-loader": "9.2.1", 13 | "chai": "4.5.0", 14 | "cross-env": "7.0.3", 15 | "karma": "6.4.4", 16 | "karma-chrome-launcher": "3.2.0", 17 | "karma-firefox-launcher": "2.1.3", 18 | "karma-sourcemap-loader": "0.4.0", 19 | "karma-webpack": "5.0.1", 20 | "webpack": "5.101.0" 21 | }, 22 | "dependencies": { 23 | "lwc": "5.0.0", 24 | "lwc-webpack-plugin": "3.1.0" 25 | }, 26 | "wireit": { 27 | "test": { 28 | "dependencies": [ 29 | "../..:karma-plugins" 30 | ], 31 | "files": [ 32 | "karma.conf.js", 33 | "tests.webpack.js", 34 | "src", 35 | "meta" 36 | ], 37 | "output": [ 38 | "results" 39 | ], 40 | "command": "cross-env LIBRARY_NAME=lwc karma start || echo ''" 41 | }, 42 | "build": { 43 | "dependencies": [ 44 | "test" 45 | ] 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /.github/workflows/autoclose.yml: -------------------------------------------------------------------------------- 1 | name: Dependabot auto-close on fail 2 | on: 3 | check_run: 4 | types: [completed] # runs whenever a github check action completes 5 | 6 | # Gotta be able to operate on PRs 7 | permissions: 8 | pull-requests: write 9 | contents: write 10 | 11 | jobs: 12 | close: 13 | runs-on: ubuntu-latest 14 | # If the check is called 'build' and it failed and the PR is from either dependabot or renovate 15 | # See https://docs.github.com/en/actions/learn-github-actions/expressions for docs on this language. 16 | if: ${{ github.event.check_run.conclusion == 'failure' && github.event.check_run.name == 'build' && (startsWith(github.event.check_run.pull_requests[0].head.ref, 'renovate/') || startsWith(github.event.check_run.pull_requests[0].head.ref, 'dependabot/')) }} 17 | steps: 18 | - name: Close pr 19 | # Then close the PR and comment 20 | run: gh pr close -d -R webcomponents/custom-elements-everywhere "$PR_NUM" && gh pr comment -R webcomponents/custom-elements-everywhere "$PR_NUM" -b "Auto-closing because it breaks tests" 21 | env: 22 | PR_NUM: ${{github.event.check_run.check_suite.pull_requests[0].number}} 23 | GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}} 24 | -------------------------------------------------------------------------------- /libraries/preact/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "test": "wireit", 4 | "build": "wireit" 5 | }, 6 | "library_repo": "preactjs/preact", 7 | "devDependencies": { 8 | "babel-core": "6.26.3", 9 | "babel-loader": "9.2.1", 10 | "babel-plugin-transform-react-jsx": "6.24.1", 11 | "chai": "4.5.0", 12 | "copy-webpack-plugin": "^11.0.0", 13 | "cross-env": "7.0.3", 14 | "@testing-library/preact": "^3.2.4", 15 | "karma": "^6.0.0", 16 | "karma-chrome-launcher": "^3.1.0", 17 | "karma-firefox-launcher": "^2.1.2", 18 | "karma-sourcemap-loader": "0.4.0", 19 | "karma-webpack": "^5.0.0", 20 | "webpack": "^5.94.0" 21 | }, 22 | "dependencies": { 23 | "preact": "^10.0.1" 24 | }, 25 | "wireit": { 26 | "test": { 27 | "dependencies": [ 28 | "../..:karma-plugins" 29 | ], 30 | "files": [ 31 | ".babelrc", 32 | "karma.conf.js", 33 | "tests.webpack.js", 34 | "src", 35 | "meta" 36 | ], 37 | "output": [ 38 | "results" 39 | ], 40 | "command": "cross-env LIBRARY_NAME=preact karma start" 41 | }, 42 | "build": { 43 | "dependencies": [ 44 | "test" 45 | ] 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /libraries/lit/src/components/component-with-properties.js: -------------------------------------------------------------------------------- 1 | import { LitElement, html } from "lit"; 2 | import "ce-with-properties"; 3 | 4 | class ComponentWithProperties extends LitElement { 5 | static get properties() { 6 | return { 7 | bool: { type: Boolean }, 8 | num: { type: Number }, 9 | str: { type: String }, 10 | arr: { type: Array }, 11 | obj: { type: Object }, 12 | camelCaseObj: { type: Object }, 13 | }; 14 | } 15 | 16 | constructor() { 17 | super(); 18 | this.bool = true; 19 | this.num = 42; 20 | this.str = "Lit element"; 21 | this.arr = ["L", "i", "t", "-", "e", "l", "e", "m", "e", "n", "t"]; 22 | this.obj = { org: "polymer", repo: "lit-element" }; 23 | } 24 | 25 | render() { 26 | return html` 27 |
28 | 37 |
38 | `; 39 | } 40 | } 41 | customElements.define( 42 | "component-with-properties", 43 | ComponentWithProperties 44 | ); 45 | -------------------------------------------------------------------------------- /libraries/svelte/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "test": "wireit", 4 | "build": "wireit" 5 | }, 6 | "library_repo": "sveltejs/svelte", 7 | "devDependencies": { 8 | "@babel/core": "7.28.0", 9 | "@babel/plugin-transform-runtime": "7.28.0", 10 | "@babel/preset-env": "7.28.0", 11 | "babel-loader": "9.2.1", 12 | "chai": "4.5.0", 13 | "copy-webpack-plugin": "11.0.0", 14 | "cross-env": "7.0.3", 15 | "karma": "6.4.4", 16 | "karma-chrome-launcher": "3.2.0", 17 | "karma-firefox-launcher": "2.1.3", 18 | "karma-sourcemap-loader": "0.4.0", 19 | "karma-webpack": "5.0.1", 20 | "svelte-loader": "3.2.4", 21 | "webpack": "5.101.0" 22 | }, 23 | "dependencies": { 24 | "svelte": "4.2.19" 25 | }, 26 | "wireit": { 27 | "test": { 28 | "dependencies": [ 29 | "../..:karma-plugins" 30 | ], 31 | "files": [ 32 | ".babelrc", 33 | "karma.conf.js", 34 | "tests.webpack.js", 35 | "src", 36 | "meta" 37 | ], 38 | "output": [ 39 | "results" 40 | ], 41 | "command": "cross-env LIBRARY_NAME=svelte karma start || echo ''" 42 | }, 43 | "build": { 44 | "dependencies": [ 45 | "test" 46 | ] 47 | } 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /libraries/__shared__/webcomponents/src/ce-with-event.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2017 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | class CEWithEvent extends HTMLElement { 19 | constructor() { 20 | super(); 21 | this.addEventListener('click', this.onClick); 22 | } 23 | onClick() { 24 | this.dispatchEvent(new CustomEvent('lowercaseevent')); 25 | this.dispatchEvent(new CustomEvent('kebab-event')); 26 | this.dispatchEvent(new CustomEvent('camelEvent')); 27 | this.dispatchEvent(new CustomEvent('CAPSevent')); 28 | this.dispatchEvent(new CustomEvent('PascalEvent')); 29 | } 30 | } 31 | 32 | customElements.define('ce-with-event', CEWithEvent); 33 | -------------------------------------------------------------------------------- /libraries/skate/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "test": "wireit", 4 | "build": "wireit" 5 | }, 6 | "library_repo": "skatejs/skatejs", 7 | "devDependencies": { 8 | "babel-core": "6.26.3", 9 | "babel-loader": "9.2.1", 10 | "babel-plugin-transform-react-jsx": "6.24.1", 11 | "chai": "4.5.0", 12 | "cross-env": "7.0.3", 13 | "karma": "6.4.4", 14 | "karma-chrome-launcher": "3.2.0", 15 | "karma-firefox-launcher": "2.1.3", 16 | "karma-sourcemap-loader": "0.4.0", 17 | "karma-webpack": "5.0.1", 18 | "webpack": "5.101.0" 19 | }, 20 | "dependencies": { 21 | "@skatejs/renderer-preact": "0.3.3", 22 | "@webcomponents/webcomponentsjs": "^2.6.0", 23 | "preact": "8.5.3", 24 | "skatejs": "5.2.4" 25 | }, 26 | "wireit": { 27 | "test": { 28 | "dependencies": [ 29 | "../..:karma-plugins" 30 | ], 31 | "files": [ 32 | ".babelrc", 33 | "karma.conf.js", 34 | "tests.webpack.js", 35 | "src", 36 | "meta" 37 | ], 38 | "output": [ 39 | "results" 40 | ], 41 | "command": "cross-env LIBRARY_NAME=skatejs karma start || echo ''" 42 | }, 43 | "build": { 44 | "dependencies": [ 45 | "test" 46 | ] 47 | } 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /libraries/dojo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "test": "wireit", 4 | "build": "wireit" 5 | }, 6 | "library_repo": "dojo/framework", 7 | "dependencies": { 8 | "@dojo/framework": "8.0.0" 9 | }, 10 | "devDependencies": { 11 | "@types/chai": "4.3.20", 12 | "@types/expect": "24.3.2", 13 | "@types/mocha": "10.0.10", 14 | "babel-core": "6.26.3", 15 | "babel-loader": "9.2.1", 16 | "chai": "4.5.0", 17 | "cross-env": "7.0.3", 18 | "karma": "6.4.4", 19 | "karma-chrome-launcher": "3.2.0", 20 | "karma-firefox-launcher": "2.1.3", 21 | "karma-sourcemap-loader": "0.4.0", 22 | "karma-webpack": "5.0.1", 23 | "mocha": "10.8.2", 24 | "ts-loader": "9.5.2", 25 | "typescript": "4.9.5", 26 | "umd-compat-loader": "2.1.2", 27 | "webpack": "5.101.0" 28 | }, 29 | "wireit": { 30 | "test": { 31 | "dependencies": [ 32 | "../..:karma-plugins" 33 | ], 34 | "files": [ 35 | "karma.conf.js", 36 | "tests.webpack.ts", 37 | "tsconfig.json", 38 | "type-patch.d.ts", 39 | "src", 40 | "meta" 41 | ], 42 | "output": [ 43 | "results" 44 | ], 45 | "command": "cross-env LIBRARY_NAME=@dojo/framework karma start" 46 | }, 47 | "build": { 48 | "dependencies": [ 49 | "test" 50 | ] 51 | } 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /libraries/stencil/src/components/component-with-declarative-event/component-with-declarative-event.tsx: -------------------------------------------------------------------------------- 1 | import { Component, Host, h, Prop } from "@stencil/core"; 2 | 3 | @Component({ 4 | tag: "component-with-declarative-event", 5 | shadow: true 6 | }) 7 | export class ComponentWithDeclarativeEvent { 8 | @Prop({ mutable: true }) lowercaseHandled = false; 9 | @Prop({ mutable: true }) kebabHandled = false; 10 | @Prop({ mutable: true }) camelHandled = false; 11 | @Prop({ mutable: true }) capsHandled = false; 12 | @Prop({ mutable: true }) pascalHandled = false; 13 | 14 | render() { 15 | return ( 16 | 17 |
{this.lowercaseHandled.toString()}
18 |
{this.kebabHandled.toString()}
19 |
{this.camelHandled.toString()}
20 |
{this.capsHandled.toString()}
21 |
{this.pascalHandled.toString()}
22 | (this.lowercaseHandled = true)} 25 | on-kebab-event={_ => (this.kebabHandled = true)} 26 | on-camelEvent={_ => (this.camelHandled = true)} 27 | on-CAPSevent={_ => (this.capsHandled = true)} 28 | on-PascalEvent={_ => (this.pascalHandled = true)} 29 | > 30 | 31 | ); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /libraries/stencil/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "test": "wireit", 4 | "build": "wireit", 5 | "build:stencil": "wireit" 6 | }, 7 | "library_repo": "ionic-team/stencil", 8 | "devDependencies": { 9 | "babel-core": "6.26.3", 10 | "babel-loader": "9.2.1", 11 | "chai": "4.5.0", 12 | "cross-env": "7.0.3", 13 | "karma": "6.4.4", 14 | "karma-chrome-launcher": "3.2.0", 15 | "karma-firefox-launcher": "2.1.3", 16 | "karma-sourcemap-loader": "0.4.0", 17 | "karma-webpack": "5.0.1", 18 | "webpack": "5.101.0" 19 | }, 20 | "dependencies": { 21 | "@stencil/core": "4.36.2" 22 | }, 23 | "wireit": { 24 | "test": { 25 | "dependencies": [ 26 | "../..:karma-plugins", 27 | "build:stencil" 28 | ], 29 | "files": [ 30 | "karma.conf.js", 31 | "stencil.config.ts", 32 | "tests.webpack.js", 33 | "tsconfig.json", 34 | "src", 35 | "dist", 36 | "meta" 37 | ], 38 | "output": [ 39 | "results" 40 | ], 41 | "command": "cross-env LIBRARY_NAME=@stencil/core karma start" 42 | }, 43 | "build": { 44 | "dependencies": [ 45 | "test" 46 | ] 47 | }, 48 | "build:stencil": { 49 | "files": [ 50 | "stencil.config.ts", 51 | "tsconfig.json", 52 | "src" 53 | ], 54 | "output": [ 55 | "dist" 56 | ], 57 | "command": "stencil build" 58 | } 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /libraries/stencil/src/components.js: -------------------------------------------------------------------------------- 1 | import "ce-without-children"; 2 | import "ce-with-children"; 3 | import "ce-with-properties"; 4 | import "ce-with-event"; 5 | import { ComponentWithChildren } from "../dist/components/component-with-children.js"; 6 | import { ComponentWithChildrenRerender } from "../dist/components/component-with-children-rerender.js"; 7 | import { ComponentWithDeclarativeEvent } from "../dist/components/component-with-declarative-event.js"; 8 | import { ComponentWithDifferentViews } from "../dist/components/component-with-different-views.js"; 9 | import { ComponentWithImperativeEvent } from "../dist/components/component-with-imperative-event.js"; 10 | import { ComponentWithProperties } from "../dist/components/component-with-properties.js"; 11 | import { ComponentWithoutChildren } from "../dist/components/component-without-children.js"; 12 | 13 | customElements.define("component-without-children", ComponentWithoutChildren); 14 | customElements.define("component-with-children", ComponentWithChildren); 15 | customElements.define( 16 | "component-with-children-rerender", 17 | ComponentWithChildrenRerender 18 | ); 19 | customElements.define( 20 | "component-with-different-views", 21 | ComponentWithDifferentViews 22 | ); 23 | customElements.define( 24 | "component-with-imperative-event", 25 | ComponentWithImperativeEvent 26 | ); 27 | customElements.define( 28 | "component-with-declarative-event", 29 | ComponentWithDeclarativeEvent 30 | ); 31 | customElements.define("component-with-properties", ComponentWithProperties); 32 | -------------------------------------------------------------------------------- /libraries/polymer/src/components/component-with-properties.js: -------------------------------------------------------------------------------- 1 | import { PolymerElement, html } from "@polymer/polymer/polymer-element.js"; 2 | import "ce-with-properties"; 3 | 4 | class ComponentWithProperties extends PolymerElement { 5 | static get is() { 6 | return "component-with-properties"; 7 | } 8 | static get properties() { 9 | return { 10 | bool: { 11 | type: Boolean, 12 | value: true 13 | }, 14 | num: { 15 | type: Number, 16 | value: 42 17 | }, 18 | str: { 19 | type: String, 20 | value: "Polymer" 21 | }, 22 | arr: { 23 | type: Array, 24 | value: function() { 25 | return ["P", "o", "l", "y", "m", "e", "r"]; 26 | } 27 | }, 28 | obj: { 29 | type: Object, 30 | value: function() { 31 | return { org: "polymer", repo: "polymer" }; 32 | } 33 | }, 34 | camelCaseObj: { 35 | type: Object, 36 | value: function() { 37 | return { label: "passed" }; 38 | } 39 | } 40 | }; 41 | } 42 | static get template() { 43 | return html` 44 |
45 | 53 |
54 | `; 55 | } 56 | } 57 | window.customElements.define( 58 | ComponentWithProperties.is, 59 | ComponentWithProperties 60 | ); 61 | -------------------------------------------------------------------------------- /libraries/__shared__/webcomponents/src/ce-with-properties.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2017 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | class CEWithProperties extends HTMLElement { 19 | set bool(value) { 20 | this._bool = value; 21 | } 22 | get bool() { 23 | return this._bool; 24 | } 25 | set num(value) { 26 | this._num = value; 27 | } 28 | get num() { 29 | return this._num; 30 | } 31 | set str(value) { 32 | this._str = value; 33 | } 34 | get str() { 35 | return this._str; 36 | } 37 | set arr(value) { 38 | this._arr = value; 39 | } 40 | get arr() { 41 | return this._arr; 42 | } 43 | set obj(value) { 44 | this._obj = value; 45 | } 46 | get obj() { 47 | return this._obj; 48 | } 49 | set camelCaseObj(value) { 50 | this._camelCaseObj = value; 51 | } 52 | get camelCaseObj() { 53 | return this._camelCaseObj; 54 | } 55 | } 56 | 57 | customElements.define('ce-with-properties', CEWithProperties); 58 | -------------------------------------------------------------------------------- /.github/workflows/test.yml: -------------------------------------------------------------------------------- 1 | name: Test that the site builds 2 | 3 | on: [push, pull_request] 4 | 5 | permissions: 6 | contents: write # To push a preview to gh pages 7 | pull-requests: write # To comment on the PR 8 | 9 | jobs: 10 | build: 11 | runs-on: ubuntu-latest 12 | timeout-minutes: 15 13 | 14 | steps: 15 | - uses: actions/checkout@v4 16 | - name: Use Node.js 20 17 | uses: actions/setup-node@v4 18 | with: 19 | node-version: "20" 20 | - name: Install dependencies 21 | run: npm ci 22 | - run: npm test 23 | 24 | - name: Deploy Preview 25 | # Only run this job if the repository is NOT a fork and the actor is not dependabot or renovate 26 | if: ${{ github.event.pull_request.head.repo.full_name == github.repository && !(github.actor == 'dependabot[bot]' || github.actor == 'renovate[bot]') }} 27 | uses: JamesIves/github-pages-deploy-action@v4.7.3 28 | with: 29 | branch: gh-pages 30 | folder: out 31 | target-folder: preview/preview/preview/${{github.event.number}} 32 | - name: Comment about preview 33 | # Only run this job if the repository is NOT a fork and the actor is not dependabot or renovate 34 | if: ${{ github.event.pull_request.head.repo.full_name == github.repository && !(github.actor == 'dependabot[bot]' || github.actor == 'renovate[bot]') }} 35 | uses: marocchino/sticky-pull-request-comment@v2 36 | with: 37 | message: | 38 | Preview this PR: https://custom-elements-everywhere.com/preview/preview/preview/${{github.event.number}}/ 39 | -------------------------------------------------------------------------------- /libraries/riot/src/components.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2017 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | import 'ce-without-children' 19 | import 'ce-with-children' 20 | import 'ce-with-properties' 21 | import 'ce-with-event' 22 | 23 | export { default as ComponentWithoutChildren } from './components/ComponentWithoutChildren.riot' 24 | export { default as ComponentWithChildren } from './components/ComponentWithChildren.riot' 25 | export { default as ComponentWithChildrenRerender } from './components/ComponentWithChildrenRerender.riot' 26 | export { default as ComponentWithDifferentViews } from './components/ComponentWithDifferentViews.riot' 27 | export { default as ComponentWithProperties } from './components/ComponentWithProperties.riot' 28 | export { default as ComponentWithUnregistered } from './components/ComponentWithUnregistered.riot' 29 | export { default as ComponentWithImperativeEvent } from './components/ComponentWithImperativeEvent.riot' 30 | export { default as ComponentWithDeclarativeEvent } from './components/ComponentWithDeclarativeEvent.riot' 31 | -------------------------------------------------------------------------------- /libraries/svelte/src/components.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2017 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | import 'ce-without-children'; 19 | import 'ce-with-children'; 20 | import 'ce-with-properties'; 21 | import 'ce-with-event'; 22 | 23 | export { default as ComponentWithoutChildren } from './components/ComponentWithoutChildren.svelte'; 24 | export { default as ComponentWithChildren } from './components/ComponentWithChildren.svelte'; 25 | export { default as ComponentWithChildrenRerender } from './components/ComponentWithChildrenRerender.svelte'; 26 | export { default as ComponentWithDifferentViews } from './components/ComponentWithDifferentViews.svelte'; 27 | export { default as ComponentWithProperties } from './components/ComponentWithProperties.svelte'; 28 | export { default as ComponentWithUnregistered } from './components/ComponentWithUnregistered.svelte'; 29 | export { default as ComponentWithImperativeEvent } from './components/ComponentWithImperativeEvent.svelte'; 30 | export { default as ComponentWithDeclarativeEvent } from './components/ComponentWithDeclarativeEvent.svelte'; 31 | -------------------------------------------------------------------------------- /libraries/angular/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "test": "wireit", 4 | "build": "wireit" 5 | }, 6 | "library_repo": "angular/angular", 7 | "devDependencies": { 8 | "@types/mocha": "10.0.10", 9 | "@types/node": "20.19.10", 10 | "angular2-template-loader": "0.6.2", 11 | "awesome-typescript-loader": "5.2.1", 12 | "babel-core": "6.26.3", 13 | "babel-loader": "9.2.1", 14 | "chai": "4.5.0", 15 | "cross-env": "7.0.3", 16 | "karma": "6.4.4", 17 | "karma-chrome-launcher": "3.2.0", 18 | "karma-firefox-launcher": "2.1.3", 19 | "karma-sourcemap-loader": "0.4.0", 20 | "karma-webpack": "5.0.1", 21 | "ts-helpers": "1.1.2", 22 | "typescript": "~3.9", 23 | "webpack": "5.101.0" 24 | }, 25 | "dependencies": { 26 | "@angular/common": "20.1.6", 27 | "@angular/compiler": "16.2.10", 28 | "@angular/core": "20.1.6", 29 | "@angular/forms": "20.1.6", 30 | "@angular/platform-browser": "20.1.6", 31 | "@angular/platform-browser-dynamic": "16.2.10", 32 | "@angular/router": "16.2.10", 33 | "core-js": "3.45.0", 34 | "reflect-metadata": "0.2.2", 35 | "rxjs": "7.8.2", 36 | "zone.js": "0.13.1" 37 | }, 38 | "wireit": { 39 | "test": { 40 | "dependencies": [ 41 | "../..:karma-plugins" 42 | ], 43 | "files": [ 44 | "karma.conf.js", 45 | "tests.webpack.ts", 46 | "tsconfig.json", 47 | "src", 48 | "meta" 49 | ], 50 | "output": [ 51 | "results" 52 | ], 53 | "command": "cross-env LIBRARY_NAME=@angular/core karma start" 54 | }, 55 | "build": { 56 | "dependencies": [ 57 | "test" 58 | ] 59 | } 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /docs/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Page Not Found 7 | 22 | 23 | 24 |
25 |

404

26 |

Page Not Found

27 |

28 | OOPS! Looks like something went wrong. Go back to 29 | 30 | custom-elements-everywhere.com 31 | 32 |

33 |
34 | 35 | 36 | -------------------------------------------------------------------------------- /libraries/angular/src/app.module.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2017 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; 19 | import { BrowserModule } from '@angular/platform-browser'; 20 | import { HttpClientModule } from '@angular/common/http'; 21 | import { FormsModule } from '@angular/forms'; 22 | 23 | import { 24 | ComponentWithoutChildren, 25 | ComponentWithChildren, 26 | ComponentWithChildrenRerender, 27 | ComponentWithDifferentViews, 28 | ComponentWithProperties, 29 | ComponentWithUnregistered, 30 | ComponentWithImperativeEvent, 31 | ComponentWithDeclarativeEvent 32 | } from './components'; 33 | 34 | @NgModule({ 35 | imports: [ 36 | BrowserModule, 37 | HttpClientModule, 38 | FormsModule 39 | ], 40 | declarations: [ 41 | ComponentWithoutChildren, 42 | ComponentWithChildren, 43 | ComponentWithChildrenRerender, 44 | ComponentWithDifferentViews, 45 | ComponentWithProperties, 46 | ComponentWithUnregistered, 47 | ComponentWithImperativeEvent, 48 | ComponentWithDeclarativeEvent 49 | ], 50 | schemas: [CUSTOM_ELEMENTS_SCHEMA] 51 | }) 52 | export class AppModule { 53 | 54 | } 55 | -------------------------------------------------------------------------------- /libraries/angular/tests.webpack.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2017 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | import 'reflect-metadata/Reflect'; 19 | import 'zone.js/dist/zone'; 20 | import 'zone.js/dist/webapis-shadydom'; // https://github.com/angular/zone.js/pull/784 21 | import 'zone.js/dist/long-stack-trace-zone'; 22 | import 'zone.js/dist/proxy'; 23 | import 'zone.js/dist/sync-test'; 24 | import 'zone.js/dist/mocha-patch'; 25 | import 'zone.js/dist/async-test'; 26 | import 'zone.js/dist/fake-async-test'; 27 | import { getTestBed } from '@angular/core/testing'; 28 | import { 29 | BrowserDynamicTestingModule, 30 | platformBrowserDynamicTesting 31 | } from '@angular/platform-browser-dynamic/testing'; 32 | 33 | declare var __karma__: any; 34 | declare var require: any; 35 | 36 | // Prevent Karma from running prematurely. 37 | __karma__.loaded = function () {}; 38 | 39 | // First, initialize the Angular testing environment. 40 | getTestBed().initTestEnvironment( 41 | BrowserDynamicTestingModule, 42 | platformBrowserDynamicTesting() 43 | ); 44 | // Run basic and advanced tests through Karma 45 | require('./src/basic-tests.js'); 46 | require('./src/advanced-tests.js'); 47 | // Finally, start Karma to run the tests. 48 | __karma__.start(); 49 | -------------------------------------------------------------------------------- /docs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "custom-elements-everywhere", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "scripts": { 6 | "build": "wireit", 7 | "build-html": "wireit", 8 | "build-css": "wireit", 9 | "copy": "wireit" 10 | }, 11 | "author": "Rob Dodson", 12 | "license": "MIT", 13 | "devDependencies": { 14 | "clean-css": "^5.3.3", 15 | "handlebars": "4.7.8", 16 | "marked": "9.1.6" 17 | }, 18 | "wireit": { 19 | "build": { 20 | "dependencies": [ 21 | "build-html", 22 | "build-css", 23 | "copy" 24 | ] 25 | }, 26 | "build-css": { 27 | "files": [ 28 | "styles/third_party/bulma.css", 29 | "styles/site.css", 30 | "scripts/build-css.js" 31 | ], 32 | "commentedOut-output": [ 33 | "../out/styles/bundle.css" 34 | ], 35 | "command": "node ./scripts/build-css.js" 36 | }, 37 | "build-html": { 38 | "dependencies": [ 39 | "../:copy-and-verify-results" 40 | ], 41 | "files": [ 42 | "libraries", 43 | "index.handlebars", 44 | "scripts/build-html.js", 45 | "partials" 46 | ], 47 | "commentedOut-output": [ 48 | "../out/index.html" 49 | ], 50 | "command": "node ./scripts/build-html.js" 51 | }, 52 | "copy": { 53 | "dependencies": [ 54 | "../:copy-and-verify-results" 55 | ], 56 | "files": [ 57 | "404.html", 58 | "CNAME", 59 | "robots.txt", 60 | "images", 61 | "libraries", 62 | "scripts/copy.js" 63 | ], 64 | "commentedOut-output": [ 65 | "../out/404.html", 66 | "../out/CNAME", 67 | "../out/robots.txt", 68 | "../out/images", 69 | "../out/libraries" 70 | ], 71 | "command": "node ./scripts/copy.js" 72 | } 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /libraries/polymer/src/components/component-with-declarative-event.js: -------------------------------------------------------------------------------- 1 | import { PolymerElement, html } from "@polymer/polymer/polymer-element.js"; 2 | import "ce-with-event"; 3 | 4 | class ComponentWithDeclarativeEvent extends PolymerElement { 5 | static get is() { 6 | return "component-with-declarative-event"; 7 | } 8 | static get properties() { 9 | return { 10 | lowercaseHandled: { 11 | type: Boolean, 12 | value: false 13 | }, 14 | kebabHandled: { 15 | type: Boolean, 16 | value: false 17 | }, 18 | camelHandled: { 19 | type: Boolean, 20 | value: false 21 | }, 22 | capsHandled: { 23 | type: Boolean, 24 | value: false 25 | }, 26 | pascalHandled: { 27 | type: Boolean, 28 | value: false 29 | } 30 | }; 31 | } 32 | static get template() { 33 | return html` 34 |
35 |
[[lowercaseHandled]]
36 |
[[kebabHandled]]
37 |
[[camelHandled]]
38 |
[[capsHandled]]
39 |
[[pascalHandled]]
40 | 47 |
48 | `; 49 | } 50 | handleLowercaseEvent() { 51 | this.lowercaseHandled = true; 52 | } 53 | handleKebabEvent() { 54 | this.kebabHandled = true; 55 | } 56 | handleCamelEvent() { 57 | this.camelHandled = true; 58 | } 59 | handleCapsEvent() { 60 | this.capsHandled = true; 61 | } 62 | handlePascalEvent() { 63 | this.pascalHandled = true; 64 | } 65 | } 66 | window.customElements.define( 67 | ComponentWithDeclarativeEvent.is, 68 | ComponentWithDeclarativeEvent 69 | ); 70 | -------------------------------------------------------------------------------- /libraries/lit/src/components/component-with-declarative-event.js: -------------------------------------------------------------------------------- 1 | import { LitElement, html } from "lit"; 2 | import "ce-with-event"; 3 | 4 | class ComponentWithDeclarativeEvent extends LitElement { 5 | static get properties() { 6 | return { 7 | lowercaseHandled: { type: Boolean }, 8 | kebabHandled: { type: Boolean }, 9 | camelHandled: { type: Boolean }, 10 | capsHandled: { type: Boolean }, 11 | pascalHandled: { type: Boolean } 12 | }; 13 | } 14 | 15 | constructor() { 16 | super(); 17 | this.lowercaseHandled = false; 18 | this.kebabHandled = false; 19 | this.camelHandled = false; 20 | this.capsHandled = false; 21 | this.pascalHandled = false; 22 | } 23 | 24 | render() { 25 | return html` 26 |
27 |
${this.lowercaseHandled}
28 |
${this.kebabHandled}
29 |
${this.camelHandled}
30 |
${this.capsHandled}
31 |
${this.pascalHandled}
32 | 55 |
56 | `; 57 | } 58 | handleLowercaseEvent() { 59 | this.lowercaseHandled = true; 60 | } 61 | handleKebabEvent() { 62 | this.kebabHandled = true; 63 | } 64 | handleCamelEvent() { 65 | this.camelHandled = true; 66 | } 67 | handleCapsEvent() { 68 | this.capsHandled = true; 69 | } 70 | handlePascalEvent() { 71 | this.pascalHandled = true; 72 | } 73 | } 74 | customElements.define( 75 | "component-with-declarative-event", 76 | ComponentWithDeclarativeEvent 77 | ); 78 | -------------------------------------------------------------------------------- /docs/partials/octocat.handlebars: -------------------------------------------------------------------------------- 1 | {{!-- 2 | Copyright 2017 Google Inc. All Rights Reserved. Licensed under the Apache 3 | License, Version 2.0 (the "License"); you may not use this file except in 4 | compliance with the License. You may obtain a copy of the License at 5 | http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or 6 | agreed to in writing, software distributed under the License is distributed on 7 | an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express 8 | or implied. See the License for the specific language governing permissions and 9 | limitations under the License. 10 | --}} 11 | 34 | -------------------------------------------------------------------------------- /libraries/lwc/src/components.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2017 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | import 'ce-without-children'; 19 | import 'ce-with-children'; 20 | import 'ce-with-properties'; 21 | import 'ce-with-event'; 22 | 23 | import { createElement } from 'lwc'; 24 | 25 | import WithoutChildren from 'x/withoutChildren'; 26 | import WithChildren from 'x/withChildren'; 27 | import WithChildrenRerender from 'x/withChildrenRerender'; 28 | import WithDifferentViews from 'x/withDifferentViews'; 29 | import WithProperties from 'x/withProperties'; 30 | import WithImperativeEvent from 'x/withImperativeEvent'; 31 | import WithDeclarativeEvent from 'x/withDeclarativeEvent'; 32 | 33 | export function createComponentWithoutChildren() { 34 | return createElement('x-without-children', { is: WithoutChildren }); 35 | } 36 | 37 | export function createComponentWithChildren() { 38 | return createElement('x-with-children', { is: WithChildren }); 39 | } 40 | 41 | export function createComponentWithChildrenRerender() { 42 | return createElement('x-with-children-rerender', { is: WithChildrenRerender }); 43 | } 44 | 45 | export function createComponentWithDifferentViews() { 46 | return createElement('x-with-different-views', { is: WithDifferentViews }); 47 | } 48 | 49 | export function createComponentWithProperties() { 50 | return createElement('x-with-properties', { is: WithProperties }); 51 | } 52 | 53 | export function createComponentWithImperativeEvent() { 54 | return createElement('x-with-imperative-event', { is: WithImperativeEvent }); 55 | } 56 | 57 | export function createComponentWithDeclarativeEvent() { 58 | return createElement('x-with-declarative-event', { is: WithDeclarativeEvent }); 59 | } 60 | -------------------------------------------------------------------------------- /scripts/common.mjs: -------------------------------------------------------------------------------- 1 | import * as fs from 'fs'; 2 | import * as pathlib from 'path'; 3 | import minimist from 'minimist'; 4 | import { fileURLToPath } from 'url'; 5 | 6 | const __dirname = pathlib.dirname(fileURLToPath(import.meta.url)); 7 | 8 | /** 9 | * Supported options: 10 | * -v, --verbose Verbose output 11 | * -e, --exclude Exclude a library from tests 12 | */ 13 | export const opts = minimist(process.argv.slice(2), { 14 | boolean: ["verbose", "update-goldens"], 15 | string: "exclude", 16 | alias: { v: "verbose", e: "exclude", u: "update-goldens" } 17 | }); 18 | 19 | /** 20 | * A short term list of libraries that we don't test. If we can't 21 | * fix it in a reasonable period of time, we should just remove it entirely. 22 | */ 23 | const knownBroken = []; 24 | 25 | /** 26 | * Build the list of directories to exclude from testing. 27 | * For example, if the user passed in -e angular we should test all libraries 28 | * except for angular. 29 | * Note, we always exclude the __shared__ directory which contains resources 30 | * the libraries use internally for testing. 31 | */ 32 | const excludes = [ 33 | "__shared__", 34 | ...knownBroken, 35 | ...(Array.isArray(opts.exclude) ? opts.exclude : [opts.exclude]) 36 | ]; 37 | 38 | /** 39 | * Build a data object for each library containing the library's name, 40 | * path to its tests, and path to its home in the docs folder. 41 | * If the user passed in a list of libraries to test, juse use those, 42 | * otherwise, test all of the subfolders in the libraries directory, minus 43 | * any excluded ones. 44 | */ 45 | export let libraries; 46 | if (opts._.length) { 47 | libraries = opts._; 48 | } else { 49 | libraries = fs.readdirSync(pathlib.join(__dirname, "..", "libraries")); 50 | } 51 | libraries = libraries 52 | .filter(name => excludes.indexOf(name) === -1) 53 | .map(name => { 54 | return { 55 | name, 56 | testsPath: pathlib.join(__dirname, "..", "libraries", name), 57 | metaPath: pathlib.join(__dirname,"..", "libraries", name, "meta"), 58 | resultsPath: pathlib.join(__dirname,"..", "libraries", name, "results"), 59 | docsPath: pathlib.join(__dirname,"..", "docs", "libraries", name), 60 | packageJson: JSON.parse(fs.readFileSync(pathlib.join(__dirname, "..", "libraries", name, "package.json"))) 61 | }; 62 | }); 63 | -------------------------------------------------------------------------------- /docs/styles/site.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2017 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | p a { 19 | color: #00796b; 20 | text-decoration: underline; 21 | } 22 | 23 | .title a { 24 | color: rgb(74, 74, 74); 25 | } 26 | 27 | .title a:hover { 28 | color: #00796b; 29 | } 30 | 31 | .section { 32 | border-top: 1px solid rgba(0, 0, 0, 0.1); 33 | } 34 | 35 | .section:nth-of-type(odd) { 36 | background: #F4F4F4; 37 | } 38 | 39 | .cheers { 40 | display: inline-block; 41 | transform: translate(10px) scale(2, 2); 42 | } 43 | 44 | .no-issues-caption { 45 | transform: translateY(-20px); 46 | } 47 | 48 | .button.is-info.is-outlined { 49 | background-color: transparent; 50 | border-color: #1565C0; 51 | color: #1565C0; 52 | } 53 | 54 | code { 55 | color: #000000; 56 | } 57 | 58 | .library-version { 59 | font-size: 1rem; 60 | } 61 | 62 | .question { 63 | margin: 40px 0; 64 | } 65 | 66 | .fork-me-footer { 67 | margin-top: 16px; 68 | } 69 | 70 | .level .title { 71 | font-size: 1.8rem; 72 | } 73 | 74 | @media screen and (min-width: 1191px) { 75 | .level .title { 76 | font-size: 1.5rem; 77 | } 78 | } 79 | 80 | @media screen and (min-width: 1384px) { 81 | .level .title { 82 | font-size: 1.8rem; 83 | } 84 | } 85 | 86 | @media screen and (min-width: 1192px) { 87 | .column.is-offset-0-widescreen { 88 | margin-left: 0; 89 | } 90 | } 91 | 92 | #preview-warning { 93 | height: 80px; 94 | padding-left: 20px; 95 | padding-right: 80px; 96 | background-color: rgb(113, 2, 2); 97 | color: #eee; 98 | /* Vertically center text inside */ 99 | display: flex; 100 | align-items: center; 101 | justify-content: center; 102 | font-size: 120%; 103 | } 104 | -------------------------------------------------------------------------------- /libraries/__shared__/karma-plugins/karma-mocha/lib/index.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var extend = require('util')._extend 3 | var minimist = require('minimist') 4 | 5 | var createPattern = function (path) { 6 | return {pattern: path, included: true, served: true, watched: false} 7 | } 8 | 9 | var initMocha = function (files, config) { 10 | var mochaPath = path.dirname(require.resolve('mocha')) 11 | console.log('dirname', __dirname); 12 | console.log('cwd', process.cwd()); 13 | console.log('mochaPath', mochaPath); 14 | files.unshift(createPattern(path.join(__dirname, 'adapter.js'))) 15 | 16 | config = config || {} 17 | config.client = config.client || {} 18 | var mochaConfig = config.client.mocha = getMochaOpts(config.client.mocha || {}) 19 | 20 | if (mochaConfig.require && mochaConfig.require.map) { 21 | mochaConfig.require.map(function (requirePath) { 22 | return files.unshift(createPattern(requirePath)) 23 | }) 24 | } 25 | 26 | files.unshift(createPattern(path.join(mochaPath, 'mocha.js'))) 27 | 28 | if (mochaConfig.reporter) { 29 | files.unshift(createPattern(path.join(mochaPath, 'mocha.css'))) 30 | } 31 | } 32 | 33 | initMocha.$inject = ['config.files', 'config'] 34 | 35 | module.exports = { 36 | 'framework:mocha': ['factory', initMocha] 37 | } 38 | 39 | function getMochaOpts (mochaConfig) { 40 | var optsPath = typeof mochaConfig.opts === 'string' ? mochaConfig.opts : 'test/mocha.opts' 41 | 42 | if (!mochaConfig.opts) { 43 | return mochaConfig 44 | } 45 | 46 | delete mochaConfig.opts 47 | 48 | var fs = require('fs') 49 | if (!fs.existsSync(optsPath)) { 50 | return mochaConfig 51 | } 52 | 53 | return extend(normalizeOpts(minimist(fs.readFileSync(optsPath, 'utf8') 54 | .replace(/\\\s/g, '%20') 55 | .split(/\s/) 56 | .filter(Boolean) 57 | .map(function (value) { 58 | return value.replace(/%20/g, ' ') 59 | }))), mochaConfig) 60 | 61 | function normalizeOpts (opts) { 62 | opts = [ 63 | 'require', 64 | 65 | 'ui', 66 | 'reporter', 67 | 'globals', 68 | 'grep', 69 | 'timeout', 70 | 'slow', 71 | 'bail', 72 | 'ignoreLeaks' 73 | ].reduce(function (result, optName) { 74 | if (opts.hasOwnProperty(optName)) { 75 | result[optName] = opts[optName] 76 | } 77 | 78 | return result 79 | }, {}) 80 | 81 | opts.require = [].concat(opts.require || []) 82 | 83 | return opts 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /libraries/hybrids/src/components.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2017 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | import 'ce-without-children'; 19 | import 'ce-with-children'; 20 | import 'ce-with-properties'; 21 | import 'ce-with-event'; 22 | 23 | import { html } from 'hybrids'; 24 | 25 | export const ComponentWithoutChildren = { 26 | render: () => html` 27 | 28 | `, 29 | }; 30 | 31 | export const ComponentWithChildren = { 32 | render: () => html` 33 | 34 | `, 35 | }; 36 | 37 | export const ComponentWithChildrenCount = { 38 | count: 1, 39 | render: ({ count }) => html` 40 | ${count} 41 | `, 42 | }; 43 | 44 | export const ComponentWithDifferentViews = { 45 | showWc: true, 46 | render: ({ showWc }) => html` 47 | ${showWc ? html`` : html`
Dummy view
`} 48 | ` 49 | }; 50 | 51 | export const ComponentWithProperties = { 52 | render: () => html` 53 | 62 | `, 63 | }; 64 | 65 | export const ComponentWithDeclarativeEvent = { 66 | lowercaseHandled: false, 67 | kebabHandled: false, 68 | camelHandled: false, 69 | capsHandled: false, 70 | pascalHandled: false, 71 | render: () => html` 72 | 80 | 81 | ` 82 | }; 83 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "custom-elements-everywhere", 3 | "version": "1.0.0", 4 | "description": "Compare how different frameworks handle Web Components.", 5 | "license": "Apache 2.0", 6 | "scripts": { 7 | "build": "wireit", 8 | "copy-and-verify-results": "wireit", 9 | "update-goldens": "wireit", 10 | "test": "wireit", 11 | "start": "wireit", 12 | "karma-plugins": "wireit" 13 | }, 14 | "workspaces": [ 15 | "libraries/*", 16 | "libraries/__shared__/*", 17 | "libraries/__shared__/karma-plugins/*", 18 | "docs" 19 | ], 20 | "devDependencies": { 21 | "@babel/core": "^7.16.7", 22 | "chai": "^4.3.4", 23 | "fs-extra": "11.3.1", 24 | "http-server": "14.1.1", 25 | "minimist": "1.2.8", 26 | "node-fetch": "^3.0.0", 27 | "wireit": "^0.14.0" 28 | }, 29 | "wireit": { 30 | "test": { 31 | "dependencies": [ 32 | "build" 33 | ] 34 | }, 35 | "copy-and-verify-results": { 36 | "dependencies": [ 37 | "./libraries/angular:build", 38 | "./libraries/angularjs:build", 39 | "./libraries/dio:build", 40 | "./libraries/dojo:build", 41 | "./libraries/hybrids:build", 42 | "./libraries/hyperapp:build", 43 | "./libraries/hyperhtml:build", 44 | "./libraries/lit:build", 45 | "./libraries/lwc:build", 46 | "./libraries/mithril:build", 47 | "./libraries/omi:build", 48 | "./libraries/polymer:build", 49 | "./libraries/preact:build", 50 | "./libraries/react:build", 51 | "./libraries/riot:build", 52 | "./libraries/skate:build", 53 | "./libraries/solid:build", 54 | "./libraries/stencil:build", 55 | "./libraries/surplus:build", 56 | "./libraries/svelte:build", 57 | "./libraries/vue:build" 58 | ], 59 | "output": [ 60 | "docs/libraries" 61 | ], 62 | "command": "node scripts/copy-and-verify-results.mjs" 63 | }, 64 | "build": { 65 | "dependencies": [ 66 | "./docs:build" 67 | ] 68 | }, 69 | "start": { 70 | "dependencies": [ 71 | "build" 72 | ], 73 | "command": "cd out && http-server -o -c-1" 74 | }, 75 | "update-goldens": { 76 | "dependencies": [ 77 | "build" 78 | ], 79 | "command": "node scripts/copy-and-verify-results.mjs --update-goldens" 80 | }, 81 | "karma-plugins": { 82 | "#comment": "Each project that uses the karma plugins should depend on this so that cache invalidation is done properly.", 83 | "dependencies": [ 84 | "./libraries/__shared__/karma-plugins/karma-custom-html-reporter:build", 85 | "./libraries/__shared__/karma-plugins/karma-custom-json-reporter:build", 86 | "./libraries/__shared__/karma-plugins/karma-mocha:build" 87 | ] 88 | } 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /docs/images/smiley.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /libraries/solid/karma.conf.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2017 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | var webpack = require('webpack'); 19 | var path = require('path'); 20 | 21 | module.exports = function(config) { 22 | config.set({ 23 | plugins: [ 24 | 'karma-chrome-launcher', 25 | 'karma-firefox-launcher', 26 | require(path.resolve(__dirname, '../__shared__/karma-plugins/karma-mocha')), 27 | 'karma-sourcemap-loader', 28 | 'karma-webpack', 29 | require(path.resolve(__dirname, '../__shared__/karma-plugins/karma-custom-html-reporter')), 30 | require(path.resolve(__dirname, '../__shared__/karma-plugins/karma-custom-json-reporter')) 31 | ], 32 | browsers: ['ChromeHeadless', 'FirefoxHeadless'], // run in Chrome and Firefox 33 | customLaunchers: { 34 | FirefoxHeadless: { 35 | base: 'Firefox', 36 | flags: [ '-headless' ], 37 | displayName: 'FirefoxHeadless' 38 | }, 39 | }, 40 | singleRun: true, // set this to false to leave the browser open 41 | frameworks: ['mocha'], // use the mocha test framework 42 | files: [ 43 | 'tests.webpack.js' // just load this file 44 | ], 45 | preprocessors: { 46 | 'tests.webpack.js': ['webpack', 'sourcemap'] // preprocess with webpack and our sourcemap loader 47 | }, 48 | reporters: ['dots', 'custom-html', 'custom-json'], // report results in these formats 49 | htmlReporter: { 50 | outputFile: path.resolve(__dirname, './results/results.html'), 51 | pageTitle: 'Solid + Custom Elements', 52 | groupSuites: true, 53 | useCompactStyle: true 54 | }, 55 | jsonResultReporter: { 56 | outputFile: path.resolve(__dirname, './results/results.json') 57 | }, 58 | webpack: { // kind of a copy of your webpack config 59 | // devtool: 'inline-source-map', // just do inline source maps instead of the default 60 | resolve: { 61 | modules: [ 62 | path.resolve(__dirname, '../__shared__/webcomponents/src'), 63 | path.resolve(__dirname, './node_modules'), 64 | path.resolve(__dirname, '../../node_modules'), 65 | ] 66 | }, 67 | module: { 68 | rules: [ 69 | { 70 | test: /\.js$/, 71 | exclude: /node_modules/, 72 | loader: 'babel-loader' 73 | } 74 | ] 75 | } 76 | }, 77 | webpackServer: { 78 | // noInfo: true // please don't spam the console when running in karma! 79 | } 80 | }); 81 | }; 82 | -------------------------------------------------------------------------------- /libraries/surplus/karma.conf.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2017 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | var webpack = require('webpack'); 19 | var path = require('path'); 20 | 21 | module.exports = function (config) { 22 | config.set({ 23 | plugins: [ 24 | 'karma-chrome-launcher', 25 | 'karma-firefox-launcher', 26 | require(path.resolve(__dirname, '../__shared__/karma-plugins/karma-mocha')), 27 | 'karma-sourcemap-loader', 28 | 'karma-webpack', 29 | require(path.resolve(__dirname, '../__shared__/karma-plugins/karma-custom-html-reporter')), 30 | require(path.resolve(__dirname, '../__shared__/karma-plugins/karma-custom-json-reporter')) 31 | ], 32 | browsers: ['ChromeHeadless', 'FirefoxHeadless'], // run in Chrome and Firefox 33 | customLaunchers: { 34 | FirefoxHeadless: { 35 | base: 'Firefox', 36 | flags: ['-headless'], 37 | displayName: 'FirefoxHeadless' 38 | }, 39 | }, 40 | singleRun: true, // set this to false to leave the browser open 41 | frameworks: ['mocha'], // use the mocha test framework 42 | files: [ 43 | 'tests.webpack.js' // just load this file 44 | ], 45 | preprocessors: { 46 | 'tests.webpack.js': ['webpack', 'sourcemap'] // preprocess with webpack and our sourcemap loader 47 | }, 48 | reporters: ['dots', 'custom-html', 'custom-json'], // report results in these formats 49 | htmlReporter: { 50 | outputFile: path.resolve(__dirname, './results/results.html'), 51 | pageTitle: 'Surplus + Custom Elements', 52 | groupSuites: true, 53 | useCompactStyle: true 54 | }, 55 | jsonResultReporter: { 56 | outputFile: path.resolve(__dirname, './results/results.json') 57 | }, 58 | webpack: { // kind of a copy of your webpack config 59 | mode: 'development', 60 | // devtool: 'inline-source-map', // just do inline source maps instead of the default 61 | resolve: { 62 | modules: [ 63 | path.resolve(__dirname, '../__shared__/webcomponents/src'), 64 | path.resolve(__dirname, './node_modules'), 65 | path.resolve(__dirname, '../../node_modules'), 66 | ] 67 | }, 68 | module: { 69 | rules: [ 70 | { 71 | test: /\.js$/, 72 | exclude: /node_modules/, 73 | use: 'surplus-loader' 74 | } 75 | ] 76 | } 77 | }, 78 | webpackServer: { 79 | // noInfo: true // please don't spam the console when running in karma! 80 | } 81 | }); 82 | }; 83 | -------------------------------------------------------------------------------- /libraries/polymer/karma.conf.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2017 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | var webpack = require('webpack'); 19 | var path = require('path'); 20 | 21 | module.exports = function(config) { 22 | config.set({ 23 | plugins: [ 24 | 'karma-chrome-launcher', 25 | 'karma-firefox-launcher', 26 | require(path.resolve(__dirname, '../__shared__/karma-plugins/karma-mocha')), 27 | 'karma-sourcemap-loader', 28 | 'karma-webpack', 29 | require(path.resolve(__dirname, '../__shared__/karma-plugins/karma-custom-html-reporter')), 30 | require(path.resolve(__dirname, '../__shared__/karma-plugins/karma-custom-json-reporter')) 31 | ], 32 | browsers: ['ChromeHeadless', 'FirefoxHeadless'], // run in Chrome and Firefox 33 | customLaunchers: { 34 | FirefoxHeadless: { 35 | base: 'Firefox', 36 | flags: [ '-headless' ], 37 | displayName: 'FirefoxHeadless' 38 | }, 39 | }, 40 | singleRun: true, // set this to false to leave the browser open 41 | frameworks: ['mocha'], // use the mocha test framework 42 | files: [ 43 | 'tests.webpack.js' // just load this file 44 | ], 45 | preprocessors: { 46 | 'tests.webpack.js': ['webpack', 'sourcemap'] // preprocess with webpack and our sourcemap loader 47 | }, 48 | reporters: ['dots', 'custom-html', 'custom-json'], // report results in these formats 49 | htmlReporter: { 50 | outputFile: path.resolve(__dirname, './results/results.html'), 51 | pageTitle: 'Polymer + Custom Elements', 52 | groupSuites: true, 53 | useCompactStyle: true 54 | }, 55 | jsonResultReporter: { 56 | outputFile: path.resolve(__dirname, './results/results.json') 57 | }, 58 | webpack: { // kind of a copy of your webpack config 59 | mode: 'development', 60 | // devtool: 'inline-source-map', // just do inline source maps instead of the default 61 | resolve: { 62 | modules: [ 63 | path.resolve(__dirname, '../__shared__/webcomponents/src'), 64 | path.resolve(__dirname, './node_modules'), 65 | path.resolve(__dirname, '../../node_modules'), 66 | ] 67 | }, 68 | module: { 69 | rules: [ 70 | { 71 | test: /\.js$/, 72 | use: { 73 | loader: 'babel-loader' 74 | } 75 | } 76 | ] 77 | } 78 | }, 79 | webpackServer: { 80 | // noInfo: true // please don't spam the console when running in karma! 81 | } 82 | }); 83 | }; 84 | -------------------------------------------------------------------------------- /libraries/dio/karma.conf.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2017 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | var webpack = require('webpack'); 19 | var path = require('path'); 20 | 21 | module.exports = function(config) { 22 | config.set({ 23 | plugins: [ 24 | 'karma-chrome-launcher', 25 | 'karma-firefox-launcher', 26 | require(path.resolve(__dirname, '../__shared__/karma-plugins/karma-mocha')), 27 | 'karma-sourcemap-loader', 28 | 'karma-webpack', 29 | require(path.resolve(__dirname, '../__shared__/karma-plugins/karma-custom-html-reporter')), 30 | require(path.resolve(__dirname, '../__shared__/karma-plugins/karma-custom-json-reporter')) 31 | ], 32 | browsers: ['ChromeHeadless', 'FirefoxHeadless'], // run in Chrome and Firefox 33 | customLaunchers: { 34 | FirefoxHeadless: { 35 | base: 'Firefox', 36 | flags: [ '-headless' ], 37 | displayName: 'FirefoxHeadless' 38 | }, 39 | }, 40 | singleRun: true, // set this to false to leave the browser open 41 | frameworks: ['mocha'], // use the mocha test framework 42 | files: [ 43 | 'tests.webpack.js' // just load this file 44 | ], 45 | preprocessors: { 46 | 'tests.webpack.js': ['webpack', 'sourcemap'] // preprocess with webpack and our sourcemap loader 47 | }, 48 | reporters: ['dots', 'custom-html', 'custom-json'], // report results in these formats 49 | htmlReporter: { 50 | outputFile: path.resolve(__dirname, './results/results.html'), 51 | pageTitle: 'DIO + Custom Elements', 52 | groupSuites: true, 53 | useCompactStyle: true 54 | }, 55 | jsonResultReporter: { 56 | outputFile: path.resolve(__dirname, './results/results.json') 57 | }, 58 | webpack: { // kind of a copy of your webpack config 59 | mode: 'development', 60 | // devtool: 'inline-source-map', // just do inline source maps instead of the default 61 | resolve: { 62 | modules: [ 63 | path.resolve(__dirname, '../__shared__/webcomponents/src'), 64 | path.resolve(__dirname, './node_modules'), 65 | path.resolve(__dirname, '../../node_modules'), 66 | ] 67 | }, 68 | module: { 69 | rules: [ 70 | { 71 | test: /\.js$/, 72 | exclude: /node_modules/, 73 | use: { 74 | loader: 'babel-loader' 75 | } 76 | } 77 | ] 78 | } 79 | }, 80 | webpackServer: { 81 | // noInfo: true // please don't spam the console when running in karma! 82 | } 83 | }); 84 | }; 85 | -------------------------------------------------------------------------------- /libraries/omi/karma.conf.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2017 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | var webpack = require('webpack'); 19 | var path = require('path'); 20 | 21 | module.exports = function(config) { 22 | config.set({ 23 | plugins: [ 24 | 'karma-chrome-launcher', 25 | 'karma-firefox-launcher', 26 | require(path.resolve(__dirname, '../__shared__/karma-plugins/karma-mocha')), 27 | 'karma-sourcemap-loader', 28 | 'karma-webpack', 29 | require(path.resolve(__dirname, '../__shared__/karma-plugins/karma-custom-html-reporter')), 30 | require(path.resolve(__dirname, '../__shared__/karma-plugins/karma-custom-json-reporter')) 31 | ], 32 | browsers: ['ChromeHeadless', 'FirefoxHeadless'], // run in Chrome and Firefox 33 | customLaunchers: { 34 | FirefoxHeadless: { 35 | base: 'Firefox', 36 | flags: [ '-headless' ], 37 | displayName: 'FirefoxHeadless' 38 | }, 39 | }, 40 | singleRun: true, // set this to false to leave the browser open 41 | frameworks: ['mocha'], // use the mocha test framework 42 | files: [ 43 | 'tests.webpack.js' // just load this file 44 | ], 45 | preprocessors: { 46 | 'tests.webpack.js': ['webpack', 'sourcemap'] // preprocess with webpack and our sourcemap loader 47 | }, 48 | reporters: ['dots', 'custom-html', 'custom-json'], // report results in these formats 49 | htmlReporter: { 50 | outputFile: path.resolve(__dirname, './results/results.html'), 51 | pageTitle: 'Omi + Custom Elements', 52 | groupSuites: true, 53 | useCompactStyle: true 54 | }, 55 | jsonResultReporter: { 56 | outputFile: path.resolve(__dirname, './results/results.json') 57 | }, 58 | webpack: { // kind of a copy of your webpack config 59 | mode: 'development', 60 | // devtool: 'inline-source-map', // just do inline source maps instead of the default 61 | resolve: { 62 | modules: [ 63 | path.resolve(__dirname, '../__shared__/webcomponents/src'), 64 | path.resolve(__dirname, './node_modules'), 65 | path.resolve(__dirname, '../../node_modules'), 66 | ] 67 | }, 68 | module: { 69 | rules: [ 70 | { 71 | test: /\.js$/, 72 | exclude: /node_modules/, 73 | use: { 74 | loader: 'babel-loader' 75 | } 76 | } 77 | ] 78 | } 79 | }, 80 | webpackServer: { 81 | // noInfo: true // please don't spam the console when running in karma! 82 | } 83 | }); 84 | }; 85 | -------------------------------------------------------------------------------- /libraries/hybrids/karma.conf.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2017 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | var webpack = require('webpack'); 19 | var path = require('path'); 20 | 21 | module.exports = function(config) { 22 | config.set({ 23 | plugins: [ 24 | 'karma-chrome-launcher', 25 | 'karma-firefox-launcher', 26 | require(path.resolve(__dirname, '../__shared__/karma-plugins/karma-mocha')), 27 | 'karma-sourcemap-loader', 28 | 'karma-webpack', 29 | require(path.resolve(__dirname, '../__shared__/karma-plugins/karma-custom-html-reporter')), 30 | require(path.resolve(__dirname, '../__shared__/karma-plugins/karma-custom-json-reporter')) 31 | ], 32 | browsers: ['ChromeHeadless', 'FirefoxHeadless'], // run in Chrome and Firefox 33 | customLaunchers: { 34 | FirefoxHeadless: { 35 | base: 'Firefox', 36 | flags: [ '-headless' ], 37 | displayName: 'FirefoxHeadless' 38 | }, 39 | }, 40 | singleRun: true, // set this to false to leave the browser open 41 | frameworks: ['mocha'], // use the mocha test framework 42 | files: [ 43 | 'tests.webpack.js' // just load this file 44 | ], 45 | preprocessors: { 46 | 'tests.webpack.js': ['webpack', 'sourcemap'] // preprocess with webpack and our sourcemap loader 47 | }, 48 | reporters: ['dots', 'custom-html', 'custom-json'], // report results in these formats 49 | htmlReporter: { 50 | outputFile: path.resolve(__dirname, './results/results.html'), 51 | pageTitle: 'Hybrids + Custom Elements', 52 | groupSuites: true, 53 | useCompactStyle: true 54 | }, 55 | jsonResultReporter: { 56 | outputFile: path.resolve(__dirname, './results/results.json') 57 | }, 58 | webpack: { // kind of a copy of your webpack config 59 | mode: 'development', 60 | // devtool: 'inline-source-map', // just do inline source maps instead of the default 61 | resolve: { 62 | modules: [ 63 | path.resolve(__dirname, '../__shared__/webcomponents/src'), 64 | path.resolve(__dirname, './node_modules'), 65 | path.resolve(__dirname, '../../node_modules'), 66 | ] 67 | }, 68 | module: { 69 | rules: [ 70 | { 71 | test: /\.js$/, 72 | exclude: /node_modules/, 73 | use: { 74 | loader: 'babel-loader' 75 | } 76 | } 77 | ] 78 | } 79 | }, 80 | webpackServer: { 81 | // noInfo: true // please don't spam the console when running in karma! 82 | } 83 | }); 84 | }; 85 | -------------------------------------------------------------------------------- /libraries/lit/karma.conf.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2017 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | var webpack = require('webpack'); 19 | var path = require('path'); 20 | 21 | module.exports = function(config) { 22 | config.set({ 23 | plugins: [ 24 | 'karma-chrome-launcher', 25 | 'karma-firefox-launcher', 26 | require(path.resolve(__dirname, '../__shared__/karma-plugins/karma-mocha')), 27 | 'karma-sourcemap-loader', 28 | 'karma-webpack', 29 | require(path.resolve(__dirname, '../__shared__/karma-plugins/karma-custom-html-reporter')), 30 | require(path.resolve(__dirname, '../__shared__/karma-plugins/karma-custom-json-reporter')) 31 | ], 32 | browsers: ['ChromeHeadless', 'FirefoxHeadless'], // run in Chrome and Firefox 33 | customLaunchers: { 34 | FirefoxHeadless: { 35 | base: 'Firefox', 36 | flags: [ '-headless' ], 37 | displayName: 'FirefoxHeadless' 38 | }, 39 | }, 40 | singleRun: true, // set this to false to leave the browser open 41 | frameworks: ['mocha'], // use the mocha test framework 42 | files: [ 43 | 'tests.webpack.js' // just load this file 44 | ], 45 | preprocessors: { 46 | 'tests.webpack.js': ['webpack', 'sourcemap'] // preprocess with webpack and our sourcemap loader 47 | }, 48 | reporters: ['dots', 'custom-html', 'custom-json'], // report results in these formats 49 | htmlReporter: { 50 | outputFile: path.resolve(__dirname, './results/results.html'), 51 | pageTitle: 'Lit Element + Custom Elements', 52 | groupSuites: true, 53 | useCompactStyle: true 54 | }, 55 | jsonResultReporter: { 56 | outputFile: path.resolve(__dirname, './results/results.json') 57 | }, 58 | webpack: { // kind of a copy of your webpack config 59 | mode: 'development', 60 | // devtool: 'inline-source-map', // just do inline source maps instead of the default 61 | resolve: { 62 | modules: [ 63 | path.resolve(__dirname, '../__shared__/webcomponents/src'), 64 | path.resolve(__dirname, './node_modules'), 65 | path.resolve(__dirname, '../../node_modules'), 66 | ] 67 | }, 68 | module: { 69 | rules: [ 70 | { 71 | test: /\.js$/, 72 | exclude: /node_modules/, 73 | use: { 74 | loader: 'babel-loader' 75 | } 76 | } 77 | ] 78 | } 79 | }, 80 | webpackServer: { 81 | // noInfo: true // please don't spam the console when running in karma! 82 | } 83 | }); 84 | }; 85 | -------------------------------------------------------------------------------- /libraries/mithril/karma.conf.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2017 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | var webpack = require('webpack'); 19 | var path = require('path'); 20 | 21 | module.exports = function(config) { 22 | config.set({ 23 | plugins: [ 24 | 'karma-chrome-launcher', 25 | 'karma-firefox-launcher', 26 | require(path.resolve(__dirname, '../__shared__/karma-plugins/karma-mocha')), 27 | 'karma-sourcemap-loader', 28 | 'karma-webpack', 29 | require(path.resolve(__dirname, '../__shared__/karma-plugins/karma-custom-html-reporter')), 30 | require(path.resolve(__dirname, '../__shared__/karma-plugins/karma-custom-json-reporter')) 31 | ], 32 | browsers: ['ChromeHeadless', 'FirefoxHeadless'], // run in Chrome and Firefox 33 | customLaunchers: { 34 | FirefoxHeadless: { 35 | base: 'Firefox', 36 | flags: [ '-headless' ], 37 | displayName: 'FirefoxHeadless' 38 | }, 39 | }, 40 | singleRun: true, // set this to false to leave the browser open 41 | frameworks: ['mocha'], // use the mocha test framework 42 | files: [ 43 | 'tests.webpack.js' // just load this file 44 | ], 45 | preprocessors: { 46 | 'tests.webpack.js': ['webpack', 'sourcemap'] // preprocess with webpack and our sourcemap loader 47 | }, 48 | reporters: ['dots', 'custom-html', 'custom-json'], // report results in these formats 49 | htmlReporter: { 50 | outputFile: path.resolve(__dirname, './results/results.html'), 51 | pageTitle: 'Mithril + Custom Elements', 52 | groupSuites: true, 53 | useCompactStyle: true 54 | }, 55 | jsonResultReporter: { 56 | outputFile: path.resolve(__dirname, './results/results.json') 57 | }, 58 | webpack: { // kind of a copy of your webpack config 59 | mode: 'development', 60 | // devtool: 'inline-source-map', // just do inline source maps instead of the default 61 | resolve: { 62 | modules: [ 63 | path.resolve(__dirname, '../__shared__/webcomponents/src'), 64 | path.resolve(__dirname, './node_modules'), 65 | path.resolve(__dirname, '../../node_modules'), 66 | ] 67 | }, 68 | module: { 69 | rules: [ 70 | { 71 | test: /\.js$/, 72 | exclude: /node_modules/, 73 | use: { 74 | loader: 'babel-loader' 75 | } 76 | } 77 | ] 78 | } 79 | }, 80 | webpackServer: { 81 | // noInfo: true // please don't spam the console when running in karma! 82 | } 83 | }); 84 | }; 85 | -------------------------------------------------------------------------------- /libraries/preact/karma.conf.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2017 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | var webpack = require('webpack'); 19 | var path = require('path'); 20 | 21 | module.exports = function(config) { 22 | config.set({ 23 | plugins: [ 24 | 'karma-chrome-launcher', 25 | 'karma-firefox-launcher', 26 | require(path.resolve(__dirname, '../__shared__/karma-plugins/karma-mocha')), 27 | 'karma-sourcemap-loader', 28 | 'karma-webpack', 29 | require(path.resolve(__dirname, '../__shared__/karma-plugins/karma-custom-html-reporter')), 30 | require(path.resolve(__dirname, '../__shared__/karma-plugins/karma-custom-json-reporter')) 31 | ], 32 | browsers: ['ChromeHeadless', 'FirefoxHeadless'], // run in Chrome and Firefox 33 | customLaunchers: { 34 | FirefoxHeadless: { 35 | base: 'Firefox', 36 | flags: [ '-headless' ], 37 | displayName: 'FirefoxHeadless' 38 | }, 39 | }, 40 | singleRun: true, // set this to false to leave the browser open 41 | frameworks: ['mocha'], // use the mocha test framework 42 | files: [ 43 | 'tests.webpack.js' // just load this file 44 | ], 45 | preprocessors: { 46 | 'tests.webpack.js': ['webpack', 'sourcemap'] // preprocess with webpack and our sourcemap loader 47 | }, 48 | reporters: ['dots', 'custom-html', 'custom-json'], // report results in these formats 49 | htmlReporter: { 50 | outputFile: path.resolve(__dirname, './results/results.html'), 51 | pageTitle: 'Preact + Custom Elements', 52 | groupSuites: true, 53 | useCompactStyle: true 54 | }, 55 | jsonResultReporter: { 56 | outputFile: path.resolve(__dirname, './results/results.json') 57 | }, 58 | webpack: { // kind of a copy of your webpack config 59 | mode: 'development', 60 | // devtool: 'inline-source-map', // just do inline source maps instead of the default 61 | resolve: { 62 | modules: [ 63 | path.resolve(__dirname, '../__shared__/webcomponents/src'), 64 | path.resolve(__dirname, './node_modules'), 65 | path.resolve(__dirname, '../../node_modules'), 66 | ] 67 | }, 68 | module: { 69 | rules: [ 70 | { 71 | test: /\.js$/, 72 | exclude: /node_modules/, 73 | use: { 74 | loader: 'babel-loader' 75 | } 76 | } 77 | ] 78 | } 79 | }, 80 | webpackServer: { 81 | // noInfo: true // please don't spam the console when running in karma! 82 | } 83 | }); 84 | }; 85 | -------------------------------------------------------------------------------- /libraries/react/karma.conf.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2017 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | var webpack = require('webpack'); 19 | var path = require('path'); 20 | 21 | module.exports = function(config) { 22 | config.set({ 23 | plugins: [ 24 | 'karma-chrome-launcher', 25 | 'karma-firefox-launcher', 26 | require(path.resolve(__dirname, '../__shared__/karma-plugins/karma-mocha')), 27 | 'karma-sourcemap-loader', 28 | 'karma-webpack', 29 | require(path.resolve(__dirname, '../__shared__/karma-plugins/karma-custom-html-reporter')), 30 | require(path.resolve(__dirname, '../__shared__/karma-plugins/karma-custom-json-reporter')) 31 | ], 32 | browsers: ['ChromeHeadless', 'FirefoxHeadless'], // run in Chrome and Firefox 33 | customLaunchers: { 34 | FirefoxHeadless: { 35 | base: 'Firefox', 36 | flags: [ '-headless' ], 37 | displayName: 'FirefoxHeadless' 38 | }, 39 | }, 40 | singleRun: true, // set this to false to leave the browser open 41 | frameworks: ['mocha'], // use the mocha test framework 42 | files: [ 43 | 'tests.webpack.js' // just load this file 44 | ], 45 | preprocessors: { 46 | 'tests.webpack.js': ['webpack', 'sourcemap'] // preprocess with webpack and our sourcemap loader 47 | }, 48 | reporters: ['dots', 'custom-html', 'custom-json'], // report results in these formats 49 | htmlReporter: { 50 | outputFile: path.resolve(__dirname, './results/results.html'), 51 | pageTitle: 'React + Custom Elements', 52 | groupSuites: true, 53 | useCompactStyle: true 54 | }, 55 | jsonResultReporter: { 56 | outputFile: path.resolve(__dirname, './results/results.json') 57 | }, 58 | webpack: { // kind of a copy of your webpack config 59 | mode: 'development', 60 | // devtool: 'inline-source-map', // just do inline source maps instead of the default 61 | resolve: { 62 | modules: [ 63 | path.resolve(__dirname, '../__shared__/webcomponents/src'), 64 | path.resolve(__dirname, './node_modules'), 65 | path.resolve(__dirname, '../../node_modules'), 66 | ] 67 | }, 68 | module: { 69 | rules: [ 70 | { 71 | test: /\.js$/, 72 | exclude: /node_modules/, 73 | use: { 74 | loader: 'babel-loader' 75 | } 76 | } 77 | ] 78 | } 79 | }, 80 | webpackServer: { 81 | // noInfo: true // please don't spam the console when running in karma! 82 | } 83 | }); 84 | }; 85 | -------------------------------------------------------------------------------- /libraries/hyperhtml/karma.conf.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2017 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | var webpack = require('webpack'); 19 | var path = require('path'); 20 | 21 | module.exports = function(config) { 22 | config.set({ 23 | plugins: [ 24 | 'karma-chrome-launcher', 25 | 'karma-firefox-launcher', 26 | require(path.resolve(__dirname, '../__shared__/karma-plugins/karma-mocha')), 27 | 'karma-sourcemap-loader', 28 | 'karma-webpack', 29 | require(path.resolve(__dirname, '../__shared__/karma-plugins/karma-custom-html-reporter')), 30 | require(path.resolve(__dirname, '../__shared__/karma-plugins/karma-custom-json-reporter')) 31 | ], 32 | browsers: ['ChromeHeadless', 'FirefoxHeadless'], // run in Chrome and Firefox 33 | customLaunchers: { 34 | FirefoxHeadless: { 35 | base: 'Firefox', 36 | flags: [ '-headless' ], 37 | displayName: 'FirefoxHeadless' 38 | }, 39 | }, 40 | singleRun: true, // set this to false to leave the browser open 41 | frameworks: ['mocha'], // use the mocha test framework 42 | files: [ 43 | 'tests.webpack.js' // just load this file 44 | ], 45 | preprocessors: { 46 | 'tests.webpack.js': ['webpack', 'sourcemap'] // preprocess with webpack and our sourcemap loader 47 | }, 48 | reporters: ['dots', 'custom-html', 'custom-json'], // report results in these formats 49 | htmlReporter: { 50 | outputFile: path.resolve(__dirname, './results/results.html'), 51 | pageTitle: 'hyperHTML + Custom Elements', 52 | groupSuites: true, 53 | useCompactStyle: true 54 | }, 55 | jsonResultReporter: { 56 | outputFile: path.resolve(__dirname, './results/results.json') 57 | }, 58 | webpack: { // kind of a copy of your webpack config 59 | mode: 'development', 60 | // devtool: 'inline-source-map', // just do inline source maps instead of the default 61 | resolve: { 62 | modules: [ 63 | path.resolve(__dirname, '../__shared__/webcomponents/src'), 64 | path.resolve(__dirname, './node_modules'), 65 | path.resolve(__dirname, '../../node_modules'), 66 | ] 67 | }, 68 | module: { 69 | rules: [ 70 | { 71 | test: /\.js$/, 72 | exclude: /node_modules/, 73 | use: { 74 | loader: 'babel-loader' 75 | } 76 | } 77 | ] 78 | } 79 | }, 80 | webpackServer: { 81 | // noInfo: true // please don't spam the console when running in karma! 82 | } 83 | }); 84 | }; 85 | -------------------------------------------------------------------------------- /libraries/angularjs/karma.conf.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2017 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | var webpack = require('webpack'); 19 | var path = require('path'); 20 | 21 | module.exports = function (config) { 22 | config.set({ 23 | plugins: [ 24 | 'karma-chrome-launcher', 25 | 'karma-firefox-launcher', 26 | require(path.resolve(__dirname, '../__shared__/karma-plugins/karma-mocha')), 27 | 'karma-sourcemap-loader', 28 | 'karma-webpack', 29 | require(path.resolve(__dirname, '../__shared__/karma-plugins/karma-custom-html-reporter')), 30 | require(path.resolve(__dirname, '../__shared__/karma-plugins/karma-custom-json-reporter')) 31 | ], 32 | browsers: ['ChromeHeadless', 'FirefoxHeadless'], // run in Chrome and Firefox 33 | customLaunchers: { 34 | FirefoxHeadless: { 35 | base: 'Firefox', 36 | flags: ['-headless'], 37 | displayName: 'FirefoxHeadless' 38 | }, 39 | }, 40 | singleRun: true, // set this to false to leave the browser open 41 | frameworks: ['mocha'], // use the mocha test framework 42 | files: [ 43 | 'tests.webpack.js' 44 | ], 45 | preprocessors: { 46 | 'tests.webpack.js': ['webpack', 'sourcemap'] // preprocess with webpack and our sourcemap loader 47 | }, 48 | reporters: ['dots', 'custom-html', 'custom-json'], // report results in these formats 49 | htmlReporter: { 50 | outputFile: path.resolve(__dirname, './results/results.html'), 51 | pageTitle: 'AngularJS', 52 | groupSuites: true, 53 | useCompactStyle: true 54 | }, 55 | jsonResultReporter: { 56 | outputFile: path.resolve(__dirname, './results/results.json') 57 | }, 58 | webpack: { // kind of a copy of your webpack config 59 | mode: 'development', 60 | devtool: 'inline-source-map', // just do inline source maps instead of the default 61 | resolve: { 62 | extensions: ['.js'], 63 | modules: [ 64 | path.resolve(__dirname, '../__shared__/webcomponents/src'), 65 | path.resolve(__dirname, './node_modules'), 66 | path.resolve(__dirname, '../../node_modules'), 67 | ] 68 | }, 69 | module: { 70 | rules: [ 71 | // Support for .js files. 72 | { 73 | test: /\.js$/, 74 | use: ['babel-loader'], 75 | exclude: /node_modules/ 76 | }, 77 | ] 78 | }, 79 | plugins: [ 80 | ] 81 | }, 82 | webpackServer: { 83 | // noInfo: true // please don't spam the console when running in karma! 84 | } 85 | }); 86 | }; 87 | -------------------------------------------------------------------------------- /libraries/lwc/karma.conf.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2017 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | const path = require('path'); 19 | const LwcWebpackPlugin = require('lwc-webpack-plugin'); 20 | 21 | module.exports = function(config) { 22 | config.set({ 23 | plugins: [ 24 | 'karma-chrome-launcher', 25 | 'karma-firefox-launcher', 26 | require(path.resolve(__dirname, '../__shared__/karma-plugins/karma-mocha')), 27 | 'karma-sourcemap-loader', 28 | 'karma-webpack', 29 | require(path.resolve(__dirname, '../__shared__/karma-plugins/karma-custom-html-reporter')), 30 | require(path.resolve(__dirname, '../__shared__/karma-plugins/karma-custom-json-reporter')) 31 | ], 32 | browsers: ['ChromeHeadless', 'FirefoxHeadless'], // run in Chrome and Firefox 33 | customLaunchers: { 34 | FirefoxHeadless: { 35 | base: 'Firefox', 36 | flags: [ '-headless' ], 37 | displayName: 'FirefoxHeadless' 38 | }, 39 | }, 40 | singleRun: true, // set this to false to leave the browser open 41 | frameworks: ['mocha'], // use the mocha test framework 42 | files: [ 43 | 'tests.webpack.js' // just load this file 44 | ], 45 | preprocessors: { 46 | 'tests.webpack.js': ['webpack', 'sourcemap'] // preprocess with webpack and our sourcemap loader 47 | }, 48 | reporters: ['dots', 'custom-html', 'custom-json'], // report results in these formats 49 | htmlReporter: { 50 | outputFile: path.resolve(__dirname, './results/results.html'), 51 | pageTitle: 'LWC + Custom Elements', 52 | groupSuites: true, 53 | useCompactStyle: true 54 | }, 55 | jsonResultReporter: { 56 | outputFile: path.resolve(__dirname, './results/results.json') 57 | }, 58 | webpack: { // kind of a copy of your webpack config 59 | mode: 'development', 60 | // devtool: 'inline-source-map', // just do inline source maps instead of the default 61 | resolve: { 62 | modules: [ 63 | path.resolve(__dirname, '../__shared__/webcomponents/src'), 64 | path.resolve(__dirname, './node_modules'), 65 | path.resolve(__dirname, '../../node_modules'), 66 | ] 67 | }, 68 | plugins: [ 69 | new LwcWebpackPlugin({ 70 | modules: [ 71 | { dir: "src/modules" } 72 | ] 73 | }) 74 | ], 75 | module: { 76 | rules: [ 77 | { 78 | test: /\.js$/, 79 | exclude: /node_modules/, 80 | use: { 81 | loader: 'babel-loader' 82 | } 83 | } 84 | ] 85 | } 86 | } 87 | }); 88 | }; 89 | -------------------------------------------------------------------------------- /libraries/hyperapp/karma.conf.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2017 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | var webpack = require("webpack"); 19 | var path = require("path"); 20 | 21 | module.exports = function (config) { 22 | config.set({ 23 | plugins: [ 24 | "karma-chrome-launcher", 25 | "karma-firefox-launcher", 26 | require(path.resolve( 27 | __dirname, 28 | "../__shared__/karma-plugins/karma-mocha" 29 | )), 30 | "karma-sourcemap-loader", 31 | "karma-webpack", 32 | require(path.resolve( 33 | __dirname, 34 | "../__shared__/karma-plugins/karma-custom-html-reporter" 35 | )), 36 | require(path.resolve( 37 | __dirname, 38 | "../__shared__/karma-plugins/karma-custom-json-reporter" 39 | )) 40 | ], 41 | browsers: ["ChromeHeadless", "FirefoxHeadless"], // run in Chrome and Firefox 42 | customLaunchers: { 43 | FirefoxHeadless: { 44 | base: "Firefox", 45 | flags: ["-headless"], 46 | displayName: "FirefoxHeadless" 47 | } 48 | }, 49 | singleRun: true, // set this to false to leave the browser open 50 | frameworks: ["mocha"], // use the mocha test framework 51 | files: [ 52 | "tests.webpack.js" // just load this file 53 | ], 54 | preprocessors: { 55 | "tests.webpack.js": ["webpack", "sourcemap"] // preprocess with webpack and our sourcemap loader 56 | }, 57 | reporters: ["dots", "custom-html", "custom-json"], // report results in these formats 58 | htmlReporter: { 59 | outputFile: path.resolve(__dirname, "./results/results.html"), 60 | pageTitle: "Hyperapp + Custom Elements", 61 | groupSuites: true, 62 | useCompactStyle: true 63 | }, 64 | jsonResultReporter: { 65 | outputFile: path.resolve(__dirname, "./results/results.json") 66 | }, 67 | webpack: { 68 | // kind of a copy of your webpack config 69 | mode: "development", 70 | // devtool: 'inline-source-map', // just do inline source maps instead of the default 71 | resolve: { 72 | modules: [ 73 | path.resolve(__dirname, "../__shared__/webcomponents/src"), 74 | path.resolve(__dirname, "./node_modules"), 75 | path.resolve(__dirname, '../../node_modules'), 76 | ] 77 | }, 78 | module: { 79 | rules: [ 80 | { 81 | test: /\.js$/, 82 | exclude: /node_modules/, 83 | use: { 84 | loader: "babel-loader" 85 | } 86 | } 87 | ] 88 | } 89 | }, 90 | webpackServer: { 91 | // noInfo: true // please don't spam the console when running in karma! 92 | } 93 | }); 94 | }; 95 | -------------------------------------------------------------------------------- /libraries/stencil/karma.conf.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2017 Google Inc. All rights reserved. 4 | * 5 | * Licensed under the Apache License, Version 2.0 (the "License"); 6 | * you may not use this file except in compliance with the License. 7 | * You may obtain a copy of the License at 8 | * 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | 18 | var webpack = require("webpack"); 19 | var path = require("path"); 20 | 21 | module.exports = function(config) { 22 | config.set({ 23 | plugins: [ 24 | "karma-chrome-launcher", 25 | "karma-firefox-launcher", 26 | require(path.resolve( 27 | __dirname, 28 | "../__shared__/karma-plugins/karma-mocha" 29 | )), 30 | "karma-sourcemap-loader", 31 | "karma-webpack", 32 | require(path.resolve( 33 | __dirname, 34 | "../__shared__/karma-plugins/karma-custom-html-reporter" 35 | )), 36 | require(path.resolve( 37 | __dirname, 38 | "../__shared__/karma-plugins/karma-custom-json-reporter" 39 | )) 40 | ], 41 | browsers: ["ChromeHeadless", "FirefoxHeadless"], // run in Chrome and Firefox 42 | customLaunchers: { 43 | FirefoxHeadless: { 44 | base: "Firefox", 45 | flags: ["-headless"], 46 | displayName: "FirefoxHeadless" 47 | } 48 | }, 49 | singleRun: true, // set this to false to leave the browser open 50 | frameworks: ["mocha"], // use the mocha test framework 51 | files: [ 52 | "tests.webpack.js" // just load this file 53 | ], 54 | preprocessors: { 55 | "tests.webpack.js": ["webpack", "sourcemap"] // preprocess with webpack and our sourcemap loader 56 | }, 57 | reporters: ["dots", "custom-html", "custom-json"], // report results in these formats 58 | htmlReporter: { 59 | outputFile: path.resolve(__dirname, "./results/results.html"), 60 | pageTitle: "Stencil + Custom Elements", 61 | groupSuites: true, 62 | useCompactStyle: true 63 | }, 64 | jsonResultReporter: { 65 | outputFile: path.resolve(__dirname, "./results/results.json") 66 | }, 67 | webpack: { 68 | // kind of a copy of your webpack config 69 | mode: "development", 70 | // devtool: 'inline-source-map', // just do inline source maps instead of the default 71 | resolve: { 72 | modules: [ 73 | path.resolve(__dirname, "../__shared__/webcomponents/src"), 74 | path.resolve(__dirname, "./node_modules"), 75 | path.resolve(__dirname, '../../node_modules'), 76 | ] 77 | }, 78 | module: { 79 | rules: [ 80 | { 81 | test: /\.m?js$/, 82 | exclude: /node_modules/, 83 | use: { 84 | loader: "babel-loader", 85 | } 86 | } 87 | ] 88 | } 89 | }, 90 | webpackServer: { 91 | // noInfo: true // please don't spam the console when running in karma! 92 | } 93 | }); 94 | }; 95 | --------------------------------------------------------------------------------