systemjs/systemjs

Dynamic ES module loader

systemjs's Issues

ensure endpoint normalize applies after map

support wildcard map, shim and paths config

module x from y support

The latest version of es6-module-loader supports the "module x from y" syntax to retrieve the entire module instance object. I believe this could be used to get around some of the problems with AMD modules. However, it doesn't seem to work in jspm. My guess from a quick look is that the module is incorrectly being interpreted as a cjs module and thus esprima is not being used to parse translate the module.

Have multiple globals that aren't the same object reference return a module object

Using jspm-loader standalone

Is it possible to use the library without the ES6-Loader polyfill? I'm thinking on a simpler drop-in replacement for RequireJS.

ensure umd modules still create a global

Remove dependency casting

bootstrap | jquery

Questions

Hi,
I just read through your module and I'm excited about the features and flexibility.
I consider using it instead of require.js.
I have two questions:

1.) Can you make a hint regarding browser compatibility?

2.) I don't get what you mean by "the CDN". Which CDN is meant?
Can I specify my own CDN (provider)?
Also I don't understand the example with

<link rel="stylesheet" href="https://github.jspm.io/hakimel/reveal.js/css/reveal.css"></link>

This is just a plain link, I don't see jspm in the picture.

Thanks

Support X-Submodules

Create a new fetch function that will check the response headers for X-Submodules. When found, it is parsed as a comma-separated list of double-quoted relative module names to the current module name, which are then requested via an immediate import in the fetch function.

Gist endpoint?

gist.github.com can be used as a place for storing individual modules (or other types of file) as opposed to packages stored in github repos, so I'm thinking it might be useful to have this as an endpoint?

Module Load Hook

First off...this project looks great. I thought I was going to have to write this myself, so I'm very happy right now that I do not 😄

I can tell from the docs that it does just about everything I need. I do have one additional requirement that I wasn't sure it supported. I'm in need of a module load hook. I'd like to be able to add a function either to jspm's loader or hook into the es6 loader so that I can grab the module instance after it's instantiated. I then need to tag each module with its module id in a hidden property. So, obviously I need access to the module instance and some metadata after it's assembled but before anything else uses it.

Is this supported by the es6 loader through one of its callbacks? If not, is it supported by jspm? If not, how can I tempt you into adding it? 😉

Requesting use case for css-required files

When loading github:FortAwesome/[email protected]/css/font-awesome.css!

It would also need to load the font files in that repo. I see that this is acknowledged but not yet implemented. Per the page's instructions,

Repo and version matched, but path "fonts/fontawesome-webfont.woff?v=4.0.3" not found. Symlinks and submodules not currently supported, file an issue to request this use case.

I am hereby requesting. :)

Detect comments in parsing functions

Allow locations to specify module format

This would reduce the need for detection, even though the processing is already minimal.

Mention RequireJS test-coverage/surface covered

I believe you may have previously mentioned that you had good surface coverage of many RequireJS tests. If so this would be worth mentioning in the README :)

If not and I'm completely incorrect, please feel free to close or maybe strike towards that being a goal!

LICENSE?

you must include license text for MIT license

consider bundles as scripts

What if instead of fetching a bundle as a module, it always did script injection?

This way bundles are by default CORS compliant.

The minimal production loader becomes the scenario where all code is loaded from a bundle, hence we no longer need any XHR fetch, translate or custom instantiate code since everything is loaded from the instantiate cache.

Enable paths below baseURL

Since ESML follows the spec, SystemJS can provide the fixes outside of the spec.

See ModuleLoader/es-module-loader#100

implement non-static alternative to "transpiled"

The issue is that we have no way to know whether we should use the default as the main module for an ES6 transpiled dependency of an AMD file that was transpiled from ES6.

Perhaps we can include meta on all AMD and CommonJS modules to ensure they are always returned by their default property:

new Module({
  __defaultOnly: true
  default: 'here'
});

Then in AMD and CommonJS we only use the default when the __defaultOnly meta property is set.

Location / Endpoint Configuration

Firstly, change the name of locations to endpoints.

Then, allow the following configuration options:

endpoints: {
  github: {
    format: 'detect' / 'es6' / 'amd' / 'cjs' / 'global',
    location: 'https://github.jspm.io',

    repoDepth: 1, // allows specifying a standard main form for the location
    main: 'main'
  }
}

The standard form will still work though as well:

endpoints: {
  github: 'https://github.jspm.io'
}

IE compatibility

Hi,

Does the current version of SystemJS built with support of Internet Explorer 8?

Implement location mirrors

endpoints: {
  github: ['https://first-mirror.com', 'https://some-mirror.com']
},

Optionally allow multiple location mirrors, chosen randomly to split global load, favouring using a mirror domain that is already used by another endpoint (to use the same SPDY connection).

Still need to consider these concepts in more details, when mirrors start being created.

Support AMD dynamic require

Named Modules

From what I can tell with a quick look at the source, there's no support for named AMD modules. Is there any plan to add this? It's particularly important for supporting tools like r.js which encode the module name in the define call during the build process.

If there's no planned support for this, how does one go about packaging multiple modules in a single file? I thought I saw syntax for that in the ES6 spec, but wasn't sure if the es6 shim supported it and wasn't sure if there was support for non-es6 named modules. I tried calling System.set with a module literal, but importing it by the registered name didn't work because of the normalize/resolve logic in the custom loader I suppose. Any thoughts on this?

When using Traceur or Traceur-runtime, System detection fails

Implement git: protocol format

Need to work out how this applies to plugin loads.

move back to package-based config

  map: {
    'jquery': 'github:jquery/[email protected]'
  },
  endpoints: {
    'github': 'https://github.jspm.io'
  },
  packages: {
    '.': {
      shim: {
        'app/angular': ['jquery']
      }
    },
    'github:jquery/[email protected]': {
      format: 'amd',
      main: 'jquery',
      map: {
        '*': 'js/*'
      },
      dependencyMap: { 
        'sizzle': 'github:jquery/[email protected]'
      }
    }
  }

The config would apply:

• global
• package

map would be identical in operation to global map, but just concatenated with the package name:

map({
  'github:jquery/[email protected]/*': 'github:jquery/[email protected]/js/*'
});

package-level dependencyMap replaces contextual map.

importURL

If URL's are not supported by the standard System loader, then we can implement an importURL method to allow loading URLs.

AMD detection on uglifyed files

Hi! I recently had an issue that was kinda had to diagnose, and I thought it would be worth documenting.

System.js detects correctly cjs-style amd:

define(function(require) {
  var $ = require("jquery");
});

However, after uglifycation, the above file might end up like this:

define(function(a) {
  var $ = a("jquery");
});

Which, in turn, isn't detected correctly. To sidestep the problem, I've told uglifyjs to not mangle variables named require:

uglify: {
  mangle: {
    except: ['require']
  }
}

Do you think it is worth adding to the README or a wiki page?

@@nodeProcess module to be defined for CJS

Allow plugin registry to have correct relative paths

Means moving the plugin registry to https://plugins.jspm.io

Wrap the loader load and import functions to allow AMD return values and data-config

Support for markdown?

Would it be easy to add a plugin which takes a markdown file from an endpoint like github, and converts it into html: a buildConfig for html snippets?

Disable default locations and registry - only provide this on CDN-located service.

This way the loader remains entirely conceptually separated from the CDN concepts.

AMD Issues

Here's my AMD module define:

app.js

define(function () {
    return {
        start: function () {
            console.log("App Started");
        }
    };
});

Here's my ES6 module:

main.js

import app from 'app';

app.start();

I have some map config setup and I've confirmed that is indeed loading and parsing and evaluating both files. However, in main.js the 'app' is always undefined. It seems that the wrong code path is being take in the link function of the loader such that the returned object from the AMD module is not being set up as the default export. Am I missing something?

jQuery being detected as CommonJS

See http://jsbin.com/icIQUQI/1/edit

use module loader eval with globals on the loader global

main map config sharing

  map: {
    jquery: '[email protected]#jquery'
  }

should result in;

  jspm.import('[email protected]')

also loading the correct main.

performance benchmarks

Create some tests for the performance time of load operations.

allow shim exports as well as in implicit definitions

{
  "shim": {
    "bootstrap": ["jquery"]
  }
}

and

{
  "shim": {
    "bootstrap": {
      imports: ["jquery"],
      exports: "$"
    }
  }
}

both being allowed.

Also support multiple exports, and deep exports.

Predefined modules are being reloaded

I'm using almond.js instead of require.js. I've all the modules inlined and loaded. When I try to call jspm.import of one of the defined modules, it tries to load it again.

Bower install

On the "Getting started" page:
https://github.com/systemjs/systemjs#getting-started

It states:
"Download es6-module-loader.js and traceur.js from the ES6-loader polyfill and locate them in the same folder as system.js from this repo.
Then include dist/system.js with a script tag in the page:"

1. The traceur.js resolves into a 404 and does not exist physically in the repo.
2. Would'nt it be better just to "bower install system.js" and be done?

Thanks

Importing globals with ES6 syntax

Hi!

I just noticed there's an inconsistency between consuming an AMD module and a globals "module". Suppose we've two files, amd.js and global.js:

amd.js

define(function() {
  return function theAnswer() {
    return 42;
  };
});

global.js

window.theAnswer = function() {
  return 42;
};

In my view, they are conceptually the same. However, they can't be used interchangeably:

es6.js

  import amdAnswer from "./amd";
  console.log(amdAnswer()); // Works

  import globalAnswer from "./global";
  console.log(globalAnswer()); // Breaks with "undefined is not a function"

This happens because the return value from the AMD module is placed on the default export, while the global is exported as the module itself.

I suspect the most forward-compatible solution is to change the global-loading code to place the variable's value on the default export. I could be overlooking something, though :)

depends config not using #main

jspm.config({
 "baseURL": "app",
 "map": {
   "jquery": "github:components/[email protected]#jquery",
   "underscore": "npm:[email protected]#underscore",
   "backbone": "github:jashkenas/[email protected]#backbone"
 },
 "depends": {
   "backbone": [
     "underscore",
     "jquery"
   ]
 },
 "jspmPackages": "jspm_packages"
});

results in "[email protected]" being loaded directly instead of "[email protected]/underscore.js".

Allow loader hooks to compose by default

jQuery source map not showing up in the browser

Again, see http://jsbin.com/icIQUQI/1/edit

It seems that the sourceMappingURL comment is not being copied through to the end of the source.

Global handling

How to deal with a library that expects a global, when the underlying library has a global and an export mode as separate things?

We may need to allow a more RequireJS-identical shim.

Multiple Imports withing the same import()

Hey Guy

Just started to give JSPM a try. :-)

Is it possible to import multiple libraries at the same time sort of like

jspm.import(['this', 'andthis', 'andthis'] function(th, tha, tha2) {
// work it
} )

I'd like to use it this way then pass them to the Polymer constructor so the libraries can be used in the ShadowDOM scope.

Thanks again
Alessandro

Be able to undef a module after an error?

(I'm talking about the dynamic require case here)
With requirejs, this was my errback function:

var failedId = err.requireModules && err.requireModules[0];
requirejs.undef(failedId);

What's the workflow when you get an error loading a module with the jspm loader? Do one has to undefine it somehow?

Conditional loading

Outside the scope of the current plugin system... perhaps consider a natively supported loading syntax for conditionals like:

jspm.import('some/condition ? some/module : another/module');
jspm.import('!some/condition ? some/module');
jspm.import('some/condition ? some/module, another/module');

For inline conditions, these can still be provided by:

jspm.set('some/condition', new Module({ default: someInlineFunction() });