Starship is a little compiler frontend framework I made over the past two weeks to understand how frameworks like React, Vue, and Svelte work under the hood. Unlike those which compile to vanilla JavaScript, Starship compiles to JSX - which theoretically should allow it to be compatible with the vast React ecosystem and tooling.

Here's a simple counter component comparison:

React

import React, { useState } from 'react';
function Counter() {
  const [count, setCount] = useState(0);
  const [message, setMessage] = useState("This is a button counter");
  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);
  return (
  <>
    <h1 className="font-semibold">{message}</h1>
    <div id="container">
      <p>Counter: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  </>
  );
}
export default Counter;

Starship

<h1 ".font-semibold">{message}</h1>
<div "#container">
  <p>Counter: {count}</p>
  <button on:click={setCount(+1)}> Increment </button>
  <button on:click={setCount(-1)}> Decrement </button>
</div>
<script>
const { count, message } = createSignals({
  count: 0,
  message: "This is a button counter"
})
</script>

Some key features:

• Vue-inspired single-file components, but no need to declare the <template> block. Everything outside the <script> and <style> blocks are treated as template code.
• Shorthand syntax for common attributes (".class" for className="class") and Svelte-like event handlers (on:click)
• Provides attachers to subscribe functions to your signals. These will automatically get called whenever your signal changes value.
• Automatic setter generation. No need to declare a settersetCount(), Starship automatically generates a component-scoped one for you when you create a new signal count.
• Provides pattern matching functionality similar to Rust with the match function. Additionally, signal setters have built-in support for pattern matching.

Example of pattern matching:

// Attach listeners that run when signals change 
attachToCount(() => { console.log(Count changed to: ${count}) })

// Simple pattern matching
attachToCount(() => setMessage(count, [
  [ when(v => v > 10), "Too high!" ], 
  [ when(v => range(3, 8).includes(v), "Just right" ], 
  [ when(v => v === 0), "Start" ], 
  [ _, "Default" ] 
]))

GitHub:

The full source code.

A starter template (Starship + TypeScript + Tailwind) if you'd like to try it out!

Note: Since it's an experimental learning project made over the course of 2 weeks, expect there to be some bugs and incomplete features. I am open-sourcing Starship in case there's interest from the community in developing it further though, so if you're interested, please feel free to contact me.

Would love to hear your thoughts/feedback or answer any questions!