DEV Community

loading...
Cover image for Get app actions and styles generated from HTML while typing simple attribute directives

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

chris-czopp
Lead JS full-stack engineer and co-owner of GlueCodes
Updated on ・2 min read

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"
Enter fullscreen mode Exit fullscreen mode

Slot

wraps a slot/partial

gc-as="slot"
gc-name="${slotName}"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Record field presenter

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

gc-as="recordFieldPresenter"
gc-provider="${providerName}"
gc-field="${fieldName}"
Enter fullscreen mode Exit fullscreen mode

List item presenter

represents list of records

gc-as="listItemPresenter"
gc-provider="${providerName}"
Enter fullscreen mode Exit fullscreen mode

List field presenter

represents an item filed in the list

gc-as="listFieldPresenter"
gc-provider="${providerName}"
gc-field="${fieldName}"
Enter fullscreen mode Exit fullscreen mode

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}"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)