Web Components support

[jcubic]

I was trying to create a Web Component in LIPS. But failed. Here is my attempt:

https://codepen.io/jcubic/pen/qENmmKb?editors=1000

I've found the code on StackOverflow:

• What is the ES5 way of writing web component classes?

But the code doesn't work and keeps throwing:

Uncaught TypeError: Failed to construct 'HTMLElement': Illegal constructor

I suspect that the problem is that the class constructor is async, returns a promise.

This code works:

    function HelloElement() {
       console.log('x');
       const ret = make();
       console.log(ret instanceof HTMLElement);
       return ret;
    }
    function make() {
      return Reflect.construct(HTMLElement, [], HelloElement);
    }

But when the code returns Promise.resolve, I've got the same error.

    function HelloElement() {
       console.log('x');
       const ret = make();
       console.log(ret instanceof HTMLElement);
       return Promise.resolve(ret);
    }
    function make() {
      return Reflect.construct(HTMLElement, [], HelloElement);
    }

I need to check the continuation branch; if I remember correctly, I've made all the native sync.

[jcubic]

I just a quick test and the define-class doesn't return a promise. I've asked a question on StackOverflow:

• Web Components in Scheme interpreter in JavaScript?

[jcubic]

For some reason, the lambda constructor doesn't work as a web component. You need a workaround using JavaScript.

Here is a macro that can be used to create Web Components. It works similarly to internal define-class but the empty constructor is created using JavaScript.

(define-macro (define-component name . body)
    (let* ((class (gensym name)))
     `(let ((,class (self.eval "(function WebC() {
                                  return Reflect.construct(HTMLElement, [], WebC);
                                })")))
        (set-obj! ,class "prototype" (Object.create HTMLElement.prototype))
        ,@(map (lambda (expr)
                 `(set-obj! (. ,class "prototype") ,(symbol->string (car expr)) ,(cadr expr)))
               body)
        (customElements.define ,(symbol->string name) ,class))))

(define-component current-date
   (connectedCallback
    (lambda ()
      (let ((now (new Date)))
        (set! this.textContent (now.toLocaleDateString))))))

This defines a component:

<current-date></current-date>

Here is a working prototype:

https://codepen.io/jcubic/pen/qENmmKb?editors=1001