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?
Top comments (0)