DEV Community

Cover image for New one more more declarative templating syntax?
chris-czopp
chris-czopp

Posted on • Edited on

New one more more declarative templating syntax?

Following my previous post, I'd like to ask you what you think about the presented syntax?

It suppose to be as close to HTML as possible. But, the main difference between this and others is that it doesn't use any inline JS e.g. in for loops or if's. It suppose to be something complimentary to GlueDOM to let developers write HTML and only when necessary extend it with sandboxed JS.

The rationale behind making another syntax instead of using JSX can be found in this README.md. But in short is to have a unified way of writing UI components containing complex conditionals. JSX is cool but can easily get nasty.

<h1>Syntax Idea</h1>
<input-x type="text" name="firstName">
  <script>
    if (actionResults.setFirstNameInputVisible) {
      props.className = 'visible'
    }

    props.onClick = () => {

    }
  </script>
</input-x>
Enter fullscreen mode Exit fullscreen mode

Top comments (4)

Collapse
 
krishan111 profile image
Krishan111

Sir can u tell me that how can l show colored code in code blocks on a website.
Thanks

Collapse
 
chrisczopp profile image
chris-czopp

I guess prismjs.com/ could help you

Collapse
 
krishan111 profile image
Krishan111

Thankyou Sir You solved my problem

Collapse
 
chrisczopp profile image
chris-czopp

Here is a little playground: codepen.io/Czopp/pen/oNzEMWr