Add slot

Overview

We have preset a lot of slots for you so that you can easily customize the operations you want on ONES. At present, you can simply use the slot as a "placeholder", and your plugin is to fill the placeholder with code.

Slots

• Slot module list

Usage

Step 1: Add slot module

Execute npx op add module under the root directory of the plugin project to add slot modules to the plugin.

➜ npx op add module
  ✔ Validating the input params
  ✔ Validating project files exists
  ✔ Generating initial answers by input params
  ✔ Parsing plugin config content
Pre-require tasks run successfully
? Please select the module type you want to add: …
ones:desk
ones:manhour
ones:performance
ones:plan
ones:pipeline
ones:product
ones:testcase
ones:version

You can search for and select slot modules in the list by selecting a direction key or entering a string.

tip

If you choose a slot that contains submodules, you will continue to be asked if you need to add submodules. You can add it together, or you can choose to add it manually later.

Step 2: Add slot Submodule

Execute npx op add sub-module under the plugin project directory to add submodules to the slot module.

➜ npx op add sub-module
  ✔ Validating the input params
  ✔ Validating project files exists
  ✔ Generating initial answers by input params
  ✔ Parsing plugin config content

Pre-require tasks run successfully
? Please select the module you want to add a sub module: (Use arrow keys)
❯ ones-workspace-fKFw
❯ ones-plan-fKFF
❯ ones-wiki-uuDB

You can search for and select slot module id in the list by selecting a direction key or entering a string.

caution

Not all slots have submodules. If you look up the list of modules and find that there are no submodules in the module you need, you can skip the second step.

Step 3: Add logical code

The logic code for each slot module is stored in a directory named after the slot module id under the /web/src/modules/ directory. You can treat each slot module as a separate React application, which is no different from the way you are familiar with React development, you just need to pay attention to your business logic.

We provide natural TypeScript support for plugin, with the introduction of .ts and .tsx files by default.

When the plugin is packaged, we only perform the translation of .ts and .tsx files, and do not perform any type checking, it only provides friendly type hints when you code to help you reduce problems.

caution

For the packaging of each plugin module, we use the index.tsx file in the module as the entry. Do not delete this entry file, or there may be an exception in your packaging process.

Step 4: Add style code

The same style code for each slot is also stored in the /web/src/modules/ directory named after the slot module id. Open the index.css file in the directory, and the content generated by default is as follows:

index.css

#ones-mf-root {
}

The element of id="ones-mf-root"is the root element of the slot module, so you can write the style under the selector of #ones-mf-root. Of course, this is only recommended, not necessary. You can write style code in any way you like.

PostCSS

We also provide natural support for PostCSS preprocessors for plugin, and enable the following functions by default.

• autoprefixer

  Because we enabled autoprefixer by default, you only need to write plugin styles using unprefixed CSS rules, without worrying about browser compatibility.

• cssnano

  We use cssnano to compress the plugin style code to reduce the plugin size and improve the plugin performance.

• postcss-import

  We support CSS @import inline through postcss-import preconfiguration so that you can split the CSS module.

  For example, you can create a separate style file banner.css for the banner component:

  /web/src/modules/ones-global-banner-3QC4/banner.css

  .banner {
    width: 100%;
  }

  Then introduce it in index.css

  /web/src/modules/ones-global-banner-3QC4/index.css

  @import 'banner.css';
  
  #ones-mf-root {
  }

• postcss-nested

  We use postcss-nested to allow you to write CSS selectors in a nested manner, just as you are familiar with the Sass syntax:

  .mf-bar-banner {
    width: 100%;
    height: 0;
    &--active {
      height: 40px;
    }
  }

Step 5: Use ONES Design

We provide a complete set of UI components library that can help you quickly build a standard plugin user interface, which has been introduced by default when the plugin project is initialized.

The index.tsx file of each slot module looks like:

index.tsx

import { ConfigProvider } from '@ones-design/core'
import React from 'react'
import ReactDOM from 'react-dom'

import './index.css'

ReactDOM.render(
  <ConfigProvider>you module title</ConfigProvider>,
  document.getElementById('ones-mf-root'),
)

caution

You must keep the <ConfigProvider> component in index.tsx, or the plugin will not run the way you expect it to. For more information, please see ConfigProvider document in ONES Design.

For more information about the specific use of component libraries, please refer to: ONES Design.

Add slot example

Here we take the global slot of ones:global:banner as an example. When you select to add this module, you can see that an item has been added to the modules field of the plugin.yaml file:

config/plugin.yaml

modules:
  - id: ones-global-banner-3QC4
    title: banner
    entry: modules/ones-global-banner-3QC4/index.html
    moduleType: ones:global:banner

At the same time, the /web/src/modules/ones-global-banner-3QC4 directory corresponding to the entry field is generated, which contains index.tsx and index.css files:

Execute npx op invoke run in the root directory of the plugin project so that you can see your plugin in the corresponding slot in the remote debugging environment.