ZPT-JS tutorial - Declaring variables

Typos

Take a look at this template:

sample.html 
<html>
  <body>
    <p>
      This is <span data-content="tite">the title</span>.
    </p>
  </body>
</html>

Now we declare the dictionary and invoke ZPT:

sample.js 
import { zpt } from './zpt-esm.js';

var dictionary = { 
    title: "hello world!"
};

zpt.run({
    root: document.body,
    dictionary: dictionary
});

The expected HTML is: 

<html>
  <body>
    <p>
      This is <span data-content="tite">hello world!</span>
    </p>
  </body>
</html>

But the resulting HTML is: 

<html>
  <body>
    <p>
      This is <span data-content="tite">undefined</span>
    </p>
  </body>
</html>

But... what happened? We added a variable called title to the dictionary but we used a variable called tite in the template. As this variable is not defined its value is undefined:

sample.html 
<html>
  <body>
    <p>
      This is <span data-content="tite">the title</span>.
    </p>
  </body>
</html>

The solution: declaring variables

ZPT-JS makes it easy to declare variables. Take a look at this template:

sample.html 
<html>
  <body>
    <p data-declare="required title string">
      This is <span data-content="tite">the title</span>.
    </p>
  </body>
</html>

We have used data-declare statement to declare the title variable as a not undefined string (if a variable is required an undefined value is not valid and an error occurs). Also, this p node now works in strict mode: all variables inside it must be declared. So, if ZPT-JS finds a non declared variable an error occurs.

If an error occurs ZPT-JS stop processing the nodes and show the error (using a javascript alert by default).

Checking types

Sometimes it is useful to declare types to force ZPT-JS to check them. To force a variable is a number:

sample.html 
<html>
  <body>
    <p data-declare="a number">
      A number + 1: <span data-content="+: a 1">a + 1</span>.
    </p>
  </body>
</html>

If the value of a is not a valid number an error occurs.

For more details about types see the reference about data-declare.

Default values

It is easy to declare default values. Any ZPT-JS expression is valid. To set 10 and 20 as default values:

sample.html 
<html>
  <body>
    <p data-declare="a number 10;
                     b number 20">
      Adding... <span data-content="+: a b">a + b</span>.
    </p>
  </body>
</html>

So if a or b are undefined ZPT-JS will set them to their default values.