vitral 0.0.0-stage → 0.2.0

package/dist/react.d.ts

@@ -0,0 +1,63 @@
+import { ReactNode, ComponentType } from 'react';
+import { L as Loading, P as Prefetch } from './host-slot-Cz6EiGsB.js';
+import * as JSXRuntime from 'react/jsx-runtime';
+import { P as Props, I as Isolation, C as CheckedProps, a as RemoteModule, S as Shared, R as RemoteContext } from './types-BV-hUrms.js';
+export { E as EventBus } from './types-BV-hUrms.js';
+export { e as events } from './events-DUdjhfps.js';
+
+/**
+ * Adaptador React (funciona em Vite, CRA e Next.js App/Pages Router).
+ *
+ * Host:   <Remote name="carrinho" props={{ userId }} />
+ *         <Remote src="https://cdn.exemplo.com/carrinho/vitral.json" props={{ userId }} />
+ * Remote: export default reactRemote(App)
+ */
+
+/** Transforma um componente React em um remote. */
+declare function reactRemote<P extends Props>(Component: ComponentType<P>): RemoteModule<P>;
+/** Dentro de um remote: dá acesso ao contexto (nome, eventos, baseUrl). */
+declare function useVitral(): RemoteContext | null;
+/** Assina um evento do barramento global enquanto o componente estiver montado. */
+declare function useEvent<T = unknown>(type: string, handler: (payload: T) => void): void;
+/** Estado derivado do último valor emitido em `type`. */
+declare function useEventValue<T = unknown>(type: string): T | undefined;
+/**
+ * Lê uma chave compartilhada (`provide`/`shared`) e re-renderiza só quando
+ * ela muda. Com seletor, só quando o resultado do seletor muda (`Object.is`).
+ * No servidor e na hidratação o valor é `undefined`.
+ *
+ *   const nome = useShared('usuario', (u) => u?.nome)
+ */
+declare function useShared<K extends keyof Shared, S = Shared[K] | undefined>(key: K, select?: (value: Shared[K] | undefined) => S): S;
+declare function useShared<T = unknown, S = T | undefined>(key: string, select?: (value: T | undefined) => S): S;
+
+interface RemoteProps<P extends Props = Props> {
+    /** Nome registrado com `configure()`. Com `src`, o nome sob o qual a URL é registrada. */
+    name?: string;
+    /** URL do `vitral.json`. Dispensa `configure()`. */
+    src?: string;
+    props?: P;
+    isolate?: Isolation;
+    /** Mostrado enquanto o remote baixa. */
+    fallback?: ReactNode;
+    /** Mostrado se o remote falhar. Recebe o erro e uma função para tentar de novo. */
+    error?: ReactNode | ((error: Error, retry: () => void) => ReactNode);
+    onError?: (error: Error) => void;
+    className?: string;
+    /** `'lazy'`: monta perto de aparecer na tela; `'idle'`: com o navegador ocioso. */
+    loading?: Loading;
+    /** Baixa antes de montar: `'hover'`, `'visible'` ou `'idle'`. */
+    prefetch?: Prefetch;
+    /** `'high'` para o remote que aparece logo ao abrir a página. */
+    priority?: RequestPriority;
+    /** Ao sair da página, guarda o remote montado (LRU, padrão 5) e na volta só atualiza as props. */
+    keepAlive?: boolean | number;
+}
+/**
+ * Renderiza um remote. No servidor (Next SSR) renderiza só o fallback; o
+ * remote monta no cliente, então não há erro de hidratação. Com o nome em
+ * `Remotes` (`npx vitral types`), as props são checadas.
+ */
+declare function Remote<P extends Props = Props, N extends string = string>({ name, src, props, isolate, fallback, error, onError, className, loading, prefetch, priority, keepAlive, }: RemoteProps<P> & CheckedProps<N>): JSXRuntime.JSX.Element;
+
+export { Remote, type RemoteProps, reactRemote, useEvent, useEventValue, useShared, useVitral };

package/dist/react.js

@@ -0,0 +1,167 @@
+"use client";
+import {
+  hostSlot
+} from "./chunk-UTYAX6MU.js";
+import {
+  defineRemote,
+  events,
+  memoSelect,
+  same,
+  shared
+} from "./chunk-NCONW6WS.js";
+import "./chunk-2XF5BKV3.js";
+import "./chunk-SFL6LTP3.js";
+import "./chunk-PX7PBCCT.js";
+import {
+  protocol
+} from "./chunk-GNPFWISJ.js";
+
+// src/react.tsx
+import {
+  Component as ReactComponent,
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore
+} from "react";
+import { createRoot } from "react-dom/client";
+import * as ReactAll from "react";
+import * as ReactDOM from "react-dom";
+import * as ReactDOMClient from "react-dom/client";
+import * as JSXRuntime from "react/jsx-runtime";
+import * as JSXDevRuntime from "react/jsx-dev-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+var VitralContext = createContext(null);
+var Boundary = class extends ReactComponent {
+  constructor() {
+    super(...arguments);
+    this.state = { failed: false };
+  }
+  static getDerivedStateFromError() {
+    return { failed: true };
+  }
+  componentDidCatch(error) {
+    this.props.ctx.reportError(error);
+  }
+  render() {
+    return this.state.failed ? null : this.props.children;
+  }
+};
+function reactRemote(Component) {
+  return defineRemote({
+    mount(el, props, ctx) {
+      const root = createRoot(el, { onUncaughtError: (e) => ctx.reportError(e) });
+      const render = (p) => root.render(
+        /* @__PURE__ */ jsx(VitralContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(Boundary, { ctx, children: /* @__PURE__ */ jsx(Component, { ...p }) }) })
+      );
+      render(props);
+      return { update: render, unmount: () => root.unmount() };
+    }
+  });
+}
+function useVitral() {
+  return useContext(VitralContext);
+}
+function useEvent(type, handler) {
+  const ref = useRef(handler);
+  ref.current = handler;
+  useEffect(() => events.on(type, (p) => ref.current(p)), [type]);
+}
+function useEventValue(type) {
+  const [value, setValue] = useState(() => events.last(type));
+  useEvent(type, setValue);
+  return value;
+}
+function useShared(key, select = same) {
+  const handle = useMemo(() => shared(key), [key]);
+  const [pick] = useState(memoSelect);
+  return useSyncExternalStore(
+    handle.subscribe,
+    () => pick(handle.get(), select),
+    () => pick(void 0, select)
+  );
+}
+var offeredTo;
+function offerReact() {
+  const p = protocol();
+  if (offeredTo === p) return;
+  offeredTo = p;
+  const compiler = ReactAll.__COMPILER_RUNTIME;
+  const modules = {
+    react: ReactAll,
+    "react-dom": ReactDOM,
+    "react-dom/client": ReactDOMClient,
+    "react/jsx-runtime": JSXRuntime,
+    "react/jsx-dev-runtime": JSXDevRuntime,
+    // O React 19 expõe o react/compiler-runtime pelo próprio react.
+    ...compiler && { "react/compiler-runtime": compiler }
+  };
+  p.pending(import("./dedupe-IWFIXRWG.js").then((m) => m.offer(p, { react: { version: ReactAll.version, modules } })).catch(() => {
+  }));
+}
+function Remote({
+  name,
+  src,
+  props,
+  isolate,
+  fallback = null,
+  error,
+  onError,
+  className,
+  loading,
+  prefetch,
+  priority,
+  keepAlive
+}) {
+  const target = useRef(null);
+  const slot = useRef(null);
+  const [state, setState] = useState({ status: "loading", error: null });
+  const onErrorRef = useRef(onError);
+  onErrorRef.current = onError;
+  useEffect(() => {
+    offerReact();
+    const s = hostSlot(target.current, {
+      name,
+      src,
+      props: props ?? {},
+      isolate,
+      loading,
+      prefetch,
+      priority,
+      keepAlive,
+      onStatus(status2, e) {
+        setState({ status: status2, error: e });
+        if (e) {
+          if (onErrorRef.current) onErrorRef.current(e);
+          else console.error(e);
+        }
+      }
+    });
+    slot.current = s;
+    return () => {
+      slot.current = null;
+      queueMicrotask(() => s.destroy());
+    };
+  }, []);
+  useEffect(() => slot.current?.set({ name, src, isolate }), [name, src, isolate]);
+  useEffect(() => slot.current?.update(props ?? {}), [props]);
+  const retry = () => slot.current?.retry();
+  const { status, error: err } = state;
+  return /* @__PURE__ */ jsxs("div", { className, "data-vitral": name ?? src, "data-vitral-status": status, children: [
+    status === "loading" && fallback,
+    status === "error" && err && (typeof error === "function" ? error(err, retry) : error ?? null),
+    /* @__PURE__ */ jsx("div", { ref: target })
+  ] });
+}
+export {
+  Remote,
+  events,
+  reactRemote,
+  useEvent,
+  useEventValue,
+  useShared,
+  useVitral
+};

package/dist/routes.d.ts

@@ -0,0 +1,56 @@
+import { P as Props } from './types-BV-hUrms.js';
+import { S as SlotStatus } from './slot-pB276oPt.js';
+import './errors-KKB8FGCz.js';
+
+/** Padrão de URL → nome do remote. A primeira rota que bate vence. */
+type Routes = Record<string, string>;
+interface RoutesOptions {
+    /**
+     * Links `<a href>` da mesma origem que batem com uma rota navegam sem
+     * recarregar a página (via `navigate()`). Padrão: true.
+     */
+    links?: boolean;
+}
+interface RouteMatch {
+    /** Nome do remote. */
+    name: string;
+    /** Padrão que bateu. */
+    pattern: string;
+    /** Segmentos `:nome` do padrão. */
+    params: Record<string, string>;
+}
+/**
+ * Remote da rota que bate com `path`, ou `null`. Padrões: `/conta` (exato),
+ * `/checkout/*` (o prefixo e tudo abaixo dele), `/produto/:id` e `*` (qualquer).
+ */
+declare function matchRoute(path: string, routes?: Routes): RouteMatch | null;
+/**
+ * Define as rotas, registra `<vitral-outlet>` e, com `links` (padrão), faz os
+ * links internos navegarem sem recarregar. Devolve a função que desfaz tudo.
+ */
+declare function routes(map: Routes, options?: RoutesOptions): () => void;
+declare const Base: typeof HTMLElement;
+declare class VitralOutletElement extends Base {
+    #private;
+    static observedAttributes: string[];
+    get props(): Props;
+    set props(value: Props);
+    /** Remote montado agora, ou `null`. */
+    get route(): string | null;
+    get status(): SlotStatus | "empty";
+    retry(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(attr: string, _old: string | null, value: string | null): void;
+    /** Confere a URL atual e troca de remote se a rota mudou. */
+    sync(): void;
+}
+/** Registra `<vitral-outlet>` (ou outro nome). `routes()` já chama. */
+declare function defineVitralOutlet(tag?: string): void;
+declare global {
+    interface HTMLElementTagNameMap {
+        'vitral-outlet': VitralOutletElement;
+    }
+}
+
+export { type RouteMatch, type Routes, type RoutesOptions, VitralOutletElement, defineVitralOutlet, matchRoute, routes };

package/dist/routes.js

@@ -0,0 +1,143 @@
+import {
+  createSlot,
+  navigate
+} from "./chunk-NCONW6WS.js";
+import "./chunk-2XF5BKV3.js";
+import "./chunk-SFL6LTP3.js";
+import "./chunk-PX7PBCCT.js";
+import "./chunk-GNPFWISJ.js";
+
+// src/routes.ts
+var table = {};
+var outlets = /* @__PURE__ */ new Set();
+var compiled = /* @__PURE__ */ new Map();
+function compile(pattern) {
+  let re = compiled.get(pattern);
+  if (!re) {
+    const body = pattern.replace(/\/\*$|^\*$/, "\0").replace(/[.+?^${}()|[\]\\]/g, "\\$&").replace(/:(\w+)/g, "(?<$1>[^/]+)").replace(/\/$/, "").replace("\0", "(?:/.*)?");
+    compiled.set(pattern, re = new RegExp(`^${body}/?$`));
+  }
+  return re;
+}
+function matchRoute(path, routes2 = table) {
+  for (const [pattern, name] of Object.entries(routes2)) {
+    const m = compile(pattern).exec(path);
+    if (m) return { name, pattern, params: { ...m.groups } };
+  }
+  return null;
+}
+function routes(map, options = {}) {
+  table = map;
+  defineVitralOutlet();
+  for (const o of outlets) o.sync();
+  const intercept = options.links !== false && typeof document !== "undefined";
+  if (intercept) document.addEventListener("click", onClick);
+  return () => {
+    if (intercept) document.removeEventListener("click", onClick);
+    if (table === map) table = {};
+    for (const o of outlets) o.sync();
+  };
+}
+function onClick(e) {
+  if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+  const a = e.composedPath().find((n) => n.localName === "a" && !!n.href);
+  if (!a || a.target && a.target !== "_self" || a.hasAttribute("download")) return;
+  const url = new URL(a.href);
+  if (url.origin !== location.origin || !matchRoute(url.pathname)) return;
+  e.preventDefault();
+  navigate(url.href);
+}
+var Base = typeof HTMLElement === "undefined" ? class {
+} : HTMLElement;
+var VitralOutletElement = class extends Base {
+  static {
+    this.observedAttributes = ["props", "isolate"];
+  }
+  #slot = null;
+  #props = {};
+  // `undefined` até a primeira checagem, para o estado `empty` aparecer já de início.
+  #route;
+  get props() {
+    return this.#props;
+  }
+  set props(value) {
+    this.#props = value ?? {};
+    this.#slot?.update(this.#props);
+  }
+  /** Remote montado agora, ou `null`. */
+  get route() {
+    return this.#route ?? null;
+  }
+  get status() {
+    return this.#slot?.status ?? (this.#route ? "loading" : "empty");
+  }
+  retry() {
+    this.#slot?.retry();
+  }
+  #onNavigate = () => this.sync();
+  connectedCallback() {
+    outlets.add(this);
+    addEventListener("popstate", this.#onNavigate);
+    globalThis.navigation?.addEventListener("navigatesuccess", this.#onNavigate);
+    this.sync();
+  }
+  disconnectedCallback() {
+    outlets.delete(this);
+    removeEventListener("popstate", this.#onNavigate);
+    globalThis.navigation?.removeEventListener("navigatesuccess", this.#onNavigate);
+    queueMicrotask(() => !this.isConnected && this.#show(null));
+  }
+  attributeChangedCallback(attr, _old, value) {
+    if (attr === "props") {
+      try {
+        this.props = value ? JSON.parse(value) : {};
+      } catch {
+        console.error("[vitral] atributo props n\xE3o \xE9 JSON v\xE1lido:", value);
+      }
+    } else this.#slot?.set({ isolate: value || void 0 });
+  }
+  /** Confere a URL atual e troca de remote se a rota mudou. */
+  sync() {
+    if (this.isConnected) this.#show(matchRoute(location.pathname)?.name ?? null);
+  }
+  #show(name) {
+    if (name === this.#route) return;
+    this.#route = name;
+    if (name) this.setAttribute("data-vitral-route", name);
+    else this.removeAttribute("data-vitral-route");
+    if (!name) {
+      this.#slot?.destroy();
+      this.#slot = null;
+      this.#status("empty", null);
+    } else if (this.#slot) {
+      this.#slot.set({ name });
+    } else {
+      this.#slot = createSlot(this, {
+        name,
+        props: this.#props,
+        isolate: this.getAttribute("isolate") || void 0,
+        onStatus: (s, e) => this.#status(s, e)
+      });
+    }
+  }
+  #status(status, error) {
+    this.setAttribute("data-vitral-status", status);
+    for (const [slot, on] of [["fallback", "loading"], ["error", "error"], ["empty", "empty"]]) {
+      for (const el of this.querySelectorAll(`:scope > [slot="${slot}"]`)) el.hidden = status !== on;
+    }
+    if (status === "ready") this.dispatchEvent(new CustomEvent("vitral-ready", { bubbles: true, detail: { route: this.#route } }));
+    if (status === "error") this.dispatchEvent(new CustomEvent("vitral-error", { bubbles: true, detail: { error } }));
+  }
+};
+function defineVitralOutlet(tag = "vitral-outlet") {
+  if (typeof customElements !== "undefined" && !customElements.get(tag)) {
+    customElements.define(tag, class extends VitralOutletElement {
+    });
+  }
+}
+export {
+  VitralOutletElement,
+  defineVitralOutlet,
+  matchRoute,
+  routes
+};

package/dist/shadow-MYRJQLLY.js

@@ -0,0 +1,72 @@
+import {
+  fetchCssText,
+  injectCss
+} from "./chunk-SFL6LTP3.js";
+import "./chunk-PX7PBCCT.js";
+import "./chunk-GNPFWISJ.js";
+
+// src/core/shadow.ts
+var sheets = /* @__PURE__ */ new Map();
+var hoisted = /* @__PURE__ */ new Set();
+var RELATIVE_URL = /url\(\s*(['"]?)(?![a-z]+:|\/\/|#)([^'")]+)\1\s*\)/gi;
+var GLOBAL_RULES = /@property\s+(--[\w-]+)\s*\{[^}]*\}|@font-face\s*\{[^}]*\}|@import\s+(?:url\(\s*)?(?:(['"])(.*?)\2|([^'"\s);]+))\s*\)?[^;]*;/gi;
+async function attachStyles(root, el, css, global = {}, local = {}, sri = {}) {
+  const urls = [...global.inherit ?? [], ...local.inherit ?? []].map((u) => new URL(u, document.baseURI).href).concat(css);
+  if (typeof CSSStyleSheet !== "undefined" && "replaceSync" in CSSStyleSheet.prototype) {
+    const loaded = await Promise.all(urls.map((u) => loadSheet(u, [], sri[u])));
+    root.adoptedStyleSheets = [.../* @__PURE__ */ new Set([...root.adoptedStyleSheets, ...loaded.flat()])];
+  } else {
+    await injectCss(urls, root, sri);
+  }
+  return (local.mirrorTheme ?? global.mirrorTheme) === false ? () => {
+  } : mirrorTheme(el);
+}
+function loadSheet(href, chain, integrity) {
+  let p = sheets.get(href);
+  if (!p) {
+    p = fetchCssText(href, integrity).then((text) => {
+      const up = [];
+      const imports = [];
+      const rest = text.replace(RELATIVE_URL, (_, q, u) => `url(${q}${new URL(u, href).href}${q})`).replace(GLOBAL_RULES, (rule, prop, _q, quoted, bare) => {
+        const url = quoted ?? bare;
+        if (url) imports.push(new URL(url, href).href);
+        else if (!hoisted.has(prop ?? rule)) {
+          hoisted.add(prop ?? rule);
+          up.push(rule);
+        }
+        return "";
+      });
+      if (up.length) {
+        const style = document.createElement("style");
+        style.setAttribute("data-vitral-properties", "");
+        style.textContent = up.join("\n");
+        document.head.appendChild(style);
+      }
+      const sheet = new CSSStyleSheet();
+      sheet.replaceSync(rest);
+      const next = [...chain, href];
+      return Promise.all(imports.filter((u) => !next.includes(u)).map((u) => loadSheet(u, next))).then((found) => [...found.flat(), sheet]);
+    }).catch(() => []);
+    sheets.set(href, p);
+  }
+  return p;
+}
+function mirrorTheme(el) {
+  const html = document.documentElement;
+  let added = [];
+  const sync = () => {
+    el.classList.remove(...added);
+    added = [...html.classList].filter((c) => !el.classList.contains(c));
+    el.classList.add(...added);
+    const theme = html.getAttribute("data-theme");
+    if (theme === null) el.removeAttribute("data-theme");
+    else el.setAttribute("data-theme", theme);
+  };
+  sync();
+  const observer = new MutationObserver(sync);
+  observer.observe(html, { attributeFilter: ["class", "data-theme"] });
+  return () => observer.disconnect();
+}
+export {
+  attachStyles
+};

package/dist/slot-pB276oPt.d.ts

@@ -0,0 +1,36 @@
+import { R as RemoteError } from './errors-KKB8FGCz.js';
+import { P as Props, I as Isolation, b as StyleOptions } from './types-BV-hUrms.js';
+
+type SlotStatus = 'loading' | 'ready' | 'error';
+interface SlotOptions<P extends Props = Props> {
+    /** Nome registrado. Com `src`, é o nome sob o qual a URL é registrada (opcional). */
+    name?: string;
+    /** URL do `vitral.json` (ou do JS). Registra o remote sem `configure()`. */
+    src?: string;
+    props?: P;
+    isolate?: Isolation;
+    /** `'high'` para o remote que aparece logo ao abrir a página. */
+    priority?: RequestPriority;
+    /** Estilos do host no Shadow DOM (somados aos do `configure`). */
+    styles?: StyleOptions;
+    /** Chamado a cada mudança de estado (para mostrar fallback / erro). */
+    onStatus?: (status: SlotStatus, error: RemoteError | null) => void;
+}
+interface RemoteSlot<P extends Props = Props> {
+    /** Atualiza as props sem remontar. */
+    update(props: P): void;
+    /** Troca de remote ou de isolamento (remonta). */
+    set(options: Partial<Pick<SlotOptions<P>, 'name' | 'src' | 'isolate'>>): void;
+    /** Remonta do zero (botão "tentar de novo"). */
+    retry(): void;
+    destroy(): void;
+    readonly status: SlotStatus;
+}
+/**
+ * Cuida do ciclo de vida de um remote dentro de `target`: monta, atualiza,
+ * remonta ao trocar de nome, ignora respostas atrasadas e limpa tudo no fim.
+ * Os adaptadores de host (Web Component, Svelte, Solid, Preact…) usam isto.
+ */
+declare function createSlot<P extends Props = Props>(target: HTMLElement, options: SlotOptions<P>): RemoteSlot<P>;
+
+export { type RemoteSlot as R, type SlotStatus as S, type SlotOptions as a, createSlot as c };

package/dist/solid.d.ts

@@ -0,0 +1,47 @@
+import { JSX, Component, Accessor } from 'solid-js';
+import { P as Props, I as Isolation, C as CheckedProps, a as RemoteModule, S as Shared } from './types-BV-hUrms.js';
+export { R as RemoteContext } from './types-BV-hUrms.js';
+import { R as RemoteError } from './errors-KKB8FGCz.js';
+export { e as events } from './events-DUdjhfps.js';
+export { n as navigate } from './navigate-BRG1WJUM.js';
+import { L as Loading, P as Prefetch } from './host-slot-Cz6EiGsB.js';
+
+/**
+ * Adaptador Solid (e SolidStart).
+ *
+ * Remote: export default solidRemote(App)
+ * Host:   <Remote name="carrinho" props={{ userId: id() }} />
+ */
+
+/** Transforma um componente Solid em um remote. O contexto chega na prop `vitral`. */
+declare function solidRemote<P extends Props>(Comp: Component<any>): RemoteModule<P>;
+interface RemoteProps<P extends Props = Props> {
+    name?: string;
+    /** URL do `vitral.json`. Dispensa `configure()`. */
+    src?: string;
+    props?: P;
+    isolate?: Isolation;
+    fallback?: JSX.Element;
+    error?: (error: RemoteError, retry: () => void) => JSX.Element;
+    class?: string;
+    /** `'lazy'`: monta perto de aparecer na tela; `'idle'`: com o navegador ocioso. */
+    loading?: Loading;
+    /** Baixa antes de montar: `'hover'`, `'visible'` ou `'idle'`. */
+    prefetch?: Prefetch;
+    /** `'high'` para o remote que aparece logo ao abrir a página. */
+    priority?: RequestPriority;
+    /** Ao sair da página, guarda o remote montado (LRU, padrão 5) e na volta só atualiza as props. */
+    keepAlive?: boolean | number;
+}
+declare function Remote<P extends Props = Props, N extends string = string>(p: RemoteProps<P> & CheckedProps<N>): JSX.Element;
+/**
+ * Accessor de uma chave compartilhada (`provide`/`shared`). Com seletor, só
+ * muda quando o resultado do seletor muda (`Object.is`). A assinatura acaba
+ * junto com o dono reativo (componente ou `createRoot`).
+ *
+ *   const nome = useShared('usuario', (u) => u?.nome)
+ */
+declare function useShared<K extends keyof Shared, S = Shared[K] | undefined>(key: K, select?: (value: Shared[K] | undefined) => S): Accessor<S>;
+declare function useShared<T = unknown, S = T | undefined>(key: string, select?: (value: T | undefined) => S): Accessor<S>;
+
+export { Remote, type RemoteProps, solidRemote, useShared };

package/dist/solid.js

@@ -0,0 +1,83 @@
+import {
+  hostSlot
+} from "./chunk-UTYAX6MU.js";
+import {
+  defineRemote,
+  events,
+  memoSelect,
+  navigate,
+  same,
+  shared
+} from "./chunk-NCONW6WS.js";
+import "./chunk-2XF5BKV3.js";
+import "./chunk-SFL6LTP3.js";
+import "./chunk-PX7PBCCT.js";
+import "./chunk-GNPFWISJ.js";
+
+// src/solid.ts
+import { createComponent, createEffect, createSignal, getOwner, mergeProps, on, onCleanup, onMount } from "solid-js";
+import { createStore, reconcile } from "solid-js/store";
+import { isServer, render } from "solid-js/web";
+function solidRemote(Comp) {
+  return defineRemote({
+    mount(el, props, ctx) {
+      const [state, setState] = createStore({ ...props });
+      const dispose = render(() => createComponent(Comp, mergeProps(state, { vitral: ctx })), el);
+      return {
+        update: (next) => setState(reconcile({ ...next })),
+        unmount: dispose
+      };
+    }
+  });
+}
+function Remote(p) {
+  if (isServer) return p.fallback ?? null;
+  const [status, setStatus] = createSignal("loading");
+  const [error, setError] = createSignal(null);
+  const host = document.createElement("div");
+  host.setAttribute("data-vitral", p.name ?? p.src ?? "");
+  if (p.class) host.className = p.class;
+  const target = document.createElement("div");
+  let slot = null;
+  onMount(() => {
+    slot = hostSlot(target, {
+      name: p.name,
+      src: p.src,
+      props: p.props ?? {},
+      isolate: p.isolate,
+      loading: p.loading,
+      prefetch: p.prefetch,
+      priority: p.priority,
+      keepAlive: p.keepAlive,
+      onStatus: (s, e) => {
+        host.setAttribute("data-vitral-status", s);
+        setError(() => e);
+        setStatus(s);
+      }
+    });
+  });
+  createEffect(on(() => [p.name, p.src, p.isolate], ([name, src, isolate]) => slot?.set({ name, src, isolate }), { defer: true }));
+  createEffect(on(() => ({ ...p.props ?? {} }), (props) => slot?.update(props), { defer: true }));
+  onCleanup(() => slot?.destroy());
+  const retry = () => slot?.retry();
+  return [
+    () => status() === "loading" ? p.fallback : null,
+    () => status() === "error" && error() && p.error ? p.error(error(), retry) : null,
+    (host.appendChild(target), host)
+  ];
+}
+function useShared(key, select = same) {
+  const handle = shared(key);
+  const pick = memoSelect();
+  const [value, setValue] = createSignal(pick(handle.get(), select), { equals: Object.is });
+  const off = handle.subscribe((v) => setValue(() => pick(v, select)));
+  if (getOwner()) onCleanup(off);
+  return value;
+}
+export {
+  Remote,
+  events,
+  navigate,
+  solidRemote,
+  useShared
+};