miqro · @miqro/core · @miqro/parser · @miqro/query · @miqro/jsx · @miqro/jsx-dom · @miqro/jsx-node · @miqro/request · @miqro/runner · @miqro/test · @miqro/test-http

@miqro/jsx-node

Node.js SSR runtime for @miqro/jsx. implements the Runtime interface using a fake DOM that serializes to HTML.

used by miqro internally for .html.tsx handlers and --inflate.

createNodeRuntime

import { createNodeRuntime } from "@miqro/jsx-node";
import { createContainer, createElement } from "@miqro/jsx";
import JSX from "@miqro/jsx";

const runtime = createNodeRuntime({
  url: {
    pathname: "/posts",
    searchParams: new URLSearchParams("page=1"),
    toString: () => "/posts?page=1"
  },
  basePath: null,
  logger: console
});

const root = runtime.createElement("div");
const container = runtime.createContainer(root, {
  shadowInit: false,
  runtimeOptions: {
    disableEffects: true,
    disableEvents: true,
    disableRefListener: true,
    disableRefresh: true
  }
});

container.render(<MyComponent title="hello" />);
console.log(root.innerHTML); // <p>hello</p>
container.disconnect();

define (server-side Web Components)

register a Web Component for server-side rendering. when the tag appears in JSX the component renders fully instead of outputting a custom element tag.

import { createNodeRuntime } from "@miqro/jsx-node";
import JSX from "@miqro/jsx";

function PostsList(props) {
  const posts = JSON.parse(props.data);
  return <ul>{posts.map(p => <li>{p.title}</li>)}</ul>;
}

const runtime = createNodeRuntime({ url: { pathname: "/", searchParams: new URLSearchParams(), toString: () => "/" } });
runtime.define("posts-list", PostsList, { shadowInit: false });

const root = runtime.createElement("div");
const container = runtime.createContainer(root, { shadowInit: false });
container.render(<posts-list data='[{"title":"hello"}]' />);

console.log(root.innerHTML);
// <ul><li>hello</li></ul>  ← fully rendered, not <posts-list>

notes