{"id":19354638,"url":"https://github.com/delete-agency/resource-loader","last_synced_at":"2025-02-24T11:17:51.140Z","repository":{"id":35111127,"uuid":"200227004","full_name":"Delete-Agency/resource-loader","owner":"Delete-Agency","description":"Dynamically load css and js files with ease","archived":false,"fork":false,"pushed_at":"2023-01-04T06:10:45.000Z","size":814,"stargazers_count":0,"open_issues_count":16,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-02-24T11:17:45.459Z","etag":null,"topics":["bundles","cassette","js","js-files","load","resources","webassets"],"latest_commit_sha":null,"homepage":"","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/Delete-Agency.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":"2019-08-02T11:58:54.000Z","updated_at":"2023-09-08T17:56:29.000Z","dependencies_parsed_at":"2023-01-15T14:02:38.906Z","dependency_job_id":null,"html_url":"https://github.com/Delete-Agency/resource-loader","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Delete-Agency%2Fresource-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Delete-Agency%2Fresource-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Delete-Agency%2Fresource-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Delete-Agency%2Fresource-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Delete-Agency","download_url":"https://codeload.github.com/Delete-Agency/resource-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240466792,"owners_count":19805862,"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":["bundles","cassette","js","js-files","load","resources","webassets"],"created_at":"2024-11-10T05:02:53.306Z","updated_at":"2025-02-24T11:17:51.121Z","avatar_url":"https://github.com/Delete-Agency.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Resource Loader\n\nResource Loader is a javascript library that helps dynamically load styles and js files to the page.\nThe main feature is that it loads resources only when they are not already included to the page.\nSo it makes sure none of the required resources will be duplicated.\n\n[Live Demo](https://delete-agency.github.io/resource-loader/)\n\n## Motivation\n\nThere is a popular approach in server-side languages with asset management \nwhen you can declare which css and js files your component or widget depends on.\nBasically you register a Bundle (essentially it's a collection of css and js files) and then reference to it in your view file (according MVC architecture).\nFor example: [Yii2](https://www.yiiframework.com/doc/guide/2.0/en/structure-assets), [ASP.NET MVC](https://docs.microsoft.com/en-us/aspnet/mvc/overview/performance/bundling-and-minification), [Cassette](http://getcassette.net/), [webassets](https://webassets.readthedocs.io/) and so on.\n\nThis approach is often part of performance optimization\nbecause it's always good for your users to download and execute only code that is needed for the particular page\n\nThis approach works well but becomes tricky when you want to load some html from the server without page refreshing (i.e asynchronously)\nIf that html can contain components that rely on additional css or js files which were't loaded to the page initially,\nyou have to load them first. \n\n## Installation\n\nUse the package manager [npm](https://docs.npmjs.com/about-npm/) for installation.\n\n```\n$ npm install @deleteagency/resource-loader\n```\n\n## Usage\n\n```js\nimport resourceLoader from  '@deleteagency/resource-loader';\n// an abstract function that can init your js components based on the data-attributes\nimport initComponents from  'init-components';\nconst element = document.getElementById('app');\n\n/**\n* Server response example:\n* {\n*     resources: [\"/accordion.css\", \"/accordion.js\", \"/buttons.css\"],\n*     html: `\n*         \u003cdiv data-accordion class=\"accordion\"\u003e\n*             \u003cbuttons class=\"accordion__trigger button button--green\" data-accordion-trigger\u003eOpen me\u003c/div\u003e\n*             \u003cdiv data-accordion-content\u003e\n*                  Nulla sodales interdum velit vitae luctus. Integer rutrum neque vel ultrices tincidunt. \n*                  Suspendisse ac risus scelerisque, iaculis nisl in, tristique est. \n*             \u003c/div\u003e\n*         \u003c/div\u003e\n*     `\n* }\n*/\nfetch(\"/get-some-markup\")\n    .then(({ data }) =\u003e {\n        const resourcesList = data.resources;\n        return resourceLoader.load(resourcesList).then(() =\u003e {\n            return data.html;\n        })\n    })\n    .then((html) =\u003e {\n        element.innerHTML = html;\n        initComponents(element);\n    })\n```\n\n## API\n\n### resourceLoader.loadResource(resourceUrl)\n\nReturns `Promise`.\n\nAdd specified resource to the page. \nReturned promise will be resolved once we understand that resource was already loaded \nor after we insert it into the page and then wait until loading is complete.\n\n#### resourceUrl\n\n*Required*\u003cbr\u003e\nType: `string`\n\nRelative or absolute URL of the resource that should be loaded\n\n### resourceLoader.load(resources)\n\nReturns `Promise`.\n\nAdd specified list of the resources to the page. \nReturn value is same as for loadResource method except it wait until all resource is loaded.\n\n#### resources\n\n*Required*\u003cbr\u003e\nType: `Array\u003cstring\u003e`\n\nAn array of relative or absolute URLs of the resources that should be loaded\n\n### resourceLoader.isResourceLoaded(resourceUrl)\n\nReturns `Boolean`.\n\nReturn if the specified resource was already loaded\n\n#### resourceUrl\n\n*Required*\u003cbr\u003e\nType: `string`\n\nRelative or absolute URL of the resource\n\n### resourceLoader.setDebug(debug = true)\n\nEnable (or disable) debug mode for logging messages during loadResource() or load() about how and why a particular resource is going to be loaded \n\n#### debug\n\n*Required*\u003cbr\u003e\nType: `string`\u003cbr\u003e\nDefault: `true`\n\nRelative or absolute URL of the resource\n\n## Note\nThere can be some cases when we can get stuck waiting for the loading of the particular resource forever after calling loadResource() or load().\nIt can happen when the desired resource is already rendered within the page and failed to load by the time we are trying to load them with resourceLoader.\nIt happens because we rely on window.performance (Performance Timing API) which is inconsistent between browsers at the moment: \nsome of the implementations (Safari, Chrome) don't add PerformanceResource entry when particular resource is failed to load (but they will in the future according to the issue above).\nMore details here: https://github.com/w3c/resource-timing/issues/12.\nAs a result we think that the resource is still loading and will be waiting forever because obviously load and error events are not gonna be triggered.\nThese cases aren't covered at the moment and will likely be fixed after browsers have consistent Performance Timing API implementation\n\n## License\n[MIT](https://choosealicense.com/licenses/mit/)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdelete-agency%2Fresource-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdelete-agency%2Fresource-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdelete-agency%2Fresource-loader/lists"}