mono-jsx

Instead of React's children prop, mono-jsx uses the standard HTML <slot> element. You can define named slots using the name prop.

function Container() {
  return (
    <div class="container">
      <slot />
      <slot name="desc" />
    </div>
  )
}

function App() {
  return (
    <Container>
      <p slot="desc">This is a description.</p>
      <h1>Hello world!</h1>
    </Container>
  )
}

The style property supports pseudo-classes, pseudo-elements, media queries, and CSS nesting directly within the object definition.

<a
  style={{
    display: "inline-flex",
    gap: "0.5em",
    color: "black",
    "::after": { content: "↩️" },
    ":hover": { textDecoration: "underline" },
    "@media (prefers-color-scheme: dark)": { color: "white" },
    "& .icon": { width: "1em", height: "1em" },
  }}
>
  <img class="icon" src="link.png" />
  Link
</a>;

Event handlers (e.g., onClick) are serialized to strings and sent to the client.

CRITICAL: Event handlers run in the browser. You cannot use server-side variables, imports, or server-only APIs (like Deno.exit) inside them. Only browser-native APIs (like document or evt) are available.

For forms, you can pass a function to the action prop of a <form>. This function is called on submission and receives a FormData object.

// Form Action
function App() {
  return (
    <form action={(data: FormData) => console.log(data.get("name"))}>
      <input type="text" name="name" />
      <button type="submit">Submit</button>
    </form>
  );
}

// Event Handler
function Button() {
  return (
    <button onClick={(evt) => alert("BOOM!")}>
      Click Me
    </button>
  );
}

In mono-jsx, component functions have a scoped signals object bound to this. This allows direct access to signals, context, request information, and session data without passing them as props.

To use TypeScript with this pattern, use the provided helper types like FC, WithContext, WithRefs, or WithAppSignals to type the this context of your component functions.

type FC<Signals = {}, Refs = {}> = {
  init(initValue: Signals): void;
  app: AppSignals & { refs: AppRefs; url: WithParams<URL> }
  context: Context;
  request: WithParams<Request>;
  session: Session;
  refs: Refs;
  computed<T = unknown>(fn: () => T): T;
  $: FC["computed"];
  effect(fn: () => void | (() => void)): void;
} & Signals;

// Example usage with typing
function Component(this: WithContext<FC, { secret: string }>) {
  console.log(this.context.secret);
}

mono-jsx uses signals to manage state and update the view efficiently. Signals are bound to the component instance via the this keyword. When a signal is updated, the view automatically re-renders. Signals can be managed at the component level, the application level, or as derived (computed) values.

function Counter(this: FC<{ count: number }>, props: { initialCount?: number }) {
  this.count = props.initialCount ?? 0;
  return (
    <div>
      <span>{this.count}</span>
      <button onClick={() => this.count++}>+</button>
    </div>
  )
}

When a <form route> is submitted, mono-jsx automatically manages the client-side submitting state:

• Adds a CSS class submitting to the form.
• Disables all form controls to prevent double submission.
• Clears local <formslot> elements before inserting the new response.

You can customize the class name using the data-submitting-class attribute.

<form route data-submitting-class="is-loading">
  <input type="email" name="email" required />
  <button type="submit">Subscribe</button>
  <formslot />
</form>

Unlike React, mono-jsx uses standard HTML property names:

• Use class instead of className
• Use for instead of htmlFor
• Use onInput instead of onChange

You can compose the class property using arrays of strings, objects, or expressions:

<div
  class=[
    "container box",
    isActive && "active",
    { hover: isHover },
  ]}
/>;

To enable smooth transitions between views, add the viewTransition prop to specific components like <show>, <hidden>, <switch>, <component>, or <router>. You can pass a transition name string or set it to true while defining the transition in the style property.

Supported components:

• <show viewTransition="name">
• <hidden viewTransition="name">
• <switch viewTransition="name">
• <component viewTransition="name">
• <router viewTransition="name">

function App(this: FC<{ message: string }>) {
  this.message = "Hello world!";
  return <h1 viewTransition="fade">{this.message}</h1>;
}

// Or using style for custom names
<h1 viewTransition style={{ viewTransitionName: "fade" }}>{this.message}</h1>

To display content when no route matches the current URL, pass children to the <router> element. This content acts as a fallback (404) view.

<router>
  <p>Page Not Found</p>
  <a href="/">Back to Home</a>
</router>