🚀 Compiler Usage
How to use the Nixi compiler, REPL, and build tools effectively.
Running Nixi Files
Direct Execution
# Run a Nixi file directly nixi examples/simple-gui.nixi # Using npm scripts npm run example:gui npm run example:math npm run example:dashboard # Start interactive REPL nixi npm start
Legacy CLI
# Run a GUI example node src/cli.js examples/simple-gui.nixi # Run a config example node src/cli.js config/simple-working.nixi # Compile to JavaScript node src/cli.js --compile examples/simple-gui.nixi > compiled.js
Interactive REPL
REPL Mode
# Start REPL mode nixi # Example REPL session nixi> let x = 42; y = 23; in add(x, y) 65 nixi> echo "Hello from REPL" Hello from REPL nixi> div { text: "Hello World" } { type: 'div', props: { text: 'Hello World' } } nixi> exit Goodbye!
REPL Features
# REPL Capabilities
✅ Expression evaluation
✅ Variable binding
✅ Function definition and calling
✅ Component creation
✅ Built-in function access
✅ Error handling and debugging
✅ Multi-line expressions
✅ Command history (arrow keys)
✅ Tab completion (basic)
✅ Clear screen (Ctrl+L or 'clear')
Compilation to JavaScript
JavaScript Compilation
# Compile to JavaScript and save to file nixi --compile examples/simple-gui.nixi > compiled.js # Compile and view output nixi --compile config/math-demo.nixi # The compiler automatically writes debug output to debug_output.js # This helps with debugging and understanding generated code # Run compiled JavaScript node compiled.js
Generated JavaScript Structure
// Generated JavaScript structure function createNixiComponent(type, props, children = []) { return { type, props: props || {}, children }; } function renderHTML(component, title) { // HTML generation logic let html = ''; html += ''; html += ''; html += '' + title + ''; html += ''; html += ''; html += renderComponent(component); html += ''; html += ''; return html; } // Main compiled code const app = createNixiComponent('div', { class: 'container', text: 'Hello World' }); console.log(renderHTML(app, 'Nixi App'));
Component Definitions
Reusable Components
# Define reusable components component Card = { title, content }: div { class: "card"; children: [ h3 { text: title }; p { text: content } ] }; component App = {}: div { class: "app"; children: [ Card { title: "Welcome"; content: "This is a card component" }; Card { title: "Features"; content: "Reusable components work!" } ] }; in saveHTML(App {}, "components.html", "Component Example")
Component with Props
# Component with destructured props component Button = { text, variant, onClick }: button { class: "btn btn-" + variant; text: text; onClick: onClick }; # Usage with different variants let app = div { class: "app"; children: [ Button { text: "Primary"; variant: "primary"; onClick: echo "Primary clicked" }; Button { text: "Secondary"; variant: "secondary"; onClick: echo "Secondary clicked" } ] }; in saveHTML(app, "buttons.html", "Button Variants")
Styling and CSS
CSS Integration
let # Define styles using addStyle function _ = addStyle ".container" { background: "#f0f0f0"; padding: "20px"; border-radius: "8px" }; _ = addStyle ".button" { background: "#007bff"; color: "white"; padding: "10px 20px"; border: "none"; border-radius: "4px" }; app = div { class: "container"; children: [ h1 { text: "Styled App" }; button { class: "button"; text: "Styled Button" } ] }; in saveHTML(app, "styled.html", "Styled Nixi App")
Style Keyword Syntax
# CSS-like style definitions style "card" { background: "white"; border-radius: "10px"; padding: "20px"; margin: "10px 0"; box-shadow: "0 4px 6px rgba(0, 0, 0, 0.1)"; transition: "transform 0.3s ease"; } style "card:hover" { transform: "translateY(-5px)"; box-shadow: "0 10px 20px rgba(0, 0, 0, 0.15)"; } # Media queries for responsive design style "@media (max-width: 768px)" { card: { padding: "15px"; margin: "5px 0"; } }
File System Operations
Built-in File Functions
let files = ls("."); currentDir = pwd(); _ = echo "Current directory: ${currentDir}"; _ = echo "Files: ${files}"; # Change directory (if needed) _ = cd("src"); srcFiles = ls("."); in "File operations completed"
File I/O Operations
let # Read file contents content = readFile("config.json"); # Write to file _ = writeFile("output.txt", "Hello from Nixi!"); # Check if file exists exists = fileExists("data.json"); # Safe file operations with error handling safeRead = filename: let fileExists = fileExists(filename); in if fileExists then readFile(filename) else "File not found: " + filename; result = safeRead "config.json"; in echo result
🔧 Compiler Features
Compilation Features
Compile to JavaScript, enhanced error messages, better debugging with automatic debug output generation.
Interactive REPL
Test expressions interactively, get immediate results, perfect for learning and debugging.
Component System
Define reusable GUI components with props, children, and event handlers.
CSS Styling
Integrated styling system with CSS-like syntax and automatic style injection.
🚀 Quick Commands
Create New Project
mkdir my-nixi-app cd my-nixi-app echo let app = div { text: "Hello World" }; in saveHTML(app, "index.html", "My App") > app.nixi nixi app.nixi
Debug Mode
# Enable verbose output DEBUG=1 nixi app.nixi # View generated JavaScript cat debug_output.js # Step-by-step compilation nixi --verbose app.nixi
Build Workflow
# Development with auto-reload npm run dev # Production build nixi --compile --optimize app.nixi > dist/app.js # Test before deployment npm test nixi examples/test-app.nixi