{"id":18355446,"url":"https://github.com/charto/charto-polymer-shim","last_synced_at":"2025-04-10T01:37:31.152Z","repository":{"id":88491798,"uuid":"41494448","full_name":"charto/charto-polymer-shim","owner":"charto","description":null,"archived":false,"fork":false,"pushed_at":"2015-08-27T15:24:56.000Z","size":124,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-15T16:54:45.145Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/charto.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}},"created_at":"2015-08-27T15:18:12.000Z","updated_at":"2016-07-18T14:55:35.000Z","dependencies_parsed_at":"2023-02-27T09:40:58.676Z","dependency_job_id":null,"html_url":"https://github.com/charto/charto-polymer-shim","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/charto%2Fcharto-polymer-shim","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/charto%2Fcharto-polymer-shim/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/charto%2Fcharto-polymer-shim/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/charto%2Fcharto-polymer-shim/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/charto","download_url":"https://codeload.github.com/charto/charto-polymer-shim/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248141411,"owners_count":21054451,"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-11-05T22:06:57.081Z","updated_at":"2025-04-10T01:37:31.126Z","avatar_url":"https://github.com/charto.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"charto-polymer-shim\n===================\n\nThis is a shim for loading Web Components through SystemJS. [systemjs-plugin-html](https://github.com/Hypercubed/systemjs-plugin-html/) imports [webcomponents.js](http://webcomponents.org/polyfills/) asynchronously so if it's used to import Polymer, both load in parallel. Then when the `WebComponentsReady` event gets fired, Polymer may or may not be around yet to catch it.\n\nThis shim loads webcomponents.js first and catches the event. Then it imports HTML files sequentially and in parallel so all dependencies for a given import can be loaded before the import itself. When everything is done, the shim dispatches the event again, so Polymer and all other components know they should show themselves.\n\nThe only exposed function is `loadMainComponents`. Its parameter is a list of things to load sequentially. Each thing can be a string passed to `System.import` or a list of strings, in which case they're imported in parallel. Only after all parallel imports are ready, `loadMainComponents` moves on to the next sequential thing.\n\nAs an added bonus, there's a file `hide.css` which hides a `body` tag with the `unresolved` attribute, like `\u003cbody unresolved\u003e`. Polymer will hide it while loading and removes the attribute to show content only when it's initialized. However if Polymer is imported using SystemJS, the content will be visible while Polymer's stylesheets are still loading. Including `hide.css` in the page fixes that.\n\nExample\n-------\n\nThis is from the article [Taming Polymer with SystemJS and TypeScript, part 1](http://blog.charto.net/typescript/Taming-Polymer-with-SystemJS-and-TypeScript-part-1/).\n\n```javascript\nloadMainComponents([\n\t[\n\t\t'bower_components/polymer/polymer.html!',\n\t\t'bower_components/polymer-ts/polymer-ts.html!'\n\t],\n\t'app'\n]);\n```\n\nLicense\n-------\n\n[The MIT License](https://raw.githubusercontent.com/charto/charto-polymer-shim/master/LICENSE)\n\nCopyright (c) 2015 BusFaster Ltd\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcharto%2Fcharto-polymer-shim","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcharto%2Fcharto-polymer-shim","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcharto%2Fcharto-polymer-shim/lists"}