Value Types

/**
 * JavaScript expression type for dynamic values
 */
interface IPublicTypeJSExpression {
  /** Expression type identifier */
  type: 'JSExpression';
  /** JavaScript expression string */
  value: string;
  /** Mock value for design time */
  mock?: any;
  /** Compiled source code */
  compiled?: string;
}

import { IPublicTypeJSExpression } from "@alilc/lowcode-types";

// Simple state reference
const stateExpression: IPublicTypeJSExpression = {
  type: 'JSExpression',
  value: 'this.state.userName',
  mock: 'John Doe'
};

// Conditional expression
const conditionalExpression: IPublicTypeJSExpression = {
  type: 'JSExpression',
  value: 'this.state.isLoggedIn ? "Welcome" : "Please login"',
  mock: 'Welcome'
};

// Method call
const methodExpression: IPublicTypeJSExpression = {
  type: 'JSExpression',
  value: 'this.utils.formatDate(this.state.createdAt)',
  mock: '2023-12-01'
};

/**
 * JavaScript function type for event handlers and methods
 */
interface IPublicTypeJSFunction {
  /** Function type identifier */
  type: 'JSFunction';
  /** Function definition string */
  value: string;
  /** Compiled source code */
  compiled?: string;
  /** Mock value for design time */
  mock?: any;
}

import { IPublicTypeJSFunction } from "@alilc/lowcode-types";

// Click handler function
const clickHandler: IPublicTypeJSFunction = {
  type: 'JSFunction',
  value: `function(event) {
    console.log('Button clicked:', event);
    this.setState({ clicked: true });
  }`
};

// Async function
const asyncHandler: IPublicTypeJSFunction = {
  type: 'JSFunction',
  value: `async function() {
    const data = await this.props.onFetch();
    this.setState({ data });
  }`
};

// Arrow function
const arrowFunction: IPublicTypeJSFunction = {
  type: 'JSFunction',
  value: '(value) => this.props.onChange(value)'
};

/**
 * JavaScript slot type for ReactNode properties
 */
interface IPublicTypeJSSlot {
  /** Slot type identifier */
  type: 'JSSlot';
  /** Function parameters */
  params?: string[];
  /** Slot content - can be nodes or node data */
  value?: IPublicTypeNodeData[] | IPublicTypeNodeData;
}

import { IPublicTypeJSSlot, IPublicTypeNodeSchema } from "@alilc/lowcode-types";

// Simple slot with node content
const titleSlot: IPublicTypeJSSlot = {
  type: 'JSSlot',
  value: {
    componentName: 'Text',
    props: {
      children: 'Dynamic Title'
    }
  }
};

// Slot with parameters for list rendering
const listItemSlot: IPublicTypeJSSlot = {
  type: 'JSSlot',
  params: ['item', 'index'],
  value: {
    componentName: 'ListItem',
    props: {
      key: {
        type: 'JSExpression',
        value: 'item.id'
      },
      children: {
        type: 'JSExpression', 
        value: 'item.name'
      }
    }
  }
};

// Complex slot with multiple nodes
const cardSlot: IPublicTypeJSSlot = {
  type: 'JSSlot',
  params: ['data'],
  value: [
    {
      componentName: 'CardHeader',
      props: {
        title: {
          type: 'JSExpression',
          value: 'data.title'
        }
      }
    },
    {
      componentName: 'CardBody', 
      props: {
        children: {
          type: 'JSExpression',
          value: 'data.content'
        }
      }
    }
  ]
};

/**
 * Composite value type supporting all dynamic value formats
 */
type IPublicTypeCompositeValue = 
  | IPublicTypeJSExpression 
  | IPublicTypeJSFunction 
  | IPublicTypeJSSlot 
  | string 
  | number 
  | boolean 
  | object 
  | any[];

/**
 * DOM text node type
 */
interface IPublicTypeDOMText {
  /** Text type identifier */
  type: 'text';
  /** Text content */
  value: string;
}

/**
 * Union type for all node data formats
 */
type IPublicTypeNodeData = 
  | IPublicTypeNodeSchema 
  | IPublicTypeDOMText 
  | IPublicTypeJSSlot;

import { 
  IPublicTypeCompositeValue, 
  IPublicTypeNodeData,
  IPublicTypeDOMText 
} from "@alilc/lowcode-types";

// Mixed property values
const buttonProps: Record<string, IPublicTypeCompositeValue> = {
  type: 'primary', // string literal
  disabled: {
    type: 'JSExpression',
    value: 'this.state.loading'
  }, // expression
  onClick: {
    type: 'JSFunction', 
    value: 'function() { this.handleClick(); }'
  }, // function
  children: 'Submit' // simple string
};

// Mixed node data
const mixedContent: IPublicTypeNodeData[] = [
  // Text node
  {
    type: 'text',
    value: 'Hello '
  },
  // Component node
  {
    componentName: 'Bold',
    props: {
      children: 'World'
    }
  },
  // Slot node
  {
    type: 'JSSlot',
    value: {
      componentName: 'Icon',
      props: {
        type: 'smile'
      }
    }
  }
];