|
| 1 | +--- |
| 2 | +description: >- |
| 3 | + With Openblocks plugins, you can develop customized components that are |
| 4 | + consistent with native components for your specific scenarios. |
| 5 | +--- |
| 6 | + |
| 7 | +# Develop customized plugins |
| 8 | + |
| 9 | +## Initialization |
| 10 | + |
| 11 | +Execute the following `yarn start` file: |
| 12 | + |
| 13 | +```bash |
| 14 | +# Project initiation |
| 15 | +yarn create openblocks-plugin my-plugin |
| 16 | + |
| 17 | +# Go to the project root |
| 18 | +cd my-plugin |
| 19 | + |
| 20 | +# Start the development environment |
| 21 | +yarn start |
| 22 | +``` |
| 23 | + |
| 24 | +## Component development environment |
| 25 | + |
| 26 | +After executing `yarn start`, the browser is automatically opened and you enter the component development environment. |
| 27 | + |
| 28 | +<figure><img src="../.gitbook/assets/plugin-1.jpeg" alt="Screenshot of component development environment"><figcaption></figcaption></figure> |
| 29 | + |
| 30 | +## Plugin configurations |
| 31 | + |
| 32 | +In `openblocks` field in `package.json` file, you need to define the component properties. For example, the following is the explanation of several fields: |
| 33 | + |
| 34 | +* `comps` defines UI components contained in the plugin. For each component, the key name of the object is the unique identity, and the value is metadata. |
| 35 | +* `comps[someCompKey].name` defines the component name shown in the **Insert** tab. |
| 36 | +* `comps[someCompKey].icon` defines the component icon shown on the canvas. Use a relative path to where `package.json` file is located. |
| 37 | +* `comps[someCompKey].layoutInfo` defines the component layout: |
| 38 | + * w: width of the component. Counted by the number of grid cells (range: 1 - 24). |
| 39 | + * h: height of the component. Counted by the number of grid cells (range: >= 1). |
| 40 | + |
| 41 | +```bash |
| 42 | + "openblocks": { |
| 43 | + "description": "", |
| 44 | + "comps": { |
| 45 | + "hello_world": { |
| 46 | + "name": "Hello World", |
| 47 | + "icon": "./icons/hello_world.png", |
| 48 | + "layoutInfo": { |
| 49 | + "w": 12, |
| 50 | + "h": 5 |
| 51 | + } |
| 52 | + }, |
| 53 | + "counter": { |
| 54 | + "name": "Counter", |
| 55 | + "icon": "./icons/hello_world.png" |
| 56 | + } |
| 57 | + } |
| 58 | + } |
| 59 | +``` |
| 60 | + |
| 61 | +## Export components |
| 62 | + |
| 63 | +To export all the components, use `src/index.ts`, for example: |
| 64 | + |
| 65 | +```bash |
| 66 | +import HelloWorldComp from "./HelloWorldComp"; |
| 67 | + |
| 68 | +export default { |
| 69 | + hello_world: HelloWorldComp, |
| 70 | +}; |
| 71 | +``` |
| 72 | + |
| 73 | +The default exported object `key` needs to be consistent with the `key` configured in `comps` in `package.json` file. |
| 74 | + |
| 75 | +## Publish plugins |
| 76 | + |
| 77 | +When you finish developing and testing the plugin, you can publish it into the npm registry. Login in to the npm registry locally, and then execute the following command: |
| 78 | + |
| 79 | +``` |
| 80 | +yarn build --publish |
| 81 | +``` |
| 82 | + |
| 83 | +If you do not specify the parameter `--publish`, the `tar` file will be saved in the root folder. |
| 84 | + |
| 85 | +## Import plugins |
| 86 | + |
| 87 | +In the Openblocks app, click **Insert** > **Extensions** > **Add npm plugin** in the right pane. <img src="../.gitbook/assets/plugin-2.png" alt="" data-size="original"> |
| 88 | + |
| 89 | +Input your npm package's URL or name, and then you can use your customized components. |
| 90 | + |
| 91 | +```bash |
| 92 | +my-plugin |
| 93 | + |
| 94 | +# or |
| 95 | + |
| 96 | +https://www.npmjs.com/package/my-plugin |
| 97 | +``` |
| 98 | + |
| 99 | +<figure><img src="../.gitbook/assets/plugin-3.png" alt=""><figcaption></figcaption></figure> |
| 100 | + |
| 101 | +### Code demo |
| 102 | + |
| 103 | +For code demo, refer to Openblocks [Github](https://github.com/openblocks-dev/openblocks/tree/develop/client/packages/openblocks-plugin-demo). |
0 commit comments