I'm using Google Closure Template in order to write my application's UI using JavaScript. Look at this question for the detailed reason of why I'm using Google Closure Template. I want it to be multilingual. I see that there is a --locales switch and also looked at the samples provided in the project here and here. In the README_FOR_EXAMPLES files it is written that
+ simple_generated_en.js, features_generated_en.js,
simple_generated_x-zz.js, features_generated_x-zz.js
The JS files generated by SoyToJsSrcCompiler when it is executed
on simple.soy and features.soy (locales are 'en' and 'x-zz' with the translated XLIFF files from shared examples directory 'examples' and with the above compile-time globals
file). We need both simple.soy and features.soy because some of the templates in features.soy call the templates in simple.soy.
Note: For an example Ant target (and command line args) that
generates these files, please see target 'js-features-example' within the top-level 'build.xml'.
What I expected was that it would generate just one JavaScript code base which will use desired strings from the appropriate locale file based on an option provided at runtime before the template function is called. Is that possible with closure templates?
As far as I can see, you can use a dictionary-object as a parametr for your template.
/**
* #param dict
*/
{template .example}
<h1>{$dict.title}</h1>
<div>{$dict.content}</div>
{/template}
This object can be generated on the server-side from your locale file and transfered to javascript via script tag.
Otherwise you can load different compiled template file to the client side according to the locale.
There's also i18n possibility, but it's kinda useless for your problem, imo.
Related
I am currently trying to generate RTF documentation for HTML, JavaScript, and CSS files in a project, as I can do from Doxygen in the Java part of the project.
Javascript files are JSDoc commented, but I can change that to other format easily.
I am aware of JSDoc, ESDoc and YUIDoc. All of them generate HTML, although not all of them work well, YUIDoc, for example, skipped a lot of files due to filename problems. It seems that none of them deals with CSS files (or HTML).
I am also aware of pandocs. I imagine that is possible using JSDoc or ESDoc to generate HTML and them convert to RTF via Pandoc, but didn´t manage to do it yet.
Any other solutions? Anyone already did it?
Even a partial solution, such as only Javascript, will help.
You can maintain your workflow with Doxygen and still document javascript files using a proper filter and minor changes in your configuration file.
The Doxygen manual cites js2doxy.pl as a Perl script to help in js documentation but also alerts that the original author's page is currently unachievable.
You should find help in the filter at this link:
https://gist.github.com/sarnold/d6294abab8fb573fc49069de62fc549a
If you choose to use that link's filter, you will need node.js installed in order to run it. But you can choose to develop your own filter.
After you choose your filter you need to change your Doxygen config file to find and process javascript files.
Find the FILE_PATTERNS control tag in your original config file and adjust its value:
FILTER_PATTERNS =*.js=doxygen.js
Where doxygen.js must be the path to the desired javascript filter.
Find the FILE_PATTERNS control tag and include *.js among the terminations listed.
Change the INPUT tag to point to your source folder.
Finally, comment the js file using the patterns suitable to the filter. The doxygen.js filter uses the \\\ # style before functions and namespaces as in the following example:
/// #file Sync.js
/// #namespace Sync
/// Module for loading and storing data
var Sync = {
/// #function Sync.load
/// Loads an resource
/// #param {String} id the GUID of the resource
/// #param {Function} success callback to be executed with the data on suceess
/// #param {Function} error callback to be executed with error description in case of failure
/// Loads an resource
load : function (id, success, error) {
},
}
After that, you can run Doxygen and generate RTF like in the Java part of your project
I am trying to use google closure library for my web app's javascript. I have my JS script in static directory along with closure library:
static/
app.js
closure-library
JS code is combined into a single script using closure builder:
static/closure-library/closure/bin/build/closurebuilder.py \
> --root=./static/closure-library/ \
> --namespace="pr" \
> --output_mode=script \
> --output_file=./static/app-calc.js static/app.js
The backend is in Go. Script generated above is included in HTML as:
<script src="/static/app-calc.js"></script>
However, as soon as the page is loaded, deps.js is added to DOM after the above script tag:
<script type="text/javascript" src="deps.js"></script>
Since this file is added without any preceding path, browser this to load this script using current application URL.
Is there any way to change this behavior or prevent addition of deps.js?
As far as I can tell, since the entire library has been combined into a single file, there shouldn't be a need for this file. Closure docs about depswriter mention path being same as base.js, but since base.js is not even included, I don't see how that's suppose have any to effect on applicaton.
Closurebuilder is deprecated and you should use closure compiler directly instead. See How to use Google Closure compiler which covers many of your questions. The wiki page about Managing Dependencies has current details. Note that there is still a lot of old documentation about closure compiler that has not been updated for example https://developers.google.com/closure/library/docs/closurebuilder. Some of those pages are still relevant but others are out of date. The wiki at github is all up to date.
The deps.js file is only needed now for debugging when running directly from source code (without compiling). See https://github.com/google/closure-compiler/wiki/Debugging-Uncompiled-Source-Code.
The compiler will be able to take just the pieces of closure-library that you are using and combine it with your code.
Set a global variable or global object property "CLOSURE_NO_DEPS" to true. This will prevent base.js from attempting to load the deps.js file.
Details can be found in the code:
https://github.com/google/closure-library/blob/master/closure/goog/base.js#L19
Uncompressed jQuery file: http://code.jquery.com/jquery-2.0.3.js
jQuery Source code: https://github.com/jquery/jquery/blob/master/src/core.js
What are they doing to make it seem like the final output is not using Require.js under the hood? Require.js examples tells you to insert the entire library into your code to make it work standalone as a single file.
Almond.js, a smaller version of Require.js also tell you to insert itself into your code to have a standalone javascript file.
When minified, I don't care for extra bloat, it's only a few extra killobytes (for almond.js), but unminified is barely readable. I have to scroll all the way down, past almond.js code to see my application logic.
Question
How can I make my code to be similar to jQuery, in which the final output does not look like a Frankenweenie?
Short answer:
You have to create your own custom build procedure.
Long answer
jQuery's build procedure works only because jQuery defines its modules according to a pattern that allows a convert function to transform the source into a distributed file that does not use define. If anyone wants to replicate what jQuery does, there's no shortcut: 1) the modules have to be designed according to a pattern which will allow stripping out the define calls, and 2) you have to have a custom conversion function. That's what jQuery does. The entire logic that combines the jQuery modules into one file is in build/tasks/build.js.
This file defines a custom configuration that it passes to r.js. The important option are:
out which is set to "dist/jquery.js". This is the single
file produced by the optimization.
wrap.startFile which is set to "src/intro.js". This file
will be prepended to dist/jquery.js.
wrap.endFile which is set to "src/outro.js". This file will
be appended to dist/jquery.js.
onBuildWrite which is set to convert. This is a custom function.
The convert function is called every time r.js wants to output a module into the final output file. The output of that function is what r.js writes to the final file. It does the following:
If a module is from the var/ directory, the module will be
transformed as follows. Let's take the case of
src/var/toString.js:
define([
"./class2type"
], function( class2type ) {
return class2type.toString;
});
It will become:
var toString = class2type.toString;
Otherwise, the define(...) call is replace with the contents of the callback passed to define, the final return statement is stripped and any assignments to exports are stripped.
I've omitted details that do not specifically pertain to your question.
You can use a tool called AMDClean by gfranko https://www.npmjs.org/package/amdclean
It's much simpler than what jQuery is doing and you can set it up quickly.
All you need to do is to create a very abstract module (the one that you want to expose to global scope) and include all your sub modules in it.
Another alternative that I've recently been using is browserify. You can export/import your modules the NodeJS way and use them in any browser. You need to compile them before using it. It also has gulp and grunt plugins for setting up a workflow. For better explanations read the documentations on browserify.org.
jade permits you to simply write
include folder/file
to include code from another file.
Is it possible to add simply cut - copy style code from another file in node for javascript files?
Its for development purpose, to isolate some code and work on it seperately.
PS:- I'm aware of require('jsfile.js') and export.x = function(){..
The accepted answer is wrong.
Depending on whether node fs and eval were available at the time this question was written, the accepted answer was probably always wrong.
While not recommended, what you want to do is essentially possible:
Use node's built-in filesystem functions to read the file you want to "copy-paste" into the current file.
Use eval() to "paste" that file into your current file and run it as if it was part of the current file.
https://github.com/dennishall/node-require-without-require
Update 6 Oct 2020: Embarrassingly, the answer I've provided below is false.
I am not certain what were the circumstances for my writings below, as I was familiar with eval at the time (and a very long time before then), however, it is what it is :)
Read the answer that #Dennis wrote for the correct one.
You cannot merge (or include) a script file into another script file during runtime. Utilizing require is your best option to separate your application logic into multiple files.
JavaScript is an object oriented language, and what you are asking for is a solution to a problem that exists in procedural programming languages.
I suggest that you design your application in such a way that would allow you to separate its files into object types that take on different responsibilities instead of treating each file as a script within some global state.
To answer your other question, Jade is actually parsing its source files and therefore can provide its own file merging. If we apply this to our scenario, Jade is to jade source files as V8 is to JavaScript source files. Since the jade language is procedural, it makes sense to allow this kind of feature where in JavaScript (which is object oriented) it doesn't.
I'd like to build my own, but I'm not sure about the best way to do it. A partial is a template that is only a part of another bigger template and which can be inserted into multiple other templates at will.
Templating itself is fairly basic, just string exctraction and concatenation, but clientside partials have me a little stumped.
Here are a few methods I thought about:
1,
I could write a javascript helper function that loads partials through ajax into some form of local storage I suppose, and all subsequent templates that require that particular partial would first look inside local storage. I think this method isn't very safe because local storage isn't always guaranteed. And if I can't save them into local storage, partials would result in too many ajax calls.
2, I could put them all into script tags inside my main html file. This would work reasonably well, especially with head.js (to enable parallel loading of script tags), but still - I think each script tag is a separate call to the server right? That doesn't exactly improve the situation.
3, I could put all templates into a single script tag (or html I guess) and manually filter through some kind of delimiter...like: "#template1(blabla template1 string) #template2(blablabla template2 string) and put those strings into globals.
This would result only into a single call to the server, all the rest is done on the client.
Suggestions? I have looked at existing templating engines, but I can't really determine how they do it. The code is pretty complicated
The approach I took to spec out template calls and on-demand loads for the spec/rewrite of jQuery templates is to pipeline it.
See section 9 of the (early) draft spec, and see the conformance suite tests at the bottom for an example of custom on-demand template loading (Testcase "Main calls and Loaded just in time!" is the relevant one).
The basic gist is that plugin loaders (written in JS) get to hook in between-parsing and compiling to inspect the parse tree. A plugin pass gets an object mapping template names to parse trees. If they see any partial template selectors (to use your parlance) they can try and load any unresolved templates using AJAX calls or file I/O on Node.js, and add the partials to the input object to cause the compiler to compile the just loaded partials along with the public templates.
Efficiency-wise, see the benchmarks. I'm in the process of migrating the code to github : https://github.com/mikesamuel/jquery-jquery-tmpl-proposal in case you want to collaborate.