feat(all): systemjs support

Enables support for SystemJS as module loader including new project setup via au new.

closes aurelia#198

lib/build/amodro-trace/write/stubs.js

@@ -1,5 +1,6 @@
 'use strict';
 var lang = require('../lib/lang');
+var packages = require('./packages');
 
 /**
  * Replaces module content for a given set of module IDs with stub define calls.
@@ -12,7 +13,9 @@ module.exports = function stubs(options) {
   options = options || {};
 
   return function(context, moduleName, filePath, contents) {
-    if (options.stubModules && options.stubModules.indexOf(moduleName) !== -1) {
+    if (options.stubModules
+          && (options.stubModules.indexOf(moduleName) !== -1
+              || options.stubModules.indexOf(packages.getPackageName(context, moduleName)) !== -1)) {
       //Just want to insert a simple module definition instead
       //of the source module. Useful for plugins that inline
       //all their resources.

lib/build/loader-plugin.js

@@ -37,7 +37,7 @@ exports.LoaderPlugin = class {
     case 'require':
       return 'text!' + moduleId + path.extname(filePath);
     case 'system':
-      throw new Error('SystemJS is not yet supported');
+      return moduleId + path.extname(filePath) + '!text';
     default:
       throw new Error(`Loader configuration style ${loderConfigType} is not supported.`);
     }

lib/build/loader.js

@@ -1,4 +1,5 @@
 'use strict';
+const path = require('path');
 
 exports.createLoaderCode = function createLoaderCode(platform, bundler) {
   let loaderCode;
@@ -9,7 +10,7 @@ exports.createLoaderCode = function createLoaderCode(platform, bundler) {
     loaderCode = 'requirejs.config(' + JSON.stringify(exports.createRequireJSConfig(platform, bundler)) + ')';
     break;
   case 'system':
-    loaderCode = exports.createSystemJSConfig(platform);
+    loaderCode = 'window.define=SystemJS.amdDefine; window.require=window.requirejs=SystemJS.amdRequire; SystemJS.config(' + JSON.stringify(exports.createSystemJSConfig(platform, bundler)) + ');';
     break;
   default:
     //TODO: Enhancement: Look at a designated folder for any custom configurations
@@ -76,8 +77,18 @@ exports.createRequireJSConfig = function createRequireJSConfig(platform, bundler
   return config;
 };
 
-exports.createSystemJSConfig = function createSystemJSConfig(platform) {
-  throw new Error('SystemJS is not yet supported');
+exports.createSystemJSConfig = function createSystemJSConfig(platform, bundler) {
+  const loaderOptions = bundler.loaderOptions;
+  const bundles = bundler.bundles;
+  const configBundleName = loaderOptions.configTarget;
+  const includeBundles = shouldIncludeBundleMetadata(bundles, loaderOptions);
+  const location = platform.baseUrl || platform.output;
+
+  const config = bundles.map(bundle => systemJSConfigForBundle(bundle, bundler, location, includeBundles))
+                              .filter(bundle => bundle.name !== configBundleName)
+                              .reduce((config, bundle) => bundle.addBundleConfig(config), { map: { "text": "text" } });
+
+  return config;
 };
 
 function shouldIncludeBundleMetadata(bundles, loaderOptions) {
@@ -96,3 +107,22 @@ function shouldIncludeBundleMetadata(bundles, loaderOptions) {
 
   return setting === true;
 }
+
+function systemJSConfigForBundle(bundle, bundler, location, includeBundles) {
+  const buildOptions = bundler.interpretBuildOptions(bundle.config.options, bundler.buildOptions);
+  const mapTarget = location + '/' + bundle.moduleId + (buildOptions.rev && bundle.hash ? '-' + bundle.hash : '') + path.extname(bundle.config.name);
+  const moduleId = bundle.moduleId;
+
+  return {
+    name: bundle.config.name,
+    addBundleConfig: function(config) {
+      config.map[moduleId] = mapTarget;
+      if(includeBundles) {
+        config.bundles = (config.bundles || {});
+        config.bundles[bundle.moduleId] = bundle.getBundledModuleIds();
+      }
+
+      return config;
+    }
+  };  
+}

lib/commands/new/loaders/require.js

@@ -0,0 +1,16 @@
+'use strict';
+const ProjectItem = require('../../../project-item').ProjectItem;
+
+module.exports = function(project) {
+  project.loader = project.model.loader.id;
+  delete project.model.loader; // remove loader from model as it is actually a property of model.build
+
+  project.loaderTextPlugin = 'text';
+  project.loaderScript = 'node_modules/requirejs/require.js';
+  project.addToContent(
+    ProjectItem.resource('index.html', 'content/require.index.html')
+  ).addToClientDependencies(
+    'requirejs',
+    'text'
+  );
+};

lib/commands/new/loaders/system.js

@@ -0,0 +1,20 @@
+'use strict';
+const ProjectItem = require('../../../project-item').ProjectItem;
+
+module.exports = function(project) {
+  project.loader = project.model.loader.id;
+  delete project.model.loader; // remove loader from model as it is actually a property of model.build
+
+  project.loaderTextPlugin = {
+    'name': 'text',
+    'path': '../node_modules/systemjs-plugin-text',
+    'main': 'text'
+  };
+  project.loaderScript = 'node_modules/systemjs/dist/system.js';
+  project.addToContent(
+    ProjectItem.resource('index.html', 'content/system.index.html')
+  ).addToClientDependencies(
+    'systemjs',
+    'systemjs-plugin-text'
+  );
+};

lib/commands/new/new-application.json

@@ -7,6 +7,10 @@
       "nextActivity": 2,
       "state": {
         "type": "project:application",
+        "loader": {
+          "id": "require",
+          "displayName": "RequireJS"
+        },
         "transpiler": {
           "id": "babel",
           "displayName": "Babel",
@@ -33,7 +37,7 @@
         "editor": {
           "id": "vscode",
           "displayName": "Visual Studio Code"
-        },
+        },        
         "platform": {
           "id": "web",
           "displayName": "Web"
@@ -52,6 +56,31 @@
       "id": 3,
       "type": "input-select",
       "nextActivity": 4,
+      "question": "Which module loader would you like to use?",
+      "stateProperty": "loader",
+      "options": [
+        {
+          "displayName": "RequireJS",
+          "description": "A file and module loader for JavaScript.",
+          "value": {
+            "id": "require",
+            "displayName": "RequireJS"
+          }
+        },
+        {
+          "displayName": "SystemJS",
+          "description": "Dynamic ES module loader",
+          "value": {
+            "id": "system",
+            "displayName": "SystemJS"
+          }
+        }
+      ]
+    },
+    {
+      "id": 4,
+      "type": "input-select",
+      "nextActivity": 5,
       "question": "Would you like to use the default setup or customize your choices?",
       "stateProperty": "defaultOrCustom",
       "options": [
@@ -73,28 +102,28 @@
       ]
     },
     {
-      "id": 4,
+      "id": 5,
       "type": "branch-switch",
       "stateProperty": "defaultOrCustom",
       "branches": [
         {
           "case": "default-esnext",
-          "nextActivity": 14
+          "nextActivity": 15
         },
         {
           "case": "default-typescript",
-          "nextActivity": 12
+          "nextActivity": 13
         },
         {
           "case": "custom",
-          "nextActivity": 5
+          "nextActivity": 6
         }
       ]
     },
     {
-      "id": 5,
+      "id": 6,
       "type": "input-select",
-      "nextActivity": 6,
+      "nextActivity": 7,
       "question": "What platform are you targeting?",
       "stateProperty": "platform",
       "options": [
@@ -118,9 +147,9 @@
       ]
     },
     {
-      "id": 6,
+      "id": 7,
       "type": "input-select",
-      "nextActivity": 7,
+      "nextActivity": 8,
       "question": "What transpiler would you like to use?",
       "stateProperty": "transpiler",
       "options": [
@@ -145,9 +174,9 @@
       ]
     },
     {
-      "id": 7,
+      "id": 8,
       "type": "input-select",
-      "nextActivity": 8,
+      "nextActivity": 9,
       "question": "How would you like to setup your template?",
       "stateProperty": "markupProcessor",
       "options": [
@@ -181,9 +210,9 @@
       ]
     },
     {
-      "id": 8,
+      "id": 9,
       "type": "input-select",
-      "nextActivity": 9,
+      "nextActivity": 10,
       "question": "What css processor would you like to use?",
       "stateProperty": "cssProcessor",
       "options": [
@@ -235,9 +264,9 @@
       ]
     },
     {
-      "id": 9,
+      "id": 10,
       "type": "input-select",
-      "nextActivity": 10,
+      "nextActivity": 11,
       "question": "Would you like to configure unit testing?",
       "stateProperty": "unitTestRunner",
       "options": [
@@ -260,24 +289,24 @@
       ]
     },
     {
-      "id": 10,
+      "id": 11,
       "type": "branch-switch",
       "stateProperty": "platform",
       "branches": [
         {
           "case": "aspnetcore",
-          "nextActivity": 13
+          "nextActivity": 14
         },
         {
           "case": "default",
-          "nextActivity": 11
+          "nextActivity": 12
         }
       ]
     },
     {
-      "id": 11,
+      "id": 12,
       "type": "input-select",
-      "nextActivity": 14,
+      "nextActivity": 15,
       "question": "What is your default code editor?",
       "stateProperty": "editor",
       "options": [
@@ -324,9 +353,9 @@
       ]
     },
     {
-      "id": 12,
+      "id": 13,
       "type": "state-assign",
-      "nextActivity": 14,
+      "nextActivity": 15,
       "state": {
         "transpiler": {
           "id": "typescript",
@@ -336,9 +365,9 @@
       }
     },
     {
-      "id": 13,
+      "id": 14,
       "type": "state-assign",
-      "nextActivity": 14,
+      "nextActivity": 15,
       "state": {
         "editor": {
           "id": "visualstudio",
@@ -347,17 +376,17 @@
       }
     },
     {
-      "id": 14,
+      "id": 15,
       "type": "project-create",
-      "nextActivity": 15,
-      "restartActivity": 16
+      "nextActivity": 16,
+      "restartActivity": 17
     },
     {
-      "id": 15,
+      "id": 16,
       "type": "project-install"
     },
     {
-      "id": 16,
+      "id": 17,
       "type": "state-assign",
       "nextActivity": 1,
       "state": {

lib/commands/new/project-template.js

@@ -97,8 +97,7 @@ exports.ProjectTemplate = class {
       ProjectItem.jsonObject('package.json', this.package),
       ProjectItem.resource('.editorconfig', 'content/editorconfig'),
       ProjectItem.resource('.gitignore', 'content/gitignore'),
-      ProjectItem.resource('favicon.ico', 'img/favicon.ico'),
-      ProjectItem.resource('index.html', 'content/index.html')
+      ProjectItem.resource('favicon.ico', 'img/favicon.ico')
     );
   }
 
@@ -141,9 +140,7 @@ exports.ProjectTemplate = class {
     ).addToClientDependencies(
       'aurelia-bootstrapper',
       'aurelia-animator-css',
-      'bluebird',
-      'requirejs',
-      'text'
+      'bluebird'
     ).addToDevDependencies(
       'aurelia-cli',
       'aurelia-testing',
@@ -279,7 +276,7 @@ exports.ProjectTemplate = class {
         this.model.platform
       ],
       'loader': {
-        'type': 'require',
+        'type': this.loader,
         'configTarget': 'vendor-bundle.js',
         'includeBundleMetadataInConfig': 'auto',
         'plugins': [
@@ -303,8 +300,9 @@ exports.ProjectTemplate = class {
           'prepend': [
             'node_modules/bluebird/js/browser/bluebird.core.js',
             'node_modules/aurelia-cli/lib/resources/scripts/configure-bluebird.js',
-            'node_modules/requirejs/require.js'
+            this.loaderScript,
           ],
+
           'dependencies': [
             'aurelia-binding',
             'aurelia-bootstrapper',
@@ -327,7 +325,7 @@ exports.ProjectTemplate = class {
             'aurelia-task-queue',
             'aurelia-templating',
             'aurelia-templating-binding',
-            'text',
+            this.loaderTextPlugin,
             {
               'name': 'aurelia-templating-resources',
               'path': '../node_modules/aurelia-templating-resources/dist/amd',

lib/resources/content/system.index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Aurelia</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+
+  <body aurelia-app="main">
+    <script src="scripts/vendor-bundle.js"></script>
+    <script>SystemJS.import("aurelia-bootstrapper").catch(function(err) { console.log(err); })</script>
+  </body>
+</html>