These are chat archives for systemjs/systemjs

12th
Jan 2018
Richard Pierre
@ricjac
Jan 12 2018 02:31
Hi @marciofrayze_twitter Have you had a look at SystemJs-builder: first read the source from a string: https://github.com/systemjs/builder#overriding-fetch
Richard Pierre
@ricjac
Jan 12 2018 02:40
var mySource = 'import * from foo; var foo = "bar";'; // get source as a string
builder.bundle('foo.js', {
  fetch: function (load, fetch) {
    if (load.name.indexOf('foo.js') !== -1) {
      return mySource;
    } else {
      // fall back to the normal fetch method
      return fetch(load);
    }
  },
  packages: {
    "app": {
      "defaultExtension": "ts",
    },
    "ts": {
      "main": "plugin.js"
    },
  },
  paths: {
    typescript: 'path/to/typescript.js',
    ts: 'path/to/plugin-typescript'
  },  
  transpiler: 'ts'
}).then(function(output) {
  output.source;    // generated bundle source
  output.sourceMap; // generated bundle source map
  output.modules;   // array of module names defined in the bundle

  // execute the source
  eval(output.source);
});
Richard Pierre
@ricjac
Jan 12 2018 03:01
@marciofrayze_twitter why do you need SystemJS? you can achieve transpiling a TS string in the browser which outputs with 'system' module resolution
Richard Pierre
@ricjac
Jan 12 2018 03:08

Hi all, I also have a question:
I'm using systemjs-builder + typescript (with gulp) to transpile and bundle multiple .ts + .js files to bundle.js
Let's say I have my original ts file (add.js):

var Add = function () {
    var self = function (a, b) {
        return a + b;
    };

    return self;
}
export default Add;

the output is

System.register("test.js", [], function (_export, _context) {
    "use strict";

    return {
        setters: [],
        execute: function () {
            System.register([], function (exports_1, context_1) {
                "use strict";

                var __moduleName = context_1 && context_1.id;
                var Add;
                return {
                    setters: [],
                    execute: function () {
                        Add = function () {
                            var self = function (a, b) {
                                return a + b;
                            };
                            return self;
                        };
                        exports_1("default", Add);
                    }
                };
            });
        }
    };
});

But if I rename add.js to add.ts, I get:

System.register("test.ts", [], function (exports_1, context_1) {
    "use strict";

    var __moduleName = context_1 && context_1.id;
    var Add;
    return {
        setters: [],
        execute: function () {
            Add = function () {
                var self = function (a, b) {
                    return a + b;
                };
                return self;
            };
            exports_1("default", Add);
        }
    };
});

notice the nested System.register([], function (exports_1, context_1) { is missing this time.
Why is this happening, and how do I fix my *.js files to not have nested System.register([],....?
The nested system.register is actually a problem, because when I load my bundle, then import/get the registered 'add', it returns an empty object

Richard Pierre
@ricjac
Jan 12 2018 03:13
In case someone says: "just rename all your src file to *.ts", I need the ability to also bundle *.js files because I'm using 3rd party libs, which I don't particularly want to convert to be TS compatible (even though TS is a superset of JS) , some 3rd party libs just work in a TS file