comp-parser

Comp Parser

📃Extract props, actions, slots and css variables from Svelte components.

comp-parser📃

Extract props, actions, slots and css variables from a Svelte file.


This is a fork of svelte-get-component-info. Credit to the original author el3um4s for doing all the hard work. I forked this project to add additional features necessary for another library I'm working on which may not align with the original author's vision.

The problem

You want to document your Svelte components, but you don't want to manually write the documentation for each component. You want to extract the information from the component itself.

This solution

This library provides a single function that takes a path to a Svelte file and returns an object with the props, actions, slots and css variables.

At the moment, it only works with local Svelte files, however, it may eventually be extended to work with remote files.

Installation

This module is distributed via npm and should be installed as one of your project's dependencies:

npm i comp-parser
pnpm i comp-parser

Usage

import { getInfo, type SvelteInformation } from "comp-parser";

const info: SvelteInformation = getInfo("./src/lib/hello.svelte");

info will be an object with the following structure:

{
    "props": [
        { "name": "color", "type":"", "defaultValue": "red" },
        { "name": "steps", "type": "number", "defaultValue": "8" }
        { "name": "title", "type": "string" },
        { "name": "variant", "type": "'success' | 'error' | 'warning'", "defaultValue": "success"}
        { "name": "description"}
    ],
    "actions": [
        { "name": "click" },
        { "name": "hover" },
        { "name": "customAction" }
    ],
    "slots": [
        { "anonymous": true },
        { "name": "header", "anonymous": false },
        { "name": "footer", "anonymous": false }
    ],
    "css": [
      { "name": "--color-primary" },
      { "name": "--color-secondary" }
    ]
}

Features added:

  • Support for multiline types
  • Support for multiline default values
  • Format code string before parsing (format your components however you like, this library will handle them all the same)
  • Move tests from Jest to Vitest
  • Continuous Integration with GitHub Actions
  • Releases with changesets

Top categories

svelte logo

Want a Svelte site built?

Hire a Svelte developer
Loading Svelte Themes