$import (src[, srcN, ...][, callback])

Basic useful feature list:

Resource definition format

[ {name} : {type} ] {url}

Resource can be defined by using follow parameters:

URL to the file can be defined by different ways:

Installation

Add script tag with src to the import.min.js file on your web site.

<script type="text/javascript" src="https://rawgit.com/w3core/import.js/master/import.min.js"></script>

Usage

Basic example

  $import("script.js, style.css");

OR

  $import("script.js", "style.css", "[:js]script.php", function(files){
    console.log(files);
  });

OR

$import([
  "script.js",
  "style.css",
  "https://path.to/yet/another/script.js",
  "[:css] https://path.to/yet/another/style.php"
],
function (files) {
  // Loading complete
  console.log(files)
});

Advanced example

var plugin_1_files = [
  "https://path.to/the/script.js",
  "[:css] https://path.to/the/style.php"
];

var plugin_2_files = {
  plugin2Styles: "/url/path/to/the/file.css",
  plugin2Scripts: [
    "/url/path/to/the/file.js",
    "[core.script:js] /url/path/to/the/file.any",
    "[ext.script] /url/path/to/the/file.js"
  ],
  plugin2Loaded: function(files){
    console.log("plugin2Loaded >", files);
  }
};

document.addEventListener("@import", function(e){
  console.log("@import >", e.data);
});

document.addEventListener("@import:core.script", function(e){
  console.log("@import:core.script >", e.data);
});

// The property name of an object can be used as `name` too
document.addEventListener("@import:plugin2Styles", function(e){
  console.log("@import:plugin2Styles >", e.data);
});

$import(plugin_1_files, plugin_2_files, function(files){
  console.log("Main callback >", files);
});

-- Cheers