Skip to main content
Version: 1.11.0

Customize your widget

How to get permission to the git repository (coming soon)​

Folder Structure (coming soon)​

Default styles​

The widget components don't import style files. You need to import vars.less and index.module.less from core package if you need them. You can find the theme color information in vars.less.

How to write a plugin​

Plugin system provides developers with the full capabilities in widget core. It allows developers to enrich Widget functionality or implement complex business logic by calling core's apis and data.

a widget plugin mainly include:

  • A function that can receive configuration information
  • This function returns a function that receives an instance of widget core
  • Listen to or emit events to complete the business logic

The following is an example of a plugin that inserts a "Hello World" message during initialization:

// A function that can receive configuration information
export default function myPlugin(config: any) {
  const formatedConfig = Object.assign({
    createdTime: Date.now()
  }, config)
  // This function returns a function that receives an instance of widget core
  return function (context: ContextModel) {
    // Listen to or emit events to complete the business logic
    context.on('didInitial', function(context: ContextModel, payload: any) {
      // e.g:
      context.appendUserMessage({
        _id: 'myPluginFirstMessage',
        comp: ({text}) => <div>{text}</div>,
        content: { text: 'hello world!' }
      })
      
      context.emit('myPluginGotInitialed', { foo: 'bar', formatedConfig })
      
      // do something else 
    })
  }
}

For more information, please refer to:

How to custom a project​

To custom a project, you can choose from existing templates that are suitable for transformation, or you can redevelop one using the base components.

Choose from existing templates​

Fork an existing template and custom it.

  1. Initialize
yarn
  1. Local debugging
yarn dev
  1. Build project. Files will be in the dist folder and they will be published to the address required by the project.
yarn build
note

Typically, private deployment projects are placed in the customer's OSS or backend project and it's up to you and your customer.

Custom project using only widget Core​

1. Create a project:​

You can use an existing project or create a project using Yarn Create. The following uses the Vite template as an example:

# Create the project using Vite's React-TS template
yarn create vite --template react-ts

# Enter the project, whose default name is vite-project
cd ./vite-project

# Installing Dependencies
yarn

# add Widget Core
yarn add lc-widget-core

See more Settings Create your first Vite project.

2. Import Widget Core:​

You can use "model.init" to initialize the model and its data, exposing reusable initialization methods to different users or channels, etc.

import { model } from 'lc-widget-core'

function initMyWidget({userInfo}) {
  model.init({userInfo})
}

window.initMyWidget = initMyWidget

// init when you want it
initMyWidget({
  name: 'ready_player_one'
})

3. Load the preset dialog box​

import { SDKComp } from 'lc-widget-core'

export default function() {
  return <SDKComp />
}

4. Build and publish​

Give the files in dist to the place where the business needs them.

yarn build

Preset templates​

The first template​

template1

The second template (Default locale: Chinese)​

template2