The horse-html Reference Manual

Table of Contents

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

The horse-html Reference Manual

This is the horse-html Reference Manual, generated automatically by Declt version 3.0 "Montgomery Scott" on Mon Dec 02 10:26:56 2019 GMT+0.


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

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.


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

2 Systems

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


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

2.1 horse-html

Author

Florian Margaine <florian@margaine.com>

License

MIT

Description

Parenscript/HTML done better

Dependency

parenscript

Source

horse-html.asd (file)

Components

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

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 files   [Contents][Index]

3.1.1 horse-html.asd

Location

horse-html.asd

Systems

horse-html (system)


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

3.1.2 horse-html/package.lisp

Parent

horse-html (system)

Location

package.lisp

Packages

horse-html


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

3.1.3 horse-html/horse.lisp

Parent

horse-html (system)

Location

horse.lisp

Exported Definitions

with-html (macro)

Internal Definitions

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

4 Packages

Packages are listed by definition order.


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

4.1 horse-html

Source

package.lisp (file)

Use List

common-lisp

Exported Definitions

with-html (macro)

Internal Definitions

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

5 Definitions

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


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

5.1 Exported definitions


Previous: , Up: Exported definitions   [Contents][Index]

5.1.1 Macros

Macro: with-html &rest FORMS
Package

horse-html

Source

horse.lisp (file)


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

5.2 Internal definitions


Next: , Previous: , Up: Internal definitions   [Contents][Index]

5.2.1 Special variables

Special Variable: *replacements*
Package

horse-html

Source

horse.lisp (file)


Next: , Previous: , Up: Internal definitions   [Contents][Index]

5.2.2 Macros

Macro: defreplacement TO-REPLACE REPLACEMENT
Package

horse-html

Source

horse.lisp (file)


Previous: , Up: Internal definitions   [Contents][Index]

5.2.3 Functions

Function: has-attributes FORM
Package

horse-html

Source

horse.lisp (file)

Function: has-child FORM
Package

horse-html

Source

horse.lisp (file)

Function: has-primitive FORM
Package

horse-html

Source

horse.lisp (file)

Function: render-attributes FORM
Package

horse-html

Source

horse.lisp (file)

Function: render-child FORM
Package

horse-html

Source

horse.lisp (file)

Function: render-form FORM
Package

horse-html

Source

horse.lisp (file)

Function: render-forms FORMS
Package

horse-html

Source

horse.lisp (file)

Function: render-primitive FORM
Package

horse-html

Source

horse.lisp (file)


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

Appendix A Indexes


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

A.1 Concepts

Jump to:   F   H   L  
Index Entry  Section

F
File, Lisp, horse-html.asd: The horse-html․asd file
File, Lisp, horse-html/horse.lisp: The horse-html/horse․lisp file
File, Lisp, horse-html/package.lisp: The horse-html/package․lisp file

H
horse-html.asd: The horse-html․asd file
horse-html/horse.lisp: The horse-html/horse․lisp file
horse-html/package.lisp: The horse-html/package․lisp file

L
Lisp File, horse-html.asd: The horse-html․asd file
Lisp File, horse-html/horse.lisp: The horse-html/horse․lisp file
Lisp File, horse-html/package.lisp: The horse-html/package․lisp file

Jump to:   F   H   L  

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

A.2 Functions

Jump to:   D   F   H   M   R   W  
Index Entry  Section

D
defreplacement: Internal macros

F
Function, has-attributes: Internal functions
Function, has-child: Internal functions
Function, has-primitive: Internal functions
Function, render-attributes: Internal functions
Function, render-child: Internal functions
Function, render-form: Internal functions
Function, render-forms: Internal functions
Function, render-primitive: Internal functions

H
has-attributes: Internal functions
has-child: Internal functions
has-primitive: Internal functions

M
Macro, defreplacement: Internal macros
Macro, with-html: Exported macros

R
render-attributes: Internal functions
render-child: Internal functions
render-form: Internal functions
render-forms: Internal functions
render-primitive: Internal functions

W
with-html: Exported macros

Jump to:   D   F   H   M   R   W  

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

A.3 Variables

Jump to:   *  
S  
Index Entry  Section

*
*replacements*: Internal special variables

S
Special Variable, *replacements*: Internal special variables

Jump to:   *  
S  

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

A.4 Data types

Jump to:   H   P   S  
Index Entry  Section

H
horse-html: The horse-html system
horse-html: The horse-html package

P
Package, horse-html: The horse-html package

S
System, horse-html: The horse-html system

Jump to:   H   P   S