RIFT and Aperture Language Support for VS Code

Syntax highlighting, Zen themes, snippets, and language intelligence for RIFT and Aperture.

Embodying RIFT's Zen aesthetic: minimalist, intentional, beautiful.

🎯 Features

• 🎨 Comprehensive Syntax Highlighting:
  • Full support for RIFT backend (.rift, .riftp, .riftrc, rift.toml, compass.toml)
  • Full support for Aperture frontend (.aperture, aperture.toml)
  • Reactive hooks (signal, effect, computed, watch, state, reactive, mounted, cleanup, ref, slot, emit)
  • Aperture JSX-like markup (<tag>, <Component />, <slot />, on:click={...})
  • String interpolation holes @{ expr } with recursive expression syntax coloring
  • Custom operators (=>, ->, |>, |->, |=>, |?:, |~, @, ::, =~, ==, .., ...)
  • Type hints in comments (-- string, -- number, -- boolean, etc.)
• 🧘 Zen-Inspired Themes:
  • RIFT Zen Light: Elegant monochromatic off-white/cream canvas (#FAFAF8) with warm taupe accents (#8B7355) and crisp ink typography.
  • RIFT Zen Dark: Deep charcoal canvas (#0F0F0D) with luminous text (#F5F5F3) and warm accents (#9B8B7F).
  • RIFT Zen: Warm Japanese paper & ink palette (#F7F6F2).
• 💡 Smart Language Features:
  • 4-tier bracket pair colorization and soft matched-bracket glow
  • Smart indentation for arrow functions (=>), colons (:), braces ({), and JSX tags
  • Code folding regions (#region/#endregion, comments, functions, classes, components)
  • Auto-closing pairs and surrounding pairs for quotes, brackets, block comments, and interpolation
  • Hover tooltips with documentation, type signatures, and examples for all keywords and operators
  • Document outline symbol navigation for functions, classes, methods, and components (Ctrl+Shift+O)
  • Real-time diagnostic error reporting via rift-lsp language server integration
• ✨ Rich Snippets:
  • RIFT snippets (fn, let, class, signal, effect, if, for, match, try, grab, pipe, lambda)
  • Aperture snippets (comp, state, reactive, mounted, slot, div, btn, input, form)

📁 Supported File Types

🎨 Color Palette & Tokens

Light Mode (Default: RIFT Zen Light)

• Background: #FAFAF8 (off-white / cream)
• Foreground: #0A0A08 (deep black)
• Keywords (fn, let, class, if, for, etc.): #1a1a18 (Bold)
• Strings: #5a5a58
• String Interpolation @{}: #8B7355 (Warm taupe)
• Comments (--, ~* *~): #8B8B89 (Italic)
• Functions / Methods: #1a1a18
• Variables: #333331
• Custom Operators (|>, |->, |=>, |?:, @, ::, =~, ==): #8B7355
• Numbers & Booleans: #666664
• Null / Undefined: #8B8B89
• JSX Tags & Components: #1a1a18 (Bold)
• JSX Attributes: #333331
• Type Hints (-- string): #8B8B89 (Italic)

Dark Mode (RIFT Zen Dark)

• Background: #0F0F0D (deep charcoal)
• Foreground: #F5F5F3 (off-white)
• Keywords: #E8E8E6 (Bright / Bold)
• Strings: #A8A8A6
• Comments: #7A7A78 (Italic)
• Functions: #E8E8E6
• Variables: #CCCCCA
• Operators & Interpolation: #9B8B7F (Warm)
• Numbers & Booleans: #999997
• JSX Tags: #E8E8E6

🚀 Installation

From VS Code Marketplace

1. Open VS Code.
2. Press Ctrl+Shift+X (or Cmd+Shift+X on macOS) to open the Extensions view.
3. Search for RIFT Language Support.
4. Click Install.

From VSIX Package

code --install-extension rift-and-aperture-tools-1.0.2.vsix

Development Mode (From Source)

1. Clone the repository:

   git clone https://lang.riftlang.dev/NolanIdle/rift.git
   

2. Open in VS Code:

   code --extensionDevelopmentPath=/path/to/rift/editors/vscode
   

🎨 Selecting a Theme

1. Press Ctrl+K Ctrl+T (or Cmd+K Cmd+T).
2. Select one of the RIFT Zen themes:
   • RIFT Zen Light (Clean, high-contrast day theme)
   • RIFT Zen Dark (Deep, focused night theme)
   • RIFT Zen (Warm paper & bamboo theme)

⚡ Snippets

Type the snippet prefix in any .rift or .aperture file and press Tab or Enter:

RIFT Snippets

• fn - Function definition: fn name(params) => { ... }
• fnasync - Asynchronous function: fn name(params) |async| => { ... }
• let - Variable declaration: let name = value
• letarr - Destructure array: let [first, second, ...rest] = array
• class - Class definition with init constructor
• classchild - Class with inheritance (class Child :: Parent [ ... ])
• staticfn - Static class method
• signal - Create reactive signal: name = signal(0)
• effect - Reactive side effect: effect(() => { ... })
• computed - Memoized computed state: computed(() => ...)
• watch - Watcher: watch(target, |val| => { ... })
• if / ifelse - Conditional expression
• for - Array comprehension: for x in array => x * 2
• while - While loop
• match - Pattern matching block
• try - Try/catch block
• grab - Module import: grab [sym] at "path"
• exportfn - Export function
• pipe - Data pipeline with |>
• lambda - Lambda closure: |args| => expr
• print - Print to stdout

Aperture Snippets

• comp - Aperture UI component with JSX
• state - Reactive component state: count = state(0)
• reactive - Reactive object: reactive([key: val])
• mounted - Lifecycle mounted hook
• cleanup - Lifecycle cleanup hook
• ref - DOM reference
• slot - Component <slot />
• emit - Dispatch event: emit("event", data)
• div, btn, input, form, header, main, footer - Common JSX elements
• style - Scoped component style block

🔌 Language Server Integration (rift-lsp)

The extension automatically integrates with the rift-lsp language server binary to provide live syntax validation and push diagnostics.

Building rift-lsp

cargo build -p rift-lsp --release

The binary will be generated at target/release/rift-lsp.

Configuration

In your VS Code settings.json:

{
  "rift.serverPath": "/path/to/rift-lsp"
}

If unset, the extension automatically looks in <workspace>/target/release/rift-lsp and falls back to your system $PATH.

🧪 Syntax Examples

RIFT (test.rift)

-- Comments are styled in gray italic
~* Block comments are supported *~

fn hello(name) => "Hello @{name}"

let count = signal(0)

effect(() => {
  print("Count:", count())
})

class User [
  fn init(name, email) => {
    name
    email
  }
  fn greet() => "Hi, I'm @{name}"
]

data = [1, 2, 3] |> map(|x| => x * 2) |> filter(|x| => x > 2)

grab [User] at "@models/users"
export fn process() => {}

Aperture (test.aperture)

component Counter(props) => {
  count = state(0)
  
  effect(() => {
    print("Count:", count())
  })
  
  increment = || => count.set(count() + 1)
  
  -> <div class="counter">
    <h1>Count: @{count()}</h1>
    <button on:click={increment}>+1</button>
  </div>
}

🤝 Contributing & Support

Contributions are welcome! Please feel free to submit issues and pull requests to https://lang.riftlang.dev/NolanIdle/rift.

• Author: Nolan Idle (nolanidle@gmail.com)
• Repository: lang.riftlang.dev/NolanIdle/rift
• Issues: lang.riftlang.dev/NolanIdle/rift/issues

📄 License

This extension is licensed under the Apache License, Version 2.0.