skeeto/skewer-mode

Live web development in Emacs

Skewer: live web development with Emacs

Provides live interaction with JavaScript, CSS, and HTML in a web browser. Expressions are sent on-the-fly from an editing buffer to be evaluated in the browser, just like Emacs does with an inferior Lisp process in Lisp modes.

• Watch the demo video on YouTube (webm)

Skewer is available from MELPA, which will install the dependencies for you. This package and its dependencies are pure Elisp, meaning setup is a breeze, the whole thing is highly portable, and it works with many browsers.

Dependencies:

• simple-httpd (available on MELPA)
• js2-mode (available on ELPA)

Skewer requires Emacs 24.3 or later.

Usage

Quick version

If Skewer was installed from MELPA, skip to step 3.

1. Put this repository directory in your load-path
2. Load skewer-mode.el
3. M-x run-skewer to attach a browser to Emacs
4. From a js2-mode buffer with skewer-mode minor mode enabled, send forms to the browser to evaluate

The function skewer-setup can be used to configure all of mode hooks (previously this was the default). This can also be done manually like so,

(add-hook 'js2-mode-hook 'skewer-mode)
(add-hook 'css-mode-hook 'skewer-css-mode)
(add-hook 'html-mode-hook 'skewer-html-mode)

The keybindings for evaluating expressions in the browser are just like the Lisp modes. These are provided by the minor mode skewer-mode.

• C-x C-e: Evaluate the form before the point and display the result in the minibuffer. If given a prefix argument, insert the result into the current buffer.
• C-M-x: Evaluate the top-level form around the point.
• C-c C-k: Load the current buffer.
• C-c C-z: Select the REPL buffer.

The result of the expression is echoed in the minibuffer.

Additionally, css-mode and html-mode get similar sets of bindings for modifying the CSS rules and HTML on the current page.

CSS

• C-x C-e: Load the declaration at the point.
• C-M-x: Load the entire rule around the point.
• C-c C-k: Load the current buffer as a stylesheet.

HTML

• C-M-x: Load the HTML tag immediately around the point.

Note: run-skewer uses browse-url to launch the browser. This may require further setup depending on your operating system and personal preferences.

Multiple browsers and browser tabs can be attached to Emacs at once. JavaScript forms are sent to all attached clients simultaneously, and each will echo back the result individually. Use list-skewer-clients to see a list of all currently attached clients.

Sometimes Skewer's long polls from the browser will timeout after a number of hours of inactivity. If you find the browser disconnected from Emacs for any reason, use the browser's console to call skewer() to reconnect. This avoids a page reload, which would lose any fragile browser state you might care about.

Manual version

To skewer your own document rather than the provided blank one,

1. Load the dependencies
2. Load skewer-mode.el
3. Start the HTTP server (httpd-start)
4. Include "http://localhost:8080/skewer" as a script (see example.html and check your httpd-port)
5. Visit the document from your browser

Skewer fully supports CORS so the document need not be hosted by Emacs itself. A Greasemonkey userscript is provided, Skewer Everything, for injecting Skewer into any arbitrary page you're visiting without needing to modify the page on the host. More information below.

Don't copy skewer.js anywhere or use it directly. Emacs hosts this script itself, manipulating it in memory before it reaches the browser. Always access it through the servlet on the Emacs webserver as /skewer.

Browser Support

Skewer is known to work properly with Firefox, Chrome, Safari, Opera, and IE8+. Except for CSS and HTML, Skewer will work in IE7 when document.querySelector and JSON are polyfilled. If you find any other JavaScript-supported browser that doesn't work with Skewer, please report it.

REPL

A REPL into the browser can be created with M-x skewer-repl, or C-c C-z. This should work like a console within the browser. Messages can be logged to this REPL with skewer.log() (like console.log()).

Results of expressions evaluated in the REPL are printed more verbosely than in the minibuffer, when possible. This may help in debugging.

Skewering with CORS

Skewer supports Cross-origin Resource Sharing (CORS). This means you can Skewer a document hosted from any server without needing any special changes on that server, except for including /skewer as a script in that document.

If you don't control the server from which you want to skewer pages -- such that you can't add the Skewer's script -- the provided Greasemonkey userscript (.user.js) can be used to inject it into any page you visit. Note that this userscript will assume you're running the Skewer server at http://localhost:8080/ (simple-httpd's default port). If this isn't true, you need to edit the top of the userscript.

The script isn't actually injected until you switch the toggle in the top-right corner, the red/green triangle.

Alternatively, the following bookmarklet will load skewer on demand:

javascript:(function(){var d=document;var s=d.createElement('script');s.src='http://localhost:8080/skewer';d.body.appendChild(s);})()

With a browser plugin like Custom Javascript for Websites, you can use the bookmarklet to auto-skewer specific domains, saving you a mouse click on each reload.

bower

Also provided are some functions for loading libraries from the bower infrastructure on the fly. This is accessed with skewer-bower-load. For example, I often find it useful to load jQuery when skewering a page that doesn't have jQuery installed.

Note: to use this bower does not need to be installed, only git. It's just the bower infrastructure being used. Unfortunately this infrastructure is a mess right now; many packages are in some sort of broken state -- missing dependencies, missing metadata, broken metadata, or an invalid repository URL. Some of this is due to under-specification of the metadata by the bower project.

Motivation

I wanted something like swank-js but without all the painful setup. Having already written an Emacs web server I was halfway there. It took relatively little code to accomplish.

I also didn't want to rely a browser-specific feature, like MozRepl or WebKit's remote debugger (kite).

The name refers to the idea that Emacs is skewering the browser from server-side.

skewer-mode's Issues

Feature request - interaction with phantomjs

Just an idea.

Is this possible to integrate and use Skewer with PhantomJS REPL?

https://github.com/ariya/phantomjs/wiki/REPL

Or maybe some of these examples could help?
https://github.com/ariya/phantomjs/wiki/Examples

Thing is that code injecting and live development is really great Skewer feature.
But I just installed and experimented with ac-js2 auto-completion with Skewer.

Problem is that this requires browser session and requires some things to do first to make auto-completion work.

My idea is to host skewer's empty html page with some js libraries attached to it (defined by ac-js2 config) and then instead of (browse-url (format "http://....... use phantomjs and fetch code completion candidates from phantomjs session.

I don't know if this is possible, but it could provide code completion simmilar to this available in Eclipse or other IDE's.

Skewer for Javascript autocompletion

Hello,

Thanks a lot for building this little tool.

I have started building an auto-completion module using skewer for completing properties of an object. What do you think would be the best way to extend skewer.js to handle formatting the results of eval differently? For instance I would like to return an object where the keys are an object's properties and the values are the initial value or function interface for that key.

I am not sure if this code should be part of skewer-mode but I am happy to add it if need be.

Display a message when no skewer clients are connected

I think it would be handy to have a way to indicate when there is no longer a skewer client connected. Main reason for this is so the user doesn't get annoyed when autocompletion stops working. The following snippet may help deal with Js2-mode's errors and warnings.

(when (and js2-mode-show-parse-errors js2-mode-show-strict-warnings)
  (setq skwer-hide-comments t)
  (js2-mode-toggle-warnings-and-errors))

I want to use browse-url-generic instead of browser-url

at least make it configurable.

Make skewer work with the default js-mode

Not everyone likes js2-mode, it's heavy and under very little development. Is it possible to make this awesome mode work with the default js-mode that comes with emacs 24.x?

Modification: make org babel js blocks use skewer when it is connected

This is a rough cut -- it can be improved but, anyway, it works for what I need right now :).

It redirects orgmode js src blocks to use skewer when it is connected. Also, I modified skewer.fn.eval() in skewer.js so that when a request is not verbose, it will to send console.log() to the output string and if there is output, it does not add the return value.

The gist: https://gist.github.com/zot/0dd34b50acf81416dd88

skewer-mode don

skewer-css-eval-buffer won't delete rules already applied

For example, if I wrote these rules:

header {
    height: 44px;
    background: red;
}

but then I changed the rules:

header {
    height: 44px;
}

the red background is still here, is there a way to get rid of this problem?

Interaction with Chrome developer tool

Hi,

You have developed a really cool Emacs mode! Thanks!

What I noticed that is if I have Chrome developer tool open, to look at console log or interact through the console, e.g., I can no longer update function definitions through skewer mode. Do you have any idea why this would be the case? Any suggestion for a work-around?

Can't evaluate html and css.

Hello.

First of all thanks for awesome project. I have some troubles with skewer-html-mode and skewer-css-mode.

skewer-html-mode issue

Steps to reproduce:

• open test.html
• buffer content is

<table>
  | <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

• | character signify point position
• M-x run-skewer
• Skewer tab pops up
• Press C-M-x
• Whole <table>...</table> region highlighted
• Expected result - table appears is the skewer tab
• Actual result - <body> tag inner html steal empty.

skewer-css-mode issue

Suppose we have following css file

body {
    background-color: red;
}

If I press C-M-x whole buffer highlighter for a second but style doesn't applied to the skewer tab.

Browser version

Firefox 43.0.

There is no problem with javascript code evaluation. I can modify page html with js code and result appears immediately in the browser. Am I doing something wrong?

skewer-repl crashes Emacs on Windows 7 for certain inputs

I've started playing with Skewer's JS REPL, having mostly just used it for CSS work since I discovered it.

I have found a way to crash Emacs with it on Windows 7. It's not hard to avoid, but genuine crashes are nasty things, so I thought I'd file a report.

Start Emacs (emacs-version output is "GNU Emacs 24.3.1 (i386-mingw-nt6.1.7601) of 2013-03-17 on MARVIN").

Execute the run-skewer command.

Execute 'skewer-repl'.

In the new REPL, press C-d.

A dialog box with the following message appears:

A fatal error has occurred!

Would you like to attach a debugger?

Select YES to debug, NO to abort Emacs

(type "gdb -p <emacs-PID> and "continue" inside GDB before clicking YES.)

and of course Emacs shuts down when you say No (I don't have GDB installed on this box).

Skewering from external sites

As written in the README file, using greasemonkey I injected the user.js file into the external site. But the problem is I'm not able to connect skewer-repl with those external sites. When I type anything in skewer-repl, it goes only to the http://127.0.0.1:8080/skewer/demo.

How do I make skewer-repl communicate with external site ?

Offline support

Could you please add support for using a downloaded version of jQuery? I tried adding the jQuery library to the skewer-js-hook but it appears after skewer.js's code so causes an error.

Use case: I DOPT (Develop On Public Transport). :)

Storing ajax requests

While testing the auto-completion, lots of ajax requests are made. This is mostly due to me changing objects and making sure the completion candidates change correctly. Some objects like the document and window object have many candidates where as my defined objects have a lot less.

I noticed that sometimes the browser seems to hang and has to wait to complete all the requests. I still need to investigate this further but I wondered what you think of storing the ajax requests? That would allow me to flush the pending completion requests.

I will provide more information on the issue once I have it. It may be something that needs to be fixed in ac-js2.

Cross origin problem in PhantomJS outer context

There's a longstanding bug in the PhantomJS REPL where you can't request any sites[1], so I wanted to see if I can get a good workflow going with skewer-mode and PhantomJS for doing interactive web scraping and iteratively building up scripts, including sessions that span many pages.

First things first, can we retrieve the skewer script from PhantomJS's outer context? When I run the script here:

https://gist.github.com/formido/a13d7bcb813513e3b7df/8c61394fd4ac03af72e0058f4392fdd0f372c4f9

...this is the output:

XMLHttpRequest cannot load http://localhost:8080/skewer. Origin file:// is not allowed by Access-Control-Allow-Origin.
GET http://localhost:8080/skewer
XHR Error!
status: 0 ()
body:


GET http://updates.html5rocks.com
XHR Loaded
status: 200 (OK)
body size: 96289


XMLHttpRequest cannot load http://www.google.com/. Origin file:// is not allowed by Access-Control-Allow-Origin.
GET http://www.google.com
XHR Error!
status: 0 ()
body:

http://updates.html5rocks.com implements CORS and we can reach it OK, but PhantomJS fails trying to reach the skewer script. Any ideas?

1. ariya/phantomjs/issues/11180

Questions about skewer.js/globalEval

In looking at skewer.globalEval, and having read the perfectionkills article, I'm confused about a couple of things:

• why eval.call(window,...) for safari?
• can't we POST a result from within the eval rather than relying on return behavior?

The first question stems from the article specifically calling out that construct as, "monstrous". It appears to be just another variant of indirect eval. What gives?

For the second question, I'm referring to those cases where some form of global eval exists, it just doesn't return a value. But the more I think about it, the more I realize this is perhaps trickier than I first thought. Has anyone run into an issue where the browser they wanted to skewer didn't support the current implementation of skewer.globalEval?

Youtube video does not have audio

Why? It made it really hard to see why things are happening. I gave up in frustration after a while.

Warning: cl package required at runtime

Just warnings, but can be fixed:

skewer-bower.el:28:1:Warning: cl package required at runtime
skewer-html.el:19:1:Warning: cl package required at runtime
skewer-mode.el:108:1:Warning: cl package required at runtime

Maybe something like this will help:

(eval-when-compile
  (require 'cl))

Also some more warnings:

skewer-bower.el:89:40:Warning: reference to free variable
    `skewer-bower-git-executable'
skewer-bower.el:192:1:Warning: Unused lexical variable `bower'
skewer-bower.el:192:1:Warning: Unused lexical variable `skewer'

Emacs 24.3.50.2

Long -poll POST but no update / Symbol's value as variable is void

I have followed the directions on the readme and here. I want to be able to evaluate a new HTML tag (i.e. add a new <p> tag, and have it evaluate.

When I use C-X e I get Symbol's value as variable is void. and when I useC-M-X` the text highlights and a post is logged in the developer tools console but nothing actually happens.

Do you have any idea why I am not getting the live updating?

Evaluating javascript using the run-skewer command works fine. I am running emacs 24.4

Syntax Error Skewer Line 190

From the latest version of Melpa as of this post.

Opening an html file with a script tag linking to /skewer causes the following error in Firefox:
[10:14:13.406] SyntaxError: An invalid or illegal string was specified @ http://127.0.0.1:8080/skewer:190
And in Chromium, this is the error:
Uncaught Error: SyntaxError: DOM Exception 12 skewer:190

No result from C-x C-e

I have installed skewer from melpa (version 20130324.8) and use it with js2-mode version 20130409.1820.

After running run-skewer in a js2-mode buffer trying to evaluate a form produces no result. The form flashes but no output is produced. I have tried looking for info in messages and httpd that could assist in debugging but with no results.

I have tested with Chrome Version 26.0.1410.43 beta and Safari Version 6.0.3 (8536.28.10).

How do I get skewer-mode to work with web-mode

I've been trying get skewer-mode to work in web-mode by adding something like
(add-hook 'web-mode-hook 'skewer-html-mode) It doesn't work however when I do C-M-x, I get the message No Javascript AST available.

evaluate buffer or region?

Just wondering if at some point you will add the ability to evaluate a region or the buffer.

Lack of release tag

Could you please add release tag with current version to this repo?

This could enable downloading *.tar from https://github.com/skeeto/skewer-mode/releases URL.

Skewering HTTPS (mixed-mode loading problems)

Is there a way to tell skewer to use https when skewering pages that are already https? Would make skewer-everything.js much more useful.

Thanks for creating this great emacs mode!

autocompletion in Skewer REPL

So I was able to get autocompletion working with tern-mode and company-tern in Javascript buffers, but this does not work in the Skewer REPL. Any idea why this might be?

Extra parameters in the request to the browser

I would like a way for users to turn off completion candidates that were obtained from traversing the prototype chain. The easiest way to do this would be to add extra parameters to the request in skewer-eval. Something like the following:

(request (append `((type . ,type)
                   (eval . ,string)
                   (id . ,id)
                   (verbose . ,verbose)
                   (strict . ,strict)) extras)))

This would also make it easier for people to build their own skewer plugins.

REPL hangs

Hi,

I saw the video demo of skewer recently and it looks like an awesome tool. I'm having a strange issue.

I run-skewer then I run a skewer-repl. I have it configured to open a new tab in chrome vs. use my default browser.

When I type in the repl:
document
or
x = 1

then it just hangs....

In another buffer I list the skewer clients and the emacs processes. Those look fine. The repl is in 'run', though. I even put a breakpoint on the skewer 'js' to see what messages were coming across. If I hit 'g' in the list-skewer-clients buffer, I will see a 'ping' come across, and I then continue from the break so the browser sends the pong back. This can occur while the repl is in the 'hung' state.
I can even do a skewer.log() on the client browser and see the result come back to the emacs repl.

I don't see any errors in the chrome developer console.

There just doesn't seem to be a connection going from the repl to the browser.

Also, When I tested on an IOS simulator, it was working. In that instance, I injected skewer via a script tag. I put this out there as a weak argument as I haven't retested this.

Strange.

What should I do to diagnose this?

Add command to disconnect clients

I do my development in an EC2 instance so at work my local browser connects to emacs there. When I get home, if I have forgotten to close the tab, the browser is still connected, so now if I evaluate forms both my home browser and work browser are responding. I don't know much elisp yet, so it took me a little while to figure out how to extract the process id from the cl-struct skewer-client and kill it. Could a command be added for this? Maybe I missed it or there's a better way to handle the issue, I don't know.

Spacemacs and skewer

Hello.
I cannot get skewer to update page changes.
My setup:
Win10, spacemacs dev branch 0.105.6. I work in web-mode. Firefox and Chrome
I followed instructions and other information.
Tried to access file as file:// in browser and as httpd page with http://127.0.0.1:8080/. Both are loading and I see sckewer-clients. But it doesn't evaluate tag changes.

In browsers console I can see that POST from skewer is not finished. When I send a new update from Spacemacs with C-M-x previous POST get finished status with waiting time for as long as I was not updating it. Like minutes. And new one is waiting, but no page update.

Can you help me?

Thank you

I couldn't get Skewer-HTML do the same as impatient-mode.

Thanks for sharing this package, your work is really appreciated. I loved the impatient mode. It remembers me sort of Browserlink for Vim.

Around half year ago, I couldn't get Skewer working so I gave it up. When I tried impatient-mode, I thought I needed to develop a package, so I asked some questions about the structure in this topic.

However, someone attended me on skewer-mode, so I decided to give a second try. But I couldn't get it working again. I decided to open a issue, even when I'm not sure if it's related to Skewer or me.
So could you perhaps tell me what I'm missing yet?

Setup:

GUI version GNU Emacs 25.0.50.1 (x86_64-w64-mingw32) of 2015-07-25 on KAEL
Compiled from wemacs-w64.
skewer-mode, using the latest version of skewer-mode from MELPA
Windows 7 x64 bit.

Actions:

I create a page, called foobar.html. The web-mode is the major mode for that buffer. In the browser I see the page foobar.html inside the environment http://intranet-development/app/foobar.html.

When I change something in buffer foobar.html, save it, then refresh the browser, I see the changes.
I would like to make it interactively.

1. In the buffer foobar.html. I press M-x httpd-start.
   Then I check the values of httpd-port with C-h v. The values are 8080. Then I call M-x skewer-mode.

2. When I open in the browser the following URI: http://localhost:8080/skewer, then I see javascript code from Skewer, version 1.4. So the HTTP-server with skewer seems working.

3. I paste in foobar.html the following code:

   <!DOCTYPE html>
   <html>
   <head>
       <title>Skewer</title>
       <script src="http://localhost:8080/skewer"></script>
   </head>
   <body> Testing 123
   </body>
   </html>
   

I save foobar.html, and reload the browser. I see the sentence Testing 123 in my browser. When checking the source code, I see the script source of skewer. When clicking, I see the javascript for Skewer.

1. I call M-x skewer-html-mode. And it's enabled in the buffer of foobar.html.
2. When change the sentence of Testing 123 to Test 1, I call skewer-load-buffer, but I don't see anything changed in my browser. I called every skewer function, but without any result. When I press f12 inside Chrome, I type in the console skewer();. But I get the message undefined.

So I guess I could paste the content of /skewer javascript into

<script>
[entire content of /skewer here]
</script>

But I'm not sure about that, because I don't understand what went wrong here. I would like to have the same functionality from Impatient mode, see changes that you type in your buffer directly in your browser, but now on another server than the localhost:8080.

I guess Skewer is able to do that, but I couldn't figure out how get working. Which commands or actions do I need yet to make it 'live' as in impatient-mode? By the way, I really appreciate all the work you did for the community. I enjoyed your auto-tetris mode. 👍

EvalError when using Safari

Thanks for skewer-mode. It is a great tool and help.

I had difficulty (i.e. failed to) get it working using Apple Safari Version 6.0.3 (8536.28.10) on this MacBookPro. When I tried to evaluate any js form I got the error message

EvalError: The "this" value passed to eval must be the global object from which eval originated

eval@[native code]
eval@http://127.0.0.1:8888/skewer:101
callback@http://127.0.0.1:8888/skewer:14
onreadystatechange@http://127.0.0.1:8888/skewer:39
[native code]

Expression: 

42 / 7;

In the above case, I was obviously evaluating a bit of simple arithmetic. I also had to change httpd-port to 8888.

All works fine in Google Chrome - but not in Safari. Is this something that I can help on?

How to run `skewer-css-eval-buffer` after save file

Seems my solution doesn't work:

(add-hook 'skewer-css-mode
          (lambda ()
            (add-hook 'after-save-hook 'skewer-css-eval-buffer nil t)))

Problems with skewer-css autoload

The current skewer-css code has an autoload which auto-enables skewer-css-mode via css-mode-hook. However, this also auto-enables skewer in derived modes, such as less-css-mode, which is not compatible with skewer-css-mode.

As a user, this is a pain to work around, because it involves either undoing the hook after skewer-css has loaded, or adding further hooks to turn it off afterwards.

Automatically changing mode hooks is not generally recommended, because of this type of issue; it's hard for an upstream author to foresee the exact needs of every user. Would you consider accepting a pull request which removes the (add-hook ...) code and adds it to the usage instructions?

Cheers,

-Steve

feature request: smarter CSS evals

right now the eval works by continuing appending new style tags to the bottom of the document. unfortunately, this means that every new style that gets applied must also define a whole bunch of none, auto, 0 values to clear out any previous experiments.

i have some local changes where i delete all style tags before adding one in the skewer.js file, but it'd be nice if this is supported officially, perhaps keyed to the CSS selector.

thanks.

Considered using in Web Mode?

It seems that this package is geared towards use in html and css and js2 modes, is there any thought given as to how this could be used in Web Mode (which kind of combines those three)?

Can't get skewer-mode to work

Hi, I've been trying for quite some time to get skewer-mode to work, but I can't seem to figure out what's wrong.

I grabbed skewer-mode, js2-mode and httpd from melpa earlier today, so I should have the latest version. I've tried using both Firefox and Chrome with the same result.

Using Emacs 24.3.1 I do the following:

1. emacs -Q
2. load js2-mode
3. load simple-httpd
4. load all the skewer files
5. M-x run-skewer
6. navigate to boids.js
7. M-x skewer-load-buffer

In the browser nothing happens.

The tail of httpd is as follows:

(request
 (date "Fri,  9 Aug 2013 17:11:14 GMT")
 (address "127.0.0.1")
 (get "/skewer/script/1292688296640749368/boids.js")
 (headers
  ("GET" "/skewer/script/1292688296640749368/boids.js" "HTTP/1.1")
  ("Host" "127.0.0.1:8080")
  ("User-Agent" "Mozilla/5.0 (X11; Linux x86_64; rv:22.0) Gecko/20100101 Firefox/22.0")
  ("Accept" "*/*")
  ("Accept-Language" "en-US,en;q=0.5")
  ("Accept-Encoding" "gzip, deflate")
  ("Referer" "http://127.0.0.1:8080/skewer/demo")
  ("Connection" "keep-alive")
  ("Content" "")))
(request
 (date "Fri,  9 Aug 2013 17:11:14 GMT")
 (address "127.0.0.1")
 (get "/skewer/post")
 (headers
  ("POST" "/skewer/post" "HTTP/1.1")
  ("Host" "127.0.0.1:8080")
  ("User-Agent" "Mozilla/5.0 (X11; Linux x86_64; rv:22.0) Gecko/20100101 Firefox/22.0")
  ("Accept" "text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8")
  ("Accept-Language" "en-US,en;q=0.5")
  ("Accept-Encoding" "gzip, deflate")
  ("Content-Type" "text/plain; charset=UTF-8")
  ("Referer" "http://127.0.0.1:8080/skewer/demo")
  ("Content-Length" "16")
  ("Connection" "keep-alive")
  ("Pragma" "no-cache")
  ("Cache-Control" "no-cache")
  ("Content" "{\"type\":\"error\"}")))
(error 500
       (wrong-type-argument stringp nil))

If I remove the condition-case from httpd--filter I get the following backtrace:

(wrong-type-argument stringp nil)
  propertize(nil font-lock-face skewer-error-face)
  (let* ((buffer (get-buffer "*skewer-repl*")) (face (cdr (assoc (cdr (assoc (quote type) log)) skewer-repl-types))) (output (propertize (cdr (assoc (quote value) log)) (quote font-lock-face) face))) (if buffer (progn (save-current-buffer (set-buffer buffer) (save-excursion (goto-char (point-max)) (forward-line 0) (backward-char) (insert (concat "\n" output "")))))))
  skewer-post-log(((type . "error")))
  (progn (skewer-post-log response))
  (if (member type (quote ("log" "error"))) (progn (skewer-post-log response)))
  (let ((type (cdr (assoc (quote type) response)))) (if (member type (quote ("log" "error"))) (progn (skewer-post-log response))))
  skewer-repl--response-hook(((type . "error")))
  funcall(skewer-repl--response-hook ((type . "error")))
  (while --dolist-tail-- (setq hook (car --dolist-tail--)) (funcall hook result) (setq --dolist-tail-- (cdr --dolist-tail--)))
  (let ((--dolist-tail-- skewer-response-hook) hook) (while --dolist-tail-- (setq hook (car --dolist-tail--)) (funcall hook result) (setq --dolist-tail-- (cdr --dolist-tail--))))
  (progn (let ((--dolist-tail-- skewer-response-hook) hook) (while --dolist-tail-- (setq hook (car --dolist-tail--)) (funcall hook result) (setq --dolist-tail-- (cdr --dolist-tail--)))))
  (let* ((result (json-read-from-string (cadr (assoc "Content" req)))) (id (cdr (assoc (quote id) result))) (type (cdr (assoc (quote type) result))) (callback (get-cache-table id skewer-callbacks))) (setq skewer--last-timestamp (float-time)) (if callback (progn (funcall callback result))) (if id (skewer-queue-client proc req) (let ((temp-buffer (generate-new-buffer " *temp*"))) (save-current-buffer (set-buffer temp-buffer) (unwind-protect (progn (httpd-send-header proc "text/plain" 200 :Access-Control-Allow-Origin "*")) (and (buffer-name temp-buffer) (kill-buffer temp-buffer)))))) (progn (let ((--dolist-tail-- skewer-response-hook) hook) (while --dolist-tail-- (setq hook (car --dolist-tail--)) (funcall hook result) (setq --dolist-tail-- (cdr --dolist-tail--))))))
  httpd/skewer/post(#<process httpd <127.0.0.1:49320>> "/skewer/post" (("{\"type\":\"error\"}")) (("POST" "/skewer/post" "HTTP/1.1") ("Host" "127.0.0.1:8080") ("User-Agent" "Mozilla/5.0 (X11; Linux x86_64; rv:22.0) Gecko/20100101 Firefox/22.0") ("Accept" "text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8") ("Accept-Language" "en-US,en;q=0.5") ("Accept-Encoding" "gzip, deflate") ("Content-Type" "text/plain; charset=UTF-8") ("Referer" "http://127.0.0.1:8080/skewer/demo") ("Content-Length" "16") ("Connection" "keep-alive") ("Pragma" "no-cache") ("Cache-Control" "no-cache") ("Content" "{\"type\":\"error\"}")))
  funcall(httpd/skewer/post #<process httpd <127.0.0.1:49320>> "/skewer/post" (("{\"type\":\"error\"}")) (("POST" "/skewer/post" "HTTP/1.1") ("Host" "127.0.0.1:8080") ("User-Agent" "Mozilla/5.0 (X11; Linux x86_64; rv:22.0) Gecko/20100101 Firefox/22.0") ("Accept" "text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8") ("Accept-Language" "en-US,en;q=0.5") ("Accept-Encoding" "gzip, deflate") ("Content-Type" "text/plain; charset=UTF-8") ("Referer" "http://127.0.0.1:8080/skewer/demo") ("Content-Length" "16") ("Connection" "keep-alive") ("Pragma" "no-cache") ("Cache-Control" "no-cache") ("Content" "{\"type\":\"error\"}")))
  (if (null servlet) (httpd--error-safe proc 404) (funcall servlet proc uri-path uri-query request))
  (if (and content-length (< (string-bytes content) (string-to-number content-length))) (process-put proc :previous-string string) (process-put proc :previous-string nil) (httpd-log (\` (request (date (\, (httpd-date-string))) (address (\, (car (process-contact proc)))) (get (\, uri-path)) (\, (cons (quote headers) request))))) (if (null servlet) (httpd--error-safe proc 404) (funcall servlet proc uri-path uri-query request)))
  (let* ((request (httpd-parse string)) (content-length (cadr (assoc "Content-Length" request))) (uri (cadar request)) (content (cadr (assoc "Content" request))) (parsed-uri (httpd-parse-uri (concat uri))) (uri-path (nth 0 parsed-uri)) (uri-query (append (nth 1 parsed-uri) (httpd-parse-args content))) (servlet (httpd-get-servlet uri-path))) (if (and content-length (< (string-bytes content) (string-to-number content-length))) (process-put proc :previous-string string) (process-put proc :previous-string nil) (httpd-log (\` (request (date (\, (httpd-date-string))) (address (\, (car ...))) (get (\, uri-path)) (\, (cons (quote headers) request))))) (if (null servlet) (httpd--error-safe proc 404) (funcall servlet proc uri-path uri-query request))))
  httpd--filter(#<process httpd <127.0.0.1:49320>> "POST /skewer/post HTTP/1.1
\nHost: 127.0.0.1:8080
\nUser-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:22.0) Gecko/20100101 Firefox/22.0
\nAccept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
\nAccept-Language: en-US,en;q=0.5
\nAccept-Encoding: gzip, deflate
\nContent-Type: text/plain; charset=UTF-8
\nReferer: http://127.0.0.1:8080/skewer/demo
\nContent-Length: 16
\nConnection: keep-alive
\nPragma: no-cache
\nCache-Control: no-cache
\n
\n{\"type\":\"error\"}")

This is where my debug-fu came up short. Can you spot the problem?

Skewer-repl hold emacs.

• M-x run-skewer
• C-c C-z
• type any expression var a = 1; for example
• RET

Emacs holds until I press C-g. After that evaluated result prints in skewer buffer. But C-M-x works properly. Result just shows immediately in minibuffer. I can reproduce this both on Firefox and Chrome browsers.

repl with context

It is often very useful to be able to control the scope/context that repl statements will be evaluated in. For instance when developing an angular controller you probably want to have access to your dependency injected variables. There doesn't seem to be an official way to do that so I thought I'd share a hack that seems to work.

Place the line: skewer.globalEval = function(expression) {return eval(expression);}
where you want your context, kind of like a debugger; statement. For instance:

angular.module('my-app').controller('MainCtrl', function ($scope, $http) { 
    skewer.globalEval = function(expression) {return eval(expression);}
    ....
  }

Now from the prompt you can easily access your $scope variables and such
js> alert($scope.someVar);

Any plan to support nodejs?

Recent days, nodejs becomes more and more popular. And one of the major advantages of swank-js is that swank-js support nodejs natively.

So I wonder is there any future plan to support nodejs as a js backend in skewer-mode?

Continuous evaluation

Thanks for your help with the issues I have raised so far. ac-js2 is coming along nicely. The issue I am faced with at the moment is completions inside of a function. If this code:

var constants = {
    PI : 3.14,
    E : 2.72
};

is located outside of a function or closure then when I type constants. I should get a list of candidates two of which are PI and E both showing their respective values of 3.14 and 2.72. Of course if I wrap this in a function then I can no longer evaluate constants so I cannot get PI and E in the candidate list.

If I evaluate the code inside of the surrounding function then constants will get added to the global object and be available for completion everywhere. I could use js2-mode's parser to solve this problem and I may still have to.

To get around this I created a ScopeObject and added all of the functions and variables to it from the current scope. I do this for all of the surrounding parent functions. It still needs a fair bit of work but the idea is there ScottyB/ac-js2@c2bf1fe. Doing this enables me to filter and delete ScopeObject properties as required. However, evaluating any code block using the methods provided in skewer will add false completion candidates. Now at last to my question, is it possible to setup a separate skewer-client for completion? Or do you have any suggestions?

Btw, a really cool side project occurred to me while writing this and that would be to combine impatient mode with skewer mode. Hopefully I can tidy up ac-js2 quickly :).

Can't skewer some sites: Content Security Policy

Sadly, I can't skewer some sites, e.g., GitHub, because attempting to do so results in an error in the console:

VM6662:37 Refused to load the script 'http://localhost:8080/skewer' because it violates the following Content Security Policy directive: "script-src 'unsafe-eval' assets-cdn.github.com".

It looks like there's no solution:

https://medium.com/making-instapaper/bookmarklets-are-dead-d470d4bbb626#.nnx4p58sl

skewer.log() output should be appended to repl

Hi! Loving skewer so far -- thanks a lot!

If I move point backwards in the REPL, then eval an expression from a js file which contains skewer.log() invocations, the resulting output is inserted at point in the REPL. I would expect it to be printed at the end of the REPL buffer.

Problem with skewer-bower-refresh

Hi!

I got a problem with skewer-bower-refresh. It returns in Messages:

Contacting host: bower.herokuapp.com:443
save-current-buffer: Search failed: "
^M?

^M?
"

I commented out line 68 with:

    (re-search-forward "\r?\n\r?\n")

Could you duplicate this bug and eventually confirm my solution?

Feature request: EDE or Projectile integration to get best AC for JS.

Hi,

My idea is:

Requirements:
js2-mode,
auto-complete,
ac-js2
PhantomJS

Initial configuration:

(require 'auto-complete-config)
(ac-config-default)
(ac-set-trigger-key "TAB")

(skewer-run-phantomjs)
(add-hook 'js2-mode-hook 'ac-js2-mode)
(setq-default ac-js2-evaluate-calls t)

With this configuration we are prepared to use auto-complete with javascript.
Unfortunately without preloaded libraries there is not much to autocomplete.

So, we have two options:

1. Hardcode additional libraries or use .dir-locals.el

(add-to-list 'ac-js2-external-libraries "~/.emacs.d/jquery.js")

or
2. Use skewer-bower to load dependency:

(skewer-bower-load "jquery" "1.11.0")

Both these methods have their limitations.
IMHO best option could be to use Projectile (supports bower right now) or EDE (need to write Bower support from scratch) to detect if this file is part of a project.

If file is part of a project we can detect project root dir and use bower.json.
Then we can load all dependencies listed in bower.json with skewer-bower-load

Additionaly it's possible to hook this to post-command-hook.
With post command hook we can start new PhantomJS instance every time we change buffer to support different js files with different dependencies.
This is a piece of code to start with:

(defconst httpd-buffer "*httpd*"
  "The name of the buffer to show http output.")

(defvar skewer-js2-source-buffer nil)

(defun skewer-js2-set-source (buffer)
  (when (get-buffer httpd-buffer)
    (with-current-buffer httpd-buffer
      (unless (eq buffer skewer-js2-source-buffer)
    (skewer-phantomjs-kill)
    (skewer-run-phantomjs)
    (skewer-bower-load "jquery" "1.11.0")
    (setq skewer-js2-source-buffer buffer)))))

(defun skewer-js2-update-source()
  "Update source."
  (when (not (eq (current-buffer) (get-buffer httpd-buffer)))
    (let ((mode (buffer-local-value 'major-mode (current-buffer))))
      (when (eq mode 'js2-mode)
        (skewer-js2-set-source (current-buffer))))))

(add-hook 'post-command-hook 'skewer-js2-update-source)

Need to replace line containing '(skewer-bower-load "jquery")' with some brilliant code that will load dependencies defined in bower.json.

I could be wrong but I think that in this way we can get the best available code completion for javascript in Emacs.

Regards,
Marcin

Emacs 24.3.1 compatibility

When I try to install the skewer-mode package from Melpa, I get this error:

Package emacs-24.1 is not available.

Is there something that can be done to fix this? I'm running 24.3.1.

syncing between html source and rendered page

I have two question regarding the issue:

1- can I sync between the html source (in the emacs buffer) and the rendered page as in AUCTEX. For example, I want to click on the code it takes me to the rendered position and vice versa.

2- Can i render to an emacs window (not to an external browser) for simple html files.

how to use skewer-mode in my own front end project

Say I'm totally control the web server and front end. how to use skewer. I need a step on step guide get some visible stuff.

Can skewer-mode work with web-mode?

Make setup more easy

The setup instructions are not clear or effective. I could change my css and press C-c C-k to update in the browser, but doing the same for my html did nothing. Sometimes an error

Uncaught SyntaxError: Failed to execute 'querySelector' on 'Node': The provided selector is empty. skewer:190

appeared but I do not now how to resolve it. The demo video seems that skewer is promising, but I could not set it up. For example, impatient-mode is much simpler and straightfoward to set up, and it works like a breeze without having to press any special keys to see my updates reflected in the browser.

I recommend someone to review the setup instructions for skewer, and remember, specially given that many people are so versed in Emacs.