@pie-element/cli 0.1.1 → 0.1.2-next.1

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

@@ -1,199 +0,0 @@
-/**
- * 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

@@ -1,151 +0,0 @@
-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

@@ -1,159 +0,0 @@
-/**
- * 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

@@ -1,87 +0,0 @@
-/**
- * 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;
-  }
-}