COMMUNITY

FeathersUI backend for coconut.ui

Hi,
made initial version for featherui backend for coconut.ui

Right now just made working version based on heaps and flash backends, still missing event listeners for components, but other attributes are working fine. Will try to clean up and add missing features in near future :slight_smile:

During development found some issues with inline markup for haxe 4, it is not working if haxe formatter is working on save for vscode, as it adds spaces between tags and compiler fails to compile. Also found some issues with lix and lime extensions in vscode, as could not get the working together, all the time lime was not found so righ now for testing purposes, you need to launch it manually from terminal to compile test app. Will try to investigate more on these issues. On more thing could not get code hinting working for inline markup components, not sure if its even implemented yet.

Any feedback welcome :slight_smile:

7 Likes

Inline markup is an experimental feature and I would personally not recommend using it, because whatever final design is decided on, chances are it’ll cause breaking changes in your code. You can just use strings and together with https://github.com/jeremyfa/haxe-xmlgrammar the DX is ok-ish.

Please open an issue with a reproducible example (can be link to a repo).

There some support for autocompletion in strings. As for inline markup, I haven’t even tried. One of many issues is that VSCode doesn’t have any concept of inline markup, so it doesn’t know when to provide completion.


In any case, nice piece of work! :wink:

It’s not ideal, but you can add special comments to prevent the formatter from messing up your inline markup.

// @formatter:off
<inline>
    <markup/>
</inline>
// @formatter:on

that only works if the file’s contents are somewhat parseable, because formatter will still try to build a tokentree holding everything in memory before writing a formatted file (and skipping excluded sections).
I wouldn’t recommend using formatter on files with inline markup, if you can exclude them completely.

@back2dos @ablum @joshtynjala will try out, but I think will convert to string for now then.

@back2dos if you prefer can move it to cocconut github group so all backends are in one place, for future updates

Regarding issues with lix and lime there are some discussion already, but basically can not invoke lime from lix, could be because lime sets global variables

For events now think what would be the best approuch as feathers uses add/remove event, so need to create new attributes with macro that can add these events, just not sure if its possible to add only valid events as then need to have some mapping events -> component, or just add all of them for every component :slight_smile:

I could probably add some metadata to each component that lists the events that the component dispatches. You could check for it in the macro.

@Hersir I just pushed a commit to Feathers UI with some extra metadata for events.

One or more instances of @:event metadata are added to each component class, and they might look something like this:

@:event("change", openfl.events.Event)
@:event("stateChange", feathers.events.FeathersEvent)

I tested in a macro, and I was able to read all of the events on a class like this:

var eventMeta = theClass.meta.extract(":event");
for (meta in eventMeta) {
	var constant = meta.params[0];
	var type = meta.params[1];
	var eventName = ExprTools.getValue(constant); // example: change
	var typeName = ExprTools.toString(type); // example: openfl.events.Event
}

Side note: I tried using a single expression, like the one below, but I couldn’t for the life of me figure out how to make a macro resolve the original string value.

@:event(openfl.events.Event.CHANGE) // not sure how to resolve

You will need to check the super classes for @:event metadata too. For instance, FeathersControl has metadata for the “initialize” event, but its subclass Button does not because that would be redundant.

Any events inherited from classes like openfl.display.Sprite won’t have @:event metadata, so to expose those events, you’ll need to hard-code them. That should be a lot easier than trying to hard-code the Feathers UI events, though.

Thanks will take a look at the weekend

The safest path is via the typed AST:

switch Context.typeExpr(e).expr {
  case TField(_, FStatic(_.get() => cl, _.get() => f)):
    trace(cl.pack.concat([cl.name]).join('.') + '.' + f.name + '=' + TypedExprTools.toString(f.expr()));
  default:
}

In this case you’ll find that f.expr().expr is TConst(TString(v)) where v is the value you’re after.

1 Like

Thank you, Juraj!

1 Like

Got first success, parsed events and now can call them, still support only trigger for button but will add other types as well, will think how to explain renderer what are events and what not

1 Like

Transferred repo to new account

will try to finalize event support and make it better typed, but could be will need more workshops from @back2dos regarding macros :smiley:

1 Like

Still need global install from libs as lime still dont work with local lix

I’ll try to fit in some time this week to change the event metadata to look like this:

@:event(openfl.events.Event.CHANGE)

I’ll post here when I’ve made that change.

The macro code to parse this style is in this post from @back2dos.

Ok, will update when it will be available

@back2dos @joshtynjala made pull request for event support, feel free to add any comments suggestions :slight_smile:

Soon could be released as haxelib, so could get more feedback.

@joshtynjala I used ValidateSprite as base type, I hope that is ok, as could not find any use case for openfl sprite usage directly in feathersui

I just pushed the commit that updates the @:event annotations to use this style instead.

@:event(openfl.events.Event.CHANGE)

OK will update my pull request