logo Rino

Syntax

Starting from Rino.js 2, the syntax is based on standard HTML, making it intuitive and easy to learn. For example, the component would be like this (Read Project Structure for more information):

<component @path="/header" @tag="header" />

In this page, we are going to cover Rino.js syntax that is not covered in the project structure.

Templating HTML with Javascript / Typescript

Rino.js supports powerful templating capabilities using JavaScript or TypeScript. This feature allows dynamic creation of HTML content, such as integrating npm packages, reading files, or programmatically generating content.

Key Points:

  • Use the @type attribute to specify the language (js, javascript, ts, typescript).
  • Assign the resulting string to the global result variable (no need to declare result explicitly).
  • All templating code runs in the Node.js VM.
  • Currently, import/export statements are not supported.

Examples:

Using JavaScript:

<script @type="js" type="text/javascript">
result = "<div>Hello, Rino.js!</div>";
</script>

Using TypeScript:

<script @type="ts" type="text/typescript">
result = "<div>Hello, Rino.js with TypeScript!</div>";
</script>

Markdown

Rino.js allows embedding Markdown directly within an HTML file. This complements the option to load Markdown from an external file using the @path attribute.

Key Points:

  • Use the @type attribute with values md or markdown.
  • Escape the closing </script> tag by adding a backslash <\/.

Example:

<script @type="md" type="text/markdown">
# Markdown Title
This is Markdown content inside an HTML file.
</script>