{"id":19856856,"url":"https://github.com/polymer/lazy-imports","last_synced_at":"2025-02-28T21:44:57.319Z","repository":{"id":57741453,"uuid":"68862072","full_name":"Polymer/lazy-imports","owner":"Polymer","description":"Declarative lazy HTML imports as a behavior.","archived":false,"fork":false,"pushed_at":"2018-03-09T18:54:40.000Z","size":56,"stargazers_count":62,"open_issues_count":2,"forks_count":11,"subscribers_count":42,"default_branch":"master","last_synced_at":"2024-03-15T07:00:58.509Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Polymer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-09-21T22:15:00.000Z","updated_at":"2020-05-14T19:28:48.000Z","dependencies_parsed_at":"2022-09-09T06:02:25.538Z","dependency_job_id":null,"html_url":"https://github.com/Polymer/lazy-imports","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Polymer%2Flazy-imports","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Polymer%2Flazy-imports/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Polymer%2Flazy-imports/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Polymer%2Flazy-imports/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Polymer","download_url":"https://codeload.github.com/Polymer/lazy-imports/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241246094,"owners_count":19933298,"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-12T14:16:47.454Z","updated_at":"2025-02-28T21:44:57.289Z","avatar_url":"https://github.com/Polymer.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Build Status](https://travis-ci.org/Polymer/lazy-imports.svg?branch=master)](https://travis-ci.org/Polymer/lazy-imports)\n\n# \\\u003clink rel=\"lazy-import\"\\\u003e\n\nThis repo implements declarative, lazy, HTML Imports.\n\nNormal HTML Imports are eager, meaning that they are loaded and evaluated in order first, before any code that follows. You can get a large performance improvement by lazily loading code at runtime, so that you only load the minimal amount of code needed to display the current view. This is a key piece of [the PRPL pattern](https://developers.google.com/web/fundamentals/performance/prpl-pattern/).\n\nTo do lazy loading of your HTML you can use javascript APIs like [`Polymer.importHref`](https://www.polymer-project.org/2.0/docs/api/#function-Polymer.importHref). What this repo adds to that is a _declarative_ way to describe the resources that you will import lazily, and a method for loading them. Because this kind of lazy import is declarative, the [polymer analyzer](https://github.com/Polymer/polymer-analyzer), [polymer linter](https://github.com/Polymer/polymer-linter), and [polymer bundler](https://github.com/Polymer/polymer-bundler) all understand them, giving you accurate lint warnings and sharded bundling without any configuration needed, just your source code.\n\nTo use lazy imports, write an HTML import as usual, except:\n\n  1) give it a `rel` attribute of `lazy-import` instead of `import`\n  2) give each import a `group`  attribute; you'll use this as a key later\n  3) put the lazy import inside the `\u003cdom-module\u003e` of your element, but outside of its `\u003ctemplate\u003e`.\n\nThen apply the `LazyImportsMixin` mixin (or `LazyImportsBehavior`) to your element and call the `this.importLazyGroup('group-name')` method when you want to load code for that group, e.g. when the user navigates to a new page in your app. The `importLazyGroup` method returns a Promise that resolves once the imports have finished loading and executing.\n\n## Changes in 2.0\nA promise polyfill is not included by default but is necessary if running with webcomponents v0 polyfill (`webcomponents/webcomponentsjs#^0.7`). In webcomponents v1 polyfill (`webcomponents/webcomponentsjs#^1.0`), a promise polyfill is conditionally loaded using the `webcomponents-loader.js` or always loaded with `webcomponents-lite.js`. If you are looking for a promise polyfill, you can take a look at [promise-polyfill](https://github.com/PolymerLabs/promise-polyfill) or [es6-promise](https://github.com/stefanpenner/es6-promise)\n\n## Examples\n\n### Polymer 2.0 – LazyImportsMixin\n\n```html\n\u003clink rel=\"import\" href=\"../../polymer/polymer-element.html\"\u003e\n\u003clink rel=\"import\" href=\"../lazy-imports-mixin.html\"\u003e\n\n\u003cdom-module id=\"upgrade-button\"\u003e\n  \u003clink rel=\"lazy-import\" group=\"lazy\" href=\"lazy-element.html\"\u003e\n  \u003ctemplate\u003e\n    \u003cbutton on-click=\"buttonPressed\"\u003eUpgrade Element\u003c/button\u003e\n    \u003clazy-element\u003eWhen upgraded, this element will have a red border\u003c/lazy-element\u003e\n  \u003c/template\u003e\n  \u003cscript\u003e\n    class UpgradeButton extends Polymer.LazyImportsMixin(Polymer.Element) {\n      static get is() { return 'upgrade-button'; }\n      buttonPressed() {\n        this.importLazyGroup('lazy').then((results) =\u003e {\n          console.log(results);\n          this.dispatchEvent(new CustomEvent('import-loaded', results));\n        });\n      }\n    }\n    customElements.define(UpgradeButton.is, UpgradeButton);\n  \u003c/script\u003e\n\u003c/dom-module\u003e\n```\n\n### Polymer 1.0 and Polymer 2.0 Hybrid – LazyImportsBehavior\n\n```html\n\u003clink rel=\"import\" href=\"../../polymer/polymer.html\"\u003e\n\u003clink rel=\"import\" href=\"../lazy-imports-behavior.html\"\u003e\n\n\u003cdom-module id=\"upgrade-button\"\u003e\n  \u003clink rel=\"lazy-import\" group=\"lazy\" href=\"lazy-element.html\"\u003e\n  \u003ctemplate\u003e\n    \u003cbutton on-click=\"buttonPressed\"\u003eUpgrade Element\u003c/button\u003e\n    \u003clazy-element id=\"lazy\"\u003eWhen upgraded, this element will have a red border\u003c/lazy-element\u003e\n  \u003c/template\u003e\n  \u003cscript\u003e\n    Polymer({\n      is: 'upgrade-button',\n      behaviors: [Polymer.LazyImportsBehavior],\n      buttonPressed: function() {\n        this.importLazyGroup('lazy').then(function(results) {\n          console.log(results);\n          this.fire('import-loaded', results);\n        }.bind(this));\n      }\n    });\n  \u003c/script\u003e\n\u003c/dom-module\u003e\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpolymer%2Flazy-imports","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpolymer%2Flazy-imports","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpolymer%2Flazy-imports/lists"}