@motiadev/workbench 0.8.2-beta.140-628177 → 0.8.2-beta.140-111855

package/motia-plugin/__tests__/validator.test.ts

@@ -0,0 +1,71 @@
+import { validatePlugins } from '../validator'
+
+describe('Validator', () => {
+  describe('validatePlugins', () => {
+    it('should validate array of valid plugins', () => {
+      const plugins = [
+        { packageName: '@test/plugin-1', label: 'Plugin 1' },
+        { packageName: '@test/plugin-2', label: 'Plugin 2' },
+      ]
+      const result = validatePlugins(plugins)
+
+      expect(result.valid).toBe(true)
+      expect(result.errors).toHaveLength(0)
+    })
+
+    it('should reject non-array input', () => {
+      const result = validatePlugins('not-an-array' as any)
+
+      expect(result.valid).toBe(false)
+      expect(result.errors.some((err) => err.includes('array'))).toBe(true)
+    })
+
+    it('should handle empty array', () => {
+      const result = validatePlugins([])
+
+      expect(result.valid).toBe(true)
+      expect(result.warnings.some((w) => w.includes('No plugins'))).toBe(true)
+    })
+
+    it('should collect all errors from multiple plugins', () => {
+      const plugins = [{ packageName: '' }, { packageName: '' }, { packageName: 'valid' }]
+      const result = validatePlugins(plugins)
+
+      expect(result.valid).toBe(false)
+      expect(result.errors.length).toBeGreaterThanOrEqual(2)
+    })
+
+    it('should warn about duplicate package names', () => {
+      const plugins = [
+        { packageName: '@test/plugin', label: 'Plugin 1' },
+        { packageName: '@test/plugin', label: 'Plugin 2' },
+      ]
+      const result = validatePlugins(plugins)
+
+      expect(result.valid).toBe(true)
+      expect(result.warnings.some((w) => w.includes('Duplicate'))).toBe(true)
+    })
+
+    it('should support failFast option', () => {
+      const plugins = [{ packageName: '' }, { packageName: '' }]
+      const result = validatePlugins(plugins, { failFast: true })
+
+      expect(result.valid).toBe(false)
+      // With failFast, should stop after first plugin validation fails
+      // Each plugin with empty packageName generates 2 errors (min length + invalid format)
+      // So failFast should result in only the first plugin's errors
+      expect(result.errors.length).toBeLessThanOrEqual(2)
+      // Verify it didn't process second plugin by checking error messages don't mention index 1
+      const hasIndex1Error = result.errors.some((err) => err.includes('index 1'))
+      expect(hasIndex1Error).toBe(false)
+    })
+
+    it('should handle mixed valid and invalid plugins', () => {
+      const plugins = [{ packageName: '@test/valid' }, { packageName: '' }, { packageName: '@test/another-valid' }]
+      const result = validatePlugins(plugins)
+
+      expect(result.valid).toBe(false)
+      expect(result.errors.length).toBeGreaterThan(0)
+    })
+  })
+})

package/motia-plugin/generator.ts

@@ -0,0 +1,130 @@
+import { getUniquePackageNames } from './resolver'
+import type { WorkbenchPlugin } from './types'
+
+/**
+ * Generates import statements for all unique plugin packages.
+ *
+ * @param packages - Array of unique package names
+ * @returns JavaScript code string with import statements
+ *
+ * @example
+ * ```ts
+ * generateImports(['@org/plugin-1', '~/plugins/local'])
+ * // Returns:
+ * // import * as plugin_0 from '@org/plugin-1'
+ * // import * as plugin_1 from '~/plugins/local'
+ * ```
+ */
+export function generateImports(packages: string[]): string {
+  return packages.map((packageName, index) => `import * as plugin_${index} from '${packageName}'`).join('\n')
+}
+
+/**
+ * Generates the package map that links package names to their imported modules.
+ *
+ * @param packages - Array of unique package names
+ * @returns JavaScript code string defining the package map
+ *
+ * @example
+ * ```ts
+ * generatePackageMap(['@org/plugin-1', '~/plugins/local'])
+ * // Returns: const packageMap = {'@org/plugin-1': plugin_0,'~/plugins/local': plugin_1}
+ * ```
+ */
+export function generatePackageMap(packages: string[]): string {
+  const entries = packages.map((packageName, index) => `'${packageName}': plugin_${index}`)
+  return `const packageMap = {${entries.join(',')}}`
+}
+
+/**
+ * Generates the plugin transformation logic that processes plugin configurations.
+ *
+ * @param plugins - Array of plugin configurations
+ * @returns JavaScript code string with plugin processing logic
+ */
+export function generatePluginLogic(plugins: WorkbenchPlugin[]): string {
+  return `
+      const motiaPlugins = ${JSON.stringify(plugins)}
+
+      export const plugins = motiaPlugins.map((plugin) => {
+        const component = packageMap[plugin.packageName]
+        const config = component.config || {}
+        const componentName = config.componentName || plugin.componentName
+
+        return {
+          label: plugin.label || config.label || 'Plugin label',
+          labelIcon: plugin.labelIcon || config.labelIcon || 'toy-brick',
+          position: plugin.position || config.position || 'top',
+          props: plugin.props || config.props || {},
+          component: componentName ? component[componentName] : component.default,
+        }
+      })
+`
+}
+
+/**
+ * Generates the complete virtual module code for all plugins.
+ * This is the main code generation function that combines all parts.
+ *
+ * @param plugins - Array of plugin configurations
+ * @returns Complete JavaScript code string for the virtual module
+ *
+ * @example
+ * ```ts
+ * const plugins = [
+ *   { packageName: '@test/plugin', label: 'Test' }
+ * ]
+ * const code = generatePluginCode(plugins)
+ * // Returns complete module code with imports, map, and logic
+ * ```
+ */
+export function generatePluginCode(plugins: WorkbenchPlugin[]): string {
+  if (!plugins || plugins.length === 0) {
+    return 'export const plugins = []'
+  }
+
+  const packages = getUniquePackageNames(plugins)
+  const imports = generateImports(packages)
+  const packageMap = generatePackageMap(packages)
+  const logic = generatePluginLogic(plugins)
+
+  return `${imports}
+${packageMap}
+${logic}`
+}
+
+/**
+ * Generates CSS imports for plugins that specify cssImports.
+ *
+ * @param plugins - Array of plugin configurations
+ * @returns CSS import statements as a string
+ *
+ * @example
+ * ```ts
+ * const plugins = [
+ *   { packageName: '@test/plugin', cssImports: ['styles.css', 'theme.css'] }
+ * ]
+ * generateCssImports(plugins)
+ * // Returns:
+ * // @import 'styles.css';
+ * // @import 'theme.css';
+ * ```
+ */
+export function generateCssImports(plugins: WorkbenchPlugin[]): string {
+  const cssImports = plugins
+    .flatMap((plugin) => plugin.cssImports || [])
+    .filter((cssImport) => cssImport && cssImport.trim() !== '')
+    .map((cssImport) => `@import '${cssImport}';`)
+
+  return cssImports.join('\n')
+}
+
+/**
+ * Checks if the generated code is valid (non-empty and has content).
+ *
+ * @param code - The generated code to check
+ * @returns True if code is valid
+ */
+export function isValidCode(code: string): boolean {
+  return typeof code === 'string' && code.trim().length > 0
+}

package/motia-plugin/hmr.ts

@@ -0,0 +1,78 @@
+import type { HmrContext, ModuleNode } from 'vite'
+import type { WorkbenchPlugin } from './types'
+import { CONSTANTS } from './types'
+import { normalizePath } from './utils'
+
+/**
+ * Checks if a file change should trigger HMR for plugins.
+ *
+ * @param file - The file path that changed
+ * @param plugins - Current plugin configurations
+ * @returns True if the change affects plugins
+ */
+export function shouldInvalidatePlugins(file: string, plugins: WorkbenchPlugin[]): boolean {
+  const normalizedFile = normalizePath(file)
+
+  // Check if the changed file is a local plugin
+  for (const plugin of plugins) {
+    if (plugin.packageName.startsWith('~/')) {
+      const pluginPath = plugin.packageName.replace('~/', '')
+      if (normalizedFile.includes(pluginPath)) {
+        return true
+      }
+    }
+  }
+
+  // Check if it's a plugin configuration file
+  if (normalizedFile.endsWith('motia.config.ts') || normalizedFile.endsWith('motia.config.js')) {
+    return true
+  }
+
+  return false
+}
+
+/**
+ * Handles hot updates for the plugin system.
+ * This function is called by Vite's handleHotUpdate hook.
+ *
+ * @param ctx - Vite's HMR context
+ * @param plugins - Current plugin configurations
+ * @returns Array of modules to update, or undefined to continue with default behavior
+ */
+export function handlePluginHotUpdate(ctx: HmrContext, plugins: WorkbenchPlugin[]): ModuleNode[] | void {
+  const { file, server } = ctx
+
+  console.log('[motia-plugins] HMR: File changed:', file)
+
+  // Check if this change affects plugins
+  if (!shouldInvalidatePlugins(file, plugins)) {
+    return // Let Vite handle it normally
+  }
+
+  console.log('[motia-plugins] HMR: Plugin configuration or local plugin changed, invalidating virtual module')
+
+  // Find the virtual module
+  const virtualModule = server.moduleGraph.getModuleById(CONSTANTS.RESOLVED_VIRTUAL_MODULE_ID)
+
+  if (virtualModule) {
+    // Invalidate the virtual module to force regeneration
+    server.moduleGraph.invalidateModule(virtualModule)
+    console.log('[motia-plugins] HMR: Virtual module invalidated')
+  }
+
+  // Return modules to update (includes the virtual module and any dependent modules)
+  const modulesToUpdate: ModuleNode[] = []
+
+  if (virtualModule) {
+    modulesToUpdate.push(virtualModule)
+  }
+
+  // Add any modules that import the virtual module
+  const importers = virtualModule?.importers || new Set()
+  for (const importer of importers) {
+    modulesToUpdate.push(importer)
+    console.log('[motia-plugins] HMR: Invalidating importer:', importer.id)
+  }
+
+  return modulesToUpdate
+}

package/motia-plugin/index.ts

@@ -0,0 +1,143 @@
+import type { Plugin } from 'vite'
+import { generateCssImports, generatePluginCode, isValidCode } from './generator'
+import { handlePluginHotUpdate } from './hmr'
+import { createAliasConfig } from './resolver'
+import type { WorkbenchPlugin } from './types'
+import { CONSTANTS } from './types'
+import { normalizePath } from './utils'
+import { validatePlugins } from './validator'
+
+/**
+ * Vite plugin for loading and managing Motia workbench plugins.
+ *
+ * Features:
+ * - Hot Module Replacement (HMR) support
+ * - Runtime validation with detailed error messages
+ * - Verbose logging for debugging
+ * - CSS injection for plugin styles
+ *
+ * @param plugins - Array of plugin configurations
+ * @param options - Optional loader configuration
+ * @returns Vite plugin instance
+ *
+ * @example
+ * ```ts
+ * export default defineConfig({
+ *   plugins: [
+ *     motiaPluginsPlugin([
+ *       { packageName: '@my-org/plugin', label: 'My Plugin' }
+ *     ])
+ *   ]
+ * })
+ * ```
+ */
+export default function motiaPluginsPlugin(plugins: WorkbenchPlugin[]): Plugin {
+  let devServer: any = null
+
+  try {
+    const validationResult = validatePlugins(plugins, {
+      failFast: false,
+    })
+
+    if (!validationResult.valid) {
+      console.error('[motia-plugins] Plugin configuration validation failed:')
+      validationResult.errors.forEach((err) => console.error(`[motia-plugins]   ${err}`))
+      throw new Error('Invalid plugin configuration. See errors above.')
+    }
+
+    if (validationResult.warnings.length > 0) {
+      validationResult.warnings.forEach((warning) => console.warn('[motia-plugins]', warning))
+    }
+  } catch (error) {
+    console.error('[motia-plugins] Failed to validate plugins:', error)
+    throw error
+  }
+
+  const alias = createAliasConfig(plugins)
+
+  console.log(`[motia-plugins] Initialized with ${plugins.length} plugin(s)`)
+
+  return {
+    name: 'vite-plugin-motia-plugins',
+    enforce: 'pre',
+
+    buildStart() {
+      console.log('[motia-plugins] Build started')
+    },
+
+    config: () => ({
+      resolve: {
+        alias,
+      },
+    }),
+
+    configureServer(server) {
+      devServer = server
+      console.log('[motia-plugins] Dev server configured, HMR enabled')
+    },
+
+    resolveId(id) {
+      if (id === CONSTANTS.VIRTUAL_MODULE_ID) {
+        return CONSTANTS.RESOLVED_VIRTUAL_MODULE_ID
+      }
+    },
+
+    load(id) {
+      if (id !== CONSTANTS.RESOLVED_VIRTUAL_MODULE_ID) {
+        return null
+      }
+
+      console.log('[motia-plugins] Loading plugins virtual module')
+      console.log('[motia-plugins] Generating plugin code...')
+
+      const code = generatePluginCode(plugins)
+
+      if (!isValidCode(code)) {
+        console.error('[motia-plugins] Generated code is invalid or empty')
+        return 'export const plugins = []'
+      }
+
+      console.log('[motia-plugins] Plugin code generated successfully')
+
+      return code
+    },
+
+    async transform(code, id) {
+      const normalizedId = normalizePath(id)
+
+      if (!normalizedId.endsWith('/workbench/src/index.css')) {
+        return null
+      }
+
+      console.log('[motia-plugins] Injecting plugin CSS imports')
+
+      const cssImports = generateCssImports(plugins)
+
+      if (!cssImports) {
+        return null
+      }
+
+      return {
+        code: `${cssImports}\n${code}`,
+        map: null,
+      }
+    },
+
+    handleHotUpdate(ctx) {
+      if (!devServer) {
+        return
+      }
+
+      const modulesToUpdate = handlePluginHotUpdate(ctx, plugins)
+
+      if (modulesToUpdate) {
+        console.log('[motia-plugins] Hot reloaded plugins')
+        return modulesToUpdate
+      }
+    },
+
+    buildEnd() {
+      console.log('[motia-plugins] Build ended')
+    },
+  }
+}

package/motia-plugin/resolver.ts

@@ -0,0 +1,96 @@
+import type { ResolvedPackage, WorkbenchPlugin } from './types'
+import { isLocalPlugin, normalizePath, resolveLocalPath, resolveNpmPath } from './utils'
+
+/**
+ * Resolves a plugin package to its absolute path and creates an alias.
+ *
+ * @param plugin - The plugin configuration to resolve
+ * @returns Resolved package information including path and alias
+ *
+ * @example
+ * ```ts
+ * // Local plugin
+ * resolvePluginPackage({ packageName: '~/plugins/my-plugin' })
+ * // Returns: {
+ * //   packageName: '~/plugins/my-plugin',
+ * //   resolvedPath: '/Users/project/plugins/my-plugin',
+ * //   isLocal: true,
+ * //   alias: '~/plugins/my-plugin'
+ * // }
+ *
+ * // NPM package
+ * resolvePluginPackage({ packageName: '@org/plugin' })
+ * // Returns: {
+ * //   packageName: '@org/plugin',
+ * //   resolvedPath: '/Users/project/node_modules/@org/plugin',
+ * //   isLocal: false,
+ * //   alias: '@org/plugin'
+ * // }
+ * ```
+ */
+export function resolvePluginPackage(plugin: WorkbenchPlugin): ResolvedPackage {
+  const { packageName } = plugin
+  const local = isLocalPlugin(packageName)
+
+  const resolvedPath = local ? resolveLocalPath(packageName) : resolveNpmPath(packageName)
+
+  return {
+    packageName,
+    resolvedPath: normalizePath(resolvedPath),
+    isLocal: local,
+    alias: packageName,
+  }
+}
+
+/**
+ * Resolves all plugin packages and creates a Vite alias configuration.
+ *
+ * @param plugins - Array of plugin configurations
+ * @returns Vite alias configuration object
+ *
+ * @example
+ * ```ts
+ * const plugins = [
+ *   { packageName: '~/plugins/local' },
+ *   { packageName: '@org/npm-plugin' }
+ * ]
+ * const aliases = createAliasConfig(plugins)
+ * // Returns: {
+ * //   '~/plugins/local': '/Users/project/plugins/local',
+ * //   '@org/npm-plugin': '/Users/project/node_modules/@org/npm-plugin'
+ * // }
+ * ```
+ */
+export function createAliasConfig(plugins: WorkbenchPlugin[]): Record<string, string> {
+  // Get unique package names to avoid duplicate aliases
+  const uniquePackages = Array.from(new Set(plugins.map((p) => p.packageName)))
+
+  const aliases: Record<string, string> = {}
+
+  for (const packageName of uniquePackages) {
+    const resolved = resolvePluginPackage({ packageName } as WorkbenchPlugin)
+    aliases[packageName] = resolved.resolvedPath
+  }
+
+  return aliases
+}
+
+/**
+ * Resolves all plugins and returns their resolved package information.
+ *
+ * @param plugins - Array of plugin configurations
+ * @returns Array of resolved package information
+ */
+export function resolveAllPlugins(plugins: WorkbenchPlugin[]): ResolvedPackage[] {
+  return plugins.map((plugin) => resolvePluginPackage(plugin))
+}
+
+/**
+ * Gets the unique set of package names from plugins.
+ *
+ * @param plugins - Array of plugin configurations
+ * @returns Array of unique package names
+ */
+export function getUniquePackageNames(plugins: WorkbenchPlugin[]): string[] {
+  return Array.from(new Set(plugins.map((p) => p.packageName)))
+}