@trixty/solaris

Solaris — A production-grade TypeScript meta-framework powered by fine-grained signals reactivity and zero-virtual-DOM performance.

📦 Installation

npm install @trixty/solaris
# or
pnpm add @trixty/solaris
# or
yarn add @trixty/solaris

🔌 Required VS Code Extension

Components use standard .tsx / .jsx. For optional .sl scripts in Visual Studio Code, install the official extension:

👉 Solaris Framework on VS Code Marketplace

It provides full syntax highlighting, Emmet abbreviation expansion, auto-closing tags, matching tag auto-rename, and TypeScript IntelliSense.

🚀 Quick Usage

Below is a complete interactive example demonstrating signals, deep store mutations, control flow (<Show>, <For>), modal portals (<Portal>), and automatic dependency tracking with createEffect:

import {
  createSignal,
  createStore,
  createEffect,
  Show,
  For,
  Portal,
  render,
} from "@trixty/solaris";

interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

function App() {
  // Fine-grained primitive signals
  const [showModal, setShowModal] = createSignal(false);
  const [newText, setNewText] = createSignal("");

  // Deep proxy reactive store
  const [store, setStore] = createStore<{ todos: Todo[] }>({
    todos: [
      {
        id: 1,
        text: "Explore Solaris fine-grained reactivity",
        completed: true,
      },
      { id: 2, text: "Build a blazing fast web application", completed: false },
    ],
  });

  // Auto-tracking effect for logging todo count changes
  createEffect(() => {
    console.log("Total todos:", store.todos.length);
  });

  const addTodo = (e: Event) => {
    e.preventDefault();
    if (!newText().trim()) return;

    setStore((draft) => {
      draft.todos.push({
        id: Date.now(),
        text: newText().trim(),
        completed: false,
      });
    });
    setNewText("");
  };

  const toggleTodo = (id: number) => {
    setStore((draft) => {
      const item = draft.todos.find((t) => t.id === id);
      if (item) item.completed = !item.completed;
    });
  };

  return (
    <main class="app-container">
      <header>
        <h1>⚡ Solaris Reactive Todo Dashboard</h1>
        <button onclick={() => setShowModal(true)}>➕ Open Modal Portal</button>
      </header>

      {/* Control Flow: Add Todo Form */}
      <form onsubmit={addTodo} class="todo-form">
        <input
          type="text"
          placeholder="What needs to be done?"
          value={newText()}
          oninput={(e: Event) =>
            setNewText((e.target as HTMLInputElement).value)
          }
        />
        <button type="submit">Add Task</button>
      </form>

      {/* Control Flow: List Rendering with <For> */}
      <ul class="todo-list">
        <For each={() => store.todos}>
          {(todo: Todo) => (
            <li class={todo.completed ? "completed" : ""}>
              <label>
                <input
                  type="checkbox"
                  checked={todo.completed}
                  onchange={() => toggleTodo(todo.id)}
                />
                <span>{todo.text}</span>
              </label>
            </li>
          )}
        </For>
      </ul>

      {/* Control Flow: Conditional Modal Overlay with <Show> and <Portal> */}
      <Show when={showModal}>
        <Portal>
          <div class="modal-backdrop" onclick={() => setShowModal(false)}>
            <div class="modal-card" onclick={(e: Event) => e.stopPropagation()}>
              <h2>🚀 Solaris Portal Modal</h2>
              <p>
                This modal is rendered directly into <code>document.body</code>{" "}
                while maintaining reactive signal bindings from the parent
                component!
              </p>
              <button onclick={() => setShowModal(false)}>Close Modal</button>
            </div>
          </div>
        </Portal>
      </Show>
    </main>
  );
}

// Mount app to DOM
const root = document.getElementById("app");
if (root) render(App, root);

🎯 Subpath Exports Guide

Solaris exposes all framework capabilities via subpaths:

// Core Framework API
import { createSignal, createStore, render, Root } from "@trixty/solaris";

// Reactivity Engine
import {
  createSignal,
  createEffect,
  createMemo,
  createStore,
  batch,
} from "@trixty/solaris/reactivity";

// DOM Renderer & Control Flow
import {
  render,
  createPortal,
  Show,
  For,
  Switch,
  Match,
  Suspense,
} from "@trixty/solaris/renderer";

// Runtime & Context API
import {
  createContext,
  inject,
  onMount,
  onCleanup,
} from "@trixty/solaris/runtime";

// SPA Router
import {
  Router,
  RouteView,
  Link,
  useNavigate,
  useParams,
} from "@trixty/solaris/router";

// Data Fetching
import { createResource, SolarisFetchClient } from "@trixty/solaris/fetch";

// SSR & Hydration
import { renderToString, renderToStream, hydrate } from "@trixty/solaris/ssr";

// Bundler Plugins
import solarisVitePlugin from "@trixty/solaris/plugins/vite";
import solarisWebpackLoader from "@trixty/solaris/plugins/webpack";
import solarisEsbuildPlugin from "@trixty/solaris/plugins/esbuild";

📄 License

UPL-1.0 © TrixtyLab — UnSetSoft Public License 1.0