# FratmScript reference for AI agents

FratmScript is JavaScript with Neapolitan keywords. Source files end in `.fratm`; the compiler
(written in Rust) turns them into plain modern JavaScript (ES modules) that runs on Node.js or in
the browser. Only the keywords change: operators, literals, numbers, strings, regexes, method
calls and every JavaScript built-in (`Math`, `JSON`, `Array`, `Promise`, `Map`, `Set`, `fetch`,
`process`, `console`, `Object`, `Date`...) are written exactly as in JavaScript.

Playground: https://fratmscript.kkratter.com/ · Repo: https://github.com/kkratterf/fratmscript

## Rules that trip up agents

1. **JavaScript keywords are not keywords here.** Never write `const`, `let`, `var`, `function`,
   `return`, `if`, `else`, `for`, `while`, `new`, `class`, `this`, `true`, `false`, `null`,
   `try`, `catch`, `throw`, `async`, `await`, `import`, `export`. Use the dialect words in the
   table below. (`typeof` and `instanceof` are accepted as aliases.)
2. **One statement per line**, or separate statements with `;`. Semicolons are optional, and a
   line that starts with `[` or `(` always starts a new statement (no JavaScript ASI trap; do
   not put a defensive `;` at the start of a line).
3. **A line ends the statement unless the expression clearly goes on**: a line may end with a
   binary operator, `=`, `?`, `:` or `=>`, or the next line may start with `.method()`, `?.`,
   `?`, `:`, `&&`, `||`, `??` or a comparison; inside `( )` and `[ ]` line breaks never matter.
   `e`/`o` (the words) at the end of a line do not continue it: use `&&`/`||` there, or put
   `e`/`o` at the start of an expression inside parentheses.
4. **Braces are required** after `si`, `sinnò`, `pe`, `mentre che`: `si (x) { ... }`.
5. `chist è` (const) cannot be reassigned; declaring the same name twice in a scope is a compile
   error. Use `tien` (let) for values that change.
6. Labels and tagged templates work as in JavaScript: `fore: pe (...) { rompe fore }`,
   `` String.raw`a\nb` ``.
7. Compiler and runtime error messages are in Neapolitan, with line and column. See "Reading
   errors" below; most errors also carry a hint that starts with 💡.
8. **Web pages:** write JSX tags with their Neapolitan names (`<cascett>`, `<citofono>`, table in
   "JSX" below; never invent one: an unknown lowercase name stays as it is in the DOM). Attributes
   and events of HTML tags have Neapolitan names too (`classe`, `esempio`,
   `quanno-tuocche`; the React names `className`, `onClick` work as well); props of a
   component are never translated. Class names, ids and Tailwind classes are never translated:
   `classe="mt-4"` and `.pizza` stay as they are.
   In `` stile`…` `` only the words of the CSS tables change; check a block with `fratm_stile`.

## Keywords

| FratmScript | JavaScript |
| --- | --- |
| `chist è` | `const` |
| `tien` | `let` |
| `facc` | `function` |
| `piglie` | `return` |
| `si` / `sinnò` | `if` / `else` |
| `vedimm` / `caso` / `predefinit` | `switch` / `case` / `default` |
| `mentre che` | `while` |
| `primm fa { } mentre che (c)` | `do { } while (c)` |
| `pe` (also `pe ogni`) | `for` |
| `pe aspett` | `for await` |
| `dint` / `'ncopp` | `of` / `in` (only inside a `pe` header) |
| `rompe` / `salta` | `break` / `continue` |
| `overo` / `sfòls` | `true` / `false` |
| `nisciun` / `boh` | `null` / `undefined` |
| `stamm a dì(x)` | `console.log(x)` |
| `avvis a dì(x)` / `scrive a dì(x)` | `console.warn(x)` / `console.error(x)` |
| `mo vir` / `aspett` | `async` / `await` |
| `facc*` / `caccia` / `caccia*` | `function*` / `yield` / `yield*` |
| `pruvamm` / `e si schiatta (e)` / `aropp` | `try` / `catch (e)` / `finally` |
| `iett` | `throw` |
| `nu bell` | `new` |
| `na famiglie` / `figlio 'e` | `class` / `extends` |
| `costruttore` | `constructor` |
| `'o pate` | `super` |
| `stu cos` | `this` |
| `fisso` | `static` |
| `damme` / `miette` | `get` / `set` (class members) |
| `chiamm { a } da "m"` | `import { a } from "m"` |
| `chiamm X da "m"` / `chiamm * comme ns da "m"` | `import X from "m"` / `import * as ns from "m"` |
| `comme` (also `as`) | `as` (in imports and exports) |
| `mann for` / `mann for predefinit` | `export` / `export default` |
| `e` (also `pure`, `&&`) | `&&` |
| `o` (also `\|\|`) | `\|\|` |
| `no` (also `manco`, `!`) | `!` |
| `chè è x` | `typeof x` |
| `x è uno T` | `x instanceof T` |
| `"k" dint'a o` | `"k" in o` |
| `leva` | `delete` |
| `fermete` | `debugger` |

No accents needed: `sinno`, `sfols`, `stamm a di`, `chist e` work too. Short words such as `e`,
`o`, `no`, `da`, `caso` are only keywords where their construct starts, so they also work as
names (`e si schiatta (e)`). Names reserved in JavaScript are renamed in the output (`tien for`
becomes `let $for`). `$` works in names as in JavaScript (`$`, `$el`), except `$` followed by a
reserved word, which is that renamed spelling.

## Variables and values

```fratm
chist è nome = "Gennaro"
tien contatore = 0
tien x = 1, y = 2
contatore += 1
contatore++
chist è attivo = overo
chist è vuoto = nisciun
chist è boh_che_è = boh
chist è saluto = `Uè ${nome}, tieni ${contatore} pizze`
chist è lista = [1, 2, 3]
chist è pizza = { nome: "Margherita", prezzo: 6.5 }
chist è tipo = chè è nome
stamm a dì(saluto, tipo, lista è uno Array)
```

## Functions

```fratm
facc somma(a, b) {
    piglie a + b
}
chist è doppio = (x) => x * 2
chist è saluta = (nome = "Gennà", ...altri) => `Uè ${nome}`
chist è quadrati = [1, 2, 3].map((n) => {
    piglie n * n
})
stamm a dì(somma(2, 3), doppio(4), saluta(), quadrati)

// function expressions (anonymous or named, also mo vir facc and facc*)
chist è triplo = facc (x) { piglie x * 3 }
chist è fatt = facc f(n) { piglie n <= 1 ? 1 : n * f(n - 1) }
stamm a dì(triplo(2), fatt(5))
```

## Control flow

```fratm
chist è voto = 7
si (voto >= 6 e voto < 9) {
    stamm a dì("promosso")
} sinnò si (voto >= 9) {
    stamm a dì("bravo assai")
} sinnò {
    stamm a dì("bocciato")
}

chist è esito = voto > 5 ? "ok" : "no"

vedimm (voto) {
    caso 10:
        stamm a dì("perfetto")
        rompe
    predefinit:
        stamm a dì("normale")
}

pe (tien i = 0; i < 3; i++) {
    si (i == 1) {
        salta
    }
    stamm a dì(i)
}

fore: pe (tien i = 0; i < 3; i++) {
    pe (tien j = 0; j < 3; j++) {
        si (j == 2) {
            salta fore
        }
        si (i == 2) {
            rompe fore
        }
    }
}

pe ogni (chist è frutto dint ["mela", "pera"]) {
    stamm a dì(frutto)
}

pe ogni (chist è chiave 'ncopp { a: 1, b: 2 }) {
    stamm a dì(chiave)
}

tien n = 0
mentre che (n < 3) {
    n++
}
primm fa {
    n--
} mentre che (n > 0)
```

## Objects, destructuring, spread

```fratm
chist è nome = "Margherita"
chist è campo = "prezzo"
chist è pizza = {
    nome,
    [campo]: 6.5,
    ingredienti: ["pummarola", "muzzarella"],
    descrivi() {
        piglie `${stu cos.nome}: ${stu cos.ingredienti.join(", ")}`
    },
    damme quanti() { piglie stu cos.ingredienti.length },  // getter (miette = setter)
}
chist è { prezzo, forno = "a legna", ...altro } = pizza
chist è [primo, ...ato] = pizza.ingredienti
tien a = 1
tien b = 2
[a, b] = [b, a]                     // swap; objects: ({ x, y } = punto)
chist è copia = { ...pizza, prezzo: 7 }
chist è tutti = [...ato, "basilico"]
stamm a dì(pizza.descrivi(), prezzo, forno, primo, copia.prezzo, tutti)
stamm a dì(pizza.cliente?.nome ?? "anonimo")
leva copia.prezzo
```

## Classes

```fratm
na famiglie Persona {
    costruttore(nome) {
        stu cos.nome = nome
    }

    saluta() {
        piglie "Uè, so' " + stu cos.nome
    }

    fisso specie() {
        piglie "Essere umano"
    }
}

na famiglie Pizzaiolo figlio 'e Persona {
    #forno = "a legna"
    pizze = 0
    fisso aperte = 0

    costruttore(nome) {
        'o pate(nome)
    }

    damme forno() {
        piglie stu cos.#forno
    }

    miette forno(tipo) {
        stu cos.#forno = tipo
    }
}

chist è ciro = nu bell Pizzaiolo("Ciro")
ciro.forno = "elettrico"
stamm a dì(ciro.saluta(), ciro.forno, Persona.specie(), ciro è uno Persona)

// static block, and a class used as a value
na famiglie Menu {
    fisso pizze = []
    fisso {
        Menu.pizze.push("Margherita")
    }
}
chist è Anonima = na famiglie figlio 'e Persona { }
stamm a dì(Menu.pizze, nu bell Anonima("Totò").saluta())
```

## Errors

```fratm
facc dividi(a, b) {
    si (b == 0) {
        iett nu bell Error("Nun se divide pe zero!")
    }
    piglie a / b
}

pruvamm {
    dividi(1, 0)
} e si schiatta (errore) {
    scrive a dì(errore.message)
} aropp {
    stamm a dì("fatto")
}
```

## Async and generators

```fratm
chist è aspettaUnPoco = (ms) => nu bell Promise((risolvi) => setTimeout(risolvi, ms))

mo vir facc carica() {
    aspett aspettaUnPoco(10)
    piglie "dati"
}

facc* conta(n) {
    pe (tien i = 1; i <= n; i++) {
        caccia i
    }
}

mo vir facc main() {
    chist è dati = aspett carica()
    chist è tutti = aspett Promise.all([carica(), carica()])
    stamm a dì(dati, tutti, [...conta(3)])
}

main()
```

Top-level `aspett` works too, because the output is an ES module.

## Modules

```fratm
chiamm { readFileSync } da "node:fs"
chiamm * comme path da "node:path"
chiamm os da "node:os"
chiamm { a_caso comme dado } da "fratm"

mann for facc leggi(nome) {
    piglie readFileSync(path.join(".", nome), "utf8")
}

chist è VERSIONE = "1.0"
mann for { VERSIONE, leggi comme read }
mann for predefinit leggi

// dynamic import: chiamm("…") gives a Promise
chist è url = aspett chiamm("node:url")
stamm a dì(os.platform(), dado(1, 6), chè è url.pathToFileURL)
```

Also: `chiamm "./stile.css"` (side effects only), `mann for { a } da "./m.js"` and
`mann for * da "./m.js"` (re-exports), `chiamm { predefinit comme App } da "./app.js"`
(`predefinit` means `default` on the module side). `fratm lancia` compiles one file: to import
another `.fratm` file, build each file with `fratm build` and import the `.js`, or use the Vite
plugin.

## JSX: components and web pages

`.fratm` files can contain JSX, so React (or Preact) components are written in FratmScript.
HTML tags have Neapolitan names (`<cascett>` is `div`), the same as in htmlemmurt pages, translated
at compile time; HTML names
(`div`, `button`) work too. A capitalised or dotted tag is a component.
The words of v0.11 and v0.12 (`<scatola>`, `<buttone>`, `quanno-se-clicca`, `stile=`) still compile, with a
warning that names the new word. `<titolo>`, `<casella>` and `<capa>` changed meaning: they are now
`title`, `td` and `head`, and the compiler warns. Write `<luccolone>`, `<miett>` and `<cappiell>` for `h1`,
`input` and `header`.
Inside `{ }` goes any FratmScript expression.

```fratm
chiamm { useState } da "react"
chiamm "./stile.css"

facc Pizza({ nomme, prezzo }) {
    piglie <voce classe="pizza">{nomme}: {prezzo} €</voce>
}

mann for predefinit facc Menu({ pizze }) {
    tien [scelte, setScelte] = useState(0)
    piglie (
        <piezz>
            <luccolone>Pizze scelte: {scelte}</luccolone>
            <list>
                {pizze.map((p) => <Pizza key={p.nomme} {...p} />)}
            </list>
            {scelte > 0 ? <chiacchier>Bravo!</chiacchier> : nisciun}
            <citofono quanno-tuocche={() => setScelte(scelte + 1)}>Scegli</citofono>
        </piezz>
    )
}
```

- Supported: elements, self-closing tags, fragments `<>…</>`, `{expr}` attributes and children,
  `{...props}`, boolean attributes, `{/* comments */}`, HTML entities (`&amp;`, `&nbsp;`).
- Neapolitan tags (the output always has the HTML name):

  | FratmScript | HTML |
  | --- | --- |
  | `cristian` | `html` |
  | `capa` | `head` |
  | `panz` | `body` |
  | `titolo` | `title` |
  | `inciucc` | `meta` |
  | `attacca` | `link` |
  | `basa` | `base` |
  | `cess` | `style` |
  | `fratm` | `script` |
  | `senzafratm` | `noscript` |
  | `cappiell` | `header` |
  | `pere` | `footer` |
  | `tomtom` | `nav` |
  | `core` | `main` |
  | `piezz` | `section` |
  | `fattariello` | `article` |
  | `allato` | `aside` |
  | `indirizzo` | `address` |
  | `luccolone` | `h1` |
  | `luccolo` | `h2` |
  | `luccoliello` | `h3` |
  | `luccolillo` | `h4` |
  | `luccolino` | `h5` |
  | `luccolicchio` | `h6` |
  | `cascett` | `div` |
  | `chiacchier` | `p` |
  | `stacc` | `hr` |
  | `accussì` | `pre` |
  | `accussi` | `pre` |
  | `citazione` | `blockquote` |
  | `list` | `ul` |
  | `elenco` | `ol` |
  | `voce` | `li` |
  | `vocabolario` | `dl` |
  | `parola` | `dt` |
  | `significato` | `dd` |
  | `quadro` | `figure` |
  | `didascalia` | `figcaption` |
  | `vattenn` | `a` |
  | `scatulell` | `span` |
  | `acap` | `br` |
  | `fort` | `strong` |
  | `corsivo` | `em` |
  | `guapp` | `b` |
  | `stuorto` | `i` |
  | `sottolineato` | `u` |
  | `cancellato` | `s` |
  | `piccirill` | `small` |
  | `evidenziato` | `mark` |
  | `codice` | `code` |
  | `fonte` | `cite` |
  | `virgulette` | `q` |
  | `abbreviazione` | `abbr` |
  | `tiempo` | `time` |
  | `sotto` | `sub` |
  | `ncoppa` | `sup` |
  | `tastiera` | `kbd` |
  | `levato` | `del` |
  | `aggiunto` | `ins` |
  | `cartulin` | `img` |
  | `cornice` | `picture` |
  | `funtana` | `source` |
  | `filmato` | `video` |
  | `suono` | `audio` |
  | `fenestella` | `iframe` |
  | `tela` | `canvas` |
  | `disegno` | `svg` |
  | `tavulat` | `table` |
  | `cartello` | `caption` |
  | `capotavula` | `thead` |
  | `cuorpotavula` | `tbody` |
  | `peretavula` | `tfoot` |
  | `fila` | `tr` |
  | `casella` | `td` |
  | `capocasella` | `th` |
  | `modulo` | `form` |
  | `miett` | `input` |
  | `citofono` | `button` |
  | `etichetta` | `label` |
  | `scegli` | `select` |
  | `opzione` | `option` |
  | `gruppo` | `optgroup` |
  | `ragionamento` | `textarea` |
  | `recinto` | `fieldset` |
  | `leggenda` | `legend` |
  | `suggerimenti` | `datalist` |
  | `risultato` | `output` |
  | `avanzamento` | `progress` |
  | `misura` | `meter` |
  | `spoiler` | `details` |
  | `anteprim` | `summary` |
  | `dialogo` | `dialog` |
  | `stampo` | `template` |
  | `fessura` | `slot` |

- Attributes and events of HTML tags have Neapolitan names (the output always has the React
  name; React names, `class`, `for`, `data-*` and `aria-*` work as written). On a component
  (`<Pizza tipo="x" />`) every prop is passed as written.
- A quoted value from an attribute's list is translated too, as in htmlemmurt pages:
  `<miett tipo="fattimiei" />` is `type: "password"`, `<citofono tipo="manna">` is
  `type: "submit"`. HTML values and other strings stay as written.

  | FratmScript | React |
  | --- | --- |
  | `addo` | `action` |
  | `tipo` | `type` |
  | `classe` | `className` |
  | `chi` | `id` |
  | `cess` | `style` |
  | `titolo` | `title` |
  | `lingua` | `lang` |
  | `annascuso` | `hidden` |
  | `turno` | `tabIndex` |
  | `ruolo` | `role` |
  | `scrivibile` | `contentEditable` |
  | `trascinabile` | `draggable` |
  | `correggi` | `spellCheck` |
  | `addo` | `href` |
  | `da` | `src` |
  | `spiegazione` | `alt` |
  | `larghezza` | `width` |
  | `altezza` | `height` |
  | `arape` | `target` |
  | `rapporto` | `rel` |
  | `scarica` | `download` |
  | `codifica` | `charSet` |
  | `nomme` | `name` |
  | `cuntenuto` | `content` |
  | `rrobba` | `property` |
  | `carica` | `loading` |
  | `aropp` | `defer` |
  | `ampressa` | `async` |
  | `furastiero` | `crossOrigin` |
  | `verace` | `integrity` |
  | `valore` | `value` |
  | `esempio` | `placeholder` |
  | `stutato` | `disabled` |
  | `spuntato` | `checked` |
  | `scigliuto` | `selected` |
  | `obbligatorio` | `required` |
  | `nunsetocca` | `readOnly` |
  | `assaje` | `multiple` |
  | `subbeto` | `autoFocus` |
  | `minimo` | `min` |
  | `massimo` | `max` |
  | `passo` | `step` |
  | `lunghezzaminima` | `minLength` |
  | `lunghezzamassima` | `maxLength` |
  | `modello` | `pattern` |
  | `pe` | `htmlFor` |
  | `suggerimenti` | `list` |
  | `accetta` | `accept` |
  | `etichetta` | `label` |
  | `righe` | `rows` |
  | `colonne` | `cols` |
  | `metodo` | `method` |
  | `ricorda` | `autoComplete` |
  | `allarga` | `colSpan` |
  | `allonga` | `rowSpan` |
  | `partesubbeto` | `autoPlay` |
  | `comandi` | `controls` |
  | `ripete` | `loop` |
  | `muto` | `muted` |
  | `copertina` | `poster` |
  | `quanno` | `dateTime` |
  | `araputo` | `open` |
  | `chiave` | `key` |
  | `valore-iniziale` | `defaultValue` |
  | `quanno-tuocche` | `onClick` |
  | `quanno-tuocche-doje-vote` | `onDoubleClick` |
  | `quanno-scrive` | `onInput` |
  | `quanno-cagne` | `onChange` |
  | `quanno-manne` | `onSubmit` |
  | `quanno-carica` | `onLoad` |
  | `quanno-premi` | `onKeyDown` |
  | `quanno-aize` | `onKeyUp` |
  | `quanno-trase` | `onMouseEnter` |
  | `quanno-esce` | `onMouseLeave` |
  | `quanno-piglie` | `onFocus` |
  | `quanno-perde` | `onBlur` |
  | `quanno-scorre` | `onScroll` |

  `addo` is `action` on `<modulo>` and `href` everywhere else. `cess={{ … }}` takes a style
  object whose keys and string values can be Neapolitan CSS, as in `` stile`…` ``:
  `cess={{ "sfunno-culore": "russo", spazio: "8px" }}` is
  `style: { backgroundColor: "red", padding: "8px" }`. React keys (`backgroundColor`) and plain
  CSS values work too; selectors and `:passanno` rules go in `` stile`…` ``.
- The output uses the automatic JSX runtime: `import { jsx as _jsx, ... } from
  "react/jsx-runtime"` is added at the top. Write `// @jsxImportSource preact` at the top of the
  file to use Preact; the npm package's `compile` takes `jsxImportSource` too.
- Hooks and React APIs keep their names: `useState`, `useEffect`, `createRoot`.
- Styles: import plain CSS (`chiamm "./stile.css"`) or CSS modules
  (`chiamm stile da "./App.module.css"`, then `classe={stile.titolo}`) through Vite; inline
  styles are objects: `cess={{ color: "red" }}`.
- Tailwind CSS: `fratm nuovo --tailwind` sets it up (Vite plugin, `@import "tailwindcss"` in
  `src/stile.css`); it finds classes in `.fratm` files. `chiamm "tailwindcss/index.css"` in a
  `.fratm` file turns it on too, and is what switches Tailwind on in the playground preview.
- A `<` starts JSX only where a value can start (after `=`, `(`, `,`, `piglie`, `=>`, ...) and
  when a tag name or `>` follows right away, so `a < b` and `i <n` stay comparisons.
- To try a component, open the playground: code that imports `"react"` and exports a default
  component is drawn in a live preview, with its `console.log` output in the console. Run a
  whole app with `fratm nuovo`, or a full-stack one with `fratm nuovo --completa`: React in `src/`,
  a Hono API in `server/api.fratm` with SQLite (`apri_db` + `gomorra`), one `npm run dev`, and
  `npm start` (`node --import fratmscript/node server/avvia.fratm`) in production.

## The `fratm` library

Import helpers from `"fratm"`: the compiler inlines their code, no package is needed.

```fratm
chiamm { a_caso, uno_a_caso, mischia, quanti, arrotonda, ripeti, aspetta } da "fratm"

stamm a dì(a_caso(1, 6))
stamm a dì(uno_a_caso(["Totò", "Peppino"]))
stamm a dì(mischia([1, 2, 3]))
stamm a dì(quanti("pizza"), quanti({ a: 1 }))
stamm a dì(arrotonda(3.14159, 2))
ripeti(3, (i) => stamm a dì("giro", i))
aspett aspetta(10)
```

| Helper | Does |
| --- | --- |
| `a_caso(min, max)` | random integer, both ends included |
| `uno_a_caso(lista)` | random item of a list |
| `mischia(lista)` | shuffled copy |
| `quanti(cosa)` | length of a list or string, size of a Set/Map, number of object keys |
| `arrotonda(n, cifre = 0)` | round to `cifre` decimals |
| `ripeti(volte, fa)` | call `fa(0)` ... `fa(volte - 1)` |
| `aspetta(ms)` | Promise resolved after `ms` milliseconds |
| ``gomorra`…` `` | SQL query in Neapolitan (next section) |
| `apri_db(file = ":memory:")` | SQLite database on `node:sqlite` (Node 22.13+; next section) |
| ``stile`…` `` | CSS in Neapolitan (section "CSS: `stile`") |

## CSS: `stile`

`` stile`…` `` (imported from `"fratm"`) is CSS written in Neapolitan, translated at compile time.
In a browser the rules are added to the page once (a `<style>` element); the call returns the CSS
text either way, so in Node it only returns it.

```fratm
chiamm { stile } da "fratm"

chist è accento = "#c8321e"

stile`
  core.pizzeria { sfunno-culore: janco; spazio: 16px; mostra: flessibile }
  citofono { culore: ${accento}; bordo-tunno: 6px; cursore: manella }
  citofono:passanno { culore: russo !importante }
  @quanno schermo e (larghezza-massima: 600px) {
    cascett {
      larghezza: 100%
      spazio: 8px
    }
  }
`
```

- Translated: property names (before `:`), value keywords, pseudo-classes after `:`/`::`,
  `@quanno` (`@media`) and the Neapolitan JSX tag names used as type selectors.
- The conditions of `@quanno`, `@media`, `@supports` and `@container` are translated too
  (`@supports (mostra: griglia)` → `@supports (display: grid)`), with `e` and, `o` or, `nun` not.
  Every other at-rule passes through as it is.
- As in the rest of the language the `;` between declarations is optional: a new line ends a
  declaration, and the generated CSS gets its `;`. A value may still wrap over several lines, and
  so may a list of selectors.
- Everything else passes through: class names (`.pizza`), ids, units, `#fff`, English CSS, custom
  properties (`--accento`, whose values are translated). Strings, comments and `url(…)` are kept.
- `${…}` values stay in place; a word glued to `${…}` is not translated.
- In the value of `transizione` (`transition`), `transition-property` and `will-change`, property
  names are translated too: `transizione: culore 1s` → `transition: color 1s`.
- Inside `@keyframes`, `da` and `a` are `from` and `to`; percentages stay.
- Compile errors: a `}` that closes nothing, a missing `}`, a declaration without `:`, an
  unclosed comment or string. `stile(css)` called as a function takes plain CSS as it is.
- For inline styles in JSX use objects (`style={{ color: "red" }}`); `stile` is for rules.

| Property | CSS |
| --- | --- |
| `culore` | `color` |
| `sfunno` | `background` |
| `sfunno-culore` | `background-color` |
| `sfunno-immagine` | `background-image` |
| `sfunno-grannezza` | `background-size` |
| `scrittura` | `font-family` |
| `scrittura-grannezza` | `font-size` |
| `scrittura-peso` | `font-weight` |
| `scrittura-stile` | `font-style` |
| `allinea-testo` | `text-align` |
| `decorazione-testo` | `text-decoration` |
| `trasforma-testo` | `text-transform` |
| `altezza-riga` | `line-height` |
| `spazio-lettere` | `letter-spacing` |
| `larghezza` | `width` |
| `altezza` | `height` |
| `larghezza-minima` | `min-width` |
| `larghezza-massima` | `max-width` |
| `altezza-minima` | `min-height` |
| `altezza-massima` | `max-height` |
| `margine` | `margin` |
| `margine-ncoppa` | `margin-top` |
| `margine-sotto` | `margin-bottom` |
| `margine-manca` | `margin-left` |
| `margine-destra` | `margin-right` |
| `spazio` | `padding` |
| `spazio-ncoppa` | `padding-top` |
| `spazio-sotto` | `padding-bottom` |
| `spazio-manca` | `padding-left` |
| `spazio-destra` | `padding-right` |
| `bordo` | `border` |
| `bordo-culore` | `border-color` |
| `bordo-larghezza` | `border-width` |
| `bordo-stile` | `border-style` |
| `bordo-tunno` | `border-radius` |
| `bordo-ncoppa` | `border-top` |
| `bordo-sotto` | `border-bottom` |
| `bordo-manca` | `border-left` |
| `bordo-destra` | `border-right` |
| `contorno` | `outline` |
| `mostra` | `display` |
| `posizione` | `position` |
| `ncoppa` | `top` |
| `sotto` | `bottom` |
| `manca` | `left` |
| `destra` | `right` |
| `livello` | `z-index` |
| `trabocca` | `overflow` |
| `visibilità` | `visibility` |
| `visibilita` | `visibility` |
| `opacità` | `opacity` |
| `opacita` | `opacity` |
| `ombra` | `box-shadow` |
| `ombra-testo` | `text-shadow` |
| `cursore` | `cursor` |
| `spazio-mmiez` | `gap` |
| `flessibile` | `flex` |
| `direzione` | `flex-direction` |
| `a-capo` | `flex-wrap` |
| `cresce` | `flex-grow` |
| `allinea-cose` | `align-items` |
| `allinea-me` | `align-self` |
| `giustifica` | `justify-content` |
| `colonne` | `grid-template-columns` |
| `righe` | `grid-template-rows` |
| `area-griglia` | `grid-area` |
| `transizione` | `transition` |
| `trasforma` | `transform` |
| `animazione` | `animation` |
| `contenuto` | `content` |
| `scatola` | `box-sizing` |
| `lista-stile` | `list-style` |
| `filtro` | `filter` |
| `puntatore` | `pointer-events` |
| `selezione` | `user-select` |
| `galleggia` | `float` |
| `adatta-oggetto` | `object-fit` |
| `proporzione` | `aspect-ratio` |

| Value | CSS |
| --- | --- |
| `russo` | `red` |
| `janco` | `white` |
| `niro` | `black` |
| `nero` | `black` |
| `verde` | `green` |
| `blu` | `blue` |
| `azzurro` | `skyblue` |
| `celeste` | `lightblue` |
| `giallo` | `yellow` |
| `arancione` | `orange` |
| `rosa` | `pink` |
| `viola` | `purple` |
| `grigio` | `gray` |
| `marrone` | `brown` |
| `oro` | `gold` |
| `argiento` | `silver` |
| `trasparente` | `transparent` |
| `culore-corrente` | `currentcolor` |
| `nisciuno` | `none` |
| `niente` | `none` |
| `blocco` | `block` |
| `in-linea` | `inline` |
| `blocco-in-linea` | `inline-block` |
| `flessibile` | `flex` |
| `griglia` | `grid` |
| `miezo` | `center` |
| `mmiezo` | `center` |
| `manca` | `left` |
| `destra` | `right` |
| `ncoppa` | `top` |
| `sotto` | `bottom` |
| `inizio` | `start` |
| `fine` | `end` |
| `spartuto` | `space-between` |
| `attuorno` | `space-around` |
| `stiracchiato` | `stretch` |
| `riga` | `row` |
| `colonna` | `column` |
| `fisso` | `fixed` |
| `fissa` | `fixed` |
| `assoluto` | `absolute` |
| `assoluta` | `absolute` |
| `relativo` | `relative` |
| `relativa` | `relative` |
| `appiccecato` | `sticky` |
| `appiccecata` | `sticky` |
| `statico` | `static` |
| `grassetto` | `bold` |
| `corsivo` | `italic` |
| `normale` | `normal` |
| `sottolineato` | `underline` |
| `sbarrato` | `line-through` |
| `maiuscolo` | `uppercase` |
| `minuscolo` | `lowercase` |
| `nascosto` | `hidden` |
| `visibile` | `visible` |
| `scorre` | `scroll` |
| `automatico` | `auto` |
| `manella` | `pointer` |
| `aspetta` | `wait` |
| `ereditato` | `inherit` |
| `iniziale` | `initial` |
| `a-capo` | `wrap` |
| `nun-va-a-capo` | `nowrap` |
| `copre` | `cover` |
| `contiene` | `contain` |
| `ripete` | `repeat` |
| `nun-ripete` | `no-repeat` |
| `continuo` | `solid` |
| `tratteggiato` | `dashed` |
| `puntinato` | `dotted` |
| `bordo-incluso` | `border-box` |
| `facile` | `ease` |
| `lineare` | `linear` |
| `infinito` | `infinite` |
| `alternato` | `alternate` |
| `!importante` | `!important` |

| Pseudo | CSS |
| --- | --- |
| `passanno` | `hover` |
| `premuto` | `active` |
| `fuoco` | `focus` |
| `fuoco-visibile` | `focus-visible` |
| `stutato` (or `disattivato`) | `disabled` |
| `spuntato` | `checked` |
| `primmo-figlio` | `first-child` |
| `urdemo-figlio` | `last-child` |
| `vacante` | `empty` |
| `radice` | `root` |
| `primma` | `before` |
| `doppo` | `after` |
| `esempio` (or `segnaposto`) | `placeholder` |

`@quanno` media queries also take `schermo` (screen), `stampa` (print), `tutto` (all), `e` (and),
`o` (or), `nun` (not).

## GomorraSQL: SQL queries

`` gomorra`…` `` (imported from `"fratm"`) is SQL written in Neapolitan, translated at compile time:
a wrong query is a compile error with its line. Each `${…}` is a bound parameter, never pasted into
the SQL. The value is `{ sql, params, text, values }`: `sql`/`params` with `?` (SQLite, MySQL),
`text`/`values` with `$1` (PostgreSQL `pg`).

```fratm
chiamm { gomorra } da "fratm"

chist è minimo = 6
chist è q = gomorra`
    ripigliammo nomme, prezzo mmiez 'a pizze
    arò prezzo >= ${minimo} e nomme nun è nisciun
    mettimmo in fila pe prezzo a scennere
    nun cchiù 'e 10 zumpanno 0
`
stamm a dì(q.sql, q.params)
stamm a dì(gomorra`nzipp 'ngoppa pizze nomme, prezzo chist ${"margherita"}, ${5.5}`.sql)
stamm a dì(gomorra`rifacimm pizze accunza prezzo accussì ${7} arò nomme assumiglia a ${"%fritta%"}`.sql)
stamm a dì(gomorra`facimm na' strage mmiez 'a pizze arò id dint'a (${1}, ${2})`.sql)
stamm a dì(gomorra`facimm 'a tavula pizze (id INTEGER PRIMARY KEY, nomme TEXT, prezzo REAL)`.sql)
```

| GomorraSQL | SQL |
| --- | --- |
| `ripigliammo` · `tutto chillo ch'era 'o nuostro` · `mmiez 'a` · `pesc e pesc` · `arò` | `SELECT` · `*` · `FROM` · `JOIN` · `WHERE` |
| `e` · `o` · `nun` · `è` · `nun è` · `nisciun` · `overo` · `sfòls` | `AND` · `OR` · `NOT` · `IS` · `IS NOT` · `NULL` · `TRUE` · `FALSE` |
| `assumiglia a` · `dint'a` · `comme` | `LIKE` · `IN` · `AS` |
| `mettimmo in fila pe` · `a salì` · `a scennere` · `facimm 'e mucchie pe` | `ORDER BY` · `ASC` · `DESC` · `GROUP BY` |
| `nun cchiù 'e` · `zumpanno` | `LIMIT` · `OFFSET` |
| `nzipp 'ngoppa t cols chist vals` | `INSERT INTO t (cols) VALUES (vals)` |
| `rifacimm t accunza c accussì v` | `UPDATE t SET c = v` |
| `facimm na' strage mmiez 'a t` | `DELETE FROM t` |
| `facimm 'a tavula t (…)` · `abbrucimm 'a tavula t` | `CREATE TABLE IF NOT EXISTS` · `DROP TABLE IF EXISTS` |
| `ua uagliò` · `iamme bello ia'` · `sfaccimm` | `BEGIN` · `COMMIT` · `ROLLBACK` |

- Strings inside a query use `"…"` (an apostrophe starts Neapolitan words like `'a`). Prefer `${…}` for values.
- Other words pass through as SQL: column names, `COUNT(*)`, `PRIMARY KEY`, `RETURNING id`.
- Table and column names cannot be `${…}`; one statement per query, no `;`.
- `gomorra` only works as a tag right before a template.

`apri_db` runs the queries on SQLite (Node's built-in `node:sqlite`, Node 22.13 or newer, nothing to
install). It accepts a `gomorra` query or plain SQL with `?` followed by the values.

```fratm
chiamm { apri_db, gomorra } da "fratm"

chist è db = apri_db()   // in memory; apri_db("pizzeria.db") for a file
db.esegui(gomorra`facimm 'a tavula pizze (id INTEGER PRIMARY KEY, nomme TEXT, prezzo REAL)`)
chist è r = db.esegui(gomorra`nzipp 'ngoppa pizze nomme, prezzo chist ${"Margherita"}, ${5}`)
stamm a dì(r.cambiate, r.ultimo_id)
stamm a dì(db.ripiglia(gomorra`ripigliammo nomme, prezzo mmiez 'a pizze arò prezzo < ${10}`))
stamm a dì(db.ripiglia_uno(gomorra`ripigliammo nomme mmiez 'a pizze arò id = ${1}`))
stamm a dì(db.ripiglia("SELECT COUNT(*) AS n FROM pizze WHERE prezzo > ?", 3))
db.chiude()
```

- `ripiglia` → list of row objects, `ripiglia_uno` → first row or `nisciun`, `esegui` →
  `{ cambiate, ultimo_id }`, `chiude()` closes.
- The methods are synchronous; `aspett db.ripiglia(…)` also works (and stays right if the driver
  becomes async). In a plain browser page `apri_db` throws: it needs Node. The playground runs it
  on sql.js (SQLite in WebAssembly), always in memory.

## Reading errors

Errors look like `Riga 3, colonna 7: <message>` (line 3, column 7). Common messages:

| Neapolitan message (start) | Meaning |
| --- | --- |
| `Ccà ce vo' 'na espressione, ma aggio truvato '*'` | expected an expression; the token found is quoted |
| `Ccà ce sta 'x' ma l'istruzione era già fernuta` | unexpected token after a complete statement (often: a JavaScript keyword) |
| `Ccà ce vo' 'na virgola ',' (o ')' pe chiudere)` | missing comma between arguments, array items or object properties |
| `Manca 'a parentesi chiusa` / `parentesi graffa ... nun l'hai chiusa` | missing `)` / `}` at the end of the file |
| `Ccà ce vo' 'x', ma aggio truvato 'y'` | expected `x` (for example `{`: braces are required) |
| `... ma aggio truvato 'a fine d'a riga` / `'a fine d'o file` | the line or the file ended too early |
| `Stu carattere '@' nun 'o canosco` | a character FratmScript does not use |
| `Ccà ce vo' nu nome` | expected a name (often: a keyword used as a variable name) |
| `'x' già esiste: l'hai dichiarato a riga N` | name declared twice |
| `'x' nun esiste` | runtime: name not defined |
| `Nun se pò cagnà na costante` | runtime: assignment to a `chist è` constant |
| `'x' nun è na funzione` | runtime: not a function |
| `In FratmScript 'const' se scrive 'chist è'` | hint: replace the JavaScript keyword |

Runtime errors keep the original JavaScript message in brackets.

## Tools

```text
fratm nuovo app                         new React + Vite app in ./app (--completa, --tailwind, --senza-react, --semplice)
npm create fratm@latest app             the same project without the CLI (same options)
fratm lancia main.fratm                 compile and run with Node.js (alias: run)
fratm build main.fratm [-o out.js]      write JavaScript (--stdout prints it)
fratm check a.fratm b.fratm             report errors, write nothing
fratm fmt main.fratm                    format in place (--check to only report)
fratm guida                             print this reference (alias: reference)
fratm mcp                               MCP server on stdio (see below)
fratm gomorra "ripigliammo …"           print the SQL of a GomorraSQL query (--pg: $1 placeholders)
fratm gomorra --db pizzeria.db          GomorraSQL shell on a SQLite file (Node 22.13+)
```

For programs and agents: `check`, `build` and `lancia` take `--json` and print one JSON object
with `ok` and errors as `{ message, line, column, suggestion }`: `build` gives `errors` and
`code`; `lancia` gives `errors`, `stdout`, `stderr`, `exitCode` and `runtimeError`; `check`
gives `files`, one `{ file, ok, errors }` per file. Use `-` as the file name to read the
program from stdin, and `lancia --timeout <seconds>` to stop programs that do not end.

```text
echo 'stamm a dì(1 + 1)' | fratm lancia --json -
{"errors":[],"exitCode":0,"ok":true,"runtimeError":null,"stderr":"","stdout":"2\n"}
```

`fratm mcp` is a Model Context Protocol server with the tools `fratm_reference`, `fratm_check`,
`fratm_compile`, `fratm_run` (10 s timeout by default) and `fratm_format`; each takes `source`
or `path`. `fratm_gomorra` takes a `query` and returns its SQL, and `fratm_stile` takes `css`
(the text inside `` stile`…` ``) and returns the CSS, or the error with its position.
`fratm_nuovo` takes `name`, `template` (`react`, `completa`, `senza-react`, `semplice`) and
`tailwind` and returns the files of a new project as `[{ path, contents }]` without writing
them. Add it to Claude Code with `claude mcp add fratm -- fratm mcp`, or to any MCP client
as the command `fratm` with the argument `mcp`.

A web app, step by step: `fratm nuovo app --tailwind` (or `npm create fratm@latest app --tailwind`,
or the files of `fratm_nuovo`), then `npm install` and `npm run dev` in `app`. Components live in
`src/*.fratm` (JSX with Neapolitan tags and attributes), styles in `src/stile.css`, Tailwind
classes in `classe`, or rules in `` stile`…` ``. `--completa` adds `server/api.fratm`, a Hono API on
SQLite with `apri_db` and `gomorra`.

Install the CLI: `curl -fsSL https://raw.githubusercontent.com/kkratterf/fratmscript/main/install.sh | sh`
(macOS/Linux) or `cargo install --git https://github.com/kkratterf/fratmscript fratm-cli`.
In JavaScript: the `fratmscript` npm package (`compile(source)`), its Vite plugin
(`fratmscript/vite`) and `node --import fratmscript/node main.fratm` to run `.fratm` in Node.

## A complete program

```fratm
chiamm { arrotonda } da "fratm"

na famiglie Pizzeria {
    costruttore(nome) {
        stu cos.nome = nome
        stu cos.ordini = []
    }

    ordina(pizza, prezzo) {
        stu cos.ordini.push({ pizza, prezzo })
        piglie stu cos
    }

    totale() {
        piglie stu cos.ordini.reduce((somma, o) => somma + o.prezzo, 0)
    }
}

chist è daCiro = nu bell Pizzeria("Da Ciro")
daCiro.ordina("Margherita", 6.5).ordina("Marinara", 5)

pe ogni (chist è { pizza, prezzo } dint daCiro.ordini) {
    stamm a dì(`${pizza}: ${prezzo} euro`)
}

chist è conIva = arrotonda(daCiro.totale() * 1.1, 2)
si (conIva > 10) {
    stamm a dì(`Totale ${conIva} euro: grazie assai!`)
} sinnò {
    stamm a dì("Tutto qua?")
}
```

# Guide with runnable examples

The interactive guide of the playground (https://fratmscript.kkratter.com/#guida), in English. Each example runs as shown.

## First steps

https://fratmscript.kkratter.com/#guida=ciao

FratmScript is JavaScript with Neapolitan keywords. The compiler turns your code into plain JavaScript that runs anywhere: in the browser, in Node, here in the playground.

`stamm a dì(…)` prints a line to the console: it is JavaScript's `console.log`. It takes several values separated by commas. `avvis a dì` and `scrive a dì` print warnings and errors (`console.warn`, `console.error`).

Comments work as in JavaScript: `// to the end of the line` or `/* … */`. No semicolons needed: a new line ends a statement.

```fratm
// stamm a dì stampa una riga nella console (console.log)
stamm a dì("Uè, munno!")
stamm a dì("Pizze:", 3, "Pronte:", overo)

// avvis a dì e scrive a dì stampano avvisi ed errori
avvis a dì("Attento, 'o furno è caldo")
```

Output:

```text
Uè, munno!
Pizze: 3 Pronte: true
```

## Variables

https://fratmscript.kkratter.com/#guida=variabili

`chist è name = value` declares a constant, a value that never changes (`const`). `tien name = value` declares a variable that can change (`let`).

To change a variable use `=`, compound operators (`+=`, `-=`, `*=`, `??=`…) and `++` / `--`. `tien x = 1, y = 2` declares several variables at once.

No accents on your keyboard? `chist e` works like `chist è`.

```fratm
chist è citta = "Napoli"
tien pizze = 2

pizze += 1
pizze++
stamm a dì(citta, pizze)

// Più variabili in una riga
tien x = 1, y = 2
x = x + y
stamm a dì(x)
```

Output:

```text
Napoli 4
3
```

## Values and operators

https://fratmscript.kkratter.com/#guida=valori

Numbers, strings in `"…"` or `'…'` and backtick templates (`` `Uè ${nome}` ``) are JavaScript's. Special values have Neapolitan names: `overo` (true), `sfòls` (false), `nisciun` (null), `boh` (undefined).

Logical operators are words: `e` or `pure` (&&), `o` (||), `no` or `manco` (!). Comparisons stay `<`, `>`, `<=`, `>=`, `==`, `!=`.

`a ?? b` gives `b` when `a` is `nisciun` or `boh`; `a?.b` reads `b` only if `a` exists. `chè è x` is `typeof x` and `x è uno Class` is `instanceof`.

```fratm
chist è nome = "Totò"
chist è anni = 42

stamm a dì(`${nome} tene ${anni} anni`)
stamm a dì(anni > 18 e nome != "", no overo)
stamm a dì(nisciun ?? "niente", boh ?? "nun definito")

chist è ordine = { cliente: { nome: "Ciro" } }
stamm a dì(ordine.cliente?.nome, ordine.consegna?.via ?? "ritiro al banco")

stamm a dì(chè è anni, [1, 2] è uno Array)
```

Output:

```text
Totò tene 42 anni
true false
niente nun definito
Ciro ritiro al banco
number true
```

## Conditions

https://fratmscript.kkratter.com/#guida=condizioni

`si (condition) { … }` runs the block only when the condition is true (`if`). `sinnò { … }` is the other branch (`else`), and `sinnò si (…)` adds more cases.

`vedimm (value) { caso …: … }` picks one of many cases (`switch`). `rompe` leaves the block (`break`), `predefinit:` is the fallback case (`default`).

```fratm
chist è ora = 20

si (ora < 12) {
    stamm a dì("Buongiorno!")
} sinnò si (ora < 18) {
    stamm a dì("Buon pomeriggio!")
} sinnò {
    stamm a dì("Bonasera!")
}

chist è giorno = "dummeneca"
vedimm (giorno) {
    caso "sabato":
        stamm a dì("Pizza!")
        rompe
    caso "dummeneca":
        stamm a dì("Ragù!")
        rompe
    predefinit:
        stamm a dì("Pasta e fagioli")
}
```

Output:

```text
Bonasera!
Ragù!
```

## Loops

https://fratmscript.kkratter.com/#guida=cicli

`pe (tien i = 0; i < 3; i++) { … }` repeats while counting (`for`). `mentre che (condition) { … }` repeats while the condition is true (`while`); `primm fa { … } mentre che (…)` runs the block at least once (`do…while`).

`pe ogni (chist è x dint list)` walks the items one by one (`for…of`); `pe ogni (chist è key 'ncopp object)` walks the keys of an object (`for…in`).

`rompe` leaves the loop (`break`) and `salta` skips to the next round (`continue`). An endless loop does not freeze the page: the playground stops it after a few seconds.

```fratm
pe (tien i = 1; i <= 3; i++) {
    stamm a dì("Giro", i)
}

tien caffè = 0
mentre che (caffè < 2) {
    caffè++
}
stamm a dì("Caffè:", caffè)

chist è pizze = ["margherita", "marinara", "diavola"]
pe ogni (chist è pizza dint pizze) {
    si (pizza == "marinara") {
        salta
    }
    stamm a dì(pizza)
}

chist è prezzi = { margherita: 6, diavola: 8 }
pe ogni (chist è nome 'ncopp prezzi) {
    stamm a dì(nome, prezzi[nome])
}
```

Output:

```text
Giro 1
Giro 2
Giro 3
Caffè: 2
margherita
diavola
margherita 6
diavola 8
```

## Functions

https://fratmscript.kkratter.com/#guida=funzioni

`facc name(params) { … }` declares a function (`function`) and `piglie value` returns a value (`return`). Parameters can have a default (`nome = "Gennà"`) and a rest (`...numeri`).

Short functions use arrows: `n => n * 2`, `(a, b) => a + b`, or with a block `(x) => { … }`. Functions are values: pass them around, return them, store them in variables.

```fratm
facc saluta(nome = "Gennà") {
    piglie "Uè " + nome + "!"
}
stamm a dì(saluta())
stamm a dì(saluta("Totò"))

// Funzioni freccia e parametri rest
chist è doppio = n => n * 2
chist è somma = (...numeri) => numeri.reduce((totale, n) => totale + n, 0)
stamm a dì(doppio(21), somma(1, 2, 3))

// Una funzione che crea funzioni
facc contatore() {
    tien conto = 0
    piglie () => ++conto
}
chist è prossimo = contatore()
prossimo()
stamm a dì(prossimo())
```

Output:

```text
Uè Gennà!
Uè Totò!
42 6
2
```

## Lists and objects

https://fratmscript.kkratter.com/#guida=liste-oggetti

Lists (`["a", "b"]`) and objects (`{ nome: "Margherita", prezzo: 6 }`) are JavaScript's, with all their methods: `push`, `map`, `filter`, `join`, `Object.keys`…

Objects support shorthand (`{ nome }`), computed keys (`[key]: value`) and methods (`descrivi() { … }`). Inside a method, `stu cos` is the object itself (`this`).

Spread `...` copies lists and objects (`[...a, 4]`, `{ ...o, prezzo: 7 }`); destructuring pulls out several values at once (`chist è { prezzo, forno = "a legna" } = pizza`). `leva o.field` deletes a field (`delete`).

```fratm
chist è pizze = ["margherita", "marinara"]
pizze.push("diavola")

stamm a dì(pizze[0], pizze.length)
stamm a dì(pizze.map(p => p.toUpperCase()).join(", "))
stamm a dì(pizze.filter(p => p.startsWith("m")).length)

// Spread e destructuring
chist è tutte = [...pizze, "capricciosa"]
chist è [prima, ...ato] = tutte
stamm a dì(prima, ato.length)
```

Output:

```text
margherita 3
MARGHERITA, MARINARA, DIAVOLA
2
margherita 3
```

```fratm
chist è nome = "Margherita"
chist è pizza = {
    nome,
    prezzo: 6,
    descrivi() {
        piglie `${stu cos.nome}: ${stu cos.prezzo} euro`
    },
}
stamm a dì(pizza.descrivi())

chist è { prezzo, forno = "a legna" } = pizza
stamm a dì(prezzo, forno)

chist è copia = { ...pizza, prezzo: 7 }
leva copia.descrivi
stamm a dì(copia.prezzo, copia.descrivi)
```

Output:

```text
Margherita: 6 euro
6 a legna
7 undefined
```

## Classes

https://fratmscript.kkratter.com/#guida=classi

`na famiglie Name { … }` declares a class (`class`). The `costruttore(…)` sets the object up and `nu bell Name(…)` creates a new one (`new`).

`figlio 'e` inherits from another class (`extends`) and `'o pate` calls the parent class (`super`). `fisso` makes a method static (`static`), `damme` and `miette` create getters and setters. Fields starting with `#` are private.

```fratm
na famiglie Persona {
    costruttore(nome) {
        stu cos.nome = nome
    }

    saluta() {
        piglie "Uè, so' " + stu cos.nome
    }
}

na famiglie Pizzaiolo figlio 'e Persona {
    #pizze = 0

    costruttore(nome) {
        'o pate(nome)
    }

    sforna() {
        stu cos.#pizze++
    }

    damme pizze() {
        piglie stu cos.#pizze
    }

    fisso mestiere() {
        piglie "pizzaiolo"
    }
}

chist è gennaro = nu bell Pizzaiolo("Gennaro")
gennaro.sforna()
gennaro.sforna()
stamm a dì(gennaro.saluta(), gennaro.pizze)
stamm a dì(Pizzaiolo.mestiere(), gennaro è uno Persona)
```

Output:

```text
Uè, so' Gennaro 2
pizzaiolo true
```

## Errors

https://fratmscript.kkratter.com/#guida=errori

`iett nu bell Error("…")` throws an error (`throw`). `pruvamm { … } e si schiatta (errore) { … }` catches it and the program goes on (`try/catch`); `aropp { … }` always runs, error or not (`finally`).

An error nobody catches stops the program: the playground shows it in Neapolitan, with the line of your code.

```fratm
facc dividi(a, b) {
    si (b == 0) {
        iett nu bell Error("Nun se divide pe zero!")
    }
    piglie a / b
}

pruvamm {
    stamm a dì(dividi(10, 2))
    stamm a dì(dividi(1, 0))
} e si schiatta (errore) {
    stamm a dì("Errore:", errore.message)
} aropp {
    stamm a dì("Fatto")
}
```

Output:

```text
5
Errore: Nun se divide pe zero!
Fatto
```

## Async and generators

https://fratmscript.kkratter.com/#guida=async

`mo vir facc` declares an async function (`async function`) and `aspett` waits for a Promise (`await`). It also works with arrows, `mo vir (x) => …`, and in loops, `pe aspett (… dint …)`.

`facc* name() { … }` declares a generator (`function*`): each `caccia value` produces the next value (`yield`). Walk a generator with `pe ogni` or spread it.

```fratm
chiamm { aspetta } da "fratm"

mo vir facc cucina(pizza) {
    stamm a dì("Inforno", pizza)
    aspett aspetta(300)
    piglie pizza + " pronta"
}

mo vir facc servizio() {
    chist è pizze = aspett Promise.all([cucina("margherita"), cucina("marinara")])
    stamm a dì(pizze.join(", "))
}

servizio()
```

Output:

```text
Inforno margherita
Inforno marinara
margherita pronta, marinara pronta
```

```fratm
facc* numeri(fino) {
    pe (tien i = 1; i <= fino; i++) {
        caccia i
    }
}

pe ogni (chist è n dint numeri(3)) {
    stamm a dì(n)
}
stamm a dì([...numeri(5)].join(" "))
```

Output:

```text
1
2
3
1 2 3 4 5
```

## Modules and the fratm library

https://fratmscript.kkratter.com/#guida=moduli

`chiamm { a, b } da "module"` imports (`import … from`) and `mann for` exports (`export`), like JavaScript modules. The playground runs a single file, so imports from other files work with the CLI and with Vite.

`chiamm { … } da "fratm"` uses the FratmScript library, which works everywhere, here too: `a_caso(min, max)`, `uno_a_caso(list)`, `mischia(list)`, `quanti(thing)`, `arrotonda(n, digits)`, `ripeti(times, f)` and `aspetta(ms)`.

```fratm
chiamm { quanti, arrotonda, ripeti } da "fratm"

stamm a dì(quanti(["a", "b", "c"]), quanti("pizza"))
stamm a dì(arrotonda(3.14159, 2))
ripeti(2, giro => stamm a dì("Giro", giro))
```

Output:

```text
3 5
3.14
Giro 0
Giro 1
```

## All of JavaScript

https://fratmscript.kkratter.com/#guida=javascript

Everything that is not a keyword stays JavaScript: `Math`, `JSON`, `Map`, `Set`, `Promise`, string and list methods, browser and Node APIs. Any JavaScript library can be used from FratmScript.

The JS panel shows the generated JavaScript: the quickest way to see what a keyword does. Names reserved in JavaScript are renamed (`tien for = 1` becomes `let $for = 1`).

```fratm
// Tutto JavaScript è disponibile: Math, JSON, Map, Set, metodi delle stringhe...
stamm a dì(Math.max(3, 7, 5))
stamm a dì(JSON.stringify({ pizza: "margherita", prezzo: 6 }))

chist è visti = nu bell Set(["Ciro", "Totò", "Ciro"])
stamm a dì(visti.size)

chist è prezzi = nu bell Map([["margherita", 6]])
stamm a dì(prezzi.get("margherita"))
stamm a dì("napoli".toUpperCase().padStart(8, "*"))
```

Output:

```text
7
{"pizza":"margherita","prezzo":6}
2
6
**NAPOLI
```

## HTML and CSS in Neapolitan

https://fratmscript.kkratter.com/#guida=faccia

In JSX, tags are written in Neapolitan: `core` (main), `cascett` (div), `chiacchier` (p), `luccolone` (h1), `citofono` (button), `list` (ul), `voce` (li), `cartulin` (img), `vattenn` (a)… The compiler translates them to HTML, so the page and the browser tools show standard tags. English names stay valid: `div` is still `div`.

Attributes and events of tags have Neapolitan names too: `classe` (className), `chiave` (key), `tipo` (type), `valore` (value), `esempio` (placeholder), `da` (src), `addo` (href), `stutato` (disabled), and for events `quanno-tuocche` (onClick), `quanno-scrive` (onInput), `quanno-cagne` (onChange), `quanno-manne` (onSubmit), `quanno-premi` (onKeyDown)… They apply to HTML tags only: the props of your own components stay as you write them. React names stay valid.

`stile`…`` writes CSS in Neapolitan and is translated at compile time too: `culore` becomes `color`, `sfunno-culore` becomes `background-color`, `spazio` becomes `padding`, `russo` becomes `red`, `:passanno` becomes `:hover`, `@quanno` becomes `@media`. As everywhere else in the language the semicolon is optional: a new line is enough.

`stile` returns the CSS and, in the browser, adds it to the page once. Values can come from the code with `${…}` and are kept as they are. For Tailwind just use `classe` with its classes: `fratm nuovo --tailwind` sets the project up.

```fratm
// 'O CSS napulitano: stile`…` se traduce quanno 'o codice se compila
chiamm { stile } da "fratm"

chist è css = stile`
  core.pizzeria {
    sfunno-culore: janco
    spazio: 16px
    mostra: flessibile
  }
  citofono:passanno {
    culore: russo
    cursore: manella
  }
  @quanno (larghezza-massima: 600px) {
    core.pizzeria { spazio: 8px }
  }
`
stamm a dì(css)

// 'E valori ponno arrivà d'o codice
tien culore = "#1d4ed8"
stamm a dì(stile`luccolone { culore: ${culore} }`)
```

Output:

```text

  main.pizzeria {
    background-color: white;
    padding: 16px;
    display: flex
  }
  button:hover {
    color: red;
    cursor: pointer
  }
  @media (max-width: 600px) {
    main.pizzeria { padding: 8px }
  }

h1 { color: #1d4ed8 }
```

## Compiler messages

https://fratmscript.kkratter.com/#guida=messaggi

When something is wrong, the compiler tells you in Neapolitan, with the line, the column and often a hint: write `stama` and it suggests `stamm a dì`. Click the error to jump to the line.

Runtime errors (say, a variable that does not exist) come in Neapolitan too, with JavaScript's original message in brackets. Run the example below and fix it.

This example does not compile, on purpose:

```text
// Questo codice ha un errore: guarda cosa dice il compilatore
stama a dì("Uè!")
```