WRNexusJS/packages/compiler/VISION.md

The .wrn language vision

.wrn is a planned single-file component language for WrNexus. One file can declare page state, view markup, SSR/client data bindings, styles, and realtime handlers, and the compiler lowers all of it to the TypeScript primitives the runtime already understands. Business logic should live in normal app/api route files; .wrn data bindings call those routes and render the response.

Example

page Home {
  state count = 0

  ssr {
    api users GET /api/users {
      return users.map((user) => user.name).join(", ")
    }
  }

  client {
    api latestUsers GET /api/users/latest {
      return users.map((user) => user.name).join(", ")
    }
  }

  view {
    <h1>Hello</h1>
    <button @click="count++">Count: {count}</button>
    <div api="users">Loading users...</div>
    <div api="latestUsers">Loading latest users...</div>
  }

  realtime chat {
    on message(data) {
      broadcast(data)
    }
  }
}

Lowering targets

.wrn construct	Compiles to
state x = 0	a data-scope seed hydrated by the reactive runtime
view { ... }	a page component returning an SSR HTML string
@click="count++"	a data-on-click binding in the reactive runtime
{count}	a mustache text binding evaluated against data-scope
ssr { api users GET /api/users { } }	server-side API call + HTML replacement before response
client { api users GET /api/users { } }	opaque CSR binding resolved through /__wrnexus/csr
realtime chat { }	a websocket export in the realtime router

Pipeline

.wrn source ──▶ tokenizer ──▶ parser ──▶ AST ──▶ codegen ──▶ .ts ──▶ Bun runtime

The MVP now includes tokenizing, parsing, and code generation for a small real subset. Future milestones can add richer expressions, typed data contracts, component composition, and a safer custom expression evaluator.