@juuno-sdk/cli 1.0.5 → 1.0.7

package/src/App.vue

@@ -1,350 +0,0 @@
-<script lang="ts">
-/**
- * Juuno CLI Development Tool.
- *
- * Loads external apps and displays them in a split-screen view.
- */
-export default {
-  name: 'JuunoCLI',
-};
-</script>
-
-<script setup lang="ts">
-import { ref, reactive, onMounted, shallowRef } from 'vue';
-import type { Component } from 'vue';
-import type { Scene } from '@juuno-sdk/app-sdk';
-import { provideAppConfigContext } from '@juuno-sdk/app-sdk';
-
-// Get external app URL from Vite define or fallback to default.
-const externalAppUrl = ref(
-  (window as any).__JUUNO_EXTERNAL_APP_URL__ ||
-    'http://localhost:5002/index.js',
-);
-
-// Dynamically loaded components from external app (use shallowRef to avoid reactive overhead)
-const PlayerComponent = shallowRef<Component | null>(null);
-const ConfigComponent = shallowRef<Component | null>(null);
-const isLoading = ref(true);
-const error = ref<string | null>(null);
-
-// Create scene (matching production pattern)
-const scene = reactive({
-  idx: 'simulator-scene-1',
-  name: 'Simulator Test Scene',
-  app: null,
-  meta: {
-    title: 'Test App',
-    backgroundColor: '#2c3e50',
-    textColor: '#ecf0f1',
-  },
-  mediaAssets: [],
-}) as Scene;
-
-// Create mock service for saving scene data
-const mockService = {
-  async save(updatedScene: Scene) {
-    console.log('Simulator: Scene updated', updatedScene);
-    // Sync changes back to the original scene object
-    Object.assign(scene, updatedScene);
-  },
-};
-
-// Provide context using production pattern (matches SceneAppConfig.vue)
-// NOTE: Passing original scene directly for live-sync - config changes immediately
-// reflect in player. Production clones the scene for draft/commit workflow.
-const appConfigContext = provideAppConfigContext(mockService, {
-  scene: scene,
-});
-
-// Load external app components
-onMounted(async () => {
-  try {
-    isLoading.value = true;
-    error.value = null;
-
-    console.log(`Loading external app from: ${externalAppUrl.value}`);
-
-    // Load player component from import map
-    const playerModule = await import('external-app/player');
-    PlayerComponent.value = playerModule.default;
-
-    if (!PlayerComponent.value) {
-      throw new Error(
-        'External app must export a default component from /player',
-      );
-    }
-
-    // Load config component from import map (optional)
-    try {
-      const configModule = await import('external-app/config');
-      ConfigComponent.value = configModule.default || null;
-    } catch (configErr) {
-      console.warn('Config component not found or failed to load:', configErr);
-      ConfigComponent.value = null;
-    }
-
-    // Load the scene into the app config context
-    appConfigContext.load(scene);
-
-    console.log('✅ External app loaded successfully');
-    isLoading.value = false;
-  } catch (err) {
-    console.error('Failed to load external app:', err);
-    error.value =
-      err instanceof Error ? err.message : 'Failed to load external app';
-    isLoading.value = false;
-  }
-});
-</script>
-
-<template>
-  <div class="juuno-cli">
-    <header class="header">
-      <div class="header-content">
-        <h1>Juuno CLI</h1>
-        <div class="header-info">
-          <span class="app-url">{{ externalAppUrl }}</span>
-        </div>
-      </div>
-    </header>
-
-    <div v-if="isLoading" class="loading-state">
-      <div class="spinner"></div>
-      <p>Loading external app...</p>
-      <p class="url-info">{{ externalAppUrl }}</p>
-    </div>
-
-    <div v-else-if="error" class="error-state">
-      <div class="error-icon">⚠️</div>
-      <h2>Failed to Load App</h2>
-      <p class="error-message">{{ error }}</p>
-      <div class="error-details">
-        <p><strong>App URL:</strong> {{ externalAppUrl }}</p>
-        <p><strong>Common Issues:</strong></p>
-        <ul>
-          <li>App dev server not running</li>
-          <li>CORS not enabled on app dev server</li>
-          <li>
-            App doesn't export required components from /player and /config
-          </li>
-          <li>Incorrect URL provided</li>
-          <li>Missing exports field in package.json</li>
-        </ul>
-      </div>
-    </div>
-
-    <div v-else class="container">
-      <!-- Player View -->
-      <div class="player-section">
-        <h2>Player View</h2>
-        <div class="player-preview">
-          <component
-            :is="PlayerComponent"
-            v-if="PlayerComponent"
-            :scene="scene"
-          />
-          <div v-else class="placeholder">No player component found</div>
-        </div>
-      </div>
-
-      <!-- Config View -->
-      <div class="config-section">
-        <h2>Configuration UI</h2>
-        <div class="config-panel">
-          <component :is="ConfigComponent" v-if="ConfigComponent" />
-          <div v-else class="placeholder">No config component found</div>
-        </div>
-      </div>
-    </div>
-
-    <footer class="footer">
-      <p>
-        <strong>Juuno CLI</strong> - Test your external app in a
-        production-like environment
-      </p>
-    </footer>
-  </div>
-</template>
-
-<style scoped>
-* {
-  box-sizing: border-box;
-}
-
-.juuno-cli {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  font-family:
-    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
-    Cantarell, sans-serif;
-  background-color: #f5f5f5;
-}
-
-.header {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  padding: 1.5rem 2rem;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.header-content {
-  max-width: 1600px;
-  margin: 0 auto;
-}
-
-.header h1 {
-  margin: 0 0 0.5rem 0;
-  font-size: 1.75rem;
-  font-weight: 600;
-}
-
-.header-info {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 1rem;
-}
-
-.app-url {
-  font-size: 0.875rem;
-  opacity: 0.9;
-  font-family: 'Courier New', monospace;
-}
-
-.loading-state,
-.error-state {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 3rem;
-  text-align: center;
-}
-
-.spinner {
-  width: 50px;
-  height: 50px;
-  border: 4px solid #f3f3f3;
-  border-top: 4px solid #667eea;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-.url-info {
-  margin-top: 1rem;
-  font-size: 0.875rem;
-  color: #666;
-  font-family: 'Courier New', monospace;
-}
-
-.error-icon {
-  font-size: 4rem;
-  margin-bottom: 1rem;
-}
-
-.error-message {
-  color: #d32f2f;
-  font-weight: 500;
-  margin: 1rem 0;
-}
-
-.error-details {
-  background: white;
-  border-radius: 8px;
-  padding: 1.5rem;
-  margin-top: 2rem;
-  text-align: left;
-  max-width: 600px;
-}
-
-.error-details ul {
-  margin: 0.5rem 0 0 1.5rem;
-  padding: 0;
-}
-
-.error-details li {
-  margin: 0.25rem 0;
-}
-
-.container {
-  flex: 1;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 2rem;
-  padding: 2rem;
-  max-width: 1600px;
-  margin: 0 auto;
-  width: 100%;
-}
-
-.player-section,
-.config-section {
-  background: white;
-  border-radius: 8px;
-  padding: 1.5rem;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-
-.player-section h2,
-.config-section h2 {
-  margin: 0 0 1rem 0;
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: #333;
-}
-
-.player-preview {
-  aspect-ratio: 16 / 9;
-  background: #000;
-  border-radius: 4px;
-  overflow: hidden;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-}
-
-.config-panel {
-  background: #fafafa;
-  border-radius: 4px;
-  padding: 1rem;
-  min-height: 400px;
-}
-
-.placeholder {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  color: #999;
-  font-style: italic;
-}
-
-.footer {
-  background: white;
-  padding: 1.5rem;
-  text-align: center;
-  border-top: 1px solid #e0e0e0;
-  color: #666;
-  font-size: 0.875rem;
-}
-
-.footer p {
-  margin: 0;
-}
-
-/* Responsive layout */
-@media (max-width: 1200px) {
-  .container {
-    grid-template-columns: 1fr;
-  }
-}
-</style>

package/src/deploy/index.ts

@@ -1,202 +0,0 @@
-import { readFileSync, existsSync, readdirSync } from 'fs';
-import { join, basename } from 'path';
-import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3';
-import { lookup } from 'mime-types';
-import inquirer from 'inquirer';
-
-interface ExternalAppManifest {
-  id: string;
-  version: string;
-  name: string;
-  resources: Record<string, string[]>;
-}
-
-interface DeployOptions {
-  buildDir: string;
-  apiKey?: string;
-}
-
-interface S3Credentials {
-  s3Token: {
-    accessKeyId: string;
-    secretAccessKey: string;
-    sessionToken?: string;
-  };
-  region: string;
-  bucket: string;
-  namespace: string;
-}
-
-/**
- * Exchange Juuno API key for temporary S3 credentials.
- */
-async function exchangeApiKey(apiKey: string): Promise<S3Credentials> {
-  // TODO: Replace with actual backend endpoint when ready.
-  const apiUrl = process.env.JUUNO_API_URL || 'https://api.juuno.co';
-
-  try {
-    const response = await fetch(
-      `${apiUrl}/api/external-apps/auth/exchange-key`,
-      {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ apiKey }),
-      },
-    );
-
-    if (!response.ok) {
-      throw new Error(`Authentication failed: ${response.statusText}`);
-    }
-
-    return await response.json();
-  } catch (error) {
-    throw new Error(
-      `Failed to authenticate with Juuno API. The backend endpoint may not be ready yet. Error: ${error instanceof Error ? error.message : String(error)}`,
-    );
-  }
-}
-
-/**
- * Upload a file to S3.
- */
-async function uploadFile(
-  s3Client: S3Client,
-  bucket: string,
-  key: string,
-  filePath: string,
-): Promise<void> {
-  const fileContent = readFileSync(filePath);
-  const contentType = lookup(filePath) || 'application/octet-stream';
-
-  const command = new PutObjectCommand({
-    Bucket: bucket,
-    Key: key,
-    Body: fileContent,
-    ContentType: contentType,
-  });
-
-  await s3Client.send(command);
-}
-
-/**
- * Deploy external app to S3.
- */
-export async function deployApp(options: DeployOptions): Promise<void> {
-  const buildDir = options.buildDir;
-
-  // 1. Validate build directory exists.
-  if (!existsSync(buildDir)) {
-    console.error(`❌ Build directory not found: ${buildDir}`);
-    console.error('   Run your build command first (e.g., npm run build)');
-    process.exit(1);
-  }
-
-  // 2. Load and validate manifest.
-  const manifestPath = join(buildDir, 'manifest.json');
-  if (!existsSync(manifestPath)) {
-    console.error(`❌ manifest.json not found in ${buildDir}`);
-    console.error('   Your build should generate a manifest.json file');
-    process.exit(1);
-  }
-
-  const manifest: ExternalAppManifest = JSON.parse(
-    readFileSync(manifestPath, 'utf-8'),
-  );
-
-  if (!manifest.id || !manifest.version || !manifest.name) {
-    console.error(
-      '❌ Invalid manifest.json - missing required fields (id, version, name)',
-    );
-    process.exit(1);
-  }
-
-  console.log(`📦 Deploying ${manifest.name} v${manifest.version}...`);
-  console.log('');
-
-  // 3. Prompt for API key if not provided.
-  let apiKey = options.apiKey;
-  if (!apiKey) {
-    const answers = await inquirer.prompt([
-      {
-        type: 'password',
-        name: 'apiKey',
-        message: 'Enter your Juuno API key:',
-        validate: (input: string) => {
-          if (!input || input.trim().length === 0) {
-            return 'API key is required';
-          }
-          return true;
-        },
-      },
-    ]);
-    apiKey = answers.apiKey;
-  }
-
-  // 4. Exchange API key for S3 credentials.
-  console.log('🔑 Authenticating...');
-  let credentials: S3Credentials;
-  try {
-    credentials = await exchangeApiKey(apiKey);
-    console.log(`✓ Authenticated as account: ${credentials.namespace}`);
-    console.log('');
-  } catch (error) {
-    console.error(
-      `❌ ${error instanceof Error ? error.message : String(error)}`,
-    );
-    process.exit(1);
-  }
-
-  // 5. Create S3 client with temporary credentials.
-  const s3Client = new S3Client({
-    region: credentials.region,
-    credentials: {
-      accessKeyId: credentials.s3Token.accessKeyId,
-      secretAccessKey: credentials.s3Token.secretAccessKey,
-      ...(credentials.s3Token.sessionToken && {
-        sessionToken: credentials.s3Token.sessionToken,
-      }),
-    },
-  });
-
-  // 6. Upload all files from build directory.
-  const s3Path = `${credentials.namespace}/${manifest.id}/${manifest.version}`;
-  const files = readdirSync(buildDir).filter((file) =>
-    existsSync(join(buildDir, file)),
-  );
-
-  console.log(`☁️  Uploading to s3://${credentials.bucket}/${s3Path}/`);
-  console.log('');
-
-  for (const file of files) {
-    const filePath = join(buildDir, file);
-    const s3Key = `${s3Path}/${file}`;
-
-    process.stdout.write(`   Uploading ${file}... `);
-
-    try {
-      await uploadFile(s3Client, credentials.bucket, s3Key, filePath);
-      process.stdout.write('✓\n');
-    } catch (error) {
-      process.stdout.write('✗\n');
-      console.error(
-        `   Error: ${error instanceof Error ? error.message : String(error)}`,
-      );
-      process.exit(1);
-    }
-  }
-
-  // 7. Generate manifest URL and display success message.
-  const manifestUrl = `https://${credentials.bucket}.s3.${credentials.region}.amazonaws.com/${s3Path}/manifest.json`;
-
-  console.log('');
-  console.log('✅ Deployment successful!');
-  console.log('');
-  console.log('📋 Manifest URL:');
-  console.log(`   ${manifestUrl}`);
-  console.log('');
-  console.log('→ Next steps:');
-  console.log('   1. Go to your Juuno account');
-  console.log('   2. Navigate to SDK > Custom Apps');
-  console.log('   3. Add a new custom app with the manifest URL above');
-  console.log('');
-}

package/src/main.ts

@@ -1,5 +0,0 @@
-import { createApp } from 'vue';
-import App from './App.vue';
-
-const app = createApp(App);
-app.mount('#app');