Browserify compatibility / getting Inky running in the browser

[michaelmcandrew]

Hello folks,

I am working on an open source email composition client for CiviMail based on Inky but I am having difficulties getting inky to work in the browser using Browserify.

I am assuming that it is possible to run Inky purely in the browser as http://foundation.zurb.com/emails/inliner-v2.html is able to work its magic when I am offline.

To try and isolate the problem, I took the programmatic example from https://github.com/zurb/inky#programmatic-use and created this gist on requirebin: http://requirebin.com/?gist=ec5bc173559a850ef83f419a880fe7f1. Thiis is pretty much the same as I have been taking locally.

You'll notice that the console is reporting an error along the lines of:

7be4d22d-082a-4031-9201-119b0efd57ad:71345 Uncaught TypeError: Cannot read property 'prototype' of undefined
    at patch (blob:http://requirebin.com/7be4d22d-082a-4031-9201-119b0efd57ad:71345:53)
    at Object.<anonymous> (blob:http://requirebin.com/7be4d22d-082a-4031-9201-119b0efd57ad:71206:18)
    at Object.require.237../fs.js (blob:http://requirebin.com/7be4d22d-082a-4031-9201-119b0efd57ad:71443:4)
    at s (blob:http://requirebin.com/7be4d22d-082a-4031-9201-119b0efd57ad:27006:262)
    at blob:http://requirebin.com/7be4d22d-082a-4031-9201-119b0efd57ad:27006:313
    at Object.<anonymous> (blob:http://requirebin.com/7be4d22d-082a-4031-9201-119b0efd57ad:71907:10)
    at Object.require.240.buffer (blob:http://requirebin.com/7be4d22d-082a-4031-9201-119b0efd57ad:72175:4)
    at s (blob:http://requirebin.com/7be4d22d-082a-4031-9201-119b0efd57ad:27006:262)
    at blob:http://requirebin.com/7be4d22d-082a-4031-9201-119b0efd57ad:27006:313
    at Object.require.143.../filterSince (blob:http://requirebin.com/7be4d22d-082a-4031-9201-119b0efd57ad:61082:18)

Which is the same error I have been getting in my local set up.

If would be really ace if you were able to give me some pointers in the right direction / share any insight / build scripts for how you got your own online inliner working.

PS. There is not a lot in the CiviMail Inky Compose repo yet but I can upload and share more details with you if that would be useful.

Thanks a lot!
Michael

[michaelmcandrew]

Oh, it appears that your inliner is not actually processing any Inky tags. It is just inlining CSS. Hence I am less confident that I'll be able to get it working...

[michaelmcandrew]

Ooh, I see that you have made a browser only version: http://zurb.com/playground/slinky 😃

And that you made it using Browserify.

Browserifying the following worked for me (without having to pass any options to browserify).

var Inky = require('inky/lib/inky.js')
inky = new Inky()
convertedHtml = inky.releaseTheKraken('<container> <row> <columns> <p>Hello World!</p> </columns> </row> </container>')
console.log(convertedHtml)