https://github.com/faultyserver/ts-docs-loader

Generate documentation for typescript files on-the-fly through webpack imports.
https://github.com/faultyserver/ts-docs-loader

Last synced: 13 days ago
JSON representation

Generate documentation for typescript files on-the-fly through webpack imports.

• Host: GitHub
• URL: https://github.com/faultyserver/ts-docs-loader
• Owner: faultyserver
• Created: 2023-09-10T17:26:33.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-11-29T21:39:09.000Z (11 months ago)
• Last Synced: 2023-11-30T20:25:15.606Z (11 months ago)
• Language: JavaScript
• Size: 668 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 10
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# ts-docs-loader

Generate and import documentation for typescript components, interfaces, functions, aliases, and more, all on-the-fly and efficiently through a webpack loader.

## Usage

Install the loader as a dependency (likely a devDependency, since this isn't needed at runtime):

```shell

pnpm add -D @faulty/ts-docs-loader

```

Add an entry to `resolveLoader` in your webpack config:

```javascript

{

    ...,

    resolveLoader: {

        'doc': '@faulty/ts-docs-loader',

    }

}

```

Then just import the file you want documentation for using the direct loader syntax:

```typescript

import docs from '!doc!path/to/your/file';

// `.exports` is a map of entity names to their type documentation

docs.exports['Props'];

// `.links` is a map of types that are referenced by other types in the exports

docs.links;

```

Configuring the loader is complicated because webpack doesn't provide a standard options object to use. Instead, configurations must be serialized as query parameters on the loader path:

```javascript

{

    resolveLoader: {

        'doc': `@faulty/ts-docs-loader?basePath=${process.cwd()}`

    }

}

```

## Development

This repo uses `pnpm` as the package manager.

More steps will be added later.

## Credit

This library is directly inspired by the documentation transformer and packager created by [React Spectrum from Adobe](https://github.com/adobe/react-spectrum/blob/639548c489d5d4ef3225f62c9a64a474648d183d/packages/dev/parcel-transformer-docs/DocsTransformer.js), initially adapted to work with Webpack instead of Parcel.

Since the initial re-implementation, various features have been added to accommodate more type syntax, resolve types through libraries using TypeScript itself, and implement more type evaluation to give more complete results.