8f4e

8f4e is a stack oriented programming language and live code editor that I created to perform generative music at algorave events. This monorepo contains the compiler, specialised runtimes, and the code of a browser-based visual code editor I designed specifically for the 8f4e language. The editor and runtime stack follows a REPL-style coding loop (edit, compile/evaluate, and observe output), but it is UI-driven rather than a terminal prompt workflow.

More details about the language design and documentation can be found at ./docs/README.md

Package Architecture

The 8f4e project is organized as an Nx monorepo with the following package hierarchy:

8f4e/
└── packages/
    ├── compiler (The core compiler that transforms 8f4e code into WebAssembly)
    │   └── packages/
    │       ├── language-spec (Shared language contracts and target-independent compiler facts)
    │       ├── project-preparser (Parses .8f4e project documents into compiler input)
    │       ├── tokenizer (Parses source blocks into validated ASTs)
    │       ├── constant-resolver (Resolves const declarations and namespace imports)
    │       ├── memory-planner (Plans module and memory declaration layout)
    │       ├── memory-reference-resolver (Resolves memory layout references)
    │       ├── memory-default-resolver (Resolves memory defaults and pointer metadata)
    │       ├── semantic-reference-resolver (Resolves semantic value references)
    │       ├── stack-analyzer (Validates and reports stack effects)
    │       ├── semantic-utils (Shared target-independent semantic helpers)
    │       ├── wasm-codegen (WebAssembly code generation)
    │       ├── wasm-utils (Low-level WebAssembly byte construction helpers)
    │       └── stdlib (Standard-library include source files)
    ├── editor (The main editor package)
    │   └── packages/
    │       ├── editor-state (Editor state management)
    │       ├── editor-state-types (Shared public editor-state model types)
    │       ├── editor-state-testing (Framework-agnostic editor-state test helpers)
    │       ├── glugglug (2D WebGL graphics utilities)
    │       ├── sprite-generator (All UI graphics are generative)
    │       ├── state-manager (State manager with subscriptions)
    │       └── web-ui (WebGL rendering for the editor interface)
    ├── examples (Example modules and projects)
    ├── runtime-audio-worklet     ┐ 
    ├── runtime-main-thread │ (Various runtime environments 
    ├── runtime-web-worker  ┘ for different execution contexts)
    ├── cli (CLI for compiling 8f4e project files)
    ├── compiler-worker (Web Worker wrapper around the compiler for live coding)
    ├── vscode-extension (Local VS Code custom editor for .8f4e files)
    ├── metrics-dashboard (Local dashboard for release metrics)
    └── config (Shared tooling and configuration helpers for the workspace)

You can use npx nx graph to explore the relationship between the packages.

Development

Getting Started

1. Install dependencies:

   npm install

2. Build all packages:

   npx nx run app:build

3. Start the development server:

   npx nx run app:dev

   The app will be available at http://localhost:3000