Move plugin type definitions from core to plugin packages

Copilot · huangyiirene · Copilot · commit d1fe645964e3 · 2026-01-14T14:18:52.000Z
This addresses the architectural concern that plugin types should be owned by the plugin packages themselves, not the core platform. This allows third-party developers to create plugins without modifying core packages.

Changes:
- Removed packages/types/src/plugin.ts (no longer needed)
- Reverted packages/types/src/index.ts to remove plugin type exports
- Added packages/plugin-editor/src/types.ts with CodeEditorSchema
- Added packages/plugin-charts/src/types.ts with BarChartSchema
- Updated plugin packages to export their types via index.tsx
- Added @object-ui/types as dependency for plugins (for BaseSchema)
- Updated documentation to explain plugin-owned types pattern

Co-authored-by: huangyiirene &lt;7665279+huangyiirene@users.noreply.github.com&gt;
diff --git a/docs/lazy-loaded-plugins.md b/docs/lazy-loaded-plugins.md
@@ -80,7 +80,32 @@ export const editorComponents = {
 };
 ```
 
-### 3. Build Configuration (`vite.config.ts`)
+### 3. Type Definitions (`types.ts`)
+```typescript
+// packages/plugin-editor/src/types.ts
+import type { BaseSchema } from '@object-ui/types';
+
+/**
+ * Code Editor component schema.
+ * These types are self-contained within the plugin package.
+ */
+export interface CodeEditorSchema extends BaseSchema {
+  type: 'code-editor';
+  value?: string;
+  language?: string;
+  theme?: 'vs-dark' | 'light';
+  height?: string;
+  readOnly?: boolean;
+  onChange?: (value: string | undefined) => void;
+}
+```
+
+**Key Points:**
+- Plugin types are defined in the plugin package, not in `@object-ui/types`
+- This allows third-party developers to create plugins without modifying core packages
+- Types are exported from the plugin's main entry point for consumers to use
+
+### 4. Build Configuration (`vite.config.ts`)
 ```typescript
 export default defineConfig({
   build: {
@@ -96,6 +121,52 @@ export default defineConfig({
 });
 ```
 
+## Type System Design
+
+### Plugin-Owned Types (✅ Recommended)
+
+Each plugin package owns its type definitions:
+
+```typescript
+// In @object-ui/plugin-editor
+export interface CodeEditorSchema extends BaseSchema {
+  type: 'code-editor';
+  // ... plugin-specific properties
+}
+```
+
+**Benefits:**
+- **Decoupling**: Third-party developers don't need to modify core packages
+- **Independent Versioning**: Plugins can evolve their schemas independently
+- **Self-Contained**: Each plugin is a complete, standalone package
+
+**Usage:**
+```typescript
+// Application code
+import type { CodeEditorSchema } from '@object-ui/plugin-editor';
+import type { BarChartSchema } from '@object-ui/plugin-charts';
+
+const editor: CodeEditorSchema = { type: 'code-editor', value: '...' };
+const chart: BarChartSchema = { type: 'chart-bar', data: [...] };
+```
+
+### Platform-Owned Types (❌ Not Recommended for Plugins)
+
+Defining plugin types in `@object-ui/types` creates tight coupling:
+
+```typescript
+// In @object-ui/types (DON'T DO THIS for plugins)
+export interface CodeEditorSchema extends BaseSchema {
+  type: 'code-editor';
+  // ...
+}
+```
+
+**Problems:**
+- Third-party developers must submit PRs to core package
+- Creates version coupling between plugins and platform
+- Violates the plugin architecture principle
+
 ## Bundle Analysis
 
 ### Plugin-Editor Build Output
diff --git a/packages/plugin-charts/README.md b/packages/plugin-charts/README.md
@@ -49,6 +49,25 @@ Object.entries(chartComponents).forEach(([type, component]) => {
 });
 ```
 
+### TypeScript Support
+
+The plugin exports TypeScript types for full type safety:
+
+```typescript
+import type { BarChartSchema } from '@object-ui/plugin-charts';
+
+const schema: BarChartSchema = {
+  type: 'chart-bar',
+  data: [
+    { name: 'Jan', value: 400 },
+    { name: 'Feb', value: 300 }
+  ],
+  dataKey: 'value',
+  xAxisKey: 'name',
+  height: 400
+};
+```
+
 ## Schema API
 
 ```typescript
diff --git a/packages/plugin-charts/package.json b/packages/plugin-charts/package.json
@@ -21,7 +21,8 @@
     "recharts": "^3.6.0",
     "@object-ui/components": "workspace:*",
     "@object-ui/core": "workspace:*",
-    "@object-ui/react": "workspace:*"
+    "@object-ui/react": "workspace:*",
+    "@object-ui/types": "workspace:*"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
diff --git a/packages/plugin-charts/src/index.tsx b/packages/plugin-charts/src/index.tsx
@@ -2,6 +2,9 @@ import React, { Suspense } from 'react';
 import { ComponentRegistry } from '@object-ui/core';
 import { Skeleton } from '@object-ui/components';
 
+// Export types for external use
+export type { BarChartSchema } from './types';
+
 // 🚀 Lazy load the implementation file
 // This ensures Recharts is only loaded when the component is actually rendered
 const LazyChart = React.lazy(() => import('./ChartImpl'));
diff --git a/packages/plugin-charts/src/types.ts b/packages/plugin-charts/src/types.ts
@@ -0,0 +1,60 @@
+/**
+ * TypeScript type definitions for @object-ui/plugin-charts
+ * 
+ * These types can be imported by applications using this plugin
+ * to get full TypeScript support for chart schemas.
+ */
+
+import type { BaseSchema } from '@object-ui/types';
+
+/**
+ * Bar Chart component schema.
+ * Renders a bar chart using Recharts library.
+ * 
+ * @example
+ * ```typescript
+ * import type { BarChartSchema } from '@object-ui/plugin-charts';
+ * 
+ * const chartSchema: BarChartSchema = {
+ *   type: 'chart-bar',
+ *   data: [
+ *     { name: 'Jan', value: 400 },
+ *     { name: 'Feb', value: 300 }
+ *   ],
+ *   dataKey: 'value',
+ *   xAxisKey: 'name'
+ * }
+ * ```
+ */
+export interface BarChartSchema extends BaseSchema {
+  type: 'chart-bar';
+  
+  /**
+   * Array of data points to display in the chart.
+   */
+  data?: Array<Record<string, any>>;
+  
+  /**
+   * Key in the data object for the Y-axis values.
+   * @default 'value'
+   */
+  dataKey?: string;
+  
+  /**
+   * Key in the data object for the X-axis labels.
+   * @default 'name'
+   */
+  xAxisKey?: string;
+  
+  /**
+   * Height of the chart in pixels.
+   * @default 400
+   */
+  height?: number;
+  
+  /**
+   * Color of the bars.
+   * @default '#8884d8'
+   */
+  color?: string;
+}
diff --git a/packages/plugin-editor/README.md b/packages/plugin-editor/README.md
@@ -45,6 +45,22 @@ Object.entries(editorComponents).forEach(([type, component]) => {
 });
 ```
 
+### TypeScript Support
+
+The plugin exports TypeScript types for full type safety:
+
+```typescript
+import type { CodeEditorSchema } from '@object-ui/plugin-editor';
+
+const schema: CodeEditorSchema = {
+  type: 'code-editor',
+  value: 'console.log("Hello, World!");',
+  language: 'javascript',
+  theme: 'vs-dark',
+  height: '400px'
+};
+```
+
 ## Schema API
 
 ```typescript
diff --git a/packages/plugin-editor/package.json b/packages/plugin-editor/package.json
@@ -21,7 +21,8 @@
     "@monaco-editor/react": "^4.6.0",
     "@object-ui/components": "workspace:*",
     "@object-ui/core": "workspace:*",
-    "@object-ui/react": "workspace:*"
+    "@object-ui/react": "workspace:*",
+    "@object-ui/types": "workspace:*"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
diff --git a/packages/plugin-editor/src/index.tsx b/packages/plugin-editor/src/index.tsx
@@ -2,6 +2,9 @@ import React, { Suspense } from 'react';
 import { ComponentRegistry } from '@object-ui/core';
 import { Skeleton } from '@object-ui/components';
 
+// Export types for external use
+export type { CodeEditorSchema } from './types';
+
 // 🚀 Lazy load the implementation file
 // This ensures Monaco Editor is only loaded when the component is actually rendered
 const LazyMonacoEditor = React.lazy(() => import('./MonacoImpl'));
diff --git a/packages/plugin-editor/src/types.ts b/packages/plugin-editor/src/types.ts
@@ -0,0 +1,63 @@
+/**
+ * TypeScript type definitions for @object-ui/plugin-editor
+ * 
+ * These types can be imported by applications using this plugin
+ * to get full TypeScript support for code-editor schemas.
+ */
+
+import type { BaseSchema } from '@object-ui/types';
+
+/**
+ * Code Editor component schema.
+ * Renders a Monaco-based code editor with syntax highlighting.
+ * 
+ * @example
+ * ```typescript
+ * import type { CodeEditorSchema } from '@object-ui/plugin-editor';
+ * 
+ * const editorSchema: CodeEditorSchema = {
+ *   type: 'code-editor',
+ *   value: 'console.log("Hello, World!");',
+ *   language: 'javascript',
+ *   theme: 'vs-dark',
+ *   height: '400px'
+ * }
+ * ```
+ */
+export interface CodeEditorSchema extends BaseSchema {
+  type: 'code-editor';
+  
+  /**
+   * The code content to display in the editor.
+   */
+  value?: string;
+  
+  /**
+   * Programming language for syntax highlighting.
+   * @default 'javascript'
+   */
+  language?: 'javascript' | 'typescript' | 'python' | 'json' | 'html' | 'css' | 'markdown' | string;
+  
+  /**
+   * Color theme for the editor.
+   * @default 'vs-dark'
+   */
+  theme?: 'vs-dark' | 'light';
+  
+  /**
+   * Height of the editor.
+   * @default '400px'
+   */
+  height?: string;
+  
+  /**
+   * Whether the editor is read-only.
+   * @default false
+   */
+  readOnly?: boolean;
+  
+  /**
+   * Callback when the code content changes.
+   */
+  onChange?: (value: string | undefined) => void;
+}
diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
@@ -215,14 +215,6 @@ export type {
   APIError,
 } from './data';
 
-// ============================================================================
-// Plugin Components - Lazy-Loaded Heavy Components
-// ============================================================================
-export type {
-  CodeEditorSchema,
-  BarChartSchema,
-} from './plugin';
-
 // ============================================================================
 // Union Types - Discriminated Unions for All Schemas
 // ============================================================================
@@ -236,7 +228,6 @@ import type { DisclosureSchema } from './disclosure';
 import type { OverlaySchema } from './overlay';
 import type { NavigationSchema } from './navigation';
 import type { ComplexSchema } from './complex';
-import type { CodeEditorSchema, BarChartSchema } from './plugin';
 
 /**
  * Union of all component schemas.
@@ -251,9 +242,7 @@ export type AnySchema =
   | DisclosureSchema
   | OverlaySchema
   | NavigationSchema
-  | ComplexSchema
-  | CodeEditorSchema
-  | BarChartSchema;
+  | ComplexSchema;
 
 /**
  * Utility type to extract the schema type from a type string.
diff --git a/packages/types/src/plugin.ts b/packages/types/src/plugin.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
