Imports & Exports

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).

There is no explicit syntax for exporting; all declarations can be imported from other modules by name.

Named Imports

Declarations can be imported from other modules by name.

Knot

utils.kn
knot
func myFunc -> "Hello";
view MyView(content: string) -> <div>{content}</div>;

utils.kn
knot
func myFunc -> "Hello";
view MyView(content: string) -> <div>{content}</div>;

core.kn
knot
import { myFunc, MyView } from "@/utils";
const element = <MyView content=myFunc() />;

core.kn
knot
import { myFunc, MyView } from "@/utils";
const element = <MyView content=myFunc() />;

TypeScript

utils.tsx
tsx
function myFunc() {
  return "Hello";
}
function MyView(content: string) {
  return <div>{content}</div>;
}

utils.tsx
tsx
function myFunc() {
  return "Hello";
}
function MyView(content: string) {
  return <div>{content}</div>;
}

core.tsx
tsx
import { myFunc, MyView } from "./utils";
const element = <MyView content={myFunc()} />;

core.tsx
tsx
import { myFunc, MyView } from "./utils";
const element = <MyView content={myFunc()} />;

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.

Knot

utils.kn
knot
func handler -> {};

utils.kn
knot
func handler -> {};

core.kn
knot
import { handler as fooHandler } from "@/utils";

core.kn
knot
import { handler as fooHandler } from "@/utils";

TypeScript

utils.tsx
tsx
function handler() {}

utils.tsx
tsx
function handler() {}

core.tsx
tsx
import { handler as fooHandler } from "./utils";

core.tsx
tsx
import { handler as fooHandler } from "./utils";

Main Exports

You can also import the main export of any module which is denoted with the main keyword.

The import pattern allows importing the just the main export, just named exports, or a combination of the two.

Knot

view.kn
knot
main view MainView -> <div>Welcome!</div>;

view.kn
knot
main view MainView -> <div>Welcome!</div>;

constants.kn
knot
main const otherConst = 100;

constants.kn
knot
main const otherConst = 100;

core.kn
knot
import MainView from "@/views";
import mainConst, { otherConst } from "@/constants";
const truthy = mainConst == otherConst;

core.kn
knot
import MainView from "@/views";
import mainConst, { otherConst } from "@/constants";
const truthy = mainConst == otherConst;

TypeScript

view.tsx
tsx
export default function MainView() {
  return <div>Welcome!</div>;
}

view.tsx
tsx
export default function MainView() {
  return <div>Welcome!</div>;
}

constants.ts
tsx
export const otherConst = 100;
export default otherConst;

constants.ts
tsx
export const otherConst = 100;
export default otherConst;

core.tsx
tsx
import MainView from "./views";
import mainConst, { otherConst } from "./constants";
const truthy = mainConst == otherConst;

core.tsx
tsx
import MainView from "./views";
import mainConst, { otherConst } from "./constants";
const truthy = mainConst == otherConst;