These are chat archives for systemjs/systemjs

9th
May 2016
Maxime Dupré
@maximedupre
May 09 2016 00:05
Ah, I think I need to use the bundle config option if I want to use the bundle created by the builder. I don't see why I would use this kind of bundle over the self-executing bundle though.
Anatol Ulrich
@spookyvision
May 09 2016 09:36
@alexisvincent: no hot reloader involved
λex Vincent
@alexisvincent
May 09 2016 10:16
@spookyvision sounds like a caching issue. Try opening dev tools in chrome, and set cache off. Then see if the issue remains
Anatol Ulrich
@spookyvision
May 09 2016 10:21
@alexisvincent: yep, pretty convinced caching is the problem here myself. I'm observing this in other browsers as well btw... any suggestion on how to trace this further?
λex Vincent
@alexisvincent
May 09 2016 10:22
@spookyvision are you serving the files via a web server you control
Code wise
Because if so I would suggest setting etags
Anatol Ulrich
@spookyvision
May 09 2016 10:25
@alexisvincent: yes, I've observed this with different web servers as well though %) but yeah, etags could be an option. However, isn't this still a bug in the module loader that should be fixed?
(servers I've used: npm:express and django.contrib.staticfiles)
λex Vincent
@alexisvincent
May 09 2016 10:27
@spookyvision caching should behave similarly across all browsers. So it's no surprise you're seeing it on others. If it is caching, then this isn't a bug in the module loader, but rather something you should fix your side by setting the appropriate cache headers. Caching is a developer decision, think about what you would like it to do in production. You wouldn't want SystemJS to ignore the cache
Anatol Ulrich
@spookyvision
May 09 2016 10:28
given that my typical dev setup is django, I might be out of luck re:etags, but I could probably do some cache busting with https://github.com/ModuleLoader/es6-module-loader/blob/master/docs/loader-extensions.md
still that's just masking the issue
λex Vincent
@alexisvincent
May 09 2016 10:29
I would actually rather suggest busting the cache via headers in development by setting the appropriate headers if say you have NODE_ENV: development.
Anatol Ulrich
@spookyvision
May 09 2016 10:29
@alexisvincent: well, a changed file should invalidate the cache, so I do think there is a bug somewhere ... btw: my production setup (bundled systemjs) works fine, no issues there
λex Vincent
@alexisvincent
May 09 2016 10:30
A changed file won't nessasarily bust the cache
Anatol Ulrich
@spookyvision
May 09 2016 10:30
that's interesting
also sad
λex Vincent
@alexisvincent
May 09 2016 10:30
That's why you need to set a different etag
It's like a hash of the file
Anatol Ulrich
@spookyvision
May 09 2016 10:30
yup yup. I have used etags.
I'm still really startled that changing files is not sufficient ... that's what last-modified is for, isn't it?
λex Vincent
@alexisvincent
May 09 2016 10:31
:) cool cool :)
can you quickly check what cache policy is being used (file header)
Anatol Ulrich
@spookyvision
May 09 2016 10:33
let's see
server just sends last-modified, no cache-control
or did you mean something different?
λex Vincent
@alexisvincent
May 09 2016 10:38
Do you have a Cache-Control header set
Anatol Ulrich
@spookyvision
May 09 2016 10:40
as said: no
this is a broken request: http://anatol.versteht.es/tmp/Screen%20Shot%202016-05-09%20at%2012.41.23.png - the last-modified is a lie, I just modified the file before loading the page... as soon as I force-reload this js file in another page, the last-modified also changes
So I suppose browser are just caching too aggressively?
and I should use etags because that's the only way out here?
alternatively I could force some cache-control on all or js files
λex Vincent
@alexisvincent
May 09 2016 10:52
Either way this is a browser cache issue. Not related to SystemJS.
Note this page http://expressjs.com/en/api.html, apparently express sets ‘weak’ etags. Whatever that means.
you can enable it through an {etag: true} option in the static middleware
Anatol Ulrich
@spookyvision
May 09 2016 11:00
thank you!
unfortunately that won't help me with django but I'll figure something out
λex Vincent
@alexisvincent
May 09 2016 11:02
oh sorry, thought you said you used django
i mean express
niabot
@niabot
May 09 2016 11:37
Hello, can someone tell me how to config SystemJS to load multiple (sub) modules from the same library file?
I wrote a library in Typescript that consists out of multiple modules like "form", "form/collection", "form/ui/control" and so on. The library was compiled to a single JS file in the System/Register format, containing all the modules. So i only have a single library file named "form.js".
If i now want to use this library in a second project, I simply map it's name and it works as expected. But if i want to import a class from one of the sub modules (for example "form/collection", then SystemJS tries to load "/form/collection.js" instead of "form.js" for that module.
I can write:
import * as F from 'form'; // loads 'form.js'
import List = F.collection.List;
But i can not write:
import {List} from 'form/collection'; // loads not existing 'form/collection.js'
Anatol Ulrich
@spookyvision
May 09 2016 13:15
@alexisvincent: solved, thanks again
λex Vincent
@alexisvincent
May 09 2016 13:26
@spookyvision :) Glad you fixed it :)
Anatol Ulrich
@spookyvision
May 09 2016 13:26
@niabot: not 100% sure but I think you'll have to manually re-export
λex Vincent
@alexisvincent
May 09 2016 13:29
@niabot ‘module/some/file’ is a directory level mapping. If its all in the same file you need to be explicitely exporting modules
Anatol Ulrich
@spookyvision
May 09 2016 13:30
you could maybe write a custom loader that understands your idea, like import {List} from 'form.js/collection!nestedjs' but that's probably a bad idea
niabot
@niabot
May 09 2016 13:35
@alexisvincent: Yes the files/modules are in different directories. I reexport them with lines like
// form.ts
import * as collection from "./form/collection"; 
export {collection};
I'm just wondering why SystemJS has no way to define that 'form' and 'form/collection' are contained within the same file and that it should load both from the same file.
niabot
@niabot
May 09 2016 13:45
@spookyvision I was hoping that SystemJS would be able to do this on it's own by mapping 'form/*' to 'form.js'. :worried:
Anatol Ulrich
@spookyvision
May 09 2016 13:48
like @alexisvincent said, slashes are for directories, not namespaces
you could totally import {collection} from 'form.js' though, and use collection.List - that's what I would do
λex Vincent
@alexisvincent
May 09 2016 13:51
@niabot I actually think you can do this
niabot
@niabot
May 09 2016 13:54
@spookyvision I'm currently doing this. But it looks a bit ugly if there are quite a lot of imports and nesting gets deeper:
import {ui} from 'form'; let x = new ui.control.Button(new ui.control.Image('...'), 'Text');
@alexisvincent You mean that SystemJS should be able to map 'form' and 'form/collection' to the same file? If yes, how would i tell SystemJS to do it?
@spookyvision Of course i could also shorten the 'ui.control.Button' to simply 'Button' as well, but this results in an lengthy and not very readable import from import chain.
‘form/collection’ : ‘form'
i think
@niabot
Piero Dotti
@ProGM
May 09 2016 14:19
Hi guys, how can I create a <script> compatible bundle of angular2 using systemjs?
I tried using buildStatic on index.js files, then importing them, but system ignores them.
niabot
@niabot
May 09 2016 14:35
@alexisvincent I tried it with map { 'form/collection': 'form' } But then i get the following error message from SystemJS:
Uncaught Error: Multiple anonymous System.register calls in module http://localhost:8383/ts-asys/lib/form.js. If loading a bundle, ensure all the System.register calls are named.
Looking at the file: There is no anonymous System.register call anywhere to be found. All System.register() calls look like this:
System.register("form/collection", ["form/base", "form/exception", "form/event"], function(exports_26, context_26) {
λex Vincent
@alexisvincent
May 09 2016 14:36
@guybedford thoughts?
Trey Long
@xealot
May 09 2016 15:13
Hello, got a basic systemjs question. Should be we putting extensions on our ESxx imports? We have a codebase without extensions right now so I have to use defaultJSExtensions... however it says that's deprecated. But we're using Typescript so I imagine referencing a ts file directly isn't correct either.
niabot
@niabot
May 09 2016 15:26
@xealot From my experience you should use no extensions. If i remember correctly defaultJSExtensions is deprecated (it is now on by default), but defaultExtension can used instead.
Trey Long
@xealot
May 09 2016 15:27
That only works inside of the packages option though right?
niabot
@niabot
May 09 2016 15:30
Well, at least it is only documented that way. An alternative would be the paths or map option with wildcards. (Not sure if map supports wildcards)
Trey Long
@xealot
May 09 2016 15:32
So, the other confusing thing for me. Is that if I specify defaultJSExtension the transpiler option suddenly becomes required. I really don't want to compile everything in the browser.
niabot
@niabot
May 09 2016 15:33
The transpiler option should not be required as long you don't want to run es6 or ts directly.
playground
@playground
May 09 2016 15:33
jspm or webpack? pro's and con's
Trey Long
@xealot
May 09 2016 15:33
It's already compiled into ES6/System
niabot
@niabot
May 09 2016 15:34
Well then you need a transpiler, or compile it down to es5/System
Trey Long
@xealot
May 09 2016 15:34
Yeah, but I do it serverside
It's done... already
@playground I saw you asking this in the Angular channel. I like SystemJS (and arguably JSPM) because they're focused and do a good job. The con for JSPM is that it has to duplicate your node_modules (or a lot of it) for the browser, but I don't use JSPM directly, just System. As for Webpack, it's definitely the kitchen sink. For me it's all over the place and I'm never sure which approach to take.
niabot
@niabot
May 09 2016 15:40
@xealot What do you mean with "done already"? Even if it is es6 you should still be able to compile it into es5 to get around further transpiling.
Trey Long
@xealot
May 09 2016 15:40
I misspoke, up above I said ES6/System, I meant ES5/System.
I have a task running (as per normal) that does all the magic. Copies things, compiles things, etc. It's standard JS in a "dist" folder when we're done.
niabot
@niabot
May 09 2016 15:41
Well then you don't need a transpiler at all.
Trey Long
@xealot
May 09 2016 15:41
right.
Adding defaultJSExtension causes a "cannot find traceaur" error to show up... so I add transpiler: "typescript" and things start to work, but holy slow Batman.
Right now I'm trying to revert and use a packages config with defaultExtension, but I can't seem to do it en masse.
niabot
@niabot
May 09 2016 15:43
I wonder... This should not be the case. Today i worked on a project that uses a similar setup and i didn't need to define a transpiler at all.
Trey Long
@xealot
May 09 2016 15:44
yeah, I think I'm running into an edge case...
This is how I start my application
System.import('boot').then(null, console.error.bind(console));
there is a boot.js but it will only look for boot (no ext)
But if I nest boot.js into app/boot.js I can then specify this in config:
        'app': {
            defaultExtension: "js"
        },
which sorta works.
at least it's looking for boot.js.
niabot
@niabot
May 09 2016 15:47
I did it like this:
System.config({
    baseURL: 'lib',
    paths: {
        '*': '*.js'
    },
    map: {
        'jquery': 'jquery-2.1.4'
    }});
Trey Long
@xealot
May 09 2016 15:48
ooo :clap:, I'm going to have to read more about paths
If any 3rd party packages use import ... from "xyz.js" is that going to tank?
trying to import xyz.js.js
that's why I liked the idea of the whole defaultExtension thing.
niabot
@niabot
May 09 2016 15:50
Well you can define multipe path mappings, depending on which wins you can also omit the extension, change the directory and stuff.
Trey Long
@xealot
May 09 2016 15:50
ok, allow me to experiment with this a little.
Trey Long
@xealot
May 09 2016 17:38
@niabot when I add a paths config option SystemJS starts looking for tracaeur.js
niabot
@niabot
May 09 2016 17:40
@xealot Could you post your current config? Something must cause this.
Trey Long
@xealot
May 09 2016 17:41
System.config({
    // defaultJSExtensions: true,
    // transpiler: null,
    map: {
        // 'app': 'dist',
        // 'typescript': 'node_modules/typescript/lib/typescript.js',
        'lodash': 'node_modules/lodash',
        'moment': 'node_modules/moment',
        'angular2': 'node_modules/angular2/es6/dev',
        'rxjs': 'node_modules/rxjs',
        'spark-md5': 'node_modules/spark-md5/spark-md5.js',
        'ng2-bootstrap': 'node_modules/ng2-bootstrap',
        'ng2-bs3-modal': 'node_modules/ng2-bs3-modal'
    },
    paths: {
        "*": "*.js"
    },
    packages: {
        // 'app': {
        //     format: 'register',
        //     defaultExtension: 'js'
        // },
        // 'boot': {
        //     format: 'register',
        //     defaultExtension: 'js'
        // },
        // 'angular2': {
        //     format: 'register',
        //     defaultExtension: 'js'
        // },
        'lodash': {
            format: 'cjs',
            main: "index.js"
        },
        'moment': {
            format: 'cjs',
            main: 'moment.js'
        },
        'ng2-bootstrap': {
            format: 'cjs',
            defaultExtension: 'js',
            main: 'ng2-bootstrap.js'
        },
        'ng2-bs3-modal': {
            defaultExtension: 'js'
        },
        'angular2/animate': {
            defaultExtension: 'js',
            main: 'animate.js'
        }
    }
});
it's a bit of a franken-config now as I'm trying to improve it
but when I add the paths section I start getting:
GET http://localhost:8000/traceur.js 404 (Not Found)
niabot
@niabot
May 09 2016 17:45
I can only guess that one of the modules is considered to be an es6 module by systemjs, causing it to find one of the default transpilers.
Trey Long
@xealot
May 09 2016 17:46
so maybe it detects that there is an es6 import and then tries to fix it?
I wish there was a log message or something :)
lemme simplify
oooooo, good call, I bet referencing "es6/dev" for ng2 might do that
niabot
@niabot
May 09 2016 17:48
No. I guess it downloads the files and tries to detect it's module format. It might fail to do so, or one of the modules actually is an ES6 module. Since systemjs can't run it directly, it tries to locate the default transpiler, which fails and results in a "game over" situation.
Trey Long
@xealot
May 09 2016 17:48
I can include the precompiled bundle instead
right, that's what I understood your meaning to be
niabot
@niabot
May 09 2016 17:49
ok ;-)
Trey Long
@xealot
May 09 2016 17:56
boom
step in the right direction anyway
so I just added this:
    map: {
        'angular2': 'node_modules/angular2'
    },
which works great, but again it's referencing everything without a "js" extension
so I have to put something in packages that indicates defaultExtension right? It sucks to have to do this for every dependency.
Guy Bedford
@guybedford
May 09 2016 19:55
@xealot try packages: { 'node_modules': { defaultExtension: 'js' } }
packages can nest but dont mixin
Trey Long
@xealot
May 09 2016 19:56
hey hey! why didn't I think of that! :)
lemme give it a shot
@guybedford thanks a ton, that will simplify things for me. It seems to work as expected.
niabot
@niabot
May 09 2016 20:00
@guybedford Any idea how i could config systemjs so that i can import different modules from the same file? I tried it with map ('foo': 'foo', 'foo/bar': 'foo') but i only get errors or it will try to load something like 'foo/bar.js' which does not exist.
Guy Bedford
@guybedford
May 09 2016 20:02
@niabot what you're trying to do with map there is exactly what the bundles config is for
bundles: { 'path/to/bundle.js': ['foo', 'foo/bar'] }
then System.import('foo') or System.import('foo/bar') will load the bundle first
that map will just turn all the names into foo
niabot
@niabot
May 09 2016 20:04
@guybedford Wow, i completely missed that. Looks exactly like that what i need ;-)
Trey Long
@xealot
May 09 2016 21:40
Anyone know how to compress this pattern I've got going in the packages attribute in config?
        '@myscope/tag-field': {
            main: 'index.js'
        },
        '@myscope/catalog-lib': {
            main: 'index.js'
        },
        '@myscope/catalog-ng': {
            main: 'index.js'
        },
        '@myscope/assets-selector': {
            main: 'index.js'
        },
        '@myscope/tagscore': {
            main: 'index.js'
        }
hrm... wait, obvious... I can just leave off the package name
errr, that actually does not seem to work
Amal Hussein
@amalahussein
May 09 2016 22:25
@xealot what do u mean compress?
do u mean bundle?
Trey Long
@xealot
May 09 2016 22:28
no no, sorry... I just meant, simplify the config.
is there a more abbreviated way of saying that the main file is "index.js" in this package.
for all packages under @myscope