Language

Built-in blocks

[doctype!], [for-each], [import] and [slot]: what each does, its rules and its errors.

Four blocks are ArcMoon's own. They do a job while the page is built and never become an HTML tag:

• [doctype!]: writes <!doctype html>.
• [for-each]: repeats its body for each item of a list.
• [import]: loads a component from another file.
• [slot]: marks where a component puts the content it is given.

[doctype!]

Tells the browser the page is modern HTML. Put it before the page's [html]:

[doctype!]
[html = lang: "en"]
  [head][title]Home[end][end]
  [body][h1]Home[end][end]
[end]

<!doctype html>
<html lang="en">
  <head>
    <title>Home</title>
  </head>
  <body>
    <h1>Home</h1>
  </body>
</html>

• Any case works: [DOCTYPE!] is the same.
• It takes no props and no body, so it is always self-closing.
• Comments and imports above it are fine: they write nothing.
• Components and partial pages don't need it; only the full page does, once.

✗ [doctype] takes no props or body; write [doctype!]

[for-each]

Writes its body once for each item. The list comes from ${ }$, as names the item, and i is its position:

${ const types = ["string", "number", "boolean"]; }$
[ul]
  [for-each = ${ types }$, as: "type"]
    [li]${ i + 1 }$. [code]${ type }$[end][end]
  [end]
[end]

<ul>
  <li>1. <code>string</code></li>
  <li>2. <code>number</code></li>
  <li>3. <code>boolean</code></li>
</ul>

• Props: the list first, then as: "name" (quoted). Without as, the item is value.
• It needs a body and an [end]: it can't be self-closing.
• It runs while building. To repeat elements in the browser, see Lists that change.

✗ [for-each] needs an array first: [for-each = ${ items }$, as: "item"]
✗ [for-each] needs a body and [end]
✗ unquoted value n for prop "as"; write "n" (only true / false and numbers may be unquoted)

More in Loops: objects, data from files, nested loops.

[import]

Loads a component and names it. Then the name works like a block:

[import = Card: "./Card.arcm" !]
[Card = title: "Hello" !]

• Imports come first in the file, before any markup.
• Always self-closing, and only for .arcm files.
• The path is relative to the file, or uses an alias like @/components/Card.arcm.

✗ [import] must be at the top of the file
✗ [import] must be self-closing: [import = Name: "./file.arcm" !]
✗ [import] only loads .arcm files, got "./util.js"
✗ "Card" is imported twice

More in Importing and Import aliases.

[slot]

Used inside a component: the content the caller puts in the component's body goes where [slot!] is. [slot]…[end] holds fallback content for when there is none:

[div = class: "card"]
  [slot]No content yet.[end]
[end]

[import = Card: "./Card.arcm" !]
[Card][p]Hello![end][end:Card]
[Card!]

<div class="card">
  <p>Hello!</p>
</div>
<div class="card">No content yet.</div>

• Self-closing ([slot!]) for no fallback, or with a body for a fallback.
• It belongs in components. In a page there is no caller, so it only writes its fallback.
• There is one kind of slot; pass other areas as props.

More in Slots.

HTML blocks with extra work

These are normal HTML elements, but ArcMoon does more with them while building:

• [style]…[end]: its CSS is bundled into the page, and in a component it is scoped to that component. See Styles.
• [script = src: "./app.js" !]: a local script file joins the page's bundled JavaScript, like runtime code. See Runtime code.