Hello,
I don't have a blog yet, it is in my list of new year's resolutions. I will try to explain it here anyway, maybe it can serve as a draft for a blog post.
When you hit C-c inside of a _javascript_ source block, ob-js takes the js code from the js block and saves it into a temp file (in linux the temp file will be in saved /tmp/random-name, while in Mac OS X it will be saved in /var/folders/random-name). Then, it uses org-babel-eval to execute the js code, which in turn creates a temp buffer, inserts the contents of the temp file into the temp buffer and uses shell-command-on-region to run the js code with node as the executed command.
That is the reason why you must use absolute paths in the require, because when the code runs it is no longer in the same directory of the org file, but in a temporary folder. If you use require("./src/my-component.js"), require won't find the js file because it is in another directory.
Let's try an example (if you want you can send me one of your examples and I can modify it to use my approach)
First, I will define two functions to show an array of _javascript_ objects as an org-mode table:
#+BEGIN_SRC js :tangle src/table.js
function table_row(cells){
console.log("|" + cells.join("|") + "|");
}
function table(rows){
console.log("|---|");
table_row(Object.keys(rows[0]));
console.log("|---|");
rows.map(row => table_row(Object.keys(row).map(k => row[k])));
console.log("|---|");
}
module.exports = table;
#+END_SRC
Notice the :tangle src/table.js property, which I will use to require it in a later block:
#+BEGIN_SRC js :results output raw drawer
var data ="" { day: 'SUNDAY', accidents: 3986 },
{ day: 'MONDAY', accidents: 6109 },
{ day: 'SATURDAY', accidents: 6274 },
{ day: 'WEDNESDAY', accidents: 6453 },
{ day: 'THURSDAY', accidents: 6546 },
{ day: 'TUESDAY', accidents: 6557 },
{ day: 'FRIDAY', accidents: 6916 } ];
// here you have to use the full path to the table.js file
var view_as_table = require("/app/src/table.js");
view_as_table(data);
#+END_SRC
Then I run org-babel-tangle to write the table.js file, and when I hit C-c inside of this last block, it requires the tangled table.js file, runs the function and we get the following results:
#+RESULTS:
:RESULTS:
|-----------+-----------|
| day | accidents |
|-----------+-----------|
| SUNDAY | 3986 |
| MONDAY | 6109 |
| SATURDAY | 6274 |
| WEDNESDAY | 6453 |
| THURSDAY | 6546 |
| TUESDAY | 6557 |
| FRIDAY | 6916 |
|-----------+-----------|
:END:
About the order of execution, if you used sessions in my example, you have to run the first block (which defines the function) before running the second (which uses it), or it would fail because the table function has not been loaded.
Now imagine a very long document with dozens of source blocks. In order to run the block number 23, you will have to run all the preceding blocks on which that block depends. I don't like that, even if the document is meant to be read sequentially, from start to finish, I want to be able to open the org file, go to any section and running any source code block without having to remember the sequence of dependencies between them. Worst case, all I have to do is run org-babel-tangle to update the tangled files. This has also the added benefit that it forces me to structure my blocks correctly, from a code architecture point of view.
I hope this makes it clearer for you.
Martin