RS-X Roadmap

Aim: Provide compile-time parsing and syntax validation for RS-X expressions.

Goal: Offer IntelliSense/autocomplete for context properties, fail fast on invalid identifiers/expressions at compile time, and optimize runtime by removing expression parsing from execution paths.

Objective: Parse tagged template expressions at compile time and replace them with a complete RS-X AST (expression tree).

Impact

• Adds full TypeScript safety for reactive expressions.
• Prevents a class of runtime parsing/identifier errors.
• Removes runtime parsing overhead for better performance in larger models.

Example usage

import { BehaviorSubject } from 'rxjs';
import { rsx } from 'rs-x-transformer-planned';

const model = {
  x: 10,
  observable: new BehaviorSubject(20),
};

// Correct expression: compiles and subscribes to changes
const expression1 = rsx('x + observable')(model);
expression1.change.subscribe(() => console.log(expression1.value));

// Incorrect expression: fails at compile time
// const expression2 = rsx('x + y')(model);
// Error: 'y' does not exist on model

// Syntax error: fails at compile time
// const expression3 = rsx('x + ')();
// Error: incomplete expression

Aim: Enable RS-X expressions directly in HTML templates.

Goal: Extract expressions from HTML, generate RS-X expression trees in TypeScript, and connect templates to generated trees.

Objective: Validate inline HTML expressions at compile time so invalid references/syntax fail before runtime.

Impact

• Provides compile-time safety for HTML-bound expressions.
• Reduces runtime parsing work.
• Keeps templates reactive and aligned with model state.
• Reduces boilerplate between templates and expression trees.

Aim: Provide browser tooling to inspect and debug RS-X expressions and state.

Goal: Track expression evaluation and model updates to make reactive flow analysis easier.

Objective: Support expression breakpoints and live state observation during runtime.

Impact

• Simplifies debugging of reactive expressions and state.
• Improves visibility into RS-X internals without app code changes.
• Increases developer productivity during issue diagnosis.

Aim: Provide a truly reactive SPA framework with clear separation between presentation and logic.

Goal: Support internally-defined Custom Elements while keeping templates readable and close to HTML standards.

Objective: Enable local, efficient UI updates so only affected parts of the interface re-render, while templates stay expressive and maintainable.

Impact

• Simplifies component development through clear UI/logic boundaries.
• Improves template readability and long-term maintainability.
• Provides a standardized way to build reusable reactive components.

Template example

<label click.on="showMessage(message)">
  <input
    type="checkbox"
    name="checkbox"
    checked.twoway="show"
  />
  [[show ? 'Hide' : 'Show']]
</label>

<p>
  <div if.struct="show" tooltip.attach="message">
    [[message]]
  </div>
</p>

Notes

• Binding suffixes: `.oneway`, `.twoway`, `.onetime`.
• Text bindings: `[[ ... ]]`.
• Event bindings: `.on` suffix on event attributes.
• Structural directives: `.struct` for DOM-shaping directives.
• Behavioral directives: `.attach` for behavior attachment without structural DOM changes.

Aim: Provide flexible dynamic content injection into RS-X components via slots.

Goal: Support multiple named slots for reusable customizable component layouts.

Objective: Keep component templates clean while enabling dynamic content composition for sections like header/body.

Impact

• Supports reusable, flexible layouts.
• Improves modularity via dynamic content injection.
• Improves readability/maintainability of complex component composition.

Slot example

<my-layout>
  <h1 slot="header">[[header]]</h1>
  <div slot="body">message</div>
</my-layout>

Aim: Enable flexible theming for RS-X components.

Goal: Allow easy theme switching through a simple theme property/config.

Objective: Use CSS variables to apply theme styles consistently across components and branding contexts.

Impact

• Simplifies visual customization and branding.
• Creates a maintainable styling model.
• Enables dynamic theme changes without component logic rewrites.

Aim: Build a versatile set of reusable UI components for RS-X applications.

Goal: Prioritize component development through community voting.

Objective: Deliver high-value reusable components including flexible popups, virtualized data display, and pattern-based text editors.

Impact

• Builds a community-driven reusable ecosystem.
• Improves development speed by focusing on highest-priority components.
• Improves consistency and reuse across RS-X applications.