Default yeoman project scaffolding for UI, throws error & on fix default bookmarklet fails

[dom-devel]

I'm having some problems trying to get the default bookmarklet with custom UI yeoman environment working. My JS isn't great and I'm struggling to be debug any further. Was hoping someone here might be able to help.

• The non-UI yeoman default bookmarklet with just a single file successfully works.
• The non-UI yeoman default bookmarklet with multiple files successfully works.
• The UI yeoman default bookmarklet fails.

The default project with UI creates the following production bookmarklet (which I added in a console.log("Hello world") but otherwise didn't touch), doesn't print anything to the console.

javascript: (function(t) {
    var e = {
            reExec: !1,
            eval: '"(function(){artoo.stylesheets[\\"..\\templates\\\\bookmark.tpl\\"]=\\";(function(undefined) {artoo.templates[\'bookmark.tpl\'] = \\\\\\"<div>\\\\\\\\n  <p>Hello World</p>\\\\\\\\n</div>\\\\\\\\n\\\\\\";}).call(this);\\"}).call(this),function(){artoo.stylesheets[\\"bookmark.css\\"]=\\";(function(undefined) {artoo.templates[\'..\\\\\\\\stylesheets\\\\\\\\bookmark.css\'] = \\\\\\"p {\\\\\\\\n  color: red;\\\\\\\\n  font-size: 14px;\\\\\\\\n}\\\\\\\\n\\\\\\";}).call(this);\\"}.call(this),function(){artoo.stylesheets[\\"..src\\test.js\\"]=\';(function(undefined) {artoo.templates[\\\\\'..\\\\\\\\src\\\\\\\\test.js\\\\\'] = \\"(function($, undefined) {\\\\\\\\r\\\\\\\\n\\\\\\\\t// Code goes here...\\\\\\\\r\\\\\\\\n\\\\\\\\tvar ui = new artoo.ui({\\\\\\\\r\\\\\\\\n\\\\\\\\t\\\\\\\\tstylesheets: [\\\\\\\\\\"bookmark.css\\\\\\\\\\"]\\\\\\\\r\\\\\\\\n\\\\\\\\t});\\\\\\\\r\\\\\\\\n\\\\\\\\tconsole.log(\\\\\\\\\\"Hello world\\\\\\\\\\");\\\\\\\\r\\\\\\\\n}.call(this, artoo.$));\\\\\\\\r\\\\\\\\n\\";}).call(this);\'}.call(this);"'
        },
        o = !0;
    if ("object" == typeof this.artoo && (artoo.settings.reload || (artoo.log.verbose("artoo already exists within this page. No need to inject him again."), artoo.loadSettings(e), artoo.exec(), o = !1)), o) {
        var s = document.getElementsByTagName("body")[0];
        s || (s = document.createElement("body"), document.documentElement.appendChild(s));
        var n = document.createElement("script");
        console.log("artoo.js is loading..."), n.src = "//medialab.github.io/artoo/public/dist/artoo-latest.min.js", n.type = "text/javascript", n.id = "artoo_injected_script", n.setAttribute("settings", JSON.stringify(e)), s.appendChild(n)
    }
}).call(this);

How did I get here?

I've followed the basic tutorial instructions:

- yo artoo
? What will be the name of your bookmarklet? test_artoo_css
? How would you describe your bookmarklet? An artoo.js bookmarklet.
? What kind of bookmarklet do you need to build? A bookmarklet injecting its custom UI
? Will you need HTTPS support? No
- gulp boo

But first the build fails:

[21:37:14] Warning: gulp version mismatch:
[21:37:14] Global gulp is 3.9.1
[21:37:14] Local gulp is 3.8.11
[21:37:15] Using gulpfile ~\Documents\Development\Consulting Scripts\artoo\artoo_bookmarklets\test_artoo_css\gulpfile.js
[21:37:15] Starting 'build'...
[21:37:15] Starting 'bookmark.dev'...
[21:37:15] Starting 'bookmark.prod'...
[21:37:16] Finished 'bookmark.dev' after 152 ms

internal/streams/legacy.js:59
      throw er; // Unhandled stream error in pipe.
      ^
Error
    at new JS_Parse_Error (C:\Users\Dominic\Documents\Development\Consulting Scripts\artoo\artoo_bookmarklets\test_artoo_css\node_modules\gulp-uglify\node_modules\uglify-js\lib\parse.js:196:18)
    at js_error (C:\Users\Dominic\Documents\Development\Consulting Scripts\artoo\artoo_bookmarklets\test_artoo_css\node_modules\gulp-uglify\node_modules\uglify-js\lib\parse.js:204:11)
    at parse_error (C:\Users\Dominic\Documents\Development\Consulting Scripts\artoo\artoo_bookmarklets\test_artoo_css\node_modules\gulp-uglify\node_modules\uglify-js\lib\parse.js:306:9)
    at hex_bytes (C:\Users\Dominic\Documents\Development\Consulting Scripts\artoo\artoo_bookmarklets\test_artoo_css\node_modules\gulp-uglify\node_modules\uglify-js\lib\parse.js:358:17)
    at read_escaped_char (C:\Users\Dominic\Documents\Development\Consulting Scripts\artoo\artoo_bookmarklets\test_artoo_css\node_modules\gulp-uglify\node_modules\uglify-js\lib\parse.js:347:49)
    at C:\Users\Dominic\Documents\Development\Consulting Scripts\artoo\artoo_bookmarklets\test_artoo_css\node_modules\gulp-uglify\node_modules\uglify-js\lib\parse.js:384:27
    at C:\Users\Dominic\Documents\Development\Consulting Scripts\artoo\artoo_bookmarklets\test_artoo_css\node_modules\gulp-uglify\node_modules\uglify-js\lib\parse.js:516:24
    at Object.next_token [as input] (C:\Users\Dominic\Documents\Development\Consulting Scripts\artoo\artoo_bookmarklets\test_artoo_css\node_modules\gulp-uglify\node_modules\uglify-js\lib\parse.js:543:36)
    at next (C:\Users\Dominic\Documents\Development\Consulting Scripts\artoo\artoo_bookmarklets\test_artoo_css\node_modules\gulp-uglify\node_modules\uglify-js\lib\parse.js:649:25)
    at subscripts (C:\Users\Dominic\Documents\Development\Consulting Scripts\artoo\artoo_bookmarklets\test_artoo_css\node_modules\gulp-uglify\node_modules\uglify-js\lib\parse.js:1302:13)

Which after some debugging figured out was due to an invalid hex character in ui.js. I have no idea what it is however, but deleting and re-creating as test.js works fine.

At this point the build succeeds but as mentioned above generates a bookmarklet that does nothing.

Environment notes

• Windows 10
• npm 5.9
• Global gulp is 3.9.1
• Local gulp is 3.8.11
• node v8.11.1

[Yomguithereal]

Hello @dom-devel. Dependencies of the yeoman scaffolder are quite old now. I need to check it to see what went wrong. Unfortunately I don't have time right now. Can you ping me next week so I investigate this?

[dom-devel]

Yes no problem, thanks for the quick response, will do. If it helps here is the ui.js file which is causing the issues encase it's platform specific problem.

https://drive.google.com/open?id=1ZQsW7pU6oJ7NkyXL1_y-xCm4IKWEkUOv

[dom-devel]

@Yomguithereal Here's the ping I just remembered to send!

[Yomguithereal]

I can't reproduce your error with a clean install on my end. But, if we read carefully the output of your shell we have:

[21:37:14] Warning: gulp version mismatch:
[21:37:14] Global gulp is 3.9.1
[21:37:14] Local gulp is 3.8.11

So it seems you have a local version of gulp conflicting with the one installed globally. Maybe this is the crux of your problem.

[dom-devel]

Revisiting this several months later with slightly more knowledge under my belt. Solving gulp errors unfortunately didn't fix my problem.

I did manage to get past this error by commenting out the uglify steps from production in the gulp file.

At that point I then get:

internal/streams/legacy.js:59
      throw er; // Unhandled stream error in pipe.
      ^
Error
    at new JS_Parse_Error (C:\Users\Dominic\Documents\Development\Consulting Scripts\artoo\artoo_bookmarklets\test_artoo_4_yeoman\node_modules\gulp-uglify\node_modules\uglify-js\lib\parse.js:196:18)
    at js_error (C:\Users\Dominic\Documents\Development\Consulting Scripts\artoo\artoo_bookmarklets\test_artoo_4_yeoman\node_modules\gulp-uglify\node_modules\uglify-js\lib\parse.js:204:11)
    at parse_error (C:\Users\Dominic\Documents\Development\Consulting Scripts\artoo\artoo_bookmarklets\test_artoo_4_yeoman\node_modules\gulp-uglify\node_modules\uglify-js\lib\parse.js:306:9)
    at hex_bytes (C:\Users\Dominic\Documents\Development\Consulting Scripts\artoo\artoo_bookmarklets\test_artoo_4_yeoman\node_modules\gulp-uglify\node_modules\uglify-js\lib\parse.js:358:17)
    at read_escaped_char (C:\Users\Dominic\Documents\Development\Consulting Scripts\artoo\artoo_bookmarklets\test_artoo_4_yeoman\node_modules\gulp-uglify\node_modules\uglify-js\lib\parse.js:347:49)
    at C:\Users\Dominic\Documents\Development\Consulting Scripts\artoo\artoo_bookmarklets\test_artoo_4_yeoman\node_modules\gulp-uglify\node_modules\uglify-js\lib\parse.js:384:27
    at C:\Users\Dominic\Documents\Development\Consulting Scripts\artoo\artoo_bookmarklets\test_artoo_4_yeoman\node_modules\gulp-uglify\node_modules\uglify-js\lib\parse.js:516:24
    at Object.next_token [as input] (C:\Users\Dominic\Documents\Development\Consulting Scripts\artoo\artoo_bookmarklets\test_artoo_4_yeoman\node_modules\gulp-uglify\node_modules\uglify-js\lib\parse.js:543:36)
    at next (C:\Users\Dominic\Documents\Development\Consulting Scripts\artoo\artoo_bookmarklets\test_artoo_4_yeoman\node_modules\gulp-uglify\node_modules\uglify-js\lib\parse.js:649:25)
    at subscripts (C:\Users\Dominic\Documents\Development\Consulting Scripts\artoo\artoo_bookmarklets\test_artoo_4_yeoman\node_modules\gulp-uglify\node_modules\uglify-js\lib\parse.js:1302:13)

Which appears because then characters aren't correctly escaped (note the single slashes in the final call) - ["..\src\ui.js"]

(function(undefined) {
	artoo.stylesheets["..\templates\bookmark.tpl"] =
		";(function(undefined) {artoo.templates['bookmark.tpl'] = \"<div>\\n  <p>Hello World</p>\\n</div>\\n\";}).call(this);";
}.call(this));
(function(undefined) {
	artoo.stylesheets["bookmark.css"] =
		";(function(undefined) {artoo.templates['..\\stylesheets\\bookmark.css'] = \"p {\\n  color: red;\\n  font-size: 14px;\\n}\\n\";}).call(this);";
}.call(this));
(function(undefined) {
	artoo.stylesheets["..\src\ui.js"] =
		';(function(undefined) {artoo.templates[\'..\\src\\ui.js\'] = "(function($, undefined) {\\n  console.log(\\"Hello\\");\\n  // Code goes here...\\n  var ui = new artoo.ui({\\n    stylesheets: [\\"bookmark.css\\"]\\n  });\\n}.call(this, artoo.$));\\n";}).call(this);';
}.call(this));

Possibly because of removing uglify although unsure at this point if that is doing the converting to bookmarklet.

I still can't this to work, I feel like I might've broken the bookmarklet conversion stage, but that's where I'm at.