{"id":13554540,"url":"https://github.com/webcomponents/custom-elements-everywhere","last_synced_at":"2025-05-14T15:06:36.019Z","repository":{"id":37270689,"uuid":"100636698","full_name":"webcomponents/custom-elements-everywhere","owner":"webcomponents","description":"Custom Element + Framework Interoperability Tests.","archived":false,"fork":false,"pushed_at":"2025-04-30T14:39:29.000Z","size":37791,"stargazers_count":1230,"open_issues_count":55,"forks_count":107,"subscribers_count":35,"default_branch":"main","last_synced_at":"2025-04-30T15:52:07.213Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://custom-elements-everywhere.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webcomponents.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-08-17T19:09:51.000Z","updated_at":"2025-04-30T14:35:17.000Z","dependencies_parsed_at":"2023-09-28T03:45:49.739Z","dependency_job_id":"9287a453-87eb-47f8-849d-9a9a4d860a26","html_url":"https://github.com/webcomponents/custom-elements-everywhere","commit_stats":{"total_commits":2290,"total_committers":44,"mean_commits":52.04545454545455,"dds":0.4231441048034934,"last_synced_commit":"93718b72d7674e63afdcf485aa9f4bcc663670d0"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webcomponents%2Fcustom-elements-everywhere","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webcomponents%2Fcustom-elements-everywhere/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webcomponents%2Fcustom-elements-everywhere/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webcomponents%2Fcustom-elements-everywhere/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webcomponents","download_url":"https://codeload.github.com/webcomponents/custom-elements-everywhere/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254169083,"owners_count":22026208,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T12:02:50.050Z","updated_at":"2025-05-14T15:06:35.963Z","avatar_url":"https://github.com/webcomponents.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","UI Components / UI Tools","others"],"sub_categories":[],"readme":"# Custom Elements Everywhere 🍻\n\n## What is this?\n\nKarma tests for each of the major frameworks to see how they handle working\nwith Custom Elements.\n\n[![Build Status](https://travis-ci.org/webcomponents/custom-elements-everywhere.svg?branch=master)](https://travis-ci.org/webcomponents/custom-elements-everywhere)\n[![Renovate enabled](https://img.shields.io/badge/renovate-enabled-brightgreen.svg)](https://renovateapp.com/)\n\n## Installation\n\nTo install all dependencies and build the site:\n\n```bash\n# Install all the things!\nnpm ci\n\n# Test all the things!\nnpm run build\n\n# Preview the site.\nnpm start\n```\n\n## Current List of [Libraries/Frameworks](https://github.com/webcomponents/custom-elements-everywhere/tree/master/libraries)\n\n- [Angular](https://github.com/webcomponents/custom-elements-everywhere/tree/master/libraries/angular)\n- [AngularJs](https://github.com/webcomponents/custom-elements-everywhere/tree/master/libraries/angularjs)\n- [Dio](https://github.com/webcomponents/custom-elements-everywhere/tree/master/libraries/dio)\n- [Dojo](https://github.com/webcomponents/custom-elements-everywhere/tree/master/libraries/dojo)\n- [Hybrids](https://github.com/webcomponents/custom-elements-everywhere/tree/master/libraries/hybrids)\n- [Hyperapp](https://github.com/webcomponents/custom-elements-everywhere/tree/master/libraries/hyperapp)\n- [HyperHTML](https://github.com/webcomponents/custom-elements-everywhere/tree/master/libraries/hyperhtml)\n- [Lit](https://github.com/webcomponents/custom-elements-everywhere/tree/master/libraries/lit)\n- [LWC](https://github.com/webcomponents/custom-elements-everywhere/tree/master/libraries/lwc)\n- [Mithril](https://github.com/webcomponents/custom-elements-everywhere/tree/master/libraries/mithril)\n- [Omi](https://github.com/webcomponents/custom-elements-everywhere/tree/master/libraries/omi)\n- [Polymer](https://github.com/webcomponents/custom-elements-everywhere/tree/master/libraries/polymer)\n- [Preact](https://github.com/webcomponents/custom-elements-everywhere/tree/master/libraries/preact)\n- [React](https://github.com/webcomponents/custom-elements-everywhere/tree/master/libraries/react)\n- [Riot.js](https://github.com/webcomponents/custom-elements-everywhere/tree/master/libraries/riot)\n- [Skate](https://github.com/webcomponents/custom-elements-everywhere/tree/master/libraries/skate)\n- [Solid](https://github.com/webcomponents/custom-elements-everywhere/tree/master/libraries/solid)\n- [Stencil](https://github.com/webcomponents/custom-elements-everywhere/tree/master/libraries/stencil)\n- [Surplus](https://github.com/webcomponents/custom-elements-everywhere/tree/master/libraries/surplus)\n- [Svelte](https://github.com/webcomponents/custom-elements-everywhere/tree/master/libraries/svelte)\n- [Vue](https://github.com/webcomponents/custom-elements-everywhere/tree/master/libraries/vue)\n\n## How do I add a library/framework to the project?\n\n### Step 1. Copy an existing example\n\nTests for each library/framework live in the `libraries/` directory. The easiest\nway to start is by copying the test directory from a project that is similar to\nyour own. For example, if the library you use is similar to React/Preact, you\nmight start by copying and renaming the `libraries/preact` directory.\n\nYour library structure should look like this:\n\n```\n├── .babelrc\n├── karma.conf.js\n├── meta\n│   ├── issues.json\n│   └── summary.md\n├── package-lock.json\n├── package.json\n├── src\n│   ├── advanced-tests.js\n|   ├── basic-tests.js\n│   └── components.js\n└── tests.webpack.js\n```\n\n#### package.json\n\nYour `package.json` should contain `build` and `test` npm scripts.\nThe `test` script is in charge of actually running karma.\nThe `test` script should set a variable, `LIBRARY_NAME`, that corresponds to\nyour library's npm package name. This is used during the build process to\ngrab the library's semver and publish it on the site.\n\nExample:\n\n```\n\"scripts\": {\n  \"test\": \"cross-env LIBRARY_NAME=@angular/core karma start\",\n  \"build\": \"npm run test\"\n},\n```\n\n#### karma.conf.js\n\nYour [Karma](https://karma-runner.github.io/1.0/index.html) configuration.\nIdeally you shouldn't need to change much in here. The config file uses\n[karma-webpack](https://github.com/webpack-contrib/karma-webpack), so there is\na `webpack` property where you can essentially write your `webpack.config.js`.\nYou'll need to change this property to tell it how to bundle your library.\n\n#### meta/\n\nThis directory contains `issues.json` where you list any open GitHub issues\nrelated to custom element support in your library. There is also a `summary.md`\nwhere you write a short description of how the library interacts with custom\nelements and any known quirks or gotchas.\n\n#### src/\n\nThis directory contains `components.js` where you create library/framework\ncomponents which try to communicate with custom elements. You then test these\ncomponents in `basic-tests.js` and `advanced-tests.js`. You'll want to use all\nof the assertions in the test files but update the actual test implementations\nto use your library's components.\n\nNote that all frameworks use the custom elements in the\n`/libraries/__shared__/webcomponents/` directory for tests.\n\n#### tests.webpack.js\n\nThis file is consumed by the test runner and tells it to import any files ending\nin `-test`. You probably won't need to change this file.\n\n### Step 2. Add `npm` scripts\n\nIn the root of the project you'll need to add a couple of `npm` scripts to make\nsure your library builds with the rest of the site. You should be able to copy\nan example from one of the other libraries.\n\n- In the root of the project, Add an `install-*` script to `package.json` and run it during the install script.\n- In the `libraries/[your library]/` director, update the `build` script in\n  `package.json` to include your library's name.\n\nThere's a test runner called `index.js` that lives in the root of the project.\nIt will detect when you've added a new folder to `libraries/` and attempt to\nrun that folder's build command.\n\n### Step 3. Run `update-goldens`\n\nIn the root of the project, run `npm run update-goldens`. This will generate\nan expectedResults.json file for your library's tests.\n\nThis way any change that results in a different summary score for any library\nshows up in code review, and any change that would accidentally change the\nsummary score will make the tests fail.\n\n## What kind of behavior do the tests assume?\n\n- The library/framework should be able to display elements that use shadow DOM,\n  insert children in them, and handle hiding and showing them.\n- The library/framework should be able to pass **primitive** data (strings,\n  numbers, booleans) to a custom element as either attributes or properties.\n- The library/framework should be able to pass **rich** data (objects, arrays)\n  to a custom element using properties.\n- The library/framework should be able to listen to DOM events from a custom\n  element. These DOM events could use any casing style.\n\n## How does the site get deployed/maintained?\n\nAny PR landed to the main branch will trigger an automatic publish to GitHub\npages.\n\n## License\n\nCopyright 2017 Google, Inc.\n\nLicensed under the [Apache License, Version 2.0](LICENSE) (the \"License\");\nyou may not use this file except in compliance with the License. You may\nobtain a copy of the License at\n\nhttp://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebcomponents%2Fcustom-elements-everywhere","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebcomponents%2Fcustom-elements-everywhere","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebcomponents%2Fcustom-elements-everywhere/lists"}