{"id":21348626,"url":"https://github.com/nswdpc/silverstripe-async-loader","last_synced_at":"2025-03-16T04:19:10.171Z","repository":{"id":57029049,"uuid":"144246551","full_name":"nswdpc/silverstripe-async-loader","owner":"nswdpc","description":"An asynchronous assets loader for Silverstripe 4 using loadjs. This is somewhat experimental with work being undertaken in the feature-refactor branch.","archived":false,"fork":false,"pushed_at":"2020-09-10T23:01:06.000Z","size":22,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-22T16:47:47.907Z","etag":null,"topics":["async","loadjs","requirements"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nswdpc.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":"2018-08-10T06:34:17.000Z","updated_at":"2020-10-14T23:57:29.000Z","dependencies_parsed_at":"2022-08-23T17:41:05.215Z","dependency_job_id":null,"html_url":"https://github.com/nswdpc/silverstripe-async-loader","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nswdpc%2Fsilverstripe-async-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nswdpc%2Fsilverstripe-async-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nswdpc%2Fsilverstripe-async-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nswdpc%2Fsilverstripe-async-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nswdpc","download_url":"https://codeload.github.com/nswdpc/silverstripe-async-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243822945,"owners_count":20353578,"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":["async","loadjs","requirements"],"created_at":"2024-11-22T02:23:52.293Z","updated_at":"2025-03-16T04:19:10.154Z","avatar_url":"https://github.com/nswdpc.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Async Requirements Loader\n\nThis module provides a backend to load requirements asynchronously using [loadjs](https://github.com/muicss/loadjs)\n\nThe goal is to make requirements loading light without blocking page load and to support the separation of critical and non-critical requirements.\n\n\u003e loadjs itself is loaded as an inline script within the page\n\nSupports Silverstripe 4.0+\n\n## Usage example\n```\nuse SilverStripe\\View\\Requirements;\nuse NSWDPC\\AsyncLoader\\Backend as AsyncRequirementsBackend;\n```\n\n```\n$backend = new AsyncRequirementsBackend();\nRequirements::set_backend($backend);\n\n// load requirements in the default bundle (blocking)\nRequirements::javascript('path/to/some/requirement.js');\nRequirements::javascript('https://example.com/lib_depending_on_requirement.js');\nRequirements::javascript('//example.com/load_over_current_protocol.js');\n\n// block requirements as usual\nRequirements::block('/something_you_want_to_block.js');\n\n// create a specific bundle\n$backend-\u003ebundle('fontawesome', ['https://use.fontawesome.com/fa_code.js']);\n```\n\n## Bundles\n\nloadjs uses dependency 'bundles' to manage loading of scripts.\n\n### Default requirements bundle\nFor backwards compatibility scripts loaded via ```Requirements::javascript``` are loaded by loadjs in series and assigned to the bundle 'requirements_bundle'\n\n\u003e See [Section 3](https://github.com/muicss/loadjs#documentation) of the loadjs documentation\n\nOnce all scripts are loaded, a callback ```loadjs_ready_requirements_bundle``` is fired and dispatches a DOM event ```load_requirements_bundle```\n\nCustom scripts that require a script to be loaded prior to firing can listen for this DOM event:\n```\ndocument.addEventListener('load_requirements_bundle', function(e) {\n\t// custom script\n}\n```\n\n### Specific bundles\n\nScripts that do not depend on anything loaded in a default bundle can be loaded in a non blocking way in their own bundle:\n```\n// load fontawesome\n$backend-\u003ebundle('fontawesome', ['https://use.fontawesome.com/fa_code.js']);\n```\n\nOptionally with a callback... if you need to do something after a bundle loads\n\u003e See [Section 1](https://github.com/muicss/loadjs#documentation) of the loadjs documentation\n\n```\n// load fontawesome\n$backend-\u003ebundle('fontawesome', ['https://use.fontawesome.com/fa_code.js'], \"console.log('fontawesome loaded!');\");\n```\n\nYou can include multiple scripts in the bundle\n\u003e See [Section 2](https://github.com/muicss/loadjs#documentation) of the loadjs documentation\n\n```\n// load one and two asynchronously (two.js may load before one.js)\n$backend-\u003ebundle('fontawesome', ['/script/one.js','/script/two.js']);\n```\n\n## CSS\n\nCSS requirements are loaded in blocking mode by default within the ```\u003chead\u003e``` tag.\n\nYou can alternatively load CSS in non-blocking mode via a backend bundle:\n```\n// load CSS without blocking\n$backend-\u003ebundle_css('css_bundle', ['path/to/style.css']);\n```\nBe aware that unless you load in styles that set up a basic/acceptable above-the-fold layout, you will most likely get a FOUC until stylesheets loaded this way are applied.\nIt's fast, but ugly.\n\n\u003e Refer to [Section 5](https://github.com/muicss/loadjs#documentation) of the loadjs documentation on CSS loading notes.\n\n## Page placement\n\nIf you wish, place the HTML comment ```\u003c!-- asyncloader_script_requirements_placeholder --\u003e``` in your page template where you would like JS requirements to be placed.\nThe backend will replace this comment with the JS requirements found. If you do not do this, the JS requirements will be loaded before the closing body tag.\n\n## Custom scripts\nIf you have custom scripts that assume a library is loaded, these will most likely fail unless they are run after their dependency loads.\nTo ensure that they run correctly, apply them in the relevant bundle callback or in an event listener for ```load_requirements_bundle```\n\n## Custom head tags\nThese are loaded prior to the closing head tag.\n\n## TODO\n* For non-critical CSS, support for 'lazy' loading of Requirements::css() placing a stylesheet ```\u003clink\u003e``` tag prior to the closing body tag.\n\n## Licences\n\nBSD 3-Clause\n\n* loadjs is licensed under the MIT license: https://github.com/muicss/loadjs/blob/master/LICENSE.txt\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnswdpc%2Fsilverstripe-async-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnswdpc%2Fsilverstripe-async-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnswdpc%2Fsilverstripe-async-loader/lists"}