These are chat archives for systemjs/systemjs

15th
Mar 2016
Thomas Sieverding
@Bajix
Mar 15 2016 01:23
@piercers Coffee Script bro
=> isn’t a thing in real JS land
Ryan Pierce
@piercers
Mar 15 2016 01:33
Oh dang. That's totally what it is - Safari hasn't added that piece of ES6 yet. Thanks for the help, @Bajix.
Thomas Sieverding
@Bajix
Mar 15 2016 02:34
yep
Michel D'HOOGE
@mdhooge
Mar 15 2016 08:38

OK, I'll add some colors to my previous question, to make it more attractive :)
Maybe I'm doing something wrong (in fact, I surely do!) but I don't understand why systemjs reloads classes that already registered. So, first, the RxJs classes are loaded as a whole through a bundle:

System.register("rxjs/Observer", [], true, function(require, exports, module) {
System.register("rxjs/subject/SubjectSubscription", ["rxjs/Subscription"], true, function(require, exports, module) {
System.register("rxjs/util/throwError", [], true, function(require, exports, module) {

And that works perfectly.

But I also need the WebSocketSubject class that isn't provided by the bundle. So I added the following config:
System.config({
  packages: {
    app: {
      format: 'register',
      defaultExtension: 'js'
    },
    'node_modules/rxjs': {
      format: 'cjs',
      defaultExtension: 'js'
    }
  },
  map: {
    rxjs: 'node_modules/rxjs'
  }
});
And now, the classes already defined by the bundle are loaded again…
I think this is related to the map part, but I can't understand why systemjs finds the classes in the bundle without my additional config, and cannot use them anymore when I add it.
Robert Cazacu
@roby2001
Mar 15 2016 11:01
Anyone knows a any project/tutorial that a begginer to webdev can use to understand how to set up systemjs and karma for testing his project ? I can't seem to find a decent enough tutorial/example in order to understand what I have to actually do.
Vojtech Polivka
@vojtapol
Mar 15 2016 14:19
So is this plugin now deprecated? https://github.com/frankwallis/plugin-typescript The config seems outdated. Does SystemJS now transpile TS without any plugin? And if so, WHY DOES NO ONE UPDATE THE DOCUMENTATION?
Vojtech Polivka
@vojtapol
Mar 15 2016 14:26
System.config({
  transpiler: "plugin-babel",
  packages: {
    "src": {
      "defaultExtension": "ts",
      "meta": {
        "*.ts": {
          "loader": "ts"
        }
      }
    }
  }
});
is the transpiler now called just "babel"?
can someone tell @frankwallis?
John Sterling
@johnste
Mar 15 2016 16:21

When bundling in SystemJS builder 0.15.13 I'm getting issues with non normalized dependencies.

My bundle is generated like this:
System.register('src/main.js', ['./js/app'], function (_export) { ... }
System.register('src/js/app.js', ['react'], function (_export) { ... }

When main.js requires ./js/app it doesn't find it since it's registered with the file suffix. What am I doing wrong?

Vojtech Polivka
@vojtapol
Mar 15 2016 16:24
.
Daphne Maddox
@laurelnaiad
Mar 15 2016 18:28
@vojtapol no, systemjs doesn’t transpile on its own. The plugin is still valid. If the documentation isn’t up to date, it’s probably because the author is busy, or maybe you have found a problem in the documentation that nobody has noticed.
Vojtech Polivka
@vojtapol
Mar 15 2016 18:29
@laurelnaiad if systemjs does not transpile, what does transpiler: babel mean then?
Daphne Maddox
@laurelnaiad
Mar 15 2016 18:30
Frank is the author of the typescript plugin, not the babel plugin. They are both transpilers. There is a means to use them together, but if you’re having issues, you might want to start with one before you work toward using both of them.
systemjs uses transpilers. It doesn’t do the tranpiling.
transpiler: ‘babel’ means use the babel transpiler :)
oh, I guess it’s supposed to be ‘plugin-babel’ though according to the readme.
Hua Do Gia Khanh
@khanhhua
Mar 15 2016 18:47
Do I need to config path for every node_modules/ package?
Thomas Sieverding
@Bajix
Mar 15 2016 18:48
@khanhhua Use JSPM
Hua Do Gia Khanh
@khanhhua
Mar 15 2016 18:49
I'm building an Angular2 app. It's created with angular-cli
Thomas Sieverding
@Bajix
Mar 15 2016 18:49
It’ll wire up your configuration automatically, and you avoid ever needing to reach into node_modules, which IMO is taboo
I don’t see any reason why angular-cli would be incompatible with JSPM
Hua Do Gia Khanh
@khanhhua
Mar 15 2016 18:50
I'll try
Thanks @Bajix
Thomas Sieverding
@Bajix
Mar 15 2016 18:51
angular-cli does look kind of awful though
Also, fun aside, angular-cli uses broccoli, so you could totally use my project broccoli-system-builder w/ it
It would be extremely easy to combine angular-cli + JSPM + broccoli-system-builder to get a best of both worlds experience
Hua Do Gia Khanh
@khanhhua
Mar 15 2016 18:54
What does it do @Bajix ? What do I benefit?
Thomas Sieverding
@Bajix
Mar 15 2016 18:55
You’d setup JSPM to write to a folder, say packages, then have an assets folder, and in your Brocfile you’d merge those two trees mergeTrees([‘assets’, ‘packages’])
That would let you segregate your assets really easily
Put your config file -> assets/system.config.js
Then use jspm to manage all of your dependencies, and utilize overrides where applicable
Hua Do Gia Khanh
@khanhhua
Mar 15 2016 18:58
Does Angular-CLI hide the brocfile? I don't see it
Thomas Sieverding
@Bajix
Mar 15 2016 18:58
For example, jspm install jquery-ui=github:jquery/jquery-ui -o "{ files: ['themes/base/*', 'ui/*']}”
Usually jspm install will be spot on, but you can use overrides to make your installs leaner, and to do things like pointing directly to the dist folder
jspm install highcharts -o "{ directories: {'lib': 'lib'}, files: ['lib/highcharts.src.js'], main: 'highcharts.src.js' }”
This highcharts override let me avoid 90mb in unnecesary downloads
It would work out of the box just doing jspm install highcharts FWIW
But this offers me greater flexibilty
Hua Do Gia Khanh
@khanhhua
Mar 15 2016 19:01
Cool. But let's slow down (cuz I'm not really familiar with JSPM nor Angular-CLI nor Broccoli)
Thomas Sieverding
@Bajix
Mar 15 2016 19:02
K
Hua Do Gia Khanh
@khanhhua
Mar 15 2016 19:02
Let me try a few things then I'll get back to you! Thank you so much!!!!! <3
Thomas Sieverding
@Bajix
Mar 15 2016 19:02
It looks awfully like they don’t know what they’re doing and created a hodgepodge build
Yea all the stuff they’re doing in angular-cli is simpler via JSPM + System
Hua Do Gia Khanh
@khanhhua
Mar 15 2016 19:34
How about "ng install"? Does it do any good?
Cole Diffin
@arcticShadow
Mar 15 2016 20:24

Hey all - Apoligies if this is a common question (Couldnt find an answer as yet) I’ve got a basic config that allows me to pull commonjs modules from the node_modules directory (among a bunch of other path specfic config) and when I include react, its complaining about ‘process’ being undefined. Seems like react is expecting envify to be run across it for browser use.

Whats the options here?

Thomas Sieverding
@Bajix
Mar 15 2016 20:25
@arcticShadow Don’t grab from node_modules. That shit’s insane
Use JSPM, it’ll do all the things automagically
Cole Diffin
@arcticShadow
Mar 15 2016 20:26
Argh I was really hoping that wasnt the answer
Thomas Sieverding
@Bajix
Mar 15 2016 20:26
It’ll also probably solve your process issue
process would be installed via JSPM as a dependency afterall
@arcticShadow Why were you hoping that wasn’t the answer?
This message was deleted
The biggest reason to use JSPM is so that you don’t have wire up config, it’ll spare you from that hassel
Thomas Sieverding
@Bajix
Mar 15 2016 20:31
It also simplifies dealing with edge cases in which modules don’t play nicely: You can utilize overrides for things like changing the lib directory to dist, or ignoring unnecessary assets
Here’s an example of JSPM being a life saver:
jspm install jquery.mobile=github:jquery/jquery-mobile -o "{ directories: { lib: 'js' }, main: 'jquery.mobile' }"
voila, [‘jquery.mobile/events/touch’] tyvm
Cole Diffin
@arcticShadow
Mar 15 2016 20:50
Was hoping not to use JSPM as we we started this project, we tied in JSPM and it created nightmares.
It caused all sorts of issues, and seem very counter intuitive.
Thomas Sieverding
@Bajix
Mar 15 2016 20:51
What kinds of issues?
Cole Diffin
@arcticShadow
Mar 15 2016 20:51
I’m trying to build a framework for our organisation to use, not a project for a single person to use.
Essentially, we have a 'web component’ concept that in ingrained into our company culture. Its closly aligned with what happens in the industry, but not quite the same.
I’m building a ‘loader’ that knows how to handle these components (and standard components i.e. react) and i need something that handles the dependencies
Thomas Sieverding
@Bajix
Mar 15 2016 20:53
What issues did you encouter w/ JSPM?
Cole Diffin
@arcticShadow
Mar 15 2016 20:54
Was almost impossible to work with programatically.
Was very difficult to get new people up and running
Thomas Sieverding
@Bajix
Mar 15 2016 20:54
What were you doing w/ it programmatically?
Cole Diffin
@arcticShadow
Mar 15 2016 20:54
was every so slightyl different from standard npm processes, and broke ocasionally when we tried to do somthing the npm way
was hard to diagnoise problems.
As mentioned, im building a framework, not a project standalone. Need to manbage it programatically to tie it into current build tools.
Thomas Sieverding
@Bajix
Mar 15 2016 20:56
I’m failing to see how JSPM wouldn’t be a huge asset in accomplishing that
You were running into quirks with dependency mapping?
Cole Diffin
@arcticShadow
Mar 15 2016 20:57

Oh - Our modules are either stored in a custom npm repo, or in a private git server on site - making it really hard to map them in.

All my experience is about 6-9 months ago. Perhaps the scene has changed considerabley since then

Thomas Sieverding
@Bajix
Mar 15 2016 20:58
Couldn’t you just use scoped dependencies?
This was solved on NPM’s end recently
npm private packages to the rescue
jspm install my-gallery=npm:@my-org/my-gallery
Cole Diffin
@arcticShadow
Mar 15 2016 21:00
If i’m think about the same thing your mentioneing, we looked at that a while back - but it wasnt me involved in that decision. (we decided against it)_
The dramas of working in a Enterprise company :-)
Thomas Sieverding
@Bajix
Mar 15 2016 21:01
It makes it so that you don’t have to do insane things when mapping internal dependencies
no more x-oauth-basic@github #master dependencies
Cole Diffin
@arcticShadow
Mar 15 2016 21:03
^ can’t say i’ve run across anythign crazy like that
Thomas Sieverding
@Bajix
Mar 15 2016 21:03
If anything, your problems are solved by using JSPM in conjunction w/ better private project management
There was a while in which we used to pass git repo + tags as dependencies
It was messy
Why do you need a custom npm repo?
npm shouldn’t be part of your deployment strategy
build yes, deploy no
Investigate JSPM again, take a look at it’s registry capabilities, switch over to using private packages, use public npm, build w/ docker so that npm isn’t a point of failure during deployment, save yourself all the headaches
Cole Diffin
@arcticShadow
Mar 15 2016 21:26
built with docker - could you expand on this point
Thomas Sieverding
@Bajix
Mar 15 2016 21:28
Do you know what docker is?
Cole Diffin
@arcticShadow
Mar 15 2016 21:28
I do
Just not sure how it ties itno private npm archetecure
^ or npm at all.
Thomas Sieverding
@Bajix
Mar 15 2016 21:29
So within your docker filer, you’d npm install & jspm install into a temp folder, then cp -a it into your app folder, and add your app
to make JSPM install work, you’d configure it within your docker file as well
Cole Diffin
@arcticShadow
Mar 15 2016 21:30
Ahh right got ya. . That wont work out of the box for me. Its still focused on a singlur project.
What im building is about 2% of a huge enterprise applicaiton. I have to stick within the deployment possibilities and abilities of the current system
Thomas Sieverding
@Bajix
Mar 15 2016 21:32
FROM mhart/alpine-node:5.8.0

ENV APP /var/www/node
ENV JSPM_GITHUB_AUTH_TOKEN <<< get this from jspm registry export github after doing jspm registry config github w/ an access token

RUN apk add --update git gcc g++ make python supervisor imagemagick

RUN npm install -g jspm && \
  jspm config registries.github.remote https://github.jspm.io && \
  jspm config registries.github.auth $JSPM_GITHUB_AUTH_TOKEN && \
  jspm config registries.github.maxRepoSize 0 && \
  jspm config registries.github.handler jspm-github

RUN npm install -g broccoli-cli
RUN npm install -g mocha
RUN npm install -g hiredis
RUN npm install -g broccoli-sass

# Supervisor Configuration
RUN mkdir -p /var/log/supervisor
ADD ./supervisor/conf.d/* /etc/supervisor/conf.d/

# NodeJS

ADD ./package.json /tmp/package.json

ADD ./vendor/system.config.js /tmp/vendor/system.config.js

RUN cd /tmp && \
  jspm install

RUN cd /tmp && \
  npm install

RUN mkdir -p $APP && \
  cp -a /tmp/node_modules $APP && \
  cp -a /tmp/jspm $APP

RUN apk del gcc g++ make && \
  rm -rf /var/cache/apk/*

# Application

ADD . $APP/

WORKDIR $APP

RUN node link.js

EXPOSE 3000

CMD ["/usr/bin/supervisord", "-c", "/etc/supervisor/conf.d/supervisord.conf"]
That’s basically what kind of setup I roll w/
I use supervisord to kick off my build when this boots up
Ideally, this would be done as a pre start hook with FleetCTL
Docker’s pretty much integral to any deployment strategy, regardless of size
Jarosław Cimoch
@jcimoch
Mar 15 2016 21:38

hi I’’m getting this error "TypeError: Unexpected anonymous System.register call.” using system.js and simple typescript module. What can I do wrong?
compiled ts:


System.register([], function(exports_1, context_1) {
    "use strict";
    var __moduleName = context_1 && context_1.id;
    var Dep;
    return {
        setters:[],
        execute: function() {
            Dep = (function () {
                function Dep() {
                    this.x = 4;
                }
                return Dep;
            }());
            exports_1("Dep", Dep);
        }
    }
});

and in html

  <script src="../node_modules/systemjs/dist/system.js"></script>
  <script src="scripts/config.js"></script>
  <script type="text/javascript" src="elements/my-element/Dep.js"></script>
Thomas Sieverding
@Bajix
Mar 15 2016 21:39
Please don’t make your node_modules folder publicly accessible. You’re killing kittens
Jarosław Cimoch
@jcimoch
Mar 15 2016 21:41
It’s just for testing. Should I normally copy dependencies in production to another folder for example with gulp and give acces only to them ? or is there better solution? But first qurestion is more important right now.
Thomas Sieverding
@Bajix
Mar 15 2016 21:43
The best solution IMO is to have an assets folder w/ your stuff + system.config.js, a packages folder setup w/ JSPM, and to use broccoli to merge those to folders, build intermediaries such as SCSS/less/templates, then do a System Build
You could do that with gulp too. I’m biased
And I don’t know why your module is having issues
Jarosław Cimoch
@jcimoch
Mar 15 2016 21:49
@Bajix could it be something with config?
System.config({
  baseURL: "/",
  defaultJSExtensions: true,

  map: {
    "polymer": "../bower_components",
    "webcomponentsjs": "../bower_components/webcomponentsjs"
  }
});
Thomas Sieverding
@Bajix
Mar 15 2016 21:51
Well, that’s awful, it’s so not worthwhile for you to manage that yourself
I don’t know why you’re running into that issue
Oh is that code you posted your deps source?
Or is that the output of System
Jarosław Cimoch
@jcimoch
Mar 15 2016 21:55
hmm I’m not sure what you mean, but It’s handwriten and included in index.html
Thomas Sieverding
@Bajix
Mar 15 2016 21:56
What is the raw source of elements/my-element/Dep.js
Jarosław Cimoch
@jcimoch
Mar 15 2016 21:58
oh, the raw source is posted here, the typescript source looks like this
 class Dep {
  x:number;

  constructor() {
    this.x = 4;
  }

}

export {Dep}
Thomas Sieverding
@Bajix
Mar 15 2016 21:58
You should do System.import(‘elements/my-element/Dep’) instead of loading the JS directly
Jarosław Cimoch
@jcimoch
Mar 15 2016 22:01
ok, that probably is the issue. Is there a proper way to include this imports? some tool to preserve proper order of importing etc?
Thomas Sieverding
@Bajix
Mar 15 2016 22:01
What? You’re thinking pre-dependency management
Your modules will be loaded by SystemJS accordingly, based off of your dependency tree
Jarosław Cimoch
@jcimoch
Mar 15 2016 22:02
So I do not bother the order of System.import , system.js handle this internall right?
Thomas Sieverding
@Bajix
Mar 15 2016 22:03
Literally, all you do is load system, your config, and import an entry point… the rest is all about having a sane dependency tree
absolutely
Jarosław Cimoch
@jcimoch
Mar 15 2016 22:03
thanks ! Sorry for stupid questions, this is my first attempt to this library ;)
Thomas Sieverding
@Bajix
Mar 15 2016 22:04
I see
no worries