(Grunt + Rollup + Babel) x non-relative directories = ARGH

First let me start with a big thank you sweet Jesus for finally finding the solution to my latest hair-puller, this rollup babel transpiling error:

babel couldn’t find preset “es2015” relative to directory

This was the situation:

I have a file directory structure which due to some integration with AEM, goes something like this (key files/folders to note are bolded):

source
> component specific files
– component
– hbs
– sass
– js
> shared site assets
– js
      – bundle.js
      – src
          – entry.js
– sass
– etc…
workflow
> node_modules
> gruntfile.js
> package.json, etc…

When I tried to implement the grunt-rollup module bundler, and added the babel plugin with ‘es2015-rollup’ set as the preset, as explained here and here and in any other config blog posts I could find (although granted, since rollup is relatively new there really aren’t all that many), I kept getting the error in red above.

My grunt task config was essentially identical to the how-to article:

rollup: {
      options: {
        plugins: function () {
          return [
            babel({
              exclude: './node_modules/**',
              presets: ['es2015-rollup'],
            }),
          ];
        },
      },
      main: {
        dest: 'build/main.js',
        src: 'src/main.js', // Only one source file is permitted
      },
    }

I tried uninstalling the plugin, rollup, presets, installing again, clearing my npm cache, using an absolute path for the present instead of the string, etc.

I had an idea that it had something to do with the fact that I was trying to transpile code that existed in a folder structure who’s parent was at the same level to the folder containing my gruntfile, because I read that babel will search the project hierarchy to find the preset. But I could not for the life of me figure out how to solve for that.

Until, finally! Ran across a post that solved a similar problem within a webpack config. It uses ‘require.resolve’ which as far as I can tell is a node utility that resolves the path relatively, or in node’s own words:

Use the internal require() machinery to look up the location of a module, but rather than loading the module, just return the resolved filename.

So my updated working grunt task now looks like:

rollup: {
 options: {
   plugins: [
     babel({
      exclude: './node_modules/**',
      presets: [require.resolve('babel-preset-es2015-rollup')]
     })
   ]
 },
 files: {
   'dest':'js/bundle.js',
   'src' : 'js/src/entry.js'
 },
}

And OMG thank you to the interwebs for all the random posts that led me finally to this solution!

Intern JS Testing not Publishing JUnit XML File?

Just another random issue I couldn’t find the answer to by googling and finally figured out.

Issue: You have used the Yeoman Dojo generator to init a dojo boilerplate project.

This generator includes the files necessary for using intern to do JS unit testing in your dojo AMD javascript.

You would like to integrate your results into a CI build, and need xml results in order to do that.

You follow the Intern user guide and put the following in the intern config file:

reporters: [
{ id: ‘JUnit’, filename: ‘report.xml’ }
]

You run grunt intern.

You get no report.xml.

You are sad and confused.

😦

Solution:

I suppose that Intern was updated after the yeoman generator was put together. If you look in “node_modules” you’ll see that it includes “intern-geezer”. Not “intern”. I do not know why this is. However, now you know what to do, uninstall “intern-geezer” and install “intern”.

in terminal, within the project folder :
“npm uninstall intern-geezer –save-dev”

then

“npm install intern –save-dev”

Then run your grunt intern task, and witness the new report.xml file created at the project root.

🙂

WordPress + GoDaddy = Problems

So here’s something that took about 4 hours of my life to figure out.

Situation: You have a go-daddy hosted wordpress site. You have made a child theme for said wordpress site. Theme works great. Make updates to child theme style.css; nothing fancy, just some regular old css.

Reload style.css to appropriate directory via sftp. Go to site.

Problem: No new styles!!! And in fact, old, crappy styles!

Try: flushing cache. Multiple times. Clearing browser cache. Multiple times. Inspect network calls; see that the old styles.css is being loaded (though it doesn’t exist anymore). Delete styles.css and reupload. Check child theme permissions to make sure nothing funky is going on there. Copy entire styles.css and paste into theme options > custom css. Load stylesheet explicitly via the header.php file. Google like crazy. Start to panic because site you are working on is the blog of the VP of your company.

Solution: Activate a different theme. Pause. Reactivate the correct theme.

Freaking GoDaddy or WordPress or whoever!!! Whoever is at fault I hate you!

creating <a> with jquery not working in IE8

Another strange defect raised and resolved. This time dealing with jquery and IE8 (everyone’s favorite browser).

ISSUE: In IE8, the following code was not adding the desired anchor tag to the page :

var viewLink = new $("<a class="bold" href='javascript:void(0);'>").html("View More");
viewLink.insertAfter(domElement);

The document is already loaded, and the domElement I’m trying to insert this after is definitely on the page. What gives?

Solution:
It appears (and I haven’t found any documentation to support this except trial and error) that IE8 has a problem with creating an anchor tag that includes attributes. I haven’t tested this with anything other than an anchor tag yet, but it definitely was the issue for this one.
Here’s the working code:

var viewLink = new $("<a>").html("View More").attr("href","javascript:void(0);").addClass("bold");
viewLink.insertAfter(domElement);

Hope that helps!

Dojo Evented Gotcha

As I continue to work through the world of Dojo Dijits, I have run across another gotcha that I couldn’t find any documentation on and therefore only fixed by trial and error. So here’s my contribution to the world by adding this documentation to the internets.

Scenario: You create a custom component, extending the dojo Evented per the documentation:

define(["dojo/Evented"], function(Evented){
  var MyComponent = dojo.declare([Evented], {
    startup: function(){
      // once we are done with startup, fire the "ready" event
      this.emit("ready", {});
    }
  });
}

However, you build upon the component and end up with something like this:

define(["dojo/Evented"], function(Evented){
  var MyModel = dojo.declare([Evented], {
    CURRENT_INDEX_CHANGE:"onCurrentIndexChange",
    currentIndex:0,
    dispatchEvent: function(evt){
      this.emit(evt, {});
    },
    getCurrentIndex:function(){
      return this.currentIndex;
    },
    setCurrentIndex:function(n){
      if(n != this.currentIndex){
         this.currentIndex = n;
         this.dispatchEvent(this.CURRENT_INDEX_CHANGE);
      }
    }
  });
}

AND THEN, you end up getting this error in your browsers console:

TypeError: target.ownerDocument is undefined

ending in bafflement. 😦

Reason:
“dispatchEvent” is used in dojo/on, which Evented extends, causing a conflict.

Solution! Rename your “dispatchEvent” function to something new, so you end up with:

define(["dojo/Evented"], function(Evented){
  var MyModel = dojo.declare([Evented], {
    CURRENT_INDEX_CHANGE:"onCurrentIndexChange",
    currentIndex:0,
    dispatchEventWTF: function(evt){
      this.emit(evt, {});
    },
    getCurrentIndex:function(){
      return this.currentIndex;
    },
    setCurrentIndex:function(n){
      if(n != this.currentIndex){
         this.currentIndex = n;
         this.dispatchEventWTF(this.CURRENT_INDEX_CHANGE);
      }
    }
  });
}

The end.

Building the Dojo Boilerplate

If you’re trying to use https://github.com/csnover/dojo-boilerplate and are getting the following error in the terminal when trying to build:
“-bash: build.sh: command not found”
You probably need to add “./” to “build.sh”. As someone not very Unix savvy this caused me hours of frustration.

So, to elaborate on the instructions under “Quick Start” found in the dojo-boilerplate github project –>

1. Clone the repository using git clone –recursive.
   [My addition: Or click “clone in desktop” on the right hand side of the git hub page]
2. Develop your project in src/ until it is amazing.
3. Run build.sh, which will create an awesome optimised build in dist/.
   [My addition: Do the following:
   1. Open the Terminal (assuming you’re on a Mac – sorry, can’t really help if you’re not)
   2. cd to the boilerplate directory – specifically, you can type “cd” and then, drag the dojo-boilerplate directory into the terminal. This is a shortcut to cd to that directory. Alternatively, you can explicitly type out the directory path, as in “cd /User/uName/dojo-boilerplate”, where “/User/uName/dojo-boilerplate” is the path to your dojo-boilerplate.
   3. then type “./build.sh” into the terminal.
   4. you should then see a ton of logs showing that something is happening. Be patient, after about a minute, you will see “Build complete”. Now everything should be compiled in the “dist” folder that was created.
4. Upload dist/ for millions of people the world over to enjoy.