docs: update status for completed JS backend and package manager
- JS_WASM_BACKEND_PLAN: Mark phases 1-5 complete, deprioritize WASM - LANGUAGE_COMPARISON: Update package manager status - OVERVIEW: Add completed features list - ROADMAP: Mark JS backend and package manager complete - Add PACKAGES.md documenting the package system Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -150,101 +150,171 @@ async function fetchData_lux(handlers) {
|
||||
|
||||
---
|
||||
|
||||
## Implementation Status
|
||||
|
||||
| Phase | Status | Progress |
|
||||
|-------|--------|----------|
|
||||
| Phase 1: Core Language | COMPLETE | 100% |
|
||||
| Phase 2: Standard Library | COMPLETE | 100% |
|
||||
| Phase 3: Effects in JS | COMPLETE | 100% |
|
||||
| Phase 4: Browser/DOM Support | COMPLETE | 100% |
|
||||
| Phase 5: CLI Integration | COMPLETE | 100% |
|
||||
| Phase 6: WASM Backend | NOT STARTED | 0% |
|
||||
|
||||
---
|
||||
|
||||
## Implementation Phases
|
||||
|
||||
### Phase 1: Core Language (2-3 weeks)
|
||||
### Phase 1: Core Language - COMPLETE
|
||||
|
||||
| Feature | Effort | Notes |
|
||||
| Feature | Status | Notes |
|
||||
|---------|--------|-------|
|
||||
| Basic types (Int, Float, Bool, String) | 2 days | Direct mapping |
|
||||
| Arithmetic and comparison operators | 1 day | |
|
||||
| Functions and calls | 2 days | |
|
||||
| Let bindings | 1 day | |
|
||||
| If expressions | 1 day | Ternary or if/else |
|
||||
| Pattern matching (basic) | 3 days | Tag checks, destructuring |
|
||||
| ADT definitions and constructors | 2 days | Object literals |
|
||||
| Closures | 2 days | Native JS closures |
|
||||
| Lists | 2 days | Map to Array |
|
||||
| Basic types (Int, Float, Bool, String) | DONE | Direct mapping |
|
||||
| Arithmetic and comparison operators | DONE | |
|
||||
| Functions and calls | DONE | |
|
||||
| Let bindings | DONE | |
|
||||
| If expressions | DONE | Ternary or if/else |
|
||||
| Pattern matching (basic) | DONE | Tag checks, destructuring |
|
||||
| ADT definitions and constructors | DONE | Object literals |
|
||||
| Closures | DONE | Native JS closures |
|
||||
| Lists | DONE | Map to Array |
|
||||
|
||||
**Milestone:** Can compile `fib.lux` to JS and run in Node.js
|
||||
**Milestone:** Can compile `fib.lux` to JS and run in Node.js - ACHIEVED
|
||||
|
||||
### Phase 2: Standard Library (1-2 weeks)
|
||||
### Phase 2: Standard Library - COMPLETE
|
||||
|
||||
| Module | Effort | JS Implementation |
|
||||
| Module | Status | JS Implementation |
|
||||
|--------|--------|-------------------|
|
||||
| Console | 1 day | `console.log` |
|
||||
| String | 2 days | Native string methods |
|
||||
| List | 2 days | Array methods |
|
||||
| Math | 1 day | `Math.*` |
|
||||
| Option/Result | 1 day | Pattern matching |
|
||||
| JSON | 2 days | `JSON.parse/stringify` |
|
||||
| Console | DONE | `console.log` |
|
||||
| String | DONE | 20+ operations (length, concat, slice, etc.) |
|
||||
| List | DONE | Array methods (map, filter, fold, etc.) |
|
||||
| Math | DONE | `Math.*` (trig, pow, log, etc.) |
|
||||
| Option | DONE | isSome, isNone, map, flatMap, unwrapOr |
|
||||
| Result | DONE | isOk, isErr, map, mapErr, flatMap, toOption |
|
||||
| JSON | DONE | parse, stringify, get, keys, values, etc. |
|
||||
|
||||
**Milestone:** Standard library examples work in browser
|
||||
**Milestone:** Standard library examples work in browser - ACHIEVED
|
||||
|
||||
### Phase 3: Effects in JS (2 weeks)
|
||||
### Phase 3: Effects in JS - COMPLETE
|
||||
|
||||
| Effect | Effort | JS Implementation |
|
||||
| Effect | Status | JS Implementation |
|
||||
|--------|--------|-------------------|
|
||||
| Console | 1 day | `console.log`, `prompt()` |
|
||||
| Http | 3 days | `fetch()` API |
|
||||
| File | 2 days | Not available in browser (Node.js only) |
|
||||
| Time | 1 day | `Date.now()`, `setTimeout` |
|
||||
| Random | 1 day | `Math.random()` |
|
||||
| DOM (new) | 5 days | New effect for browser manipulation |
|
||||
| Console | DONE | `console.log`, `prompt()` |
|
||||
| Http | DONE | `fetch()` API with Ok/Err handling |
|
||||
| Time | DONE | `Date.now()`, `setTimeout` |
|
||||
| Random | DONE | `Math.random()`, int, bool, float |
|
||||
| DOM | DONE | Full DOM manipulation API |
|
||||
|
||||
**Milestone:** HTTP requests work in browser
|
||||
**Milestone:** HTTP requests work in browser - ACHIEVED
|
||||
|
||||
### Phase 4: Browser/DOM Support (2-3 weeks)
|
||||
### Phase 4: Browser/DOM Support - COMPLETE
|
||||
|
||||
New `Dom` effect for browser manipulation:
|
||||
The `Dom` effect provides comprehensive browser manipulation:
|
||||
|
||||
```lux
|
||||
effect Dom {
|
||||
fn querySelector(selector: String): Option<Element>
|
||||
fn createElement(tag: String): Element
|
||||
fn appendChild(parent: Element, child: Element): Unit
|
||||
fn addEventListener(el: Element, event: String, handler: () -> Unit): Unit
|
||||
fn setTextContent(el: Element, text: String): Unit
|
||||
fn setAttribute(el: Element, name: String, value: String): Unit
|
||||
fn getInputValue(el: Element): String
|
||||
}
|
||||
// Available Dom operations:
|
||||
Dom.querySelector(selector) // -> Option<Element>
|
||||
Dom.querySelectorAll(selector) // -> List<Element>
|
||||
Dom.getElementById(id) // -> Option<Element>
|
||||
Dom.createElement(tag) // -> Element
|
||||
Dom.createTextNode(text) // -> Element
|
||||
Dom.appendChild(parent, child)
|
||||
Dom.removeChild(parent, child)
|
||||
Dom.setTextContent(el, text)
|
||||
Dom.getTextContent(el)
|
||||
Dom.setInnerHtml(el, html)
|
||||
Dom.setAttribute(el, name, value)
|
||||
Dom.getAttribute(el, name) // -> Option<String>
|
||||
Dom.addClass(el, class)
|
||||
Dom.removeClass(el, class)
|
||||
Dom.hasClass(el, class) // -> Bool
|
||||
Dom.setStyle(el, prop, value)
|
||||
Dom.getValue(el) // For inputs
|
||||
Dom.setValue(el, value)
|
||||
Dom.addEventListener(el, event, handler)
|
||||
Dom.focus(el)
|
||||
Dom.blur(el)
|
||||
Dom.scrollTo(x, y)
|
||||
Dom.getBoundingClientRect(el)
|
||||
Dom.getWindowSize()
|
||||
```
|
||||
|
||||
| Feature | Effort | Notes |
|
||||
**Html Module** for type-safe HTML construction:
|
||||
|
||||
```lux
|
||||
// Element constructors
|
||||
Html.div(attrs, children)
|
||||
Html.span(attrs, children)
|
||||
Html.button(attrs, children)
|
||||
Html.input(attrs, children)
|
||||
// ... 30+ HTML elements
|
||||
|
||||
// Attribute constructors
|
||||
Html.class("name")
|
||||
Html.id("id")
|
||||
Html.href("url")
|
||||
Html.onClick(handler)
|
||||
Html.onInput(handler)
|
||||
// ... many more
|
||||
|
||||
// Rendering
|
||||
Html.render(node) // -> String (for SSR)
|
||||
Html.renderToDom(node) // -> Element (for browser)
|
||||
```
|
||||
|
||||
**TEA (The Elm Architecture) Runtime:**
|
||||
|
||||
```javascript
|
||||
Lux.app({
|
||||
init: initialModel,
|
||||
update: (model, msg) => newModel,
|
||||
view: (model, dispatch) => Html.div(...),
|
||||
root: "#app"
|
||||
});
|
||||
```
|
||||
|
||||
| Feature | Status | Notes |
|
||||
|---------|--------|-------|
|
||||
| Basic DOM queries | 2 days | querySelector, getElementById |
|
||||
| Element creation | 2 days | createElement, appendChild |
|
||||
| Event handling | 3 days | addEventListener with closures |
|
||||
| Attribute manipulation | 2 days | setAttribute, classList |
|
||||
| Form handling | 2 days | Input values, form submission |
|
||||
| Virtual DOM (optional) | 5 days | Efficient updates |
|
||||
| Basic DOM queries | DONE | querySelector, getElementById, querySelectorAll |
|
||||
| Element creation | DONE | createElement, createTextNode, appendChild |
|
||||
| Event handling | DONE | addEventListener with closures |
|
||||
| Attribute manipulation | DONE | setAttribute, classList, styles |
|
||||
| Form handling | DONE | getValue, setValue, isChecked |
|
||||
| Html module | DONE | Type-safe HTML construction |
|
||||
| TEA runtime | DONE | Elm-style app architecture |
|
||||
| View dependency analysis | DONE | Svelte-style optimization hooks |
|
||||
|
||||
**Milestone:** Can build interactive web page in Lux
|
||||
**Milestone:** Can build interactive web page in Lux - ACHIEVED
|
||||
|
||||
### Phase 5: CLI Integration (1 week)
|
||||
### Phase 5: CLI Integration - COMPLETE
|
||||
|
||||
```bash
|
||||
# Compile to JavaScript
|
||||
lux compile app.lux --target js -o app.js
|
||||
|
||||
# Compile to JavaScript module (ES modules)
|
||||
lux compile app.lux --target js --module -o app.mjs
|
||||
|
||||
# Compile with bundled runtime
|
||||
lux compile app.lux --target js --bundle -o app.bundle.js
|
||||
|
||||
# Run in Node.js
|
||||
lux run app.lux --target js
|
||||
# Compile and run in Node.js
|
||||
lux compile app.lux --target js --run
|
||||
```
|
||||
|
||||
### Phase 6: WASM Backend (3-4 weeks)
|
||||
### Phase 6: WASM Backend - DEPRIORITIZED
|
||||
|
||||
Options:
|
||||
1. **Lux → C → Emscripten → WASM** (easiest, reuse C backend)
|
||||
2. **Lux → WASM directly** (more control, harder)
|
||||
3. **Lux → AssemblyScript → WASM** (middle ground)
|
||||
**Status:** Not planned. The JS backend fully serves the Elm/Gleam-style frontend use case.
|
||||
|
||||
Recommended: Start with Emscripten approach, direct WASM later.
|
||||
**Rationale:** For typical web applications, JS compilation is superior:
|
||||
- Seamless DOM interop (no WASM boundary overhead)
|
||||
- Readable output for debugging
|
||||
- Smaller bundle sizes
|
||||
- Native event handling
|
||||
- Direct JS ecosystem integration
|
||||
|
||||
Neither Elm nor Gleam compile to WASM—they target JS for these exact reasons.
|
||||
|
||||
**Future consideration:** WASM may be revisited for:
|
||||
- Computation-heavy workloads (image processing, simulations, crypto)
|
||||
- Sharing binary logic between native server and browser
|
||||
- Porting performance-critical libraries
|
||||
|
||||
For now, this is out of scope.
|
||||
|
||||
---
|
||||
|
||||
|
||||
Reference in New Issue
Block a user