sunpeak 0.3.5 → 0.3.7

package/README.md

@@ -28,7 +28,7 @@ Build and test your ChatGPT App UI locally with OpenAI apps-sdk-ui React compone
 Requirements: Node (20+), pnpm (10+)
 
 ```bash
-pnpm dlx sunpeak init
+pnpm dlx sunpeak new
 ```
 
 ### Existing Projects
@@ -99,6 +99,7 @@ For development quickstart on this package, see [DEVELOPMENT.md](./DEVELOPMENT.m
 ## Resources
 
 - [ChatGPT Apps SDK Design Guidelines](https://developers.openai.com/apps-sdk/concepts/design-guidelines)
-- [ChatGPT Apps SDK UI Documentation](https://developers.openai.com/apps-sdk/build/chatgpt-ui)
+- [ChatGPT Apps SDK Documentation - UI](https://developers.openai.com/apps-sdk/build/chatgpt-ui)
 - [ChatGPT Apps SDK window.openai Reference](https://developers.openai.com/apps-sdk/build/mcp-server#understand-the-windowopenai-widget-runtime)
 - [ChatGPT Apps SDK Examples](https://github.com/openai/openai-apps-sdk-examples)
+- [ChatGPT Apps SDK UI Documentation](https://openai.github.io/apps-sdk-ui/)

package/bin/sunpeak.js

@@ -80,13 +80,13 @@ See README.md for more details.
 
 const [,, command, ...args] = process.argv;
 
-if (command === 'init') {
+if (command === 'new') {
   init(args[0]);
 } else {
   console.log(`
 sunpeak - ChatGPT Apps UI SDK
 
 Commands:
-  init [name]  Create a new project from template
+  new [name]  Create a new project from template
 `);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sunpeak",
-  "version": "0.3.5",
+  "version": "0.3.7",
   "description": "The ChatGPT Apps UI SDK. Build and test your ChatGPT App UI locally with OpenAI apps-sdk-ui components.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -66,6 +66,7 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
+    "@playwright/test": "^1.56.1",
     "@tailwindcss/vite": "^4.1.17",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
@@ -105,6 +106,8 @@
     "dev": "pnpm --filter my-sunpeak-app dev",
     "lint": "eslint . --ext .ts,.tsx --fix",
     "typecheck": "tsc --noEmit",
-    "test": "vitest run"
+    "test": "vitest run",
+    "test:e2e": "playwright test",
+    "validate": "node scripts/validate.mjs"
   }
 }

package/template/README.md

@@ -30,13 +30,20 @@ dist/                # Build output (generated)
 
 ### Testing Locally
 
-Run the following scripts, and manually QA the UI from the dev server:
+Run all the checks with the following:
+
+```bash
+pnpm validate
+```
+
+This will:
+- Run linting, typechecking, and unit tests
+- Build your app
+- Verify that build outputs are created correctly
+
+For manual QA of the UI, run:
 
 ```bash
-pnpm lint
-pnpm typecheck
-pnpm test
-pnpm build
 pnpm dev
 ```
 

package/template/package.json

@@ -5,11 +5,12 @@
   "type": "module",
   "scripts": {
     "build": "vite build --config vite.config.build.ts",
-    "dev": "vite",
+    "dev": "vite --port ${PORT:-6767}",
     "mcp": "tsx mcp/server.ts",
     "lint": "eslint . --ext .ts,.tsx --fix",
     "typecheck": "tsc --noEmit",
-    "test": "vitest run"
+    "test": "vitest run",
+    "validate": "node scripts/validate.mjs"
   },
   "dependencies": {
     "@openai/apps-sdk-ui": "^0.2.0",

package/template/scripts/validate.mjs

@@ -0,0 +1,171 @@
+#!/usr/bin/env node
+
+/**
+ * Local testing script for Sunpeak project.
+ */
+
+import { execSync, spawn } from 'child_process';
+import { existsSync, readdirSync } from 'fs';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+import http from 'http';
+
+// Color codes for output
+const colors = {
+  red: '\x1b[0;31m',
+  green: '\x1b[0;32m',
+  blue: '\x1b[0;34m',
+  yellow: '\x1b[1;33m',
+  reset: '\x1b[0m',
+};
+
+// Get project root
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const PROJECT_ROOT = join(__dirname, '..');
+
+function printSuccess(text) {
+  console.log(`${colors.green}✓ ${text}${colors.reset}`);
+}
+
+function printError(text) {
+  console.log(`${colors.red}✗ ${text}${colors.reset}`);
+}
+
+function runCommand(command, cwd) {
+  try {
+    execSync(command, {
+      cwd,
+      stdio: 'inherit',
+      env: { ...process.env, FORCE_COLOR: '1' },
+    });
+    return true;
+  } catch (error) {
+    return false;
+  }
+}
+
+function waitForServer(port, timeout = 10000) {
+  return new Promise((resolve, reject) => {
+    const startTime = Date.now();
+    const checkServer = () => {
+      const req = http.get(`http://localhost:${port}`, () => {
+        resolve();
+      });
+      req.on('error', () => {
+        if (Date.now() - startTime > timeout) {
+          reject(new Error(`Server did not start within ${timeout}ms`));
+        } else {
+          setTimeout(checkServer, 500);
+        }
+      });
+      req.end();
+    };
+    checkServer();
+  });
+}
+
+// Main testing flow
+console.log(`${colors.yellow}Starting local testing for Sunpeak project...${colors.reset}`);
+console.log(`Project root: ${PROJECT_ROOT}\n`);
+
+try {
+  console.log('Running: pnpm install');
+  if (!runCommand('pnpm install', PROJECT_ROOT)) {
+    throw new Error('pnpm install failed');
+  }
+  console.log()
+  printSuccess('pnpm install');
+
+  console.log('\nRunning: pnpm lint');
+  if (!runCommand('pnpm lint', PROJECT_ROOT)) {
+    throw new Error('pnpm lint failed');
+  }
+  printSuccess('pnpm lint');
+
+  console.log('\nRunning: pnpm typecheck');
+  if (!runCommand('pnpm typecheck', PROJECT_ROOT)) {
+    throw new Error('pnpm typecheck failed');
+  }
+  printSuccess('pnpm typecheck');
+
+  console.log('\nRunning: pnpm test');
+  if (!runCommand('pnpm test', PROJECT_ROOT)) {
+    throw new Error('pnpm test failed');
+  }
+  printSuccess('pnpm test');
+
+  console.log('\nRunning: pnpm build');
+  if (!runCommand('pnpm build', PROJECT_ROOT)) {
+    throw new Error('pnpm build failed');
+  }
+  const chatgptDir = join(PROJECT_ROOT, 'dist', 'chatgpt');
+  const builtFile = join(chatgptDir, 'index.js');
+  if (!existsSync(builtFile)) {
+    printError('Missing expected file: ./dist/chatgpt/index.js');
+    process.exit(1);
+  }
+  const files = readdirSync(chatgptDir);
+  if (files.length !== 1 || files[0] !== 'index.js') {
+    printError(`Unexpected files in ./dist/chatgpt/: ${files.join(', ')}`);
+    printError('Expected only: index.js');
+    process.exit(1);
+  }
+  console.log()
+  printSuccess('pnpm build');
+
+  // MCP Server Check
+  console.log('\nRunning: pnpm mcp');
+  const mcpProcess = spawn('pnpm', ['mcp'], {
+    cwd: PROJECT_ROOT,
+    stdio: ['ignore', 'pipe', 'pipe'],
+    env: { ...process.env, FORCE_COLOR: '1' },
+  });
+
+  const mcpErrors = [];
+
+  mcpProcess.stderr.on('data', (data) => {
+    const message = data.toString();
+    if (message.includes('error') || message.includes('Error')) {
+      mcpErrors.push(message.trim());
+    }
+  });
+
+  // Store process for cleanup
+  process.on('exit', () => {
+    if (mcpProcess && !mcpProcess.killed) {
+      mcpProcess.kill();
+    }
+  });
+
+  try {
+    console.log('\nWaiting for MCP server to start on port 6766...');
+    await waitForServer(6766, 10000);
+
+    // Give it a moment to ensure no immediate errors
+    await new Promise(resolve => setTimeout(resolve, 1000));
+
+    if (mcpErrors.length > 0) {
+      printError('MCP server started but reported errors:');
+      mcpErrors.forEach(err => console.log(`  ${err}`));
+      throw new Error('MCP server has errors');
+    }
+
+  } catch (error) {
+    printError(`MCP server failed to start: ${error.message}`);
+    throw error;
+  } finally {
+    console.log('Stopping MCP server...');
+    mcpProcess.kill();
+    // Give it a moment to shut down
+    await new Promise(resolve => setTimeout(resolve, 1000));
+  }
+  console.log()
+  printSuccess('pnpm mcp\n');
+
+  printSuccess('All systems GO!\n\n');
+  process.exit(0);
+} catch (error) {
+  console.error(`\n${colors.red}Error: ${error.message}${colors.reset}\n`);
+  process.exit(1);
+}

package/template/src/App.tsx

@@ -1,4 +1,5 @@
 import './styles/globals.css';
+import 'sunpeak/style.css';
 
 import { useWidgetProps } from 'sunpeak';
 import { OpenAICarousel, OpenAICard } from './components';

package/template/src/styles/globals.css

@@ -1,6 +1,5 @@
 @import "tailwindcss";
 @import "@openai/apps-sdk-ui/css";
-@import "sunpeak/style.css";
 
 /* Required for Tailwind to find class references in Apps SDK UI components. */
 @source "../node_modules/@openai/apps-sdk-ui";

package/template/tsconfig.json

@@ -22,12 +22,7 @@
     "declarationMap": true,
     "sourceMap": true,
 
-    "baseUrl": ".",
-    "paths": {
-      "sunpeak": ["../src/index.ts"],
-      "sunpeak/*": ["../src/*"],
-      "~/*": ["../src/*"]
-    }
+    "baseUrl": "."
   },
   "include": ["src", "dev"],
   "references": [{ "path": "./tsconfig.node.json" }]

package/template/vite.config.build.ts

@@ -4,6 +4,10 @@ import path from 'path';
 import tailwindcss from '@tailwindcss/vite';
 import { readFileSync, writeFileSync, unlinkSync, existsSync } from 'fs';
 
+// Check if we're in the sunpeak workspace (directory is named "template")
+const isTemplate = path.basename(__dirname) === 'template';
+const parentSrc = path.resolve(__dirname, '../src');
+
 // Plugin to inline CSS into the JS bundle
 function inlineCssPlugin() {
   return {
@@ -35,8 +39,11 @@ export default defineConfig({
   },
   resolve: {
     alias: {
-      'sunpeak': path.resolve(__dirname, '../src'),
-      '~': path.resolve(__dirname, '../src'),
+      // In workspace dev mode, use local sunpeak source
+      ...(isTemplate && {
+        'sunpeak': parentSrc,
+        '~': parentSrc,
+      }),
     },
     conditions: ['style', 'import', 'module', 'browser', 'default'],
   },

package/template/vitest.config.ts

@@ -1,6 +1,10 @@
 import { defineConfig } from 'vitest/config';
 import path from 'path';
 
+// Check if we're in the sunpeak workspace (directory is named "template")
+const isTemplate = path.basename(__dirname) === 'template';
+const parentSrc = path.resolve(__dirname, '../src');
+
 export default defineConfig({
   test: {
     globals: true,
@@ -9,8 +13,11 @@ export default defineConfig({
   },
   resolve: {
     alias: {
-      'sunpeak': path.resolve(__dirname, '../src'),
-      '~': path.resolve(__dirname, '../src'),
+      // In workspace dev mode, use local sunpeak source
+      ...(isTemplate && {
+        'sunpeak': parentSrc,
+        '~': parentSrc,
+      }),
     },
   },
 });