Hindsight

metonym
1

Generate prop documentation for Svelte components

hindsight

Generate prop documentation for Svelte components.

NOTE This is a work in progress. See the v0.1.0 project roadmap.

The aim of this project is to quickly generate documentation for a Svelte component given its exported properties. The output format could be text, markdown or JSON.

Motivation

The easiest way to annotate a component property is to write a trailing comment.

In the following example, we know there are three possible values for kind: "primary," "secondary" or "tertiary." We also know that "primary" is the default value.

<script>
  export let kind = "primary"; // 'primary' | 'secondary' | 'tertiary'
</script>

As a compiler, svelte supports parsing and walking components as an AST. Therefore, it is straightforward to extract trailing comments for a writable variable declaration.

Approach

The input is a glob of svelte components. For each component:

Collect writable variables (i.e. let) using the svelte.compile API
Parse component as an AST using the svelte.parse API
Walk the AST and annotate types (prop name/value/default value)

Quick Start

npx hindsight 'src/**/*.svelte'

Usage

CLI

yarn add -D hindsight
yarn run hindsight 'src/**/*.svelte'

Node.js

const hindsight = require("hindsight");

(async () => {
  const types = await hindsight({ include: ["temp/**/*.{svelte,html}"] });
})();

License

MIT

Top categories