lucid-package 0.0.3 → 0.0.4
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 +73 -1
- package/assets/images/developer-menu.png +0 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,7 +2,79 @@
|
|
|
2
2
|
|
|
3
3
|
## Description
|
|
4
4
|
|
|
5
|
-
CLI for creating and managing
|
|
5
|
+
CLI for creating and managing extension packages for the products of Lucid Software.
|
|
6
|
+
|
|
7
|
+
## Getting started
|
|
8
|
+
|
|
9
|
+
### Step 1: Install `lucid-package` and create a new package
|
|
10
|
+
|
|
11
|
+
An extension package is a set of Lucid product extensions that is installable by a Lucid
|
|
12
|
+
account admin for use by all of their users. In order to start building an extension, you
|
|
13
|
+
need to create a package to contain it.
|
|
14
|
+
|
|
15
|
+
In a directory that will contain your extension packages:
|
|
16
|
+
|
|
17
|
+
```
|
|
18
|
+
npm install lucid-package
|
|
19
|
+
npx lucid-package create my-new-package-name
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
### Step 2: Add an editor extension to your new package
|
|
23
|
+
|
|
24
|
+
An editor extension is a piece of custom code that executes inside a Lucid product such
|
|
25
|
+
as Lucidchart or Lucidspark. The `lucid-package` CLI provides a quick-start template to
|
|
26
|
+
help you get up and running immediately.
|
|
27
|
+
|
|
28
|
+
To add a new extension to your package:
|
|
29
|
+
|
|
30
|
+
```
|
|
31
|
+
cd my-new-package-name
|
|
32
|
+
npx lucid-package create-editor-extension my-extension-name
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
### Step 3: Serve your extension code in debug mode to test it
|
|
36
|
+
|
|
37
|
+
You don't need to package, upload, and install your extension in order to run it and
|
|
38
|
+
make sure it works. The following command will start `webpack` on your code in `--watch`
|
|
39
|
+
mode, and start up a local HTTP server that Lucid products can connect to, to load your
|
|
40
|
+
latest code.
|
|
41
|
+
|
|
42
|
+
To start the debug server:
|
|
43
|
+
|
|
44
|
+
```
|
|
45
|
+
npx lucid-package test-editor-extension my-extension-name
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
You then need to enable loading of local plugins in the Developer menu:
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
When you turn on that option, the page will refresh and your extension code will run.
|
|
53
|
+
|
|
54
|
+
The main entry point to your new editor extension is in `editorextensions/my-extension-name/src/extension.ts`.
|
|
55
|
+
Experiment by changing code in that file and refreshing your browser tab to reload it.
|
|
56
|
+
|
|
57
|
+
For all published extensions, and by default for this debug server as well, your code
|
|
58
|
+
runs in a sandboxed JavaScript VM for security. However, this makes debugging difficult.
|
|
59
|
+
If you turn on the `Debug local extensions (no sandbox)` option, your code will be
|
|
60
|
+
run via a scoped `eval`, allowing you to use the standard browser debugging tools to examine
|
|
61
|
+
and step through your code.
|
|
62
|
+
|
|
63
|
+
We recommend that you do all final validation of your extension with the normal
|
|
64
|
+
sandbox enabled, however, as you may have inadvertently used features not allowed in
|
|
65
|
+
the sandbox that won't work once you release your extension.
|
|
66
|
+
|
|
67
|
+
### Step 4: Prepare your package for upload
|
|
68
|
+
|
|
69
|
+
Once your editor extension works the way you want, you can package it for upload to the
|
|
70
|
+
Lucid developer dashboard:
|
|
71
|
+
|
|
72
|
+
```
|
|
73
|
+
npx lucid-package package
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
This will create the file `package.zip` which is ready for upload to the [Lucid developer
|
|
77
|
+
dashboard](https://lucid.app/developer).
|
|
6
78
|
|
|
7
79
|
## License
|
|
8
80
|
|
|
Binary file
|