2 Commits

Author SHA1 Message Date
fe985c96f5 feat: redesign website to showcase all Lux capabilities
- New tagline: "The Language That Changes Everything"
- Highlight 6 key features: algebraic effects, behavioral types,
  schema evolution, dual compilation, native performance, batteries included
- Add sections for behavioral types (is pure, is total, is idempotent)
- Add section for schema evolution with migration examples
- Add section for dual compilation (C and JavaScript)
- Add "Why Lux?" comparisons (vs Haskell, Rust, Go, TypeScript, Elm, Zig)
- Add built-in effects showcase (Console, File, Http, Sql, etc.)
- Add developer tools section (package manager, LSP, REPL, etc.)
- Fix navigation to use anchor links (single-page site)
- Update footer to link to GitHub docs/examples
- Add README with local testing instructions

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-02-16 06:59:16 -05:00
4b553031fd fix: parser newline handling in lists and stdlib exports
- Fix parse_list_expr to skip newlines between list elements
- Add `pub` keyword to all exported functions in stdlib/html.lux
- Change List.foldl to List.fold (matching built-in name)
- Update weaknesses document with fixed issues

The module import system now works correctly. This enables:
- import stdlib/html to work as expected
- html.div(), html.render() etc. to be accessible
- Multi-line list expressions in Lux source files

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-02-16 06:51:37 -05:00
5 changed files with 531 additions and 197 deletions

View File

@@ -2266,12 +2266,15 @@ impl Parser {
fn parse_list_expr(&mut self) -> Result<Expr, ParseError> {
let start = self.current_span();
self.expect(TokenKind::LBracket)?;
self.skip_newlines();
let mut elements = Vec::new();
while !self.check(TokenKind::RBracket) {
elements.push(self.parse_expr()?);
self.skip_newlines();
if !self.check(TokenKind::RBracket) {
self.expect(TokenKind::Comma)?;
self.skip_newlines();
}
}

View File

@@ -11,13 +11,13 @@
// Html type represents a DOM structure
// Parameterized by Msg - the type of messages emitted by event handlers
type Html<M> =
pub type Html<M> =
| Element(String, List<Attr<M>>, List<Html<M>>)
| Text(String)
| Empty
// Attributes that can be applied to elements
type Attr<M> =
pub type Attr<M> =
| Class(String)
| Id(String)
| Style(String, String)
@@ -46,243 +46,243 @@ type Attr<M> =
// Element builders - Container elements
// ============================================================================
fn div<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
pub fn div<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
Element("div", attrs, children)
fn span<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
pub fn span<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
Element("span", attrs, children)
fn section<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
pub fn section<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
Element("section", attrs, children)
fn article<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
pub fn article<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
Element("article", attrs, children)
fn header<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
pub fn header<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
Element("header", attrs, children)
fn footer<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
pub fn footer<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
Element("footer", attrs, children)
fn nav<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
pub fn nav<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
Element("nav", attrs, children)
fn main<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
pub fn main<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
Element("main", attrs, children)
fn aside<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
pub fn aside<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
Element("aside", attrs, children)
// ============================================================================
// Element builders - Text elements
// ============================================================================
fn h1<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
pub fn h1<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
Element("h1", attrs, children)
fn h2<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
pub fn h2<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
Element("h2", attrs, children)
fn h3<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
pub fn h3<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
Element("h3", attrs, children)
fn h4<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
pub fn h4<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
Element("h4", attrs, children)
fn h5<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
pub fn h5<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
Element("h5", attrs, children)
fn h6<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
pub fn h6<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
Element("h6", attrs, children)
fn p<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
pub fn p<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
Element("p", attrs, children)
fn pre<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
pub fn pre<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
Element("pre", attrs, children)
fn code<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
pub fn code<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
Element("code", attrs, children)
fn blockquote<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
pub fn blockquote<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
Element("blockquote", attrs, children)
// ============================================================================
// Element builders - Inline elements
// ============================================================================
fn a<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
pub fn a<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
Element("a", attrs, children)
fn strong<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
pub fn strong<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
Element("strong", attrs, children)
fn em<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
pub fn em<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
Element("em", attrs, children)
fn small<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
pub fn small<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
Element("small", attrs, children)
fn br<M>(): Html<M> =
pub fn br<M>(): Html<M> =
Element("br", [], [])
fn hr<M>(): Html<M> =
pub fn hr<M>(): Html<M> =
Element("hr", [], [])
// ============================================================================
// Element builders - Lists
// ============================================================================
fn ul<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
pub fn ul<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
Element("ul", attrs, children)
fn ol<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
pub fn ol<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
Element("ol", attrs, children)
fn li<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
pub fn li<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
Element("li", attrs, children)
// ============================================================================
// Element builders - Forms
// ============================================================================
fn form<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
pub fn form<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
Element("form", attrs, children)
fn input<M>(attrs: List<Attr<M>>): Html<M> =
pub fn input<M>(attrs: List<Attr<M>>): Html<M> =
Element("input", attrs, [])
fn textarea<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
pub fn textarea<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
Element("textarea", attrs, children)
fn button<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
pub fn button<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
Element("button", attrs, children)
fn label<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
pub fn label<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
Element("label", attrs, children)
fn select<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
pub fn select<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
Element("select", attrs, children)
fn option<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
pub fn option<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
Element("option", attrs, children)
// ============================================================================
// Element builders - Media
// ============================================================================
fn img<M>(attrs: List<Attr<M>>): Html<M> =
pub fn img<M>(attrs: List<Attr<M>>): Html<M> =
Element("img", attrs, [])
fn video<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
pub fn video<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
Element("video", attrs, children)
fn audio<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
pub fn audio<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
Element("audio", attrs, children)
// ============================================================================
// Element builders - Tables
// ============================================================================
fn table<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
pub fn table<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
Element("table", attrs, children)
fn thead<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
pub fn thead<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
Element("thead", attrs, children)
fn tbody<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
pub fn tbody<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
Element("tbody", attrs, children)
fn tr<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
pub fn tr<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
Element("tr", attrs, children)
fn th<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
pub fn th<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
Element("th", attrs, children)
fn td<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
pub fn td<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
Element("td", attrs, children)
// ============================================================================
// Text and empty nodes
// ============================================================================
fn text<M>(content: String): Html<M> =
pub fn text<M>(content: String): Html<M> =
Text(content)
fn empty<M>(): Html<M> =
pub fn empty<M>(): Html<M> =
Empty
// ============================================================================
// Attribute helpers
// ============================================================================
fn class<M>(name: String): Attr<M> =
pub fn class<M>(name: String): Attr<M> =
Class(name)
fn id<M>(name: String): Attr<M> =
pub fn id<M>(name: String): Attr<M> =
Id(name)
fn style<M>(property: String, value: String): Attr<M> =
pub fn style<M>(property: String, value: String): Attr<M> =
Style(property, value)
fn href<M>(url: String): Attr<M> =
pub fn href<M>(url: String): Attr<M> =
Href(url)
fn src<M>(url: String): Attr<M> =
pub fn src<M>(url: String): Attr<M> =
Src(url)
fn alt<M>(description: String): Attr<M> =
pub fn alt<M>(description: String): Attr<M> =
Alt(description)
fn inputType<M>(t: String): Attr<M> =
pub fn inputType<M>(t: String): Attr<M> =
Type(t)
fn value<M>(v: String): Attr<M> =
pub fn value<M>(v: String): Attr<M> =
Value(v)
fn placeholder<M>(p: String): Attr<M> =
pub fn placeholder<M>(p: String): Attr<M> =
Placeholder(p)
fn disabled<M>(d: Bool): Attr<M> =
pub fn disabled<M>(d: Bool): Attr<M> =
Disabled(d)
fn checked<M>(c: Bool): Attr<M> =
pub fn checked<M>(c: Bool): Attr<M> =
Checked(c)
fn name<M>(n: String): Attr<M> =
pub fn name<M>(n: String): Attr<M> =
Name(n)
fn onClick<M>(msg: M): Attr<M> =
pub fn onClick<M>(msg: M): Attr<M> =
OnClick(msg)
fn onInput<M>(h: fn(String): M): Attr<M> =
pub fn onInput<M>(h: fn(String): M): Attr<M> =
OnInput(h)
fn onSubmit<M>(msg: M): Attr<M> =
pub fn onSubmit<M>(msg: M): Attr<M> =
OnSubmit(msg)
fn onChange<M>(h: fn(String): M): Attr<M> =
pub fn onChange<M>(h: fn(String): M): Attr<M> =
OnChange(h)
fn onMouseEnter<M>(msg: M): Attr<M> =
pub fn onMouseEnter<M>(msg: M): Attr<M> =
OnMouseEnter(msg)
fn onMouseLeave<M>(msg: M): Attr<M> =
pub fn onMouseLeave<M>(msg: M): Attr<M> =
OnMouseLeave(msg)
fn onFocus<M>(msg: M): Attr<M> =
pub fn onFocus<M>(msg: M): Attr<M> =
OnFocus(msg)
fn onBlur<M>(msg: M): Attr<M> =
pub fn onBlur<M>(msg: M): Attr<M> =
OnBlur(msg)
fn onKeyDown<M>(h: fn(String): M): Attr<M> =
pub fn onKeyDown<M>(h: fn(String): M): Attr<M> =
OnKeyDown(h)
fn onKeyUp<M>(h: fn(String): M): Attr<M> =
pub fn onKeyUp<M>(h: fn(String): M): Attr<M> =
OnKeyUp(h)
fn data<M>(name: String, value: String): Attr<M> =
pub fn data<M>(name: String, value: String): Attr<M> =
DataAttr(name, value)
// ============================================================================
@@ -290,11 +290,11 @@ fn data<M>(name: String, value: String): Attr<M> =
// ============================================================================
// Conditionally include an element
fn when<M>(condition: Bool, element: Html<M>): Html<M> =
pub fn when<M>(condition: Bool, element: Html<M>): Html<M> =
if condition then element else Empty
// Conditionally apply attributes
fn attrIf<M>(condition: Bool, attr: Attr<M>): List<Attr<M>> =
pub fn attrIf<M>(condition: Bool, attr: Attr<M>): List<Attr<M>> =
if condition then [attr] else []
// ============================================================================
@@ -302,7 +302,7 @@ fn attrIf<M>(condition: Bool, attr: Attr<M>): List<Attr<M>> =
// ============================================================================
// Render an attribute to a string
fn renderAttr<M>(attr: Attr<M>): String =
pub fn renderAttr<M>(attr: Attr<M>): String =
match attr {
Class(name) => " class=\"" + name + "\"",
Id(name) => " id=\"" + name + "\"",
@@ -333,24 +333,24 @@ fn renderAttr<M>(attr: Attr<M>): String =
}
// Render attributes list to string
fn renderAttrs<M>(attrs: List<Attr<M>>): String =
List.foldl(attrs, "", fn(acc, attr) => acc + renderAttr(attr))
pub fn renderAttrs<M>(attrs: List<Attr<M>>): String =
List.fold(attrs, "", fn(acc, attr) => acc + renderAttr(attr))
// Self-closing tags
fn isSelfClosing(tag: String): Bool =
pub fn isSelfClosing(tag: String): Bool =
tag == "br" || tag == "hr" || tag == "img" || tag == "input" ||
tag == "meta" || tag == "link" || tag == "area" || tag == "base" ||
tag == "col" || tag == "embed" || tag == "source" || tag == "track" || tag == "wbr"
// Render Html to string
fn render<M>(html: Html<M>): String =
pub fn render<M>(html: Html<M>): String =
match html {
Element(tag, attrs, children) => {
let attrStr = renderAttrs(attrs)
if isSelfClosing(tag) then
"<" + tag + attrStr + " />"
else {
let childrenStr = List.foldl(children, "", fn(acc, child) => acc + render(child))
let childrenStr = List.fold(children, "", fn(acc, child) => acc + render(child))
"<" + tag + attrStr + ">" + childrenStr + "</" + tag + ">"
}
},
@@ -359,7 +359,7 @@ fn render<M>(html: Html<M>): String =
}
// Escape HTML special characters
fn escapeHtml(s: String): String = {
pub fn escapeHtml(s: String): String = {
// Simple replacement - a full implementation would handle all entities
let s1 = String.replace(s, "&", "&amp;")
let s2 = String.replace(s1, "<", "&lt;")
@@ -369,7 +369,7 @@ fn escapeHtml(s: String): String = {
}
// Render a full HTML document
fn document(title: String, headExtra: List<Html<M>>, bodyContent: List<Html<M>>): String = {
pub fn document(title: String, headExtra: List<Html<M>>, bodyContent: List<Html<M>>): String = {
let headElements = List.concat([
[Element("meta", [DataAttr("charset", "UTF-8")], [])],
[Element("meta", [Name("viewport"), Value("width=device-width, initial-scale=1.0")], [])],

View File

@@ -2,49 +2,62 @@
This document tracks issues and limitations discovered while building the Lux website in Lux.
## Critical Issues
## Fixed Issues
### 1. Module Import System Not Working
### 1. Module Import System Not Working (FIXED)
**Description:** The `import` statement doesn't appear to work for importing standard library modules.
**Description:** The `import` statement wasn't working for importing standard library modules.
**Example:**
```lux
import html // Doesn't make html functions available
```
**Root Cause:** Two issues were found:
1. Parser didn't skip newlines inside list expressions, causing parse errors in multi-line lists
2. Functions in stdlib modules weren't marked as `pub` (public), so they weren't exported
**Workaround:** Functions must be defined in the same file or copied.
**Fix:**
1. Added `skip_newlines()` calls to `parse_list_expr()` in parser.rs
2. Added `pub` keyword to all exported functions in stdlib/html.lux
**Status:** Needs investigation
**Status:** FIXED
---
### 2. Parse Error in html.lux (Line 196-197)
### 2. Parse Error in html.lux (FIXED)
**Description:** When trying to load files that import the html module, there's a parse error.
**Description:** When trying to load files that import the html module, there was a parse error at line 196-197.
**Error Message:**
```
Module error: Module error in '<main>': Parse error: Parse error at 196-197: Unexpected token: \n
```
**Status:** Needs investigation
**Root Cause:** The parser's `parse_list_expr()` function didn't handle newlines between list elements.
**Fix:** Added `skip_newlines()` calls after `[`, after each element, and after commas in list expressions.
**Status:** FIXED
---
### 3. List.foldl Renamed to List.fold (FIXED)
**Description:** The html.lux file used `List.foldl` but the built-in List module exports `List.fold`.
**Fix:** Changed `List.foldl` to `List.fold` in stdlib/html.lux.
**Status:** FIXED
---
## Minor Issues
### 3. String.replace May Not Exist
### 4. String.replace Verified Working
**Description:** The `escapeHtml` function in html.lux uses `String.replace`, but this function may not be implemented.
**Description:** The `escapeHtml` function in html.lux uses `String.replace`.
**Workaround:** Implement character-by-character escaping.
**Status:** Needs verification
**Status:** VERIFIED WORKING - String.replace is implemented in the interpreter.
---
### 4. FileSystem Effect Not Fully Implemented
### 5. FileSystem Effect Not Fully Implemented
**Description:** For static site generation, we need `FileSystem.mkdir`, `FileSystem.write`, `FileSystem.copy` operations. These may not be fully implemented.
@@ -54,17 +67,17 @@ Module error: Module error in '<main>': Parse error: Parse error at 196-197: Une
---
### 5. List.concat May Have Issues
### 6. List.concat Verified Working
**Description:** The `List.concat` function used in html.lux document generation may not handle nested lists correctly.
**Description:** The `List.concat` function is used in html.lux document generation.
**Status:** Needs verification
**Status:** VERIFIED WORKING - List.concat is implemented in the interpreter.
---
## Feature Gaps
### 6. No Built-in Static Site Generation
### 7. No Built-in Static Site Generation
**Description:** There's no built-in way to generate static HTML files from Lux. A static site generator effect or module would be helpful.
@@ -76,7 +89,7 @@ Module error: Module error in '<main>': Parse error: Parse error at 196-197: Une
---
### 7. No Template String Support
### 8. No Template String Support
**Description:** Multi-line strings and template literals (like JavaScript's backticks) would make HTML generation much easier.
@@ -94,7 +107,7 @@ let html = `<div class="${className}">${content}</div>`
---
### 8. No Markdown Parser
### 9. No Markdown Parser
**Description:** A built-in Markdown parser would be valuable for documentation sites.
@@ -112,6 +125,8 @@ These features work correctly and can be used for website generation:
4. **Basic types** - `String`, `Int`, `Bool` work
5. **Let bindings** - Variable assignment works
6. **Functions** - Function definitions work
7. **Module imports** - Works with `import stdlib/module`
8. **Html module** - Fully functional for generating HTML strings
---
@@ -119,15 +134,14 @@ These features work correctly and can be used for website generation:
### For Website MVP
Since the module system isn't working, the website should be:
1. **Hand-written HTML** (already done in `dist/index.html`)
The module system now works! The website can be:
1. **Generated from Lux** using the html module for HTML rendering
2. **CSS separate file** (already done in `static/style.css`)
3. **Lux code examples** embedded as text in HTML
### For Future
Once these issues are fixed, the website can be:
1. **Generated from Lux** using the components and pages modules
1. **Add FileSystem effect** for writing generated HTML to files
2. **Markdown-based documentation** parsed and rendered by Lux
3. **Live playground** using WASM compilation
@@ -137,12 +151,15 @@ Once these issues are fixed, the website can be:
| Feature | Status | Notes |
|---------|--------|-------|
| String concatenation | Works | `"<" + tag + ">"` |
| Conditionals | Works | `if x then y else z` |
| Console.print | Works | Basic output |
| Module imports | ❌ Broken | Parse errors |
| Html module | ❌ Blocked | Depends on imports |
| FileSystem | ❓ Unknown | Not tested |
| String concatenation | Works | `"<" + tag + ">"` |
| Conditionals | Works | `if x then y else z` |
| Console.print | Works | Basic output |
| Module imports | Works | `import stdlib/html` |
| Html module | Works | Full HTML generation |
| List.fold | Works | Fold over lists |
| List.concat | Works | Concatenate list of lists |
| String.replace | Works | String replacement |
| FileSystem | Unknown | Not tested |
---
@@ -151,3 +168,6 @@ Once these issues are fixed, the website can be:
| Date | Finding |
|------|---------|
| 2026-02-16 | Module import system not working, parse error at line 196-197 in html.lux |
| 2026-02-16 | Fixed: Parser newline handling in list expressions |
| 2026-02-16 | Fixed: Added `pub` to stdlib/html.lux exports |
| 2026-02-16 | Fixed: Changed List.foldl to List.fold |

View File

@@ -0,0 +1,72 @@
# Lux Website
## Testing Locally
The website is a static HTML site. To test it with working navigation:
### Option 1: Python (simplest)
```bash
cd website/lux-site/dist
python -m http.server 8000
# Open http://localhost:8000
```
### Option 2: Node.js
```bash
npx serve website/lux-site/dist
# Open http://localhost:3000
```
### Option 3: Nix
```bash
nix-shell -p python3 --run "cd website/lux-site/dist && python -m http.server 8000"
```
### Option 4: Direct file (limited)
Open `website/lux-site/dist/index.html` directly in a browser. Navigation links will work since they're anchor links (`#features`, `#effects`, etc.), but this won't work for multi-page setups.
## Structure
```
website/lux-site/
├── dist/
│ ├── index.html # Main website
│ └── static/
│ └── style.css # Styles
├── src/
│ ├── components.lux # Lux components (for future generation)
│ ├── pages.lux # Page templates
│ └── generate.lux # Site generator
├── LUX_WEAKNESSES.md # Issues found during development
└── README.md # This file
```
## Building with Lux
Once the module system is working (fixed!), you can generate the site:
```bash
./target/release/lux website/lux-site/src/generate.lux
```
The HTML module is now functional and can render HTML from Lux code:
```lux
import stdlib/html
let page = html.div([html.class("container")], [
html.h1([], [html.text("Hello!")])
])
Console.print(html.render(page))
// Output: <div class="container"><h1>Hello!</h1></div>
```
## Deployment
For GitHub Pages or any static hosting:
```bash
# Copy dist folder to your hosting
cp -r website/lux-site/dist/* /path/to/deploy/
```

View File

@@ -3,8 +3,8 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lux - Functional Programming with First-Class Effects</title>
<meta name="description" content="Lux is a functional programming language with first-class effects. Effects are explicit. Types are powerful. Performance is native.">
<title>Lux - The Language That Changes Everything</title>
<meta name="description" content="Lux: Algebraic effects, behavioral types, schema evolution, and native performance. Compile to C or JavaScript. One language, every platform.">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>✨</text></svg>">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Source+Serif+Pro:wght@400;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="static/style.css">
@@ -12,12 +12,12 @@
<body>
<!-- Navigation -->
<nav class="nav">
<a href="/" class="nav-logo">LUX</a>
<a href="#" class="nav-logo">LUX</a>
<div class="nav-links">
<a href="/learn/" class="nav-link">Learn</a>
<a href="/docs/" class="nav-link">Docs</a>
<a href="/playground/" class="nav-link">Playground</a>
<a href="/community/" class="nav-link">Community</a>
<a href="#features" class="nav-link">Features</a>
<a href="#effects" class="nav-link">Effects</a>
<a href="#types" class="nav-link">Types</a>
<a href="#install" class="nav-link">Install</a>
</div>
<a href="https://github.com/luxlang/lux" class="nav-github">GitHub</a>
</nav>
@@ -31,64 +31,205 @@
╩═╝╚═╝╩ ╩</pre>
</div>
<h1 class="hero-title">
Functional Programming<br>
with First-Class Effects
The Language That<br>
Changes Everything
</h1>
<p class="hero-tagline">
Effects are explicit. Types are powerful. Performance is native.
Algebraic effects. Behavioral types. Schema evolution.<br>
Compile to native C or JavaScript. One language, every platform.
</p>
<div class="hero-cta">
<a href="/learn/getting-started/" class="btn btn-primary">Get Started</a>
<a href="/playground/" class="btn btn-secondary">Playground</a>
<a href="#install" class="btn btn-primary">Get Started</a>
<a href="#features" class="btn btn-secondary">See Features</a>
</div>
</section>
<!-- Code Demo Section -->
<section class="code-demo">
<!-- What Makes Lux Different -->
<section id="features" class="value-props">
<div class="container">
<div class="code-demo-grid">
<div class="code-block">
<pre class="code"><code><span class="hljs-keyword">fn</span> <span class="hljs-function">processOrder</span>(
order: <span class="hljs-type">Order</span>
): <span class="hljs-type">Receipt</span>
<span class="hljs-keyword">with</span> {<span class="hljs-effect">Database</span>, <span class="hljs-effect">Email</span>} =
{
<span class="hljs-keyword">let</span> saved = <span class="hljs-effect">Database</span>.save(order)
<span class="hljs-effect">Email</span>.send(
order.customer,
<span class="hljs-string">"Order confirmed!"</span>
)
Receipt(saved.id)
}</code></pre>
<h2>Not Just Another Functional Language</h2>
<p class="section-subtitle">Lux solves problems other languages can't even express</p>
<div class="value-props-grid">
<div class="value-prop card">
<h3 class="value-prop-title">ALGEBRAIC EFFECTS</h3>
<p class="value-prop-desc">Side effects in the type signature. Swap handlers for testing. No dependency injection frameworks.</p>
</div>
<div class="code-explanation">
<h3>The type signature tells you everything</h3>
<ul>
<li>Queries the database</li>
<li>Sends an email</li>
<li>Returns a Receipt</li>
</ul>
<p class="highlight">No surprises. No hidden side effects.</p>
<div class="value-prop card">
<h3 class="value-prop-title">BEHAVIORAL TYPES</h3>
<p class="value-prop-desc">Prove functions are pure, total, deterministic, or idempotent. The compiler verifies it.</p>
</div>
<div class="value-prop card">
<h3 class="value-prop-title">SCHEMA EVOLUTION</h3>
<p class="value-prop-desc">Built-in type versioning with automatic migrations. Change your data types safely.</p>
</div>
<div class="value-prop card">
<h3 class="value-prop-title">DUAL COMPILATION</h3>
<p class="value-prop-desc">Same code compiles to native C (via GCC) or JavaScript. Server and browser from one source.</p>
</div>
<div class="value-prop card">
<h3 class="value-prop-title">NATIVE PERFORMANCE</h3>
<p class="value-prop-desc">Beats Rust and Zig on recursive benchmarks. Zero-cost effect abstraction via evidence passing.</p>
</div>
<div class="value-prop card">
<h3 class="value-prop-title">BATTERIES INCLUDED</h3>
<p class="value-prop-desc">Package manager, LSP, REPL, debugger, formatter, test runner. All built in.</p>
</div>
</div>
</div>
</section>
<!-- Value Props Section -->
<section class="value-props">
<!-- Effects Section -->
<section id="effects" class="code-demo">
<div class="container">
<div class="value-props-grid">
<h2>Effects: The Core Innovation</h2>
<p class="section-subtitle">Every side effect is tracked in the type signature</p>
<div class="code-demo-grid">
<div class="code-block">
<pre class="code"><code><span class="hljs-keyword">fn</span> <span class="hljs-function">processOrder</span>(
order: <span class="hljs-type">Order</span>
): <span class="hljs-type">Receipt</span>
<span class="hljs-keyword">with</span> {<span class="hljs-effect">Sql</span>, <span class="hljs-effect">Http</span>, <span class="hljs-effect">Console</span>} =
{
<span class="hljs-keyword">let</span> saved = <span class="hljs-effect">Sql</span>.execute(db,
<span class="hljs-string">"INSERT INTO orders..."</span>)
<span class="hljs-effect">Http</span>.post(webhook, order)
<span class="hljs-effect">Console</span>.print(<span class="hljs-string">"Order {order.id} saved"</span>)
Receipt(saved.id)
}</code></pre>
</div>
<div class="code-explanation">
<h3>The signature tells you everything:</h3>
<ul>
<li><strong>Sql</strong> — Touches the database</li>
<li><strong>Http</strong> — Makes network calls</li>
<li><strong>Console</strong> — Prints output</li>
</ul>
<p class="highlight">No surprises. No hidden side effects. Ever.</p>
</div>
</div>
</div>
</section>
<!-- Testing Section -->
<section class="testing">
<div class="container">
<h2>Testing Without Mocks or DI Frameworks</h2>
<p class="section-subtitle">Swap effect handlers at test time. Same code, different behavior.</p>
<div class="code-demo-grid">
<div class="code-block">
<pre class="code"><code><span class="hljs-comment">// Production: real database, real HTTP</span>
<span class="hljs-keyword">run</span> processOrder(order) <span class="hljs-keyword">with</span> {
<span class="hljs-effect">Sql</span> -> postgresHandler,
<span class="hljs-effect">Http</span> -> realHttpClient,
<span class="hljs-effect">Console</span> -> stdoutHandler
}</code></pre>
</div>
<div class="code-block">
<pre class="code"><code><span class="hljs-comment">// Test: in-memory DB, captured calls</span>
<span class="hljs-keyword">run</span> processOrder(order) <span class="hljs-keyword">with</span> {
<span class="hljs-effect">Sql</span> -> inMemoryDb,
<span class="hljs-effect">Http</span> -> captureRequests,
<span class="hljs-effect">Console</span> -> devNull
}</code></pre>
</div>
</div>
<p class="highlight" style="text-align: center; margin-top: 2rem;">No Mockito. No dependency injection. Just swap the handlers.</p>
</div>
</section>
<!-- Behavioral Types Section -->
<section id="types" class="code-demo" style="background: var(--bg-secondary);">
<div class="container">
<h2>Behavioral Types: Compile-Time Guarantees</h2>
<p class="section-subtitle">Prove properties about your functions. The compiler enforces them.</p>
<div class="code-block" style="max-width: 700px; margin: 0 auto;">
<pre class="code"><code><span class="hljs-comment">// The compiler verifies these properties</span>
<span class="hljs-keyword">fn</span> <span class="hljs-function">add</span>(a: <span class="hljs-type">Int</span>, b: <span class="hljs-type">Int</span>): <span class="hljs-type">Int</span>
<span class="hljs-keyword">is</span> <span class="hljs-property">pure</span> <span class="hljs-keyword">is</span> <span class="hljs-property">commutative</span> = a + b
<span class="hljs-keyword">fn</span> <span class="hljs-function">factorial</span>(n: <span class="hljs-type">Int</span>): <span class="hljs-type">Int</span>
<span class="hljs-keyword">is</span> <span class="hljs-property">total</span> = <span class="hljs-keyword">if</span> n <= <span class="hljs-number">1</span> <span class="hljs-keyword">then</span> <span class="hljs-number">1</span> <span class="hljs-keyword">else</span> n * factorial(n - <span class="hljs-number">1</span>)
<span class="hljs-keyword">fn</span> <span class="hljs-function">processPayment</span>(p: <span class="hljs-type">Payment</span>): <span class="hljs-type">Result</span>
<span class="hljs-keyword">is</span> <span class="hljs-property">idempotent</span> = <span class="hljs-comment">// Safe to retry on failure</span>
...
<span class="hljs-keyword">fn</span> <span class="hljs-function">hash</span>(data: <span class="hljs-type">Bytes</span>): <span class="hljs-type">Hash</span>
<span class="hljs-keyword">is</span> <span class="hljs-property">deterministic</span> = <span class="hljs-comment">// Same input = same output</span>
...</code></pre>
</div>
<div class="value-props-grid" style="margin-top: 2rem;">
<div class="value-prop card">
<h3 class="value-prop-title">EFFECTS</h3>
<p class="value-prop-desc">Side effects are tracked in the type signature. Know exactly what every function does.</p>
<h3 class="value-prop-title">is pure</h3>
<p class="value-prop-desc">No side effects. Safe to memoize.</p>
</div>
<div class="value-prop card">
<h3 class="value-prop-title">TYPES</h3>
<p class="value-prop-desc">Full type inference with algebraic data types. Catch bugs at compile time.</p>
<h3 class="value-prop-title">is total</h3>
<p class="value-prop-desc">Always terminates. No infinite loops.</p>
</div>
<div class="value-prop card">
<h3 class="value-prop-title">PERFORMANCE</h3>
<p class="value-prop-desc">Compiles to native C via gcc. Matches C performance, beats Rust and Zig.</p>
<h3 class="value-prop-title">is idempotent</h3>
<p class="value-prop-desc">Run twice = run once. Safe for retries.</p>
</div>
</div>
</div>
</section>
<!-- Schema Evolution Section -->
<section class="code-demo">
<div class="container">
<h2>Schema Evolution: Safe Data Migrations</h2>
<p class="section-subtitle">Built-in type versioning. No more migration headaches.</p>
<div class="code-block" style="max-width: 700px; margin: 0 auto;">
<pre class="code"><code><span class="hljs-keyword">type</span> <span class="hljs-type">User</span> <span class="hljs-keyword">@v1</span> { name: <span class="hljs-type">String</span> }
<span class="hljs-keyword">type</span> <span class="hljs-type">User</span> <span class="hljs-keyword">@v2</span> {
name: <span class="hljs-type">String</span>,
email: <span class="hljs-type">String</span>,
<span class="hljs-keyword">from</span> <span class="hljs-keyword">@v1</span> = {
name: old.name,
email: <span class="hljs-string">"unknown@example.com"</span>
}
}
<span class="hljs-keyword">type</span> <span class="hljs-type">User</span> <span class="hljs-keyword">@v3</span> {
firstName: <span class="hljs-type">String</span>,
lastName: <span class="hljs-type">String</span>,
email: <span class="hljs-type">String</span>,
<span class="hljs-keyword">from</span> <span class="hljs-keyword">@v2</span> = {
firstName: String.split(old.name, <span class="hljs-string">" "</span>).head,
lastName: String.split(old.name, <span class="hljs-string">" "</span>).tail,
email: old.email
}
}</code></pre>
</div>
<p class="highlight" style="text-align: center; margin-top: 2rem;">Load old data with new code. The compiler ensures migration paths exist.</p>
</div>
</section>
<!-- Dual Compilation Section -->
<section class="code-demo" style="background: var(--bg-secondary);">
<div class="container">
<h2>One Language, Every Platform</h2>
<p class="section-subtitle">Compile to native C or JavaScript from the same source</p>
<div class="code-demo-grid">
<div class="code-block">
<pre class="code"><code><span class="hljs-comment"># Compile to native binary (via GCC)</span>
lux compile server.lux
./server <span class="hljs-comment"># Runs natively</span>
<span class="hljs-comment"># Compile to JavaScript</span>
lux compile client.lux --target js
node client.js <span class="hljs-comment"># Runs in Node/browser</span></code></pre>
</div>
<div class="code-explanation">
<h3>Same code, different targets:</h3>
<ul>
<li><strong>Native C</strong> — Maximum performance, deployable anywhere</li>
<li><strong>JavaScript</strong> — Browser apps, Node.js servers</li>
<li><strong>Shared code</strong> — Validation, types, business logic</li>
</ul>
</div>
</div>
</div>
@@ -97,7 +238,7 @@
<!-- Benchmarks Section -->
<section class="benchmarks">
<div class="container">
<h2>Performance</h2>
<h2>Native Performance</h2>
<p class="section-subtitle">fib(35) benchmark — verified with hyperfine</p>
<div class="benchmarks-chart">
<div class="benchmark-row">
@@ -129,42 +270,96 @@
<span class="benchmark-time">47.0ms</span>
</div>
</div>
<p class="benchmarks-note">
<a href="/benchmarks/">See full methodology →</a>
<p style="text-align: center; color: var(--text-muted); margin-top: 1rem;">
Zero-cost effects via evidence passing — O(1) handler lookup
</p>
</div>
</section>
<!-- Testing Section -->
<section class="testing">
<!-- Built-in Effects Section -->
<section class="code-demo">
<div class="container">
<h2>Testing Without Mocks</h2>
<p class="section-subtitle">Swap effect handlers at test time. Same code, different behavior.</p>
<h2>Built-in Effects</h2>
<p class="section-subtitle">Everything you need, ready to use</p>
<div class="value-props-grid" style="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));">
<div class="value-prop card">
<h3 class="value-prop-title">Console</h3>
<p class="value-prop-desc">print, readLine, readInt</p>
</div>
<div class="value-prop card">
<h3 class="value-prop-title">File</h3>
<p class="value-prop-desc">read, write, exists, listDir</p>
</div>
<div class="value-prop card">
<h3 class="value-prop-title">Http</h3>
<p class="value-prop-desc">get, post, put, delete</p>
</div>
<div class="value-prop card">
<h3 class="value-prop-title">HttpServer</h3>
<p class="value-prop-desc">listen, respond, routing</p>
</div>
<div class="value-prop card">
<h3 class="value-prop-title">Sql</h3>
<p class="value-prop-desc">query, execute, transactions</p>
</div>
<div class="value-prop card">
<h3 class="value-prop-title">Process</h3>
<p class="value-prop-desc">exec, env, args, exit</p>
</div>
<div class="value-prop card">
<h3 class="value-prop-title">Random</h3>
<p class="value-prop-desc">int, float, bool</p>
</div>
<div class="value-prop card">
<h3 class="value-prop-title">Time</h3>
<p class="value-prop-desc">now, sleep</p>
</div>
</div>
</div>
</section>
<!-- Developer Tools Section -->
<section class="code-demo" style="background: var(--bg-secondary);">
<div class="container">
<h2>Developer Experience</h2>
<p class="section-subtitle">Modern tooling, built-in</p>
<div class="code-demo-grid">
<div class="code-block">
<pre class="code"><code><span class="hljs-comment">// Production</span>
<span class="hljs-keyword">run</span> processOrder(order) <span class="hljs-keyword">with</span> {
<span class="hljs-effect">Database</span> -> postgresDb,
<span class="hljs-effect">Email</span> -> smtpServer
}</code></pre>
<pre class="code"><code><span class="hljs-comment"># Package manager</span>
lux pkg init myproject
lux pkg add json-parser
lux pkg install
<span class="hljs-comment"># Development tools</span>
lux fmt <span class="hljs-comment"># Format code</span>
lux check <span class="hljs-comment"># Type check</span>
lux test <span class="hljs-comment"># Run tests</span>
lux watch app.lux <span class="hljs-comment"># Hot reload</span>
<span class="hljs-comment"># LSP for your editor</span>
lux lsp <span class="hljs-comment"># Start language server</span></code></pre>
</div>
<div class="code-block">
<pre class="code"><code><span class="hljs-comment">// Testing</span>
<span class="hljs-keyword">run</span> processOrder(order) <span class="hljs-keyword">with</span> {
<span class="hljs-effect">Database</span> -> inMemoryDb,
<span class="hljs-effect">Email</span> -> collectEmails
}</code></pre>
<div class="code-explanation">
<h3>Everything included:</h3>
<ul>
<li><strong>Package Manager</strong> — Git repos, local paths, registry</li>
<li><strong>LSP</strong> — VS Code, Neovim, Emacs, Helix</li>
<li><strong>REPL</strong> — Interactive exploration</li>
<li><strong>Debugger</strong> — Step through code</li>
<li><strong>Formatter</strong> — Consistent style</li>
<li><strong>Test Runner</strong> — Built-in test effect</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Quick Start Section -->
<section class="quick-start">
<section id="install" class="quick-start">
<div class="container">
<h2>Get Started</h2>
<div class="code-block">
<pre class="code"><code><span class="hljs-comment"># Install via Nix</span>
<div class="code-block" style="max-width: 600px; margin: 0 auto 2rem auto;">
<pre class="code"><code><span class="hljs-comment"># Install via Nix (recommended)</span>
nix run github:luxlang/lux
<span class="hljs-comment"># Or build from source</span>
@@ -173,9 +368,55 @@ cd lux && nix develop
cargo build --release
<span class="hljs-comment"># Start the REPL</span>
./target/release/lux</code></pre>
./target/release/lux
<span class="hljs-comment"># Run a file</span>
./target/release/lux hello.lux
<span class="hljs-comment"># Compile to native binary</span>
./target/release/lux compile app.lux --run</code></pre>
</div>
<div class="code-block" style="max-width: 600px; margin: 0 auto;">
<pre class="code"><code><span class="hljs-comment">// hello.lux</span>
<span class="hljs-keyword">fn</span> <span class="hljs-function">main</span>(): <span class="hljs-type">Unit</span> <span class="hljs-keyword">with</span> {<span class="hljs-effect">Console</span>} = {
<span class="hljs-effect">Console</span>.print(<span class="hljs-string">"Hello, Lux!"</span>)
}
<span class="hljs-keyword">run</span> main() <span class="hljs-keyword">with</span> {}</code></pre>
</div>
</div>
</section>
<!-- Why Lux Section -->
<section class="code-demo" style="background: var(--bg-secondary);">
<div class="container">
<h2>Why Lux?</h2>
<div class="value-props-grid">
<div class="value-prop card">
<h3 class="value-prop-title">vs Haskell</h3>
<p class="value-prop-desc">Algebraic effects instead of monads. Same power, clearer code. Weeks to learn, not months.</p>
</div>
<div class="value-prop card">
<h3 class="value-prop-title">vs Rust</h3>
<p class="value-prop-desc">No borrow checker to fight. Automatic memory management. Still native performance.</p>
</div>
<div class="value-prop card">
<h3 class="value-prop-title">vs Go</h3>
<p class="value-prop-desc">Real type safety. Pattern matching. No nil panics. Effects track what code does.</p>
</div>
<div class="value-prop card">
<h3 class="value-prop-title">vs TypeScript</h3>
<p class="value-prop-desc">Sound type system. Native compilation. Effects are tracked, not invisible.</p>
</div>
<div class="value-prop card">
<h3 class="value-prop-title">vs Elm</h3>
<p class="value-prop-desc">Compiles to native, not just JS. Server-side, CLI apps, anywhere.</p>
</div>
<div class="value-prop card">
<h3 class="value-prop-title">vs Zig</h3>
<p class="value-prop-desc">Higher-level abstractions. Algebraic types. Still fast.</p>
</div>
</div>
<a href="/learn/getting-started/" class="btn btn-primary">Full Installation Guide →</a>
</div>
</section>
</main>
@@ -186,37 +427,35 @@ cargo build --release
<div class="footer-grid">
<div class="footer-brand">
<span class="footer-logo">LUX</span>
<p>Functional programming with first-class effects.</p>
<p>The language that changes everything.</p>
</div>
<div class="footer-column">
<h4>LEARN</h4>
<h4>RESOURCES</h4>
<ul>
<li><a href="/learn/getting-started/">Getting Started</a></li>
<li><a href="/learn/tutorial/">Tutorial</a></li>
<li><a href="/learn/examples/">Examples</a></li>
<li><a href="/docs/">Reference</a></li>
<li><a href="https://github.com/luxlang/lux/tree/main/docs">Documentation</a></li>
<li><a href="https://github.com/luxlang/lux/tree/main/examples">Examples</a></li>
<li><a href="https://github.com/luxlang/lux/tree/main/docs/guide">Language Guide</a></li>
</ul>
</div>
<div class="footer-column">
<h4>COMMUNITY</h4>
<ul>
<li><a href="https://discord.gg/lux">Discord</a></li>
<li><a href="https://github.com/luxlang/lux">GitHub</a></li>
<li><a href="/community/contributing/">Contributing</a></li>
<li><a href="/community/code-of-conduct/">Code of Conduct</a></li>
<li><a href="https://github.com/luxlang/lux/issues">Issues</a></li>
<li><a href="https://github.com/luxlang/lux/discussions">Discussions</a></li>
</ul>
</div>
<div class="footer-column">
<h4>ABOUT</h4>
<h4>PROJECT</h4>
<ul>
<li><a href="/benchmarks/">Benchmarks</a></li>
<li><a href="/blog/">Blog</a></li>
<li><a href="https://github.com/luxlang/lux/blob/main/LICENSE">License</a></li>
<li><a href="https://github.com/luxlang/lux/blob/main/docs/benchmarks.md">Benchmarks</a></li>
<li><a href="https://github.com/luxlang/lux/blob/main/CHANGELOG.md">Changelog</a></li>
<li><a href="https://github.com/luxlang/lux/blob/main/LICENSE">License (MIT)</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2026 Lux Language</p>
<p>Made with Lux</p>
</div>
</div>
</footer>