I am trying Eliom right now, to see what I can do with it.
I want to call an external javascript library from my eliom client code.
The example code I'm trying is the following:
[%%client
let three_lib = Js.Unsafe.js_expr "THREE" in
let scene2 = Js.Unsafe.new_obj three_lib##.Scene [||] in
let init () =
(Firebug.console##log three_lib : unit);
(Dom_html.window##alert (Js.string "scene2 created") : unit) in
init()
]
Equivalent to the simple javascript:
var scene2 = new THREE.Scene();
function init () {
console.log(THREE);
window.alert("scene2 created");
}
init();
A simple call to Three.js from OCaml code.
Now, I'm not 100% sure of the syntax yet, but what I observe is that THREE is undefined because this code is executed before loading Three.js.
How do I either: 1) include js files before the one generated by js_of_ocaml; or 2) include Three.js in the generated js file; or 3) other option?
Currently, the page is generated this way:
Eliom_tools.F.html
~title:"Main Page"
~js:[["lib";"three.min.js"]]
Html5.D.(body .... )
Thank you in advance
I found the origin of my problem and the solution.
I discovered that the problem was in the fact that by default, js scripts are included with the "defer" attribute (and thus interpreted after the page is fully loaded).
After much probing, I found a way to generate the page with a script interpreted before OCaml-generated js, it must be "manually" included:
Eliom_tools.F.html
~title:"Main Page"
~other_head:[Html5.D.script ~a:[a_src
(Xml.uri_of_string "lib/three.min.js")] (pcdata "")]
Html5.D.(body .... )
Related
I am trying to use require.js to load my modules dependencies and so far it is working, but I have a doubt. I've created a little function to test the modules and placed it in a file called panelTest.js:
define(['./panel/View', './panel/TitleView'], function(View, TitleView) {
return function test(container) {
// main view
var panel = new View(container, 'main');
var panelTitle = new TitleView(panel.getContainer(), 'main-title');
panelTitle.setTitle('Properties Panel');
//panelTitle.addCss('pjs-panelTitle');
panel.addView(panelTitle);
// sections
var top = new View(panel.getContainer(), 'top');
panel.addView(top);
var middle = new View(panel.getContainer(), 'middle');
panel.addView(middle);
var bottom = new View(panel.getContainer(), 'bottom');
panel.addView(bottom);
};
});
In the html that uses the modules I included this script tag as shown in the require.js documentation to load panelTest.js.
<script data-main="panelTest.js"
src="require.js"></script>
My question is how can I call the test function from outside the module, since the container parameter it is supposed to come from outside the module.
You have to access the module through the appropriate channels provided by RequireJS. You could do it like this in a script tag that appears after the one that loads RequireJS:
require(['panelTest'], function (panelTest) {
panelTest(/* some value */);
});
Given the code you show, your panelTest module does not seem to really make sense as a "main module" so I would not put it as data-main.
If you want to use it from anther module, put the module in its own file and define it like this:
define(['panelTest'], function (panelTest) {
panelTest(/* some value */);
});
I am building an electron app, where the mainWindow object is created following the quick start: http://electron.atom.io/docs/tutorial/quick-start/.
As per this quick start, it is created asynchronously. The problem that I run into, is that for instance when I want to send messages from main to renderer process, I need to reference the mainWindow object. If this happens to be in a module that I require, then I need a means to make this module know of the mainWindow object.
I could of course prepend it with global., but I know that this is very much advised against. So I wish to do it more elegantly.
I came across this post: Asynchronous nodejs module exports; which appears to offer a solution. Taking the main.js file from the quick start (see above link, it's explicitly shown there), it appears I would add to the createWindow function
if( typeof callback === 'function' ){
callback(mainWindow);
}
and export the main.js module as
module.exports = function(cb){
if(typeof mainWindow !== 'undefined'){
cb(mainWindow);
} else {
callback = cb;
}
}
Then, in a higher-level script, I would require as follows:
let main = require('./main.js');
let lib = require('./lib.js'); // Library where I need a mainWindow reference
main(function(window) {
lib.doSomething(window);
});
where lib.js looks like
module.exports.doSomething = function(window) {
// Do something with window object, like sending ipc messages to it
window.webContents.send('hello-from-main', "hi!");
}
Although the simple case in the original post 'Asynchronous nodejs module exports' works fine, I cannot get it to work like described above; running the app it complains Uncaught Exception: TypeError: Cannot read property 'webContents' of null. This is also the case if I directly require lib.js within main()'s callback (which I know is also advised against).
I confess that I do not fully understand the simple case of the post, as I am rather new to node. This prevents me from fixing my own implementation of it, which I agree is blunt copy/pasting which reasonably should be expected to fail. Could somebody help me with how to correct above method, or advise me of a different approach to make it work? Thank you!
I have created the npm package electron-main-window for the same.
Install:
$ npm install electron-main-window
or
$ yarn add electron-main-window
Usage:
// Import ES6 way
import { getMainWindow } from 'electron-main-window';
const mainWindow = getMainWindow();
// Import ES5 way
const mainWindow = require('electron-main-window').getMainWindow();
// e.g:
if(mainWindow !== null ){
mainWindow.webContents.send('mainWindowCommunication', "This is a test message");
}
Whooops! The devil is in the details... I had defined on top of main.js
let mainWindow = null, callback;
which caused the error! Should be
let mainWindow, callback;
then it works perfectly!
P.s. Instead of deleting my post, I opted for keeping it and answering myself for future reference of other people who need asynchronous exporting.
(Edited to greatly simplify)
On node I have the following server.js file.
var Backbone = require('backbone');
var Tweet = Backbone.Model.extend({});
var Tweets = Backbone.Collection.extend({
model : Tweet,
url: function () {
return 'http://search.twitter.com/search.json?q=backbone'
}
});
var myTweets = new Tweets();
myTweets.fetch();
When I run this, I get an error that says. "Cannot call method 'ajax' of undefined" (1359:14)
basically that is the result of $ being undefined. Why is it undefined? Well there are a number of intermediate steps but when the file is loaded, it is expecting "this" to be "window" in browser or "global" on server. executed on node "this" = {}.
So the question, "How do I set 'this' to global" inside the backbone.js file?
On Backbone >= 1.x, you can simply assign Backbone.$ rather than using Backbone.setDomLibrary.
Solution for Backbone < 0.9.9
The first issue you need to address is how you are running this on Node anyway. Nodejs is a server-side JS environment, but it does not include any logic for controlling a DOM. For that you need to load something like JSDom.
When you have some DOM environment set up, you can load jQuery and your code into it and it should work just like a browser.
To answer your question specifically though, loading jQuery into the global is a bit of an ugly way to do it. You should use Backbone's setDomLibrary function to set $ to what you want.
Try something like this:
if (typeof exports !== 'undefined') {
MyModels = exports;
Backbone.setDomLibrary(require('jquery'));
server = true;
} else {
MyModels = this.MyModels = {};
}
This will fail if you try to do any DOM functions though.
How can I include a file, which contains classes definitions in my server.js file?
I don't want to use module.exports because I want to use this file in my client javascript code too.
Thank you!
If you want the module's contents to be available outside the scope of the file you have to use module.exports. Making the file also work in a browser just requires you to do some extra if/elses
For instance:
var self = {};
// Browser?
if(instanceof window !== 'undefined')
{
window['my_module_name'] = self;
}
// Otherwise assume Node.js
else
{
module.exports = self;
}
// Put the contents of this module in self
// For instance:
self.some_module_function = function() {
// Do stuff
}
Now if you're in Node.js you can reach the function like this:
my_module = require('my_module_name');
my_module.some_module_function(58);
Or if you're in a browser you can just call it directly since it's global:
my_module.some_module_function(58);
Otherwise I can recommend Stitch.js which allows you to develop JavaScript code using the CommonJS style require and modules, then compile it to also run in the browser with no code changes.
Require.js also allows for this type of functionality.
Here's another SO question about using the same code in node and browsers:
how to a use client js code in nodejs
After following instructions on the emscripten wiki I have managed to compile a small C library. This resulted in an a.out.js file.
I was assuming that to use functions from this library (within node.js) something like this would have worked:
var lib = require("./a.out.js");
lib.myFunction('test');
However this fails. Can anyone help or point me to some basic tutorial related to this?
Actually, all the functions are already exported. Generated JavaScript contains following lines:
var ENVIRONMENT_IS_NODE = typeof process === 'object' && typeof require === 'function';
// …
if (ENVIRONMENT_IS_NODE) {
// …
module['exports'] = Module;
}
If you got a function called my_fun in your C code, then you'll have Module._my_fun defined.
There are some problems with this approach, though.
Optimizer may remove or rename some functions, so always specify them passing -s EXPORTED_FUNCTIONS="['_main','_fun_one','_fun_two']". Function signatures in C++ are bit mangled, so it's wise to extern "C" { … } the ones which you want to export.
Furthermore, such a direct approach requires JS to C type conversions. You may want to hide it by adding yet another API layer in file added attached with --pre-js option:
var Module = {
my_fun: function(some_arg) {
javascript to c conversion goes here;
Module._my_fun(converted_arg) // or with Module.ccall
}
}
Module object will be later enhanced by all the Emscripten-generated goodies, so don't worry that it's defined here, not modified.
Finally, you will surely want to consider Embind which is a mechanism for exposing nice JavaScript APIs provided by Emscripten. (Requires disabling newest fastcomp backend.)
The problem here is that your a.out.js file is going to look like this
function myFunction() {
...
}
Not like this
function myFunction() {
...
}
exports.myFunction = myFunction;
You need to write a build script that lists the tokens you want to publically export from each C program and appends exports.<token> = <token>;\n to the end of your file for each token.