@vue-skuilder/cli 0.1.7 → 0.1.8-1

package/dist/express-assets/utils/processQueue.js

@@ -0,0 +1,175 @@
+import logger from '../logger.js';
+/**
+ * This queue executes async prcesses sequentially, waiting
+ * for each to complete before launching the next.
+ */
+export default class AsyncProcessQueue {
+    processRequest;
+    queue = [];
+    errors = [];
+    completed = [];
+    processing = false;
+    nextID = 0;
+    /**
+     * Returns 'complete' if the job is complete, 'error' if the
+     * job failed, and the job's position in queue if not yet
+     * completed.
+     *
+     * @param jobID The jobID returned by addRequest
+     */
+    jobStatus(jobID) {
+        let ret = -1; // Default to -1 if job not found
+        this.queue.forEach((req) => {
+            if (req.id === jobID) {
+                ret = this.queue.indexOf(req);
+            }
+        });
+        this.completed.forEach((req) => {
+            if (req.id === jobID) {
+                ret = 'complete';
+            }
+        });
+        this.errors.forEach((req) => {
+            if (req.id === jobID) {
+                ret = 'error';
+            }
+        });
+        return ret;
+    }
+    async recurseGetResult(jobID, depth) {
+        // polling intervals in milliseconds
+        logger.info(`Checking job status of job ${jobID}...`);
+        const intervals = [100, 200, 400, 800, 1000, 2000, 3000, 5000];
+        depth = Math.min(depth, intervals.length - 1);
+        let status;
+        const p = new Promise((resolve, reject) => {
+            setTimeout(() => {
+                status = this.jobStatus(jobID);
+                if (status === 'complete' || status === 'error') {
+                    resolve(null);
+                }
+                else {
+                    reject();
+                }
+            }, intervals[depth]);
+        });
+        return p
+            .then(() => {
+            return this.getResult(jobID);
+        })
+            .catch(() => {
+            return this.recurseGetResult(jobID, depth + 1);
+        });
+    }
+    async getResult(jobID, _depth = 0) {
+        const status = this.jobStatus(jobID);
+        if (status === 'complete') {
+            const res = this.completed.find((val) => {
+                return val.id === jobID;
+            });
+            if (res) {
+                return res.result;
+            }
+            else {
+                return {
+                    error: 'No result found',
+                    ok: false,
+                    status: 'error',
+                };
+            }
+        }
+        else if (status === 'error') {
+            const res = this.errors.find((val) => {
+                return val.id === jobID;
+            });
+            if (!res) {
+                return {
+                    error: 'Job failed - no error log found',
+                    ok: false,
+                    status: 'error',
+                };
+            }
+            if (res.result) {
+                return res.result;
+            }
+            else {
+                // result is null b/c of an uncaugth exception
+                return {
+                    error: res.error,
+                    ok: false,
+                    status: 'error',
+                };
+            }
+        }
+        else {
+            return this.recurseGetResult(jobID, 0);
+        }
+    }
+    addRequest(req) {
+        const id = this.nextID++;
+        this.queue.push({
+            id: id,
+            request: req,
+        });
+        if (!this.processing) {
+            void this.process();
+        }
+        return id;
+    }
+    /**
+     *
+     */
+    constructor(processingFcn) {
+        this.processRequest = processingFcn;
+    }
+    async process() {
+        this.processing = true;
+        while (this.queue.length > 0) {
+            const req = this.queue[0];
+            logger.info(`Processing ${req.id}`);
+            try {
+                const result = await this.processRequest(req.request);
+                if (result.ok) {
+                    this.completed.push({
+                        id: req.id,
+                        request: req.request,
+                        result: result,
+                    });
+                }
+                else {
+                    if (result) {
+                        this.errors.push({
+                            id: req.id,
+                            request: req.request,
+                            result: result,
+                            error: result.error,
+                        });
+                    }
+                    else {
+                        this.errors.push({
+                            id: req.id,
+                            request: req.request,
+                            error: 'error',
+                            result: null,
+                        });
+                    }
+                }
+            }
+            catch (e) {
+                this.errors.push({
+                    id: req.id,
+                    request: req.request,
+                    result: null,
+                    error: e,
+                });
+            }
+            finally {
+                // remove the completed (or errored)
+                // request from the queue
+                this.queue.shift();
+            }
+        }
+        this.processing = false;
+    }
+}
+//# sourceMappingURL=processQueue.js.map

package/dist/express-assets/utils/processQueue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"processQueue.js","sourceRoot":"","sources":["../../src/utils/processQueue.ts"],"names":[],"mappings":"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"}

package/dist/studio-ui-src/App.vue

@@ -0,0 +1,132 @@
+<template>
+  <v-app>
+    <v-app-bar color="primary">
+      <v-toolbar-title>
+        <v-icon start>mdi-palette</v-icon>
+        Skuilder Studio
+      </v-toolbar-title>
+      <v-spacer />
+
+      <!-- Navigation buttons -->
+      <v-btn-group v-if="courseId" class="mr-4">
+        <v-btn :color="$route.name === 'browse' ? 'secondary' : 'transparent'" @click="$router.push('/')">
+          <v-icon start>mdi-magnify</v-icon>
+          Browse Course
+        </v-btn>
+        <v-btn
+          :color="$route.name === 'create-card' ? 'secondary' : 'transparent'"
+          @click="$router.push('/create-card')"
+        >
+          <v-icon start>mdi-card-plus</v-icon>
+          Create Card
+        </v-btn>
+        <v-btn
+          :color="$route.name === 'bulk-import' ? 'secondary' : 'transparent'"
+          @click="$router.push('/bulk-import')"
+        >
+          <v-icon start>mdi-file-import</v-icon>
+          Bulk Import
+        </v-btn>
+      </v-btn-group>
+
+      <studio-flush v-if="courseId" :course-id="courseId" />
+    </v-app-bar>
+
+    <v-main>
+      <v-container fluid>
+        <div v-if="loading" class="text-center pa-4">
+          <v-progress-circular indeterminate />
+          <p class="mt-2">Loading studio environment...</p>
+        </div>
+
+        <div v-else-if="error" class="text-center pa-4">
+          <v-icon color="error" size="48">mdi-alert-circle</v-icon>
+          <h2 class="mt-2">Studio Error</h2>
+          <p>{{ error }}</p>
+        </div>
+
+        <div v-else-if="courseId">
+          <!-- Course information header -->
+          <v-card class="mb-4" flat>
+            <v-card-text>
+              <div class="studio-header">
+                <h1>Course Editor</h1>
+                <p class="text-subtitle-1">
+                  Editing course: <strong>{{ courseId }}</strong>
+                </p>
+              </div>
+            </v-card-text>
+          </v-card>
+
+          <!-- Router view for different editing modes -->
+          <router-view />
+        </div>
+
+        <div v-else class="text-center pa-4">
+          <v-icon size="48">mdi-school</v-icon>
+          <h2 class="mt-2">No Course Loaded</h2>
+          <p>Studio is waiting for course data...</p>
+        </div>
+      </v-container>
+    </v-main>
+
+    <!-- Global services -->
+    <snackbar-service id="SnackbarService" />
+  </v-app>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { SnackbarService } from '@vue-skuilder/common-ui';
+import StudioFlush from './components/StudioFlush.vue';
+import { getStudioConfig, getConfigErrorMessage } from './config/development';
+
+// Studio state
+const loading = ref(true);
+const error = ref<string | null>(null);
+const courseId = ref<string | null>(null);
+
+// Initialize studio environment
+onMounted(async () => {
+  try {
+    // Get studio configuration (CLI-injected or environment variables)
+    const studioConfig = getStudioConfig();
+
+    if (!studioConfig) {
+      throw new Error(getConfigErrorMessage());
+    }
+
+    // Use the actual course ID from the configuration
+    courseId.value = studioConfig.database.name;
+
+    // Debug: Check if course database is accessible
+    console.log('Studio: Course ID set to', courseId.value);
+    console.log('Studio: Data layer initialized, checking course access...');
+
+    try {
+      const dataLayer = (await import('@vue-skuilder/db')).getDataLayer();
+      const courseDB = dataLayer.getCourseDB(studioConfig.database.name);
+      console.log('Studio: CourseDB obtained:', courseDB);
+
+      const courseConfig = await courseDB.getCourseConfig();
+      console.log('Studio: Course config loaded:', courseConfig);
+    } catch (dbError) {
+      console.error('Studio: Course database error:', dbError);
+    }
+
+    loading.value = false;
+  } catch (err) {
+    console.error('Studio: Initialization error:', err);
+    error.value = err instanceof Error ? err.message : 'Unknown error';
+    loading.value = false;
+  }
+});
+</script>
+
+<style scoped>
+.studio-header {
+  padding: 16px 0;
+  border-bottom: 1px solid #e0e0e0;
+  margin-bottom: 16px;
+}
+</style>

package/dist/studio-ui-src/api/index.ts

@@ -0,0 +1,30 @@
+import { ServerRequest, ServerRequestType, PackCourse } from '@vue-skuilder/common';
+
+async function postWithResult<T extends ServerRequest>(request: Omit<T, 'response' | 'user'>): Promise<T['response']> {
+    const response = await fetch('http://localhost:3000/', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(request),
+    });
+
+    if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    return await response.json();
+}
+
+export async function flushCourse(courseId: string, outputPath?: string) {
+    // Get the original course ID for the output path
+    // courseId here is the decorated database name, we need the original ID for the path
+    const studioConfig = (window as any).STUDIO_CONFIG;
+    const originalCourseId = studioConfig?.database?.originalCourseId || courseId;
+    
+    return await postWithResult<PackCourse>({
+        type: ServerRequestType.PACK_COURSE,
+        courseId,
+        outputPath: outputPath ? outputPath : `./public/static-courses/${originalCourseId}`,
+    });
+}

package/dist/studio-ui-src/components/StudioFlush.vue

@@ -0,0 +1,108 @@
+<template>
+  <v-btn
+    color="success"
+    :loading="flushing"
+    :disabled="flushing"
+    @click="handleFlush"
+  >
+    <v-icon start>mdi-content-save</v-icon>
+    Flush to Static
+  </v-btn>
+
+  <!-- Flush status dialog -->
+  <v-dialog v-model="showDialog" max-width="600" persistent>
+    <v-card>
+      <v-card-title>
+        <v-icon :color="dialogIcon.color" class="me-2">{{ dialogIcon.icon }}</v-icon>
+        {{ dialogTitle }}
+      </v-card-title>
+      
+      <v-card-text>
+        <div v-if="flushing">
+          <v-progress-linear indeterminate class="mb-4" />
+          <p>{{ flushStatus }}</p>
+        </div>
+        
+        <div v-else-if="flushError">
+          <v-alert type="error" class="mb-4">
+            {{ flushError }}
+          </v-alert>
+          <p>The flush operation failed. Please check the console for more details.</p>
+        </div>
+        
+        <div v-else>
+          <v-alert type="success" class="mb-4">
+            Course successfully saved to static files!
+          </v-alert>
+          <p>Your changes have been packed and saved to the course directory.</p>
+        </div>
+      </v-card-text>
+      
+      <v-card-actions>
+        <v-spacer />
+        <v-btn 
+          v-if="!flushing" 
+          color="primary" 
+          @click="showDialog = false"
+        >
+          Close
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { flushCourse } from '../api';
+
+interface Props {
+  courseId: string;
+}
+
+const props = defineProps<Props>();
+
+// Flush state
+const flushing = ref(false);
+const flushError = ref<string | null>(null);
+const flushStatus = ref('');
+const showDialog = ref(false);
+
+// Computed properties for dialog display
+const dialogTitle = computed(() => {
+  if (flushing.value) return 'Saving Course...';
+  if (flushError.value) return 'Save Failed';
+  return 'Course Saved';
+});
+
+const dialogIcon = computed(() => {
+  if (flushing.value) return { icon: 'mdi-loading', color: 'primary' };
+  if (flushError.value) return { icon: 'mdi-alert-circle', color: 'error' };
+  return { icon: 'mdi-check-circle', color: 'success' };
+});
+
+// Flush operation
+async function handleFlush() {
+  flushing.value = true;
+  flushError.value = null;
+  showDialog.value = true;
+  
+  try {
+    flushStatus.value = 'Connecting to CLI...';
+
+    const result = await flushCourse(props.courseId);
+
+    if (!result.ok) {
+      throw new Error(result.errorText ?? 'Unknown error');
+    }
+    
+  } catch (error) {
+    console.error('Flush failed:', error);
+    flushError.value = error instanceof Error ? error.message : 'Unknown error occurred';
+  } finally {
+    flushing.value = false;
+  }
+}
+
+
+</script>

package/dist/studio-ui-src/config/development.ts

@@ -0,0 +1,98 @@
+/**
+ * Development configuration utilities for studio-ui
+ * Handles both CLI-injected config and environment variable fallbacks
+ */
+
+export interface StudioConfig {
+  couchdb: {
+    url: string;
+    username: string;
+    password: string;
+  };
+  database: {
+    name: string;
+    courseId: string;
+  };
+}
+
+/**
+ * Get studio configuration from either CLI injection or environment variables
+ */
+export function getStudioConfig(): StudioConfig | null {
+  // First try CLI-injected configuration (production studio mode)
+  const cliConfig = (window as unknown as { STUDIO_CONFIG: StudioConfig | undefined }).STUDIO_CONFIG;
+  if (cliConfig?.couchdb) {
+    return cliConfig as StudioConfig;
+  }
+
+  // Fall back to environment variables (development mode)
+  const envConfig = getEnvironmentConfig();
+  if (envConfig) {
+    console.log('🔧 Studio Dev Mode: Using environment configuration');
+    return envConfig;
+  }
+
+  return null;
+}
+
+/**
+ * Parse studio configuration from environment variables
+ */
+function getEnvironmentConfig(): StudioConfig | null {
+  // Check if we're in development mode with studio environment variables
+  const couchUrl = import.meta.env.VITE_STUDIO_COUCH_URL;
+  const couchUser = import.meta.env.VITE_STUDIO_COUCH_USER;
+  const couchPass = import.meta.env.VITE_STUDIO_COUCH_PASS;
+  const courseId = import.meta.env.VITE_STUDIO_COURSE_ID;
+
+  if (!couchUrl || !couchUser || !couchPass || !courseId) {
+    return null;
+  }
+
+  // For development, we'll use the courseId as the database name
+  // This assumes the course has been unpacked to CouchDB already
+  const databaseName = courseId;
+
+  return {
+    couchdb: {
+      url: couchUrl,
+      username: couchUser,
+      password: couchPass,
+    },
+    database: {
+      name: databaseName,
+      courseId: courseId,
+    },
+  };
+}
+
+/**
+ * Check if we're running in development studio mode
+ */
+export function isDevelopmentStudioMode(): boolean {
+  return !!import.meta.env.VITE_STUDIO_COUCH_URL;
+}
+
+/**
+ * Get helpful error message for missing configuration
+ */
+export function getConfigErrorMessage(): string {
+  if (isDevelopmentStudioMode()) {
+    return `
+Studio development mode configuration incomplete. Please provide:
+- VITE_STUDIO_COUCH_URL (e.g., http://localhost:5985)
+- VITE_STUDIO_COUCH_USER (e.g., admin)
+- VITE_STUDIO_COUCH_PASS (e.g., admin)
+- VITE_STUDIO_COURSE_ID (e.g., 2aeb8315ef78f3e89ca386992d00825b)
+
+Run with: 
+VITE_STUDIO_COUCH_URL=http://localhost:5985 \\
+VITE_STUDIO_COUCH_USER=admin \\
+VITE_STUDIO_COUCH_PASS=admin \\
+VITE_STUDIO_COURSE_ID=your-course-id \\
+yarn dev:studio
+    `.trim();
+  }
+
+  return 'Studio configuration not found. Please run via skuilder CLI studio command.';
+}

package/dist/studio-ui-src/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Skuilder Studio</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>