These are chat archives for systemjs/systemjs

17th
Jul 2015
Rob Wormald
@robwormald
Jul 17 2015 00:01
app is the name of your package - like "angular" or "cheeseypoofJS"
i do the app -> src thing because often i want to switch directories (say, from src/ -> /dist ) and its a nice abstraction
Nate Mara
@natemara
Jul 17 2015 00:13
So I found that my issue was because the version of systemjs that I was using was somehow different than the one you put in the plnkr. I was using <script src="jspm_packages/system.js"></script> instead of the cdn link that you provided. Is there a way to verify that my version of system.js is correct?
Rob Wormald
@robwormald
Jul 17 2015 00:15
the stable version is 0.16 (which iirc doesn't do packages)
npm install -g jspm@beta gives you that (0.18)
Nate Mara
@natemara
Jul 17 2015 00:25
Thanks, that seems to be working for me
Rob Wormald
@robwormald
Jul 17 2015 00:30
that'll probbaly make some other stuff blow up so be sure to read the docs
Nate Mara
@natemara
Jul 17 2015 00:35
Yeah, it's now trying to get /src/main.ts.jsinstead of /src/main.ts. Is this expected behavior for using typescript files with systemjs? I'm trying to use jspm-server to hot-reload my files for dev, should system/jspm/jspm-server be compiling my ts files to js?
Rob Wormald
@robwormald
Jul 17 2015 00:36
this is where the package config is handy :)
Rob Wormald
@robwormald
Jul 17 2015 00:45
app: {
            main: 'main.ts',
            defaultExtension: 'ts'
          }
System.import('app')
Nate Mara
@natemara
Jul 17 2015 00:55

Thanks rob, that worked, but now I'm getting an error from typescript when it tries to load fs. I'm getting this in my chrome console:

Uncaught (in promise) Not Found: http://localhost:8080/fs.js
    Error loading http://localhost:8080/fs.js from http://localhost:8080/jspm_packages/github/mhegazy/typescript@1.5.0-alpha.js
    Error loading http://localhost:8080/fs.js
    Error loading http://localhost:8080/src/main.ts

And a similar error when I try to bundle outside of the browser:

 λ jspm bundle app dist/main.js

     Building the bundle tree for app...

err  Error: ENOENT, open '/home/nate/gocode/src/jumphub/web-client/fs.js'
        Error loading file:///home/nate/gocode/src/jumphub/web-client/fs.js from file:///home/nate/gocode/src/jumphub/web-client/jspm_packages/github/mhegazy/typescript@1.5.0-alpha.js
        Error loading file:///home/nate/gocode/src/jumphub/web-client/fs.js
        Error loading file:///home/nate/gocode/src/jumphub/web-client/src/main.ts

Any ideas?

Rob Wormald
@robwormald
Jul 17 2015 00:56
try jspm dl-loader typescript
Nate Mara
@natemara
Jul 17 2015 00:57
That did it! Thanks Rob, you've been super helpful!
Rob Wormald
@robwormald
Jul 17 2015 00:57
i should probbaly stop procrastinating and finish editing the egghead video i've been doing on this topic instead of hanging around in here answering the same question
Nate Mara
@natemara
Jul 17 2015 01:06

Is there something that I have to do to setup hot reloading? I keep getting the message

Change detected in src/main.ts that cannot be handled gracefully: Change occurred to a file outside SystemJS loading (index):164 Reloading in 2...

Rob Wormald
@robwormald
Jul 17 2015 01:15
not sure there. jspm-server is third party
Nate Mara
@natemara
Jul 17 2015 01:17
Alright, thanks
Rob Wormald
@robwormald
Jul 17 2015 01:21
what i do is build a bundle of everything except my src stuff
and then i'm only transpiling a few files instead of 500
Peter Müller
@Munter
Jul 17 2015 09:43
I need help with writing plugins. It looks really easy from the documentation. But it must be lacking, because I cannot for the life of me get underscore templating to work
So I have an underscore tempalte, which is a bastardized html syntax. Non-javascript compatible. I need to fetch this string without it being interpreted as javascript, then I need to stick the string into underscore.template to get back a function which will be the expected return value of the module load
What life cycles do I need to hook into, and what do I need to do?
Anton Moiseev
@antonmoiseev
Jul 17 2015 09:47
@robwormald thank you, now it's clear. I find it handy and elegant mapping app to src (or dist). The source of my confusion is that originally you mistyped src: 'app' instead of app: 'src':stuck_out_tongue:
Rob Wormald
@robwormald
Jul 17 2015 09:47
oh shit, apologies :D
Anton Moiseev
@antonmoiseev
Jul 17 2015 09:59
However I'm now thinking about your point on having a separate folder for tests. Probably it would be convenient if app and tests would be living under a common directory like src. This way I can specify a single rootDir in tsconfig.json for all my TS files. If I don't specify rootDir explicitly tsc picks up all .ts and .d.ts files in the project which generates lots of warnings/errors and generally not desirable.
Rob Wormald
@robwormald
Jul 17 2015 10:02
i use files and atom keeps it in sync, but its all pretty flexible
im off. good luck
Anton Moiseev
@antonmoiseev
Jul 17 2015 10:03
ok, thanks
Peter Müller
@Munter
Jul 17 2015 10:55
ok, think I got it. underscore/lodash template plugin will be open sourced in a few minutes
Albert Fernández
@albertfdp
Jul 17 2015 12:09
@guybedford we have just published the undercore/lodash template plugin, you can find it here in github https://github.com/podio/plugin-jst and in npm as plugin-jst
Guy Bedford
@guybedford
Jul 17 2015 12:41
@albertfdp @Munter awesome, I've added it to the SystemJS readme and in the jspm registry for jspm install jst
Albert Fernández
@albertfdp
Jul 17 2015 12:43
Awesome, thanks! :grin:
Peter Müller
@Munter
Jul 17 2015 13:02
@guybedford We're about to be done with out configuration migration from requirejs to systemjs. No everything uses the same names and we're close to starting a feature flip to run both in parallel. Just need our plugins to work :)
Guy Bedford
@guybedford
Jul 17 2015 13:05
That's amazing to hear, just let me know if you need any help on the plugins at all.
Peter Müller
@Munter
Jul 17 2015 13:05
Actually running into a problem right now
Have a plugin that does some convenience: componentName!component --> components/componentName/componentName.jsx
I have that conversion working in a locate hook in a component plugin
How to I tell systemjs to run babel on the resulting file?
Guy Bedford
@guybedford
Jul 17 2015 13:07
just set load.metadata.format = 'esm' in the plugin hook
Peter Müller
@Munter
Jul 17 2015 13:09
That does something. Not the right thing. What this file is is actually an amd format file with jsx in it. Any tricks here other than implementing my own jsx plugin also?
Guy Bedford
@guybedford
Jul 17 2015 13:14
right, then you'd need to use a custom jsx plugin here
for composition what's advised is to "extend" plugins like classes
Peter Müller
@Munter
Jul 17 2015 13:14
No problem. Would probably need that anyway in the transition to guarantee I run the same compiler until we're ready to go babel
Guy Bedford
@guybedford
Jul 17 2015 13:14
basically require a jsx plugin as a dependency, and call its translate hook after yours
Peter Müller
@Munter
Jul 17 2015 13:15
Right. We already did the same thing with the jst plugin, which does a bit more locally in Podio
Peter Müller
@Munter
Jul 17 2015 14:45
Debugging errors in plugins is extremely hard. I'm getting BadgeComponent.jsx:276 Uncaught SyntaxError: missing ) after argument list, but that line number doesn't get me anywhere relevant. The transpiled code looks exactly as the version that works in the requirejs setup. I can't break on errors on anything inside the loaders, so it really feels like working in the blind
Guy Bedford
@guybedford
Jul 17 2015 14:53
have you wired in source maps for your plugin?
Peter Müller
@Munter
Jul 17 2015 14:54
I tried. That just told me that the error is in source.js, which is empty in the sources tab
Guy Bedford
@guybedford
Jul 17 2015 14:54
source maps are enabled for plugins by setting load.metadata.sourceMap = sourceMap
Peter Müller
@Munter
Jul 17 2015 14:54
Now, I'm pretty unsure what format I am supposed to pass in to load.metadata.sourceMap
Guy Bedford
@guybedford
Jul 17 2015 14:54
just the plain source map object
that will make source maps work for builds and in the browser
Peter Müller
@Munter
Jul 17 2015 14:57
I'll create a quick repository to show my problems
Peter Müller
@Munter
Jul 17 2015 15:10
Is there a scaffold generator or something? It seems these days I keep making these demo repos and it's a lot of effort. Setting up npm, jspm, configuration, server etc
Guy Bedford
@guybedford
Jul 17 2015 15:11
there might be, I haven't followed the space too closely
Peter Müller
@Munter
Jul 17 2015 15:11
What do you do when you want to run a quick test?
I have a jspm-test folder that is a project I just install everything I want to test in
Peter Müller
@Munter
Jul 17 2015 15:13
Don't you risk tainting the global name space when running multiple things on the same page?
Guy Bedford
@guybedford
Jul 17 2015 15:13
there's no global risk, sub-dependencies are always encapsulated
there is a risk if the package names collide though
two jspm install jquery=asdf installs
but that only happens with custom aliasing like the above
Chris Bornhoft
@cbornhoft
Jul 17 2015 15:31
hello everyone
anything I can do to test that the System object is loading correctly?
Peter Müller
@Munter
Jul 17 2015 15:41
@guybedford ok, got it. This is where I'm at: https://github.com/Munter/system-plugin-jsx-bug
I'm getting the transpiled source, but the source maps aren't working
Guy Bedford
@guybedford
Jul 17 2015 15:59
yeah source maps always suck
it's really just about getting each detail right for it to work
Chris Bornhoft
@cbornhoft
Jul 17 2015 16:10
if I console.log the System object, no import method returns
only get, set, normalize, register and registerModule
Guy Bedford
@guybedford
Jul 17 2015 16:12
@Munter thanks managed to catch a few issues there around this!
@cbornhoft that isn't SystemJS - that is Traceur's version of System
Chris Bornhoft
@cbornhoft
Jul 17 2015 16:13
@guybedford I have systemjs loading after traceur though
how do I get traceur to shut up lol
Peter Müller
@Munter
Jul 17 2015 16:19
@guybedford Awesome!
Chris Bornhoft
@cbornhoft
Jul 17 2015 16:21
hmm it's not traceur overwriting System, it's angular2
as soon as that's commented out, systemjs' System object is used
Chris Bornhoft
@cbornhoft
Jul 17 2015 16:31
isn't Angular supposed to use SystemJS as its loader, not overwrite it?
Guy Bedford
@guybedford
Jul 17 2015 16:48
That's true
that would happen if that Angular version includes Traceur's runtime
but if it's using the Traceur runtime then its a very old version of angular as I beileve they no longer build with Tracer?
Chris Bornhoft
@cbornhoft
Jul 17 2015 17:12
it's angular2 alpha 31
most recent build
Bret Little
@blittle
Jul 17 2015 17:15
@guybedford was support for absolute paths ever added to the es6 module loader?
ModuleLoader/es6-module-loader#230
Peter Müller
@Munter
Jul 17 2015 18:12
@guybedford Before I forget. We just ran our code for the first time. Turns out requirejs code with named defines don't get properly picked up as AMD by Systemjs:
define('namedModule', function(require) { ... });
I know it's not recommended, and our solution was to get rid of that piece of legacy. Just a heads up that people will probably run into this during migration
Peter Müller
@Munter
Jul 17 2015 23:31
@guybedford Woot! I think I have my migration almost working now. My jspm_packages all load, my own source code loads, my underscore templates load, all loaders are amd syntax compatible. Only got like 7 errors left on a page load with around 800 module loaded assets. Something with the result of the jsx transpilation. Getting really close...