Val

Getting started

Create your first Val content file

Content in Val is always defined in `.val.ts` (or `.js`) files.

NOTE: the init script will generate an example Val content file (unless you opt out of it).

Requirements

Val content files are evaluated by Val, therefore they need to abide a set of requirements.

If you use the eslint plugins these requirements will be enforced. You can also validate val files using the @valbuild/cli: `npx -p @valbuild/cli val validate`.

they must export a default content definition (`c.define`) where the first argument equals the path of the file relative to the `val.config` file; and
they must be declared in the `val.modules` file; and
they must have a default export that is `c.define`; and
they can only import Val related files or types (using `import type { MyType } from "./otherModule.ts"`)

Val content file example

// ./examples/val/example.val.ts
import { s /* s = schema */, c /* c = content */ } from "../../val.config";

/**
 * This is the schema for the content. It defines the structure of the content and the types of each field.
 */
export const schema = s.object({
  /**
   * Basic text field
   */
  text: s.string(),
});

/**
 * This is the content definition. Add your content below.
 *
 * NOTE: the first argument is the path of the file.
 */
export default c.define("/examples/val/example.val.ts", schema, {
  text: "Basic text content",
});

The val.modules file

Once you have created your Val content file, it must be declared in the `val.modules.ts` (or `.js`) file in the project root folder.

import { modules } from "@valbuild/next";
import { config } from "./val.config";

export default modules(config, [
  // Add your modules here
  { def: () => import("./examples/val/example.val") },
]);

Using Val in Client Components

In client components you can access your content with the `useVal` hook:

// ./app/page.tsx
"use client";
import { useVal } from "../val/val.client";
import exampleVal from "../examples/val/example.val";

export default function Home() {
  const { text } = useVal(exampleVal);
  return <main>{text}</main>;
}

Using Val in React Server Components

In React Server components you can access your content with the `fetchVal` function:

// ./app/page.tsx
"use server";
import { fetchVal } from "../val/val.rsc";
import exampleVal from "../examples/val/example.val";

export default async function Home() {
  const { text } = await fetchVal(exampleVal);
  return <main>{text}</main>;
}