Websites

A website can have its logic in Refingere and its page in HTML, CSS and TypeScript, with no build setup: the page's script imports a .rfn file like any other module, and the compiler serves and builds the site. Underneath, it's the JavaScript and TypeScript interop - @js in both directions - compiled for a web page.

Starting one

--new creates a project from a template, and --web serves it at http://localhost:3000. Edit any file and the site is built again and the page reloads itself; a mistake shows its error in the page instead, until it's fixed. refingere is the compiler - see Getting Started for setting the command up.

Importing Refingere

import { load } from "./logic/app.rfn" compiles the folder the file is in - every .rfn file in it is one program - to WebAssembly. load() fetches and starts it, and returns an object with a method per @js definition, taking and returning ordinary JavaScript values - see what crosses. The @js declarations go the other way: they're JavaScript the logic calls, here to write into the page, holding each element as a JsValue. A program can also work with the page directly, with no JavaScript of its own - see The Browser.

The build also writes the program's TypeScript types next to it, as logic/app.d.rfn.ts, so the editor knows what load() returns. The template's tsconfig.json turns on allowArbitraryExtensions, which is how TypeScript finds them for a .rfn import.

Building and testing

--web --compile writes the finished site into dist/: the page, its scripts and styles bundled and minified, the WebAssembly module, and whatever is in public/. It's all static files, so any web server or static host serves it. The logic is an ordinary Refingere program too, so its @test functions run without a browser.

With --js, the logic is compiled to JavaScript instead, and bundled into the page's script with the rest of it: there's no module to fetch, and nothing else changes - load() gives the same object, and the program behaves the same. See Compiling to JavaScript.

Templates

Without a folder or a template, --new asks for them. website is the project above; program is a command-line program with a @main and a test, compiled to a WASI module. The project's name - its folder's - goes into its title and README. The repository's examples/js-website is a larger site built the same way.