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

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,140 @@
+import type { Printer } from '@motiadev/core'
+import path from 'path'
+import type { HmrContext, ModuleNode } from 'vite'
+import { resolvePluginPackage } from './resolver'
+import type { WorkbenchPlugin } from './types'
+import { CONSTANTS } from './types'
+import { isLocalPlugin, normalizePath } from './utils'
+
+const WATCHED_EXTENSIONS = ['.ts', '.tsx', '.js', '.jsx', '.css', '.scss', '.less']
+
+export function isConfigFile(file: string): boolean {
+  const normalizedFile = normalizePath(file)
+  return normalizedFile.endsWith('motia.config.ts') || normalizedFile.endsWith('motia.config.js')
+}
+
+/**
+ * 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)
+  const absoluteFile = path.isAbsolute(normalizedFile) ? normalizedFile : path.resolve(process.cwd(), normalizedFile)
+
+  if (isConfigFile(file)) {
+    return true
+  }
+
+  const hasWatchedExtension = WATCHED_EXTENSIONS.some((ext) => absoluteFile.endsWith(ext))
+  if (!hasWatchedExtension) {
+    return false
+  }
+
+  for (const plugin of plugins) {
+    if (isLocalPlugin(plugin.packageName)) {
+      const resolved = resolvePluginPackage(plugin)
+      const pluginAbsolutePath = path.isAbsolute(resolved.resolvedPath)
+        ? resolved.resolvedPath
+        : path.resolve(process.cwd(), resolved.resolvedPath)
+
+      const normalizedPluginPath = pluginAbsolutePath.endsWith(path.sep)
+        ? pluginAbsolutePath
+        : `${pluginAbsolutePath}${path.sep}`
+
+      if (absoluteFile.startsWith(normalizedPluginPath) || absoluteFile === pluginAbsolutePath) {
+        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
+ * @param printer - Printer instance for logging
+ * @returns Array of modules to update, or undefined to continue with default behavior
+ */
+export function handlePluginHotUpdate(
+  ctx: HmrContext,
+  plugins: WorkbenchPlugin[],
+  printer: Printer,
+): ModuleNode[] | undefined {
+  const { file, server, timestamp } = ctx
+
+  printer.printPluginLog(`HMR: File changed: ${normalizePath(file)}`)
+
+  // Check if this change affects plugins
+  if (!shouldInvalidatePlugins(file, plugins)) {
+    return // Let Vite handle it normally
+  }
+
+  if (isConfigFile(file)) {
+    printer.printPluginLog('HMR: Config file changed, triggering full page reload')
+    printer.printPluginWarn(
+      'Configuration changes require a server restart for full effect. Please restart the dev server to apply all changes.',
+    )
+    server.ws.send({
+      type: 'full-reload',
+      path: '*',
+    })
+    return
+  }
+
+  printer.printPluginLog('HMR: Plugin change detected, invalidating virtual module')
+
+  // Find the virtual module
+  const virtualModule = server.moduleGraph.getModuleById(CONSTANTS.RESOLVED_VIRTUAL_MODULE_ID)
+
+  if (!virtualModule) {
+    printer.printPluginWarn('HMR: Virtual module not found, triggering full reload')
+    server.ws.send({
+      type: 'full-reload',
+      path: '*',
+    })
+    return
+  }
+
+  server.moduleGraph.invalidateModule(virtualModule, new Set(), timestamp)
+  printer.printPluginLog('HMR: Virtual module invalidated')
+
+  const modulesToUpdate: ModuleNode[] = [virtualModule]
+  const processedModules = new Set<ModuleNode>([virtualModule])
+
+  // Recursively add all importers
+  const addImporters = (module: ModuleNode) => {
+    for (const importer of module.importers) {
+      if (!processedModules.has(importer)) {
+        processedModules.add(importer)
+        modulesToUpdate.push(importer)
+        server.moduleGraph.invalidateModule(importer, new Set(), timestamp)
+        addImporters(importer)
+      }
+    }
+  }
+
+  addImporters(virtualModule)
+
+  server.ws.send({
+    type: 'update',
+    updates: modulesToUpdate
+      .filter((m) => m.url)
+      .map((m) => ({
+        type: m.type === 'css' ? ('css-update' as const) : ('js-update' as const),
+        path: m.url,
+        acceptedPath: m.url,
+        timestamp,
+      })),
+  })
+
+  printer.printPluginLog(`HMR: Updated ${modulesToUpdate.length} module(s)`)
+
+  return modulesToUpdate
+}

package/motia-plugin/index.ts

@@ -0,0 +1,182 @@
+import { Printer } from '@motiadev/core'
+import path from 'path'
+import type { Plugin, ViteDevServer } from 'vite'
+import { generateCssImports, generatePluginCode, isValidCode } from './generator'
+import { handlePluginHotUpdate } from './hmr'
+import { createAliasConfig, resolvePluginPackage } from './resolver'
+import type { WorkbenchPlugin } from './types'
+import { CONSTANTS } from './types'
+import { isLocalPlugin, 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' }
+ *     ])
+ *   ]
+ * })
+ * ```
+ */
+const printer = new Printer(process.cwd())
+
+export default function motiaPluginsPlugin(plugins: WorkbenchPlugin[]): Plugin {
+  let devServer: ViteDevServer | null = null
+
+  try {
+    const validationResult = validatePlugins(plugins, {
+      failFast: false,
+    })
+
+    if (!validationResult.valid) {
+      printer.printPluginError('Plugin configuration validation failed:')
+      for (const err of validationResult.errors) {
+        printer.printPluginError(`  ${err}`)
+      }
+      throw new Error('Invalid plugin configuration. See errors above.')
+    }
+
+    if (validationResult.warnings.length > 0) {
+      for (const warning of validationResult.warnings) {
+        printer.printPluginWarn(warning)
+      }
+    }
+  } catch (error) {
+    printer.printPluginError(`Failed to validate plugins: ${error}`)
+    throw error
+  }
+
+  const alias = createAliasConfig(plugins)
+
+  printer.printPluginLog(`Initialized with ${plugins.length} plugin(s)`)
+
+  return {
+    name: 'vite-plugin-motia-plugins',
+    enforce: 'pre',
+
+    buildStart() {
+      printer.printPluginLog('Build started')
+    },
+
+    config: () => ({
+      resolve: {
+        alias,
+      },
+    }),
+
+    configureServer(server) {
+      devServer = server
+      printer.printPluginLog('Dev server configured, HMR enabled')
+
+      const configPaths = [path.join(process.cwd(), 'motia.config.ts'), path.join(process.cwd(), 'motia.config.js')]
+
+      for (const configPath of configPaths) {
+        server.watcher.add(configPath)
+      }
+      printer.printPluginLog('Watching for config file changes')
+
+      const localPlugins = plugins.filter((p) => isLocalPlugin(p.packageName))
+      if (localPlugins.length > 0) {
+        printer.printPluginLog(`Watching ${localPlugins.length} local plugin(s)`)
+
+        for (const plugin of localPlugins) {
+          const resolved = resolvePluginPackage(plugin)
+          const watchPath = resolved.resolvedPath
+
+          server.watcher.add(watchPath)
+          printer.printPluginLog(`Watching: ${watchPath}`)
+        }
+
+        server.watcher.on('change', (file) => {
+          const normalizedFile = normalizePath(file)
+          printer.printPluginLog(`File watcher detected change: ${normalizedFile}`)
+        })
+
+        server.watcher.on('add', (file) => {
+          const normalizedFile = normalizePath(file)
+          printer.printPluginLog(`File watcher detected new file: ${normalizedFile}`)
+        })
+      }
+    },
+
+    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
+      }
+
+      printer.printPluginLog('Loading plugins virtual module')
+      printer.printPluginLog('Generating plugin code...')
+
+      const code = generatePluginCode(plugins)
+
+      if (!isValidCode(code)) {
+        printer.printPluginError('Generated code is invalid or empty')
+        return 'export const plugins = []'
+      }
+
+      printer.printPluginLog('Plugin code generated successfully')
+
+      return code
+    },
+
+    async transform(code, id) {
+      const normalizedId = normalizePath(id)
+
+      if (!normalizedId.endsWith('src/index.css')) {
+        return null
+      }
+
+      printer.printPluginLog('Injecting plugin CSS imports')
+
+      const cssImports = generateCssImports(plugins)
+
+      if (!cssImports) {
+        return null
+      }
+
+      return {
+        code: `${cssImports}\n${code}`,
+        map: null,
+      }
+    },
+
+    handleHotUpdate(ctx) {
+      if (!devServer) {
+        printer.printPluginWarn('HMR: Dev server not available')
+        return
+      }
+
+      const modulesToUpdate = handlePluginHotUpdate(ctx, plugins, printer)
+
+      if (modulesToUpdate && modulesToUpdate.length > 0) {
+        printer.printPluginLog(`HMR: Successfully updated ${modulesToUpdate.length} module(s)`)
+        return modulesToUpdate
+      }
+    },
+
+    buildEnd() {
+      printer.printPluginLog('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)))
+}