{"id":28599837,"url":"https://github.com/zaichaopan/load-script","last_synced_at":"2025-07-19T04:03:24.631Z","repository":{"id":57170217,"uuid":"141659362","full_name":"zaichaopan/load-script","owner":"zaichaopan","description":"A helper for loading script and returning a promise","archived":false,"fork":false,"pushed_at":"2018-07-24T04:12:15.000Z","size":49,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-07T08:08:06.281Z","etag":null,"topics":["api","javascript","promise","script"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/zaichaopan.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":"2018-07-20T03:32:54.000Z","updated_at":"2018-11-26T21:44:33.000Z","dependencies_parsed_at":"2022-08-27T12:01:59.994Z","dependency_job_id":null,"html_url":"https://github.com/zaichaopan/load-script","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/zaichaopan/load-script","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zaichaopan%2Fload-script","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zaichaopan%2Fload-script/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zaichaopan%2Fload-script/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zaichaopan%2Fload-script/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zaichaopan","download_url":"https://codeload.github.com/zaichaopan/load-script/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zaichaopan%2Fload-script/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265887079,"owners_count":23844337,"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":["api","javascript","promise","script"],"created_at":"2025-06-11T13:38:29.266Z","updated_at":"2025-07-19T04:03:24.607Z","avatar_url":"https://github.com/zaichaopan.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Load Script\n\nLoad script into client side javascript and returns a promise\n\n## Usage\n\nThis thin helper can help you load scripts like [Google Map Api](https://developers.google.com/maps/documentation/javascript/tutorial), [Google OAuth Api](https://developers.google.com/api-client-library/javascript/samples/samples#authorizing-and-making-authorized-requests) to your client side javascript. So you don't have to specify a global callback in the script src which will get called after the script is fully loaded. It is inspired by [load-google-maps-api](https://github.com/yuanqing/load-google-maps-api).\n\n### Installation\n\n```bash\nnpm install --save @zaichaopan/load-script\n```\n\n### Import helper\n\n```js\nimport { load } from '@zaichaopan/load-script'\n\n```\n\nNow use method __load__ to load the script you want. This method takes an object as parameter. This object should contain 3 required properties.\n\n- __src__: a string to specify the script you want to load\n- __callbackName__: a string to specify the name that the script will use to look for callback function name when it finished loading\n- __resolve__: a string to specify the name of property that the script will assign the resolved value to.\n\nIf the script requires more parameters, like google map api requires key and libraries name. You can add assign them to a property called __params__, along with required properties: src, callbackName and resolve.\n\n### Examples\n\n#### Google Map Api\n\nTo use google map, you have to do\n\n__Before:__\n\n```html\n\u003cbody\u003e\n    \u003cdiv id=\"map\"\u003e\u003c/div\u003e\n    \u003cscript\u003e\n      var map;\n      function initMap() {\n        map = new google.maps.Map(//...);\n      }\n    \u003c/script\u003e\n    \u003cscript src=\"https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY\u0026callback=initMap\"\n    async defer\u003e\u003c/script\u003e\n  \u003c/body\u003e\n```\n\nIt sucks when you want to use it your individual React or Vue components. With this helper you can\n\n__After:__\n\n```js\nimport { load } from '@zaichaopan/load-script'\n\nlet map;\n\nload({\n    src: 'https://maps.googleapis.com/maps/api/js',\n    callbackName: 'callback',\n    resolve: 'google',\n    params: {\n     key: your_app_key,\n     libraries: 'places'\n    }\n}).then(google =\u003e {\n    map = new google.maps.map(//...)\n})\n```\n\n__Note__:\n\nAfter a script is loaded and resolve the value, the value will be cached. So it will not load the script twice.\n\n#### Google OAuth Api\n\n```js\nimport { load } from '@zaichaopan/load-script'\n\nlet gapi\n\nload({\n    src: 'https://apis.google.com/js/platform.js',\n    callbackName: 'onload',\n    resolve: 'gapi',\n}).then(googleGapi =\u003e {\n    gapi = googleGapi\n    //...\n})\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzaichaopan%2Fload-script","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzaichaopan%2Fload-script","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzaichaopan%2Fload-script/lists"}