Local development and testing

Step 1: Develop the specs file

The capabilities of a component, including its properties, services, and events, are defined in the src/specs/specs.js file. For more information, see Describe component capabilities.

1. Open the src/specs/specs.js file to view the initial configuration and its descriptions.
2. Modify and save the file based on your requirements.
   The following example shows how to configure boolean (bool) and color (color) properties. For more information about property types, see Property types.

   Note This code is for demonstration only. In your project, replace this example with your own configuration.

   export default {
     meta: {
       cssPrefixer: 'material-'
     },
     "properties": [{
       "identifier": "$width",
       "defaultValue": 200,
       "options": {
         "min": 160
       }
     }, {
       "identifier": "$height",
       "defaultValue": 300,
       "options": {
         "min": 200
       }
     }, {
       "identifier": "boolstatus",
       "text": "是否显示",
       "type": "bool",
       "defaultValue": true
     },
     {
       identifier: 'searchBackgrund',
       text: "组件颜色",
       type: 'color',
       defaultValue: { r: 222, g: 222, b: 222, a: 1 },
       disableDataSources: 'all'
     }, ],
     "services": [{
       "identifier": "$getValue",
       "text": "取值",
       "effect": false
     }],
     "events": [{
       "identifier": "$change",
       "text": "值改变",
       "fields": [{
         "identifier": "value",
         "description": "当前值"
       }]
     }]
   };

Step 2: Develop the index entry file

The core logic for the component is defined in the src/index.tsx file.

This file uses the render(): JSX.Element{} method to define how the component is displayed. It retrieves the property values configured in the src/specs/specs.js file by using this.props to control the component's state and appearance.

For more information about property definitions, see Define properties.

1. Open the src/index.tsx file to view its initial configuration and comments.
2. Modify and save the file based on your requirements.
   The following code configures a rectangle as the component's shape. The property values from the src/specs/specs.js file control the component's visibility and background color.

   import * as React from "react";
   import BaseComponent from "@maliang/base-class-component";
   import { Input, Button } from '@alifd/next';
   
   import { colorObjectToCss, ColorObject } from '@maliang/visualapp-util-props';
   
   import styles from './index.scss';
   // This import is mandatory. It triggers the real-time compilation of specs.js into specs.json.
   import "./specs/specs";
   
   export interface Props {
       $width: number;
       $height: number;
       boolstatus: boolean;
   }
   
   export interface State {
     value: string;
     defaultValue: string;
   }
   
   class BoolTest extends BaseComponent<Props, State, {}> {
   
       /* eslint-disable @typescript-eslint/no-explicit-any*/
       constructor(props: Props, context: any) {
           /* eslint-enable @typescript-eslint/no-explicit-any*/
           super(props, context);
   
           this.state = {
           };
       }
   
       // If internationalization and theme settings are not required, remove the ConfigContext.Consumer code and write the JSX directly.
       render(): JSX.Element {
           // Get the configuration values from the specs file through this.props.
           const { $width, width, $height, height, searchBackgrund, boolstatus } = this.props;
           const style = { width, height };
   
           // Use the properties to configure the component's state and appearance.
           return (
               <div className={styles['container']} style={style}>
                   { boolstatus && <div className={styles['square']} style={{background:colorObjectToCss(searchBackgrund)}}></div>}
               </div>
           );
       }
   }
   
   export default BoolTest;

3. Open the src/index.scss style file, modify the container and square styles used in the render() method, and then save the file.

   .container {
       text-align: center;
   
   }
   
   .square{
       width: 100px;
       height: 100px;
       background-color: #ff0000;
   }

Step 3: Preview the component

Return to the Component Development page in your browser. The page automatically updates to show the changes to your component.

You can set the component style based on the configured properties.