sunpeak 0.5.28 → 0.5.30

package/bin/commands/build.mjs

@@ -1,15 +1,15 @@
 #!/usr/bin/env node
-import { execSync } from 'child_process';
-import { existsSync, rmSync, readdirSync, readFileSync, writeFileSync, mkdirSync, copyFileSync } from 'fs';
+import { build as viteBuild } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
+import { existsSync, rmSync, readdirSync, readFileSync, writeFileSync, mkdirSync, copyFileSync, unlinkSync } from 'fs';
 import path from 'path';
-import { detectPackageManager } from '../utils.mjs';
 
 /**
  * Build all resources for a Sunpeak project
  * Runs in the context of a user's project directory
  */
 export async function build(projectRoot = process.cwd()) {
-  const pm = detectPackageManager(projectRoot);
 
   // Check for package.json first
   const pkgJsonPath = path.join(projectRoot, 'package.json');
@@ -24,7 +24,6 @@ export async function build(projectRoot = process.cwd()) {
   const tempDir = path.join(projectRoot, '.tmp');
   const resourcesDir = path.join(projectRoot, 'src/components/resources');
   const templateFile = path.join(projectRoot, 'src/index-resource.tsx');
-  const viteConfigFile = path.join(projectRoot, 'vite.config.build.ts');
 
   // Validate project structure
   if (!existsSync(resourcesDir)) {
@@ -44,13 +43,31 @@ export async function build(projectRoot = process.cwd()) {
     process.exit(1);
   }
 
-  if (!existsSync(viteConfigFile)) {
-    console.error('Error: vite.config.build.ts not found');
-    console.error('Expected location: ' + viteConfigFile);
-    console.error('\nThis Vite config is required for building resources.');
-    console.error('If you have renamed it, you may need to use a custom build script.');
-    process.exit(1);
-  }
+  // Plugin factory to inline CSS into the JS bundle for all output files
+  const inlineCssPlugin = (buildOutDir) => ({
+    name: 'inline-css',
+    closeBundle() {
+      const cssFile = path.join(buildOutDir, 'style.css');
+
+      if (existsSync(cssFile)) {
+        const css = readFileSync(cssFile, 'utf-8');
+        const injectCss = `(function(){var s=document.createElement('style');s.textContent=${JSON.stringify(css)};document.head.appendChild(s);})();`;
+
+        // Find all .js files in the dist directory and inject CSS
+        const files = readdirSync(buildOutDir);
+        files.forEach((file) => {
+          if (file.endsWith('.js')) {
+            const jsFile = path.join(buildOutDir, file);
+            const js = readFileSync(jsFile, 'utf-8');
+            writeFileSync(jsFile, injectCss + js);
+          }
+        });
+
+        // Remove the separate CSS file after injecting into all bundles
+        unlinkSync(cssFile);
+      }
+    },
+  });
 
   // Clean dist and temp directories
   if (existsSync(distDir)) {
@@ -111,8 +128,9 @@ export async function build(projectRoot = process.cwd()) {
   }
 
   // Build all resources (but don't copy yet)
-  resourceFiles.forEach(({ componentName, componentFile, entry, output, buildOutDir }, index) => {
-    console.log(`[${index + 1}/${resourceFiles.length}] Building ${output}...`);
+  for (let i = 0; i < resourceFiles.length; i++) {
+    const { componentName, componentFile, entry, output, buildOutDir } = resourceFiles[i];
+    console.log(`[${i + 1}/${resourceFiles.length}] Building ${output}...`);
 
     try {
       // Create build directory if it doesn't exist
@@ -128,26 +146,43 @@ export async function build(projectRoot = process.cwd()) {
       const entryPath = path.join(projectRoot, entry);
       writeFileSync(entryPath, entryContent);
 
-      // Build with vite to build directory
-      const viteCommand = pm === 'npm' ? 'npx vite' : `${pm} exec vite`;
-      execSync(
-        `${viteCommand} build --config vite.config.build.ts`,
-        {
-          cwd: projectRoot,
-          stdio: 'inherit',
-          env: {
-            ...process.env,
-            ENTRY_FILE: entry,
-            OUTPUT_FILE: output,
-            OUT_DIR: buildOutDir,
+      // Build with vite programmatically
+      await viteBuild({
+        root: projectRoot,
+        plugins: [react(), tailwindcss(), inlineCssPlugin(buildOutDir)],
+        define: {
+          'process.env.NODE_ENV': JSON.stringify('production'),
+        },
+        resolve: {
+          conditions: ['style', 'import', 'module', 'browser', 'default'],
+        },
+        build: {
+          target: 'es2020',
+          outDir: buildOutDir,
+          emptyOutDir: true,
+          cssCodeSplit: false,
+          lib: {
+            entry: entryPath,
+            name: 'SunpeakApp',
+            formats: ['iife'],
+            fileName: () => output,
           },
-        }
-      );
+          rollupOptions: {
+            output: {
+              inlineDynamicImports: true,
+              assetFileNames: 'style.css',
+            },
+          },
+          minify: true,
+          cssMinify: true,
+        },
+      });
     } catch (error) {
       console.error(`Failed to build ${output}`);
+      console.error(error);
       process.exit(1);
     }
-  });
+  }
 
   // Now copy all files from build-output to dist/chatgpt
   console.log('\nCopying built files to dist/chatgpt...');

package/bin/commands/dev.mjs

@@ -1,16 +1,15 @@
 #!/usr/bin/env node
-import { spawn } from 'child_process';
+import { createServer } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
 import { existsSync } from 'fs';
 import { join } from 'path';
-import { detectPackageManager } from '../utils.mjs';
 
 /**
  * Start the Vite development server
  * Runs in the context of a user's project directory
  */
 export async function dev(projectRoot = process.cwd(), args = []) {
-  const pm = detectPackageManager(projectRoot);
-
   // Check for package.json
   const pkgJsonPath = join(projectRoot, 'package.json');
   if (!existsSync(pkgJsonPath)) {
@@ -20,52 +19,37 @@ export async function dev(projectRoot = process.cwd(), args = []) {
   }
 
   // Parse port from args or use default
-  let port = process.env.PORT || '6767';
+  let port = parseInt(process.env.PORT || '6767');
   const portArgIndex = args.findIndex(arg => arg === '--port' || arg === '-p');
   if (portArgIndex !== -1 && args[portArgIndex + 1]) {
-    port = args[portArgIndex + 1];
+    port = parseInt(args[portArgIndex + 1]);
   }
 
-  // Build vite command
-  const viteCommand = pm === 'npm' ? 'npx' : pm;
-  const viteArgs = pm === 'npm' ? ['vite'] : ['exec', 'vite'];
-
-  // Add port
-  viteArgs.push('--port', port);
-
-  // Add any additional args (filtering out port if already handled)
-  const additionalArgs = portArgIndex !== -1
-    ? [...args.slice(0, portArgIndex), ...args.slice(portArgIndex + 2)]
-    : args;
-  viteArgs.push(...additionalArgs);
-
   console.log(`Starting Vite dev server on port ${port}...`);
 
-  // Spawn vite process
-  const child = spawn(viteCommand, viteArgs, {
-    cwd: projectRoot,
-    stdio: 'inherit',
-    env: {
-      ...process.env,
-      PORT: port,
-      FORCE_COLOR: '1',
+  // Create and start Vite dev server programmatically
+  const server = await createServer({
+    root: projectRoot,
+    plugins: [react(), tailwindcss()],
+    server: {
+      port,
+      open: true,
     },
   });
 
-  // Forward signals
-  process.on('SIGINT', () => {
-    child.kill('SIGINT');
-    process.exit(0);
-  });
+  await server.listen();
+  server.printUrls();
+  server.bindCLIShortcuts({ print: true });
 
-  process.on('SIGTERM', () => {
-    child.kill('SIGTERM');
+  // Handle signals
+  process.on('SIGINT', async () => {
+    await server.close();
     process.exit(0);
   });
 
-  // Handle child exit
-  child.on('exit', (code) => {
-    process.exit(code || 0);
+  process.on('SIGTERM', async () => {
+    await server.close();
+    process.exit(0);
   });
 }
 

package/bin/commands/mcp.mjs

@@ -19,15 +19,6 @@ export async function mcp(projectRoot = process.cwd(), args = []) {
     process.exit(1);
   }
 
-  // Check for nodemon config
-  const nodemonConfigPath = join(projectRoot, 'nodemon.json');
-  if (!existsSync(nodemonConfigPath)) {
-    console.error('Error: nodemon.json not found');
-    console.error('Expected location: ' + nodemonConfigPath);
-    console.error('\nThe MCP server requires nodemon.json for auto-reload configuration.');
-    process.exit(1);
-  }
-
   console.log('Starting MCP server with auto-reload...');
   console.log('Watching src/ for changes...\n');
 
@@ -35,6 +26,17 @@ export async function mcp(projectRoot = process.cwd(), args = []) {
   const nodemonCommand = pm === 'npm' ? 'npx' : pm;
   const nodemonArgs = pm === 'npm' ? ['nodemon'] : ['exec', 'nodemon'];
 
+  // Add inline nodemon configuration
+  nodemonArgs.push(
+    '--watch', 'src',
+    '--ext', 'ts,tsx,js,jsx,css',
+    '--ignore', 'dist',
+    '--ignore', 'node_modules',
+    '--ignore', '.tmp',
+    '--delay', '500ms',
+    '--exec', 'sunpeak build && tsx node_modules/sunpeak/dist/mcp/entry.js'
+  );
+
   // Add any additional args
   nodemonArgs.push(...args);
 

package/dist/chatgpt/globals.css

@@ -1,6 +1,3 @@
-/* Establish explicit layer order to ensure SDK UI components beat Tailwind's preflight */
-@layer properties, theme, base, components, utilities;
-
 @import "tailwindcss";
 @import "@openai/apps-sdk-ui/css";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sunpeak",
-  "version": "0.5.28",
+  "version": "0.5.30",
   "description": "The MCP App SDK. Quickstart, build, & test your ChatGPT App locally!",
   "type": "module",
   "main": "./dist/index.cjs",