Develop Reference

Setting up tap:i18n in meteor project

I'm currently trying to use the meteor package tap:i18n in my project. Unfortunately I'm not able to use it. When I use the underscore variable notation I get an unexpected token error in my browser. Otherwise the meteor app is staring without any errors.
I did not change anything else than described below. Do I have to add the tap:i18n package to my app loader in some way? (Sorry if this is a stupid question, I'm relatively new to meteor - but the tap:i18n docs don't say anything about it)
My document structure is as follows:
/
... all the other stuff not relevant for i18n support
/packages/package.js
/packages/package-tap.i18n
/i18n/en.i18n.json
I currently use a dummy template (in /client/templates/map.html)
<ion-view title="{{ _ 'map_tab_title' }}">
</ion-view>
the file en.i18n.json looks as follows
{
'map_tab_title': 'Map'
}
the package.js and package-tap.i18n file is as provided in https://atmospherejs.com/tap/i18n#setup-tap-i18n with slight changes due to the language file. Additionally I had to move the files to the /packages sub-directory (and changed the *.i18n.json path accordingly) because otherwise meteor was throwing an error when starting the project.

How to include external Javascript library in an Ionic 2 TypeScript project?

I build an Ionic Project using Ionic 2, Angular 2 and TypeScript to test the framework a bit. I need to include an external library (ntc.js) to my project, since I need it to name hex colors.
I know including a Javascript library to TypeScript should work, since whatever works in JS works in TS. I just don't want to include it the wrong way.
I tried to add the library to www/build/js, but it doesn't seem to work and it doesn't seem like the good way to do this. I tried to search for ways to do this but found nothing (might be because Angular 2 and Ionic 2 is still fresh).
Things like :
import * as ntc from '../../js/ntc';
doesn't seem to work as well, even if my library is located at the right place. TypeScript doesn't seem to read my file properly, if it reads it at all.
What is the good way to do this? Where should I place my .js file in my project directory?

You import it by adding it to your index.html like any other regular javascript file.
Then in your ts file you do:
declare var Tree:any;
Then in your code, you can use the Tree variable, albeit it exists in the Javascript file. this line of code is basically telling the typescript compiler there is a variable out there Tree which it should ignore.

Besides doing a declare var which tells ts that the variable exists you can use typings of typescript.
By writing
typings install libraryname
In your console you get a file that already has declare var/class and you can see all of its functions/properties when you import it.
import {lib} from 'libraryname';

Ember dependencies "Uncaught TypeError: $(...).fitText is not a function"

I'm attempting to use a jQuery plugin (in this case 'fitText') in an Ember project.
In the ember-cli-build.js (that replaced the Brocofile recently...) - I import the dependency (which I have already installed with bower).
/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
// Add options here
});
app.import('bower_components/fittext/fittext.js');
return app.toTree();
};
In my console, I can type in 'fitText' and I DO get the object back. So, it's global now, and I should be able to use it anywhere. BUT "Uncaught TypeError: $(...).fitText is not a function"
#Tom Netzband pointed out that the bower version of fitText was the one that #adacio maintains and is vanilla JS. I've since switched it out for a app.import('vendor/jquery.fittext.js'); (the JS is really only 20 lines or so)
Previously I needed to import it in the controller or route where I want to use it - but the docs don't reference that anymore. In the docs with moment.js as the example, it seems to become a global.
I've put it in the ready hook in app.js - next to similar jQuery things that work fine... but no luck. In this case I only want to affect a few words on the index.hbs / route
UPDATE
This has really just become another question now. I thought it was still the same problem but it's not. So awarding answer and asking a new one. Thanks.

It looks like bower install fittext doesn't install the jQuery plugin version of fitText, it only installs the plain js version of it.
If you look at your bower_components/fittext/fittext.js file, you'll see jQuery isn't passed in or used, and the example from the example.html file shows usage as being:
fitText(document.getElementById('fittext'), 1.2)
So if you want the jQuery version you might have to download it straight from github and throw it in your vendor folder and include it outside of bower.
UPDATE
Looks like the version registered with bower is a forked version from the jQuery version where jQuery has been removed: https://github.com/adactio/FitText.js

There is in fact a Bower version of the jQuery version of the library.
bower install FitText.js --save

I think Dave Rupert has a jQuery version in his crates as well.
$ bower install jquery-fittext --save

path has no method 'parse' in Meteor JS

I have tried this code in meteor js but it will display error "TypeError: Object #Object> has no method 'parse'"
path = Npm.require('path')
filename = path.parse('/home/user/dir/file.txt')
but in the documentaion in node js parse method should exisit in path library http://nodejs.org/api/path.html#path_path_parse_pathstring
Any tips?

The docs default to the current version of node, however meteor typically uses and older version. You can determine which version of node meteor is currently running by looking at the changelog. For v.1.0.3.2 it's node v0.10.33. You can access the old docs here:
http://nodejs.org/docs/v0.10.33/api/
As you can see, the older version of path did not have the parse function. You can also see this via:
console.log(_.keys(path));
If you want to know what version you are using, this post will help you :
How can I know the version of node being used by my meteor app?

How can i get Object.assign() to work in the browser when using 6to5?

I'm using the 6to5 transpiler. When I try to use Object.assign() in my code, I get the following error: Uncaught TypeError: Object.assign is not a function. How can I enable this functionality?

In the latest release, where 6to5 has been renamed to Babel, you no longer need to do this. You can either configure it to use a polyfill or load the runtime. This is how I have set it up in gulp:
browserify({debug : true})
.transform(
// We want to convert JSX to normal javascript
babelify.configure({
// load the runtime to be able to use Object.assign
optional: ["runtime"]
})
);
You configuration should be pretty similar, no matter what tool you use. Using the package standalone would look like this:
require("babel").transform("code", { optional: ["runtime"] });
You can look at the documentation for runtime. Remember to update to the latest version of babel, though! It updates very frequently.

You have to include the browser-polyfill.js file:
Available from the browser-polyfill.js file within the 6to5 directory of an npm release. This needs to be included before all your compiled 6to5 code. You can either prepend it to your compiled code or include it in a <script> before it.
NOTE: Do not require this via browserify etc, use 6to5/polyfill.
http://6to5.org/docs/usage/polyfill/