npm - juxscript - Versions diffs - 1.0.24 → 1.0.26 - Mend

juxscript 1.0.24 → 1.0.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/bin/cli.js +22 -15
package/lib/components/docs-data.json +1 -1
package/machinery/compiler.js +17 -6
package/machinery/server.js +59 -25
package/package.json +1 -1
package/presets/grid.jux +55 -0
package/presets/index.jux +90 -0
package/presets/styles/layout.css +280 -0
package/presets/hey.jux +0 -60

package/bin/cli.js CHANGED Viewed

@@ -247,18 +247,17 @@ async function buildProject(isServe = false) {
       console.log('+ Created jux/index.jux');
     }
-    // Copy preset styles to jux/styles/
-    const presetsSrc = path.join(PATHS.packageRoot, 'presets');
+    // Copy preset styles from presets/styles/ to jux/styles/
+    const presetsStylesSrc = path.join(PATHS.packageRoot, 'presets', 'styles');
     const stylesDest = path.join(juxDir, 'styles');
-    if (fs.existsSync(presetsSrc)) {
+    if (fs.existsSync(presetsStylesSrc)) {
       fs.mkdirSync(stylesDest, { recursive: true });
-      const presetFiles = fs.readdirSync(presetsSrc);
-      presetFiles.forEach(file => {
-        // Only copy CSS files, skip hey.jux
+      const styleFiles = fs.readdirSync(presetsStylesSrc);
+      styleFiles.forEach(file => {
         if (file.endsWith('.css')) {
-          const srcFile = path.join(presetsSrc, file);
+          const srcFile = path.join(presetsStylesSrc, file);
           const destFile = path.join(stylesDest, file);
           fs.copyFileSync(srcFile, destFile);
           console.log(`+ Copied preset style: styles/${file}`);
@@ -312,17 +311,24 @@ node_modules/
     // ✅ Always serves router bundle
     await buildProject(true);
-    const port = parseInt(process.argv[3]) || 3000;
-    await start(port);
+    // Parse port arguments: npx jux serve [httpPort] [wsPort]
+    const httpPort = parseInt(process.argv[3]) || 3000;
+    const wsPort = parseInt(process.argv[4]) || 3001;
+    await start(httpPort, wsPort);
   } 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 [port]  Start dev server with hot reload (default: 3000)
+  npx jux init              Initialize a new JUX project
+  npx jux build             Build router bundle to ./jux-dist/
+  npx jux serve [http] [ws] Start dev server with hot reload
+Arguments:
+  [http]  HTTP server port (default: 3000)
+  [ws]    WebSocket port (default: 3001)
 Project Structure:
   my-project/
@@ -345,9 +351,10 @@ Getting Started:
   4. Serve jux-dist/ from your backend
 Examples:
-  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
+  npx jux build        # Build production bundle
+  npx jux serve        # Dev server (ports 3000/3001)
+  npx jux serve 8080   # HTTP on 8080, WS on 3001
+  npx jux serve 8080 8081  # HTTP on 8080, WS on 8081
     `);
   }
 })();

package/lib/components/docs-data.json CHANGED Viewed

@@ -2059,5 +2059,5 @@
     }
   ],
   "version": "1.0.0",
-  "lastUpdated": "2026-01-28T04:47:53.565Z"
+  "lastUpdated": "2026-01-28T14:47:56.941Z"
 }

package/machinery/compiler.js CHANGED Viewed

@@ -580,8 +580,23 @@ ${routeTable}
 const app = document.getElementById('app');
 function render() {
-  const path = location.pathname;
-  const view = routes[path] || JuxNotFound;
+  let path = location.pathname;
+  // Try exact match first
+  let view = routes[path];
+  // If no match and path ends with /, try appending 'index'
+  if (!view && path.endsWith('/')) {
+    view = routes[path + 'index'] || routes[path.slice(0, -1) + '/index'];
+  }
+  // If still no match and path doesn't end with /, try appending '/index'
+  if (!view && !path.endsWith('/')) {
+    view = routes[path + '/index'];
+  }
+  // Fall back to 404
+  view = view || JuxNotFound;
   app.innerHTML = '';
   app.removeAttribute('data-jux-page');
@@ -638,10 +653,6 @@ export function generateIndexHtml(distDir, routes, mainJsFilename = 'main.js') {
   <title>Jux Application</title>
 </head>
 <body data-theme="">
-  <!-- Navigation -->
-  <nav style="padding: 20px; background: #f5f5f5; border-bottom: 2px solid #ddd;">
-${navLinks}
-  </nav>
   <!-- App container - router renders here -->
   <div id="app"></div>
   ${importMapScript}

package/machinery/server.js CHANGED Viewed

@@ -9,7 +9,45 @@ import { WebSocketServer } from 'ws';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
-async function serve(port = 3000, distDir = './jux-dist') {
+/**
+ * Try to start a server on a port, with fallback to next port if busy
+ * Returns the actual port that was successfully allocated
+ */
+async function tryPort(startPort, maxAttempts = 5, reservedPorts = []) {
+  for (let attempt = 0; attempt < maxAttempts; attempt++) {
+    const port = startPort + attempt;
+    // Skip if this port is already reserved
+    if (reservedPorts.includes(port)) {
+      continue;
+    }
+    try {
+      // Test if port is available
+      await new Promise((resolve, reject) => {
+        const testServer = http.createServer();
+        testServer.once('error', reject);
+        testServer.once('listening', () => {
+          testServer.close();
+          resolve(port);
+        });
+        testServer.listen(port);
+      });
+      return port;
+    } catch (err) {
+      if (err.code === 'EADDRINUSE') {
+        if (attempt < maxAttempts - 1) {
+          console.log(`   Port ${port} in use, trying ${port + 1}...`);
+        }
+        continue;
+      }
+      throw err;
+    }
+  }
+  throw new Error(`Could not find available port after ${maxAttempts} attempts starting from ${startPort}`);
+}
+async function serve(httpPort = 3000, wsPort = 3001, distDir = './jux-dist') {
   const app = express();
   const absoluteDistDir = path.resolve(distDir);
   const projectRoot = path.resolve('.');
@@ -22,50 +60,46 @@ async function serve(port = 3000, distDir = './jux-dist') {
     process.exit(1);
   }
-  // ✅ Strong cache prevention for main.js
+  // Strong cache prevention
   app.use((req, res, next) => {
     res.setHeader('Cache-Control', 'no-store, no-cache, must-revalidate, max-age=0');
     res.setHeader('Pragma', 'no-cache');
     res.setHeader('Expires', '0');
-    // ✅ Add ETag prevention
     res.setHeader('ETag', 'W/"' + Date.now() + '"');
     next();
   });
-  // Disable caching in dev mode
-  app.use((req, res, next) => {
-    res.setHeader('Cache-Control', 'no-store, no-cache, must-revalidate');
-    res.setHeader('Pragma', 'no-cache');
-    res.setHeader('Expires', '0');
-    next();
-  });
-  // Serve static files (CSS, JS, images, etc.)
+  // Serve static files
   app.use(express.static(absoluteDistDir));
-  // SPA fallback: only for requests that accept HTML (not static files)
+  // SPA fallback
   app.get('*', (req, res) => {
-    // If request accepts HTML, serve index.html
     if (req.accepts('html')) {
       const indexPath = path.join(absoluteDistDir, 'index.html');
       if (fs.existsSync(indexPath)) {
         res.sendFile(indexPath);
       } else {
-        res.status(404).send('index.html not found. Run `npx jux bundle` first.');
+        res.status(404).send('index.html not found. Run `npx jux build` first.');
       }
     } else {
-      // For non-HTML requests (like .js, .css), return 404
       res.status(404).send('Not found');
     }
   });
+  // Find available ports sequentially to avoid collision
+  console.log('🔍 Finding available ports...');
+  // First, find HTTP port
+  const availableHttpPort = await tryPort(httpPort);
+  // Then find WS port, excluding the HTTP port we just allocated
+  const availableWsPort = await tryPort(wsPort, 5, [availableHttpPort]);
   // Create HTTP server
   const server = http.createServer(app);
   // WebSocket server for hot reload
-  const wss = new WebSocketServer({ port: 3001 });
+  const wss = new WebSocketServer({ port: availableWsPort });
   const clients = [];
   wss.on('connection', (ws) => {
@@ -83,11 +117,11 @@ async function serve(port = 3000, distDir = './jux-dist') {
     });
   });
-  console.log('🔌 WebSocket server running at ws://localhost:3001');
+  console.log(`🔌 WebSocket server running at ws://localhost:${availableWsPort}`);
   // Start HTTP server
-  server.listen(port, () => {
-    console.log(`🚀 JUX dev server running at http://localhost:${port}`);
+  server.listen(availableHttpPort, () => {
+    console.log(`🚀 JUX dev server running at http://localhost:${availableHttpPort}`);
     console.log(`   Serving: ${absoluteDistDir}`);
     console.log(`   Press Ctrl+C to stop\n`);
   });
@@ -110,9 +144,9 @@ async function serve(port = 3000, distDir = './jux-dist') {
   process.on('SIGINT', shutdown);
   process.on('SIGTERM', shutdown);
-  return { server };
+  return { server, httpPort: availableHttpPort, wsPort: availableWsPort };
 }
-export async function start(port = 3000) {
-  return serve(port, './jux-dist');
+export async function start(httpPort = 3000, wsPort = 3001) {
+  return serve(httpPort, wsPort, './jux-dist');
 }

package/package.json CHANGED Viewed

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

package/presets/grid.jux ADDED Viewed

@@ -0,0 +1,55 @@
+import { jux } from 'juxscript';
+// Import the layout styles
+jux.include('styles/layout.css');
+// ═══════════════════════════════════════════════════════════════════
+// GRID LAYOUT - INITIALIZATION FUNCTION
+// ═══════════════════════════════════════════════════════════════════
+// Note: #app is automatically created by the Jux compiler
+export function initializeGrid() {
+    // Header area
+    const appHeader = jux.container('appheader').render('#app');
+    const appHeaderContent = jux.container('appheader-content').render('#appheader');
+    const appHeaderLogo = jux.container('appheader-logo').render('#appheader-content');
+    const appHeaderNav = jux.container('appheader-nav').render('#appheader-content');
+    const appHeaderActions = jux.container('appheader-actions').render('#appheader-content');
+    // Left sidebar
+    const appAside = jux.container('appaside').render('#app');
+    // Main content area
+    const appMain = jux.container('appmain').render('#app');
+    const appMainContent = jux.container('appmain-content').render('#appmain');
+    // Right sidebar (optional - starts hidden)
+    const appSidebar = jux.container('appsidebar').render('#app');
+    const appSidebarHeader = jux.container('appsidebar-header').render('#appsidebar');
+    const appSidebarContent = jux.container('appsidebar-content').render('#appsidebar');
+    const appSidebarFooter = jux.container('appsidebar-footer').render('#appsidebar');
+    // Footer area
+    const appFooter = jux.container('appfooter').render('#app');
+    const appFooterContent = jux.container('appfooter-content').render('#appfooter');
+    const appFooterLegal = jux.container('appfooter-legal').render('#appfooter-content');
+    // Return references to all containers
+    return {
+        appHeader,
+        appHeaderContent,
+        appHeaderLogo,
+        appHeaderNav,
+        appHeaderActions,
+        appAside,
+        appMain,
+        appMainContent,
+        appSidebar,
+        appSidebarHeader,
+        appSidebarContent,
+        appSidebarFooter,
+        appFooter,
+        appFooterContent,
+        appFooterLegal
+    };
+}

package/presets/index.jux ADDED Viewed

@@ -0,0 +1,90 @@
+import { jux, state } from 'juxscript';
+import { initializeGrid } from './grid.jux';
+// Initialize the grid layout - this executes the rendering
+const grid = initializeGrid();
+// ═══════════════════════════════════════════════════════════════════
+// HEADER CONTENT
+// ═══════════════════════════════════════════════════════════════════
+jux.heading('logo-text')
+    .level(1)
+    .text('JUX')
+    .render('#appheader-logo');
+// ═══════════════════════════════════════════════════════════════════
+// MAIN CONTENT
+// ═══════════════════════════════════════════════════════════════════
+jux.hero('welcome', {
+    title: 'Welcome to JUX',
+    subtitle: 'A JavaScript UX authorship platform'
+}).render('#appmain-content');
+jux.divider().render('#appmain-content');
+jux.heading('start-heading')
+    .level(2)
+    .text('Getting Started')
+    .render('#appmain-content');
+jux.paragraph('start-intro')
+    .text('Edit this file to build your app. Here are some quick tips:')
+    .style('margin: 1rem 0;')
+    .render('#appmain-content');
+jux.list('quick-tips', {
+    items: [
+        '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('#appmain-content');
+jux.divider().render('#appmain-content');
+jux.heading('example-heading')
+    .level(3)
+    .text('Quick Example')
+    .render('#appmain-content');
+jux.code('example-code')
+    .language('javascript')
+    .code(`import { jux, state } from 'juxscript';
+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('#appmain-content');
+// Create a reactive counter demo
+const count = state(0);
+jux.button('increment')
+    .label('Click me!')
+    .bind('click', () => count.value++)
+    .style('margin: 1rem 0;')
+    .render('#appmain-content');
+jux.paragraph('counter')
+    .sync('text', count, val => `Count: ${val}`)
+    .style('font-size: 1.25rem; font-weight: 600; color: var(--color-brand);')
+    .render('#appmain-content');
+// ═══════════════════════════════════════════════════════════════════
+// FOOTER CONTENT
+// ═══════════════════════════════════════════════════════════════════
+jux.paragraph('footer-text')
+    .text('© 2026 JUX Platform')
+    .style('color: var(--color-text-tertiary);')
+    .render('#appfooter-content');

package/presets/styles/layout.css ADDED Viewed

@@ -0,0 +1,280 @@
+/* ============================================
+   APP CONTAINER - Main Layout Grid
+   ============================================ */
+#app {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  grid-template-rows: auto 1fr auto;
+  grid-template-areas:
+    "header header header"
+    "sidebar main aside"
+    "footer footer footer";
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+}
+/* ============================================
+   HEADER - Top Navigation Bar
+   ============================================ */
+#appheader {
+  grid-area: header;
+  background: var(--color-surface-elevated);
+  border-bottom: var(--border-width) solid var(--color-border);
+  display: flex;
+  align-items: center;
+  padding: 0 var(--space-lg);
+  height: 48px;
+  z-index: 100;
+  transition: background-color var(--transition-base), border-color var(--transition-base);
+}
+#appheader-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  gap: var(--space-xl);
+}
+#appheader-logo {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+  text-decoration: none;
+  padding: var(--space-sm) var(--space-md);
+  border-radius: var(--radius-md);
+  transition: background-color var(--transition-fast);
+}
+#appheader-logo:hover {
+  background: var(--color-surface-hover);
+}
+#appheader-nav {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+#appheader-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+}
+/* ============================================
+   LEFT SIDEBAR - Navigation
+   ============================================ */
+.jux-sidebar,
+#appaside {
+  grid-area: sidebar;
+  width: 260px;
+  background: var(--color-surface-base);
+  border-right: var(--border-width) solid var(--color-border);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  transition: width var(--transition-base);
+  position: relative;
+}
+/* ============================================
+   MAIN CONTENT - Center Area
+   ============================================ */
+#appmain {
+  grid-area: main;
+  background: var(--color-background);
+  overflow-y: auto;
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+#appmain-content {
+  flex: 1;
+  padding: var(--space-3xl) var(--space-2xl);
+  max-width: 1600px;
+  width: 100%;
+  margin: 0 auto;
+}
+/* Custom scrollbar for main content */
+#appmain::-webkit-scrollbar {
+  width: 8px;
+}
+#appmain::-webkit-scrollbar-track {
+  background: var(--color-surface-base);
+}
+#appmain::-webkit-scrollbar-thumb {
+  background: var(--color-border);
+  border-radius: var(--radius-full);
+}
+#appmain::-webkit-scrollbar-thumb:hover {
+  background: var(--color-border-hover);
+}
+/* ============================================
+   RIGHT SIDEBAR - Optional Panel
+   ============================================ */
+#appsidebar {
+  grid-area: aside;
+  width: 280px;
+  background: var(--color-surface-base);
+  border-left: var(--border-width) solid var(--color-border);
+  display: none;
+  flex-direction: column;
+  overflow: hidden;
+  transition: width var(--transition-base), background-color var(--transition-base);
+}
+#appsidebar.show {
+  display: flex;
+}
+#appsidebar.collapsed {
+  width: 0;
+  border: none;
+}
+#appsidebar-header {
+  padding: var(--space-lg);
+  border-bottom: var(--border-width) solid var(--color-border);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+#appsidebar-content {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: var(--space-lg);
+}
+#appsidebar-content::-webkit-scrollbar {
+  width: 6px;
+}
+#appsidebar-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+#appsidebar-content::-webkit-scrollbar-thumb {
+  background: var(--color-border);
+  border-radius: var(--radius-full);
+}
+#appsidebar-content::-webkit-scrollbar-thumb:hover {
+  background: var(--color-border-hover);
+}
+#appsidebar-footer {
+  padding: var(--space-lg);
+  border-top: var(--border-width) solid var(--color-border);
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+/* ============================================
+   FOOTER - Bottom Bar
+   ============================================ */
+#appfooter {
+  grid-area: footer;
+  background: var(--color-surface-elevated);
+  border-top: var(--border-width) solid var(--color-border);
+  padding: var(--space-lg) var(--space-2xl);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-tertiary);
+  transition: background-color var(--transition-base), border-color var(--transition-base);
+}
+#appfooter-content {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xl);
+}
+#appfooter-legal {
+  display: flex;
+  align-items: center;
+  gap: var(--space-lg);
+}
+#appfooter a {
+  color: var(--color-text-secondary);
+  text-decoration: none;
+  transition: color var(--transition-fast);
+}
+#appfooter a:hover {
+  color: var(--color-text-primary);
+}
+/* ============================================
+   RESPONSIVE GRID LAYOUTS
+   ============================================ */
+@media (max-width: 1024px) {
+  #appsidebar {
+    display: none;
+  }
+  #app {
+    grid-template-columns: auto 1fr;
+    grid-template-areas:
+      "header header"
+      "sidebar main"
+      "footer footer";
+  }
+}
+@media (max-width: 768px) {
+  #app {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "header"
+      "main"
+      "footer";
+  }
+  .jux-sidebar,
+  #appaside {
+    display: none;
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 1000;
+    width: 260px;
+    box-shadow: var(--shadow-xl);
+    transform: translateX(-100%);
+    transition: transform var(--transition-base);
+  }
+  .jux-sidebar.open,
+  #appaside.open {
+    display: flex;
+    transform: translateX(0);
+  }
+  #appmain-content {
+    padding: var(--space-2xl) var(--space-lg);
+  }
+  #appheader {
+    padding: 0 var(--space-md) 0 calc(var(--space-md) + 48px);
+  }
+}

package/presets/hey.jux DELETED Viewed

@@ -1,60 +0,0 @@
-import { jux } from 'juxscript';
-// Welcome page with examples
-jux.hero('welcome', {
-    title: 'Welcome to JUX',
-    subtitle: 'A JavaScript UX authorship platform'
-}).render('#app');
-jux.divider().render('#app');
-jux.container('getting-started')
-    .style('max-width: 800px; margin: 2rem auto; padding: 2rem;')
-    .render('#app');
-jux.heading('start-heading')
-    .level(2)
-    .text('Getting Started')
-    .render('#getting-started');
-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('quick-tips', {
-    items: [
-        '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.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');