Starship

Starship is an experimental JSX-based compiler framework designed to revolutionize modern frontend development. By transforming custom .uss files into JSX, Starship leverages React's runtime while introducing its own unique reactive paradigms and ergonomic syntax. This framework is ideal for developers looking to explore innovative architectures and patterns in frontend frameworks.

Core Features

📡 Signal-based Reactivity

Starship implements a sophisticated reactivity system using Signals. This allows for straightforward state management, protected by SignalGuards and managed through a global SignalStore. Here's an example of creating signals:

// Individual signal creation
const [counter, setCounter, attach] = createSignal(0)

// Batch signal creation with automatic setter/attacher generation
const { counter, message, voyagerThreshold } = createSignals({
  _counter: 0,  // '_' prefix to skip attacher generation
  message: "",
  voyagerThreshold: 5
})

Pattern Matching

Inspired by Rust, Starship introduces functional pattern matching for elegant state management. You can easily set signal values based on conditions:

// Signal setters support pattern matching out of the box
attachToCounter(() => setMessage(counter, [
  [when(v => v > 10), "Value too high!"],
  [when(v => v === 0), "Starting point"],
  [when(v => range(2, 6).includes(v)), "Just alright"],
  [_, "Default case"]
]))

// Match objects and use RegEx!
const objResult = match({ x: 1, y: "hello" }, [
    [{ x: when(n => n > 0), y: /^h/ }, "Matched!"],
    [_, "No match"]
])

const person = { name: "Alice", age: 30 };
const greeting = match(person, [
    [{ name: "Alice" }, "Hello, Alice!"],
    [{ age: when(n => n >= 18) }, "Hello, Adult!"],
    [_, "Hello, Stranger!"]
]);

A powerful range function allows for easy creation of arrays:

const numberRange = range(1, 5)
// Output: [1, 2, 3, 4, 5]

const charRange = range('a', 'e');
// Output: ['a', 'b', 'c', 'd', 'e']

const startDate = new Date(2023, 0, 1);
const endDate = new Date(2023, 0, 5);
const dates = range(startDate, endDate);
// Output: 
// Sun Jan 01 2023
// Mon Jan 02 2023
// Tue Jan 03 2023
// Wed Jan 04 2023
// Thu Jan 05 2023

Ergonomic Template Syntax

Starship provides a familiar three-section structure for organizing components, reminiscent of Vue's styling:

{/* The minimal Starship app */}
<div ".container">
  <button on:click={setCounter(-1)}> -1 </button>
    { counter }
  <button on:click={setCounter(+1)}> +1 </button>
</div>

<script>
const { counter } = createSignals({ counter: 0 })
</script>

<style>
.container { /* ... */ }
</style>

This framework offers built-in shorthands for quick element manipulations, drastically improving developer experience.

Declarative Control Flow

Starship allows for clean and concise conditional rendering and iteration:

{/* Conditional Rendering */}
<Show when={counter === threshold}>
  <p>Threshold reached!</p>
</Show>

{/* Array Iteration */}
<For {items}:in:{array}>
  {item.name}
</For>

{/* Range-based Iteration */}
<For {index}:range:{array}>
  Item #{index}
</For>

Technical Architecture

The Starship framework operates as a multi-stage compiler, ensuring high levels of efficiency:

1. Template Compilation Layer performs tokenization of .uss files and transforms them into JSX.
2. Reactivity Layer handles signal creation and management.
3. Runtime Layer integrates with Vite's build pipeline for efficient rendering.

Development Status

Currently under development, Starship is a promising venture not recommended for production use yet. Upcoming features include a CLI tool, a minimal template, a browser-based editor, a testing suite, and comprehensive documentation.

Explore, contribute, and join the conversation as we uncover the future of frontend frameworks with Starship!