vitral 0.4.0 → 0.6.0

package/dist/prefetch.js

@@ -0,0 +1,178 @@
+import {
+  resolveEntry
+} from "./chunk-S7PIVPBX.js";
+import "./chunk-KU6HF2EW.js";
+import {
+  addLink
+} from "./chunk-TW7KYJQ6.js";
+import "./chunk-463H6B56.js";
+import {
+  protocol
+} from "./chunk-GNPFWISJ.js";
+
+// src/core/markov.ts
+var LIMITS = { routes: 50, next: 10, remotes: 8, total: 1e3, key: 200 };
+var ok = (k) => typeof k === "string" && k.length <= LIMITS.key && k !== "__proto__";
+var sum = (row) => Object.values(row).reduce((a, b) => a + b, 0);
+var smallest = (o, keep) => Object.keys(o).filter((k) => k !== keep).reduce((min, k) => min === void 0 || o[k] < o[min] ? k : min, void 0);
+var empty = () => ({ t: {}, r: {} });
+function parse(text) {
+  try {
+    const c = JSON.parse(text ?? "");
+    const rows = Object.values(c.t).every((row) => row && typeof row === "object" && Object.values(row).every((n) => Number.isFinite(n)));
+    const lists = Object.values(c.r).every((l) => Array.isArray(l) && l.every((n) => typeof n === "string"));
+    if (rows && lists) return c;
+  } catch {
+  }
+  return empty();
+}
+function record(c, from, to) {
+  if (from === to || !ok(from) || !ok(to)) return;
+  const row = c.t[from] ??= {};
+  row[to] = (row[to] ?? 0) + 1;
+  if (sum(row) > LIMITS.total) {
+    for (const k in row) if (!(row[k] >>= 1)) delete row[k];
+  }
+  if (Object.keys(row).length > LIMITS.next) delete row[smallest(row, to)];
+  if (Object.keys(c.t).length > LIMITS.routes) {
+    const totals = Object.fromEntries(Object.entries(c.t).map(([k, v]) => [k, sum(v)]));
+    delete c.t[smallest(totals, from)];
+  }
+}
+function remember(c, route, remote) {
+  if (!ok(route)) return false;
+  const list = c.r[route] ??= [];
+  if (list.includes(remote)) return false;
+  list.push(remote);
+  if (list.length > LIMITS.remotes) list.shift();
+  const routes = Object.keys(c.r);
+  if (routes.length > LIMITS.routes) delete c.r[routes.find((k) => k !== route)];
+  return true;
+}
+function predict(c, from, threshold, min = 1) {
+  const row = Object.prototype.hasOwnProperty.call(c.t, from) ? c.t[from] : void 0;
+  if (!row) return null;
+  const total = sum(row);
+  let best = null;
+  for (const k in row) if (best === null || row[k] > row[best]) best = k;
+  return best !== null && total >= min && row[best] / total >= threshold ? best : null;
+}
+
+// src/prefetch.ts
+var KEY = "vitral:prefetch";
+function slow() {
+  const c = navigator.connection;
+  return !!c?.saveData || /2g/.test(c?.effectiveType ?? "");
+}
+var idle = (fn) => typeof requestIdleCallback === "function" ? requestIdleCallback(fn, { timeout: 3e3 }) : setTimeout(fn, 300);
+function prefetch(options = {}) {
+  if (typeof window === "undefined") return () => {
+  };
+  const { threshold = 0.4, min = 2, key = (u) => u.pathname, onPrefetch } = options;
+  let storage = options.storage;
+  if (storage === void 0)
+    try {
+      storage = localStorage;
+    } catch {
+      storage = null;
+    }
+  let chain = empty();
+  try {
+    chain = parse(storage?.getItem(KEY));
+  } catch {
+  }
+  const save = () => {
+    try {
+      storage?.setItem(KEY, JSON.stringify(chain));
+    } catch {
+    }
+  };
+  const here = () => key(new URL(location.href));
+  let current = here();
+  const loaded = /* @__PURE__ */ new Set();
+  let seq = 0;
+  const schedule = () => {
+    const id = ++seq;
+    if (slow()) return;
+    idle(() => {
+      const next = id === seq && predict(chain, current, threshold, min);
+      if (!next) return;
+      const names = (chain.r[next] ?? []).filter((n) => !loaded.has(n));
+      if (!names.length) return;
+      for (const n of names) loaded.add(n);
+      Promise.all(names.map(warm)).then((ok2) => {
+        const done = names.filter((_, i) => ok2[i]);
+        if (done.length) onPrefetch?.(done, next);
+      });
+    });
+  };
+  const visit = () => {
+    const next = here();
+    if (next === current) return;
+    record(chain, current, next);
+    current = next;
+    save();
+    schedule();
+  };
+  let observer;
+  try {
+    observer = new PerformanceObserver((list) => {
+      visit();
+      let changed = false;
+      for (const e of list.getEntries()) {
+        const m = /^vitral:(.+):mount$/.exec(e.name);
+        if (!m) continue;
+        loaded.add(m[1]);
+        changed = remember(chain, current, m[1]) || changed;
+      }
+      if (changed) save();
+    });
+    observer.observe({ type: "measure", buffered: true });
+  } catch {
+  }
+  const nav = globalThis.navigation;
+  const event = nav ? "currententrychange" : "popstate";
+  const target = nav ?? window;
+  target.addEventListener(event, visit);
+  schedule();
+  return () => {
+    seq++;
+    observer?.disconnect();
+    target.removeEventListener(event, visit);
+  };
+}
+var heat = (u) => fetch(u, { priority: "low" }).then((res) => res.arrayBuffer());
+function modulepreload(href) {
+  return new Promise((resolve, reject) => {
+    const link = addLink("modulepreload", href, { fetchPriority: "low" });
+    link.onload = resolve;
+    link.onerror = reject;
+  });
+}
+async function verifiedOnly(r) {
+  const b = r.split ?? { entry: r.entry, chunks: [], sri: { [r.entry]: r.integrity }, priority: "low" };
+  const { verified } = await import("./sri-576GTDIA.js");
+  const url = await verified(b);
+  if (!url) await Promise.all([...b.chunks, b.entry].map(heat));
+  else if (!document.querySelector(`link[rel=modulepreload][href="${CSS.escape(url)}"]`)) await heat(url);
+}
+async function warm(name) {
+  try {
+    const p = protocol();
+    await p.pending();
+    let n = name;
+    while (n && !p.entry(n)) n = n.slice(0, Math.max(0, n.lastIndexOf("/")));
+    const entry = p.entry(n);
+    if (!entry?.url || (entry.isolate ?? p.settings().isolate) === "iframe") return false;
+    const r = await resolveEntry(n, entry, "low");
+    const css = r.css.map(heat);
+    await Promise.all([r.integrity ? verifiedOnly(r) : modulepreload(r.entry), ...css]);
+    return true;
+  } catch {
+    return false;
+  }
+}
+export {
+  prefetch,
+  warm
+};

package/dist/react-server.d.ts

@@ -0,0 +1,20 @@
+import { ComponentType } from 'react';
+import { P as Props } from './types-DUtcF3HO.js';
+import './errors-kjBv6IH_.js';
+
+/**
+ * SSR de um remote React, para o `render` do gateway (`vitral/edge`):
+ *
+ *   // carrinho/src/server.ts
+ *   import { reactRender } from 'vitral/react-server'
+ *   import Carrinho from './Carrinho'
+ *   export const render = reactRender(Carrinho)
+ *
+ * No navegador, `reactRemote` (ou o plugin, que embrulha sozinho) hidrata
+ * esse HTML. No servidor, `useVitral()` devolve `null`.
+ */
+
+/** `render(props)` do gateway para um componente React. */
+declare function reactRender<P extends Props>(Component: ComponentType<P>): (props: P) => string;
+
+export { reactRender };

package/dist/react-server.js

@@ -0,0 +1,13 @@
+import {
+  RemoteTree
+} from "./chunk-B2MPYF4M.js";
+
+// src/react-server.tsx
+import { renderToString } from "react-dom/server";
+import { jsx } from "react/jsx-runtime";
+function reactRender(Component) {
+  return (props) => renderToString(/* @__PURE__ */ jsx(RemoteTree, { Component, props, ctx: null }));
+}
+export {
+  reactRender
+};

package/dist/react.d.ts

@@ -1,9 +1,9 @@
 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-CA2p9KHC.js';
-export { E as EventBus } from './types-CA2p9KHC.js';
-export { e as events } from './events-Dkpkw_Sv.js';
+import { P as Props, I as Isolation, C as CheckedProps, a as RemoteModule, S as Shared, R as RemoteContext } from './types-DUtcF3HO.js';
+export { E as EventBus } from './types-DUtcF3HO.js';
+export { e as events } from './events-0rxFlWJJ.js';
 import './errors-kjBv6IH_.js';
 
 /**
@@ -14,7 +14,10 @@ import './errors-kjBv6IH_.js';
  * Remote: export default reactRemote(App)
  */
 
-/** Transforma um componente React em um remote. */
+/**
+ * Transforma um componente React em um remote. Com o HTML do servidor
+ * (`reactRender` de `vitral/react-server`, no gateway), hidrata em vez de montar.
+ */
 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;

package/dist/react.js

@@ -1,16 +1,20 @@
 "use client";
+import {
+  RemoteTree,
+  VitralContext
+} from "./chunk-B2MPYF4M.js";
 import {
   hostSlot
-} from "./chunk-W6322KGP.js";
+} from "./chunk-UXLKRSOM.js";
 import {
   defineRemote,
   events,
   memoSelect,
   same,
   shared
-} from "./chunk-WD4CDGDZ.js";
-import "./chunk-EMSB2NVX.js";
-import "./chunk-6EX5KYT5.js";
+} from "./chunk-HIVMSPGM.js";
+import "./chunk-S7PIVPBX.js";
+import "./chunk-KU6HF2EW.js";
 import "./chunk-TW7KYJQ6.js";
 import "./chunk-463H6B56.js";
 import {
@@ -19,8 +23,6 @@ import {
 
 // src/react.tsx
 import {
-  Component as ReactComponent,
-  createContext,
   useContext,
   useEffect,
   useMemo,
@@ -28,39 +30,25 @@ import {
   useState,
   useSyncExternalStore
 } from "react";
-import { createRoot } from "react-dom/client";
+import { createRoot, hydrateRoot } 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) {
+  const start = (el, props, ctx, hydrate) => {
+    const tree = (p) => /* @__PURE__ */ jsx(RemoteTree, { Component, props: p, ctx });
+    const options = { onUncaughtError: (e) => ctx.reportError(e) };
+    const root = hydrate ? hydrateRoot(el, tree(props), options) : createRoot(el, options);
+    const render = (p) => root.render(tree(p));
+    if (!hydrate) render(props);
+    return { update: render, unmount: () => root.unmount() };
+  };
   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() };
-    }
+    mount: (el, props, ctx) => start(el, props, ctx, false),
+    hydrate: (el, props, ctx) => start(el, props, ctx, true)
   });
 }
 function useVitral() {

package/dist/reframe-MUV472OU.js

@@ -0,0 +1,251 @@
+import {
+  splitName
+} from "./chunk-JBNITHPI.js";
+import {
+  verifyIntegrity
+} from "./chunk-UYOPJ4XQ.js";
+import {
+  resolveEntry
+} from "./chunk-S7PIVPBX.js";
+import {
+  prefetchCss
+} from "./chunk-KU6HF2EW.js";
+import {
+  fetchBytes,
+  metric,
+  withRetry,
+  withTimeout
+} from "./chunk-TW7KYJQ6.js";
+import {
+  RemoteError,
+  isRemoteError,
+  report
+} from "./chunk-463H6B56.js";
+import {
+  protocol
+} from "./chunk-GNPFWISJ.js";
+
+// src/core/reframe.ts
+var REFRAME_SCRIPT = "window.__vitral=function(u){return import(u)}";
+var OWN = /^(popstate|hashchange|message|messageerror|error|unhandledrejection|rejectionhandled)$/;
+var VIEW = ["innerWidth", "innerHeight", "outerWidth", "outerHeight", "devicePixelRatio", "scrollX", "scrollY", "pageXOffset", "pageYOffset", "screenX", "screenY", "visualViewport"];
+var VIEW_FNS = ["matchMedia", "scrollTo", "scroll", "scrollBy", "getComputedStyle", "getSelection"];
+var DOC_FNS = ["createElementNS", "createTextNode", "createComment", "createDocumentFragment", "createEvent", "createRange", "createTreeWalker", "createNodeIterator", "createAttribute", "importNode", "adoptNode", "getSelection"];
+var set = (o, values) => {
+  for (const k in values) Object.defineProperty(o, k, { configurable: true, writable: true, value: values[k] });
+};
+var get = (o, getters) => {
+  for (const k in getters) Object.defineProperty(o, k, { configurable: true, get: getters[k] });
+};
+async function load(name, _isolate, priority) {
+  const p = protocol();
+  const { timeout, retries } = p.settings();
+  const [remote, key] = splitName(name);
+  let resolved;
+  let realm;
+  try {
+    const entry = p.entry(remote);
+    if (!entry) throw new RemoteError("NOT_REGISTERED", name, "remote n\xE3o registrado. Use configure({ remotes }).");
+    if (!entry.url) throw new RemoteError("MOUNT_FAILED", name, "remote local (module) n\xE3o roda com isolate: 'reframe': registre a URL dele");
+    let t = performance.now();
+    const { integrity, ...r } = await resolveEntry(remote, entry, priority);
+    delete r.split;
+    resolved = r;
+    metric(name, "manifest", t);
+    prefetchCss(r, true, priority);
+    t = performance.now();
+    const bytes = integrity && await withRetry(retries, async () => {
+      const b = await fetchBytes(r.entry, timeout, name, { priority });
+      await verifyIntegrity(name, b, integrity);
+      return b;
+    });
+    const url = bytes ? URL.createObjectURL(new Blob([bytes], { type: "text/javascript" })) : r.entry;
+    const { registryFor } = await import("./shadow-S4SKHTA7.js");
+    realm = createRealm(r.name ?? name, registryFor(r.name ?? name));
+    let ns;
+    try {
+      ns = await withTimeout(timeout, name, realm.load(url));
+    } catch (e) {
+      throw isRemoteError(e) ? e : new RemoteError("LOAD_FAILED", name, `falha ao importar ${r.entry}`, e);
+    } finally {
+      if (bytes) URL.revokeObjectURL(url);
+    }
+    if (key) {
+      const part = ns?.exposes?.[key];
+      if (!part) throw new RemoteError("NOT_EXPOSED", name, `${remote} n\xE3o exp\xF5e ${key}`);
+      ns = typeof part === "function" ? await part() : part;
+    }
+    const mod = ns?.default ?? ns;
+    if (typeof mod?.mount != "function") throw new RemoteError("INVALID_MODULE", name, "o m\xF3dulo n\xE3o exporta mount()");
+    metric(name, "js", t);
+    const own = realm;
+    return { ...r, module: { mount: (el, props, ctx) => own.mount(mod, el, props, ctx) } };
+  } catch (e) {
+    realm?.dispose();
+    throw report(isRemoteError(e) ? e : new RemoteError("LOAD_FAILED", name, String(e?.message ?? e), e), resolved);
+  }
+}
+function noFrames(_target, name) {
+  return Promise.reject(new RemoteError("MOUNT_FAILED", name, 'isolate="iframe" precisa de enableIframe(), de vitral/iframe'));
+}
+function createRealm(name, registry) {
+  const host = document;
+  const frame = host.createElement("iframe");
+  frame.setAttribute("data-vitral-reframe", name);
+  frame.setAttribute("aria-hidden", "true");
+  frame.tabIndex = -1;
+  frame.style.display = "none";
+  host.body.appendChild(frame);
+  const w = frame.contentWindow;
+  const d = w.document;
+  d.open();
+  d.close();
+  const realHead = d.head;
+  const inFrame = d.createElement.bind(d);
+  const script = d.createElement("script");
+  script.nonce = host.querySelector("script[nonce]")?.nonce ?? "";
+  script.textContent = REFRAME_SCRIPT;
+  realHead.appendChild(script);
+  const load2 = w.__vitral;
+  delete w.__vitral;
+  const head = host.createElement("div");
+  head.setAttribute("data-vitral-head", "");
+  head.hidden = true;
+  let root = null;
+  let body = head;
+  let ctx = null;
+  const scope = () => root ?? head;
+  const ctrl = new AbortController();
+  const listen = (target, own) => {
+    const add = own?.addEventListener;
+    const remove = own?.removeEventListener;
+    return {
+      addEventListener(type, fn, o) {
+        if (own && OWN.test(type)) return add.call(own, type, fn, o);
+        const opts = typeof o == "object" ? o : { capture: !!o };
+        const signal = opts.signal && AbortSignal.any ? AbortSignal.any([opts.signal, ctrl.signal]) : ctrl.signal;
+        target.addEventListener(type, fn, { ...opts, signal });
+      },
+      removeEventListener(type, fn, o) {
+        if (own && OWN.test(type)) return remove.call(own, type, fn, o);
+        target.removeEventListener(type, fn, o);
+      }
+    };
+  };
+  const scoped = Object.getPrototypeOf(registry) !== customElements;
+  const createElement = (tag, o) => {
+    if (/^script$/i.test(tag)) return inFrame(tag);
+    if (scoped && !o?.customElementRegistry)
+      try {
+        return host.createElement(tag, { ...o, customElementRegistry: registry });
+      } catch {
+      }
+    return host.createElement(tag, o);
+  };
+  const fromHost = {};
+  for (const k of DOC_FNS) fromHost[k] = host[k].bind(host);
+  set(d, {
+    ...fromHost,
+    ...listen(host, null),
+    createElement,
+    querySelector: (s) => scope().querySelector(s),
+    querySelectorAll: (s) => scope().querySelectorAll(s),
+    getElementById: (id) => scope().querySelector(`#${CSS.escape(id)}`),
+    getElementsByClassName: (c) => scope().querySelectorAll(c.trim().split(/\s+/).map((x) => "." + CSS.escape(x)).join("")),
+    getElementsByTagName: (t) => scope().querySelectorAll(t),
+    getElementsByName: (n) => scope().querySelectorAll(`[name="${CSS.escape(n)}"]`),
+    elementFromPoint: (x, y) => (root ?? host).elementFromPoint(x, y),
+    elementsFromPoint: (x, y) => (root ?? host).elementsFromPoint(x, y)
+  });
+  get(d, {
+    head: () => head,
+    body: () => body,
+    documentElement: () => host.documentElement,
+    activeElement: () => root?.activeElement ?? host.body
+  });
+  const redirect = (el) => {
+    const append = el.appendChild;
+    const before = el.insertBefore;
+    set(el, {
+      appendChild: (n) => n.nodeName == "SCRIPT" ? realHead.appendChild(n) : append.call(el, n),
+      insertBefore: (n, ref) => n.nodeName == "SCRIPT" ? realHead.appendChild(n) : before.call(el, n, ref)
+    });
+  };
+  redirect(head);
+  const view = {};
+  for (const k of VIEW) view[k] = () => window[k];
+  get(w, view);
+  const viewFns = {};
+  for (const k of VIEW_FNS) viewFns[k] = window[k].bind(window);
+  set(w, { ...viewFns, ...listen(window, w), HTMLElement, customElements: registry });
+  w.addEventListener("error", (e) => ctx?.reportError(e.error ?? e.message));
+  w.addEventListener("unhandledrejection", (e) => ctx?.reportError(e.reason));
+  const h = w.history;
+  const push = h.pushState;
+  const replace = h.replaceState;
+  const go = (fn, method) => (state, title, url) => {
+    fn.call(h, state, title, url);
+    const href = w.location.href;
+    if (href === location.href) return;
+    history[method](state, "", href);
+    dispatchEvent(new PopStateEvent("popstate", { state }));
+    protocol().events.emit("vitral:navigate", location.pathname + location.search + location.hash);
+  };
+  set(h, { pushState: go(push, "pushState"), replaceState: go(replace, "replaceState") });
+  const pull = () => {
+    const old = w.location.href;
+    if (old === location.href) return;
+    try {
+      replace.call(h, history.state, "", location.href);
+    } catch {
+      return;
+    }
+    w.dispatchEvent(new w.PopStateEvent("popstate", { state: history.state }));
+    if (old.split("#")[1] !== location.href.split("#")[1]) w.dispatchEvent(new w.HashChangeEvent("hashchange", { oldURL: old, newURL: location.href }));
+  };
+  addEventListener("popstate", pull, { signal: ctrl.signal });
+  globalThis.navigation?.addEventListener("currententrychange", pull, { signal: ctrl.signal });
+  const dispose = () => {
+    ctx = null;
+    ctrl.abort();
+    head.remove();
+    frame.remove();
+  };
+  return {
+    load: (url) => {
+      if (!load2) throw new RemoteError("LOAD_FAILED", name, "a CSP bloqueou o script do iframe do isolate: 'reframe' (libere o hash de REFRAME_SCRIPT ou use nonce)");
+      return load2(url);
+    },
+    async mount(mod, el, props, c) {
+      ctx = c;
+      root = c.shadowRoot;
+      if (root) root.prepend(head);
+      body = c.portalContainer ?? el;
+      if (body !== head) redirect(body);
+      pull();
+      let handle;
+      try {
+        handle = await mod.mount(el, props, c);
+      } catch (e) {
+        dispose();
+        throw e;
+      }
+      return {
+        update: (next) => handle.update?.(next),
+        unmount() {
+          try {
+            handle.unmount();
+          } finally {
+            dispose();
+          }
+        }
+      };
+    },
+    dispose
+  };
+}
+export {
+  REFRAME_SCRIPT,
+  load,
+  noFrames
+};

package/dist/routes.d.ts

@@ -1,9 +1,8 @@
-import { P as Props } from './types-CA2p9KHC.js';
-import { S as SlotStatus } from './slot-UPg6ob9v.js';
+import { R as Routes, a as RouteMatch } from './match-CMBM_jLW.js';
+import { P as Props } from './types-DUtcF3HO.js';
+import { S as SlotStatus } from './slot-D49L1rdU.js';
 import './errors-kjBv6IH_.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
@@ -11,14 +10,6 @@ interface RoutesOptions {
      */
     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).
@@ -53,4 +44,4 @@ declare global {
     }
 }
 
-export { type RouteMatch, type Routes, type RoutesOptions, VitralOutletElement, defineVitralOutlet, matchRoute, routes };
+export { RouteMatch, Routes, type RoutesOptions, VitralOutletElement, defineVitralOutlet, matchRoute, routes };