tessl/npm-tarojs--cli

Command-line interface tool for Taro, a cross-platform framework that enables developers to build apps for Mini Programs, Web, and mobile platforms

—

Pending

Overview

Eval results

Files

Page Creation

Name: tessl/npm-tarojs--cli
Author: tessl

Utilities for creating pages and components within existing Taro projects, with automatic configuration updates.

Capabilities

Page Configuration

Configuration interface for creating new pages within a Taro project.

/**
 * Page creation configuration interface
 */
interface IPageConf {
  /** Project directory path */
  projectDir: string;
  /** Project name */
  projectName: string;
  /** Package manager type */
  npm: NpmType;
  /** Template to use for page creation */
  template: string;
  /** Enable git clone for templates */
  clone?: boolean;
  /** Template source location */
  templateSource?: string;
  /** Page description */
  description?: string;
  /** Name of the page to create */
  pageName: string;
  /** Creation date */
  date?: string;
  /** Framework type */
  framework: FrameworkType;
  /** CSS preprocessor type */
  css: CSSType;
  /** Enable TypeScript */
  typescript?: boolean;
  /** Compiler type */
  compiler?: CompilerType;
  /** Use custom template */
  isCustomTemplate?: boolean;
  /** Custom template path */
  customTemplatePath?: string;
  /** Page directory location */
  pageDir?: string;
  /** Sub-package name for mini programs */
  subPkg?: string;
}

Configuration Modification

Functions for modifying app configuration when adding new pages or sub-packages.

/**
 * Configuration modification state enum
 */
enum ConfigModificationState {
  Success = 'SUCCESS',
  Fail = 'FAIL'
}

/**
 * Modify app configuration to add new pages or sub-packages
 * @param configPath - Path to app configuration file
 * @param pagePath - Path of the page to add
 * @param subPackage - Optional sub-package name
 * @returns Configuration modification result
 */
function modifyPagesOrSubPackages(
  configPath: string,
  pagePath: string,
  subPackage?: string
): ConfigModificationState;

/**
 * Modification callback type for custom template handling
 */
type ModifyCallback = (configPath: string, pagePath: string) => ConfigModificationState;

Usage Examples:

import { modifyPagesOrSubPackages, ConfigModificationState } from "@tarojs/cli";

// Add new page to main package
const result = modifyPagesOrSubPackages(
  'src/app.config.ts',
  'pages/profile/index'
);

if (result === ConfigModificationState.Success) {
  console.log('Page added successfully');
}

// Add page to sub-package
const subResult = modifyPagesOrSubPackages(
  'src/app.config.ts',
  'pages/user/settings',
  'user'
);

Page Creation Functions

Core functions for creating pages with template support and configuration updates.

/**
 * Template configuration for custom templates
 */
type TCustomTemplateInfo = {
  css: CSSType;
  typescript?: boolean;
  compiler?: CompilerType;
  templateSource?: string;
  clone?: boolean;
  isCustomTemplate?: boolean;
  customTemplatePath?: string;
};

/**
 * Set custom template configuration callback
 */
type TSetCustomTemplateConfig = (customTemplateConfig: TCustomTemplateInfo) => void;

/**
 * Get custom template configuration callback
 */
type TGetCustomTemplate = () => TCustomTemplateInfo;

/**
 * After page creation callback
 */
type TAfterCreate = (createdPagePath: string) => void;

/**
 * Extended page arguments with callbacks
 */
interface IPageArgs extends IPageConf {
  /** Custom template configuration getter */
  modifyCustomTemplateConfig: TGetCustomTemplate;
  /** Post-creation callback */
  afterCreate?: TAfterCreate;
}

Page Templates

Available page templates and their configurations.

/**
 * Default page templates by framework
 */
interface PageTemplates {
  react: {
    'class': 'React class component page';
    'function': 'React functional component page';
    'hooks': 'React hooks component page';
  };
  vue3: {
    'composition': 'Vue3 Composition API page';
    'options': 'Vue3 Options API page';
  };
  preact: {
    'function': 'Preact functional component page';
  };
  solid: {
    'function': 'SolidJS functional component page';
  };
}

/**
 * Page template file structure
 */
interface PageTemplate {
  'index.tsx' | 'index.vue': 'Main page component';
  'index.config.ts': 'Page configuration';
  'index.module.scss' | 'index.module.less': 'Page-specific styles';
}

Sub-Package Management

Mini program sub-package configuration and management utilities.

/**
 * Sub-package configuration interface
 */
interface SubPackageConfig {
  /** Sub-package root directory */
  root: string;
  /** Pages within the sub-package */
  pages: string[];
  /** Sub-package name */
  name?: string;
  /** Independent sub-package flag */
  independent?: boolean;
}

/**
 * App configuration with sub-packages
 */
interface AppConfigWithSubPackages {
  /** Main package pages */
  pages: string[];
  /** Sub-packages configuration */
  subPackages?: SubPackageConfig[];
  /** Other app configuration */
  [key: string]: any;
}

Usage Examples:

// Example app.config.ts modification for sub-packages
const appConfig = {
  pages: [
    'pages/index/index',
    'pages/about/index'
  ],
  subPackages: [
    {
      root: 'user',
      pages: [
        'pages/profile/index',
        'pages/settings/index'
      ]
    },
    {
      root: 'shop',
      pages: [
        'pages/products/index',
        'pages/cart/index'
      ],
      independent: true
    }
  ]
};

Babel AST Manipulation

Internal utilities for modifying configuration files using Babel AST transformations.

/**
 * Generate new sub-package configuration object
 * @param subPackage - Sub-package name
 * @returns AST object expression for sub-package
 */
function generateNewSubPackageItem(subPackage: string): ObjectExpression;

/**
 * Validate sub-package object structure
 * @param subPkgObject - Sub-package AST object
 * @returns Boolean indicating validity
 */
function isValidSubPkgObject(subPkgObject: ObjectExpression): boolean;

/**
 * Add new sub-package to configuration
 * @param node - Configuration AST node
 * @param page - Page path to add
 * @param subPackage - Sub-package name
 * @returns Modification state result
 */
function addNewSubPackage(
  node: ObjectExpression,
  page: string,
  subPackage: string
): ConfigModificationState;

Page Creation Workflow

Step-by-step process for creating new pages in Taro projects.

/**
 * Complete page creation workflow
 */
interface PageCreationWorkflow {
  1: 'Parse page creation arguments';
  2: 'Validate project structure and configuration';
  3: 'Determine template source and type';
  4: 'Generate page files from template';
  5: 'Update app configuration with new page';
  6: 'Update sub-package configuration if needed';
  7: 'Execute post-creation callbacks';
}

/**
 * Page creation validation checks
 */
interface PageValidation {
  projectExists: boolean;
  configFileExists: boolean;
  pageNameValid: boolean;
  templateExists: boolean;
  subPackageValid?: boolean;
}

Install with Tessl CLI