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.jsonand 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.jsonfor you. -
If
package.jsonis not found, we will initialize a defaultpackage.jsonfor 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:bashCopied1# Example installing the airplane SDK2npm install airplane
bashCopied1# Example installing the airplane SDK2yarn add 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:bashCopied1npm update @airplane/views
bashCopied1yarn upgrade @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.jsonfile in your current directory. If it does not exist, we will generate a defaulttsconfig.jsonfor you in your current directory. You can change the configuration to suit your needs. - Search your
package.jsonfor thetypescriptdependency. 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:tsxCopied1// myView.airplane.tsx2import { Title } from "@airplane/views";3import airplane from "airplane";4const MyView = () => {5return <Title>Hello World!</Title>;6};7export default airplane.view(8{9slug: "my_view",10name: "My View",11description: "This is my view!",12},13MyView14);