(Solved) What is my mistake packaging my tiny jQuery plugin?


#1

As a way to show the problem I am encountering I have created a very, very trivial package and accompanying demo app and published them on Github: fliptext and fliptext-demo.
(You can see also the [Travis report] (https://travis-ci.org/warehouseman/fliptext) and the Atmosphere listing.)

fliptest/fliptest.js is the file that actually does something.

I am having no success following the Meteorpedia article paragraph “Packaging existing libraries >> jQuery libraries” that says, “… as simple as placing the library in the smart package and listing the appropriate files in package.js …”.

I have been able to get it to work two different ways, both of which seem wrong :

  1. Add a bit of Meteor to the plugin file
  2. Pull a bit of jQuery stuff out to a separate file

So, the first (current option) looks like this …

./fliptext/fliptext.js :

flipText = function(content) {
   var len = content.length;
   var result = new Array();
   for (var idx = 0  ; idx < len  ; idx++) {
     var cOld = content[idx];
     var cNew = FlipTable[content[idx]];
     var xdi = len -1 - idx;
     result[xdi] = (cNew == undefined) ? cOld : cNew;
   };
   return result.join('');
 };
Meteor.startup(function () {
   if (Meteor.isClient) { 
     (function ( $ ) {
      $.fn.flipElementText = function() {
         this.text(flipText(this.text()));
         return this;
       };
    }( jQuery ));
   }
});

The second option looks like this …

./fliptext/client/lib/compatibility/fliptext.js :

flipText = function(content) {
    var len = content.length;
    var result = new Array();
    for (var idx = 0  ; idx < len  ; idx++) {
      var cOld = content[idx];
      var cNew = FlipTable[content[idx]];
      var xdi = len -1 - idx;
      result[xdi] = (cNew == undefined) ? cOld : cNew;
    };
    return result.join('');
};

./fliptext/fliptext-jq.js :

Meteor.startup(function () {
if (Meteor.isClient) {

   (function ( $ ) {
    $.fn.flipElementText = function() {
        this.text(flipText(this.text()));
        return this;
      };
   }( jQuery ));
  }
});

It seems to me that the “$.fn.flipElementText” declaration belongs in the original source file, but no matter how I do it I get a “jQuery not found” error.

My question is – what is the correct way to do this that will work for any jQuery plugin?


#2

Is the problem that you can’t use jQuery? But when you put your code in a function passed to Meteor.startup, you can? If so, then you probably need to tell Meteor that your package depends on the jQuery package (api.use('jquery', 'client')).


#3

@Peppe_LG

Thanks for the tip! You are correct that that was missing, and that it is necessary. I’m not sure why I removed it; I can see that I had it in there in the beginning.

Unfortunately, adding it does not solve the problem.

In the file fliptext.js at the bottom, commenting out lines 122-132 and uncommmenting lines 108-115 causes the error :

Reference Error:  jQuery is not defined

I tried to find a jQuery plugin adaptation in Atmospherjs that would give me some clues, but I don’t see one. I would be grateful for any suggestions.

Now I have to figure out why adding a commented section in that file breaks my Travis build.


#4

Based on what your package.js looks like, you want your package to work on both the client and the server, right? I fear that the jquery package only gives you the jQuery object on the client (source), so you’re in trouble. I guess you have to add the jQuery lib to the server side yourself.


#5

No, my plugin doesn’t need to work on the server.

Yes, that solves the problem.

Thank you very much. I greatly appreciate your help with that.