reblocks-parenscript
2024-10-12
An utility to define JavaScript dependencies for Weblocks widgets using Parenscript.
reblocks-parenscript - An utility to define JavaScript dependencies for Weblocks widgets using Parenscript.
REBLOCKS-PARENSCRIPT ASDF System Details
- Description: An utility to define JavaScript dependencies for Weblocks widgets using Parenscript.
- Licence: Unlicense
- Author: Alexander Artemenko [email protected]
- Homepage: https://40ants.com/reblocks-parenscript/
- Bug tracker: https://github.com/40ants/reblocks-parenscript/issues
- Source control: GIT
- Depends on: alexandria, bordeaux-threads, parenscript, reblocks
Installation
You can install this library from Quicklisp, but you want to receive updates quickly, then install it from Ultralisp.org:
(ql-dist:install-dist "http://dist.ultralisp.org/"
:prompt nil)
(ql:quickload :reblocks-parenscript)
Usage
This library should be used to define JavaScript dependencies for Reblocks widgets.
API
REBLOCKS-PARENSCRIPT
package reblocks-parenscript
Classes
PARENSCRIPT-DEPENDENCY
class reblocks-parenscript:parenscript-dependency
(local-dependency)
Keeps JavaScript code, created using make-dependency
macro or make-dependency*
function.
Readers
reader reblocks-parenscript:js-code
(parenscript-dependency) (:js)
Functions
function reblocks-parenscript:make-dependency*
parenscript-code
This function works similarly like make-dependency
macro but accepts
Parenscript code as a list. They are related to each other like
parenscript:ps macro and parenscript:ps* function.
Use a function version when you want to build a JavaScript code from parts and embed some value into it.
Usually it looks like this:
CL-USER> (let ((widget-id "foo-bar")) (reblocks-parenscript:make-dependency* `(defun show-alert () (alert (+ "Hello from widget with id = " ,widget-id))))) #<REBLOCKS-PARENSCRIPT:PARENSCRIPT-DEPENDENCY >
This will generate following JavaScript code:
CL-USER> (format t "~A~%"
(reblocks-parenscript:js-code *))
function showAlert() {
__PS_MV_REG = [];
return alert('Hello from widget with id = ' + 'foo-bar');
};
Macros
macro reblocks-parenscript:make-dependency
&body parenscript-code
This macro creates an object of class parenscript-dependency
transformin the BODY
into JavaScript Code. It interpreters whole body as a Parenscript code.
Here is a usage example.
CL-USER> (reblocks-parenscript:make-dependency (defun show-alert () (ps:chain console (log "Showing alert")) (alert "Hello from Lisp!")) (set-interval show-alert 3000)) #<REBLOCKS-PARENSCRIPT:PARENSCRIPT-DEPENDENCY >
This dependency will have this JavaScript code:
CL-USER> (format t "~A~%" (reblocks-parenscript:js-code *)) function showAlert() { console.log('Showing alert'); __PS_MV_REG = []; return alert('Hello from Lisp!'); }; setInterval(showAlert, 3000);
You can use this dependency in a method of reblocks/dependencies:get-dependencies
generic-function like this:
(defmethod reblocks/dependencies:get-dependencies ((widget example)) (list* (reblocks-parenscript:make-dependency (defun show-alert () (ps:chain console (log "Showing alert")) (alert "Hello from Lisp!")) (set-interval show-alert 3000)) (call-next-method)))
macro reblocks-parenscript:make-js-handler
&key lisp-code js-code
Creates a Reblocks action and returns JavaScript code, which can be used as onChange
, onClick
, etc. handler.
- Argument
LISP-CODE
should be a list of conses:
First list item should be action's lambda list. Other list items are wrapped into implicit progn.
- Argument
JS-CODE
also should be a list of conses:
Parenscript code, returning an object. This object will be passed to the Lisp part of the handler as keyword arguments.
This macro creates a code which will return a string.
The result is suitable to be used inline as value for HTML
attributes like onChange
, onClick
, etc.
Handler must be build from two parts JS
and Lisp.
JavaScript part should be written in Parenscript and return an objects. This object will be passed to the backend as keyword arguments for the action, defined by Lisp part of the handler.
The code from JS-CODE
argument will be wrapped into a function which is called
immediately with implicit arguments.
Here is a real world example. This code processes updates of a text
in the HTML
input. This way you can make a suggest or on fly value validation:
(:input :value url
:name "url"
:type "text"
:onchange
(reblocks-parenscript:make-js-handler
:lisp-code ((&key url)
(update-url (branches widget)
url))
:js-code ((event)
;; This will pass new URL value
;; to the backend:
(parenscript:create
:url (@ event target value)))))