MasterGo to Code Converter

A library for converting MasterGo nodes to a structured format that can be used to generate React or HTML code.

Features

• Convert MasterGo nodes to a standardized JSON structure
• Support for various MasterGo node types (Frame, Text, Group, etc.)
• Extract styling information including layout, colors, typography, etc.
• Modular architecture with separate converters and utilities
• Support for traversing child nodes
• TypeScript support with comprehensive type definitions

Installation

npm install mg-to-code

Usage

Basic Usage (Default Instance)

import MGToCode from 'mg-to-code';

// Get selected nodes from MasterGo
const selectedNodes = mg.currentPage.selection;

// Convert nodes to the structured format
const convertedNodes = MGToCode.convertNodes(selectedNodes);

// Use the converted nodes (e.g., copy to clipboard as JSON)
const jsonString = JSON.stringify(convertedNodes, null, 2);
mg.clipboard.copyText(jsonString);

Using Specific Modules

The library is now modular, allowing you to use specific components as needed:

import { NodeConverter, StyleConverter, StyleUtils } from 'mg-to-code';

// Create a NodeConverter with custom configuration
const nodeConverter = new NodeConverter({
  includeChildren: true,
  preserveRelativePosition: true,
  componentMappings: {
    'RECTANGLE': 'Box' // Custom component mapping
  }
});

// Convert a node with the custom converter
const convertedNode = nodeConverter.convertNode(masterGoNode);

// Use the StyleConverter directly
const styleConverter = new StyleConverter();
const styles = styleConverter.extractStyles(masterGoNode);

// Use utility functions
const hexColor = StyleUtils.rgbaToHex({ r: 0.5, g: 0.7, b: 0.9, a: 0.8 });

Example Output

{
  "rect": {
    "x": 0,
    "y": 0,
    "width": 1440,
    "height": 960
  },
  "id": "music_30_22288",
  "type": "PAGE",
  "name": "组合导航布局-dark",
  "componentName": "Div",
  "elementName": null,
  "pkg": null,
  "autoLayout": true,
  "constraints": null,
  "props": {
    "style": {
      "width": "100%",
      "height": "auto",
      "display": "flex",
      "flex-direction": "column",
      "justify-content": "flex-start",
      "align-items": "flex-start",
      "position": "relative",
      "min-height": "100%"
    }
  },
  "children": [
    {
      "rect": {
        "x": 20,
        "y": 20,
        "width": 200,
        "height": 40
      },
      "id": "text_node_1",
      "type": "TEXT",
      "name": "Header Text",
      "componentName": "Text",
      "elementName": null,
      "pkg": null,
      "autoLayout": false,
      "constraints": null,
      "props": {
        "style": {
          "width": "200px",
          "height": "40px",
          "font-size": "16px",
          "font-weight": "600",
          "color": "#000000",
          "position": "relative"
        },
        "children": "Header Text"
      },
      "parent": "music_30_22288"
    }
  ]
}

API

Default Export

The default export is an instance of the MGToCode class for backward compatibility.

Classes

MGToCode

Main class that provides backward compatibility with the previous API.

• Methods:
  • convertNode(node) - Converts a single MasterGo node
  • convertNodes(nodes) - Converts multiple MasterGo nodes
  • updateConfig(config) - Updates the converter configuration
  • clearCache() - Clears the node cache

NodeConverter

Class responsible for converting MasterGo nodes to the specified structure.

• Constructor:
  • new NodeConverter(config?) - Creates a new converter with optional configuration
• Methods:
  • convertNode(node, parentNode?) - Converts a single node
  • convertNodes(nodes) - Converts multiple nodes
  • clearCache() - Clears the node cache
  • updateConfig(config) - Updates the configuration

StyleConverter

Class responsible for extracting styles from MasterGo nodes.

• Methods:
  • extractStyles(node) - Extracts styles from a node

Utility Functions

The library exports various utility functions through the StyleUtils namespace:

• formatDimension(value) - Formats dimension values
• formatLineHeight(lineHeight) - Formats line height values
• rgbaToHex(color) - Converts RGBA to hex
• getJustifyContent(alignItems) - Gets justify-content value
• getAlignItems(alignItems) - Gets align-items value
• getBlendMode(blendMode) - Gets CSS blend mode
• createLinearGradient(fill) - Creates linear gradient CSS
• createRadialGradient(fill) - Creates radial gradient CSS
• createShadow(shadow, isInset) - Creates shadow CSS
• formatPadding(node) - Formats padding values
• formatBorderRadius(node) - Formats border radius values
• getComponentName(node, customMappings) - Gets component name

Configuration Options

The NodeConverter accepts the following configuration options:

• includeChildren (boolean) - Whether to include children in the output
• preserveRelativePosition (boolean) - Whether to preserve relative positioning
• includeVariantProperties (boolean) - Whether to include variant properties
• componentMappings (object) - Custom component name mappings

Project Structure

mg-to-code/
├── src/
│   ├── types/           # Type definitions
│   ├── converters/      # Node and style converters
│   ├── utils/           # Utility functions
│   └── index.ts         # Main entry point
├── examples/            # Usage examples
└── README.md            # Documentation

Development

# Install dependencies
npm install

# Build the library
npm run build

# Run tests
npm test

# Try the examples
ts-node examples/basic-usage.ts

License

ISC