These are chat archives for systemjs/systemjs

22nd
Feb 2015
Guy Bedford
@guybedford
Feb 22 2015 10:46
@lmartins dynamic requires and static requires need to be distinguished in the browser because it is not possible to require synchornously due to synchronous XHR being deprecated in the browser (and a bad idea)
@lmartins rather call System.import in your code for this and ensure your rendering function can be asynchronous
if you really want sync this way, then you'd need to manually require all variations at the top of your code so they are statically loaded:
require('view1') // these are statically analyzable and loaded before the script runs
require('view2')
// now we can do:
require('view' + viewNum);
// since we already have the module ready from above
Alex
@whitecolor
Feb 22 2015 10:48
@guybedford what is the best way to override bulder loaders translate method?
Guy Bedford
@guybedford
Feb 22 2015 10:48
@whitecolor if it isn't working for ES6 that is a bug, I've posted ModuleLoader/es6-module-loader#313
with plugins
Alex
@whitecolor
Feb 22 2015 10:49
if I want to overrie for *.js ?
Guy Bedford
@guybedford
Feb 22 2015 10:50
what's the use case?
so you can do builder.loader.translate = ... once you've created a new builder
Alex
@whitecolor
Feb 22 2015 10:51
yes I did so, I just thought maybe it is supported in some diffrent way, in dev mode i just override System.translate
some sources are in format that is not supported by Systemjs, I just replace the code with this, a little bit hack, just temporary
Guy Bedford
@guybedford
Feb 22 2015 10:54
@whitecolor if it's another format thats what plugins are for
allowing plugins for files through configuration will be in the next SystemJS
I know the syntax doesn't always feel right, and is annoying to apply in bulk
BUT, if you add a custom normalize hook to add that and run through a plugin
you will have a much nicer upgrade path than a custom translate
Alex
@whitecolor
Feb 22 2015 10:55
@guybedford I mean the format of js
files are js, how can I hook a plugin for them?
Guy Bedford
@guybedford
Feb 22 2015 10:56
import 'file.js!plugin'
or through normalize -
This message was deleted
actually the normalize hook to apply a plugin doesn't work easily unfortunately due to recursive normalize calling
will work on this
James Campos
@aeosynth
Feb 22 2015 10:58
how do i get babel's jsx compilation working with es6-module-loader? do i have to write a plugin?
Guy Bedford
@guybedford
Feb 22 2015 10:59
Yes you can use a plugin
there's a jsx plugin at https://github.com/floatdrop/plugin-jsx
if you want to use Babel rather, you can write your own plugin that uses @babel in the translate hook
James Campos
@aeosynth
Feb 22 2015 11:00
does systemjs or jspm support jsx ootb?
Guy Bedford
@guybedford
Feb 22 2015 11:01
no that's been removed because the goal is for the ES6 layer to be deprecated in time, which won't happen if its using jsx
Aleksander Heintz
@Alxandr
Feb 22 2015 11:05
babel supports jsx ootb though
Alex
@whitecolor
Feb 22 2015 13:06
@guybedford why in css plugin load.metadata.format is set as defined not css for example? (i set format to defined in my less plugin and it works as css as expected, I just don't get why defined.
Aleksander Heintz
@Alxandr
Feb 22 2015 13:07
@whitecolor the format mainly regulates how systemjs in the end executes it
If you set it to defined, it processes it as a commonjs module
Meaning you can use require and module.exports
Alex
@whitecolor
Feb 22 2015 13:08
@Alxandr I don't get why my less plugin for builder works.
it works only if I set load.metadata.format = 'defined';
it bundles source and outputs as if it is css
Thtat is actually what is need, but the only relations between my less plugin and css plugin that they both has load.metadata.format = 'defined';
Aleksander Heintz
@Alxandr
Feb 22 2015 13:11
@whitecolor what's the source of your plugin?
I can't just guess
Alex
@whitecolor
Feb 22 2015 13:11
var css = require('css');
var less = require('npm:less@2.4.0');

exports.translate = function(load) {
    var options = System.less || {}

    // Add compress default `true` option
    options.compress = options.compress == undefined ? true : options.compress

    // Add baseURL directory and current file directory in the paths
    var base = System.baseURL.replace(/^file:/, ''),
        dir = load.address.replace(/[^\/\\]*$/, '').replace(/^file:/, '')

    options.paths = (options.paths || []).concat(base, dir);

    load.metadata.format = 'defined';

    return new Promise(function(resolve, reject){

        less.render(load.source, options, function (err, output) {
            if(err){
                console.error('less-plugin', err)
                reject(err)
            } else {
                console.log('css ok', load.address)
                resolve(output.css)
            }
        });
    });
};
Aleksander Heintz
@Alxandr
Feb 22 2015 13:13
Where do you use css
Also, you're expected to return JavaScript from translate. The browser will have a hard time trying to eval your css ^^
Try this
var css = require('css');
var less = require('npm:less@2.4.0');

exports.translate = function(load) {
    var options = System.less || {}

    // Add compress default `true` option
    options.compress = options.compress == undefined ? true : options.compress

    // Add baseURL directory and current file directory in the paths
    var base = System.baseURL.replace(/^file:/, ''),
        dir = load.address.replace(/[^\/\\]*$/, '').replace(/^file:/, '')

    options.paths = (options.paths || []).concat(base, dir);

    return new Promise(function(resolve, reject){

        less.render(load.source, options, function (err, output) {
            if(err){
                console.error('less-plugin', err)
                reject(err)
            } else {
                console.log('css ok', load.address)
                resolve(css.translate(output.css));
            }
        });
    });
};
Alex
@whitecolor
Feb 22 2015 13:16
this works actually as expected
css.translate only sets format
the same code
Aleksander Heintz
@Alxandr
Feb 22 2015 13:16
No it doesn't
Alex
@whitecolor
Feb 22 2015 13:17
while build yes it is
  exports.translate = function(load) {
    load.metadata.format = 'defined';
  }
Aleksander Heintz
@Alxandr
Feb 22 2015 13:17
Yeah, but, the bundle method handles the rest
Alex
@whitecolor
Feb 22 2015 13:18
yes and why bundle is called?
Aleksander Heintz
@Alxandr
Feb 22 2015 13:18
You just said you were building
Alex
@whitecolor
Feb 22 2015 13:18
yes why css's bunle method is called for this plugin?
where the relations?
Aleksander Heintz
@Alxandr
Feb 22 2015 13:19
For the less plugin?
Alex
@whitecolor
Feb 22 2015 13:19
yes
Aleksander Heintz
@Alxandr
Feb 22 2015 13:19
No clue. It is?
I would expect you would need to define your own delegating bundle method
Alex
@whitecolor
Feb 22 2015 13:19
As you see I don't
Aleksander Heintz
@Alxandr
Feb 22 2015 13:20
Yeah, but I didn't realize it actually got bundled
Alex
@whitecolor
Feb 22 2015 13:20
I thought that I wound need exports.bundle = css.bundle but it works without it
Aleksander Heintz
@Alxandr
Feb 22 2015 13:20
Just trace the calls through the system and see what happens?
Alex
@whitecolor
Feb 22 2015 13:21
how do I trace calls through the system?
Aleksander Heintz
@Alxandr
Feb 22 2015 13:21
node-debug node_modules/jspm/jspm bundle <bundle_args>
Might be node_modules/jspm/lib/jspm
Not entirely sure
Alex
@whitecolor
Feb 22 2015 13:23
I would retain from debug for now. It just works and would like to know why)
because it is not totally clear for me
Aleksander Heintz
@Alxandr
Feb 22 2015 13:23
Put a log inside the css plugin?
Wait, how do you import btw?
import 'foo.less!?
Alex
@whitecolor
Feb 22 2015 13:27
in production?
there is nothing to put in css plugin just one call for css.bundle when sources are ready
in dev code i import is as import 'foo.less! right
but I have another plugin for dev
this plugin that I sent is just for build
This message was deleted
Alex
@whitecolor
Feb 22 2015 13:48
Why there is no system-csp.js in the jspm_packages by default?
Guy Bedford
@guybedford
Feb 22 2015 14:21
by default the output of the translate hook is what is used in the bundle
the bundle method allows the css plugin to minify all the css together into one blob though, which is more compressible (redundant styles can be removed)
it's basically allows the plugin to control its own output instead of just relying on translate
system-csp used to be in jspm packages, but is pretty useless without plugin support
Alex
@whitecolor
Feb 22 2015 14:22
ah ok, so if I do exports.bundle = css.bundle for my less plugin it won't be exessive?
Guy Bedford
@guybedford
Feb 22 2015 14:22
working on methods to allow plugin csp buidls
i'm not sure that will work
actually it probably will!
nice
Alex
@whitecolor
Feb 22 2015 14:23
ok, I'll check for bundling
Guy Bedford
@guybedford
Feb 22 2015 14:23
yeah it will have a smaller output
Alex
@whitecolor
Feb 22 2015 14:23
ok)
I'm trying to make "SFX" with CSP included
so I should just pust csp code + buit code + System.improt('man/module')?
Guy Bedford
@guybedford
Feb 22 2015 14:26
SFX isn't compatible with System.import
sfx is like a bundle file - it's loaderless
Alex
@whitecolor
Feb 22 2015 14:26
yes I understand
I dont make it buildSFX, just build
I just called it SFX )
Guy Bedford
@guybedford
Feb 22 2015 14:27
ok right, yeah that should work
Alex
@whitecolor
Feb 22 2015 14:28
well it doesn't don know why
even if I just incnlude system-csp in script tag Uncaught ReferenceError: System is not defined
Guy Bedford
@guybedford
Feb 22 2015 14:28
you need to include es6-module-loader.js first
Alex
@whitecolor
Feb 22 2015 14:34
it seems system-csp tryting to load it by itself
Guy Bedford
@guybedford
Feb 22 2015 14:36
so systemjs will try to load es6-module-loader.js from the same folder if it can't see window.System already defined
for a single bundle you'd want to include es6-module-loader.js then system.js then the config.js then the bundle code and finally your System.import
Alex
@whitecolor
Feb 22 2015 14:37
SFX is only used when there is no need in System.import at all right?
Alex
@whitecolor
Feb 22 2015 14:46
@guybedford back to css/less, css.bundle is called even if not to do exports.bundle = css.bundle in less plugin, that's what I wanted to undertand why?
@guybedford no, I'm wrong it's called only with exports.bundle = css.bundle
Alex
@whitecolor
Feb 22 2015 15:15
@guybedford how to include plugins in the build?
Guy Bedford
@guybedford
Feb 22 2015 19:33
@whitecolor you mean you want the plugin itself to be included in the bundle?
Alex
@whitecolor
Feb 22 2015 19:34
@guybedford yes, for example if I want to load css or other resources?
isn't it common use case?
Guy Bedford
@guybedford
Feb 22 2015 19:38
right - are you running SystemJS builder manually?
Alex
@whitecolor
Feb 22 2015 19:39
@guybedford what you mean, yes I'm trying to tune the workflow.
Guy Bedford
@guybedford
Feb 22 2015 19:40
there's a third argument to the trace method which includes the traces of the plugins
if you use that then build that trace it will include the plugins themselves
Alex
@whitecolor
Feb 22 2015 19:42
So it will include plugins that are use for build, if I want to include another version for production?
Guy Bedford
@guybedford
Feb 22 2015 19:44
that would be build / production map config adjustments
I've also added systemjs/builder#89 to make this workflow easier
Alex
@whitecolor
Feb 22 2015 19:45
yes this is nesessary)