netguy204 / imp.el Goto Github PK

View Code? Open in Web Editor NEW

137.0 10.0 28.0 135 KB

Impatient html mode. See your changes in the browser as you type

Home Page: http://www.youtube.com/watch?v=QV6XVyXjBO8

Makefile 4.85% Emacs Lisp 70.86% HTML 24.30%

imp.el's Introduction

Impatient Mode

See the effect of your HTML as you type it.

YouTube demo

Installation through MELPA

The easiest way to get up and running with impatient-mode is to install it through MELPA. If you're not already using MELPA, it's quite easy to setup.

Installation from Source

If you are installing from source, please note that this package requires both simple-httpd and htmlize in order to operate. The simple-httpd webserver runs within emacs to serve up your buffers as you edit them. htmlize is used to send font lock highlighting to clients for non-HTML buffers.

simple-httpd can be installed through MELPA or directly from GitHub.

htmlize is also available through MELPA.

Once you have installed simple-httpd and htmlize and you've cloned impatient-mode, you can add impatient-mode to your load path and require it:

(add-to-list 'load-path "~/.emacs.d/impatient-mode")
(require 'impatient-mode)

Using impatient-mode

Enable the web server provided by simple-httpd:

M-x httpd-start

Publish buffers by enabling the minor mode impatient-mode.

M-x impatient-mode

And then point your browser to http://localhost:8080/imp/, select a buffer, and watch your changes appear as you type!

If you are editing HTML that references resources in other files (like CSS) you can enable impatient-mode on those buffers as well. This will cause your browser to live refresh the page when you edit a referenced resource.

Except for html-mode buffers, buffer contents will be run through a user-defined filter. The default user filter is htmlize, but you can set your own with imp-set-user-filter. The user filter is nothing but a regular elisp function. Here's how you would define a basic filter:

(defun my-filter (_)
  (princ "<html><body>test</body></html>" (current-buffer)))

The original editing buffer is passed along the user filter as a parameter, which we didn't use in the previous example, but which is demonstrated in the following example:

(defun my-filter (buffer)
  (let ((count 
     (with-current-buffer buffer
           (count-words-region (point-min) (point-max)))))
    (princ (format  "<html><body>%d</body></html>" count) (current-buffer))))

You can remove user filters with imp-remove-user-filter, which will reset the default htmlize. For reference, this is how the default user function is defined:

(defun default-user-filter (buffer)
  "Htmlization of buffers before sending to clients."
  (let ((html-buffer (save-match-data (htmlize-buffer buffer))))
    (insert-buffer-substring html-buffer)
    (kill-buffer html-buffer)))

Security implications

Please be aware that enabling impatient-mode exposes the whole directory in which the file resides, not only the file itself. If our file is accessible under http://localhost:8080/imp/live/example.txt/, it is possible to access http://localhost:8080/imp/live/example.txt/a-file-in-the-same-directory/or-even/a-subdirectory-of-it.txt. It's especially dangerous when enabling impatient-mode for files like ~/.bashrc because it allows to access any file in the user's home directory files such as ~/.ssh/id_rsa.

This behavior is not a bug, it is needed for the HTML files to work properly along with their resources (such as CSS and JS). Please be aware of what is exposed and/or configure your filewall accordingly.

imp.el's People

Contributors

Stargazers

Watchers

Forkers

skeeto arnebab brool abhiyerra danielsz leppert tr37ion huahaifeng vifon

imp.el's Issues

<script> tag with src cause imp stop updating

Whenever I have a html file with script tag like this

<!DOCTYPE html>
<html>
 <head>
   <title>Test</title>
   <script type="text/javascript" src="test.js"></script>
 </head>
 <body>
 </body>
</html>

the file stop updating.

Here is the javascript error I found in firebug

TypeError: doc.body is null

    iwindow.scrollTo(offX, offY != null ? offY : doc.body.clientHeight);

I am using Firefox 24

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.

doc.body.clientHeight -> document.body.clientHeight in chrome

Hi there
I'm not sure whether this is an actual issue, or I'm dense or something, but I was getting 500 errors when running impatient-mode.

Digging around a bit, I found references to doc.body.clientHeight were causing problems. Changing it to document.body.clientHeight sorted things out for me.

Not sure whether you want/need to change anything, but thought I'd let you know, to be on the safe side.

Thanks for a FANTASTIC system.

browser tab shows htmlized buffer, not rendered html

I had htis problem once before and cannot remember how I fixed it, or if it just somehow went a way by accident. When I tyr to view html buffers using impatient mode, I don't see the html itself; instead, I get a picture of the buffer, rendered as HTML (see image below).

Inspecting the source, I see that the document in the content iframe contains a comment .

Any idea what might be causing this? seems like maybe

avoid unnecessary refresh

Thinks imp.el, I love it!
I want that after-save-hook can be used instead of after-change-functions. This avoids unnecessary refresh.
any opinions about this?

Wrong mime type

When i enable impatient mode on a html buffer with an associated css file, the browser does not update when i change the css. If i enable impatient mode on the css file, the browser tries to update the html when the css is changed, but it is unable to use the css file, as the mime type is now text instead of css. I am not interested in previewing the css file in the browser, I just want html page to update when the css changes. Is this the intended behavior?

Headers sent twice

httpd-send-file sends its own header, so with the latest changes you end up sending the header twice when serving a related file.

$ curl --head http://localhost:8080/imp/live/hello.html/hello.png
HTTP/1.1 200 OK
Server: simple-httpd (Emacs 24.1.1)
Date: Thu, 16 Aug 2012 21:42:21 EDT
Connection: keep-alive
Content-Type: text/plain
Cache-Control: (max-age=60, must-revalidate)
HTTP/1.1 200 OK
Server: simple-httpd (Emacs 24.1.1)
Date: Thu, 16 Aug 2012 21:42:21 EDT
Connection: keep-alive
Content-Type: image/png
Last-Modified: Thu, 16 Aug 2012 21:12:38 EDT
ETag: "d6e434baf797dfc6"
Content-Length: 1116

HTML meta tags aren't previewed

HTML meta tags aren't obeyed due to the fact that the page is, understandably, rendered in an iframe. In my case this means <meta name=viewport content="width=device-width, initial-scale=1"> isn't observed, thereby affecting mobile previews. Is there an easy fix or workaround for this on the imp.el side?

Extensibility

Hi,

For non html files, buffers go through the htmlize-buffer function.
Following that line of thought, I would like to be able to register my own function on a per buffer basis. (This will give me the flexibility I need for tooling purposes).

I am willing to write a PR, but I would like to coordinate the effort with you. Is the idea acceptable to you? If so, we need to decide what that function will return: a string of the html document, a buffer with a html document, etc.

Thanks!

unicode support

Hi Brian，
Thank you for your sharing,it's very useful.
But when I have a unicode path,for example "http://localhost:9991/imp/live/%E6%96%B0%E5%BB%BA%E6%96%87%E6%9C%AC%E6%96%87%E6%A1%A3.org",it doesn't work.I found that needs code
(decode-coding-string path 'utf-8) in httpd/imp/live and httpd/imp/buffer.

Sorry for my pool english.

html is rendering as plain text instead of html?

i am writing a minor mode on top of imp.el

(defun foo (buffer)
  (with-temp-buffer
    (funcall 'web-mode)
    (httpd-start)
    (impatient-mode)))

i have created a temporary buffer which has html content and enabled impatient mode in it. when i browse, it is showing as plain text instead of html.

can't preview the html on Chrome

Hi, I have installed the imp, but when I call imp-visit-buffer, the preview page only shows me a "0".

Could you point me the right direction?

Thanks?

example of major-mode senstivity, i.e. org-mode support

Don't know if this is useful, but it made me happy.

(defun imp-htmlize-filter (buffer)
  "Alternate htmlization of BUFFER before sending to clients."
  (let ((m (with-current-buffer buffer major-mode)))
    (case m
      (org-mode
       (let ((output (current-buffer)))
         (with-current-buffer buffer
           (org-export-as-html 100 nil output))))
      (t
       (let ((html-buffer (save-match-data (htmlize-buffer buffer))))
         (insert-buffer-substring html-buffer)
         (kill-buffer html-buffer))))))

Other approaches would probably be better though.

Fun hack, thanks!

Pages inaccessible with uniquify enabled in a specific setup

Steps to reproduce

Enable uniquify (a package which automatically renames the buffer names to make them unique in a sensible way).
(setq uniquify-buffer-name-style 'forward)
Open ~/dir1/example-file and ~/dir2/example-file.
Enable impatient-mode in ~/dir1/example-file.
Try to access it in a web browser.

What happens

The requested URL is forbidden.

error: Buffer dir1 is private or doesn't exist.

What was expected

The file's contents should be displayed.

Archive this repo and turn on issues in skeeto/impatientmode

INspired by Compro-Prasad in #33 (comment)_

Can you make that settings change @skeeto?

Browser returns to top of document on change

If you have a long document that requires the browser window to have a scroll bar, any change of the buffer (and subsequent change of the served page) causes the browser to return to the top of the page.

Steps to reproduce:

Open a long buffer and share it with impatient mode.
Navigate to the impatient mode address in Firefox and scroll down.
Make any change to the buffer.
Observe that the Firefox page has snapped back to the top of the page.

Expected behavior:

I would expect it to stay at the same point on the page. As it is, this makes it impossible to follow along with the work that is being done.

System information:

Firefox 20 "for Ubuntu" (using a clean profile, i.e. no extensions, and in safe mode)
Ubuntu 12.04
Emacs version (from ppa:cassou/emacs): GNU Emacs 24.3.1 (x86_64-pc-linux-gnu, GTK+ Version 3.4.2) of 2013-04-14 on chindi10, modified by Debian
Impatient mode version: 20130127.1656
Simple HTTPd version: 20121224.1121

Other notes:

This does not happen on Chromium on my system.

Question: can a custom filter determine whether the page will be updated or not?

Hello Brian,

thanks for writing and sharing this useful package.

I wonder if the value returned by a custom filter can determine whether the web page will be updated or not, because the buffer could contain incomplete code and therefore showing the resulting web page would not make sense.

Thanks for your attention.

Make at least one formal release.

Impatient-mode has been sitting at "0.1" since the beginning. Bump the version up to at least 1.0.0 and create a signed tag matching the version number. I suggest sticking to the semver spec (always use 3 segments) when picking a version.

403 Forbidden when there're several same filename's files

I have 2 test.html in different dirs:
testjs/test.html
test/test.html

When I access them using impatient-mode, the server responses with
"
**Forbidden

The requested URL is forbidden.

error: Buffer testjs is private or doesn't exist.**
".

Tag a release for MELPA stable

Could you make a "1.0.0" tag? This will put impatient-mode on MELPA stable.