johnmastro / trident-mode.el

Emacs minor mode for live Parenscript interaction
The Unlicense
76 stars 8 forks source link

Better doc: add examples #1

Closed vindarel closed 5 years ago

vindarel commented 7 years ago

Hi ! So this project looks awesome. I wanted to try it but I didn't know what to send to the browser. I started trident-mode, slime, skewer, the demo skewer page, I see no error in the *messages* buffer and I sent (trident-eval-sexp) a parenscript snippet:

(ps-html ((:a :href "foobar") "blorg"))
;; "<A HREF=\"foobar\">blorg</A>"

which I can not see in the browser. Am I supposed to ? Do I need to insert it in the DOM ? that would make sense, but then Parenscript doesn't seem to have built-ins for that. Or I must read better its documentation (which is a bit too low level IMO, not very user-centric).

Do you have snippets we can evaluate to try trident-mode ?

thanks !

ps: out of excitment, I referenced this project in a few places (cliki, wikemacs, hopefully the Awesome CL list and Parenscript's readme). pps: did something change since you announced it on reddit 3 years ago ?

johnmastro commented 7 years ago

Hi, thanks for the kind words. Unfortunately, I haven't used Parenscript in a couple years, so this project has languished without any attention. However, I think I can help with your question and by adding some documentation.

Do I need to insert it in the DOM ? that would make sense, but then Parenscript doesn't seem to have built-ins for that. Or I must read better its documentation (which is a bit too low level IMO, not very user-centric).

Yep, ps-html generates HTML, but you still need to insert it into the DOM somehow. Two examples of how to do that would be:

((@ document write)
 (ps-html ((:a :href "foobar") "blorg")))

In which the Javascript generated would be:

document.write("<A HREF=\"foobar\">blorg</A>")

Or:

(setf (@ element inner-h-t-m-l)
      (ps-html ((:a :href "foobar") "blorg")))

In which the Javascript generated would be:

element.innerHTML = "<A HREF=\"foobar\">blorg</A>"

(Both examples are adapted from the section about the DOM in Parenscript's reference manual).

The way I would explain it is this: Parenscript doesn't include any magic for updating the DOM, it just generates Javascript and HTML. So your code needs to contain all the same logic it would if you were writing Javascript and HTML directly. For instance, neither of the examples above use Parenscript-specific methods for updating the DOM. The first one is just using Parenscript's syntax for calling document.write(), and the second is using Parenscript's syntax for assignment.

ps: out of excitment, I referenced this project in a few places (cliki, wikemacs, hopefully the Awesome CL list and Parenscript's readme).

Thanks! Parenscript is very cool. I'm honored and pleased if anyone finds this project useful and/or fun :)

pps: did something change since you announced it on reddit 3 years ago ?

Very little, possibly nothing of substance, has changed in trident-mode. There may have been changes in Parenscript, SLIME, and/or Skewer though.

I hope that helps. Please let me know if you run into any problems with the material above, and I'll try to find some time to check whether any updates are needed for newer Parescript/SLIME/Skewer, and to add some documentation for getting started as your suggested.

vindarel commented 7 years ago

That was very clear, thank you ! With your examples I was able to eval a sexp and send it to the browser. However I was unable to do it twice in a row. The skewer demo page would not update, but it would display the new content if I close it and run-skewer again. Maybe it's just my workflow (if so, I welcome examples once again :) )

Then, out of a few minutes test, it looks like we can not evaluate (trident-eval-sexp) from the middle of a sexp (though we can compile one in slime with C-c C-c), and that skewer has a skewer html mode that allows to send only html that we could make use of (sending html without the need to wrap in some js that modifies the dom, like we did here).

(and, do you know if skewer and this are comparable to clojure's figwheel ?)

johnmastro commented 7 years ago

That was very clear, thank you !

You're welcome - glad it helped!

With your examples I was able to eval a sexp and send it to the browser. However I was unable to do it twice in a row. The skewer demo page would not update, but it would display the new content if I close it and run-skewer again. Maybe it's just my workflow (if so, I welcome examples once again :) )

Hm, I'm not sure. I can't think of any reason why your workflow would stop it from working a second time. Can you share the code you're sending when this happens?

Then, out of a few minutes test, it looks like we can not evaluate (trident-eval-sexp) from the middle of a sexp (though we can compile one in slime with C-c C-c)

You can use trident-eval-defun or trident-eval-dwim for that. (The "DWIM" in the latter's name is because it will send the region if the region is active, or the defun at point otherwise).

skewer has a skewer html mode that allows to send only html that we could make use of (sending html without the need to wrap in some js that modifies the dom, like we did here).

This should definitely be possible to implement. When I used Parenscript, it was primarily as a JavaScript replacement, so that's where I focused.

(and, do you know if skewer and this are comparable to clojure's figwheel ?)

I haven't used Figwheel, but from a quick read it sounds somewhat different. Instead of letting you selectively evaluate / send code to the browser, it rebuilds the entire project when you save a file, and sends the result.

johnmastro commented 5 years ago

I would happily merge additional documentation/examples, but since nearly two years have passed without me getting around to writing it myself (and since we solved your immediate issue back then), I'll close this issue.