Package Exports

hydrate-text

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (hydrate-text) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

hydrate-text

A small, dependency-free and strongly typed template engine.

Features

Light-weight. Less than 1 KiB (actual size depends on imported functions).
Dependency-free. Only bundled JavaScript files and TypeScript type declarations are included.
Tree-shakable. Only imported code comes to your bundle.
Strongly typed with TypeScript. All types are exported alongside with the core functions.
Flexible interpolation options change. Change variables' markers in each function or use a special function to configure them once for further usage.

Examples

import { hydrateText } from "hydrate-text";

// "Hello, John!"
console.log(
  hydrateText("Hello, {username}!", {
    username: "John",
  }),
);

// "/users/42"
console.log(
  hydrateText(
    "/users/:id",
    { id: 42 },
    {
      prefix: ":",
      suffix: "",
    },
  ),
);

TypeScript checks that all the variables defined in the given string are provided.

console.log(
  hydrateText(
    "Hello, {username}!",
    // No errors
    {
      username: "John",
    },
  ),
);

console.log(
  hydrateText(
    "Hello, {username}!",
    // Error: `username` is missing
    {},
  ),
);

Interpolation options can be configured via configureHydrateText function, that returns hydrateText function as a result.

import { configureHydrateText } from "hydrate-text";

const hydrateRoute = configureHydrateText({ prefix: ":" });

// "/users/42"
console.log(hydrateRoute("/users/:id", { id: 42 }));

// "/users/42"
console.log(
  hydrateRoute(
    "/users/(id)",
    { id: 42 },
    {
      prefix: "(",
      suffix: ")",
    },
  ),
);

Check out other correct and incorrect usage examples.

Installation

npm

npm install hydrate-text

Yarn

yarn add hydrate-text

API (simplified)

type ValueType = string | boolean | number | bigint;

interface InterpolationOptions {
  prefix: string;
  suffix: string;
}

function hydrateText(
  text: string,
  variables?: Record<string, ValueType>,
  interpolationOptions?: InterpolationOptions,
) {}

function configureHydrateText(
  interpolationOptions: InterpolationOptions,
) => typeof hydrateText;

Check out types.ts file for more information.

Known issues

If a string has more than 8 variables, an error "Type instantiation is excessively deep and possibly infinite" can occur. In this case, it is better to break the string down into several pieces.

Check out the original TypeScript issue for more information.

Background

Why I wrote "hydrate-text" library

License

MIT