EXAMPLES

JavaScriptからMatraを使う。

websiteの作例は、Matra sourceを単体で眺めるだけでなく、TypeScriptやJavaScriptからparse、変換、renderする入口として掲載します。

TypeScript-first

プログラマブルな作例を増やせるように、コードはTypeScriptで書ける形を基本にします。

HTMLを生成する

Matraのtag、props、childrenをHTML rendererへ渡す最小例です。

TS render-html.ts

import { parse } from "@matra/core"
import { toHTML } from "@matra/html"

const source = [
  'article(',
  '  h1("Hello Matra"),',
  '  p(class="lead", "Structure first.")',
  ')',
].join("\n")

const html = toHTML(parse(source))
console.log(html)

MATRA article.matra

article(
  h1("Hello Matra"),
  p(class="lead", "Structure first.")
)

SVGを描画する

Graphics packageはMatra sourceを直接SVGへcompileできます。

TS render-svg.ts

import { compile } from "@matra/graphics"

const source = [
  "svg(",
  "  width=256,",
  "  height=256,",
  '  rect(width=256, height=256, fill="#fbfaf5"),',
  '  circle(cx=128, cy=128, r=72, fill="#ff4d6d")',
  ")",
].join("\n")

const svg = compile(source, { pretty: true })

MATRA badge.matra

svg(
  width=256,
  height=256,
  rect(width=256, height=256, fill="#fbfaf5"),
  circle(cx=128, cy=128, r=72, fill="#ff4d6d")
)

ASTをプログラムで組み替える

CoreのASTは普通のTypeScript値として扱えます。domain固有の意味づけはrenderer側に残します。

TS transform.ts

import { parse, transform } from "@matra/core"

const ast = parse([
  "menu(",
  '  item(href="/docs/", "Docs"),',
  '  item(href="/play/", "Playground")',
  ")",
].join("\n"))

const normalized = transform(ast, node =>
  node.tag === "item"
    ? { ...node, tag: "a", props: { ...node.props, role: "menuitem" } }
    : node,
)

MATRA menu.matra

menu(
  item(href="/docs/", "Docs"),
  item(href="/play/", "Playground")
)