Utilitaires Flow

Quelques fonctions facilitent la composition du document et la validation des fragments.

composeShell#

composeShell enchaîne les transformations de la structure HTML et ignore les valeurs de transformation falsy.

import { NativeAdapter, createAdapter } from "@vincle/flow/adapters";
import { composeShell, injectIntoHead } from "@vincle/flow/utils";

const metadata = () => (html: string) => injectIntoHead(html, "<title>Home</title>");

const MyAdapter = createAdapter({
  ...NativeAdapter,
  transformShell: composeShell(NativeAdapter.transformShell, metadata()),
});

function composeShell(
  ...transforms: Array<((shell: string, ctx: ShellContext) => string) | undefined | null | false>
): (shell: string, ctx: ShellContext) => string;

injectIntoHead#

injectIntoHead insère du contenu dans <head> et crée cet élément si nécessaire.

import { injectIntoHead } from "@vincle/flow/utils";

const shell = "<html><body>…</body></html>";
const patched = injectIntoHead(shell, `<link rel="stylesheet" href="/app.css">`);

<html>
  <head>
    <link rel="stylesheet" href="/app.css" />
  </head>
  <body>
    …
  </body>
</html>

function injectIntoHead(html: string, content: string): string;

assertFragmentId#

assertFragmentId exige une lettre initiale, suivie de lettres, chiffres, tirets ou underscores. Validez les identifiants avant de les utiliser dans le document.

import { assertFragmentId } from "@vincle/flow/utils";

assertFragmentId(userInput, "Slot name"); // throws if invalid

function assertFragmentId(id: string, label: string): void;