feat: multiplayer collaboration(Ospp 2025) by ztygod · Pull Request #1564 · opentiny/tiny-engine

ztygod · 2025-07-28T08:09:09Z

English | 简体中文

PR

PR Checklist

Please check if your PR fulfills the following requirements:

The commit message follows our Commit Message Guidelines
Tests for the changes have been added (for bug fixes / features)
Docs have been added / updated (for bug fixes / features)
Built its own designer, fully self-validated

PR Type

What kind of change does this PR introduce?

Bugfix
Feature
Code style update (formatting, local variables)
Refactoring (no functional changes, no api changes)
Build related changes
CI related changes
Documentation content changes
Other... Please describe: ospp开源之夏多人协作项目

Background and solution

搭建版本管理界面

What is the current behavior?

可以根据作者或者commit hash值索引提交记录
查看commit的具体内容
与现在版本的内容进行对比
回滚版本
从当前commit创建分支
创建新的分支或者标签

Issue Number: N/A

What is the new behavior?

同上

Does this PR introduce a breaking change?

Yes
No

Other information

Summary by CodeRabbit

New Features
- Full Version Control UI: branch & commit management, timeline, diffs, commit details, tag/branch/commit creation and revert.
- Real-time collaboration toolkit: multi-user editing, shared cursors, presence avatars, collaborative Monaco editor, drag/selection sync.
Improvements
- Canvas and toolbars surface collaboration indicators and quick Version Control access.
- Live sync for styles, props, methods, selections, node operations, and schema changes.
Documentation
- Added guides for collaborative composables and version-control usage.
Chores
- Mock server, package manifests and build configs updated to support new features.

ghost · 2025-07-28T08:09:17Z

Walkthrough

Adds a Version Control plugin and a Yjs-based multi-person collaboration stack, two collab UI packages (cursor, avatar), many Vue components/composables, domain models/services/repositories for VCS, real-time managers/operation handlers, mock-server endpoints/data, TS path aliases, and integrations across canvas, settings, layout, and toolbars.

Changes

Cohort / File(s)	Summary
Build & TS Paths `packages/build/vite-config/.../devAliasPlugin.js`, `tsconfig.app.json`	Added dev aliases and TS path mappings for multi-person-collaboration, version-control, and collab-ui packages; enabled experimental decorators and metadata.
Design Core & Layout `packages/design-core/*`, `packages/layout/src/defaultLayout.js`	Added workspace deps, re-exports for VersionControl/Cursor/Avatar, registered plugin and collabUI entries, and placed VersionControl & Avatar into layout toolbars.
Registry & Hooks `packages/register/src/constants.ts`, `packages/register/src/hooks.ts`	Added META_APP keys (VersionControl, Avatar) and HOOK_NAME.useRealtimeCollab with exported useRealtimeCollab.
Version Control Package `packages/plugins/versioncontrol/**`	New plugin package: package.json, Vite config, VersionManager, domain models (Branch/Commit/Schema), services (domain + app), repositories, strategies (merge/conflict/diff), types, utils (sha1, Memoize, formatDateTime), many Vue UI components, composables, tests, README, and base styles.
Multi‑Person Collaboration Package `packages/multi-person-collaboration/**`	New collaboration package: package.json, Vite config, README, .gitignore, composables (useYjs, useAwareness, useCollabSchema, useCollabCursor, useCollabMonaco, useCollabTree), managers (Doc/Provider/Schema), OperationHandler, NodeSchemaModel, utilities (toYjs/fromYjs/sanitize), types, config constants, and tests.
Collab UI Packages `packages/collab-ui/cursor/`, `packages/collab-ui/avatar/`	New cursor and avatar packages with metadata, entries, Vite configs, components, viewport composable, and builds.
Canvas & Component Integrations `packages/canvas/container/src/*`, `.../components/CanvasAction.vue`, `.../composables/useMultiSelect.ts`, `.../container.ts`	Integrated realtime hooks: cursor rendering, remote selection syncing, broadcasting selection updates, and invoking shared-node insert/delete/move flows.
Settings, Props, Events, Toolbars `packages/settings/*`, `packages/plugins/script/`, `packages/toolbars/collaboration/src/Main.vue`, `packages/plugins/script/src/js/method.ts`	Added useRealtimeCollab calls to sync style/props/methods/attributes, UI CSS for remote selection, and toolbar action to open VersionControl.
Mock Server & APIs `mockServer/**`	Added branch/commit mock services, seed data, /app-center/api/version routes, Yjs WebSocket server integration, and runtime deps for yjs/y-websocket.
Tests `packages//test/*`	Large suite of unit/component tests for composables, managers, components, utils, and mock-server behaviors.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant UI as VersionControl UI
  participant AppSvc as Commit/Branch AppService
  participant Repo as HTTP Repositories
  participant Domain as Domain Services
  participant Diff as SchemaDiffResolver

  User->>UI: Create commit (branchId, message, schema, type)
  UI->>AppSvc: createCommit(...)
  AppSvc->>Repo: load branch & commits
  AppSvc->>Domain: createCommit(...) -> Domain computes hash/stats
  Domain->>Diff: calculateDiff(oldSchema, newSchema)
  Diff-->>Domain: delta/stats
  Domain-->>AppSvc: Commit instance
  AppSvc->>Repo: save commit, update branch head
  AppSvc-->>UI: return created commit

sequenceDiagram
  autonumber
  participant Editor as Local Canvas/Editor
  participant Collab as useYjs/useAwareness
  participant Provider as WebSocket Provider
  participant SchemaMgr as SchemaManager / OperationHandler
  participant Peers as Remote Clients

  Editor->>Collab: init(roomId, wsUrl)
  Collab->>Provider: connect
  Provider-->>Collab: sync
  Collab->>SchemaMgr: createSchema(roomId, provider)
  Editor->>SchemaMgr: perform insert/move/delete/update
  SchemaMgr->>Provider: apply Y ops / __app_events__
  Provider-->>Peers: broadcast updates
  Peers-->>Editor: awareness updates (cursor/selection/drag)

Estimated code review effort

🎯 5 (Critical) | ⏱️ ~120+ minutes

Potential attention areas:

Merge/conflict resolution correctness and edge cases (MergeResolver, ConflictResolver).
Concurrency and initial-sync correctness in SchemaManager / OperationHandler (Yjs observers, app_events handling).
Schema diff/stats accuracy (SchemaDiffResolver, SchemaStatsCalculator).
Repository API shapes and HTTP error handling.
Large UI surface: prop/emit and v-model consistency across many components.
Tests relying on hard-coded values (ws://localhost:9090) and mock-server behavior.

Poem

我是小兔子在草间，
光标随风绕屏旋。
提交分支像胡萝卜串，
头像与游标共蹦跃。
协作上线，大家来分享。 🥕

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title "feat: multiplayer collaboration(Ospp 2025)" is directly related to the main content of the changeset. The PR introduces a comprehensive multiplayer collaboration infrastructure built on Yjs, including real-time synchronization, multi-user awareness (cursors, avatars), and a complete version control plugin system with branch/commit management. While the title uses a broad descriptor rather than listing specific components like "version control" or "real-time schema sync," it accurately reflects the primary objective of enabling collaborative editing across the TinyEngine platform.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

ghost

Actionable comments posted: 21

🔭 Outside diff range comments (1)

packages/plugins/materials/src/meta/component/src/Main.vue (1)
71-101: Type safety improved but consider fixing type incompatibilities.

The function now has proper typing, but the multiple @ts-ignore comments indicate underlying type issues.

Instead of suppressing type errors, consider fixing the root cause:
// Define a more accurate type that matches your data structure
interface MaterialComponent {
  groupId?: string
  group: string
  groupName?: string
  label?: Record<string, string>
  children: Array<{
    name?: Record<string, string>
    component: string
    snippetName?: string
    icon?: string
    hidden?: boolean
  }>
}

// Then update the function signature
const fetchComponents = (components: MaterialComponent[], name: string) => {
  // ... no need for @ts-ignore
}

♻️ Duplicate comments (1)

packages/plugins/versioncontrol/src/components/VersionCommitInfo.vue (1)

186-710: Style duplication confirmed - extract shared dialog styles.

This file contains nearly identical dialog styles to VersionDiffDialog.vue, confirming the code duplication issue. Please refer to the refactor suggestion in the previous file review to extract shared dialog styles to a common LESS file.

🧹 Nitpick comments (18)

packages/plugins/page/src/Tree.vue (1)
98-105: Consider moving TreeNode to a dedicated typings module and adding a generic for rawData

If this type will be consumed by multiple files, placing it in packages/types/tree.ts (or similar) keeps the component lean and avoids circular-dep risks.
Also, replacing rawData?: any with a generic parameter improves type-safety:
-export interface TreeNode {
+export interface TreeNode<T = unknown> {
   id: string | number
   label: string
   parentId?: string | number
   level: number
   collapsed?: boolean
-  rawData?: any
+  rawData?: T
 }
Usage inside this file remains the same (TreeNode defaults to unknown).
packages/plugins/page/src/PageTree.vue (1)
133-133: Consider error handling for the page list fetch.

The removal of await in onMounted means any errors from refreshPageList won't be caught in this context. While this might be intentional, consider if error handling is needed for the initial page list fetch.

If error handling is desired, consider wrapping the call:
 onMounted(() => {
-  refreshPageList(getAppId())
+  refreshPageList(getAppId()).catch((error) => {
+    console.error('Failed to load page list:', error)
+    // Add appropriate error notification if needed
+  })
   subscriber = subscribe({
packages/build/vite-plugin-meta-comments/src/utils.js (1)
163-177: Function name doesn't match implementation

The function name getCurrentScopeBodyAndVarId suggests it returns both body and variable ID, but it only returns the body. Consider renaming to getCurrentScopeBody or updating the implementation to also return the variable ID.

Option 1: Rename the function:
-function getCurrentScopeBodyAndVarId(path) {
+function getCurrentScopeBody(path) {
Option 2: Return both body and variable ID:
 function getCurrentScopeBodyAndVarId(path) {
   // Handle variable declarator pattern
   if (
     path.parentPath &&
     path.parentPath.isVariableDeclarator() &&
+    path.parentPath.node.id &&
+    path.parentPath.node.id.name &&
     path.parentPath.parentPath &&
     path.parentPath.parentPath.isVariableDeclaration() &&
     path.parentPath.parentPath.parent &&
     Array.isArray(path.parentPath.parentPath.parent.body)
   ) {
-    return path.parentPath.parentPath.parent.body
+    return {
+      body: path.parentPath.parentPath.parent.body,
+      varId: path.parentPath.node.id.name
+    }
   }
 
-  return null
+  return { body: null, varId: null }
 }
packages/plugins/materials/index.ts (1)
39-40: Consider adding type annotations and documentation for the new option.

The hiddenBuiltinMaterials option is a useful addition for material management. However, consider:

Adding TypeScript type annotations to specify what the array should contain (component IDs, names, etc.)

Adding JSDoc documentation to describe the expected format and behavior
-    },
-    hiddenBuiltinMaterials: []
+    },
+    /** Array of built-in material component IDs to hide from the material panel */
+    hiddenBuiltinMaterials: [] as string[]
packages/register/src/constants.ts (1)
79-81: Add trailing comma for stylistic consistency

Every other property in META_APP ends with a comma. Keeping that style reduces churn in future diffs.
   // 版本管理
-  VersionControl: 'engine.plugins.versioncontrol'
+  VersionControl: 'engine.plugins.versioncontrol',
scripts/uploadMaterials.mjs (1)
19-27: Consider using FormData API instead of manual multipart construction.

Manual multipart/form-data construction is error-prone and the fixed boundary could conflict with file content. The FormData API is more reliable and handles edge cases automatically.
-const jsonBuffer = Buffer.from(JSON.stringify(bundle))
-const boundary = '----WebKitFormBoundary7MA4YWxkTrZu0gW'
-const formHeaders = {
-  'Content-Type': `multipart/form-data; boundary=${boundary}`,
-}
-
-let body = `--${boundary}\r\n`
-body += 'Content-Disposition: form-data; name="file"; filename="bundle.json"\r\n'
-body += 'Content-Type: application/json\r\n\r\n'
-body += jsonBuffer.toString() + `\r\n--${boundary}--`
+const formData = new FormData()
+const blob = new Blob([JSON.stringify(bundle)], { type: 'application/json' })
+formData.append('file', blob, 'bundle.json')
And update the fetch call:
 fetch(backend_url, {
   method: 'POST',
-  headers: formHeaders,
-  body: body,
+  body: formData,
 })
docs/api/backend-api/material-center.md (2)
330-334: Drop the manual <a> anchor – the heading already provides an ID

GitHub-flavored Markdown automatically generates an element ID for each heading (## 物料同步接口). The explicit <a id=…> directly beneath it is redundant clutter and risks producing duplicate IDs in some renderers.
Remove the <a> tag and rely on the built-in slug.
 ## 物料同步接口
-<a id=物料同步接口> </a>
345-359: Replace bold text with proper sub-headings to satisfy markdownlint MD036

**Headers**, **路径参数**, and **Body** are flagged because bold text masquerades as headings.
Convert them to real fourth-level headings to restore semantic structure and silence the linter.
-**Headers**
+#### Headers
 …
-**路径参数**
+#### 路径参数
 …
-**Body**
+#### Body
packages/plugins/versioncontrol/src/components/VersionTagCreate.vue (2)
1-46: Well-structured modal dialog with good UX patterns!

The template implements proper modal patterns including click-outside-to-close and keyboard support. The form validation and commit selection UI are intuitive.

Consider adding aria-label attributes for better accessibility.

124-648: Consider extracting common dialog styles to reduce duplication.

The styling is comprehensive and well-organized, but there's significant duplication of dialog-related styles that appear to be shared across multiple dialog components in the version control plugin.

Consider creating a shared stylesheet for common dialog styles:
/* shared-dialog-styles.less */
.dialog-overlay {
  /* Common overlay styles */
}

.dialog-content {
  /* Common content styles */
}

.dialog-header {
  /* Common header styles */
}

/* etc... */
Then import and extend in component-specific styles:
@import './shared-dialog-styles.less';

.dialog-content {
  &.small {
    max-width: 400px;
  }
}
packages/plugins/versioncontrol/src/components/VersionHeader.vue (1)
56-122: Good Vue 3 composition API implementation with minor optimization suggestions.

The script follows Vue 3 best practices with proper computed properties for v-model bindings and clean event forwarding.

Consider this minor optimization to simplify the setup return:
  return {
-   propsBranches: props.branches,
+   propsBranches: toRef(props, 'branches'),
    modelCurrentBranch,
    modelSearchQuery,
    docsUrl,
    close,
    onBranchChange,
    onSearch,
    createTag,
    createBranch
  }
Import toRef from Vue for better reactivity handling.
docs/api/frontend-api/material-api.md (1)
116-116: Fix markdown formatting - use proper heading instead of emphasis.

The static analysis tool correctly identified that emphasis is being used where a heading should be used.
-**使用示例**
+### 使用示例
This follows markdown best practices for document structure.
packages/plugins/versioncontrol/src/Main.vue (6)
348-348: Remove unused variable

The docsUrl variable is defined but never used in the template.
-    const docsUrl = useHelp().getDocsUrl('script')
Also remove it from the return statement at line 848:
     return {
-      docsUrl,
       currentBranch,
615-617: Remove commented console.log statements

Commented debug statements should be removed from production code.
-      // console.log('切换到分支:', currentBranch.value)
-      // 这里可以实现分支切换逻辑
+      // TODO: Implement branch switching logic
710-713: Improve form validation

The validation only checks for empty tag name. Consider adding more robust validation.
     const confirmCreateTag = () => {
       if (!newTagName.value.trim()) {
-        alert('请输入标签名称')
+        showNotification('请输入标签名称', 'warning')
         return
       }
+      
+      // Validate tag name format
+      const tagNameRegex = /^[a-zA-Z0-9._-]+$/
+      if (!tagNameRegex.test(newTagName.value.trim())) {
+        showNotification('标签名称只能包含字母、数字、点、下划线和连字符', 'warning')
+        return
+      }
725-730: Remove commented console.log

Remove commented debug code.
-      // console.log('创建标签:', {
-      //   name: newTagName.value.trim(),
-      //   description: newTagDescription.value,
-      //   commit: targetHash
-      // })
841-845: Remove or implement watch logic

The watch has only commented code. Either implement the logic or remove the watch entirely.
-    // 监听选中的提交变化
-    watch(selectedCommit, (newCommit) => {
-      if (newCommit) {
-        // console.log('选中提交:', newCommit.hash.slice(0, 7), newCommit.message)
-      }
-    })
+    // Watch for selected commit changes if needed
+    // watch(selectedCommit, (newCommit) => {
+    //   // Implement logic here if needed
+    // })
1-906: Consider breaking down this large component

This component is quite large (900+ lines). Consider splitting it into smaller, more manageable components:

Extract the timeline visualization into a separate component

Extract the commits list into a separate component

Move data fetching and state management to a composable or store

This would improve maintainability and testability.

Would you like me to help create a refactored structure for this component?

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 108919d and 04bc072.

⛔ Files ignored due to path filters (5)

docs/solutions/imgs/bundle_upload.png is excluded by !**/*.png
docs/solutions/imgs/component_create_code.png is excluded by !**/*.png
packages/design-core/assets/plugin-icon-version-control.svg is excluded by !**/*.svg
packages/multi-person-collaboration/public/favicon.ico is excluded by !**/*.ico
packages/plugins/versioncontrol/assets/test.png is excluded by !**/*.png

📒 Files selected for processing (49)

.env.local (1 hunks)
docs/api/backend-api/material-center.md (1 hunks)
docs/api/frontend-api/material-api.md (7 hunks)
docs/solutions/material-sync-solution.md (3 hunks)
package.json (2 hunks)
packages/build/vite-config/src/default-config.js (1 hunks)
packages/build/vite-config/src/vite-plugins/devAliasPlugin.js (1 hunks)
packages/build/vite-plugin-meta-comments/src/transform.js (0 hunks)
packages/build/vite-plugin-meta-comments/src/utils.js (2 hunks)
packages/build/vite-plugin-meta-comments/test/expected/entry.js.output.js (4 hunks)
packages/build/vite-plugin-meta-comments/test/legacy/code/entry.js (1 hunks)
packages/build/vite-plugin-meta-comments/test/legacy/code/output.js (4 hunks)
packages/common/js/import-map.json (1 hunks)
packages/design-core/package.json (2 hunks)
packages/design-core/re-export.js (1 hunks)
packages/design-core/registry.js (2 hunks)
packages/design-core/src/preview/src/preview/Preview.vue (2 hunks)
packages/design-core/src/preview/src/preview/usePreviewData.ts (3 hunks)
packages/layout/src/defaultLayout.js (1 hunks)
packages/multi-person-collaboration/.gitignore (1 hunks)
packages/multi-person-collaboration/README.md (1 hunks)
packages/multi-person-collaboration/jsconfig.json (1 hunks)
packages/multi-person-collaboration/package.json (1 hunks)
packages/multi-person-collaboration/vite.config.js (1 hunks)
packages/plugins/materials/index.ts (1 hunks)
packages/plugins/materials/src/composable/useMaterial.ts (1 hunks)
packages/plugins/materials/src/meta/component/src/Main.vue (4 hunks)
packages/plugins/page/src/PageTree.vue (1 hunks)
packages/plugins/page/src/Tree.vue (1 hunks)
packages/plugins/state/src/CreateStore.vue (2 hunks)
packages/plugins/state/src/Main.vue (3 hunks)
packages/plugins/state/src/StateTips.vue (2 hunks)
packages/plugins/state/src/styles/vars.less (1 hunks)
packages/plugins/versioncontrol/index.ts (1 hunks)
packages/plugins/versioncontrol/meta.js (1 hunks)
packages/plugins/versioncontrol/package.json (1 hunks)
packages/plugins/versioncontrol/src/Main.vue (1 hunks)
packages/plugins/versioncontrol/src/components/VersionCommitInfo.vue (1 hunks)
packages/plugins/versioncontrol/src/components/VersionDiffDialog.vue (1 hunks)
packages/plugins/versioncontrol/src/components/VersionHeader.vue (1 hunks)
packages/plugins/versioncontrol/src/components/VersionTagCreate.vue (1 hunks)
packages/plugins/versioncontrol/src/styles/main.less (1 hunks)
packages/plugins/versioncontrol/vite.config.js (1 hunks)
packages/register/src/constants.ts (1 hunks)
packages/toolbars/save/src/js/index.ts (1 hunks)
patches/@vue__repl@2.9.0.patch (0 hunks)
patches/@vue__repl@4.6.1.patch (1 hunks)
pnpm-workspace.yaml (1 hunks)
scripts/uploadMaterials.mjs (1 hunks)

💤 Files with no reviewable changes (2)

packages/build/vite-plugin-meta-comments/src/transform.js
patches/@vue__repl@2.9.0.patch

🧰 Additional context used

🧠 Learnings (39)

📓 Common learnings

Learnt from: rhlin
PR: opentiny/tiny-engine#1011
File: packages/canvas/render/src/RenderMain.ts:82-88
Timestamp: 2025-01-14T08:50:50.226Z
Learning: For PR #1011, the focus is on resolving conflicts and migrating code, with architectural improvements deferred for future PRs.

Learnt from: gene9831
PR: opentiny/tiny-engine#1041
File: packages/plugins/datasource/src/DataSourceList.vue:138-138
Timestamp: 2025-01-14T10:06:25.508Z
Learning: PR #1041 in opentiny/tiny-engine is specifically for reverting Prettier v3 formatting to v2, without any logical code changes or syntax improvements.

packages/build/vite-config/src/vite-plugins/devAliasPlugin.js (8)

Learnt from: chilingling
PR: #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: #917
File: docs/开始/快速上手.md:31-31
Timestamp: 2024-12-14T05:53:28.501Z
Learning: The latest stable version of @opentiny/tiny-engine-cli is 2.0.0, and documentation should reference this version instead of any release candidates.

Learnt from: gene9831
PR: #1038
File: packages/plugins/block/index.js:24-24
Timestamp: 2025-01-14T08:42:18.574Z
Learning: In the tiny-engine project, breaking changes are documented in the changelog rather than in JSDoc comments or separate migration guides.

Learnt from: gene9831
PR: #1041
File: packages/plugins/datasource/src/DataSourceList.vue:138-138
Timestamp: 2025-01-14T10:06:25.508Z
Learning: PR #1041 in opentiny/tiny-engine is specifically for reverting Prettier v3 formatting to v2, without any logical code changes or syntax improvements.

Learnt from: chilingling
PR: #583
File: packages/build/vite-config/index.js:1-1
Timestamp: 2024-10-09T01:47:35.507Z
Learning: The getDefaultConfig function inside packages/build/vite-config/src/default-config.js is intended to remain and be called internally. Ensure no references to this function exist outside of this file.

Learnt from: chilingling
PR: #583
File: packages/build/vite-config/index.js:1-1
Timestamp: 2024-06-28T07:26:38.511Z
Learning: The getDefaultConfig function inside packages/build/vite-config/src/default-config.js is intended to remain and be called internally. Ensure no references to this function exist outside of this file.

Learnt from: hexqi
PR: #1501
File: mockServer/src/tool/Common.js:79-82
Timestamp: 2025-07-03T09:22:59.512Z
Learning: In the tiny-engine project, the mockServer code uses ES6 import syntax but is compiled to CommonJS output. This means CommonJS globals like __dirname are available at runtime, while ES6 module-specific features like import.meta would cause runtime errors.

Learnt from: gene9831
PR: #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 using app.component('SvgIcon', SvgIcon) in packages/svgs/index.js, making it available throughout Vue components without requiring explicit imports.

packages/common/js/import-map.json (11)

Learnt from: gene9831
PR: #1038
File: packages/plugins/block/index.js:24-24
Timestamp: 2025-01-14T08:42:18.574Z
Learning: In the tiny-engine project, breaking changes are documented in the changelog rather than in JSDoc comments or separate migration guides.

Learnt from: gene9831
PR: #917
File: docs/开始/快速上手.md:31-31
Timestamp: 2024-12-14T05:53:28.501Z
Learning: The latest stable version of @opentiny/tiny-engine-cli is 2.0.0, and documentation should reference this version instead of any release candidates.

Learnt from: gene9831
PR: #1041
File: packages/plugins/datasource/src/DataSourceList.vue:138-138
Timestamp: 2025-01-14T10:06:25.508Z
Learning: PR #1041 in opentiny/tiny-engine is specifically for reverting Prettier v3 formatting to v2, without any logical code changes or syntax improvements.

Learnt from: chilingling
PR: #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: hexqi
PR: #1501
File: mockServer/src/tool/Common.js:79-82
Timestamp: 2025-07-03T09:22:59.512Z
Learning: In the tiny-engine project, the mockServer code uses ES6 import syntax but is compiled to CommonJS output. This means CommonJS globals like __dirname are available at runtime, while ES6 module-specific features like import.meta would cause runtime errors.

Learnt from: yy-wow
PR: #940
File: packages/canvas/DesignCanvas/src/importMap.js:51-51
Timestamp: 2025-01-13T03:46:13.817Z
Learning: The getImportMapData function in packages/canvas/DesignCanvas/src/importMap.js has default parameter handling that initializes canvasDeps with empty arrays for scripts and styles, making additional null checks unnecessary.

Learnt from: rhlin
PR: #1011
File: packages/canvas/render/src/builtin/CanvasRouterView.vue:4-19
Timestamp: 2025-01-14T06:56:11.072Z
Learning: In the tiny-engine project, component implementations should maintain consistency with other components at the same level, even if modernization improvements (like TypeScript and Composition API) are possible.

Learnt from: rhlin
PR: #1011
File: packages/canvas/render/src/material-function/material-getter.ts:66-80
Timestamp: 2025-01-14T04:25:46.281Z
Learning: In the tiny-engine project, styles from block components are processed through Vite's CSS compilation pipeline, and additional style sanitization libraries should be avoided to maintain consistency with this approach.

Learnt from: gene9831
PR: #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: gene9831
PR: #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 using app.component('SvgIcon', SvgIcon) in packages/svgs/index.js, making it available throughout Vue components without requiring explicit imports.

Learnt from: gene9831
PR: #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/layout/src/defaultLayout.js (1)

Learnt from: yy-wow
PR: #850
File: packages/toolbars/preview/src/Main.vue:16-16
Timestamp: 2024-10-10T02:47:46.239Z
Learning: In packages/toolbars/preview/src/Main.vue, within the preview function, the getMergeMeta method is used at lines 64 and 65 to retrieve engine.config configurations.

packages/register/src/constants.ts (1)

Learnt from: hexqi
PR: #850
File: package.json:4-4
Timestamp: 2024-10-10T06:25:05.109Z
Learning: 当遇到与canvas包中"type": "module"相关的报错时，可以通过将canvas包中的.eslintrc文件改为.cjs后缀来解决，而无需在根目录的package.json中添加"type": "module"。

packages/plugins/materials/index.ts (7)

Learnt from: rhlin
PR: #1011
File: packages/canvas/render/src/material-function/support-collection.ts:3-15
Timestamp: 2025-01-14T06:59:02.999Z
Learning: The code in packages/canvas/render/src/material-function/support-collection.ts is migrated code that should not be modified at this time to maintain stability during the migration process.

Learnt from: yy-wow
PR: #940
File: packages/canvas/DesignCanvas/src/importMap.js:51-51
Timestamp: 2025-01-13T03:46:13.817Z
Learning: The getImportMapData function in packages/canvas/DesignCanvas/src/importMap.js has default parameter handling that initializes canvasDeps with empty arrays for scripts and styles, making additional null checks unnecessary.

Learnt from: rhlin
PR: #1011
File: packages/canvas/render/src/builtin/builtin.json:157-223
Timestamp: 2025-01-14T04:20:02.367Z
Learning: The builtin.json configuration should strictly follow the existing protocol and rules without introducing new fields or properties.

Learnt from: chilingling
PR: #817
File: packages/vue-generator/src/plugins/appendElePlusStylePlugin.js:32-44
Timestamp: 2024-10-09T01:47:35.507Z
Learning: In appendElePlusStylePlugin.js, it's acceptable to silently return when the user's material doesn't have element-plus dependencies.

Learnt from: chilingling
PR: #817
File: packages/vue-generator/src/plugins/appendElePlusStylePlugin.js:32-44
Timestamp: 2024-09-25T11:13:34.258Z
Learning: In appendElePlusStylePlugin.js, it's acceptable to silently return when the user's material doesn't have element-plus dependencies.

Learnt from: rhlin
PR: #1011
File: packages/canvas/render/src/material-function/material-getter.ts:66-80
Timestamp: 2025-01-14T04:25:46.281Z
Learning: In the tiny-engine project, styles from block components are processed through Vite's CSS compilation pipeline, and additional style sanitization libraries should be avoided to maintain consistency with this approach.

Learnt from: rhlin
PR: #1011
File: packages/canvas/render/src/builtin/builtin.json:645-850
Timestamp: 2025-01-14T04:22:02.404Z
Learning: In TinyEngine, components must use inline styles instead of CSS classes because components cannot carry class styles when dragged into the canvas.

packages/multi-person-collaboration/jsconfig.json (2)

Learnt from: rhlin
PR: #1011
File: packages/canvas/render/src/material-function/configure.ts:1-4
Timestamp: 2025-01-14T06:52:56.236Z
Learning: In the configure.ts module, type definitions were intentionally kept as Record<string, any> during the initial refactoring to separate files. Type definitions will be added in a follow-up task after thorough analysis of the configuration structure.

Learnt from: hexqi
PR: #850
File: package.json:4-4
Timestamp: 2024-10-10T06:25:05.109Z
Learning: 当遇到与canvas包中"type": "module"相关的报错时，可以通过将canvas包中的.eslintrc文件改为.cjs后缀来解决，而无需在根目录的package.json中添加"type": "module"。

packages/plugins/versioncontrol/index.ts (7)

Learnt from: rhlin
PR: #1011
File: packages/canvas/render/src/application-function/global-state.ts:12-25
Timestamp: 2025-01-14T08:45:57.032Z
Learning: The code in packages/canvas/render/src/application-function/global-state.ts is migrated from an existing codebase and should be handled with care when making modifications.

Learnt from: chilingling
PR: #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: hexqi
PR: #1501
File: mockServer/src/tool/Common.js:79-82
Timestamp: 2025-07-03T09:22:59.512Z
Learning: In the tiny-engine project, the mockServer code uses ES6 import syntax but is compiled to CommonJS output. This means CommonJS globals like __dirname are available at runtime, while ES6 module-specific features like import.meta would cause runtime errors.

Learnt from: yy-wow
PR: #850
File: packages/toolbars/preview/src/Main.vue:16-16
Timestamp: 2024-10-10T02:47:46.239Z
Learning: In packages/toolbars/preview/src/Main.vue, within the preview function, the getMergeMeta method is used at lines 64 and 65 to retrieve engine.config configurations.

Learnt from: gene9831
PR: #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: gene9831
PR: #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 using app.component('SvgIcon', SvgIcon) in packages/svgs/index.js, making it available throughout Vue components without requiring explicit imports.

Learnt from: rhlin
PR: #1011
File: packages/canvas/render/src/material-function/material-getter.ts:66-80
Timestamp: 2025-01-14T04:25:46.281Z
Learning: In the tiny-engine project, styles from block components are processed through Vite's CSS compilation pipeline, and additional style sanitization libraries should be avoided to maintain consistency with this approach.

packages/plugins/page/src/Tree.vue (1)

Learnt from: gene9831
PR: #1011
File: packages/plugins/page/src/PageTree.vue:340-345
Timestamp: 2025-01-14T08:37:01.393Z
Learning: The code in PageTree.vue is based on template code copied from elsewhere and will be refactored later, so suggestions for improvements should be deferred until that refactoring occurs.

packages/design-core/re-export.js (9)