4

How could one trigger script sourcing and recompilation from from client side code only without involving browser specific extensions or browser specific debugging protocols?

I'm talking live editing, where a change to an objects prototype would affect instances already created.

Casper Beyer
  • 2,203
  • 2
  • 22
  • 35
  • you try http://www.livejs.com/ yet? – Deryck Feb 07 '15 at 06:24
  • `livejs` just does a `location.reload()` – Casper Beyer Feb 07 '15 at 06:30
  • for a full recompile (globals, DOM, prototypes, everything) I got no idea but setting old code to `null` then re-executing with something like requirejs may give you at least the general effect you're looking for. wish I had something better for you though cuz I'd sure be using it too. – Deryck Feb 07 '15 at 06:49
  • http://stackoverflow.com/questions/18077217/is-there-a-way-to-save-css-js-changes-of-remote-resource-between-page-reloads-or/22683090#22683090 ? – guest271314 Feb 14 '15 at 05:13
  • 1
    There are no good ways to do this because scripts are loaded into memory, so removing the script tags doesn't undo what the scripts have done, which means you have to manually clean up everything and rerun the entire code to avoid errors etc. Of course, creating something that manually cleans up everything a script might have done is a monumental task, you'd have to check every property, keep track of DOM changes, prototypes etc. and it's just so much easier to reload the page than to do this, and a reload gives you a clean slate, no immensly complicated clean up needed. – adeneo Mar 01 '15 at 23:55
  • just to support prev comment - if you already read book you can't just unread it, you can read another. But if you born again, you can read another book like if you never read first one :) – zb' Mar 02 '15 at 08:06

4 Answers4

1

The only thing I have found is telling your webserver to send a refresh parameter with a value of, say, 5 seconds.
I have not had the time to test this though.

  • Caching is not the issue here, I'm talking about edit and continue code re-compilation. – Casper Beyer Feb 10 '15 at 18:19
  • Wait, do you want to edit the files externally and re-fetch them? –  Feb 10 '15 at 22:22
  • Yep, I'm already doing it with the debug protocol as seen at http://caspervonb.github.io/bitty/ but that only works for chrome and opera. – Casper Beyer Feb 11 '15 at 09:28
  • I have wondered about that myself, I will do some research and get back to you. –  Feb 11 '15 at 15:09
  • Wrote a CLI tool to do this through the chrome remote debug protocol https://github.com/caspervonb/srcr, with the caveat that you cannot open the inspector, it will disconnect the cli tool. – Casper Beyer Feb 21 '15 at 05:06
  • Well that is lame. Sorry I couldn't find anything else. You might be able to tinker around in the chrome source but that is browser specific. –  Feb 24 '15 at 20:15
1

Why not store the text in a variable and then eval() on it?

seanlevan
  • 1,367
  • 3
  • 15
  • 33
  • 1
    In short, that's like comparing apples and oranges Eval works fine for executing new code, for live editing however it is mostly useless unless you are creating an application dedicated to let the user edit a single function, which is not the goal here. – Casper Beyer Feb 20 '15 at 07:54
1

Use an Iframe!

In javascript (main site - not the iframe) you can rewrite the html that goes into the Iframe, then append the Iframe or just call .open - .write - .close methods of the iframes contentwindow. (I dont have the presice code for this, but you can find it on the web...)

I tried to make something like this, and there are at least one problem you need to take care of:

I your code contains a loop that donst stop, at least the chrome browser frezes! (Also the main site)

Alf Nielsen
  • 1,361
  • 1
  • 10
  • 19
  • Again, not really fulfilling the requirements here, while it will have the appearance of not reloading, it is basically reloading. Side effects will be executed, etc. – Casper Beyer Feb 24 '15 at 10:30
  • Then I dont really understand what it is you want! Can you explain a little more? I have try to make live editing and found that the only way do to this is iframes. But you dont want this "fake" reloading, then what do you want? – Alf Nielsen Feb 25 '15 at 06:13
  • No reloading ;) Basically after edit and continue. It's doable through the a client's remote debugger in most cases, the issue then is just that there are ALOT of protocols to support. Tools are starting to pop up after my inital research, https://www.npmjs.com/package/budo for one. and there's also https://www.npmjs.com/package/amok by me. We're talking about live editing here, not page reloading on file change which is basically what live reload and its cousin hacks are. – Casper Beyer Feb 25 '15 at 08:19
1

If I understand the question correctly you need to detect when some code is changed and render it on your page.

If you want to detect when an external code file is changed and use it on your application you can use HTML5 polling or even websockets.

The main problem is on JavaScript as it needs to be executed by the browser.

For code execution, I personally don't like eval() , have you considered appending a script to your head or body? The code is quite easy to follow:

var s = document.createElement("script");
s.type = "text/javascript";
s.id = "codetoexecute";
s.innerHTML = thecode;
$("head").remove("#codetoexecute");

http://jsfiddle.net/s6tkyxyh/1/

On the following example I am using a simple textarea to write some JavaScript. I have also added some variables to play around.

Please keep in Monday that this is a quite bad practise as you have to watch for memory leaks and also the scope of each function or variable. Using globally accessed methods and properties is recommended as debug will be too hard to follow.

vorillaz
  • 6,098
  • 2
  • 30
  • 46