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 += ''</span> + title + <span class="string">'';
  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.