0
# Page Creation
1

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

4
## Capabilities
5

6
### Page Configuration
7

8
Configuration interface for creating new pages within a Taro project.
9

10
```typescript { .api }
11
/**
12
 * Page creation configuration interface
13
 */
14
interface IPageConf {
15
  /** Project directory path */
16
  projectDir: string;
17
  /** Project name */
18
  projectName: string;
19
  /** Package manager type */
20
  npm: NpmType;
21
  /** Template to use for page creation */
22
  template: string;
23
  /** Enable git clone for templates */
24
  clone?: boolean;
25
  /** Template source location */
26
  templateSource?: string;
27
  /** Page description */
28
  description?: string;
29
  /** Name of the page to create */
30
  pageName: string;
31
  /** Creation date */
32
  date?: string;
33
  /** Framework type */
34
  framework: FrameworkType;
35
  /** CSS preprocessor type */
36
  css: CSSType;
37
  /** Enable TypeScript */
38
  typescript?: boolean;
39
  /** Compiler type */
40
  compiler?: CompilerType;
41
  /** Use custom template */
42
  isCustomTemplate?: boolean;
43
  /** Custom template path */
44
  customTemplatePath?: string;
45
  /** Page directory location */
46
  pageDir?: string;
47
  /** Sub-package name for mini programs */
48
  subPkg?: string;
49
}
50
```
51

52
### Configuration Modification
53

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

56
```typescript { .api }
57
/**
58
 * Configuration modification state enum
59
 */
60
enum ConfigModificationState {
61
  Success = 'SUCCESS',
62
  Fail = 'FAIL'
63
}
64

65
/**
66
 * Modify app configuration to add new pages or sub-packages
67
 * @param configPath - Path to app configuration file
68
 * @param pagePath - Path of the page to add
69
 * @param subPackage - Optional sub-package name
70
 * @returns Configuration modification result
71
 */
72
function modifyPagesOrSubPackages(
73
  configPath: string,
74
  pagePath: string,
75
  subPackage?: string
76
): ConfigModificationState;
77

78
/**
79
 * Modification callback type for custom template handling
80
 */
81
type ModifyCallback = (configPath: string, pagePath: string) => ConfigModificationState;
82
```
83

84
**Usage Examples:**
85

86
```typescript
87
import { modifyPagesOrSubPackages, ConfigModificationState } from "@tarojs/cli";
88

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

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

99
// Add page to sub-package
100
const subResult = modifyPagesOrSubPackages(
101
  'src/app.config.ts',
102
  'pages/user/settings',
103
  'user'
104
);
105
```
106

107
### Page Creation Functions
108

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

111
```typescript { .api }
112
/**
113
 * Template configuration for custom templates
114
 */
115
type TCustomTemplateInfo = {
116
  css: CSSType;
117
  typescript?: boolean;
118
  compiler?: CompilerType;
119
  templateSource?: string;
120
  clone?: boolean;
121
  isCustomTemplate?: boolean;
122
  customTemplatePath?: string;
123
};
124

125
/**
126
 * Set custom template configuration callback
127
 */
128
type TSetCustomTemplateConfig = (customTemplateConfig: TCustomTemplateInfo) => void;
129

130
/**
131
 * Get custom template configuration callback
132
 */
133
type TGetCustomTemplate = () => TCustomTemplateInfo;
134

135
/**
136
 * After page creation callback
137
 */
138
type TAfterCreate = (createdPagePath: string) => void;
139

140
/**
141
 * Extended page arguments with callbacks
142
 */
143
interface IPageArgs extends IPageConf {
144
  /** Custom template configuration getter */
145
  modifyCustomTemplateConfig: TGetCustomTemplate;
146
  /** Post-creation callback */
147
  afterCreate?: TAfterCreate;
148
}
149
```
150

151
### Page Templates
152

153
Available page templates and their configurations.
154

155
```typescript { .api }
156
/**
157
 * Default page templates by framework
158
 */
159
interface PageTemplates {
160
  react: {
161
    'class': 'React class component page';
162
    'function': 'React functional component page';
163
    'hooks': 'React hooks component page';
164
  };
165
  vue3: {
166
    'composition': 'Vue3 Composition API page';
167
    'options': 'Vue3 Options API page';
168
  };
169
  preact: {
170
    'function': 'Preact functional component page';
171
  };
172
  solid: {
173
    'function': 'SolidJS functional component page';
174
  };
175
}
176

177
/**
178
 * Page template file structure
179
 */
180
interface PageTemplate {
181
  'index.tsx' | 'index.vue': 'Main page component';
182
  'index.config.ts': 'Page configuration';
183
  'index.module.scss' | 'index.module.less': 'Page-specific styles';
184
}
185
```
186

187
### Sub-Package Management
188

189
Mini program sub-package configuration and management utilities.
190

191
```typescript { .api }
192
/**
193
 * Sub-package configuration interface
194
 */
195
interface SubPackageConfig {
196
  /** Sub-package root directory */
197
  root: string;
198
  /** Pages within the sub-package */
199
  pages: string[];
200
  /** Sub-package name */
201
  name?: string;
202
  /** Independent sub-package flag */
203
  independent?: boolean;
204
}
205

206
/**
207
 * App configuration with sub-packages
208
 */
209
interface AppConfigWithSubPackages {
210
  /** Main package pages */
211
  pages: string[];
212
  /** Sub-packages configuration */
213
  subPackages?: SubPackageConfig[];
214
  /** Other app configuration */
215
  [key: string]: any;
216
}
217
```
218

219
**Usage Examples:**
220

221
```typescript
222
// Example app.config.ts modification for sub-packages
223
const appConfig = {
224
  pages: [
225
    'pages/index/index',
226
    'pages/about/index'
227
  ],
228
  subPackages: [
229
    {
230
      root: 'user',
231
      pages: [
232
        'pages/profile/index',
233
        'pages/settings/index'
234
      ]
235
    },
236
    {
237
      root: 'shop',
238
      pages: [
239
        'pages/products/index',
240
        'pages/cart/index'
241
      ],
242
      independent: true
243
    }
244
  ]
245
};
246
```
247

248
### Babel AST Manipulation
249

250
Internal utilities for modifying configuration files using Babel AST transformations.
251

252
```typescript { .api }
253
/**
254
 * Generate new sub-package configuration object
255
 * @param subPackage - Sub-package name
256
 * @returns AST object expression for sub-package
257
 */
258
function generateNewSubPackageItem(subPackage: string): ObjectExpression;
259

260
/**
261
 * Validate sub-package object structure
262
 * @param subPkgObject - Sub-package AST object
263
 * @returns Boolean indicating validity
264
 */
265
function isValidSubPkgObject(subPkgObject: ObjectExpression): boolean;
266

267
/**
268
 * Add new sub-package to configuration
269
 * @param node - Configuration AST node
270
 * @param page - Page path to add
271
 * @param subPackage - Sub-package name
272
 * @returns Modification state result
273
 */
274
function addNewSubPackage(
275
  node: ObjectExpression,
276
  page: string,
277
  subPackage: string
278
): ConfigModificationState;
279
```
280

281
### Page Creation Workflow
282

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

285
```typescript { .api }
286
/**
287
 * Complete page creation workflow
288
 */
289
interface PageCreationWorkflow {
290
  1: 'Parse page creation arguments';
291
  2: 'Validate project structure and configuration';
292
  3: 'Determine template source and type';
293
  4: 'Generate page files from template';
294
  5: 'Update app configuration with new page';
295
  6: 'Update sub-package configuration if needed';
296
  7: 'Execute post-creation callbacks';
297
}
298

299
/**
300
 * Page creation validation checks
301
 */
302
interface PageValidation {
303
  projectExists: boolean;
304
  configFileExists: boolean;
305
  pageNameValid: boolean;
306
  templateExists: boolean;
307
  subPackageValid?: boolean;
308
}
309
```