Configuration

Dependency management

External dependencies, including the @airplane/views package, are managed using standard package management patterns. We support both npm and yarn for managing dependencies.
Running the airplane init command will search for a file named package.json in your current directory and in parent directories.
  • If found in your current directory, the Airplane CLI will add required dependencies to this package.json and use it to manage dependencies moving forward.
  • If found in a parent directory, you will be asked if you want to use it to manage view dependencies or if you want us to create a new package.json for you.
  • If package.json is not found, we will initialize a default package.json for you in your current directory.
You should ensure that your package.json file is either next to your view or in a parent directory. The closest directory containing a package.json becomes the root of your project.

Installing additional dependencies

To install dependencies, you can add them to your script's package.json using standard npm or yarn commands:
bash
Copied
1
# Example installing the airplane SDK
2
npm install airplane
See Using a 3rd party component for an example of using a 3rd party component in a view.

Private npm packages

To install private packages from NPM, you can follow the same instructions as Private npm packages for JavaScript tasks.

Upgrading your views version

To upgrade to the latest version of @airplane/views, you can run:
bash
Copied
1
npm update @airplane/views
This will automatically update your @airplane/views package to its latest minor/patch version as long as it is prefixed with a ^ in your package.json.
We recommend upgrading your @airplane/views package often. We are constantly adding bug fixes, new features, and performance improvements.
Make sure you are on the latest version of @airplane/views if you run into any bugs or missing features!

TypeScript configuration

All views components and libraries are built with TypeScript and have type support out of the box.
By default, Airplane Views are initialized using TypeScript (tsx). Running airplane init will:
  • Search for a tsconfig.json file in your current directory. If it does not exist, we will generate a default tsconfig.json for you in your current directory. You can change the configuration to suit your needs.
  • Search your package.json for the typescript dependency. If TypeScript is not installed, we will install the latest version.
While we provide a tsconfig.json file to enable TypeScript code editor support, we currently do not run tsc when building your view. This means that type errors will not stop your view from being deployed.
Views supports a number of recommended TypeScript patterns to improve type safety.

Component state

Use Generics to keep the component state type-safe. See Component state type safety for more information.

Task backed components

All Task backed components take Generics that type the parameters and output of the task.
In the following example, we've typed the parameters and output of the task list_animals that backs the Select component.

Defining a view

Views can only be defined in files that end with .airplane.tsx, .airplane.jsx, .view.tsx, or .view.jsx. Any other file extensions will not be recognized when developing a deploying a view.
To define which component represents the view, the Airplane JavaScript SDK provides a function airplane.view which takes two parameters: the view configuration and the view component.
The result of airplane.view must be the default export of the file. For example:
tsx
Copied
1
// myView.airplane.tsx
2
import { Title } from "@airplane/views";
3
import airplane from "airplane";
4
const MyView = () => {
5
return <Title>Hello World!</Title>;
6
};
7
export default airplane.view(
8
{
9
slug: "my_view",
10
name: "My View",
11
description: "This is my view!",
12
},
13
MyView
14
);