diff --git a/LICENSE.md b/LICENSE.md old mode 100755 new mode 100644 diff --git a/README.md b/README.md old mode 100755 new mode 100644 index af4796d..9150657 --- a/README.md +++ b/README.md @@ -1,30 +1,40 @@ # vue-plugin-load-script [![license](https://img.shields.io/github/license/tserkov/vue-plugin-load-script.svg)]() A Vue plugin for injecting remote scripts. +Compatible with Vue 3. + +For Vue 2, see [the master branch](/tserkov/vue-plugin-load-script/tree/master). + ## Install ``` bash # npm -npm install --save vue-plugin-load-script +npm install --save vue-plugin-load-script@^2.x.x ``` ``` bash # yarn -yarn add vue-plugin-load-script +yarn add vue-plugin-load-script@^2.x.x ``` -## Use - +If you're using the Options API: ```javascript - // In main.js - import LoadScript from 'vue-plugin-load-script'; + // main.js + import { createApp } from "vue"; + import LoadScript from "vue-plugin-load-script"; - Vue.use(LoadScript); + const app = createApp(App); + app.use(LoadScript); + + app.mount("#app"); ``` +## Use + ```javascript - // As a global method - Vue.loadScript("https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY") + // Composition API + import { loadScript } from "vue-plugin-load-script"; + loadScript("https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY") .then(() => { // Script is loaded, do something }) @@ -32,7 +42,7 @@ yarn add vue-plugin-load-script // Failed to fetch script }); - // As an instance method inside a component + // Options API this.$loadScript("https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY") .then(() => { // Script is loaded, do something @@ -42,12 +52,12 @@ yarn add vue-plugin-load-script }); ``` -:zap: __New in 1.2!__ -If you'd like to remove (unload) the script at any point, then call the companion method `$unloadScript` __with the same URL__. +If you'd like to remove (unload) the script at any point, then call the companion method `unloadScript` / `this.$unloadScript` __with the same URL__. ```javascript - // As a global method - Vue.unloadScript("https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY") + // Composition API + import { unloadScript } from "vue-plugin-load-script"; + unloadScript("https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY") .then(() => { // Script was unloaded successfully }) @@ -55,7 +65,7 @@ If you'd like to remove (unload) the script at any point, then call the companio // Script couldn't be found to unload; make sure it was loaded and that you passed the same URL }); - // As an instance method inside a component + // Options API this.$unloadScript("https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY") .then(() => { // Script was unloaded successfully @@ -64,4 +74,4 @@ If you'd like to remove (unload) the script at any point, then call the companio // Script couldn't be found to unload; make sure it was loaded and that you passed the same URL }); ``` -In most situations, you can just call `Vue.unloadScript`/`this.$unloadScript` and ignore the returned promise. +In most situations, you can just call `unloadScript` / `this.$unloadScript` and ignore the returned promise. diff --git a/index.d.ts b/index.d.ts new file mode 100644 index 0000000..2a8a891 --- /dev/null +++ b/index.d.ts @@ -0,0 +1,17 @@ +import Vue, { App } from "vue"; + +declare module "vue-plugin-load-script"; + +declare module "@vue/runtime-core" { + interface ComponentCustomProperties { + $loadScript: (src: string) => Promise; + $unloadScript: (src: string) => Promise; + } +} + +export default class LoadScript { + static install(app: App): void; +} + +export function loadScript(src: string): Promise; +export function unloadScript(src: string): Promise; diff --git a/index.js b/index.js old mode 100755 new mode 100644 index 0037461..61b52b8 --- a/index.js +++ b/index.js @@ -1,47 +1,53 @@ -const LoadScript = { - install: function (Vue) { - Vue.loadScript = Vue.prototype.$loadScript = function (src) { // eslint-disable-line no-param-reassign - return new Promise(function (resolve, reject) { - let shouldAppend = false; - let el = document.querySelector('script[src="' + src + '"]'); - if (!el) { - el = document.createElement('script'); - el.type = 'text/javascript'; - el.async = true; - el.src = src; - shouldAppend = true; - } - else if (el.hasAttribute('data-loaded')) { - resolve(el); - return; - } - - el.addEventListener('error', reject); - el.addEventListener('abort', reject); - el.addEventListener('load', function loadScriptHandler() { - el.setAttribute('data-loaded', true); - resolve(el); - }); - - if (shouldAppend) document.head.appendChild(el); - }); - }; - - Vue.unloadScript = Vue.prototype.$unloadScript = function (src) { // eslint-disable-line no-param-reassign - return new Promise(function (resolve, reject) { - const el = document.querySelector('script[src="' + src + '"]'); - - if (!el) { - reject(); - return; - } - - document.head.removeChild(el); - - resolve(); - }); - }; +function loadScript(src) { + // eslint-disable-line no-param-reassign + return new Promise(function (resolve, reject) { + let shouldAppend = false; + let el = document.querySelector('script[src="' + src + '"]'); + if (!el) { + el = document.createElement("script"); + el.type = "text/javascript"; + el.async = true; + el.src = src; + shouldAppend = true; + } else if (el.hasAttribute("data-loaded")) { + resolve(el); + return; + } + + el.addEventListener("error", reject); + el.addEventListener("abort", reject); + el.addEventListener("load", function loadScriptHandler() { + el.setAttribute("data-loaded", true); + resolve(el); + }); + + if (shouldAppend) document.head.appendChild(el); + }); +} + +function unloadScript(src) { + // eslint-disable-line no-param-reassign + return new Promise(function (resolve, reject) { + const el = document.querySelector('script[src="' + src + '"]'); + + if (!el) { + reject(); + return; + } + + document.head.removeChild(el); + + resolve(); + }); +} + +export { unloadScript, loadScript }; + +const plugin = { + install: function (app) { + app.config.globalProperties.$loadScript = loadScript; + app.config.globalProperties.$unloadScript = unloadScript; }, }; -export default LoadScript; +export default plugin; diff --git a/package.json b/package.json old mode 100755 new mode 100644 index 56d602c..1bdb1bb --- a/package.json +++ b/package.json @@ -1,9 +1,13 @@ { "name": "vue-plugin-load-script", - "version": "1.3.1", + "version": "2.1.1", "description": "A Vue plugin for injecting remote scripts", "main": "index.js", "repository": "https://github.com/tserkov/vue-plugin-load-script", "author": "tserkov ", - "license": "MIT" + "license": "MIT", + "typings": "types/index.d.ts", + "devDependencies": { + "vue": "^3.2.31" + } }