@luna-park/plugin 1.0.2 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +139 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
# @luna-park/plugin
|
|
2
|
+
|
|
3
|
+
This package provides the core types and helper functions for creating plugins for **Luna Park**, a visual scripting platform.
|
|
4
|
+
|
|
5
|
+
It exports the necessary interfaces to define plugin configurations, editor components, logic nodes, and lifecycle hooks.
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @luna-park/plugin
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Usage
|
|
14
|
+
|
|
15
|
+
The primary way to define a plugin is using the `makePlugin` helper function. This ensures type safety for your plugin configuration.
|
|
16
|
+
|
|
17
|
+
```typescript
|
|
18
|
+
import { makePlugin, ELogicType } from "@luna-park/plugin";
|
|
19
|
+
import awesomeIcon from "./awesome-icon.svg"; // Icon URL
|
|
20
|
+
|
|
21
|
+
// Define your plugin's configuration schema (optional)
|
|
22
|
+
const config = LogicType.object({
|
|
23
|
+
apiKey: LogicType.string(),
|
|
24
|
+
theme: LogicType.string({enum: ["light", "dark"], default: "dark"}),
|
|
25
|
+
}) satisfies TSchema;
|
|
26
|
+
|
|
27
|
+
export default makePlugin({
|
|
28
|
+
id: "my-awesome-plugin",
|
|
29
|
+
name: "My Awesome Plugin",
|
|
30
|
+
icon: awesomeIcon, // Icon URL
|
|
31
|
+
description: "Adds amazing capabilities to Luna Park.",
|
|
32
|
+
|
|
33
|
+
// Plugin configuration schema
|
|
34
|
+
config: ConfigSchema,
|
|
35
|
+
|
|
36
|
+
// Lifecycle hooks
|
|
37
|
+
lifecycle: {
|
|
38
|
+
mount: async (env) => {
|
|
39
|
+
console.log("Plugin mounted", env.config.apiKey);
|
|
40
|
+
},
|
|
41
|
+
update: async ({config}) => {
|
|
42
|
+
console.log("Config updated", config);
|
|
43
|
+
},
|
|
44
|
+
unmount: (env) => {
|
|
45
|
+
console.log("Plugin unmounted");
|
|
46
|
+
},
|
|
47
|
+
},
|
|
48
|
+
|
|
49
|
+
// Extend the editor
|
|
50
|
+
editor: {
|
|
51
|
+
// Register custom Vue components for the editor
|
|
52
|
+
components: [
|
|
53
|
+
{
|
|
54
|
+
name: "Element/Avatar",
|
|
55
|
+
component: MyAvatarComponent,
|
|
56
|
+
properties: {
|
|
57
|
+
src: LogicType.string({ name: "Avatar URL" }),
|
|
58
|
+
name: LogicType.string({ name: "Name" }),
|
|
59
|
+
},
|
|
60
|
+
slots: {
|
|
61
|
+
default: LogicType.void()
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
// ... component definitions
|
|
65
|
+
],
|
|
66
|
+
// Register custom logic nodes
|
|
67
|
+
nodes: [
|
|
68
|
+
makeLogicNode({
|
|
69
|
+
name: "log/stuff",
|
|
70
|
+
inputs: {
|
|
71
|
+
in_exec: LogicType.exec(),
|
|
72
|
+
in_stuff: LogicType.string({ name: "Stuff" })
|
|
73
|
+
},
|
|
74
|
+
outputs: {
|
|
75
|
+
out_exec: LogicType.exec()
|
|
76
|
+
},
|
|
77
|
+
methods: {
|
|
78
|
+
async in_exec() {
|
|
79
|
+
console.log(this.in_stuff);
|
|
80
|
+
await this.out_exec();
|
|
81
|
+
}
|
|
82
|
+
},
|
|
83
|
+
display: {
|
|
84
|
+
name: "Log stuff"
|
|
85
|
+
}
|
|
86
|
+
})
|
|
87
|
+
// ... node definitions
|
|
88
|
+
],
|
|
89
|
+
wrapper : MyWrapperComponent, // Custom wrapper component for the editor
|
|
90
|
+
},
|
|
91
|
+
|
|
92
|
+
// Code injection options
|
|
93
|
+
inject: {
|
|
94
|
+
css: "body { background-color: #000; }",
|
|
95
|
+
js: "console.log('Hello world!')"
|
|
96
|
+
}
|
|
97
|
+
});
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
## API Reference
|
|
101
|
+
|
|
102
|
+
### `makePlugin(plugin)`
|
|
103
|
+
|
|
104
|
+
A helper identity function that takes a `TPlugin` object and returns it. It is used to infer types for the configuration and internal state.
|
|
105
|
+
|
|
106
|
+
### `TPlugin<TConfig, TInternal>`
|
|
107
|
+
|
|
108
|
+
The main interface for defining a plugin.
|
|
109
|
+
|
|
110
|
+
| Property | Type | Description |
|
|
111
|
+
| :--- | :--- | :--- |
|
|
112
|
+
| `id` | `string` | **Required**. Unique identifier for the plugin. |
|
|
113
|
+
| `name` | `string` | **Required**. Display name of the plugin. |
|
|
114
|
+
| `icon` | `string` | **Required**. Icon for the plugin. |
|
|
115
|
+
| `description` | `string` | Brief description of what the plugin does. |
|
|
116
|
+
| `config` | `TSchema` | Schema definition for the plugin's configuration settings. |
|
|
117
|
+
| `lifecycle` | `object` | Lifecycle hooks (`mount`, `unmount`, `update`). |
|
|
118
|
+
| `editor` | `object` | Extensions for the editor (components, nodes, tokens, wrapper). |
|
|
119
|
+
| `build` | `object` | Build-time configurations (Vite plugins, imports). |
|
|
120
|
+
| `inject` | `object` | CSS/JS injection options. |
|
|
121
|
+
|
|
122
|
+
### `TEnv<TConfig, TInternal>`
|
|
123
|
+
|
|
124
|
+
The environment object passed to lifecycle hooks and dynamic options.
|
|
125
|
+
|
|
126
|
+
| Property | Type | Description |
|
|
127
|
+
| :--- | :--- | :--- |
|
|
128
|
+
| `app` | `TApplicationExport` | Access to the core application instance. |
|
|
129
|
+
| `config` | `Static<TConfig>` | The resolved configuration values based on the schema. |
|
|
130
|
+
| `mode` | `"build" \| "editor"` | The current running mode. |
|
|
131
|
+
| `internal` | `TInternal` | Internal state (if defined). |
|
|
132
|
+
|
|
133
|
+
### `TOption<TEnv, T>`
|
|
134
|
+
|
|
135
|
+
Many properties in `TPlugin` can be either a static value `T` or a function that returns `T` (or `Promise<T>`). This allows for dynamic configuration based on the environment.
|
|
136
|
+
|
|
137
|
+
```typescript
|
|
138
|
+
type TOption<TEnv, T> = T | ((env: TEnv) => T | Promise<T>);
|
|
139
|
+
```
|