The horse-html Reference Manual

Next: , Previous: , Up: (dir)   [Contents][Index]

The horse-html Reference Manual

This is the horse-html Reference Manual, generated automatically by Declt version 4.0 beta 2 "William Riker" on Thu Sep 15 04:59:13 2022 GMT+0.

Table of Contents


1 Introduction

horse-html

horse-html is a ParenScript extension to generate HTML inside your ParenScript code. This typically replaces your usage of PS:WHO-PS-HTML.

My main gripe with WHO-PS-HTML is that it generates strings, not DOM elements, which means that you must render it before you are able to do anything with it.

For example:

(use-package :parenscript)

(defun foo ()
  (who-ps-html (:div "foo")))

Will generate the following JavaScript code:

function foo() {
    return ['<DIV>', 'foo', '</DIV>'];
}

With horse-html, you would use:

(use-package :horse-html)

(defun foo ()
  (with-html (:div "foo")))

Which will generate the following JavaScript code:

function foo() {
    var fragment = document.createDocumentFragment();
    var element = document.createElement('div');
    fragment.appendChild(element);
    element.innerText = 'foo';
    return fragment;
}

Some advantages coming out of this approach:

The 2nd point means that you can write your applications in a similar way as what react encourages with JSX, except closer to native.

For example, assuming this HTML:

<div id="foo"></div>

And this ParenScript:

(use-package :parenscript)
(use-package :horse-html)

(defun main ()
  (render (chain document (get-element-by-id "foo"))))
  
(defun render (el)
  (chain el (replace-with (render-foo el))))
  
(defun render-foo (el)
  (with-html (:div
                :onclick (lambda ()
                           (chain console (log "foo"))
                           (render el))
                "hi!")))

You can already see how passing state is done, and it works. Because closures are kept, no string-attribute is generated there.

For convenience, horse-html supports exotic elements being returned. For example, you can call a function:

(with-html (:div (foo)))

(defun foo ()
  (with-html
    (:div :class "my-class" "foo!")
    (:div :class "other-class" "bar!")))

Or return a list:

(with-html
  (:div (chain '(1 2)
               (map (lambda (i) (with-html (:div i)))))))

The TODO app

Of course, to demonstrate what sort of code horse-html was built for, the eternal TODO app has been rewritten :)

It resides in todo.paren, with the HTML provided in there. The HTML assumes you're using trident-mode.

If you're not using trident-mode, you will need to load the todo.js file which has been generated from the todo.paren file.

License

MIT license.


2 Systems

The main system appears first, followed by any subsystem dependency.


Previous: , Up: Systems   [Contents][Index]

2.1 horse-html

Parenscript/HTML done better

Author

Florian Margaine <florian@margaine.com>

License

MIT

Dependency

parenscript (system).

Source

horse-html.asd.

Child Components

3 Files

Files are sorted by type and then listed depth-first from the systems components trees.


Previous: , Up: Files   [Contents][Index]

3.1 Lisp


Next: , Previous: , Up: Lisp   [Contents][Index]

3.1.1 horse-html/horse-html.asd

Source

horse-html.asd.

Parent Component

horse-html (system).

ASDF Systems

horse-html.


3.1.2 horse-html/package.lisp

Source

horse-html.asd.

Parent Component

horse-html (system).

Packages

horse-html.


3.1.3 horse-html/horse.lisp

Source

horse-html.asd.

Parent Component

horse-html (system).

Public Interface

with-html (macro).

Internals

4 Packages

Packages are listed by definition order.


Previous: , Up: Packages   [Contents][Index]

4.1 horse-html

Source

package.lisp.

Use List

common-lisp.

Public Interface

with-html (macro).

Internals

5 Definitions

Definitions are sorted by export status, category, package, and then by lexicographic order.


Next: , Previous: , Up: Definitions   [Contents][Index]

5.1 Public Interface


5.1.1 Macros

Macro: with-html (&rest forms)
Package

horse-html.

Source

horse.lisp.


5.2 Internals


Next: , Previous: , Up: Internals   [Contents][Index]

5.2.1 Special variables

Special Variable: *replacements*
Package

horse-html.

Source

horse.lisp.


5.2.2 Macros

Macro: defreplacement (to-replace replacement)
Package

horse-html.

Source

horse.lisp.


Previous: , Up: Internals   [Contents][Index]

5.2.3 Ordinary functions

Function: has-attributes (form)
Package

horse-html.

Source

horse.lisp.

Function: has-child (form)
Package

horse-html.

Source

horse.lisp.

Function: has-primitive (form)
Package

horse-html.

Source

horse.lisp.

Function: render-attributes (form)
Package

horse-html.

Source

horse.lisp.

Function: render-child (form)
Package

horse-html.

Source

horse.lisp.

Function: render-form (form)
Package

horse-html.

Source

horse.lisp.

Function: render-forms (forms)
Package

horse-html.

Source

horse.lisp.

Function: render-primitive (form)
Package

horse-html.

Source

horse.lisp.


Appendix A Indexes


Next: , Previous: , Up: Indexes   [Contents][Index]

A.1 Concepts


Next: , Previous: , Up: Indexes   [Contents][Index]

A.3 Variables

Jump to:   *  
S  
Index Entry  Section

*
*replacements*: Private special variables

S
Special Variable, *replacements*: Private special variables

Jump to:   *  
S