Svg.js: Import svgjs with rollup and typescript

[Mourdraug]

I'm trying import svg.js in my typescript bundled with rollup, this combo forces my module type to either es2015 or esnext so I'm going with the es2015. However, everything I tried so far failed either in tslint, rollup or client.
I'd guess right now I have intended es2015 import statement, example class:

import SVG from 'svg.js';

export class Visualization {
    private svg: SVG.Doc;

    constructor() {
        this.svg = SVG('vis');
        this.svg.viewbox(0, 0, 480, 360);
    }
}

This seems to pass tslint just fine, also allows atom to show autocompletion etc. Sadly rollup does not like it and throws up:

[!] Error: 'default' is not exported by node_modules\svg.js\dist\svg.js
https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module
src\vis.ts (1:7)
1: import SVG from 'svg.js';

I tried using 'rollup-plugin-commonjs' but somehow through commonjs context option of rollup does not work and client throws Cannot set property 'SVG' of undefined at me. Obviously, since root is undefined in this scenario, it's because of the line:

var SVG = this.SVG = function(element)

where this is undefined (normally rollup can rewrites this to undefined or context value in config, which I could set to window but it does not work in case of commonjs plugin)
If I replace above in bundled js to:

var SVG = window.SVG = function(element)

by hand it works, but fixing anything by hand is really inconvinient. Is there any better way to import it?

[saivan]

Sorry it took us so long to get to this. We recently discussed supporting es6, but as you noted; the current version of svg.js predates the currently widespread use of es6. Unfortunately, there isn't really a better way to do this at the moment, but we will be exporting default as soon as we can for you ;)

The devs on this project also don't use typescript too extensively, so we would happily except pull requests if you have a good way to implement this.

[Harti]

Sorry to bother, but would there be a current verbose workaround for importing svg.js into a file as a whole, so that I can use SVG()?

/edit:

Add this line to your tsconfig.json:

    "allowSyntheticDefaultImports": true,

(https://github.com/Microsoft/TypeScript-React-Starter/issues/8#issuecomment-301265017)

Then you can do the import like so:

    import SVG from "svg.js";

   ...

   this.svg = SVG('logo-canvas').size(this.width, this.height);

[Fuzzyma]

@Harti @Mourdraug In case it is urgent you can use the 3.0 branch which does use es6 and rollup. Should be easy to include it into your bundle.

[saivan]

Is this issue resolved for you with 3.0?

[Fuzzyma]

Its now possible. Just import the lib as you would normally do