packages/vue-generator/test/testcases/generator/expected/appdemo01/src/views/testCanvasRowCol.vue (1)

49-54: Event handler correctly mutates nested reactive state; optional ergonomic tweak.

Current pattern with wrap(function handleElementClick...) and this.state... matches existing generator conventions—keep it. Optionally, if we later favor closure style over this, we could switch to an arrow fn using the captured state.

-const handleElementClick = wrap(function handleElementClick(elementId) {
-  this.state.uiState.selectedElement = elementId
-})
+const handleElementClick = wrap(function handleElementClick(elementId) {
+  // keep "this" style to align with current wrap semantics
+  this.state.uiState.selectedElement = elementId
+})

packages/vue-generator/test/testcases/generator/expected/appdemo01/src/views/createVm.vue (1)

58-58: Solid v-model migration to centralized nested state; add keys for v-for and minor UX polish.

• The two-way bindings mapped into state.formData, state.inputValues, and state.selectValues look consistent and testable.
• In the “数据盘” repeater, add a stable :key to avoid Vue warnings and improve patch efficiency. You can also iterate with (disk, idx) for clarity.

-          <div v-for="() in state.dataDisk" style="margin-top: 12px; display: flex">
+          <div v-for="(disk, idx) in state.dataDisk" :key="idx" style="margin-top: 12px; display: flex">

• Import aliases ButtonGroup as TinyButtonGroup, Button as TinyButton align with the 3.24.0 API and the rest of this PR’s expected outputs—good.

Also applies to: 92-92, 105-105, 116-116, 124-126, 217-217, 226-226, 267-267, 273-277, 299-299, 305-309, 312-312, 351-355, 399-401, 416-433

packages/vue-generator/test/testcases/lifecycle/mockData.js (2)

16-18: Unify component version declarations with fixtures (optional).

Schemas still declare '^3.10.0' while the expected fixture pins 3.24.0. Aligning these to '^3.24.0' keeps version intent coherent across tests and reduces cognitive overhead.

-      version: '^3.10.0',
+      version: '^3.24.0',

Apply to all componentsMap entries in this file.

Also applies to: 89-91, 177-186

---

166-260: Great coverage: mixed lifecycle + data-binding schema. Add a test to exercise it.

mixedLifecycleSchema is a useful scenario (child prop-level lifecycle + binding). It isn’t currently exercised by tests; consider adding/adjusting a spec to validate its transformation (no prop-bound onMounted=, presence of script-level vue.onMounted, and emitted method calls like focusInput()).

I can provide a test diff (see lifecycle.test.js comment) to wire this in.

packages/vue-generator/test/testcases/generator/expected/appdemo01/src/views/LifeCyclePage.vue (2)

89-93: Fix onUpdated log to reference existing state

this.state.loginCount doesn’t exist; logs will show undefined. Prefer logging relevant metrics.

Apply this diff:

-vue.onUpdated(
-  wrap(function onUpdated() {
-    console.log('页面已更新', this.state.loginCount)
-  })
-)
+vue.onUpdated(
+  wrap(function onUpdated() {
+    console.log('页面已更新', {
+      activeUsers: this.state.activeUsers,
+      systemLoad: this.state.systemLoad
+    })
+  })
+)

---

18-21: Drop macro imports and unused destructure for leaner SFC

• In <script setup>, defineProps/defineEmits are compile-time macros; importing them is unnecessary and can confuse tooling.
• t is destructured but not used.

Apply this diff:

 import { Button as TinyButton, Card as TinyCard } from '@opentiny/vue'
 import * as vue from 'vue'
-import { defineProps, defineEmits } from 'vue'
 import { I18nInjectionKey } from 'vue-i18n'
@@
-const { t, lowcodeWrap, stores } = vue.inject(I18nInjectionKey).lowcode()
+const { lowcodeWrap, stores } = vue.inject(I18nInjectionKey).lowcode()

Also applies to: 26-26

packages/vue-generator/test/testcases/generator/mockData.js (3)

1087-1091: Consistent conversion to JSExpression + model for v-model sources

All updated bindings now point to the new nested paths (state.formData/, state.inputValues/, state.selectValues/*). This should produce correct v-model generation.

Small follow-up:

• Ensure default values match component expectations (numbers vs strings) to avoid implicit coercion when two-way binding. If Tiny components expect string values, the current string defaults are fine.

Also applies to: 1140-1144, 1182-1186, 1220-1224, 1259-1264, 1470-1473, 1492-1496, 1576-1579, 1600-1603, 1661-1664, 1685-1688, 1706-1709, 1822-1825

---

1252-1252: UI nit: width increased to 120px

The label width bump is fine; consider checking adjacent labels for alignment to avoid misaligned baselines in tight layouts.

---

2539-2545: Verify component map versions for @opentiny/vue

Most entries are pinned to 3.24.0, while TinyCard uses ^3.10.0. That resolves to 3.24.0 and won’t conflict, but aligning versions can prevent duplicate installs in other contexts.

If you want to harmonize:

-      version: '^3.10.0',
+      version: '3.24.0',

Also applies to: 2611-2617

packages/vue-generator/test/testcases/data-binding/edge-case.test.js (2)

71-79: Gate debug artifact writes behind an env switch

Avoid polluting the repo during CI and local runs by making writes opt-in.

Apply this diff:

-    const outputDir = path.resolve(__dirname, './result/edge-case')
-    fs.mkdirSync(outputDir, { recursive: true })
-
-    for (const { fileName, fileContent } of genResult) {
-      if (fileName.endsWith('.vue')) {
-        fs.writeFileSync(path.join(outputDir, fileName), fileContent)
-      }
-    }
+    if (process.env.WRITE_GEN_FIXTURES === '1') {
+      const outputDir = path.resolve(__dirname, './result/edge-case')
+      fs.mkdirSync(outputDir, { recursive: true })
+      for (const { fileName, fileContent } of genResult) {
+        if (fileName.endsWith('.vue')) {
+          fs.writeFileSync(path.join(outputDir, fileName), fileContent)
+        }
+      }
+    }

---

1-6: Make __dirname robust for ESM runners

Vitest often runs tests as ESM; in that case __dirname may be undefined. Provide a fallback via import.meta.url.

If your repo uses "type": "module", apply:

 import { expect, test, describe } from 'vitest'
 import path from 'path'
 import fs from 'fs'
+import { fileURLToPath } from 'url'
@@
-    const outputDir = path.resolve(__dirname, './result/edge-case')
+    const __filename = typeof __filename !== 'undefined' ? __filename : fileURLToPath(import.meta.url)
+    const __dirnameSafe = typeof __dirname !== 'undefined' ? __dirname : path.dirname(__filename)
+    const outputDir = path.resolve(__dirnameSafe, './result/edge-case')

Alternatively, confirm you’re running in CJS; if so, you can skip this change.

Also applies to: 71-73

packages/vue-generator/test/testcases/data-binding/basic.test.js (2)

60-69: Tighten the v-model regex to avoid matching modifiers/arguments

Current /v-model[^=]*="..."/ may match v-model:foo or v-model.trim. If you intend only default bindings, restrict it.

Apply this diff:

-    const vModelMatches = content.match(/v-model[^=]*="[^"]+"/g) || []
+    const vModelMatches = content.match(/(?<!:)v-model="[^"]+"/g) || []

---

40-49: Gate debug artifact writes behind an env switch (consistency with other tests)

Prevents stray files in CI/local runs; keeps behavior consistent with edge-case test suggestion.

Apply this diff:

-    const outputDir = path.resolve(__dirname, './result/basic')
-    fs.mkdirSync(outputDir, { recursive: true })
-
-    for (const { fileName, fileContent } of genResult) {
-      if (fileName.endsWith('.vue')) {
-        fs.writeFileSync(path.join(outputDir, fileName), fileContent)
-      }
-    }
+    if (process.env.WRITE_GEN_FIXTURES === '1') {
+      const outputDir = path.resolve(__dirname, './result/basic')
+      fs.mkdirSync(outputDir, { recursive: true })
+      for (const { fileName, fileContent } of genResult) {
+        if (fileName.endsWith('.vue')) {
+          fs.writeFileSync(path.join(outputDir, fileName), fileContent)
+        }
+      }
+    }

packages/vue-generator/test/testcases/data-binding/mockData.js (3)

282-286: Avoid empty JSExpression for modelValue in edge-case

An empty JSExpression can lead to invalid v-model like v-model="" if the transformer doesn’t guard for it. Make the intent explicit: static empty value without data-binding.

-            modelValue: {
-              type: 'JSExpression',
-              value: '' // 空字段
-            }
+            // 静态空值，无数据绑定
+            modelValue: ''

Alternatively, if you want to keep JSExpression form while ensuring it won't become v-model:

-            modelValue: {
-              type: 'JSExpression',
-              value: ''
-            }
+            modelValue: {
+              type: 'JSExpression',
+              value: "''",
+              model: false
+            }

---

361-372: Confirm tag expectation: schema uses

, tests assert

The schema’s root is componentName: 'form', yet form.test.js asserts <div class="complex-form">. Unless the generator normalizes form to div, this will fail.

Prefer adjusting the test to accept either <form> or <div> with the same class. See suggested test change in form.test.js comment.

If you intended a <div>, switch componentName to 'div' here to match the test.

---

11-26: Deduplicate componentsMap declarations

The component entries (package, version, destructuring) are repeated across schemas. Centralizing them reduces drift when versions change.

Consider exporting shared factories, e.g.,

• makeTinyInput(), makeTinySelect(), makeTinyCheckbox(), makeTinySwitch(), makeTinyRadio()
• or a const base = { package: '@opentiny/vue', version: '^3.10.0', destructuring: true }

Then spread and override componentName/exportName per schema.

Also applies to: 97-126, 336-358

packages/vue-generator/test/testcases/data-binding/advanced.test.js (4)

52-54: Harden file lookup and guard against undefined

Use endsWith to avoid path prefix mismatches and assert existence before dereferencing.

-    const vueFile = genResult.find((file) => file.fileName === 'AdvancedFormPage.vue')
-    const content = vueFile.fileContent
+    const vueFile = genResult.find((file) => file.fileName?.endsWith('AdvancedFormPage.vue'))
+    expect(vueFile).toBeDefined()
+    const content = vueFile.fileContent

---

74-76: Repeat the guard for subsequent tests

Avoid potential Cannot read properties of undefined if generation shape changes.

-    const vueFile = genResult.find((file) => file.fileName === 'AdvancedFormPage.vue')
-    const content = vueFile.fileContent
+    const vueFile = genResult.find((file) => file.fileName?.endsWith('AdvancedFormPage.vue'))
+    expect(vueFile).toBeDefined()
+    const content = vueFile.fileContent

---

92-94: Repeat the guard for the radio group test

Same robustness improvement as above.

-    const vueFile = genResult.find((file) => file.fileName === 'AdvancedFormPage.vue')
-    const content = vueFile.fileContent
+    const vueFile = genResult.find((file) => file.fileName?.endsWith('AdvancedFormPage.vue'))
+    expect(vueFile).toBeDefined()
+    const content = vueFile.fileContent

---

47-67: Optional: generate once per suite to speed up tests

You regenerate for each test. Caching genResult in beforeAll reduces runtime and IO. Keep a test that ensures idempotency if needed.

I can provide a consolidated pattern if you’d like.

packages/vue-generator/test/testcases/data-binding/form.test.js (8)

50-52: Harden file lookup and guard against undefined (test 2)

Consistent with advanced tests: avoid brittle equality and assert existence.

-    const vueFile = genResult.find((file) => file.fileName === 'ComplexFormPage.vue')
+    const vueFile = genResult.find((file) => file.fileName?.endsWith('ComplexFormPage.vue'))
+    expect(vueFile).toBeDefined()
     const content = vueFile.fileContent

---

68-70: Harden file lookup and guard against undefined (test 3)

-    const vueFile = genResult.find((file) => file.fileName === 'ComplexFormPage.vue')
+    const vueFile = genResult.find((file) => file.fileName?.endsWith('ComplexFormPage.vue'))
+    expect(vueFile).toBeDefined()
     const content = vueFile.fileContent

---

85-87: Harden file lookup and guard against undefined (test 4)

-    const vueFile = genResult.find((file) => file.fileName === 'ComplexFormPage.vue')
+    const vueFile = genResult.find((file) => file.fileName?.endsWith('ComplexFormPage.vue'))
+    expect(vueFile).toBeDefined()
     const content = vueFile.fileContent

---

102-104: Harden file lookup and guard against undefined (test 5)

-    const vueFile = genResult.find((file) => file.fileName === 'ComplexFormPage.vue')
+    const vueFile = genResult.find((file) => file.fileName?.endsWith('ComplexFormPage.vue'))
+    expect(vueFile).toBeDefined()
     const content = vueFile.fileContent

---

129-131: Harden file lookup and guard against undefined (test 6)

-    const vueFile = genResult.find((file) => file.fileName === 'ComplexFormPage.vue')
+    const vueFile = genResult.find((file) => file.fileName?.endsWith('ComplexFormPage.vue'))
+    expect(vueFile).toBeDefined()
     const content = vueFile.fileContent

---

133-135: Relax import assertion to tolerate formatting

Use a regex for spacing/line-break variations in the import list.

-    expect(content).toContain(
-      "import { Input as TinyInput, Select as TinySelect, Checkbox as TinyCheckbox } from '@opentiny/vue'"
-    )
+    const importRegex =
+      /import\s*{\s*Input\s+as\s+TinyInput\s*,\s*Select\s+as\s+TinySelect\s*,\s*Checkbox\s+as\s+TinyCheckbox\s*}\s*from\s*['"]@opentiny\/vue['"]/
+    expect(content).toMatch(importRegex)

---

113-121: Optional: gate artifact export behind an env flag

Writing files during tests can slow CI and create noisy artifacts locally. Make it opt-in.

-    // 写入测试结果
-    const outputDir = path.resolve(__dirname, './result/complex-form')
-    fs.mkdirSync(outputDir, { recursive: true })
-
-    for (const { fileName, fileContent } of genResult) {
-      if (fileName.endsWith('.vue')) {
-        fs.writeFileSync(path.join(outputDir, fileName), fileContent)
-      }
-    }
+    // 写入测试结果（可选：设置 EXPORT_GEN=1 启用）
+    if (process.env.EXPORT_GEN) {
+      const outputDir = path.resolve(__dirname, './result/complex-form')
+      fs.mkdirSync(outputDir, { recursive: true })
+      for (const { fileName, fileContent } of genResult) {
+        if (fileName.endsWith('.vue')) {
+          fs.writeFileSync(path.join(outputDir, fileName), fileContent)
+        }
+      }
+    }

---

7-12: Generate once per suite to reduce overhead

You can move generateApp() + generate(schema) to beforeAll and share genResult across tests; current repeated generation is unnecessary here.

I can provide a refactor sketch if you want to proceed.

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

Learnt from: chilingling
PR: opentiny/tiny-engine#837
File: packages/vue-generator/src/plugins/genDependenciesPlugin.js:66-66
Timestamp: 2024-09-30T07:51:10.036Z
Learning: In the `tiny-engine` project, `opentiny/tiny-engine-dsl-vue` refers to the current package itself, and importing types from it may cause circular dependencies.

Learnt from: gene9831
PR: opentiny/tiny-engine#1011
File: packages/configurator/src/router-select-configurator/RouterSelectConfigurator.vue:63-73
Timestamp: 2025-01-14T06:49:00.797Z
Learning: In the tiny-engine project, the SvgIcon component is globally registered and available throughout Vue components without requiring explicit imports.

Learnt from: rhlin
PR: opentiny/tiny-engine#1011
File: packages/vue-generator/src/plugins/genRouterPlugin.js:122-125
Timestamp: 2025-01-14T11:09:32.013Z
Learning: The router configuration in Vue Generator should maintain the current structure without a catch-all route for 404 handling or modification to the root path prefix, as these are not required at this time.

Learnt from: gene9831
PR: opentiny/tiny-engine#1117
File: packages/canvas/container/src/components/CanvasViewerSwitcher.vue:96-117
Timestamp: 2025-02-17T12:11:22.718Z
Learning: In CanvasViewerSwitcher.vue, `state.usedHoverState.element` is guaranteed to have a value when `handleClick` is called, making additional error handling unnecessary.

Learnt from: gene9831
PR: opentiny/tiny-engine#1233
File: packages/canvas/container/src/components/CanvasDivider.vue:184-185
Timestamp: 2025-03-20T07:20:12.221Z
Learning: In CanvasDivider.vue, even though state.verLeft and state.horizontalTop already include 'px' suffix, the CSS properties in state.dividerStyle still need to append 'px' again according to gene9831, suggesting that these state variables might be processed differently than expected when used in style binding.

Learnt from: gene9831
PR: opentiny/tiny-engine#1011
File: packages/configurator/src/router-select-configurator/RouterSelectConfigurator.vue:95-98
Timestamp: 2025-01-14T06:55:59.692Z
Learning: The tiny-select component from opentiny/vue library ensures selected options are valid internally, requiring no additional validation in the change handler.

packages/vue-generator/test/testcases/generator/expected/appdemo01/src/views/testCanvasRowCol.vue (1)

43-46: Nested reactive state shape is clear and future-proof.

The canvasConfig and uiState split makes downstream bindings straightforward. Initializing selectedElement as null is appropriate for tri-state logic (unset vs. selected).

packages/vue-generator/test/testcases/lifecycle/lifecycle.test.js (1)

63-65: This expectation assumes an error identifier is present; ensure schema fix or relax assertion.

Once mockData.js is fixed to declare the error parameter, these assertions are fine. If not, consider loosening to only assert the hook registration and handler names.

-    expect(content).toContain('handleError(error)')
-    expect(content).toContain('reportError(error)')
+    expect(content).toMatch(/handleError\s*\(/)
+    expect(content).toMatch(/reportError\s*\(/)

packages/vue-generator/test/testcases/generator/expected/appdemo01/src/router/index.js (1)

31-36: Route wiring and component existence verified—Approved

The LifeCyclePage.vue component is present in packages/vue-generator/test/testcases/generator/expected/appdemo01/src/views, and its use of <script setup> is valid in Vue 3 (no export default required). The router entry in packages/vue-generator/test/testcases/generator/expected/appdemo01/src/router/index.js lines 31–36 correctly references this component by name, path, and import.

Files to confirm:

• packages/vue-generator/test/testcases/generator/expected/appdemo01/src/router/index.js (lines 31–36)
• packages/vue-generator/test/testcases/generator/expected/appdemo01/src/views/LifeCyclePage.vue

Route wiring for lifecycle page looks correct

• Name/path/component align with the new view and keep the existing router shape (no catch-all, no root prefix changes), consistent with project learnings.

packages/vue-generator/test/testcases/generator/mockData.js (1)

911-941: Good shift to centralized, nested reactive state for bindings

Using formData/inputValues/selectValues clarifies ownership of fields and simplifies v-model wiring in generated pages.

packages/vue-generator/test/testcases/data-binding/advanced.test.js (1)

48-60: Alias '@' Mapping Verified
The resolve.alias block in packages/vue-generator/vite.config.js already maps '@' to ./src (lines 24–28), ensuring imports like @/generator/generateApp resolve correctly in Vitest. No further changes are needed.