Modules

Modules represent the largest shareable and reusable code element. They can be imported from other files in your projec.

Constants

Constants are variables that cannot be mutated after their declaration, they are scoped to the module level, and they can hold any value. We recommend using capital case to distinguish these from other identifiers in your code.

const NIL_CONST = nil;
const BOOLEAN_CONST = true;
const INTEGER_CONST = 1234;
const FLOAT_CONST = 56.78;
const STRING_CONST = "this is a string";
const ELEMENT_CONST = <div />;

Exports

There is no explicit syntax for exporting; all const, func, view, etc. can be imported by their names.

Named Exports

Exports are available for import by the same name they were declared with.

const MY_EXPORT = "named export";

Main Export

Main exports can be useful to expose an often-used value for other modules to import. They will also be available for import by their name.

main const MY_EXPORT = "main and named export";

Avoiding Export

You can use names prefixed with an underscore (_) to make declarations module-private, they will be available for import by other modules.

const _HIDDEN = "not available for import";

Imports

Imports should appear at the top of the module as at some point it will be enforced by the compiler (to allow for simpler parallelized compilation).

Named Imports

Constants and entities can be imported from modules by their names. See Avoiding Export for a special case which affects what can be imported.

import { myFunc, MyView } from "@/utils";

Import Aliases

Sometimes you may end up with naming conflicts with other declarations if you import using the exact name something was exported with. Aliases allow you to rename it within the scope of the module to make it easier to recognize.

import { handler as fooHandler } from "@/foo";

Main Import

You can also import the Main Export of any module. The import pattern allows importing the just the main entity, just named entities, or a combination of the two.

import MainView from "@/views";

import MAIN_CONST, { OTHER_CONST } from "@/constants";

Structure

Modules are read from top to bottom and nothing can be referenced before it has been declared. This also means that functions cannot be recursively called (for now).

There is also a recommended order for entities to appear in modules. However, it should be noted that modules with many different entities should often be split into multiple modules to better separate concerns.

  • import statements

  • const statements

  • func definitions

  • view definitions

import mainFunc, { otherFunc } from "@/functions";

const SECRET_NUMBER = 31858293;
const MORE_SECRET_NUMBER = SECRET_NUMBER + 1;

func isHappy(value: string) -> value == "happy";

main view MyView -> <div>{SECRET_NUMBER}</div>;

Last updated