These are chat archives for systemjs/systemjs

21st
Jul 2016
Sean G. Wright
@sgwatgit
Jul 21 2016 01:53 UTC
You can using the systemjs text plugin (https://github.com/systemjs/plugin-text). I've used it with angular apps instead of using angular template cache building with a gulp process. i import the html template into the controller/component file. i can produce a bundle that includes those imported templates.
MeenakshiNainwal
@MeenakshiNainwal
Jul 21 2016 11:43 UTC
Does SystemJs automatically compiles all modules to bundles or is there a setting for that?
Peter Müller
@Munter
Jul 21 2016 11:45 UTC
Systemjs loads modules. Plus possible transpiling or other work per file, depending on loader plugins
systemjs-builder does bundlign on top of that
Jeff
@Jefftopia
Jul 21 2016 12:43 UTC

@sgwatgit Thanks, that plugin looks pretty nifty. I was just reading last night that TypeScript (which I use) 2.0 has the ability to directly import text files as strings. Haven't tried it out yet though.

Anyways, that makes for two good solutions now.

Jeff
@Jefftopia
Jul 21 2016 14:51 UTC
can anyone verify here whether the staticBuilder performs tree-shaking on modules?
If the answer is 'maybe', what does tree-shaking depend on?
Peter Müller
@Munter
Jul 21 2016 14:53 UTC
According to https://github.com/systemjs/builder/releases rollup is used, so you get tree-shaking
Jeff
@Jefftopia
Jul 21 2016 14:54 UTC
@Munter Thanks. Do I have to have es6 modules to use rollup, or will it work with es5? I'm currently compiling to es5 before I use the bundler.
Alexander Kalinovski
@akalinovski
Jul 21 2016 14:57 UTC
Hi, everyone! I am trying to use systemjs-builder. It generates the names of the modules like “1”, “2” etc. Is it possible to get human readable names according to file names?
So that I can re-use the bundle for other modules
Peter Müller
@Munter
Jul 21 2016 14:58 UTC
@akalinovski If you use the bundle command instead of bundle-sfx the module names will be retained
@Jefftopia Looks like it's es6 imports only according to the rollup docs
Alexander Kalinovski
@akalinovski
Jul 21 2016 15:00 UTC
@Munter I am using builder.buildStatic right now
Jeff
@Jefftopia
Jul 21 2016 15:01 UTC

@Munter gotcha, thanks.

@akalinovski use bundle, not build static.

Alexander Kalinovski
@akalinovski
Jul 21 2016 15:01 UTC
@Jefftopia ok, thank you
Alexander Kalinovski
@akalinovski
Jul 21 2016 15:52 UTC
Few more questions, guys. Is it possible to map somehow file extension to plugin? I want to inline my html templates and I want to import them but without adding ‘!text’. Also when I used this the bundle contains now "app/index.html!node_modules/systemjs-plugin-text/text.js” as a module name.
Peter Müller
@Munter
Jul 21 2016 15:53 UTC
@akalinovski the plugin syntax will likely be deprecated in the future. You can configure glob pattern matches for loaders
Jeff
@Jefftopia
Jul 21 2016 15:54 UTC
@akalinovski Are you using TypeScript?
Peter Müller
@Munter
Jul 21 2016 15:54 UTC
System.config({
  meta: {
    '**/*.html': {
      loader: 'text'
    }
  }
});
Alexander Kalinovski
@akalinovski
Jul 21 2016 15:54 UTC
@Jefftopia yes
@Munter Thank you. I see
Jeff
@Jefftopia
Jul 21 2016 15:57 UTC

@akalinovski I mentioned this earlier, haven't tried yet, but two things you can attempt to inline templates nicely are:

TypeScript 2.0/2.1

1)

import myTemplate: string from './location.html';

2)

export const myTemplate: string = `
<section></section>
`

....

import { myTemplate } from './location';
Alexander Kalinovski
@akalinovski
Jul 21 2016 15:57 UTC
Hm, looks nice
Jeff
@Jefftopia
Jul 21 2016 15:58 UTC
Let me know if the first one works. Downside with second option is no content assist since they're strings
Alexander Kalinovski
@akalinovski
Jul 21 2016 15:58 UTC
The second one is what I need
I want to have it inline only when bundling

Also I noticed that it requires to use

import {B} from './test2.ts’;

Instead of

import {B} from './test2’;

which is quite common. I know that there are some things like defaultExtension but not sure how this should be configured in this case…

Jeff
@Jefftopia
Jul 21 2016 16:00 UTC

you don't want to swap between templateUrl and template, that's way too messy. Just stick with template and use one of the above methods, whether you're doing dev or production build

IMHO of course :P

Are you usnig typescript runtime compiler? I do not recommend
I suggest compiling to JS for run time, even for development
Alexander Kalinovski
@akalinovski
Jul 21 2016 16:03 UTC
yes, I am always using templates (no template Urls). Previously we used webpack but it looks bad for some of our use-cases. There we used require(‘./index.html’) which means specific loader converting it to module or inline string
I need the similar functionality here
Jeff
@Jefftopia
Jul 21 2016 16:04 UTC
I agree btw, I strongly dislike two loader sytaxes, which is why I'm not on the webpack boat (yet).
I think you need something like this
map: {
     directory: directory
}


packages: {
    fileName:    { main: override_fileName, defaultExtension: js }
}
you don't need 'ts'
in imports
defaultExtension tells system what file to look for
idk, I'm still learning all this myself :D
Alexander Kalinovski
@akalinovski
Jul 21 2016 16:08 UTC
You said I don’t need typescript runtime compiler. Do I need to use transpiler: “typescript"?
Jeff
@Jefftopia
Jul 21 2016 16:10 UTC
This is completely a matter of opinion, but no, you don't need it.
tsc -w
will watch and rebuild for you on the fly, as you save changes.
So let typescript constantly recompile to js as you develop, then nix the transpiler options from your config file
If you follow the latest Angular 2 quickstart guide, they have this all setup for you
Alexander Kalinovski
@akalinovski
Jul 21 2016 16:14 UTC
I wanted to use gulp and systemjs-builder
To have more control
I want to have it everyhting built by systemjs including typescript so this can be customized using systemjs approach (loaders etc). So I can eventually achieve everything what webpack gives usually
Like inlining html, compiling sass etc
Jeff
@Jefftopia
Jul 21 2016 16:16 UTC
I see. Well, I don't think system can compile sass
good point though
Alexander Kalinovski
@akalinovski
Jul 21 2016 16:17 UTC
Didn’t try though
Jeff
@Jefftopia
Jul 21 2016 16:19 UTC
somehow doesn't work with ts :-/
according to docs
Alexander Kalinovski
@akalinovski
Jul 21 2016 16:20 UTC
Anyway the approach in general looks good. It’s good alternative to webpack.
Jeff
@Jefftopia
Jul 21 2016 16:22 UTC
at least for js and html :P any builder that doesn't force you to write your source a certain way to a winning builder imho
Alexander Kalinovski
@akalinovski
Jul 21 2016 16:32 UTC
Setting default extension for project folder as ‘ts' did the trick. But with this it fails on index.html :) Error on fetch for app/index.html.ts
System.config({
    baseURL: "./",
    typescriptOptions: {
        "module": "system",
        "sourceMap": true
    },
    transpiler: "typescript",
    meta: {
        '**/*.html': {
            loader: 'text'
        }
    },
    map: {
        "typescript": "./node_modules/typescript/lib/typescript.js",
        "text": "./node_modules/systemjs-plugin-text/text.js"
    },
    packages: {
        'app': { main: 'main.ts',  defaultExtension: 'ts' }
    }
});
app is project folder in this case
where all other things are located like html, images, scss files.
Alexander Kalinovski
@akalinovski
Jul 21 2016 16:41 UTC
It becomes working only with:
paths: {
        'app/*.html.ts': 'app/*.html'
    }
But it’s real hack
Alexander Kalinovski
@akalinovski
Jul 21 2016 16:55 UTC
Well, that works fine:
System.config({
    baseURL: "./",
    typescriptOptions: {
        "module": "system",
        "sourceMap": true
    },
    transpiler: "typescript",
    meta: {
        'app/*.html': {
            loader: 'text'
        }
    },
    map: {
        "typescript": "./node_modules/typescript/lib/typescript.js",
        "text": "./node_modules/systemjs-plugin-text/text.js"
    },
    paths: {
        "*": "*.ts",
        'app/*.html': 'app/*.html'
    }
});
Peter Müller
@Munter
Jul 21 2016 17:20 UTC
System can compile sass. There are two plugins for it. Both are using sass.js though, which I wouldn't recommend
However there are ways to run that compilation serverside, also in development. Then node-sass is suddenly available to write a plugin with
Thomas Sieverding
@Bajix
Jul 21 2016 17:23 UTC
If you want to use SCSS properly, your best bet is to build it externally and remap paths. sass.js doesn’t properly handle all import conventions, and is exceedingly slow
I use broccoli (broccoli-timepiece = win) to build my SCSS. Broccoli-eyeglass uses node-sass under the hood, and will resolve paths, so something like npm install bourbon —save would be all that’s necessary to be able to then do @import “bourbon”
var compileSCSS = require('broccoli-eyeglass');

var scssNode = new compileSCSS([
  'assets'
], {
  cssDir: '/',
  verbose: true,
  fullException: true
});

module.exports = scssNode;
"paths": {
  “assets/*.css": "./css/*.css"
}
You’d be essentially building into an intermediary folder, then remapping paths accordingly
Peter Müller
@Munter
Jul 21 2016 17:28 UTC
Write a node-sass plugin and use https://github.com/Munter/express-systemjs-translate as a middleware in your browser
Or just skip the whole transpiler builder watcher idiocy with a transpiling proxying filesystem like https://github.com/Munter/fusile
Yes, I do spend quite a lot of time in this area :P
Jeff
@Jefftopia
Jul 21 2016 17:46 UTC
@Bajix I haven't tried yet, but what happens to maps once you build a static bundle? Can you still map to different css directories?
Thomas Sieverding
@Bajix
Jul 21 2016 18:29 UTC
@Jefftopia I believe so. The approach I pasted would take something like assets/foo/bar.css and load it from css/foo/bar.css
Jeff
@Jefftopia
Jul 21 2016 18:32 UTC
@Bajix That's good to know. The same approach could be used for HTML templates then. I still prefer a world where everything can be seamlessly inlined though :P
Thomas Sieverding
@Bajix
Jul 21 2016 18:32 UTC
Yea, but this can only really be done server side
Jeff
@Jefftopia
Jul 21 2016 18:34 UTC
That's fine. It's pretty normal to have compile and build step. This is JavaScript maturing.
the web more generally maturing
Thomas Sieverding
@Bajix
Jul 21 2016 18:34 UTC
yep
Alexander Kalinovski
@akalinovski
Jul 21 2016 20:50 UTC
Is it possible to import ‘os' module from System.js? It’s built-in and used by node-sass. And It failed to resolve it if I am trying to use it for writing scss plugin.
The same for ‘path’, ‘util’ etc.
Alexander Kalinovski
@akalinovski
Jul 21 2016 21:55 UTC
Oh, nevermind. It’s because System.js requires some tricks for core node.js modules. Like using System._nodeRequire or jspm packages