Skip to content

Commit

Permalink
feat(docs): Add plugins docs wip.
Browse files Browse the repository at this point in the history
  • Loading branch information
SamTolmay committed Mar 7, 2023
1 parent 69e8c07 commit 00f661f
Show file tree
Hide file tree
Showing 7 changed files with 120 additions and 60 deletions.
4 changes: 2 additions & 2 deletions packages/docs/concepts/custom-styling.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ _ref:
- _ref:
path: templates/navigation_buttons.yaml
vars:
previous_page_title: Plugins
previous_page_id: plugins
previous_page_title: Hosting Files
previous_page_id: hosting-files
next_page_title: Custom HTML
next_page_id: custom-html
4 changes: 2 additions & 2 deletions packages/docs/concepts/hosting-files.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -46,5 +46,5 @@ _ref:
vars:
previous_page_title: Lists
previous_page_id: lists
next_page_title: Plugins
next_page_id: plugins
next_page_title: Custom Styling
next_page_id: custom-styling
29 changes: 24 additions & 5 deletions packages/docs/menus.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -128,11 +128,6 @@
pageId: hosting-files
properties:
title: Hosting Files
- id: plugins
type: MenuLink
pageId: plugins
properties:
title: Plugins
- id: custom-styling
type: MenuLink
pageId: custom-styling
Expand All @@ -148,6 +143,7 @@
pageId: cli
properties:
title: The CLI

- id: deployment
type: MenuGroup
properties:
Expand All @@ -169,6 +165,29 @@
pageId: vercel
properties:
title: Vercel

- id: plugins_group
type: MenuGroup
properties:
title: Plugins
icon: AiOutlineCode
links:
- id: plugins-introduction
type: MenuLink
pageId: plugins-introduction
properties:
title: Introduction
- id: plugins-dev
type: MenuLink
pageId: plugins-dev
properties:
title: Developing Plugins
- id: plugins-actions
type: MenuLink
pageId: plugins-actions
properties:
title: Actions

- id: users_group
type: MenuGroup
properties:
Expand Down
5 changes: 4 additions & 1 deletion packages/docs/pages.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@
- _ref: concepts/secrets.yaml
- _ref: concepts/lists.yaml
- _ref: concepts/hosting-files.yaml
- _ref: concepts/plugins.yaml
- _ref: concepts/custom-html.yaml
- _ref: concepts/custom-styling.yaml
- _ref: concepts/cli.yaml
Expand All @@ -30,6 +29,10 @@
- _ref: deployment/node-server.yaml
- _ref: deployment/vercel.yaml

- _ref: plugins/plugins-introduction.yaml
- _ref: plugins/plugins-dev.yaml
- _ref: plugins/plugins-actions.yaml

- _ref: users/users-introduction.yaml
- _ref: users/login-and-logout.yaml
- _ref: users/protected-pages.yaml
Expand Down
43 changes: 43 additions & 0 deletions packages/docs/plugins/plugins-actions.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
_ref:
path: templates/general.yaml.njk
vars:
pageId: plugins-actions
pageTitle: Action Plugins
section: Concepts
filePath: concepts/plugins-actions.yaml
content:
- id: md1
type: MarkdownWithCode
properties:
content: |
Actions are functions that are triggered by events in a Lowdefy app. The Lowdefy engine provides a context object to the action with the following parameters:
- `globals: object`: Commonly used Javascript global objects. These are passed to the action for easier testing.
- `document: object`: The browser [`window.document`](https://developer.mozilla.org/en-US/docs/Web/API/Document/Document) global variable.
- `fetch: function`: The global [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/fetch) Javascript method.
- `window: object`: The browser [`window`](https://developer.mozilla.org/en-US/docs/Web/API/Window) global variable.
- `methods: object`:
- `callMethod: function`: Call the CallMethod action..
- `displayMessage: function`: Call the DisplayMessage action.
- `getActions: function`: Get data from previous actions in the action chain.
- `getBlockId: function`: Get the blockId of the block that triggered the event.
- `getEvent: function`: Get event data from the event that triggered the action.
- `getGlobal: function`: Get data from the Lowdefy global object.
- `getInput: function`: Get data from the Lowdefy input object.
- `getPageId: function`: Get the pageId of the block that the action is defined on.
- `getRequestDetails: function`: Get data from Lowdefy requests.
- `getState: function`: Get data from the Lowdefy state object.
- `getUrlQuery: function`: Get data from the Lowdefy urlQuery object.
- `getUser: function`: Get data from the Lowdefy user object.
- `link: function`: Call the Link action.
- `login: function`: Call the Login action.
- `logout: function`: Call the Logout action.
- `request: function`: Call the Request action.
- `reset: function`: Call the Reset action.
- `resetValidation: function`: Call the ResetValidation action.
- `setGlobal: function`: Call the SetGlobal action.
- `setState: function`: Call the SetGlobal action.
- `validate: function`: Call the Validate action.
- `params: any`: The `params` defined by the user in the Lowdefy configuration. Operators are evaluated before the params are passed to the action. No validation is performed on this object.
The parameters
Original file line number Diff line number Diff line change
@@ -1,51 +1,29 @@
_ref:
path: templates/general.yaml.njk
vars:
pageId: plugins
pageTitle: Plugins
pageId: plugins-dev
pageTitle: Developing Plugins
section: Concepts
filePath: concepts/plugins.yaml
filePath: concepts/plugins-dev.yaml
content:
- id: md1
type: MarkdownWithCode
properties:
content: |
Lowdefy has a plugin system that can be used to create custom blocks, connections, requests, action, operators and auth providers, adapters, callbacks and events. These plugins are written as standard npm modules, so community plugins can be published to npm, and the workspace and git protocols can be used for project specific or private plugins. Since plugins are npm packages most Javascript features and third-party npm packages can be used in plugins.
## Using a plugin
To use a plugin in an app, the plugin name and version should be specified in the `plugins` section of the Lowdefy config. Once the plugin is included, the types (blocks, connections, etc) defined in the plugin can be used anywhere in the app.
If two plugins export types with the same type name, user defined plugins will override the default Lowdefy types, and user defined plugins will overwrite other plugins defined before them in the plugins array.
###### Example
```yaml
plugins:
# plugins installed remotely from npm
- name: npm-plugin
version: 1.0.0
# local plugins in pnpm monorepo
- name: local-plugin
version: workspace:*
```
## Developing Plugins
### Package Structure
To develop plugins and publish plugins to npm or to use unpublished, project-specific plugins, we recommend using a pnpm monorepo with the plugin packages and a Lowdefy app, as demonstrated in [this example](https://github.com/lowdefy/lowdefy-example-plugins). The [Lowdefy default plugin packages](https://github.com/lowdefy/lowdefy/tree/main/packages/plugins) can also be used as examples.
A plugin package needs to include the following:
- A `package.json` which declares the package and exports the plugin types.
- A `package.json` file which declares the package and exports the plugin types.
- A `types.js` file which exports the plugin type names.
- A file that exports all the types as named exports.
- The code for the types exposed by the plugin package.
#### package.json
The `package.json` file
Lowdefy only supports [ECMAScript modules](https://nodejs.org/api/esm.html#introduction) in plugin packages, CommonJS modules are not supported. To configure a package to ECMAScript modules, the `type` field in the `package.json` file should be set to `"module"`.
Lowdefy uses the [`exports`](https://nodejs.org/api/packages.html#package-entry-points) package entry points to map to the `types.js` and plugin named export files.
```json
{
Expand All @@ -58,7 +36,6 @@ _ref:
"./auth/providers": "./src/auth/providers.js",
"./blocks": "./src/blocks.js",
"./connections": "./src/connections.js",
"./operators/build": "./src/operators/build.js",
"./operators/client": "./src/operators/client.js",
"./operators/server": "./src/operators/server.js",
"./types": "./src/types.js"
Expand All @@ -68,11 +45,11 @@ _ref:
}
```
You can change your folder structure in your package, but then you need to change the [`exports`](https://nodejs.org/api/packages.html#package-entry-points) config in the `package.json` file to match your file structure.
You can change your folder structure in your package, but then you need to change the `exports` config in the `package.json` file to match your file structure.
##### Compiling React for blocks
To develop a block plugin, the React code needs to compiled before it can be used in the Lowdefy app. The [Lowdefy plugin example](https://github.com/lowdefy/lowdefy-example-plugins) has an example of this configured using SWC
To develop a block plugin, the React code needs to compiled before it can be used in the Lowdefy app. The [Lowdefy plugin example](https://github.com/lowdefy/lowdefy-example-plugins) has an example of this configured using SWC.
#### types.js
Expand Down Expand Up @@ -101,9 +78,9 @@ _ref:
};
```
The type names do not need to be hard coded, and can be generated by importing the plugin types. This might cause some issues with third-party libraries that do not support ES Modules.
The type names do not need to be hard coded, and can be generated by importing the plugin types.
###### Example connections
###### Example `types.js` for connections
```js
import * as connections from './connections.js';
Expand All @@ -116,9 +93,9 @@ _ref:
};
```
When developing blocks, the names of any react-icons used by the block, as well the path to any CSS or LESS files used by the block also need to be included in the types object, as discussed below.
When developing blocks, the names of any react-icons used by the block, as well the path to any CSS or LESS files used by the block also need to be included in the types object, as discussed in more detail [here](/plugins-blocks).
###### Example blocks
###### Example `types.js` for blocks
```js
import * as blocks from './blocks.js';
Expand All @@ -137,17 +114,4 @@ _ref:
};
```
### Blocks
### Connections and Requests
### Actions
### Operators
- _ref:
path: templates/navigation_buttons.yaml
vars:
previous_page_title: Hosting Files
previous_page_id: hosting-files
next_page_title: Custom Styling
next_page_id: custom-styling
#### Named export files
31 changes: 31 additions & 0 deletions packages/docs/plugins/plugins-introduction.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
_ref:
path: templates/general.yaml.njk
vars:
pageId: plugins-introduction
pageTitle: Plugins
section: Concepts
filePath: concepts/plugins-introduction.yaml
content:
- id: md1
type: MarkdownWithCode
properties:
content: |
Lowdefy has a plugin system that can be used to create custom blocks, connections, requests, action, operators and auth providers, adapters, callbacks and events. These plugins are written as standard npm modules, so community plugins can be published to npm, and the workspace and git protocols can be used for project specific or private plugins. Since plugins are npm packages most Javascript features and third-party npm packages can be used in plugins.
## Using a plugin
To use a plugin in an app, the plugin name and version should be specified in the `plugins` section of the Lowdefy config. Once the plugin is included, the types (blocks, connections, etc) defined in the plugin can be used anywhere in the app.
If two plugins export types with the same type name, user defined plugins will override the default Lowdefy types, and user defined plugins will overwrite other plugins defined before them in the plugins array.
###### Example
```yaml
plugins:
# plugins installed remotely from npm
- name: npm-plugin
version: 1.0.0
# local plugins in pnpm monorepo
- name: local-plugin
version: workspace:*
```

0 comments on commit 00f661f

Please sign in to comment.