feat(sdk): Add reference data for the SDK input/output types (#13)

This commit is contained in:
Eric Tuvesson
2023-09-20 09:46:23 +02:00
committed by GitHub
parent b58268a022
commit 89b9042b0d
2 changed files with 186 additions and 0 deletions

28
sdk/overview.mdx Normal file
View File

@@ -0,0 +1,28 @@
---
title: SDK Overview
hide_title: true
---
# SDK Overview
Noodl SDK, or `@noodl/noodl-sdk`, is a javascript package that is making is easy to extend Noodl with core nodes.
## Installation
Here are some guides on how to create a Noodl module, including installing the SDK.
[Continue here.](/javascript/extending/overview)
## Getting started
We have a lot of open source modules in this [GitHub repository](https://github.com/noodlapp/modules).
These are a great place to start when looking for references, and examples of how to build a module.
Not all of these modules are made with the SDK. Why?
The SDK is built on top of the internal Noodl API, designed to make it easier and future compatible with internal Noodl API changes in mind.
Currently the SDK does lack some of the functionality that the internal Noodl API provides, which is the primary reason not to use the SDK for these modules.
In the end the module code will be very similar, but can cause some confusion.
> At this time, the only module that is not built using the SDK in that GitHub repository is the `simple-tooltips` module.
For a module to be registered in the Noodl app, you don't need to have the SDK installed.
The way that the modules are registered is by calling the `Noodl.defineModule(module)` function which is globally defined by the Noodl runtime and not in the SDK.

View File

@@ -0,0 +1,158 @@
---
title: Noodl SDK Input and Output Types
hide_title: true
---
# Noodl SDK Input and Output Types
Here are some Typescript typings to fill in all the types, in the future this will be included directly with the SDK.
There are two ways to set the type on a Input or Output, either with the shortcut like this:
```ts
{
// ...
inputs: {
myInput: "string",
displayName: "My Input",
group: "My Group",
default: "My default input value",
},
// ...
}
```
Or with the full type where you can apply more options, like this:
```ts
{
// ...
inputs: {
myInput: {
name: "string",
codeeditor: "plaintext",
allowEditOnly: true
},
displayName: "My Input",
group: "My Group",
default: "My default input value",
}
// ...
}
```
## Types
The type can also be `*` (star) to be any type, removing all connection type restrictions in the editor.
```ts
type TypeEditor = "javascript" | "plaintext" | "graphql" | "css" | "html";
interface BuiltInType {
name: string;
codeeditor?: TypeEditor;
/** Allow the Input to only be edited via the property panel */
allowEditOnly?: boolean;
}
export interface ObjectType extends BuiltInType {
name: "object";
}
export interface ArrayType extends BuiltInType {
name: "array";
}
export interface StringType extends BuiltInType {
name: "string";
}
export interface StringListType extends BuiltInType {
name: "stringlist";
}
export interface NumberType extends BuiltInType {
name: "number";
units?: string[];
defaultUnit?: string;
marginPaddingComp?: string;
}
export interface BooleanType extends BuiltInType {
name: "boolean";
}
export interface SignalType extends BuiltInType {
name: "signal";
}
export declare type EnumListItem = {
label: string;
value: string;
};
export interface EnumType extends BuiltInType {
name: "enum";
enums: EnumListItem[];
}
export interface ColorType extends BuiltInType {
name: "color";
}
export interface ImageType extends BuiltInType {
name: "image";
}
export interface IconType extends BuiltInType {
name: "icon";
}
export interface FontType extends BuiltInType {
name: "font";
}
export interface TextStyleType extends BuiltInType {
name: "textStyle";
}
export interface ComponentType extends BuiltInType {
name: "component";
}
export interface DimensionType extends BuiltInType {
name: "dimension";
}
export interface SourceType extends BuiltInType {
name: "source";
}
export interface ResizingType extends BuiltInType {
name: "resizing";
}
export interface VariableType extends BuiltInType {
name: "variable";
}
export interface CurveType extends BuiltInType {
name: "curve";
}
export interface QueryFilterType extends BuiltInType {
name: "query-filter";
}
export interface QuerySortingType extends BuiltInType {
name: "query-sorting";
}
export interface PagesType extends BuiltInType {
name: "pages";
}
export interface ProplistType extends BuiltInType {
name: "proplist";
}
```