[Pas2js] ui framework help with pas2js

[Michael Van Canneyt]

On Tue, 28 Apr 2020, mister highball wrote:

> Hello!
> This is my first post to this mailing list, and just wanted to start out saying that I've been very much impressed using pas2js so far. I've been following the development for quite some time now, but I've just actually started to try and use the compiler.
> I've been working on a UI framework since this seems to be something the community could use.
>
> Here's the repo (it's in the infant stage)
> https://github.com/mr-highball/nyx
>
> The idea is to build the UI fluently in code, rather than rely on a traditional form editor. While there are some downsides, I believe the upsides are there too (UI changes can be checked in to git/diff'd, easy to see how things are hooked up, etc...).
> Additionally, I'm building the framework to allow the same code to be used to produce browser apps as well as desktop apps. Because of this I rely heavy on interfaces and creation of objects via factories.

A tip:

   TNyxElementCallback = procedure(const AElement : INyxElement);
   TNyxElementNestedCallback = procedure(const AElement : INyxElement) is nested;
   TNyxElementMethod = procedure(const AElement : INyxElement) of object;

Can be replaced by

   TNyxElementCallback = reference to procedure(const AElement : INyxElement);

You don't need the 3 different types. It will simplify your code a lot.

>
> Now... here's my problem
>
> I have this code which is the most basic example I could come up with to debug my library (adding a button)
> https://github.com/mr-highball/nyx/blob/master/test/nyx_browser_test.lpr
>
> ```
> var
>  UI : INyxUI;
>
> procedure BuildUI;
> var
>  I : Integer;
>  LContainer: INyxContainer;
> begin
>  UI := NewNyxUI;
>  LContainer := NewNyxContainer; //** Here's the issue **
>
>  //setup the ui with the demo ui components
>  UI
>    .AddContainer(LContainer, I) //add a container
>    .ContainerByIndex(I)
>      .Add(NewNyxButton)
>      .Container
>    .UI
>    .Render();
> end; ```
>  Rather than returning my interface on that line (the one above
> works just fine, and constructs the UI object the same way), an exception
> gets thrown and leads me to rtl.js (line:687) which looks like this
> (latest version being used 1.4.20)
>
> ```
> for (var id in this){
>        if (this.hasOwnProperty(id)){
>          //console.log('rtl.intfRefs.free: id='+id+' '+this[id].$name+' $o='+this[id].$o.$classname);
>          this[id]._Release();
> ```
> and throws, (Uncaught TypeError: Cannot read property '_Release' of null)
>
> This easily could be an issue with my code, but in this case it seems like
> my reference is getting immediately freed after creation and am having a
> hard time seeing why.

Since your're using interfaces: Reference counting issue, most likely.

> I am debugging in the browser (chrome variant) but
> still having a hard time spotting the issue.  I'm going to continue
> debugging this to see if I can gain some headway, but just didn't know if
> there were any known issues with
>
>  *   interface reference counting
>  *   object creation via metaclasses

Both should work OK, bugs excepted of course. I personally don't use
interfaces, but others do and we haven't received any bugrepors.
(which doesn't necessarily mean there are no bugs, of course)

By contrast I use metaclasses a lot and have not yet seen any errors.

Michael..