beyonk-group / async-script-loader Goto Github PK
View Code? Open in Web Editor NEWAsynchronous script loading for SPAs
Asynchronous script loading for SPAs
In the README it says:
You pass a list of urls to the loader, along with a method for checking that your page is ready, and a callback to call when it is.
The method for checking if the page is ready seems to be actually the method that is checking if the library has loaded, for not loading it twice (the test method).
Is there a way for deferring the loading of the script only after the page has been completely loaded? This is useful for page load speed.
Very nice library, simple and useful - Thanks!
Hi, I'm considering to use svelte-google-analytics
(and subsequently async-script-loader
). The one thing that's holding me back is that github#beyonk-adventures/async-script-loader will load scripts into document.body
. Google recommends loading GTM inside <head>
.
What're your thoughts on this?
[freedom:~/m13/repo/xxx] sergio$ npm run dev
> [email protected] dev /Users/sergio/m13/repo/xxx
> sapper dev
✔ server (769ms)
✔ client (941ms)
/Users/sergio/m13/repo/xxx/node_modules/@beyonk/async-script-loader/index.js:1
export default function (url, test, callback, options = { async: true, defer: true }) {
^^^^^^
SyntaxError: Unexpected token 'export'
at wrapSafe (internal/modules/cjs/loader.js:1072:16)
at Module._compile (internal/modules/cjs/loader.js:1122:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
at Module.load (internal/modules/cjs/loader.js:1002:32)
at Function.Module._load (internal/modules/cjs/loader.js:901:14)
at Module.require (internal/modules/cjs/loader.js:1044:19)
at require (internal/modules/cjs/helpers.js:77:18)
at Object.<anonymous> (/Users/sergio/m13/repo/xxx/__sapper__/dev/server/server.js:10:30)
at Module._compile (internal/modules/cjs/loader.js:1158:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
> Server crashed
✔ service worker (22ms)
What have I done incorrectly?
I just copied https://github.com/beyonk-adventures/svelte-social-auth/blob/master/src/google-auth/GoogleAuth.svelte on my own folder and tried to execute once I installed this dependency
Amazing library, thanks!
A common use case with third-party libraries is they expect to have an id, something like
<script id="exampleScript123" src="https://example.com/somefile.js" async defer="defer"></script>
Sometimes data attributes are requested as well:
<script data-something="exampleData" src="https://example.com/somefile.js" async defer></script>
In these cases, I use svelte:head
, but it would be nice to have this use case handled by this great tool ... if you'd like a PR maybe I can do one up for you.
loader([
{ type: 'script', url, options: { id: "exampleScript123", data-something: "exampleData" } }
], test, callback)
Using your library in a SvelteKit project with Vite, I get the following warning:
@beyonk/async-script-loader doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module (i.e. it doesn't have "type": "module" or an .mjs extension for the entry point). Please contact the package author to fix.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.