logo Rino

文法

Rino.js 2 から、文法が標準 HTML ベースになり、 直感的で学習しやすいものになりました。 例えば、コンポーネントは次のように定義できます （詳しくはプロジェクト構造をご参照ください）:

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

このページでは、プロジェクト構造でカバーされていない Rino.js の文法について説明します。

JavaScript/TypeScript を使用した HTML テンプレート

Rino.js は JavaScript または TypeScript を使用した強力なテンプレート機能をサポートしています。 この機能を使用して、npm パッケージの統合、ファイルの読み込み、 またはプログラム的に HTML コンテンツを生成することができます。

主なポイント:

  • @type属性を使用して、言語（js, javascript, ts, typescript）を指定します。
  • 結果の文字列をグローバル変数resultに代入します（resultを明示的に宣言する必要はありません）。
  • すべてのテンプレートコードは Node.js の VM 内で実行されます。
  • 現在、import/export文はサポートされていません。

例:

JavaScript の使用例:

<script @type="js" type="text/javascript">
result = "<div>こんにちは、Rino.js!</div>";
</script>

TypeScript の使用例:

<script @type="ts" type="text/typescript">
result = "<div>こんにちは、Rino.js TypeScript!</div>";
</script>

Markdown

Rino.js では、Markdown を HTML ファイル内に直接埋め込むことができます。 これは、@path属性を使用して外部ファイルから Markdown を読み込むオプションを補完します。

主なポイント:

  • @type属性に md または markdown の値を使用します。
  • 閉じタグ</script>は、バックスラッシュ<\/を追加してエスケープ処理を行います。

例:

<script @type="md" type="text/markdown">
# Markdownタイトル
このHTMLファイル内に埋め込まれたMarkdownコンテンツです。
</script>