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 defaultpackage.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: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.json
file in your current directory. If it does not exist, we will generate a defaulttsconfig.json
for you in your current directory. You can change the configuration to suit your needs. - Search your
package.json
for thetypescript
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: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);