kabirbaidhya / get-js

A lightweight library to asynchronously load scripts on the fly

get-js

A lightweight library to asynchronously load scripts on the fly.

Installation

# Using npm
$ npm install get-js --save

# Using Yarn
$ yarn add get-js

# Using Bower
$ bower install get-js --save

For older browsers you may also need a promise polyfill.

# Install promise polyfill.
$ npm install es6-promise

Usage

Use it in your project with require or import as an ES module.

const get = require('get-js');

// ES2015+
import get from 'get-js';

Or, using <script> tags:

<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/get.min.js"></script>

Here you go:

// Load a single script
get('https://code.jquery.com/jquery-3.4.1.min.js').then(function() {
  console.log('do something');
});

// Load multiple scripts, without changing the order
get(['/js/abc.js', '/js/xyz.js'])
  .then(function() {
    console.log('do something now');
  })
  .catch(function() {
    console.log('error');
  });

If you're using ES2015+ / TypeScript codebase, you can also use async / await syntax with get:

import get from 'get-js';

(async () => {
  await get('https://code.jquery.com/jquery-3.4.1.min.js'); // Gets jQuery.

  $(document).on('ready', () => {
    console.log('Ready!');
  });
})();

Using with Angular

Note: This refers to angular 1.x projects.

You can inject this in your angular code as a service.

Require the angular module using

const angularGetJs = require('get-js/angular');

Or

<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/angular-get.min.js"></script>

Then you should be able to use it like this:

// Add the module as a dependency in your app.
angular.module('app', ['angularGetJs']);

// Inject the service
angular.module('app').controller('MyController', [
  'get',
  function(get) {
    get('/some/script.js')
      .then(function() {
        console.log('do something now');
      })
      .catch(function() {
        console.log('error');
      });
  }
]);

Development

To start developing or contributing to get-js, you'll need to clone the project first.

1. Clone it locally.

   $ git clone [email protected]:kabirbaidhya/get-js.git
   

2. Install dependencies.

   $ yarn
   

3. Linting

   $ yarn lint
   

4. Generating a build.

   $ yarn build
   

License

This package is licensed under the MIT License.

get-js's Issues

Setup unit tests, code coverage integrate them with Travis CI

Setup unit tests, code coverage and Travis CI Integration.

Requirements

• Preferred Tools
  • mocha, chai for tests and assertions
• Add few tests.

Add type definitions to support TypeScript

• Add type definitions
• Add support to typescript projects
• Update documentation on usage with TS

A `$q` friendly wrapper service for using in angular projects

Have a wrapper service for using in angular projects only something like angular-get.min.js to allow us doing something like this:

angular.module('app')
    .controller('MyController', ['get',
        function (get) {
            var vm = this;

            get('/js/somescripts.js').then(function() {
                 // Do something now
            });
        }
    ]);

The promise it returns should be based on $q. This makes it angular friendly.

Adds angular as a dependency

What the heck? I thought this was a standalone package.

Should load styles as well

It should be able to load styles just like loading scripts.

get([
    '/js/abc.css',
    '/js/xyz.css'
]);

If the file extension is .css then it should automatically assume the content-type to be text/css instead of text/javascript.

But also should offer a way to explicitly set the mime-type if needed using an optional second parameter.

Like this:

get([
    '/js/abc',
    '/js/xyz'
], 'text/css');

get([
    '/js/abc',
    '/js/xyz'
], 'text/javascript');