TypeScript

The package is written in TypeScript, and the types are not collected into one shared .d.ts: every subpath has its own. Import a component and you get its types without pulling in the declarations of all the others.

What a component subpath exports

import {
  GrButton,
  type GrButtonProps,
  type GrButtonInstance,
  type GrButtonTone,
} from '@feugene/granularity/components/GrButton'

Three types are exported next to a component — GrXProps, GrXEmits and GrXInstance, the last one on components that expose something through defineExpose. The set is held by a gate in the package. The other names — GrXConfigurableProps, grXConfig, grXSafelist — are not on every component. The naming scheme is still the same for every component, which is more useful than a list:

GrXInstance comes in handy wherever the component is addressed by reference:

<script setup lang="ts">
import { useTemplateRef } from 'vue'
import type { GrDataTableInstance } from '@feugene/granularity/components/GrDataTable'

const table = useTemplateRef<GrDataTableInstance>('table')
</script>

Composite components also hand out the types of their data — for the table that is GrDataColumn, GrDataTableRowKey, GrDataTableSortDir and everything else you would otherwise have to declare in your own code and keep in sync by hand.

Types unrelated to components

• @feugene/granularity/tokens — the per-component token registry grComponentTokens as typed data, with its types. The source is the same component tokens.json files the CSS is generated from, so it cannot drift from the real values.
• @feugene/granularity-tokens — the global tokens the same way: grFoundationTokens, grRoleTokens, grDerivedTokens, the grThemeCatalog theme catalogue and the GrThemeData type of theme data. The values live in the theme data and are loaded on demand.
• virtual:granum/themes — the build’s mode manifest. The types of granum’s virtual modules come with a single /// <reference types="@feugene/granum/client" /> line in any .d.ts; the mode and theme names for your own switch are the GrModeName and GrThemeId types from the core root.
• @feugene/granularity/directives — the directives together with the types of their arguments.
• @feugene/granularity/fileValidation — file validation rules as a separate module: there the types are the main value rather than a side effect.

JetBrains: completion out of the box

The package builds and publishes web-types.json — a format the JetBrains IDEs read by themselves. Nothing needs configuring: after installation WebStorm, PhpStorm and IDEA know the package’s components in templates, their props with defaults and descriptions, and their slots. Events and directives are not in the file.

VS Code and the rest

Project setup

The package requires nothing specific, but two points save an evening:

If the types are “not found” specifically on a subpath while the root imports fine, it is almost always the first point; the case with the compiler’s own message is worked through on the troubleshooting page.