New to the npm thing

[IJOL]

What do i need to do to use this module as part of a HTML page served from a remote HTTPD server..

Saludos, Ignacio J. Ortega

[neekfenwick]

I also had trouble here, so here's what I learned. I noticed that test/browser.html had a link to ../build/browser.js, rather than ./browser.js. Hacking this to load ./browser.js gave me an error about using import outside of a module, so I figure I'm missing a build step that would convert ES6 code. Looking in package.json showed me there is a 'build' step that uses gulp. So:

$ npm install -g gulp  # Install gulp globally
$ npm run-script build  # runs the gulp build step, produces `build` folder

Now I could see build/browser.js was a large file containing lots of generated Javascript, safe to run in a browser.

Then, loading test/browser.html in my browser could load ../build/browser.js successfully. Clicking the getSVG button failed silently, looking into the code you have to click the load button first so that an internal variable textToSVG is assigned properly (the code checks if it === null but it's undefined so this check fails to notice the problem).

However, trying to use this approach in my own code was a lot of trouble. I'm using Dojo and its AMD loader. So, I configure the loader (via data-dojo-config) to set a paths element, in my case the text-to-svg library has been cloned as a sibling of the core dojo module so its relative path to the loader is ../text-to-svg:

paths: { 'text-to-svg': '../text-to-svg' }

I can then require text-to-svg/test/browser', but that causes errors because that browser test script tries to attach event listeners to the buttons on the browser.html test page. So, I tried simply requiringtext-to-svg/build/indexand variations of that, but they all fail saying something likeexports is undefined`, or Dojo would insist it is 'not-a-module' because requiring it returned nothing useful. Nothing I tried would let me import the core text-to-svg library as a module.

In the end I have created a little .js file of my own alongside test/browser.js which only imports ../src and exposes it as a global variable:

/* eslint-disable no-undef */

import TextToSVG from '../src';

window.TextToSVG = TextToSVG;

Also had to edit the gulpfile.babel.js to copy the build step for test/browser.js. I don't know what magic it's performing but it seems required ot be able to use the generated .js file. Now, I can require text-to-svg/build/test/myfile.js and it works, I'm getting a path element generated in my browser which my code can convert to an SVG node and insert into my document.

It's not pretty, Javascript loaders are a complete pain :(

[sbraaa]

@neekfenwick : I did the same steps but it seems that obtained version lacks some methods. When I load the obj into browser I saw only load and loadSync methods (which obviously don't work). Where are getD, getPath and getSVG methods?

[neekfenwick]

@neekfenwick : I did the same steps but it seems that obtained version lacks some methods. When I load the obj into browser I saw only load and loadSync methods (which obviously don't work). Where are getD, getPath and getSVG methods?

It looks like you're seeing the methods described on the text-to-svg page at https://github.com/shrhdk/text-to-svg (or https://www.npmjs.com/package/text-to-svg) .. you use them as described there. For example, they say:

An example for loading font asynchronously.

// First argument is URL on web browsers, but it is file path on Node.js.
TextToSVG.load('/fonts/Noto-Sans.otf', function(err, textToSVG) {
    const svg = textToSVG.getSVG('hello');
    console.log(svg);
});

Where I use this approach, my JS that needs to turn a font into SVG does this:

window.TextToSVG.load('collage-designer/fonts/' + selFont, function (err, t2s) {
    // lots of code that cooks up the stuff to render, e.g.:
            var x = 0; y = 0;
            var dx = 0; dy = 0;
            var fontSize = self.sizeSelect.value;
            var kerning = 0;
            var anchor = 'center';
            var colour = '#000';

    // This actually generates the SVG
    var svg = t2s.getSVG(self.text, {
                x: x,
                y: y,
                fontSize: fontSize,
                kerning: kerning,
                anchor: anchor
            });
})

Hopefully this helps :)

[sbraaa]

thanks, so basically you suggest me to create custom method to load fonts ? Is this related by the fact the my object instance missed getSVG method? it sound strange to me...

[neekfenwick]

thanks, so basically you suggest me to create custom method to load fonts ? Is this related by the fact the my object instance missed getSVG method? it sound strange to me...

Not sure what you mean by 'custom method', I'm quoting the documentation of this module. The object you referred to didn't have a getSVG method because it's not in its implementation. You use the load or loadSync functions to load a font, and get a new object that has a getSVG method. If you look at the code https://github.com/shrhdk/text-to-svg/blob/master/src/index.js the load and loadSync functions are static on the class, so they can be called without an instance of the class, and they return an instance of the class.

This isn't my module, I wrote none of its code, I'm just using it the way it was designed :)