Get app actions and styles generated from HTML while typing simple attribute directives

Imagine you just pasted some HTML template in your code editor. You want to make it interactive, so you add to it attribute directives which are interpreted as you type. You can split your UI into Virtual-DOM-backed sections with a gc-slot argument and that generates scoped CSS. You don't need to worry about class naming clashes. Imagine you have a list of products in your HTML and by adding few directives your static HTML is turned into uni-directional-state-powered actions. And there it generates even an action which returns your testing data parsed from HTML in real-time!

If it's sounds like something you may like, this is a subset of features you'll find in GlueCodes Platform (https://www.glue.codes). Check us out!

Here is a full list of all directive attributes you'll find when using the IDE:

Layout

root tag of a page

gc-as="layout"

Slot

wraps a slot/partial

gc-as="slot"
gc-name="${slotName}"

Input

represents input field

gc-as="input"
gc-field="${fieldName}"
gc-model="${model || undefined}"
gc-error-name="${possibleErrorName || undefined}"
gc-error-message="${possibleErrorMessage || undefined}"
gc-error-cancel-on="${domEventName}"
gc-reload || undefined

Command trigger

dispatches DOM event to commands

gc-as="commandTrigger"
gc-name="commandName"
gc-model="${model || undefined}"
gc-event="${eventName || onclick}"
gc-redirect="${urlPath}" || gc-reload || undefined

Record field presenter

represents a filed of a record, works on img tag too

gc-as="recordFieldPresenter"
gc-provider="${providerName}"
gc-field="${fieldName}"

List item presenter

represents list of records

gc-as="listItemPresenter"
gc-provider="${providerName}"

List field presenter

represents an item filed in the list

gc-as="listFieldPresenter"
gc-provider="${providerName}"
gc-field="${fieldName}"

Conditional

wraps its content into if statement, can be used inside listItemPresenter by matching its provider

gc-as="conditional"
gc-provider="${providerName}"
gc-test-field="${fieldName}"

Page link

link to a particular page, when gc-custom-name provided the link text is taken from provided text

gc-as="pageLink"
gc-page="${pageName}"
gc-custom-name || undefined

Error presenter

presents error if one occurs, when gc-custom-name provided the text remains as provided

gc-as="errorPresenter"
gc-error="${errorName}"
gc-custom-name || undefined

What do you think? Is it something you would use?