These are chat archives for systemjs/systemjs

17th
Aug 2015
λex Vincent
@alexisvincent
Aug 17 2015 09:27
To what extent can we provide custom transforms to the bundle pipeline?
Radoslav Petkov
@radpet
Aug 17 2015 09:50
Hello i am trying to import text via es6 module loader using the following syntax : 'some/text.txt!text' but it tries to load text.js not my text file
Peter Müller
@Munter
Aug 17 2015 09:55
!text means systemjs will load the module called text and use that as a plugin, which will in turn instruct systemjs how to load the actual source module some/text.txt. So if you haven't installed the test loader you get this error
Radoslav Petkov
@radpet
Aug 17 2015 10:07
@Munter what test loader are you talking about?
Guy Bedford
@guybedford
Aug 17 2015 10:46
@radpet you'll need to add https://github.com/systemjs/plugin-text/blob/master/text.js to your project
Ben Morton
@BTMorton
Aug 17 2015 11:04
Hi, is it possible to import code from a variable, rather than storing it in a file somewhere?
Guy Bedford
@guybedford
Aug 17 2015 11:06
@BTMorton you can programatically set modules int he registry via
System.set('module-name', System.newModule({ module: 'exports' }));
the above can then be imported normally
λex Vincent
@alexisvincent
Aug 17 2015 11:06
To what extent can we provide custom transforms to the bundle pipeline?
Ben Morton
@BTMorton
Aug 17 2015 11:07
cool, thanks very much
Guy Bedford
@guybedford
Aug 17 2015 11:07
@alexisvincent the bundle process doesn't provide any hooks above the standard module loader hooks
what sort of additions are you looking for?
λex Vincent
@alexisvincent
Aug 17 2015 11:10
Im writing an express middleware, and part of what Id like to do is inject src into the some js before its bundled.
So for instance it would be great if i had a way to add < function transform (src, filename, etc) >
A better option would a way to support module deps transform
transforms
so basically Id like to be able to run some inmemory transform on the src before its passed to bundle
Peter Müller
@Munter
Aug 17 2015 11:14
What kind of transform?
If it's happening in your express middleware and you also need it in bundling, isn't it the wrong abstraction to have it in a middleware?
Having written multiple transpiling middlewares myself I've found that express is a too high level to do it in
λex Vincent
@alexisvincent
Aug 17 2015 11:16
I dont follow. Basically we have the following. http://www.projectstorm.io/serve
It basically does dynamic browserify bundling based on what files you have already loaded in the browser
Peter Müller
@Munter
Aug 17 2015 11:17
Yup, thought so
I've been working with a similar ecosystem. The problem was always that when you want to consume build artifacts with anything else than a browser you have to redo all the work
λex Vincent
@alexisvincent
Aug 17 2015 11:19
Problem being that injecting a query on the js src elements in the index invalidates cache. And its not static . So you cant forinstance distribute the site for offline consumption
so
In walks System.
However.
I want to be able to still write transforms
Peter Müller
@Munter
Aug 17 2015 11:20
Could you be more specific about what you want to do? It's impossible to give a general answer
And you might be suffering from an XY problem we can't identify without specifics
λex Vincent
@alexisvincent
Aug 17 2015 11:22
It shouldnt be. I want to be able to transform the src in memory. And then pipe that to bundle. As far as I can see. Bundle walks the deep tree itself and thats its only entry point.
There are many examples
  1. Inlineing of assets
  1. building tooling around meta information in your src.
2.*
Mostly optimisation techniques.
Peter Müller
@Munter
Aug 17 2015 11:24
optimisation techniques should be applied separately imo
λex Vincent
@alexisvincent
Aug 17 2015 11:24
At what point
Guy Bedford
@guybedford
Aug 17 2015 11:24
@alexisvincent it may be worth just using the trace API from builder
λex Vincent
@alexisvincent
Aug 17 2015 11:24
As a file transform with a build dir?
Guy Bedford
@guybedford
Aug 17 2015 11:24
and then just running your own final bundling
λex Vincent
@alexisvincent
Aug 17 2015 11:24
IMO thats messy
Guy Bedford
@guybedford
Aug 17 2015 11:25
note there is also the single-file compilation api in the latest version
for individual file compilations
builder.compile('moduleName').then(function(output){})
to just compile a single file
effectively the only thing you need then is concatenation
which isn't something you need builder for
λex Vincent
@alexisvincent
Aug 17 2015 11:26
Im quite a fan of the deps arithmatic for bundling.
With the single file compilation am I able to pipe that to bundle afterwards?
Guy Bedford
@guybedford
Aug 17 2015 11:27
no it's a separate mode
the point is that bundling is designed to mirror the single-file loading
to ensure optimizations match the original behaviours
if you want to add custom behaviours, then add a custom hook to SystemJS itself
this can be done via
System.translate = ...
and in builder via builder.loader.translate = ...
or builder.reset(customSystemJSLoader)
λex Vincent
@alexisvincent
Aug 17 2015 11:28
The problem that I can immediately see is the following.
I started building a namespacing transform for js. So: require(‘\app\thing\file’);
But a transform to (‘../../app/container/thing/file’) would need to happen before the bundling process, I think, way before systemjs.
Also, If im wanting to inline things server side...
Guy Bedford
@guybedford
Aug 17 2015 11:31
systemjs drives the whole process, it's the lowest level
the loader hooks are the control for that
for example, that looks like a custom normalize hook you're implementing there
custom inlining can be done via a translate hook on the server
etc etc
λex Vincent
@alexisvincent
Aug 17 2015 11:33
I was under the impression that all the hooks happened client side
?
/*
  • load.name: the canonical module name
  • load.address: the URL returned from locate
  • load.metadata: the same metadata object by reference, which
  • can be modified
    */
    function fetch(load) {
    return new Promise(function(resolve, reject) {
    myFetchMethod.get(load.address, resolve, reject);
    });
    }
Appears to be a client call
@guybedford with translate happening after that
Unless the hooks happen both client side and then serverside with bundle?
Guy Bedford
@guybedford
Aug 17 2015 11:52
yes all hooks work both client and server
λex Vincent
@alexisvincent
Aug 17 2015 11:53
Oh fantastic! So I can work with the system object as I do in the browser?
Guy Bedford
@guybedford
Aug 17 2015 11:53
it's builder.loader for builds
yes
λex Vincent
@alexisvincent
Aug 17 2015 11:54
Guy Bedford you are probably my favourite person at the moment
Peter Müller
@Munter
Aug 17 2015 11:55
If you are doing things like inlining and other optimisation changes I still think some of them might be out of scope
But I guess I'm biased with all the build tooling I've been creating
λex Vincent
@alexisvincent
Aug 17 2015 11:56
The thing is. Serve handles that dynamically. I'll explain later. I have a meeting
@Munter I'd like to continue this
Peter Müller
@Munter
Aug 17 2015 12:00
@alexisvincent Sure thing. I'm always in this channel. Just ping me when you have time
Radoslav Petkov
@radpet
Aug 17 2015 12:11
@guybedford thank you very much i thought it is built in and works out of the box :)
Sharon (Sean) Rolel
@Mosho1
Aug 17 2015 13:23
Can I somehow see packages that had {build: false} but were found?
Dave Ackerman
@dmackerman
Aug 17 2015 14:44
is tehre a way to get around a pacakge that tries to load *.js as it’s module name? System tries to load *.js.js, and therefore fails
require('./dist/tc-angular-chartjs.js');
module.exports = 'tc.chartjs';
Guy Bedford
@guybedford
Aug 17 2015 14:49
@dmackerman if you're not using jspm, use package configuration to set the defaultExtension to js
Mike Haas
@mikehaas763
Aug 17 2015 17:00
When importing CJS modules that do not specify a file extension on their own imports, is the most appropriate solution to use defaultJSExtension: true?
For example, importing ngMockE2E.js which in turn does a require('./angular-mocks')
I tried doing this in the paths config 'node_modules/angular-mocks/angular-mocks': 'node_modules/angular-mocks/angular-mocks.js' but that does not work.
Guy Bedford
@guybedford
Aug 17 2015 17:16
@mikehaas763 it's best to use package-config defaultExtension if you're not otherwise using defaultJSExtensions
λex Vincent
@alexisvincent
Aug 17 2015 17:38
To what degree can we do bundle arithmetic. Eg ‘(app/*/ - common) & lala.js - moop'
Can we use parenthesis
Mike Haas
@mikehaas763
Aug 17 2015 17:39
Thanks. Wasn't familiar with that configuration
λex Vincent
@alexisvincent
Aug 17 2015 17:39
And then what is the binding preference?
or is it only really applicable to two parameters?
Jake Pusateri
@jakepusateri
Aug 17 2015 21:00
i'm trying to use the system-register-only build and i'm getting an error
it's saying normalizeSync isn't a function
and nowhere in the source for system-register-only does it define normalizeSync. it's there in the base system.js build
Jake Pusateri
@jakepusateri
Aug 17 2015 21:52
oh it looks like i was on 0.18.4
it's fixed in 0.18.10
Sharon (Sean) Rolel
@Mosho1
Aug 17 2015 23:29
Is IE9 still supported? I'm getting System is undefined, with system-polyfills.js