npm - clou-lang - Versions diffs - 0.2.0 - Mend

clou-lang 0.2.0

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 (34) hide show

package/LICENSE +21 -0
package/README.md +128 -0
package/ai/clou-ai-prompt.md +239 -0
package/bin/clou.js +281 -0
package/examples/calculator.clou +41 -0
package/examples/hello-terminal.clou +22 -0
package/examples/hello.clou +37 -0
package/examples/hello.html +220 -0
package/examples/multipage/about.html +319 -0
package/examples/multipage/contact.html +308 -0
package/examples/multipage/index.html +322 -0
package/examples/multipage/shared.clou +19 -0
package/examples/multipage/site.clou +102 -0
package/examples/portfolio.clou +51 -0
package/examples/portfolio.html +217 -0
package/examples/quiz.clou +90 -0
package/examples/showcase.clou +136 -0
package/examples/showcase.html +410 -0
package/examples/startup.clou +153 -0
package/examples/startup.html +469 -0
package/examples/themes-demo.clou +117 -0
package/examples/themes-demo.html +429 -0
package/package.json +48 -0
package/playground/clou-browser.js +2576 -0
package/playground/index.html +682 -0
package/src/bundle-browser.js +62 -0
package/src/compiler.js +761 -0
package/src/devserver.js +154 -0
package/src/index.js +87 -0
package/src/lexer.js +456 -0
package/src/parser.js +879 -0
package/src/terminal-parser.js +358 -0
package/src/terminal-runtime.js +310 -0
package/src/themes.js +469 -0

package/src/devserver.js ADDED Viewed

@@ -0,0 +1,154 @@
+// Clou Language - Live Dev Server
+// Watches .clou files, compiles on change, auto-reloads browser
+const http = require('http');
+const fs = require('fs');
+const path = require('path');
+const { buildClou } = require('./index');
+const RELOAD_SCRIPT = `
+<script>
+(function() {
+  var lastCheck = Date.now();
+  setInterval(function() {
+    fetch('/__clou_check?t=' + lastCheck)
+      .then(function(r) { return r.json(); })
+      .then(function(data) {
+        if (data.changed) {
+          lastCheck = Date.now();
+          location.reload();
+        }
+      })
+      .catch(function() {});
+  }, 500);
+})();
+</script>
+`;
+class DevServer {
+  constructor(inputFile, port) {
+    this.inputFile = path.resolve(inputFile);
+    this.port = port || 3000;
+    this.lastModified = 0;
+    this.cachedHtml = '';
+    this.buildError = null;
+  }
+  build() {
+    try {
+      const source = fs.readFileSync(this.inputFile, 'utf-8');
+      let html = buildClou(source).html;
+      // Inject auto-reload script before </body>
+      html = html.replace('</body>', RELOAD_SCRIPT + '</body>');
+      this.cachedHtml = html;
+      this.buildError = null;
+      this.lastModified = Date.now();
+      return true;
+    } catch (err) {
+      this.buildError = err.message;
+      this.lastModified = Date.now();
+      // Show error page
+      this.cachedHtml = `<!DOCTYPE html>
+<html><head><title>Clou Error</title>
+<style>
+  body { background: #1a1a2e; color: #ff6b6b; font-family: monospace; padding: 40px; }
+  h1 { color: #ff6b6b; }
+  pre { background: #0d1117; padding: 20px; border-radius: 8px; color: #ffa657; margin-top: 20px; white-space: pre-wrap; }
+</style></head><body>
+<h1>Clou Build Error</h1>
+<pre>${err.message}</pre>
+<p style="color: #888; margin-top: 20px;">Fix the error and save — the page will auto-reload.</p>
+${RELOAD_SCRIPT}
+</body></html>`;
+      return false;
+    }
+  }
+  start() {
+    // Initial build
+    this.build();
+    // Watch file for changes
+    let lastStat = fs.statSync(this.inputFile).mtimeMs;
+    const checkInterval = setInterval(() => {
+      try {
+        const stat = fs.statSync(this.inputFile);
+        if (stat.mtimeMs !== lastStat) {
+          lastStat = stat.mtimeMs;
+          const ok = this.build();
+          const time = new Date().toLocaleTimeString();
+          if (ok) {
+            console.log(`  [${time}] Rebuilt successfully`);
+          } else {
+            console.log(`  [${time}] Build error: ${this.buildError}`);
+          }
+        }
+      } catch (e) {
+        // File might be temporarily unavailable during save
+      }
+    }, 300);
+    // HTTP Server
+    const server = http.createServer((req, res) => {
+      // Check endpoint for auto-reload
+      if (req.url.startsWith('/__clou_check')) {
+        const url = new URL(req.url, `http://localhost:${this.port}`);
+        const clientTime = parseInt(url.searchParams.get('t')) || 0;
+        res.writeHead(200, {
+          'Content-Type': 'application/json',
+          'Access-Control-Allow-Origin': '*',
+          'Cache-Control': 'no-cache'
+        });
+        res.end(JSON.stringify({ changed: this.lastModified > clientTime }));
+        return;
+      }
+      // Serve the compiled HTML
+      res.writeHead(200, {
+        'Content-Type': 'text/html; charset=utf-8',
+        'Cache-Control': 'no-cache'
+      });
+      res.end(this.cachedHtml);
+    });
+    server.listen(this.port, () => {
+      console.log(`
+  ╔═══════════════════════════════════════╗
+  ║         CLOU Dev Server               ║
+  ╚═══════════════════════════════════════╝
+  Watching:  ${this.inputFile}
+  Server:    http://localhost:${this.port}
+  Edit your .clou file and save — the
+  browser will auto-reload instantly!
+  Press Ctrl+C to stop.
+`);
+    });
+    // Open in browser
+    const { exec } = require('child_process');
+    const url = `http://localhost:${this.port}`;
+    if (process.platform === 'win32') {
+      exec(`start "" "${url}"`);
+    } else if (process.platform === 'darwin') {
+      exec(`open "${url}"`);
+    } else {
+      exec(`xdg-open "${url}"`);
+    }
+    // Graceful shutdown
+    process.on('SIGINT', () => {
+      clearInterval(checkInterval);
+      server.close();
+      console.log('\n  Dev server stopped.\n');
+      process.exit(0);
+    });
+  }
+}
+module.exports = { DevServer };

package/src/index.js ADDED Viewed

@@ -0,0 +1,87 @@
+// Clou Language - Main Module
+// Ties together Lexer, Parser, and Compiler
+const fs = require('fs');
+const path = require('path');
+const { tokenize, LexerError } = require('./lexer');
+const { parse, ParseError } = require('./parser');
+const { compile } = require('./compiler');
+// Resolve imports: reads imported files and prepends their source
+function resolveImports(source, basePath) {
+  const importRegex = /^import\s+"([^"]+)"\s*$/gm;
+  let resolved = source;
+  const imported = new Set();
+  let match;
+  while ((match = importRegex.exec(source)) !== null) {
+    const importFile = match[1];
+    const fullPath = path.resolve(basePath, importFile);
+    if (imported.has(fullPath)) continue;
+    imported.add(fullPath);
+    try {
+      let importedSource = fs.readFileSync(fullPath, 'utf-8');
+      // Recursively resolve imports in the imported file
+      importedSource = resolveImports(importedSource, path.dirname(fullPath));
+      // Replace the import statement with the file contents
+      resolved = resolved.replace(match[0], importedSource);
+    } catch (err) {
+      throw new Error(`Import error: Could not read "${importFile}" (${fullPath})`);
+    }
+  }
+  return resolved;
+}
+function buildClou(source, options = {}) {
+  const basePath = options.basePath || process.cwd();
+  // Step 0: Resolve imports
+  const resolvedSource = resolveImports(source, basePath);
+  // Step 1: Tokenize
+  const tokens = tokenize(resolvedSource);
+  // Step 2: Parse into AST
+  const ast = parse(tokens);
+  // Step 3: Check for multi-page
+  if (ast.pages.length > 1 && ast.pages.some(p => p.route)) {
+    return buildMultiPage(ast, resolvedSource);
+  }
+  // Step 4: Compile to HTML (single page)
+  const html = compile(ast);
+  return { tokens, ast, html, pages: null };
+}
+// Build multiple pages from a multi-page AST
+function buildMultiPage(ast) {
+  const pages = {};
+  for (const page of ast.pages) {
+    const route = page.route || '/';
+    const filename = route === '/' ? 'index.html' : route.replace(/^\//, '').replace(/\/$/, '') + '.html';
+    // Create a single-page AST for this page
+    const singlePageAST = {
+      type: 'Program',
+      pages: [page],
+      styles: ast.styles,
+      templates: ast.templates,
+      variables: ast.variables,
+      imports: [],
+    };
+    // Inject navigation links between pages
+    const html = compile(singlePageAST);
+    pages[filename] = { html, title: page.title, route };
+  }
+  return { pages, html: pages['index.html'] ? pages['index.html'].html : Object.values(pages)[0].html };
+}
+module.exports = { buildClou, resolveImports, tokenize, parse, compile, LexerError, ParseError };

package/src/lexer.js ADDED Viewed

@@ -0,0 +1,456 @@
+// Clou Language - Lexer
+// Breaks Clou source code into tokens
+const TokenType = {
+  // Structure
+  INDENT: 'INDENT',
+  DEDENT: 'DEDENT',
+  NEWLINE: 'NEWLINE',
+  COLON: 'COLON',
+  EOF: 'EOF',
+  // Literals
+  STRING: 'STRING',
+  NUMBER: 'NUMBER',
+  COLOR: 'COLOR',
+  // Keywords - Page structure
+  PAGE: 'PAGE',
+  TITLE: 'TITLE',
+  HEADING: 'HEADING',
+  TEXT: 'TEXT',
+  IMAGE: 'IMAGE',
+  BOX: 'BOX',
+  LINK: 'LINK',
+  BUTTON: 'BUTTON',
+  INPUT: 'INPUT',
+  LIST: 'LIST',
+  ITEM: 'ITEM',
+  LINE: 'LINE',
+  VIDEO: 'VIDEO',
+  NAVBAR: 'NAVBAR',
+  FOOTER: 'FOOTER',
+  LOGO: 'LOGO',
+  CARD: 'CARD',
+  ICON: 'ICON',
+  MODAL: 'MODAL',
+  GRID: 'GRID',
+  SECTION: 'SECTION',
+  SPACE: 'SPACE',
+  COLUMNS: 'COLUMNS',
+  // Keywords - Actions
+  SHOW: 'SHOW',
+  MESSAGE: 'MESSAGE',
+  HIDE: 'HIDE',
+  TOGGLE: 'TOGGLE',
+  GO: 'GO',
+  OPEN: 'OPEN',
+  CLOSE: 'CLOSE',
+  // Keywords - Style
+  STYLE: 'STYLE',
+  BACKGROUND: 'BACKGROUND',
+  COLOR_KW: 'COLOR_KW',
+  SIZE: 'SIZE',
+  BOLD: 'BOLD',
+  ITALIC: 'ITALIC',
+  CENTER: 'CENTER',
+  LEFT: 'LEFT',
+  RIGHT: 'RIGHT',
+  ROUNDED: 'ROUNDED',
+  SHADOW: 'SHADOW',
+  PADDING: 'PADDING',
+  MARGIN: 'MARGIN',
+  WIDTH: 'WIDTH',
+  HEIGHT: 'HEIGHT',
+  FONT: 'FONT',
+  GAP: 'GAP',
+  ROW: 'ROW',
+  GRADIENT: 'GRADIENT',
+  BORDER: 'BORDER',
+  OPACITY: 'OPACITY',
+  HOVER: 'HOVER',
+  ANIMATE: 'ANIMATE',
+  FULL: 'FULL',
+  DARK: 'DARK',
+  LIGHT: 'LIGHT',
+  SMALL: 'SMALL',
+  BIG: 'BIG',
+  HUGE: 'HUGE',
+  TINY: 'TINY',
+  STICKY: 'STICKY',
+  FIXED: 'FIXED',
+  WRAP: 'WRAP',
+  GROW: 'GROW',
+  // Keywords - Variables & Templates
+  SET: 'SET',
+  TEMPLATE: 'TEMPLATE',
+  USE: 'USE',
+  REPEAT: 'REPEAT',
+  THEME: 'THEME',
+  // Keywords - Terminal / App
+  APP: 'APP',
+  PRINT: 'PRINT',
+  ASK: 'ASK',
+  SAVE: 'SAVE',
+  AS: 'AS',
+  IF: 'IF',
+  ELSE: 'ELSE',
+  IS: 'IS',
+  NOT: 'NOT',
+  GREATER: 'GREATER',
+  LESS: 'LESS',
+  THAN: 'THAN',
+  OR: 'OR',
+  ADD: 'ADD',
+  SUBTRACT: 'SUBTRACT',
+  MULTIPLY: 'MULTIPLY',
+  DIVIDE: 'DIVIDE',
+  BY: 'BY',
+  WAIT: 'WAIT',
+  READ: 'READ',
+  WRITE: 'WRITE',
+  FILE: 'FILE',
+  RUN: 'RUN',
+  EXIT: 'EXIT',
+  CLEAR: 'CLEAR',
+  EACH: 'EACH',
+  IN: 'IN',
+  WHILE: 'WHILE',
+  TRUE: 'TRUE',
+  FALSE: 'FALSE',
+  FUNCTION: 'FUNCTION',
+  CALL: 'CALL',
+  RETURN: 'RETURN',
+  LPAREN: 'LPAREN',
+  RPAREN: 'RPAREN',
+  COMMA: 'COMMA',
+  // Keywords - Imports & Routing
+  IMPORT: 'IMPORT',
+  AT: 'AT',
+  // Keywords - Connectors
+  TO: 'TO',
+  AND: 'AND',
+  // Identifiers (for unknown words)
+  IDENTIFIER: 'IDENTIFIER',
+};
+const KEYWORDS = {
+  'page': TokenType.PAGE,
+  'title': TokenType.TITLE,
+  'heading': TokenType.HEADING,
+  'text': TokenType.TEXT,
+  'image': TokenType.IMAGE,
+  'box': TokenType.BOX,
+  'link': TokenType.LINK,
+  'button': TokenType.BUTTON,
+  'input': TokenType.INPUT,
+  'list': TokenType.LIST,
+  'item': TokenType.ITEM,
+  'line': TokenType.LINE,
+  'video': TokenType.VIDEO,
+  'navbar': TokenType.NAVBAR,
+  'footer': TokenType.FOOTER,
+  'logo': TokenType.LOGO,
+  'card': TokenType.CARD,
+  'icon': TokenType.ICON,
+  'modal': TokenType.MODAL,
+  'grid': TokenType.GRID,
+  'section': TokenType.SECTION,
+  'space': TokenType.SPACE,
+  'columns': TokenType.COLUMNS,
+  'show': TokenType.SHOW,
+  'message': TokenType.MESSAGE,
+  'hide': TokenType.HIDE,
+  'toggle': TokenType.TOGGLE,
+  'go': TokenType.GO,
+  'open': TokenType.OPEN,
+  'close': TokenType.CLOSE,
+  'style': TokenType.STYLE,
+  'background': TokenType.BACKGROUND,
+  'color': TokenType.COLOR_KW,
+  'size': TokenType.SIZE,
+  'bold': TokenType.BOLD,
+  'italic': TokenType.ITALIC,
+  'center': TokenType.CENTER,
+  'left': TokenType.LEFT,
+  'right': TokenType.RIGHT,
+  'rounded': TokenType.ROUNDED,
+  'shadow': TokenType.SHADOW,
+  'padding': TokenType.PADDING,
+  'margin': TokenType.MARGIN,
+  'width': TokenType.WIDTH,
+  'height': TokenType.HEIGHT,
+  'font': TokenType.FONT,
+  'gap': TokenType.GAP,
+  'row': TokenType.ROW,
+  'gradient': TokenType.GRADIENT,
+  'border': TokenType.BORDER,
+  'opacity': TokenType.OPACITY,
+  'hover': TokenType.HOVER,
+  'animate': TokenType.ANIMATE,
+  'full': TokenType.FULL,
+  'dark': TokenType.DARK,
+  'light': TokenType.LIGHT,
+  'small': TokenType.SMALL,
+  'big': TokenType.BIG,
+  'huge': TokenType.HUGE,
+  'tiny': TokenType.TINY,
+  'sticky': TokenType.STICKY,
+  'fixed': TokenType.FIXED,
+  'wrap': TokenType.WRAP,
+  'grow': TokenType.GROW,
+  'set': TokenType.SET,
+  'template': TokenType.TEMPLATE,
+  'use': TokenType.USE,
+  'repeat': TokenType.REPEAT,
+  'theme': TokenType.THEME,
+  'app': TokenType.APP,
+  'print': TokenType.PRINT,
+  'ask': TokenType.ASK,
+  'save': TokenType.SAVE,
+  'as': TokenType.AS,
+  'if': TokenType.IF,
+  'else': TokenType.ELSE,
+  'is': TokenType.IS,
+  'not': TokenType.NOT,
+  'greater': TokenType.GREATER,
+  'less': TokenType.LESS,
+  'than': TokenType.THAN,
+  'or': TokenType.OR,
+  'add': TokenType.ADD,
+  'subtract': TokenType.SUBTRACT,
+  'multiply': TokenType.MULTIPLY,
+  'divide': TokenType.DIVIDE,
+  'by': TokenType.BY,
+  'wait': TokenType.WAIT,
+  'read': TokenType.READ,
+  'write': TokenType.WRITE,
+  'file': TokenType.FILE,
+  'run': TokenType.RUN,
+  'exit': TokenType.EXIT,
+  'clear': TokenType.CLEAR,
+  'each': TokenType.EACH,
+  'in': TokenType.IN,
+  'while': TokenType.WHILE,
+  'true': TokenType.TRUE,
+  'false': TokenType.FALSE,
+  'function': TokenType.FUNCTION,
+  'call': TokenType.CALL,
+  'return': TokenType.RETURN,
+  'import': TokenType.IMPORT,
+  'at': TokenType.AT,
+  'to': TokenType.TO,
+  'and': TokenType.AND,
+};
+class Token {
+  constructor(type, value, line, col) {
+    this.type = type;
+    this.value = value;
+    this.line = line;
+    this.col = col;
+  }
+}
+class LexerError extends Error {
+  constructor(message, line, col) {
+    super(`Line ${line}, Col ${col}: ${message}`);
+    this.line = line;
+    this.col = col;
+  }
+}
+function tokenize(source) {
+  const tokens = [];
+  const lines = source.split('\n');
+  const indentStack = [0];
+  for (let lineNum = 0; lineNum < lines.length; lineNum++) {
+    const rawLine = lines[lineNum];
+    // Skip empty lines and comment lines (but not hex colors like #ff0000)
+    const trimmed = rawLine.trim();
+    if (trimmed === '' || trimmed.startsWith('//')) {
+      continue;
+    }
+    if (trimmed.startsWith('#') && (trimmed.length === 1 || trimmed[1] === ' ' || trimmed[1] === '\t')) {
+      continue;
+    }
+    // Calculate indentation (spaces)
+    let indent = 0;
+    for (let i = 0; i < rawLine.length; i++) {
+      if (rawLine[i] === ' ') {
+        indent++;
+      } else if (rawLine[i] === '\t') {
+        indent += 4;
+      } else {
+        break;
+      }
+    }
+    // Handle indentation changes
+    if (indent > indentStack[indentStack.length - 1]) {
+      indentStack.push(indent);
+      tokens.push(new Token(TokenType.INDENT, indent, lineNum + 1, 1));
+    } else {
+      while (indent < indentStack[indentStack.length - 1]) {
+        indentStack.pop();
+        tokens.push(new Token(TokenType.DEDENT, indent, lineNum + 1, 1));
+      }
+    }
+    // Tokenize the line content
+    let col = indent;
+    const line = rawLine;
+    while (col < line.length) {
+      const ch = line[col];
+      // Skip whitespace
+      if (ch === ' ' || ch === '\t') {
+        col++;
+        continue;
+      }
+      // Skip inline comments
+      if (ch === '/' && col + 1 < line.length && line[col + 1] === '/') {
+        break;
+      }
+      // # is a comment only if followed by space or end of line (not hex colors like #ff0000)
+      if (ch === '#' && (col + 1 >= line.length || line[col + 1] === ' ' || line[col + 1] === '\t')) {
+        break;
+      }
+      // Hex color like #f0f4f8
+      if (ch === '#') {
+        let hex = '#';
+        col++;
+        while (col < line.length && /[0-9a-fA-F]/.test(line[col])) {
+          hex += line[col];
+          col++;
+        }
+        tokens.push(new Token(TokenType.IDENTIFIER, hex, lineNum + 1, col + 1));
+        continue;
+      }
+      // Colon
+      if (ch === ':') {
+        tokens.push(new Token(TokenType.COLON, ':', lineNum + 1, col + 1));
+        col++;
+        continue;
+      }
+      // Parentheses (for templates)
+      if (ch === '(') {
+        tokens.push(new Token(TokenType.LPAREN, '(', lineNum + 1, col + 1));
+        col++;
+        continue;
+      }
+      if (ch === ')') {
+        tokens.push(new Token(TokenType.RPAREN, ')', lineNum + 1, col + 1));
+        col++;
+        continue;
+      }
+      // Comma
+      if (ch === ',') {
+        tokens.push(new Token(TokenType.COMMA, ',', lineNum + 1, col + 1));
+        col++;
+        continue;
+      }
+      // String literal (double or single quotes)
+      if (ch === '"' || ch === "'") {
+        const quote = ch;
+        let str = '';
+        col++;
+        while (col < line.length && line[col] !== quote) {
+          if (line[col] === '\\' && col + 1 < line.length) {
+            col++;
+            if (line[col] === 'n') str += '\n';
+            else if (line[col] === 't') str += '\t';
+            else str += line[col];
+          } else {
+            str += line[col];
+          }
+          col++;
+        }
+        if (col >= line.length) {
+          throw new LexerError(`Unterminated string`, lineNum + 1, col + 1);
+        }
+        col++; // skip closing quote
+        tokens.push(new Token(TokenType.STRING, str, lineNum + 1, col + 1));
+        continue;
+      }
+      // Number
+      if (ch >= '0' && ch <= '9') {
+        let num = '';
+        while (col < line.length && ((line[col] >= '0' && line[col] <= '9') || line[col] === '.')) {
+          num += line[col];
+          col++;
+        }
+        // Check for units like px, %, em, rem
+        if (col < line.length && line[col] === '%') {
+          num += '%';
+          col++;
+        } else {
+          let unit = '';
+          while (col < line.length && line[col] >= 'a' && line[col] <= 'z') {
+            unit += line[col];
+            col++;
+          }
+          if (unit) num += unit;
+        }
+        tokens.push(new Token(TokenType.NUMBER, num, lineNum + 1, col + 1));
+        continue;
+      }
+      // Words (keywords or identifiers)
+      if ((ch >= 'a' && ch <= 'z') || (ch >= 'A' && ch <= 'Z') || ch === '_' || ch === '-') {
+        let word = '';
+        while (col < line.length && (
+          (line[col] >= 'a' && line[col] <= 'z') ||
+          (line[col] >= 'A' && line[col] <= 'Z') ||
+          (line[col] >= '0' && line[col] <= '9') ||
+          line[col] === '_' || line[col] === '-'
+        )) {
+          word += line[col];
+          col++;
+        }
+        const lower = word.toLowerCase();
+        if (KEYWORDS[lower]) {
+          tokens.push(new Token(KEYWORDS[lower], lower, lineNum + 1, col + 1));
+        } else {
+          tokens.push(new Token(TokenType.IDENTIFIER, word, lineNum + 1, col + 1));
+        }
+        continue;
+      }
+      // Unknown character - skip it
+      col++;
+    }
+    tokens.push(new Token(TokenType.NEWLINE, '\\n', lineNum + 1, col + 1));
+  }
+  // Close remaining indents
+  while (indentStack.length > 1) {
+    indentStack.pop();
+    tokens.push(new Token(TokenType.DEDENT, 0, lines.length, 1));
+  }
+  tokens.push(new Token(TokenType.EOF, null, lines.length, 1));
+  return tokens;
+}
+module.exports = { tokenize, Token, TokenType, LexerError };