@vue-skuilder/cli 0.1.4 → 0.1.6

package/src/utils/template.ts

@@ -13,7 +13,7 @@ const __dirname = path.dirname(__filename);
 export async function findStandaloneUiPath(): Promise<string> {
   // Start from CLI package root and work upward
   let currentDir = path.join(__dirname, '..', '..');
-  
+
   while (currentDir !== path.dirname(currentDir)) {
     const nodeModulesPath = path.join(currentDir, 'node_modules', '@vue-skuilder', 'standalone-ui');
     if (existsSync(nodeModulesPath)) {
@@ -21,8 +21,10 @@ export async function findStandaloneUiPath(): Promise<string> {
     }
     currentDir = path.dirname(currentDir);
   }
-  
-  throw new Error('Could not find @vue-skuilder/standalone-ui package. Please ensure it is installed.');
+
+  throw new Error(
+    'Could not find @vue-skuilder/standalone-ui package. Please ensure it is installed.'
+  );
 }
 
 /**
@@ -34,18 +36,18 @@ export async function copyDirectory(
   excludePatterns: string[] = ['node_modules', 'dist', '.git', 'cypress']
 ): Promise<void> {
   const entries = await fs.readdir(source, { withFileTypes: true });
-  
+
   await fs.mkdir(destination, { recursive: true });
-  
+
   for (const entry of entries) {
     const sourcePath = path.join(source, entry.name);
     const destPath = path.join(destination, entry.name);
-    
+
     // Skip excluded patterns
-    if (excludePatterns.some(pattern => entry.name.includes(pattern))) {
+    if (excludePatterns.some((pattern) => entry.name.includes(pattern))) {
       continue;
     }
-    
+
     if (entry.isDirectory()) {
       await copyDirectory(sourcePath, destPath, excludePatterns);
     } else {
@@ -64,12 +66,12 @@ export async function transformPackageJson(
 ): Promise<void> {
   const content = await fs.readFile(packageJsonPath, 'utf-8');
   const packageJson = JSON.parse(content);
-  
+
   // Update basic project info
   packageJson.name = projectName;
   packageJson.description = `Skuilder course application: ${projectName}`;
   packageJson.version = '1.0.0';
-  
+
   // Transform workspace dependencies to published versions
   if (packageJson.dependencies) {
     for (const [depName, version] of Object.entries(packageJson.dependencies)) {
@@ -79,21 +81,21 @@ export async function transformPackageJson(
       }
     }
   }
-  
+
   // Add missing terser devDependency for build minification
   if (packageJson.devDependencies && !packageJson.devDependencies['terser']) {
     packageJson.devDependencies['terser'] = '^5.39.0';
   }
-  
+
   // Remove CLI-specific fields that don't belong in generated projects
   delete packageJson.publishConfig;
-  
+
   await fs.writeFile(packageJsonPath, JSON.stringify(packageJson, null, 2));
 }
 
 /**
  * Create a vite.config.ts to work with published packages instead of workspace sources
- * 
+ *
  * // [ ] This should be revised so that it works from the existing vite.config.ts in standalone-ui. As is, it recreates 95% of the same config.
  */
 export async function createViteConfig(viteConfigPath: string): Promise<void> {
@@ -109,7 +111,7 @@ export default defineConfig({
     alias: {
       // Alias for internal src paths
       '@': fileURLToPath(new URL('./src', import.meta.url)),
-      
+
       // Add events alias if needed (often required by dependencies)
       events: 'events',
     },
@@ -156,7 +158,7 @@ export default defineConfig({
   },
 });
 `;
-  
+
   await fs.writeFile(viteConfigPath, transformedContent);
 }
 
@@ -169,24 +171,66 @@ export async function generateSkuilderConfig(
 ): Promise<void> {
   const skuilderConfig: SkuilderConfig = {
     title: config.title,
-    dataLayerType: config.dataLayerType
+    dataLayerType: config.dataLayerType,
   };
-  
-  if (config.course) {
+
+  // For dynamic data layer, use the specified course ID
+  if (config.dataLayerType === 'couch' && config.course) {
     skuilderConfig.course = config.course;
   }
-  
+
+  // For static data layer with imported courses, use the first course as primary
+  if (config.dataLayerType === 'static' && config.importCourseIds && config.importCourseIds.length > 0) {
+    skuilderConfig.course = config.importCourseIds[0];
+  }
+
   if (config.couchdbUrl) {
     skuilderConfig.couchdbUrl = config.couchdbUrl;
   }
-  
+
   if (config.theme) {
     skuilderConfig.theme = config.theme;
   }
-  
+
   await fs.writeFile(configPath, JSON.stringify(skuilderConfig, null, 2));
 }
 
+/**
+ * Transform tsconfig.json to be standalone (remove base config reference)
+ */
+export async function transformTsConfig(tsconfigPath: string): Promise<void> {
+  const content = await fs.readFile(tsconfigPath, 'utf-8');
+  const tsconfig = JSON.parse(content);
+
+  // Remove the extends reference to the monorepo base config
+  delete tsconfig.extends;
+
+  // Merge in the essential settings from the base config that scaffolded apps need
+  tsconfig.compilerOptions = {
+    ...tsconfig.compilerOptions,
+    // Essential TypeScript settings from base config
+    strict: true,
+    skipLibCheck: true,
+    forceConsistentCasingInFileNames: true,
+    esModuleInterop: true,
+    allowSyntheticDefaultImports: true,
+    // Keep existing Vue/Vite-specific settings
+    target: tsconfig.compilerOptions.target || 'ESNext',
+    useDefineForClassFields: tsconfig.compilerOptions.useDefineForClassFields,
+    module: tsconfig.compilerOptions.module || 'ESNext',
+    moduleResolution: tsconfig.compilerOptions.moduleResolution || 'bundler',
+    jsx: tsconfig.compilerOptions.jsx || 'preserve',
+    resolveJsonModule: tsconfig.compilerOptions.resolveJsonModule,
+    isolatedModules: tsconfig.compilerOptions.isolatedModules,
+    lib: tsconfig.compilerOptions.lib || ['ESNext', 'DOM'],
+    noEmit: tsconfig.compilerOptions.noEmit,
+    baseUrl: tsconfig.compilerOptions.baseUrl || '.',
+    types: tsconfig.compilerOptions.types || ['vite/client'],
+  };
+
+  await fs.writeFile(tsconfigPath, JSON.stringify(tsconfig, null, 2));
+}
+
 /**
  * Generate .gitignore file for the project
  */
@@ -313,14 +357,20 @@ Thumbs.db
 /**
  * Generate project README.md
  */
-export async function generateReadme(
-  readmePath: string,
-  config: ProjectConfig
-): Promise<void> {
-  const dataLayerInfo = config.dataLayerType === 'static' 
-    ? 'This project uses a static data layer with JSON files.'
-    : `This project connects to CouchDB at: ${config.couchdbUrl || '[URL not specified]'}`;
+export async function generateReadme(readmePath: string, config: ProjectConfig): Promise<void> {
+  let dataLayerInfo = '';
+  
+  if (config.dataLayerType === 'static') {
+    dataLayerInfo = 'This project uses a static data layer with JSON files.';
     
+    if (config.importCourseIds && config.importCourseIds.length > 0) {
+      const courseList = config.importCourseIds.map(id => `- ${id}`).join('\n');
+      dataLayerInfo += `\n\n**Imported Courses:**\n${courseList}\n\nCourse data is stored in \`public/static-courses/\` and loaded automatically.`;
+    }
+  } else {
+    dataLayerInfo = `This project connects to CouchDB at: ${config.couchdbUrl || '[URL not specified]'}`;
+  }
+
   const readme = `# ${config.title}
 
 A Skuilder course application built with Vue 3, Vuetify, and Pinia.
@@ -356,10 +406,42 @@ Course configuration is managed in \`skuilder.config.json\`. You can modify:
 
 ## Theme
 
-Current theme: **${config.theme.name}**
-- Primary: ${config.theme.colors.primary}
-- Secondary: ${config.theme.colors.secondary}  
-- Accent: ${config.theme.colors.accent}
+Current theme: **${config.theme.name}** (${config.theme.defaultMode} mode)
+- Primary: ${config.theme.light.colors.primary}
+- Secondary: ${config.theme.light.colors.secondary}  
+- Accent: ${config.theme.light.colors.accent}
+
+This theme includes both light and dark variants. The application will use the ${config.theme.defaultMode} theme by default, but users can toggle between light and dark modes in their settings.
+
+### Theme Customization
+
+To customize the theme colors, edit the \`theme\` section in \`skuilder.config.json\`:
+
+\`\`\`json
+{
+  "theme": {
+    "name": "custom",
+    "defaultMode": "light",
+    "light": {
+      "dark": false,
+      "colors": {
+        "primary": "#your-color",
+        "secondary": "#your-color",
+        "accent": "#your-color"
+        // ... other semantic colors
+      }
+    },
+    "dark": {
+      "dark": true,
+      "colors": {
+        // ... dark variant colors
+      }
+    }
+  }
+}
+\`\`\`
+
+The theme system supports all Vuetify semantic colors including error, success, warning, info, background, surface, and text colors. Changes to the configuration file are applied automatically on restart.
 
 ## Testing
 
@@ -391,31 +473,37 @@ export async function processTemplate(
 ): Promise<void> {
   console.log(chalk.blue('📦 Locating standalone-ui template...'));
   const templatePath = await findStandaloneUiPath();
-  
+
   console.log(chalk.blue('📂 Copying project files...'));
   await copyDirectory(templatePath, projectPath);
-  
+
   console.log(chalk.blue('⚙️  Configuring package.json...'));
   const packageJsonPath = path.join(projectPath, 'package.json');
   await transformPackageJson(packageJsonPath, config.projectName, cliVersion);
-  
+
   console.log(chalk.blue('🔧 Creating vite.config.ts...'));
   const viteConfigPath = path.join(projectPath, 'vite.config.ts');
   if (existsSync(viteConfigPath)) {
     await createViteConfig(viteConfigPath);
   }
-  
+
+  console.log(chalk.blue('🔧 Transforming tsconfig.json...'));
+  const tsconfigPath = path.join(projectPath, 'tsconfig.json');
+  if (existsSync(tsconfigPath)) {
+    await transformTsConfig(tsconfigPath);
+  }
+
   console.log(chalk.blue('🔧 Generating configuration...'));
   const configPath = path.join(projectPath, 'skuilder.config.json');
   await generateSkuilderConfig(configPath, config);
-  
+
   console.log(chalk.blue('📝 Creating README...'));
   const readmePath = path.join(projectPath, 'README.md');
   await generateReadme(readmePath, config);
-  
+
   console.log(chalk.blue('📄 Generating .gitignore...'));
   const gitignorePath = path.join(projectPath, '.gitignore');
   await generateGitignore(gitignorePath);
-  
+
   console.log(chalk.green('✅ Template processing complete!'));
-}
+}