Arrmatura Web

This is the platform to create a web application.

Components

Use XML-like suntax to define your components

<component id="Application">
    <Main name="world"/>
</component>

<component id="Main">
    <div title="{#greeting}, {@name | upper}!"></div>
    <NavTree data="{R.items}"/>
</component>

<component id="NavTreeItem">
  <a href="id">
    <span>{name | slice:0:50 | capitalize}</span>
    <span If="label" class="label label-{type}">{label}</span>
  </a>
</component>

<component id="NavTree">
  <ul class="nav">
    <li class="nav-item {item.class}" Each="item of data">
      <NavTreeItem Props="{item}">
      <NavTree If="item.subs" data="{item.subs}" />
    </li>
  </ul>
</component>

Get Starteg

In the index.ts file, the arrmatura framework is imported and used to render the application.

import { arrmatura } from 'arrmatura';
import templates from './templates.xml';

launchWeb({
  template: '<Application />'
  components: [templates],
  resources: {
    greeting: 'Hello',
  },
  functions: {
    upper: (x) => x.toUpperCase(),
  },
});

where:

• template: Specifies the root component of the application, which is .
• components: An array of component templates, in this case, the contents of the templates.xml file.
• resources: An object that contains the static data used in the application. In this case, a single resource greeting with the value "Hello" is provided.
• functions: An object that contains functions that can be used in component templates. In this case, a single function upper is provided, which takes a string as an argument and returns the uppercase version of the string.

When the arrmatura function is executed, it creates an instance of the "Application" component and renders it to the page. The "Main" component is then rendered as a child of the "Application" component, and its title is set to the result of evaluating the expression "{#greeting}, {@name | upper}!". This expression uses a combination of static data (greeting), dynamic data (name), and a function (upper) to create the greeting that is displayed in the div element.