juxscript 1.0.22 → 1.0.24

package/bin/cli.js

@@ -49,7 +49,6 @@ console.log(`   Output:   ${PATHS.frontendDist}`);
 console.log(`   Lib:      ${PATHS.juxLib}\n`);
 
 const command = process.argv[2];
-const subCommand = process.argv[3]; // For serve <pagename>
 const watchMode = process.argv.includes('--watch');
 const bundleMode = process.argv.includes('--bundle');
 
@@ -234,18 +233,21 @@ async function buildProject(isServe = false) {
     // Create structure
     fs.mkdirSync(juxDir, { recursive: true });
 
-    // Copy hey.jux from presets as starter template
-    const heyTemplatePath = path.join(PATHS.packageRoot, 'presets', 'hey.jux');
-    const heyTargetPath = path.join(juxDir, 'hey.jux');
+    // Copy hey.jux as the starter template
+    const heyJuxSrc = path.join(PATHS.packageRoot, 'presets', 'hey.jux');
+    const heyJuxDest = path.join(juxDir, 'index.jux');
 
-    if (fs.existsSync(heyTemplatePath)) {
-      fs.copyFileSync(heyTemplatePath, heyTargetPath);
-      console.log('+ Created jux/hey.jux (starter template)');
+    if (fs.existsSync(heyJuxSrc)) {
+      fs.copyFileSync(heyJuxSrc, heyJuxDest);
+      console.log('+ Created jux/index.jux from hey.jux template');
     } else {
-      console.warn('⚠️  hey.jux template not found in presets/');
+      console.warn('⚠️  hey.jux template not found, creating basic file');
+      const basicContent = `import { jux } from 'juxscript';\n\njux.heading('welcome').text('Welcome to JUX').render('#app');`;
+      fs.writeFileSync(heyJuxDest, basicContent);
+      console.log('+ Created jux/index.jux');
     }
 
-    // Copy over presets/*.css as styles/ to jux/
+    // Copy preset styles to jux/styles/
     const presetsSrc = path.join(PATHS.packageRoot, 'presets');
     const stylesDest = path.join(juxDir, 'styles');
 
@@ -254,6 +256,7 @@ async function buildProject(isServe = false) {
 
       const presetFiles = fs.readdirSync(presetsSrc);
       presetFiles.forEach(file => {
+        // Only copy CSS files, skip hey.jux
         if (file.endsWith('.css')) {
           const srcFile = path.join(presetsSrc, file);
           const destFile = path.join(stylesDest, file);
@@ -279,7 +282,7 @@ async function buildProject(isServe = false) {
         }
       };
       fs.writeFileSync(pkgPath, JSON.stringify(pkgContent, null, 2));
-      console.log('✅ Created package.json');
+      console.log('+ Created package.json');
     }
 
     // Create .gitignore
@@ -294,9 +297,10 @@ node_modules/
       console.log('+ Created .gitignore');
     }
 
-    console.log('+ Created jux/ directory\n');
+    console.log('\n✅ JUX project initialized!\n');
     console.log('Next steps:');
-    console.log('  npx jux serve hey        # Start dev server for hey.jux\n');
+    console.log('  npm install              # Install dependencies');
+    console.log('  npx jux serve            # Start dev server with hot reload\n');
     console.log('Check out the docs: https://juxscript.com/docs\n');
 
   } else if (command === 'build') {
@@ -305,37 +309,28 @@ node_modules/
     console.log(`✅ Build complete: ${PATHS.frontendDist}`);
 
   } else if (command === 'serve') {
-    // ✅ Serve with optional page parameter
-    const pageName = subCommand; // e.g., "hey" from "npx jux serve hey"
-
-    if (pageName) {
-      console.log(`🎯 Serving specific page: ${pageName}\n`);
-    }
-
+    // ✅ Always serves router bundle
     await buildProject(true);
 
-    const port = pageName ? 3000 : (parseInt(subCommand) || 3000);
-
-    // Start server
-    await start(port, pageName);
+    const port = parseInt(process.argv[3]) || 3000;
+    await start(port);
 
   } else {
     console.log(`
 JUX CLI - A JavaScript UX authorship platform
 
 Usage:
-  npx jux init               Initialize a new JUX project
-  npx jux build              Build router bundle to ./jux-dist/
-  npx jux serve [page]       Start dev server (optionally for specific page)
-  npx jux serve [port]       Start dev server on custom port
+  npx jux init          Initialize a new JUX project
+  npx jux build         Build router bundle to ./jux-dist/
+  npx jux serve [port]  Start dev server with hot reload (default: 3000)
 
 Project Structure:
   my-project/
   ├── jux/              # Your .jux source files
-  │   ├── hey.jux       # Starter page (created by init)
-  │   └── pages/        # Additional pages
-  ├── jux-dist/         # Build output (git-ignore this)
-  ├── server/           # Your backend
+  │   ├── index.jux    # Entry point
+  │   └── pages/       # Additional pages
+  ├── jux-dist/        # Build output (git-ignore this)
+  ├── server/          # Your backend
   └── package.json
 
 Import Style:
@@ -344,17 +339,15 @@ Import Style:
   import 'juxscript/presets/notion.js';
 
 Getting Started:
-  1. npx jux init          # Create project structure
-  2. npm install           # Install dependencies
-  3. npx jux serve hey     # Dev server for hey.jux at localhost:3000/hey
-  4. npx jux serve         # Dev server for all pages
-  5. Serve jux-dist/ from your backend
+  1. npx jux init      # Create project structure
+  2. npm install       # Install dependencies
+  3. npx jux serve     # Dev server with hot reload
+  4. Serve jux-dist/ from your backend
 
 Examples:
-  npx jux build            Build production bundle
-  npx jux serve            Start dev server on port 3000 (all pages)
-  npx jux serve hey        Start dev server at localhost:3000/hey
-  npx jux serve 8080       Start dev server on port 8080
+  npx jux build        Build production bundle
+  npx jux serve        Start dev server on port 3000
+  npx jux serve 8080   Start dev server on port 8080
     `);
   }
 })();

package/machinery/server.js

@@ -87,12 +87,9 @@ async function serve(port = 3000, distDir = './jux-dist') {
 
   // Start HTTP server
   server.listen(port, () => {
-    console.log(`\n🚀 JUX dev server running`);
-    console.log(`   Local: http://localhost:${port}${pageName ? '/' + pageName : ''}`);
-    if (pageName) {
-      console.log(`   (Root redirects to /${pageName})`);
-    }
-    console.log('');
+    console.log(`🚀 JUX dev server running at http://localhost:${port}`);
+    console.log(`   Serving: ${absoluteDistDir}`);
+    console.log(`   Press Ctrl+C to stop\n`);
   });
 
   // Start file watcher
@@ -116,27 +113,6 @@ async function serve(port = 3000, distDir = './jux-dist') {
   return { server };
 }
 
-export async function start(port = 3000, pageName = null) {
-  const app = express();
-
-  // ...existing code for static files...
-
-  // If pageName specified, redirect root to that page
-  if (pageName) {
-    app.get('/', (req, res) => {
-      res.redirect(`/${pageName}`);
-    });
-    console.log(`🎯 Root (/) redirects to /${pageName}`);
-  }
-
-  // ...existing code...
-
-  app.listen(port, () => {
-    console.log(`\n🚀 JUX dev server running`);
-    console.log(`   Local: http://localhost:${port}${pageName ? '/' + pageName : ''}`);
-    if (pageName) {
-      console.log(`   (Root redirects to /${pageName})`);
-    }
-    console.log('');
-  });
+export async function start(port = 3000) {
+  return serve(port, './jux-dist');
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.0.22",
+  "version": "1.0.24",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "lib/jux.js",

package/presets/hey.jux

@@ -1,7 +1,7 @@
 import { jux } from 'juxscript';
 
-// Welcome page - edit this to build your app
-jux.hero('welcome-hero', {
+// Welcome page with examples
+jux.hero('welcome', {
     title: 'Welcome to JUX',
     subtitle: 'A JavaScript UX authorship platform'
 }).render('#app');
@@ -12,35 +12,49 @@ jux.container('getting-started')
     .style('max-width: 800px; margin: 2rem auto; padding: 2rem;')
     .render('#app');
 
-jux.heading('gs-title')
+jux.heading('start-heading')
     .level(2)
     .text('Getting Started')
     .render('#getting-started');
 
-jux.paragraph('gs-intro')
-    .text('Edit jux/hey.jux to start building your application.')
+jux.paragraph('start-intro')
+    .text('Edit this file to build your app. Here are some quick tips:')
     .style('margin: 1rem 0;')
     .render('#getting-started');
 
-jux.list('gs-steps', {
+jux.list('quick-tips', {
     items: [
-        'Run npx jux build to compile',
-        'Run npx jux serve to dev with hot reload',
-        'Run npx jux serve hey to serve just this page',
-        'Serve jux-dist/ from your backend in production'
+        'Run npx jux serve for dev mode with hot reload',
+        'Run npx jux build to compile for production',
+        'Serve jux-dist/ from your backend',
+        'Check out the docs at juxscript.com/docs'
     ]
 }).render('#getting-started');
 
 jux.divider().render('#app');
 
-jux.button('demo-button')
-    .label('Click Me!')
-    .variant('primary')
-    .bind('click', () => {
-        jux.alert('demo-alert')
-            .type('success')
-            .message('Button clicked! You are ready to build with JUX.')
-            .render('#app');
-    })
-    .style('margin: 2rem auto; display: block;')
+jux.container('example-container')
+    .style('max-width: 800px; margin: 2rem auto; padding: 2rem; background: #f9fafb; border-radius: 8px;')
     .render('#app');
+
+jux.heading('example-heading')
+    .level(3)
+    .text('Quick Example')
+    .render('#example-container');
+
+jux.code('example-code')
+    .language('javascript')
+    .code(`import { jux, state } from 'juxscript';
+
+// Create a reactive counter
+const count = state(0);
+
+jux.button('increment')
+  .label('Click me!')
+  .bind('click', () => count.value++)
+  .render('#app');
+
+jux.paragraph('counter')
+  .sync('text', count, val => \`Count: \${val}\`)
+  .render('#app');`)
+    .render('#example-container');