Skip to content

CONCEPT Cited by 1 source

Use-directive as compilation marker

Use-directive as compilation marker names the idiom where a string literal placed at the top of a function body (or file) acts as a compile-time flag that tells a compiler plugin to apply a special transformation to that function.

The string looks like a no-op statement in JavaScript source ("use workflow";), but a compiler-aware tool reads it as a structural signal — "transform the code below differently from the default path."

Canonical instances

  • "use client" (React Server Components) — marks a component as client-rendered, tells the React compiler to emit a client-bundle entry for it.
  • "use server" (React Server Actions) — marks a function as a server action, tells the compiler to emit an RPC endpoint that serialises the function's arguments over the wire.
  • "use workflow" (Vercel Workflow DevKit, 2026-04-21) — marks a function as a workflow orchestrator, tells WDK's SWC plugin to compile it into an orchestrator that runs in a sandboxed virtual environment.
  • "use step" (Vercel Workflow DevKit) — marks a function as a workflow step, tells the plugin to compile it into an HTTP handler executed on the server.
  • "use strict" (ECMAScript) — the historical antecedent: a string literal that changes runtime behaviour when present at the top of a function/file.

Why the idiom is load-bearing

The directive string is cheaper than a decorator, annotation, or import because:

  1. Syntactic nothing — existing JS parsers accept it unchanged (a free expression statement with no effect).
  2. Regex-detectable — a compiler plugin can do cheap-first directive detection with a regex over source text before committing to a full AST parse. WDK's HMR hook uses /^\s*(['"])use workflow\1;?\s*$/m as the gate before triggering an esbuild rebuild.
  3. Grep-friendly — developers and tools can find all step / workflow / client / server functions with rg '^\s*["'"'"']use workflow'.
  4. No import of magic names — unlike decorators, the marker has no runtime binding; the file doesn't need to import the framework at the directive-use site.

The compile-time-split-by-directive pattern

Use-directive markers operationalise concepts/build-time-vs-runtime-phase-separation: at build time, the compiler walks the AST, finds functions marked with the directive, and applies a directive-specific transform. The one source file produces multiple deployment artefacts — in WDK's case, three outputs (patterns/swc-plugin-three-mode-transform: client mode + step mode + workflow mode).

The pattern generalises beyond React-land. Any framework that does compile-time code splitting can adopt directive strings as the split-marker language.

Seen in

Last updated · 476 distilled / 1,218 read