-
Notifications
You must be signed in to change notification settings - Fork 15
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
476abc3
commit 5e07901
Showing
25 changed files
with
355 additions
and
30 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,240 @@ | ||
| --- | ||
| import { ComponentParser } from 'sveld' | ||
| import path from 'path' | ||
| import sveltePreprocess from 'svelte-preprocess' | ||
| import * as svelte from 'svelte/compiler' | ||
| import fs from 'fs' | ||
| import dashify from 'dashify' | ||
| import { Code } from 'astro:components' | ||
| import { marked } from 'marked' | ||
| const __dirname = path.dirname(new URL(import.meta.url).pathname) | ||
| const componentPath = path.resolve( | ||
| __dirname, | ||
| '../../../src/lib', | ||
| Astro.props.component, | ||
| ) | ||
| const src = await fs.promises.readFile(componentPath, 'utf-8') | ||
| const filename = path.basename(componentPath, '.svelte') | ||
| const { code } = await svelte.preprocess(src, sveltePreprocess(), { | ||
| filename, | ||
| }) | ||
| const data = new ComponentParser({ | ||
| verbose: false, | ||
| }).parseSvelteComponent(code, { | ||
| filePath: filename, | ||
| moduleName: filename, | ||
| }) | ||
| const props = data.props | ||
| .sort((a, b) => a.name.localeCompare(b.name)) | ||
| .filter((prop) => !prop.name.startsWith('get')) | ||
| const slots = data.slots.sort((a, b) => { | ||
| if (a.default) return -1 | ||
| if (b.default) return 1 | ||
| return a.name!.localeCompare(b.name!) | ||
| }) | ||
| const events = data.events.sort((a, b) => a.name.localeCompare(b.name)) | ||
| const typedefs = data.typedefs.sort((a, b) => a.name.localeCompare(b.name)) | ||
| const rest_props = data.rest_props | ||
| function formatCodeType(type: any) { | ||
| if (!type || type === 'undefined') return '' | ||
| return type.replace( | ||
| /[{}]/g, | ||
| (c: string) => ({ '{': '{', '}': '}' })[c], | ||
| ) | ||
| // .replace(/\|/g, '|') | ||
| } | ||
| function formatCodeValue(value: any) { | ||
| if (!value) { | ||
| return '' | ||
| } | ||
| return value | ||
| .replace(/[{}]/g, (c: string) => ({ '{': '{', '}': '}' })[c]) | ||
| .replace(/`/g, '\\`') | ||
| .replace(/\|/g, '|') | ||
| } | ||
| function formatDescription(description: string) { | ||
| if ( | ||
| description === undefined || | ||
| description === 'undefined' || | ||
| description.trim().length === 0 | ||
| ) | ||
| return '' | ||
| return marked.parse(description, { | ||
| breaks: true, | ||
| }) | ||
| } | ||
| function formatEventDetail(detail: any) { | ||
| if (detail === undefined || detail === 'undefined') return '' | ||
| return formatCodeType(detail.replace(/\n/g, ' ')) | ||
| } | ||
| function getTypeDefs(def: any) { | ||
| if (def.typedefs.length === 0) return '' | ||
| return def.typedefs.map((typedef: any) => typedef.ts).join('\n\n') | ||
| } | ||
| --- | ||
|
|
||
| <style> | ||
| td { | ||
| @apply text-sm; | ||
| } | ||
| td code { | ||
| @apply !mt-0; | ||
| } | ||
|
|
||
| table div { | ||
| @apply !mt-0; | ||
| } | ||
| </style> | ||
|
|
||
| { | ||
| typedefs.length > 0 && ( | ||
| <> | ||
| <h3>Types</h3> | ||
| <div class="text-sm md:text-base"> | ||
| <Code code={getTypeDefs(data)} lang="typescript" /> | ||
| </div> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| { | ||
| props.length > 0 && ( | ||
| <> | ||
| <h3 id="props"> | ||
| <a href="#props">Props</a> | ||
| </h3> | ||
| <table> | ||
| <thead> | ||
| <tr> | ||
| <th>Name</th> | ||
| <th>Description</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| {props.map((prop) => ( | ||
| <tr> | ||
| <td class="align-top"> | ||
| <div class="pt-2">{prop.name}</div> | ||
| </td> | ||
| <td> | ||
| <div class="flex gap-1 pt-1"> | ||
| <div class="inline-flex flex-wrap gap-1"> | ||
| {prop.type && | ||
| prop.type | ||
| .split(/\s?\|\s?/g) | ||
| .map((type) => formatCodeType(type)) | ||
| .filter(Boolean) | ||
| .map((type) => ( | ||
| <code title="Prop type" class="whitespace-nowrap"> | ||
| {type} | ||
| </code> | ||
| ))} | ||
| </div> | ||
| {prop.value && prop.kind !== 'function' && ( | ||
| <div class="inline-flex"> | ||
| ={' '} | ||
| <code | ||
| title="Default value" | ||
| class="ml-1 whitespace-nowrap" | ||
| > | ||
| {formatCodeValue(prop.value)} | ||
| </code> | ||
| </div> | ||
| )} | ||
| </div> | ||
| <p | ||
| class="align-top" | ||
| set:html={ | ||
| 'description' in prop | ||
| ? formatDescription(prop.description!) | ||
| : '' | ||
| } | ||
| /> | ||
| </td> | ||
| </tr> | ||
| ))} | ||
| </tbody> | ||
| </table> | ||
| {rest_props && ( | ||
| <p> | ||
| Additional props are passed on to{' '} | ||
| <a href={`/api/components/${dashify(rest_props.name)}`}> | ||
| {rest_props.name} | ||
| </a> | ||
| </p> | ||
| )} | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| { | ||
| slots.length > 0 && ( | ||
| <> | ||
| <h3 id="slots"> | ||
| <a href="#slots">Slots</a> | ||
| </h3> | ||
| <table> | ||
| <thead> | ||
| <tr> | ||
| <th>Name</th> | ||
| <th>Props</th> | ||
| <th>Fallback</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| {slots.map((slot) => ( | ||
| <tr> | ||
| <td>{slot.name === '__default__' ? 'default' : slot.name}</td> | ||
| <td>{slot.slot_props && <code>{slot.slot_props}</code>}</td> | ||
| <td>{slot.fallback && <code>{slot.fallback}</code>}</td> | ||
| </tr> | ||
| ))} | ||
| </tbody> | ||
| </table> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| { | ||
| events.length > 0 && ( | ||
| <> | ||
| <h3 id="events"> | ||
| <a href="#events">Events</a> | ||
| </h3> | ||
| <table> | ||
| <thead> | ||
| <tr> | ||
| <th>Name</th> | ||
| <th>Type</th> | ||
| <th>Detail</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| {events.map((event) => ( | ||
| <tr> | ||
| <td>{event.name}</td> | ||
| <td> | ||
| {event.type && <code>{formatCodeValue(event.type)}</code>} | ||
| </td> | ||
| <td> | ||
| {'detail' in event && event.detail && ( | ||
| <code>{formatEventDetail(event.detail)}</code> | ||
| )} | ||
| </td> | ||
| </tr> | ||
| ))} | ||
| </tbody> | ||
| </table> | ||
| </> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.