foretspaisibles
commented
6 years ago Thanks to @davazp comments in #297 I could make some progresses towards a viable definition of a create-class compilation. It looks like this:
(define-compilation create-class (class super props)
(let ((actual-super
(cond
((stringp super)
(make-symbol super))
((fboundp super)
`(get ,(convert super) "fvalue"))
((boundp super)
`(get ,(convert super) "value"))
(t (error "~A: Invalid super class specifier." super))))
actual-props)
(do* ((tail props (cddr tail)))
((null tail))
(push (list 'object "key" (car tail) "value" (convert (cadr tail) *multiple-value-p*)) actual-props))
`(call-internal |js_to_lisp| (selfcall
(var (,(make-symbol class)
(call
(function (|superParameter|)
(var (|props| ,(apply #'vector actual-props)))
(call-internal |inherits| ,(make-symbol class) |superParameter|)
(named-function ,(make-symbol class) ()
(call-internal |classCallCheck| |this| ,(make-symbol class))
(var (|_this|
(call-internal |possibleConstructorReturn|
|this|
(method-call
(or (get ,(make-symbol class) "__proto__")
(method-call |Object| "getPrototypeOf" ,(make-symbol class)))
"call"
|this|))))
(var |i|)
(for ((= |i| 0) (< |i| (get |props| "length")) (post++ |i|))
(var (|descriptor| (property |props| |i|)))
(if (in "value" |descriptor|)
(if (=== (typeof (get |descriptor| "value")) "function")
(= (property |_this| (get |descriptor| "key"))
(method-call (get |descriptor| "value") "bind" |this|))
(= (property |_this| (get |descriptor| "key"))
(get |descriptor| "value")))))
(return |_this|))
(call-internal |createClass| ,(make-symbol class) |props|)
(return ,(make-symbol class)))
,actual-super)))
(return ,(make-symbol class))))))It expects class name and super which could either be a string, such as "React.Component" or a symbol holding such a component (not tested yet). My construction is not totally good, indeed, the simple component definition
JSCL> (with-compilation-environment (compile-toplevel '(jscl::fset
'my-todo-list
(jscl::my-create-class
"TodoList" "React.Component"
("render"
(lambda (&rest react-internal)
(jscl::/debug "my-todo-list#render")
(create-element "h1" "Hello, World!")))))))renders as
var l1 = internals.intern("MY-TODO-LIST");
var l2 = internals.intern("NIL", "COMMON-LISP");
var l3 = internals.make_lisp_string("my-todo-list#render");
var l4 = internals.make_lisp_string("h1");
var l5 = internals.make_lisp_string("Hello, World!");
var l6 = internals.intern("CREATE-ELEMENT");
l1.fvalue = internals.js_to_lisp(
(function() {
var TodoList = (function(superParameter) {
var props = [
{
key: "render",
value: function JSCL_USER_NIL(values) {
var v1 = l2.value;
var I;
for (I = arguments.length - 1 - 1; I >= 0; I--) {
v1 = new internals.Cons(arguments[I + 1], v1);
}
var v2 = this;
console.log(internals.xstring(l3));
return l6.fvalue(values, l4, l5);
}
}
];
internals.inherits(TodoList, superParameter);
function TodoList() {
internals.classCallCheck(this, TodoList);
var _this = internals.possibleConstructorReturn(
this,
(TodoList.__proto__ || Object.getPrototypeOf(TodoList)).call(this)
);
var i;
for (i = 0; i < props.length; i++) {
var descriptor = props[i];
if ("value" in descriptor)
if (typeof descriptor.value === "function")
_this[descriptor.key] = descriptor.value.bind(this);
else _this[descriptor.key] = descriptor.value;
}
return _this;
}
internals.createClass(TodoList, props);
return TodoList;
})(React.Component);
return TodoList;
})()
);The generated code for the anonymous callback is wrong. The expression argument to return is l6.fvalue(values, l4, l5); where the values are not bound. When running this code triggers an exception in Chrome and the debugger shows that values is an undefined variable.
Using the alternative definition
JSCL> (with-compilation-environment (compile-toplevel '(jscl::fset
'my-todo-list
(jscl::my-create-class
"TodoList" "React.Component"
("render"
(lambda (&rest react-internal)
(jscl::/debug "my-todo-list#render")
(let ((answer (create-element "h1" "Hello, World!")))
answer)))))))leads to the generated code
var l1 = internals.intern("MY-TODO-LIST");
var l2 = internals.intern("NIL", "COMMON-LISP");
var l3 = internals.make_lisp_string("my-todo-list#render");
var l4 = internals.make_lisp_string("h1");
var l5 = internals.make_lisp_string("Hello, World!");
var l6 = internals.intern("CREATE-ELEMENT");
l1.fvalue = internals.js_to_lisp(
(function() {
var TodoList = (function(superParameter) {
var props = [
{
key: "render",
value: function JSCL_USER_NIL(values) {
var v1 = l2.value;
var I;
for (I = arguments.length - 1 - 1; I >= 0; I--) {
v1 = new internals.Cons(arguments[I + 1], v1);
}
var v2 = this;
console.log(internals.xstring(l3));
return (function(v3) {
return v3;
})(l6.fvalue(internals.pv, l4, l5));
}
}
];
internals.inherits(TodoList, superParameter);
function TodoList() {
internals.classCallCheck(this, TodoList);
var _this = internals.possibleConstructorReturn(
this,
(TodoList.__proto__ || Object.getPrototypeOf(TodoList)).call(this)
);
var i;
for (i = 0; i < props.length; i++) {
var descriptor = props[i];
if ("value" in descriptor)
if (typeof descriptor.value === "function")
_this[descriptor.key] = descriptor.value.bind(this);
else _this[descriptor.key] = descriptor.value;
}
return _this;
}
internals.createClass(TodoList, props);
return TodoList;
})(React.Component);
return TodoList;
})()
);which renders appropriately in chrome. (Yeah!)
How can I adjust my handling of the props argument in my definition of create-class to avoid generating the problematic reference to values ?
davazp
mmontone
hemml
vlad-km
As stated here and there across code, issues or some PRs, we still need to work on a design for the JavaScript. I have started to experiment with this, see branch https://github.com/michipili/jscl/tree/explore/react. This branch is prefixed by
explore/, this is explorative programming and the organisation is really messy. :) The goal is not yet to prepare a PR but to experiment with ideas and gather feedback. My approach was motivated by the following requirements:Foreign objects
I would like to deal with foreign JavaScript objets pretty much as if they had been created by a CL defstruct, enhanced with functions to perform operations.
I would like to reduce the boilerplate typing to the bare minimum and therefore use a declarative syntax, similar to what we know form defstruct or defclass.
For 2., here is an example of exposing the foreign JavaScript Arrays, just giving enough functions to handle them as a stack:
and here is a more extensive example, describing the Synthetic React-Dom events.
Note the use of an optional
:implicit-instancewhich could also be used nicely to bind modules, giving the unique ability to rebind them locally, e.g. in a test-suite.Satisfying these requirements means that the details of the foreign JavaScript layer are all contained in the argument to
define-foreign-js-class. This avoid these details leaking away in other parts for the code, and in turns avoids tight coupling to JavaScript and JSCL of the programs using these definitions.See https://github.com/michipili/jscl/blob/explore/react/react/ffi2.lisp#L52 to experiment with these definitions.
Defining JS Classes in Common Lisp
I used the Babel compiler (ES6 to portable JavaScript) to examine the implementation of inheritance in ES6 and tries to mimic this in JSCL. I have tried to define ahttps://github.com/michipili/jscl/blob/explore/react/src/compiler/compiler.lisp#L1437 builtin
which is quite close from working but my understanding of the compilers is for now too limited to actually get it working.
I would like a call to
to expand adequately but my issue is that the symbols |MyArray| and |Array| should be interpreted literally while the code I generate tries to dereference them. How could I fix this?
For instance, the snippet
should be expanded to
but instead the symbol with name "MyArray" is bound to a local variable and its value cell is used in place of
,class.See also: #294, where the discussion started.