Annotation Syntax

Learn all the ways to annotate patterns and components in your code.

Pattern Annotations #

Use uipool-pattern: to mark where a UI pattern is implemented:

// uipool-pattern: login-flow
function LoginPage() { ... }

/* uipool-pattern: data-table */
const TableComponent = ...

The legacy pattern: syntax is still supported for backward compatibility, but we recommend using uipool-pattern: for future-proof scanning.

Component Annotations #

Use uipool-component: to track component usage:

// uipool-component: button-primary
export const PrimaryButton = () => { ... }

/* uipool-component: modal-dialog */
export function ModalDialog() { ... }

Components appear in a separate components array in the scan report, enabling pattern-to-component mapping in UiPool.

Supported Comment Syntaxes #

Syntax	File Types
// ...	JavaScript, TypeScript, JSX, TSX, CSS, SCSS, LESS
/* ... */	JavaScript, TypeScript, CSS, SCSS, LESS, Vue
# ...	Markdown, Python, YAML
<!-- ... -->	HTML, Vue templates, Angular templates, MDX

HTML & Template Annotations #

For Angular, Vue templates, and HTML files, use HTML comments:

<!-- uipool-pattern: login-flow -->
<div class="login-container">
  <!-- uipool-component: input-field -->
  <input type="email" />

  <!-- uipool-component: button-primary -->
  <button type="submit">Sign In</button>
</div>

Flexible Whitespace #

Extra spaces are allowed in all formats:

//   uipool-pattern:    login-flow
/*   uipool-component:   button-primary   */
<!--   uipool-pattern:   login-flow   -->

Case Insensitive #

Annotation keywords are case-insensitive:

// uipool-pattern: login-flow
// UIPOOL-PATTERN: login-flow
// UiPool-Pattern: login-flow

ID Format #

Pattern and component IDs can contain:

Letters (a-z, A-Z)
Numbers (0-9)
Dashes (-)
Underscores (_)

Examples:

login-flowdata_tableUserDashboardform-wizard-v2button-primary