ArtScript covers the UI, the data and the server. For anything else (dates, charts, maps, payments, markdown, your own algorithms) there's the whole JavaScript ecosystem, through use.

use #

use "date-fns" { format, addDays }
use "canvas-confetti" as confetti
use "./lib/money.ts" { toUSD }

• { a, b } imports named exports ({ a as b } renames one); as name imports the default export.
• Packages come from your project's node_modules: install them with npm install first.
• Local paths are relative to the .art file. TypeScript works as is.
• Imported names are available in every component and server function of the project, typed Any.

The compiler checks that the module exists and that it exports every name you import, so a typo is an error at compile time with the list of real exports. art build bundles everything into one minified file; only what you use is included.

Your own TypeScript #

The way out for anything the language doesn't have is a plain module:

// src/lib/money.ts
export const toUSD = (cents: number) =>
  new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(cents / 100);

use "./lib/money.ts" { toUSD }

component Price(cents: Number) {
  text toUSD(cents) bold
}

This website does the same: its pages are ArtScript, and two small TypeScript modules render the repository's Markdown and run the compiler in the playground.

DOM libraries: charts, maps, editors #

Libraries that draw into an element get it through ref, start in mount and stop in cleanup:

use "chart.js/auto" as Chart

component SalesChart(values: Number[]) {
  ref box

  mount {
    let chart = new Chart(box, { type: "bar", data: { labels: values.map((_, i) => `Week ${i + 1}`), datasets: [{ label: "Sales", data: values }] } })
    cleanup {
      chart.destroy()
    }
  }
  column ref=box
}

effect re-runs when the states it reads change, to push new data into the library. You can also set properties of a ref directly: box.innerHTML = html, box.scrollTop = 0.

On the server #

A server fn can use packages too, including Node-only ones (stripe, pg, sharp). art build bundles them into dist/server.js, which still runs without node_modules.

use "stripe" as Stripe

server fn checkout(priceId) {
  let stripe = new Stripe(process.env.STRIPE_KEY)
  let session = await stripe.checkout.sessions.create({ mode: "payment", line_items: [{ price: priceId, quantity: 1 }], success_url: "https://example.com/thanks" })
  return session.url
}