CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-dcloudio--uni-cli-shared

Shared CLI utilities and tools for the uni-app cross-platform development framework

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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.

Install with Tessl CLI

npx tessl i tessl/npm-dcloudio--uni-cli-shared

docs

build-tools.md

constants-types.md

development-tools.md

filesystem.md

index.md

miniprogram.md

plugin-system.md

uts.md

vue-integration.md

tile.json