clewy-lang 1.0.0

package/README.md

@@ -0,0 +1,245 @@
+# Clewy ✨
+
+> The magic web-building language — `.cly` files become full websites.
+
+```
+page "My App"
+title "Hello World"
+button "Click me" => show "Hello! 👋"
+loop 3 => text "Simple is powerful"
+```
+
+That's it. That compiles to a complete, styled, interactive website.
+
+---
+
+## Installation
+
+```bash
+npm install -g clewy
+# or use without installing:
+npx clewy init my-app
+```
+
+**Requirements:** Node.js 14+
+
+---
+
+## Quick Start
+
+```bash
+npx clewy init my-app     # Create a new project
+cd my-app
+npx clewy run             # Start dev server with live reload
+```
+
+Your browser opens automatically at `http://localhost:3000`.  
+Edit `main.cly` — the page updates instantly.
+
+---
+
+## Commands
+
+| Command | What it does |
+|---------|--------------|
+| `npx clewy init <name>` | Create a new project |
+| `npx clewy init <name> landing` | Create with a landing page template |
+| `npx clewy init <name> todo` | Create with a todo app template |
+| `npx clewy run` | Start dev server with live reload |
+| `npx clewy run --port 8080` | Run on a custom port |
+| `npx clewy build` | Build `index.html`, `style.css`, `script.js` |
+| `npx clewy check` | Check `.cly` syntax without building |
+| `npx clewy --help` | Show all commands |
+
+---
+
+## Clewy Language Reference
+
+### Page title
+```
+page "My Awesome App"
+```
+
+### Headings
+```
+title "Big Heading"
+subtitle "Smaller heading"
+```
+
+### Text & links
+```
+text "Any paragraph of text here"
+link "Click here" "https://example.com"
+```
+
+### Buttons
+```
+button "Click me" => show "Hello!"        # Toggle a message
+button "Pop" => alert "A browser popup"   # Browser alert
+```
+
+### Input
+```
+input "Enter your name..."
+input "Search..." searchQuery             # Named input (accessible in JS)
+```
+
+### Show a message
+```
+show "This appears immediately on the page"
+```
+
+### Images
+```
+image "https://example.com/photo.jpg" "Alt text"
+image "local-photo.jpg"
+```
+
+### Navigation bar
+```
+nav "Home" "About" "Contact" "Sign Up"
+```
+
+### Footer
+```
+footer "© 2025 My App"
+```
+
+### Loops
+```
+loop 5 => text "Repeated!"               # Inline loop
+loop 3                                    # Block loop
+  text "Multiple"
+  text "lines inside"
+end
+```
+
+### Sections (grouped card)
+```
+section "Features"
+  text "✓ Feature one"
+  text "✓ Feature two"
+  button "Learn more" => show "Details"
+end
+```
+
+### Reusable components
+```
+component PricingCard
+  title "Pro Plan"
+  text "$29/month"
+  button "Subscribe" => show "Let's go!"
+end
+
+use PricingCard
+use PricingCard      # Use it multiple times
+```
+
+### Variables
+```
+var username "Alice"
+var version "1.0"
+```
+
+### Comments
+```
+# This is a comment — ignored by the compiler
+```
+
+---
+
+## Generated Output
+
+Every `.cly` file compiles to three files:
+
+| File | Contents |
+|------|----------|
+| `index.html` | Full HTML5 document |
+| `style.css` | Complete design system (CSS variables, responsive) |
+| `script.js` | All interactivity (button actions, inputs, toggles) |
+
+The output is **zero-dependency HTML** — just open `index.html` in any browser.
+
+---
+
+## Project Structure
+
+```
+clewy/                  ← Clewy language engine
+  src/
+    parser.js           ← Tokenizer + AST parser
+    compiler.js         ← AST → HTML/CSS/JS
+    runtime.js          ← Dev server + file watcher
+    cli.js              ← Command-line interface
+  examples/
+    kitchen-sink.cly    ← All features demonstrated
+    landing.cly         ← Landing page example
+  tests/
+    test.js             ← 40-test suite (parser + compiler)
+  package.json
+
+my-app/                 ← Your generated project
+  main.cly              ← ← YOU EDIT THIS
+  index.html            ← Generated
+  style.css             ← Generated
+  script.js             ← Generated
+```
+
+---
+
+## Design Principles
+
+1. **One command = one action** — no hidden complexity
+2. **Beginner first** — if you can describe it, you can build it  
+3. **Scratch-inspired** — visual blocks become text commands
+4. **Zero config** — works instantly, no setup required
+5. **Readable output** — generated HTML/CSS/JS is clean and readable
+6. **Magic, not magic** — simple syntax, real web output
+
+---
+
+## Examples
+
+### Hello World
+```
+page "Hello"
+title "Hello, World! 🌍"
+text "My first Clewy page"
+button "Greet" => show "Hello from Clewy!"
+```
+
+### Simple Portfolio
+```
+page "Jane Doe — Portfolio"
+nav "Work" "About" "Contact"
+title "Jane Doe"
+subtitle "Designer & Developer"
+text "I make beautiful things for the web."
+section "Projects"
+  text "✦ Project Alpha"
+  text "✦ Project Beta"
+  text "✦ Project Gamma"
+end
+footer "© 2025 Jane Doe"
+```
+
+### Component-based layout
+```
+component TeamMember
+  title "Team Member"
+  text "Role at Company"
+  link "LinkedIn" "https://linkedin.com"
+end
+
+section "Our Team"
+  use TeamMember
+  use TeamMember
+  use TeamMember
+end
+```
+
+---
+
+## License
+
+MIT — build anything, ship everything.

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "clewy-lang",
+  "version": "1.0.0",
+  "description": "The magic web-building language — write .cly files, get full websites",
+  "main": "src/compiler.js",
+  "bin": {
+    "clewy": "./src/cli.js"
+  },
+  "scripts": {
+    "test": "node tests/test.js"
+  },
+  "keywords": ["clewy", "web", "language", "transpiler", "beginner", "no-code", "static-site"],
+  "author": "Clewy",
+  "license": "MIT",
+  "engines": { "node": ">=14.0.0" },
+  "files": ["src/", "README.md"]
+}

package/src/cli.js

@@ -0,0 +1,411 @@
+#!/usr/bin/env node
+/**
+ * Clewy CLI  —  clewy init / run / build / check / new
+ *
+ * Install globally:  npm install -g clewy
+ * Or without install: npx clewy init my-app
+ */
+
+'use strict';
+const fs   = require('fs');
+const path = require('path');
+const { execSync, exec } = require('child_process');
+
+// ── colours ──────────────────────────────────────────────────────────────────
+const C = {
+  reset:'\x1b[0m', bold:'\x1b[1m', dim:'\x1b[2m',
+  green:'\x1b[32m', yellow:'\x1b[33m', blue:'\x1b[34m',
+  cyan:'\x1b[36m', red:'\x1b[31m', magenta:'\x1b[35m', white:'\x1b[97m',
+};
+const c  = (col, s) => `${C[col]}${s}${C.reset}`;
+const ok  = s => console.log(`  ${c('green','✓')} ${s}`);
+const err = s => console.log(`  ${c('red','✗')} ${s}`);
+const tip = s => console.log(`  ${c('dim', s)}`);
+const log = s => console.log(`  ${s}`);
+
+// ── banner ────────────────────────────────────────────────────────────────────
+function banner() {
+  const v = require('../package.json').version;
+  console.log('');
+  console.log(c('cyan',  '   ██████╗██╗     ███████╗██╗    ██╗██╗   ██╗'));
+  console.log(c('cyan',  '  ██╔════╝██║     ██╔════╝██║    ██║╚██╗ ██╔╝'));
+  console.log(c('cyan',  '  ██║     ██║     █████╗  ██║ █╗ ██║ ╚████╔╝ '));
+  console.log(c('cyan',  '  ██║     ██║     ██╔══╝  ██║███╗██║  ╚██╔╝  '));
+  console.log(c('cyan',  '  ╚██████╗███████╗███████╗╚███╔███╔╝   ██║   '));
+  console.log(c('cyan',  '   ╚═════╝╚══════╝╚══════╝ ╚══╝╚══╝    ╚═╝   '));
+  console.log('');
+  console.log(`  ${c('white','The magic web-building language')} ${c('dim','v'+v)}`);
+  console.log('');
+}
+
+// ── templates ─────────────────────────────────────────────────────────────────
+const TEMPLATES = {
+
+  default: `# Welcome to Clewy! ✨
+# Edit this file — your site updates live in the browser.
+
+page "My App"
+
+nav "Home" "About" "Contact"
+
+title "Hello, World! 👋"
+subtitle "You just wrote your first Clewy page"
+
+text "Clewy turns simple commands into beautiful websites."
+text "Edit this file and run  clewy run  to see your changes."
+
+section "Try the buttons"
+  button "Say hello"    => show "Hello from Clewy! 🎉"
+  button "Pop an alert" => alert "Clewy is working!"
+end
+
+section "Type something"
+  input "What is your name?" userName
+  button "Greet me" => show "Hey there, friend! 👋"
+end
+
+component Card
+  title "Reusable Card"
+  text "Define once — use anywhere."
+  button "Card action" => show "Component clicked ✓"
+end
+
+section "Components"
+  use Card
+  use Card
+end
+
+loop 3 => text "⭐ Clewy is minimal, instant, and fun"
+
+footer "Built with Clewy — the magic web language ✨"
+`,
+
+  landing: `page "My SaaS"
+
+nav "Home" "Features" "Pricing" "Login"
+
+title "Ship in minutes, not months 🚀"
+subtitle "The fastest way to launch your idea"
+
+text "Stop wrestling with HTML. Write what you mean — Clewy does the rest."
+
+button "Start for free →"  => show "Welcome! Check your inbox 📬"
+button "See a demo"        => alert "Live demo coming soon!"
+
+section "Why Clewy?"
+  text "✦ No HTML, CSS or JavaScript to learn"
+  text "✦ Live preview as you type"
+  text "✦ Production-ready output"
+  text "✦ Works on every device"
+end
+
+component Feature
+  title "Magic Commands"
+  text "One line of Clewy = a full interactive element."
+end
+
+section "Features"
+  use Feature
+end
+
+loop 4 => text "★ Trusted by developers worldwide"
+
+footer "© 2025 My SaaS — Made with Clewy"
+`,
+
+  todo: `page "Todo App"
+
+title "📝 My Todos"
+subtitle "Stay on top of everything"
+
+section "Add a task"
+  input "What needs doing?" newTask
+  button "Add ✓" => show "Task added!"
+end
+
+section "Tasks"
+  text "☐ Learn Clewy"
+  text "☐ Build something cool"
+  text "☐ Share it with friends"
+  text "☑ Install Clewy ← done!"
+end
+
+button "Clear all" => alert "Clear all tasks? (not wired up yet)"
+
+footer "Keep going ⚡"
+`,
+
+  portfolio: `page "My Portfolio"
+
+nav "Work" "About" "Contact"
+
+title "Hi, I'm Alex 👋"
+subtitle "Designer & Developer"
+
+text "I build fast, beautiful things for the web."
+text "Currently open to new projects."
+
+section "Selected Work"
+  text "✦ E-commerce redesign — 2× conversion rate"
+  text "✦ Mobile app — 50k downloads in 3 months"
+  text "✦ Brand identity — for a Y Combinator startup"
+end
+
+section "Skills"
+  loop 3 => text "React · Node.js · Figma · Clewy"
+end
+
+button "See my work" => show "Portfolio page coming soon! 👀"
+button "Hire me"     => show "Let's talk → alex@example.com 📬"
+
+link "GitHub"   "https://github.com"
+link "LinkedIn" "https://linkedin.com"
+
+footer "© 2025 Alex — Built with Clewy"
+`,
+};
+
+// ── .gitignore content ────────────────────────────────────────────────────────
+const GITIGNORE = `# Clewy — generated files (do NOT edit these manually)
+index.html
+style.css
+script.js
+.DS_Store
+`;
+
+// ── commands ──────────────────────────────────────────────────────────────────
+
+function cmdInit(args) {
+  const appName  = args[0];
+  const tmplName = args[1] || 'default';
+
+  if (!appName) {
+    err('Please provide a project name.');
+    log('');
+    log(`  Example: ${c('cyan','clewy init my-app')}`);
+    log(`  Example: ${c('cyan','clewy init my-app landing')}`);
+    log('');
+    process.exit(1);
+  }
+
+  const targetDir = path.resolve(process.cwd(), appName);
+
+  if (fs.existsSync(targetDir)) {
+    err(`Folder "${appName}" already exists.`);
+    process.exit(1);
+  }
+
+  if (!TEMPLATES[tmplName]) {
+    err(`Unknown template "${tmplName}". Available: ${Object.keys(TEMPLATES).join(', ')}`);
+    process.exit(1);
+  }
+
+  console.log('');
+  log(`${c('bold','Creating')} ${c('cyan', appName)} …`);
+  console.log('');
+
+  // Create folder + files
+  fs.mkdirSync(targetDir, { recursive: true });
+  fs.writeFileSync(path.join(targetDir, 'main.cly'),   TEMPLATES[tmplName]);
+  fs.writeFileSync(path.join(targetDir, '.gitignore'),  GITIGNORE);
+  fs.writeFileSync(path.join(targetDir, '.clewyrc'),    JSON.stringify({ name: appName, version: '0.1.0', template: tmplName }, null, 2));
+
+  ok(`Created  ${c('cyan', appName + '/main.cly')}`);
+  ok(`Created  ${c('dim',  appName + '/.gitignore')}`);
+  ok(`Created  ${c('dim',  appName + '/.clewyrc')}`);
+
+  console.log('');
+  log(c('bold', 'Next steps:'));
+  console.log('');
+  log(`  ${c('cyan', `cd ${appName}`)}`);
+  log(`  ${c('cyan', 'clewy run')}`);
+  console.log('');
+  tip(`Templates: default · landing · todo · portfolio`);
+  tip(`Example:   clewy init my-site landing`);
+  console.log('');
+}
+
+function cmdBuild(args) {
+  const projectDir = process.cwd();
+  const { buildProject } = require('./runtime');
+
+  const clyFile = path.join(projectDir, 'main.cly');
+  if (!fs.existsSync(clyFile)) {
+    err('No main.cly found. Are you inside a Clewy project?');
+    tip('Run: clewy init my-app');
+    console.log('');
+    process.exit(1);
+  }
+
+  log('');
+  log(`${c('blue','⚙')}  Building…`);
+
+  const ok2 = buildProject(projectDir);
+  if (!ok2) process.exit(1);
+
+  const sz = f => (fs.statSync(path.join(projectDir, f)).size / 1024).toFixed(1);
+
+  console.log('');
+  ok('Build complete!\n');
+  log(`     ${c('cyan','index.html')}  ${sz('index.html')} kB`);
+  log(`     ${c('cyan','style.css')}   ${sz('style.css')} kB`);
+  log(`     ${c('cyan','script.js')}   ${sz('script.js')} kB`);
+  console.log('');
+  tip('Open index.html in your browser, or run: clewy run');
+  console.log('');
+}
+
+function cmdRun(args) {
+  const projectDir = process.cwd();
+  const clyFile = path.join(projectDir, 'main.cly');
+
+  if (!fs.existsSync(clyFile)) {
+    err('No main.cly found. Are you inside a Clewy project?');
+    tip('Run: clewy init my-app');
+    console.log('');
+    process.exit(1);
+  }
+
+  let port = 3000;
+  const pi = args.indexOf('--port');
+  if (pi !== -1 && args[pi + 1]) port = parseInt(args[pi + 1], 10);
+
+  const { startServer } = require('./runtime');
+  startServer(projectDir, port);
+}
+
+function cmdNew(args) {
+  // clewy new button / clewy new page — interactive snippet helper
+  const what = args[0];
+  const snippets = {
+    button:    `button "Label" => show "Message"`,
+    input:     `input "Placeholder" varName`,
+    section:   `section "Title"\n  text "Content here"\nend`,
+    component: `component MyCard\n  title "Card Title"\n  text "Card content"\nend\n\nuse MyCard`,
+    loop:      `loop 4 => text "Repeated text"`,
+    nav:       `nav "Home" "About" "Contact"`,
+  };
+  if (!what || !snippets[what]) {
+    log('');
+    log(c('bold', '  Snippets — copy into your main.cly:'));
+    console.log('');
+    for (const [k, v] of Object.entries(snippets)) {
+      log(`  ${c('yellow', k.padEnd(12))}  ${c('dim', v.split('\n')[0])}`);
+    }
+    console.log('');
+    return;
+  }
+  console.log('');
+  log(c('bold', `Snippet: ${what}`));
+  console.log('');
+  snippets[what].split('\n').forEach(l => log(`  ${c('cyan', l)}`));
+  console.log('');
+}
+
+function cmdCheck(args) {
+  const projectDir = process.cwd();
+  const clyPath = path.join(projectDir, 'main.cly');
+
+  if (!fs.existsSync(clyPath)) {
+    err('No main.cly found.');
+    process.exit(1);
+  }
+
+  const { parse } = require('./parser');
+  const source = fs.readFileSync(clyPath, 'utf8');
+
+  try {
+    const ast = parse(source);
+    const counts = summarize(ast.body);
+    const total  = Object.values(counts).reduce((a,b)=>a+b,0);
+    console.log('');
+    ok(`Syntax OK — ${c('bold', total + ' nodes')} parsed`);
+    console.log('');
+    for (const [t, n] of Object.entries(counts)) {
+      log(`  ${c('cyan', t.padEnd(14))} ${c('dim','×')} ${n}`);
+    }
+    console.log('');
+  } catch (e) {
+    console.log('');
+    err(`Syntax error: ${e.message}`);
+    console.log('');
+    process.exit(1);
+  }
+}
+
+function summarize(body) {
+  const m = {};
+  for (const n of body) {
+    m[n.type] = (m[n.type]||0)+1;
+    if (n.body) { const sub=summarize(n.body); for (const [k,v] of Object.entries(sub)) m[k]=(m[k]||0)+v; }
+  }
+  return m;
+}
+
+function cmdHelp() {
+  banner();
+  log(c('bold','Commands:'));
+  console.log('');
+  const cmds = [
+    ['init <name> [template]', 'Create a new Clewy project'],
+    ['run [--port N]',         'Start dev server with live reload'],
+    ['build',                  'Compile main.cly → HTML/CSS/JS'],
+    ['check',                  'Validate .cly syntax'],
+    ['new [element]',          'Show code snippets'],
+  ];
+  for (const [cmd, desc] of cmds) {
+    log(`  ${c('cyan', ('clewy '+cmd).padEnd(32))} ${c('dim',desc)}`);
+  }
+  console.log('');
+  log(c('bold','Templates:'));
+  console.log('');
+  for (const t of Object.keys(TEMPLATES)) {
+    log(`  ${c('yellow', t)}`);
+  }
+  console.log('');
+  log(c('bold','Clewy language:'));
+  console.log('');
+  const syntax = [
+    ['page "Title"',                'Browser tab title'],
+    ['title "Big heading"',         'h1 heading'],
+    ['subtitle "Smaller"',          'h2 heading'],
+    ['text "Paragraph"',            'Text block'],
+    ['button "X" => show "Y"',      'Button that shows a message'],
+    ['button "X" => alert "Y"',     'Button with popup'],
+    ['input "Hint" varName',        'Text input field'],
+    ['show "Message"',              'Always-visible message'],
+    ['loop N => text "..."',        'Repeat N times'],
+    ['component Name … end',        'Define a component'],
+    ['use Name',                    'Render a component'],
+    ['section "Label" … end',       'Grouped card section'],
+    ['nav "A" "B" "C"',             'Navigation bar'],
+    ['link "Text" "url"',           'Hyperlink'],
+    ['image "url" "alt"',           'Image'],
+    ['footer "Text"',               'Page footer'],
+    ['# comment',                   'Ignored line'],
+  ];
+  for (const [s,d] of syntax) {
+    log(`  ${c('magenta', s.padEnd(36))} ${c('dim',d)}`);
+  }
+  console.log('');
+  log(`  Docs & source: ${c('cyan','https://github.com/clewy-lang/clewy')}`);
+  console.log('');
+}
+
+// ── entry point ───────────────────────────────────────────────────────────────
+const [,, cmd, ...rest] = process.argv;
+switch (cmd) {
+  case 'init':              cmdInit(rest);  break;
+  case 'run':               cmdRun(rest);   break;
+  case 'build':             cmdBuild(rest); break;
+  case 'check':             cmdCheck(rest); break;
+  case 'new':               cmdNew(rest);   break;
+  case 'help': case '--help': case '-h': case undefined:
+    cmdHelp(); break;
+  default:
+    console.log('');
+    err(`Unknown command: "${cmd}"`);
+    tip('Run: clewy --help');
+    console.log('');
+    process.exit(1);
+}