or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

build-tools.mdconstants-types.mddevelopment-tools.mdfilesystem.mdindex.mdminiprogram.mdplugin-system.mduts.mdvue-integration.md
tile.json

miniprogram.mddocs/

Mini-Program Support

Comprehensive utilities for mini-program development including template processing, event handling, style transformations, and platform-specific optimizations for WeChat, Alipay, Baidu, and other mini-program platforms.

Capabilities

AST Parsing

Parse JavaScript/TypeScript code into Babel AST for mini-program transformations.

/**
 * Parses JavaScript/TypeScript code into a Babel AST Program
 * @param code - Source code to parse
 * @param importer - File path of the importing module
 * @param options - Parser configuration options
 * @returns Babel AST Program node
 */
function parseProgram(
  code: string, 
  importer: string, 
  options: { babelParserPlugins?: ParserPlugin[] }
): Program;

Usage Example:

import { parseProgram } from "@dcloudio/uni-cli-shared";

const ast = parseProgram(
  'const greeting = "Hello World";',
  './src/components/hello.vue',
  { babelParserPlugins: ['typescript', 'jsx'] }
);

WXS Support

WeChat mini-program WXS (WeiXin Script) processing and method extraction.

/**
 * Extracts WXS callMethod invocations from code
 * @param code - Source code containing WXS calls
 * @returns Array of method names called via .callMethod()
 */
function parseWxsCallMethods(code: string): string[];

/**
 * Generates component code to register WXS call methods
 * @param code - Source code to analyze
 * @returns JavaScript code string for component registration
 */
function genWxsCallMethodsCode(code: string): string;

Usage Example:

import { parseWxsCallMethods, genWxsCallMethodsCode } from "@dcloudio/uni-cli-shared";

const wxsCode = `
  var tools = require('./tools.wxs');
  tools.callMethod('formatDate', date);
`;

const methods = parseWxsCallMethods(wxsCode); // ['formatDate']
const componentCode = genWxsCallMethodsCode(wxsCode);

NVUE Support

Native Vue (NVUE) component CSS generation and configuration.

/**
 * Generates NVUE CSS code based on manifest configuration
 * @param manifestJson - Application manifest configuration object
 * @returns Generated CSS code string for NVUE components
 */
function genNVueCssCode(manifestJson: Record<string, any>): string;

Event Handling

Format event names for mini-program platform compatibility.

/**
 * Formats event names for mini-program platforms
 * @param eventName - Original event name (e.g., 'click', 'input')
 * @param options - Event configuration options
 * @returns Formatted event name for mini-program usage
 */
function formatMiniProgramEvent(eventName: string, options: EventOptions): string;

interface EventOptions {
  /** Whether this is a catch event (prevents bubbling) */
  isCatch?: boolean;
  /** Whether this is a capture event (capture phase) */
  isCapture?: boolean;
  /** Whether this is a component event */
  isComponent?: boolean;
}

Usage Example:

import { formatMiniProgramEvent } from "@dcloudio/uni-cli-shared";

// Standard tap event
const tapEvent = formatMiniProgramEvent('click', { isCatch: false });

// Catch tap event (prevents bubbling)
const catchTapEvent = formatMiniProgramEvent('click', { 
  isCatch: true, 
  isCapture: false 
});

Style Processing

Transform Vue scoped CSS for mini-program compatibility.

/**
 * Transforms Vue scoped CSS for mini-program compatibility
 * @param cssCode - Original CSS code with Vue scoping
 * @returns Transformed CSS compatible with mini-program platforms
 */
function transformScopedCss(cssCode: string): string;

Asset Management

Validate and manage assets for mini-program platforms.

/**
 * Determines if a file is a valid mini-program asset
 * @param filename - File name or path to check
 * @returns True if the file type is supported by mini-programs
 */
function isMiniProgramAssetFile(filename: string): boolean;

Supported Asset Extensions:

  • Images: .png, .jpg, .jpeg, .gif, .svg
  • Data: .json, .cer, .cert
  • Audio: .mp3, .aac, .m4a, .wav, .ogg, .silk
  • Video: .mp4
  • Other: .wasm, .br (Brotli compressed files)

Template Processing

Manage mini-program template file caching and processing.

/**
 * Retrieves all cached mini-program template files
 * @param genFilter - Optional filter function for template generation
 * @returns Record of filename to template code mappings
 */
function findMiniProgramTemplateFiles(genFilter?: GenFilterFn): Record<string, string>;

/**
 * Caches a mini-program template file
 * @param filename - Template file name
 * @param code - Template code content
 */
function addMiniProgramTemplateFile(filename: string, code: string): void;

/**
 * Clears the template file cache
 */
function clearMiniProgramTemplateFiles(): void;

type GenFilterFn = (filename: string) => boolean;

External Classes

Parse and manage external CSS classes for mini-program components.

/**
 * Checks if code contains externalClasses definitions
 * @param code - Source code to analyze
 * @returns True if externalClasses are found
 */
function hasExternalClasses(code: string): boolean;

/**
 * Parses externalClasses from Babel AST
 * @param ast - Babel AST Program node
 * @returns Array of external class names
 */
function parseExternalClasses(ast: Program): string[];

/**
 * Find cached external classes for a mini-program component
 * @param filename - Component file name
 * @returns Array of external class names or undefined
 */
function findMiniProgramComponentExternalClasses(filename: string): string[] | undefined;

/**
 * Update cached external classes for a mini-program component
 * @param filename - Component file name
 * @param classes - Array of external class names
 */
function updateMiniProgramComponentExternalClasses(filename: string, classes: string[]): void;

Plugin Support

Vite plugin utilities for mini-program development.

/**
 * Vite copy plugin target for plugin.json files
 */
const copyMiniProgramPluginJson: UniViteCopyPluginTarget;

/**
 * Creates copy targets for theme.json files
 * @returns Array of copy plugin targets
 */
function copyMiniProgramThemeJson(): UniViteCopyPluginTarget[];

interface UniViteCopyPluginTarget {
  src: string;
  dest: string;
}

Constants

Mini-program specific constants and identifiers.

// Component linking constants
const COMPONENT_ON_LINK: 'onVI';
const COMPONENT_BIND_LINK: '__l';
const COMPONENT_CUSTOM_HIDDEN: 'data-c-h';
const COMPONENT_CUSTOM_HIDDEN_BIND: 'bind:-data-c-h';

// Plugin configuration
const MP_PLUGIN_JSON_NAME: 'plugin.json';

HTML Tag Mapping

Mapping from HTML tags to mini-program equivalents.

/**
 * Maps HTML tags to mini-program platform equivalents
 */
const HTML_TO_MINI_PROGRAM_TAGS: Record<string, string>;

Common Mappings:

  • divview
  • spanlabel
  • imgimage
  • anavigator
  • inputinput
  • textareatextarea
  • buttonbutton
  • formform

Usage Example:

import { HTML_TO_MINI_PROGRAM_TAGS } from "@dcloudio/uni-cli-shared";

// Convert HTML tag to mini-program tag
const miniTag = HTML_TO_MINI_PROGRAM_TAGS['div']; // 'view'
const imageTag = HTML_TO_MINI_PROGRAM_TAGS['img']; // 'image'

Compiler Options

Configuration interface for mini-program compilation.

interface MiniProgramCompilerOptions {
  /** Function to check property names */
  checkPropName?: (name: string) => boolean;
  /** Lazy element loading configuration */
  lazyElement?: boolean;
  /** Event handling configuration */
  event?: EventConfig;
  /** CSS class handling configuration */
  class?: ClassConfig;
  /** Slot handling configuration */
  slot?: SlotConfig;
  /** Filter configuration */
  filter?: FilterConfig;
  /** Component configuration */
  component?: ComponentConfig;
  /** Directive configuration */
  directive?: DirectiveConfig;
  /** File emission callback */
  emitFile?: (filename: string, content: string) => void;
}

This mini-program support provides comprehensive tooling for building uni-app applications that target various mini-program platforms while maintaining compatibility and optimal performance.