sunpeak 0.12.6 → 0.12.8

package/bin/commands/build.mjs

@@ -1,11 +1,49 @@
 #!/usr/bin/env node
-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 { createRequire } from 'module';
+import { pathToFileURL } from 'url';
 import { toPascalCase } from '../lib/patterns.mjs';
 
+/**
+ * Resolve the ESM entry point for a package from a specific project directory.
+ * This avoids the CJS deprecation warning from packages like Vite.
+ */
+function resolveEsmEntry(require, packageName) {
+  // First resolve to find where the package is located
+  const resolvedPath = require.resolve(packageName);
+
+  // Walk up to find the package's package.json
+  let dir = path.dirname(resolvedPath);
+  while (dir !== path.dirname(dir)) {
+    const pkgJsonPath = path.join(dir, 'package.json');
+    if (existsSync(pkgJsonPath)) {
+      const pkg = JSON.parse(readFileSync(pkgJsonPath, 'utf-8'));
+      if (pkg.name === packageName) {
+        // Found the package.json, look for ESM entry in exports
+        const exports = pkg.exports;
+        if (exports?.['.']?.import) {
+          const importEntry = exports['.'].import;
+          // Handle nested conditions like { types, default }
+          const esmPath = typeof importEntry === 'string' ? importEntry : importEntry.default;
+          if (esmPath) {
+            return pathToFileURL(path.join(dir, esmPath)).href;
+          }
+        }
+        // Fallback to module field
+        if (pkg.module) {
+          return pathToFileURL(path.join(dir, pkg.module)).href;
+        }
+        break;
+      }
+    }
+    dir = path.dirname(dir);
+  }
+
+  // Fallback to resolved path (may be CJS)
+  return pathToFileURL(resolvedPath).href;
+}
+
 /**
  * Build all resources for a Sunpeak project
  * Runs in the context of a user's project directory
@@ -48,6 +86,31 @@ export async function build(projectRoot = process.cwd()) {
     process.exit(1);
   }
 
+  // Import vite and plugins from the user's project (not from sunpeak's node_modules)
+  // This allows sunpeak to work when installed globally
+  // We resolve to ESM entry points to avoid the CJS deprecation warning from Vite
+  const require = createRequire(path.join(projectRoot, 'package.json'));
+  let viteBuild, react, tailwindcss;
+  try {
+    const [viteModule, reactModule, tailwindModule] = await Promise.all([
+      import(resolveEsmEntry(require, 'vite')),
+      import(resolveEsmEntry(require, '@vitejs/plugin-react')),
+      import(resolveEsmEntry(require, '@tailwindcss/vite')),
+    ]);
+    viteBuild = viteModule.build;
+    react = reactModule.default;
+    tailwindcss = tailwindModule.default;
+  } catch (error) {
+    console.error('Error: Could not load build dependencies from your project.');
+    console.error('\nMake sure you have these packages installed in your project:');
+    console.error('  - vite');
+    console.error('  - @vitejs/plugin-react');
+    console.error('  - @tailwindcss/vite');
+    console.error('\nRun: npm install -D vite @vitejs/plugin-react @tailwindcss/vite');
+    console.error('\nOriginal error:', error.message);
+    process.exit(1);
+  }
+
   // Plugin factory to inline CSS into the JS bundle for all output files
   const inlineCssPlugin = (buildOutDir) => ({
     name: 'inline-css',

package/bin/commands/dev.mjs

@@ -182,9 +182,13 @@ export async function dev(projectRoot = process.cwd(), args = []) {
     console.log(`\nStarting MCP server with ${simulations.length} simulation(s)...`);
 
     // Virtual entry module plugin for MCP
-    // Import sunpeak styles directly via JS to avoid CSS @import alias issues with Lightning CSS.
-    // Then import app.css for user's @source directives and custom styles (no sunpeak import).
-    const sunpeakStylePath = isTemplate ? `${parentSrc}/style.css` : 'sunpeak/style.css';
+    // For internal dev (template): Import sunpeak styles directly via JS to avoid CSS @import
+    // alias issues with Lightning CSS, then import app.css for user customizations.
+    // For external users: Import OpenAI SDK CSS directly (ensures Tailwind processes @theme static),
+    // then import globals.css for user's Tailwind config and custom styles.
+    const styleImports = isTemplate
+      ? `import '${parentSrc}/style.css';\nimport '/src/styles/app.css';`
+      : `import '@openai/apps-sdk-ui/css';\nimport '/src/styles/globals.css';`;
 
     const sunpeakEntryPlugin = () => ({
       name: 'sunpeak-entry',
@@ -206,8 +210,7 @@ export async function dev(projectRoot = process.cwd(), args = []) {
           return `
 import { createElement } from 'react';
 import { createRoot } from 'react-dom/client';
-import '${sunpeakStylePath}';
-import '/src/styles/app.css';
+${styleImports}
 import * as ResourceModule from '${srcPath}';
 
 const Component = ResourceModule.default || ResourceModule['${componentName}'];

package/package.json

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