Introducing BashX

The main problem with integrating any HTML into bash is, that there are no reliable syntax options for it. That’s why we present BashX, followed by .shx and .bashx file extensions:

#!/bin/bashx
function main() {
  @return html {
    <main>
      <Component>
          hello world!
      </Component>
    </main>
  }
}

This is an example of using @return for HTML.

After that, we thought: Why not add JSON as well?

#!/bin/bashx
@return json {
  "key": "$value"
}

BashX would generate echo "{ \"key\": \"$value\" }" and execute it.

Main concept of components

BashX has two main functions for component building and data parsing:

• @parse
• @wrapper

These functions build the whole system of components.

  @return html {
    <main>
      <Component class='test'>
        <Component2 />
          hello world!
      </Component>
    </main>
  }

BashX will parse this code block and return as:

{
  echo '<main>'
  Component class='test'
  Component2
  echo "hello world!"
  /Component
  echo '<main>'
}

Any custom tag is parsed as function. It’s worth mentioning that bashx has the same requirement for functions to have first letter capitalized.

Here is an example of Component function:

function Component() {
  @parse "$@"
  @return html {
    <div class="$class">
      {@children}
    </div>
  }
}
@wrapper Component

@wrapper doesn’t do magic, it just splits Component with {@children} and creates function /Component

You can also see @parse function, which automatically parses all HTML-like arguments into variables. In our case, class='test' would store ‘test’ in variable $class.

Using bash inside components

BashX is nothing if you can’t use bash inside of it, so we made <script> for bash syntax:

<script type="text/x-bash">
echo "pure bash works here"
greeting="Hello world!"
for ((i=0;i>10;i++)); do
    echo "i: $i"
done
</script>

You can freely use variables inside components without any special syntax required:

<p class="mx-auto $class">
  $greeting
    ${greeting2:5}
    $(date)
<p>

Conditional rendering

Similarly to JSX/TSX, BashX has conditional rendering in form of subshell capture:

$(which neofetch >/dev/null 2>1 && neofetch || <div class="text-3xl">neofetch is not installed</div>)
$(
    [[ "$output" ]] && <div>$output</div> || <div>Nothing to show.</div>
)