Jade doesn't compile to Html when using i18next in Express (and Grunt) - node.js

I'm trying to compile jade templates to html but my terminal send me an error. (I'm using grunt and the npm grunt-contrib-jade).
In my jade file I have
span= .t("article.mainboxCategory")
I taped grunt jade and my terminal returns me
Cannot call method 't' of undefined
I read the documentation, but I'm not sure to understand what I can and need to put in my Grundfile or in my app.js (wich load Express and i18next).
Someone can help ?

Remove the point. Then it should work fine, imo.
span= t("article.mainboxCategory")
Currently you are trying to call the method 't' from the object ''. Which is obviously not defined since it's nothing.

Related

Browserify, Cannot read property '0' of undefined

I'm using fullpage.js in a project, and according to the plugin's documentation you must add the scrolloverflow.js dependency in order to use some of the plugin's options.
I'm trying to manage all that with Browserify and I'm facing an issue when it comes to add that dependency.
The 'require' part of my code is like so:
jQuery = require('jquery')
require('../vendor/scrolloverflow.min.js')(jQuery)
require('../vendor/jquery.fullpage.min.js')
When I run the code I get that error in console, which breaks all the script:
Cannot read property '0' of undefined
The error resides in the scrolloverflow.min.js script. Not having that much of experience with Browserify I guess the problem has something to do with the way I'm requiring the script, but don't have any idea how to fix that.

TypeScript: Unexpected reserved word

I have a project in WebStorm IDE & Node.js. I created a file named "mongo-manager.ts" which I used in the routes\index.js file. It worked seamlessly.
Then I did 2 things:
WebStorm had always asked me whether or not to compile TypeScript to JavaScript and I had always ignored it, but then once I clicked on "yes" and since then after solving some errors it's compiling now ts files successfully to js.
I converted index.js into index.ts and now I still have index.js which is an output of the compilation.
Ever since then, when I try to run my app (using the triangular green button in WebStorm which in turn uses the command line: "C:\Program Files (x86)\JetBrains\WebStorm 11.0.1\bin\runnerw.exe" "C:\Program Files\nodejs\node.exe" bin\www), I get this error:
import mongodb = require('mongodb');
^^^^^^
SyntaxError: Unexpected reserved word
Now, there's no specific problem with the "import" statement because if I omit it, the next non JavaScript statement throws the same exception. It just tries to treat TypeScript like it was JavaScript.
I've found these questions:
Typescript: unexpected reserved word in PHPStorm,
Unable to import in typescript file in nodejs
They suggest either to use "tsc" rather than node.exe, or to make sure that I run with node.exe the js file rather than the ts file.
Now the thing is that the file that node.exe runs directly is "www" which is a JavaScript file and in turn calls app.js which is still JavaScript, but later the files index.ts and mongo-manager.ts are called, so I have a hybrid of both js and ts.
And another and most important thing is that my code has already worked seamlessly even though it's hybrid and without taking any of the suggestions in these questions, until I answered WebStorm "yes" to the question whether to compile TypeScript to JavaScript, which had always appeared.
Anyway, I only want my app working again, no matter how.
Any help will be profoundly appreciated!
You need to know differences between compilation error and runtime error. It seems that what you've experiencing is a runtime error. Please check out the JavaScript file being executed by Node.js.
Currently Node.js does not yet support ES6 module syntax, you need to have your module field in tsconfig.json to be commonjs. Ideally in your output JavaScript file, import mongodb = require('mongodb'); should be emitted as const mongodb = require('mongodb'); when targeting ES6 or var mongodb = require('mongodb'); when targeting ES5.

How to use babel runtime with large nodejs/express app

I want to use babel runtime in a big/complex nodejs app. I don't want to use the babel require hook because the app is big and when I have tried to use it I get the following error:
RangeError: Maximum call stack size exceeded
And I only want to transpile a few JS files, at least for now.
The babel docs are a bit cryptic for the runtime support. After installing babel-runtime, they provide:
require("babel").transform("code", { optional: ["runtime"] });
Where does that code get included? And is "code" truly just a string? I have tried to add that to my main app.js file (express 3 app). Unfortunately, that doesn't work.
I cannot totally understand your questions, but I think I can answer part of it.
As explained in the babel api, transform() function takes a string that is supposed to be source code to be transpiled, and returns an object including three properties:
code the code generated
map the source map for the code
ast the syntax tree
This means, if you want to transpile your code in a folder, for each file you want to transpile, you should read the file with fs utility, give it to transform() function, and write the value of the code property in the object returned, to your output folder.
To simplify the step to read files, you could use the function transformFile provided by babel.
As for the problem you mention with your express app, I cannot help, unless you provide more information.

NodeJS & mustache: how to get partials working?

I want to use mustache with node, but for some reason partials won't work: I've created 2 files, app.js and test.mustache, both in the same directory. Using a package.json file and npm I've installed the latest version of mustache for this project. The files look like this:
app.js:
var mus = require('mustache');
console.log(mus.render('test.mustache: {{>test}}'));
test.mustache:
This is a test
If I run node app.js I expect to get the following output: test.mustache: This is a test, but instead I just get: test.mustache:.
Other mustache tags do work as expected, and even the vows test of mustache doesn't report any errors.
What should I do to get this to work correctly?
Using node-inspector I've debugged the above application with Mustache. It turns out that Mustache doesn't automatically include the partial files, in contrary to what the manual implies (scroll down to partials). Instead you'll always need to provide the partials manually as the third argument to the render method.
FYI, this version of Consolidate.js supports partials: https://github.com/simov/consolidate.js
Consolidate makes it easy to use many templating engines inside Express.js

Easy way to precompile Emberjs Handlebar templates with nodejs?

I'm enjoying emberjs a lot and would like to take the next step in a couple of my small, mobile apps and precompile my Ember/Handlebars templates as part of my build process.
I'd prefer to stay away from messing with Ruby and would like to use node.js as I'm more comfortable with using it.
I believe what I want to use is Ember.Handlebars.precompile, but unfortunately I'm unable to load the canonical ember.js file in a node environment. Example of a naive attempt from the node repl:
> var e = require('./ember');
ReferenceError: window is not defined
at /Users/jeremyosborne/git/projects/ldls/client/lib/emberjs/src/ember.js:5:1
at Object.<anonymous> (/Users/jeremyosborne/git/projects/ldls/client/lib/emberjs/src/ember.js:1596:2)
--- stack trace, you get the idea ---
I think I've already figured out how to set them up in my code so that they work correctly with my views, I just want to compile them in an environment outside of a browser DOM.
In lieu of getting the canonical ember.js to load in node, are there a specific set of files that I can pluck from the ember repo and use to compile my templates?
EDIT
I did a kluge fix that works great but gets an F for maintainability. I grabbed all the Handlebars code minus the reference to the window object. Then I followed with the Ember.Handlebars.Compiler code, replacing Ember.create with Object.create, exporting my Ember object, and viola things work seemingly great in node (as in it works and the functions produced are templates). But I don't consider this an answer to my own question due to the aforementioned maintainafail, so still open for answers.
EDIT 2
The above turns out to be a total fail. Perhaps there's something wrong in the procedure, but using Ember.Handlebars.precompile or Ember.Handlebars.compile doesn't work. The templates get made, but when I use the precompiled templates attached to Ember.TEMPLATES in my code, they do not work. I only seem to be able to get templates to work when they are explicitly passed in the modified script tags, as suggested on the emberjs.com site.
EDIT 3
I figured out what I was doing wrong. My answer is below.
I've written a grunt plugin called grunt-ember-handlebars that does exactly this. It pretty much mimics Garth's script, with one important difference:
It uses lib/headless-ember.js and lib/ember.js, which are maintained (at least for now) by ember.js to precompile default templates. If you don't want to use grunt, you can extract the relevant code from the precompile_handlebars helper in tasks/ember-handlebars.js.
Found a good enough solution to my problem that seems easy enough to maintain that I'll consider my problem solved.
Here's how I solved things:
Grab the minimal amount of code I need to precompile the ember templates.
Copy the contents of the ember handlebars into a file. This file is located at the emberjs repo: https://github.com/emberjs/ember.js/blob/master/packages/handlebars/lib/main.js
Within the code, find the one instance of window.Handlebars = Handlebars; and remove it.
Append the contents of the Ember template compiler and handlebar overrides. The file is located at the emberjs repo: https://github.com/emberjs/ember.js/blob/master/packages/ember-handlebars/lib/ext.js
Find all instances of Ember.create and change to Object.create.
Outline of the simple precompile procedure:
Load up the code with a var Ember = require('./my_ember_precompiler').Ember.
Get your templates as strings and compile them with var templateString = Ember.Handlebars.precompile(str).toString().
This will be different from app to app, but Ember seems to require registration of precompiled templates. After loading, for every created template, we need to register our templates. Basically wrap templateString in a call to Handlebars.template() and make sure this wrapped function is added to the Ember.TEMPLATES object.
The above is painless when it's automated in a script.
I've published a version of ember-precompiler with a similar interface to the handlebars command line utility. You can install it from NPM:
npm install -g ember-precompile
and then run it as:
ember-precompile template... [-f OUTPUT_FILE]
It does essentially what you describe (and what the gist versions do too): mock out the missing components needed to run Ember and Handlebars, compile the templates and add them to Ember.TEMPLATES.
Take a look at the npm package Ember-Runner
The following gist contains a nodejs build script that will precompile all .handlebars files in a given folder:
https://gist.github.com/1622236
I wrote an official precompiler npm module for anyone else who might be wanting to do this w/ a recent version of ember.js
https://npmjs.org/package/ember-template-compiler
It's simple to install and use (example below)
npm install ember-template-compiler
var compiler = require('ember-template-compiler');
var template = fs.readFileSync('foo.handlebars').toString();
var input = compiler.precompile(template).toString();
var output = "Ember.TEMPLATES['foo'] = Ember.Handlebars.template(" + input + ");";
Look at the code for the official ember-rails gem at https://github.com/emberjs/ember-rails
While it's not a node.js project, it does show you how to precompile the templates using the Rails 3.1+ asset pipeline, and it includes all the necessary Javascript code that you would need to do it in Node without having to hack together a solution that you'd have to maintain on your own.
More specifically, look at vendor/assets/javascripts/ember-precompiler.js and lib/ember-rails/hjs_template.rb
I'm far from an expert on Node (obviously, Rails is more my thing).. but I think those two files should point you in the right direction. Basically, you're going to want to concatenate ember-precompiler.js (which acts as a "shim" for lack of a better word) with ember.js and then call EmberRails.precompile to compile your templates.
window object can be mocked by jsdom
var jsdom = require("jsdom").jsdom;
global.document = jsdom("<html><head></head><body></body></html>");
global.window = document.createWindow();
global.$ = global.jQuery = window.$ = window.jQuery = require("jquery");
global.Handlebars = window.Handlebars = require('handlebars');
global.Application = window.Application = {};
require('ember.js');
and now you can run anything from Ember including Ember.Handlebars.compile

Resources