@pie-element/cli 0.1.1

package/src/lib/upstream/sync-demo-metadata.ts

@@ -0,0 +1,199 @@
+/**
+ * Generate demo metadata for SvelteKit demo app
+ *
+ * This module generates:
+ * 1. Element registry (lib/elements/registry.ts)
+ * 2. Sample configs converted to JSON from each element
+ * 3. Sample sessions converted to JSON from each element
+ */
+import { mkdir, writeFile } from 'node:fs/promises';
+import { join, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const REPO_ROOT = join(__dirname, '../../../../..');
+const DEMO_APP_PATH = join(REPO_ROOT, 'apps/element-demo');
+const ELEMENTS_REACT_PATH = join(REPO_ROOT, 'packages/elements-react');
+
+export interface ElementMetadata {
+  name: string;
+  title: string;
+  packageName: string;
+  hasAuthor: boolean;
+  hasPrint: boolean;
+  hasConfig: boolean;
+  hasSession: boolean;
+  demoCount: number;
+}
+
+/**
+ * Scan elements-react directory for all elements
+ */
+async function scanReactElements(): Promise<ElementMetadata[]> {
+  const { readdirSync, existsSync: fsExistsSync, statSync } = await import('node:fs');
+
+  if (!fsExistsSync(ELEMENTS_REACT_PATH)) {
+    console.log('[demo-metadata] elements-react directory not found, skipping');
+    return [];
+  }
+
+  const elements: ElementMetadata[] = [];
+  const dirs = readdirSync(ELEMENTS_REACT_PATH);
+
+  for (const dir of dirs) {
+    const elementPath = join(ELEMENTS_REACT_PATH, dir);
+    const stat = statSync(elementPath);
+
+    if (!stat.isDirectory()) continue;
+
+    // Check for required structure
+    const srcPath = join(elementPath, 'src');
+    const deliveryPath = join(srcPath, 'delivery');
+    if (!fsExistsSync(deliveryPath)) continue;
+
+    // Check for author and print
+    const hasAuthor = fsExistsSync(join(srcPath, 'author'));
+    const hasPrint = fsExistsSync(join(srcPath, 'print'));
+
+    // Check for demo files
+    const docsPath = join(elementPath, 'docs/demo');
+    const hasConfig = fsExistsSync(join(docsPath, 'config.mjs'));
+    const hasSession = fsExistsSync(join(docsPath, 'session.mjs'));
+
+    // Generate title from name (e.g., "multiple-choice" -> "Multiple Choice")
+    const title = dir
+      .split('-')
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(' ');
+
+    elements.push({
+      name: dir,
+      title,
+      packageName: `@pie-element/${dir}`,
+      hasAuthor,
+      hasPrint,
+      hasConfig,
+      hasSession,
+      demoCount: 0, // Will be updated in copySampleConfigs
+    });
+  }
+
+  return elements;
+}
+
+/**
+ * Generate registry.ts file
+ */
+async function generateRegistry(elements: ElementMetadata[]): Promise<void> {
+  const registryPath = join(DEMO_APP_PATH, 'src/lib/elements/registry.ts');
+
+  const content = `/**
+ * Element Registry
+ *
+ * AUTO-GENERATED by upstream:sync command.
+ * DO NOT EDIT MANUALLY - changes will be overwritten.
+ *
+ * Generated: ${new Date().toISOString()}
+ */
+
+export interface ElementMetadata {
+  name: string;
+  title: string;
+  packageName: string;
+  hasAuthor: boolean;
+  hasPrint: boolean;
+  hasConfig: boolean;
+  hasSession: boolean;
+  demoCount: number;
+}
+
+export const ELEMENT_REGISTRY: readonly ElementMetadata[] = ${JSON.stringify(elements, null, 2)};
+
+export function getElement(name: string): ElementMetadata | undefined {
+  return ELEMENT_REGISTRY.find((el) => el.name === name);
+}
+
+export function getAllElements(): ElementMetadata[] {
+  return ELEMENT_REGISTRY;
+}
+`;
+
+  await mkdir(dirname(registryPath), { recursive: true });
+  await writeFile(registryPath, content, 'utf-8');
+  console.log(`[demo-metadata] Generated registry with ${elements.length} elements`);
+}
+
+/**
+ * Convert and copy sample configs for an element as JSON
+ */
+async function copySampleConfigs(elements: ElementMetadata[]): Promise<void> {
+  for (const element of elements) {
+    const sourcePath = join(ELEMENTS_REACT_PATH, element.name, 'docs/demo');
+    const targetDir = join(DEMO_APP_PATH, 'src/lib/data/sample-configs/react');
+    await mkdir(targetDir, { recursive: true });
+
+    // Convert config.mjs to JSON
+    if (element.hasConfig) {
+      const sourceConfig = join(sourcePath, 'config.mjs');
+      const targetConfig = join(targetDir, `${element.name}.json`);
+      try {
+        // Dynamic import the .mjs file
+        const configModule = await import(`file://${sourceConfig}`);
+        let configData = configModule.default;
+
+        // Convert old format (models array) to new format (demos array)
+        if (configData?.models && !configData?.demos) {
+          console.log(`[demo-metadata] Converting ${element.name} from old format to new format`);
+          configData = {
+            demos: configData.models.map((model: any, index: number) => ({
+              id: index === 0 ? 'default' : `demo-${index + 1}`,
+              title: index === 0 ? 'Default Demo' : `Demo ${index + 1}`,
+              description: 'Default configuration',
+              tags: [],
+              model: model,
+              session: { value: [] },
+            })),
+          };
+        }
+
+        // Count demos (now all in 'demos' format)
+        if (configData?.demos && Array.isArray(configData.demos)) {
+          element.demoCount = configData.demos.length;
+        } else {
+          element.demoCount = 0;
+        }
+
+        // Write as JSON
+        await writeFile(targetConfig, JSON.stringify(configData, null, 2) + '\n', 'utf-8');
+      } catch (e) {
+        console.warn(`[demo-metadata] Failed to convert config for ${element.name}:`, e);
+      }
+    }
+
+    // Note: session.mjs files are no longer copied as separate files.
+    // Sessions are now embedded within each demo object in the config.
+    // Old format session files are automatically converted during config import above.
+  }
+
+  console.log(`[demo-metadata] Converted sample configs to JSON for ${elements.length} elements`);
+}
+
+/**
+ * Main entry point
+ */
+export async function generateDemoMetadata(): Promise<void> {
+  console.log('[demo-metadata] Scanning elements...');
+
+  const reactElements = await scanReactElements();
+  const allElements = [...reactElements].sort((a, b) => a.name.localeCompare(b.name));
+
+  console.log(`[demo-metadata] Found ${reactElements.length} React elements`);
+
+  // Copy sample configs first so demoCount gets populated
+  await copySampleConfigs(allElements);
+
+  // Then generate registry with updated demoCount values
+  await generateRegistry(allElements);
+
+  console.log('[demo-metadata] ✓ Demo metadata generation complete');
+}

package/src/lib/upstream/sync-dev-exports.ts

@@ -0,0 +1,151 @@
+import { readFileSync, writeFileSync, existsSync } from 'node:fs';
+import { join } from 'node:path';
+import type { Logger } from '../../utils/logger.js';
+
+/**
+ * Map of export paths to their likely source file extensions.
+ * This determines which source files to look for when adding development export conditions.
+ */
+const SOURCE_EXTENSIONS: Record<string, string[]> = {
+  '.': ['index.ts', 'index.tsx', 'index.js'],
+  './delivery': ['delivery/index.ts', 'delivery/index.tsx', 'delivery/index.js'],
+  './author': ['author/index.tsx', 'author/index.ts', 'author/index.js'],
+  './controller': ['controller/index.ts', 'controller/index.js'],
+  './print': ['print/index.tsx', 'print/index.ts', 'print/index.js'],
+  './configure': ['configure/index.tsx', 'configure/index.ts', 'configure/index.js'],
+};
+
+/**
+ * Find the source file for a given export path in an element package.
+ */
+function findSourceFile(elementPath: string, exportPath: string): string | null {
+  const possibleFiles = SOURCE_EXTENSIONS[exportPath] || [];
+
+  for (const file of possibleFiles) {
+    const fullPath = join(elementPath, 'src', file);
+    if (existsSync(fullPath)) {
+      return `./src/${file}`;
+    }
+  }
+
+  return null;
+}
+
+interface PackageExports {
+  [key: string]: string | { [condition: string]: string };
+}
+
+interface PackageJson {
+  name?: string;
+  exports?: PackageExports;
+  [key: string]: unknown;
+}
+
+/**
+ * Add development export conditions to a package.json file.
+ * Returns true if the file was modified, false otherwise.
+ */
+function updatePackageJson(pkgPath: string, logger: Logger): boolean {
+  const pkgJsonPath = join(pkgPath, 'package.json');
+
+  if (!existsSync(pkgJsonPath)) {
+    return false;
+  }
+
+  const content = readFileSync(pkgJsonPath, 'utf-8');
+  const pkg: PackageJson = JSON.parse(content);
+
+  if (!pkg.exports || typeof pkg.exports !== 'object') {
+    logger.debug(`  ⚠️  No exports field found in ${pkg.name || pkgPath}`);
+    return false;
+  }
+
+  let modified = false;
+
+  for (const [exportPath, exportConfig] of Object.entries(pkg.exports)) {
+    // Skip if not an object (string exports)
+    if (typeof exportConfig !== 'object') {
+      continue;
+    }
+
+    // Skip if already has development condition
+    if ('development' in exportConfig) {
+      continue;
+    }
+
+    // Find the source file
+    const sourceFile = findSourceFile(pkgPath, exportPath);
+
+    if (sourceFile) {
+      // Add development condition as the first entry
+      pkg.exports[exportPath] = {
+        development: sourceFile,
+        ...exportConfig,
+      };
+      modified = true;
+      logger.debug(`    ✓ Added development export for ${exportPath} -> ${sourceFile}`);
+    } else {
+      logger.debug(`    ⚠️  Could not find source file for ${exportPath}`);
+    }
+  }
+
+  if (modified) {
+    // Write back with proper formatting
+    writeFileSync(pkgJsonPath, JSON.stringify(pkg, null, 2) + '\n', 'utf-8');
+    return true;
+  }
+
+  return false;
+}
+
+/**
+ * Add development export conditions to element packages.
+ * This allows Vite to resolve directly to src/ files in development mode
+ * for Hot Module Reload (HMR) without needing a custom plugin.
+ *
+ * @param elementsDir - Path to the elements-react directory
+ * @param packageNames - Optional array of specific package names to process (e.g., ['multiple-choice'])
+ * @param logger - Logger instance for output
+ * @returns Number of packages updated
+ */
+export async function addDevelopmentExports(
+  elementsDir: string,
+  packageNames: string[] | undefined,
+  logger: Logger
+): Promise<number> {
+  if (!existsSync(elementsDir)) {
+    logger.warn(`Elements directory not found: ${elementsDir}`);
+    return 0;
+  }
+
+  let updated = 0;
+  const packagesToProcess = packageNames || [];
+
+  // If no specific packages provided, we don't process anything
+  // (this function is meant to be called with specific packages after sync)
+  if (packagesToProcess.length === 0) {
+    return 0;
+  }
+
+  for (const pkgName of packagesToProcess) {
+    const elementPath = join(elementsDir, pkgName);
+
+    if (!existsSync(elementPath)) {
+      logger.debug(`  Package not found: ${pkgName}`);
+      continue;
+    }
+
+    logger.debug(`  Processing ${pkgName}...`);
+
+    const wasUpdated = updatePackageJson(elementPath, logger);
+
+    if (wasUpdated) {
+      updated++;
+      logger.debug(`    ✓ Updated\n`);
+    } else {
+      logger.debug(`    → Skipped (no changes needed)\n`);
+    }
+  }
+
+  return updated;
+}

package/src/lib/upstream/sync-externals.ts

@@ -0,0 +1,159 @@
+/**
+ * Shared external dependency configuration for Vite builds
+ *
+ * These dependencies should NOT be bundled into library outputs.
+ * Instead, they are resolved at runtime from the consuming application.
+ */
+
+/**
+ * Check if a module ID should be treated as external (not bundled)
+ *
+ * Categories of externals:
+ * 1. Framework peer dependencies (React, MUI, Emotion) - MUST be external to avoid duplicate instances
+ * 2. Internal monorepo packages (@pie-lib, @pie-element, @pie-element) - External for separate resolution
+ * 3. Utility libraries (prop-types, classnames, debug) - External to reduce duplication across packages
+ * 4. Specialized UI libraries (@dnd-kit, react-transition-group, styled-components) - External to avoid version conflicts
+ * 5. Lodash variants (lodash/lodash-es) - External for runtime resolution via import maps
+ * 6. D3 modules - External as they're commonly shared
+ */
+export function isExternal(id: string, variant: 'element' | 'pielib'): boolean {
+  // React and React DOM - always external (peer dependencies)
+  if (/^react($|\/)/.test(id)) return true;
+  if (/^react-dom($|\/)/.test(id)) return true;
+
+  // Internal monorepo packages - always external
+  if (/^@pie-lib\//.test(id)) return true;
+  if (/^@pie-element\//.test(id)) return true;
+  if (/^@pie-element\//.test(id)) return true;
+  if (/^@pie-framework\//.test(id)) return true;
+
+  // UI framework packages - always external (peer dependencies)
+  if (/^@mui\//.test(id)) return true;
+  if (/^@emotion\//.test(id)) return true;
+
+  // D3 visualization modules - always external
+  if (/^d3-/.test(id)) return true;
+
+  // Recharts charting library - external for fraction-model
+  if (id === 'recharts' || /^recharts\//.test(id)) return true;
+
+  // Testing libraries - always external
+  if (/^@testing-library\//.test(id)) return true;
+
+  // Lodash - variant-specific (elements use lodash, pie-lib uses lodash-es)
+  if (variant === 'element') {
+    if (id === 'lodash') return true;
+    if (/^lodash\//.test(id)) return true;
+  } else {
+    if (id === 'lodash-es') return true;
+    if (/^lodash-es\//.test(id)) return true;
+  }
+
+  // Styled-components - external to avoid multiple instances
+  if (/^styled-components/.test(id)) return true;
+
+  // Konva visualization library - external for hotspot/drawing-response
+  if (id === 'konva' || id.startsWith('konva/')) return true;
+  if (id === 'react-konva' || id.startsWith('react-konva/')) return true;
+
+  // DnD Kit libraries - external for drag and drop functionality
+  if (/^@dnd-kit\//.test(id)) return true;
+
+  // Common utility and UI libraries - always external
+  const commonExternals = [
+    'prop-types', // React prop validation
+    'classnames', // CSS class utility
+    'debug', // Debug logging
+    'i18next', // Internationalization
+    'humps', // String case conversion
+    'mathjs', // Math expression evaluation
+    'react-jss', // JSS styling for React
+    'js-combinatorics', // Combinatorics library
+    '@mapbox/point-geometry', // Graphing utils dependency
+    '@dnd-kit/core', // Drag and drop
+    'react-transition-group', // Animations
+    'nested-property', // Object property access (placement-ordering)
+    'pluralize', // Word pluralization (placement-ordering)
+    'decimal.js', // Decimal math (placement-ordering)
+  ];
+
+  return commonExternals.includes(id);
+}
+
+/**
+ * Generate external function for Vite rollupOptions
+ * Use this in vite.config.ts generation
+ */
+export function createExternalFunction(variant: 'element' | 'pielib'): string {
+  const lodashCheck =
+    variant === 'element'
+      ? `id === 'lodash' ||
+          /^lodash\\//.test(id) ||`
+      : `id === 'lodash-es' ||
+          /^lodash-es\\//.test(id) ||`;
+
+  return `(id) => {
+        return (
+          /^react($|\\/)/.test(id) ||
+          /^react-dom($|\\/)/.test(id) ||
+          /^@pie-lib\\//.test(id) ||
+          /^@pie-element\\//.test(id) ||
+          /^@pie-element\\//.test(id) ||
+          /^@pie-framework\\//.test(id) ||
+          /^@mui\\//.test(id) ||
+          /^@emotion\\//.test(id) ||
+          /^d3-/.test(id) ||
+          /^@testing-library\\//.test(id) ||
+          ${lodashCheck}
+          /^styled-components/.test(id) ||
+          id === 'konva' || /^konva\\//.test(id) ||
+          id === 'react-konva' || /^react-konva\\//.test(id) ||
+          /^@dnd-kit\\//.test(id) ||
+          id === '@mdi/react' || /^@mdi\\/react\\//.test(id) ||
+          id === '@mdi/js' || /^@mdi\\/js\\//.test(id) ||
+          id === 'recharts' || /^recharts\\//.test(id) ||
+          ['prop-types', 'classnames', 'debug', 'i18next', 'humps', 'mathjs', 'react-jss', 'js-combinatorics', '@mapbox/point-geometry', 'react-transition-group', 'nested-property', 'pluralize', 'decimal.js'].includes(id)
+        );
+      }`;
+}
+
+/**
+ * Generate external function for Konva-based elements (preserveModules: false)
+ * These bundle konva, react-konva, scheduler, and react-reconciler to avoid runtime resolution issues
+ */
+export function createKonvaExternalFunction(): string {
+  return `(id) => {
+        // Bundle konva, react-konva, scheduler, and react-reconciler
+        // Check these FIRST before other react checks
+        if (id === 'konva' || id.startsWith('konva/')) return false;
+        if (id === 'react-konva' || id.startsWith('react-konva/')) return false;
+        if (id === 'scheduler' || id.startsWith('scheduler/')) return false;
+        if (id === 'react-reconciler' || id.startsWith('react-reconciler/')) return false;
+
+        // Always external: base package names
+        if (id === 'react' || id.startsWith('react/')) return true;
+        if (id === 'react-dom' || id.startsWith('react-dom/')) return true;
+        if (id.startsWith('@pie-lib/')) return true;
+        if (id.startsWith('@pie-element/')) return true;
+        if (id.startsWith('@pie-element/')) return true;
+        if (id.startsWith('@pie-framework/')) return true;
+        if (id.startsWith('@mui/')) return true;
+        if (id.startsWith('@emotion/')) return true;
+        if (id.startsWith('d3-')) return true;
+        // Keep recharts external
+        if (id === 'recharts' || id.startsWith('recharts/')) return true;
+        // Keep lodash external even with preserveModules: false
+        // It will be resolved via import map in demo HTML
+        if (id === 'lodash' || id.startsWith('lodash/')) return true;
+        if (id === 'styled-components' || id.startsWith('styled-components/')) return true;
+        // DnD Kit libraries
+        if (id.startsWith('@dnd-kit/')) return true;
+        // Material Design Icons for drawing-response
+        if (id === '@mdi/react' || id.startsWith('@mdi/react/')) return true;
+        if (id === '@mdi/js' || id.startsWith('@mdi/js/')) return true;
+        if (['prop-types', 'classnames', 'debug', 'i18next', 'humps', 'mathjs', 'react-jss', 'js-combinatorics', '@mapbox/point-geometry', 'react-transition-group', 'nested-property', 'pluralize', 'decimal.js'].includes(id)) return true;
+
+        // Everything else gets bundled (including dependencies of konva/react-konva)
+        return false;
+      }`;
+}

package/src/lib/upstream/sync-filesystem.ts

@@ -0,0 +1,87 @@
+/**
+ * File system utilities for sync operations
+ */
+import { existsSync } from 'node:fs';
+import { readdir as fsReaddir, rm as fsRm } from 'node:fs/promises';
+import { join } from 'node:path';
+
+export interface CleanOptions {
+  dryRun?: boolean;
+  verbose?: boolean;
+  preserve?: string[];
+}
+
+export interface Logger {
+  info(message: string): void;
+}
+
+/**
+ * Clean a directory, optionally preserving subdirectories
+ */
+export async function cleanDirectory(
+  targetDir: string,
+  label: string,
+  options: CleanOptions = {},
+  logger?: Logger
+): Promise<void> {
+  const { dryRun = false, verbose = false, preserve = [] } = options;
+
+  if (!existsSync(targetDir)) {
+    return;
+  }
+
+  if (dryRun) {
+    if (verbose && logger) {
+      const preserveMsg = preserve.length > 0 ? ` (preserving: ${preserve.join(', ')})` : '';
+      logger.info(`  🧹 Would clean ${label}${preserveMsg}`);
+    }
+    return;
+  }
+
+  // If no directories to preserve, delete everything
+  if (preserve.length === 0) {
+    await fsRm(targetDir, { recursive: true, force: true });
+    if (verbose && logger) {
+      logger.info(`  🧹 Cleaned ${label}`);
+    }
+    return;
+  }
+
+  // Selectively delete entries, preserving specified directories
+  const entries = await fsReaddir(targetDir);
+
+  for (const entry of entries) {
+    if (preserve.includes(entry)) {
+      continue;
+    }
+
+    const entryPath = join(targetDir, entry);
+    await fsRm(entryPath, { recursive: true, force: true });
+  }
+
+  if (verbose && logger) {
+    logger.info(`  🧹 Cleaned ${label} (preserved: ${preserve.join(', ')})`);
+  }
+}
+
+/**
+ * Check if any of the given paths exist
+ */
+export function existsAny(paths: string[]): boolean {
+  return paths.some((p) => existsSync(p));
+}
+
+/**
+ * Safe wrapper around readdir that sorts results
+ */
+export async function readdir(path: string): Promise<string[]> {
+  try {
+    const entries = await fsReaddir(path);
+    return entries.sort();
+  } catch (error: unknown) {
+    if (error && typeof error === 'object' && 'code' in error && error.code === 'ENOENT') {
+      return [];
+    }
+    throw error;
+  }
+}